Files
JY1.0/src/views/PurchasingCenter/InvoiceSettlementApplication/index.vue
2019-03-04 19:00:34 +08:00

744 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<el-card>
<span>发票号:</span>
<el-input v-model="invoiceNum" placeholder="发票号" size="small" clearable/>
<el-button type="success" size="small" icon="el-icon-search" style="margin-left:10px" @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
<el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:10px" @click="createOrder()">创建</el-button>
</el-card>
<el-card>
<h4 style="margin-top: 5px">发票结算申请单</h4>
<el-table id="expandTable" :data="tableData1" border highlight-current-row style="width: 100%;height: 400px;overflow:auto" size="mini" @row-click="searchTable2">
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" inline class="demo-table-expand">
<el-row>
<el-col :span="6">
<viewer>
<img :src="scope.row.scanSrc" alt="发票扫描件" height="120px">
</viewer>
</el-col>
<el-col :span="6">
<el-form-item label="已付款项">
<span>{{ scope.row.已付款项 }}</span>
</el-form-item><br>
<el-form-item label="尚欠金额">
<span>{{ scope.row.尚欠金额 }}</span>
</el-form-item><br>
<el-form-item label="备注">
<span>{{ scope.row.备注 }}</span>
</el-form-item><br>
</el-col>
<el-col :span="6">
<el-form-item label="是否费用类发票">
<span>{{ scope.row.是否费用类 }}</span>
</el-form-item><br>
<el-form-item label="税额">
<span>{{ scope.row.税额 }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
</el-table-column>
<el-table-column label="发票号" align="center" min-width="90">
<template slot-scope="scope">
{{ scope.row.发票号 }}
</template>
</el-table-column>
<el-table-column label="发票金额" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.发票金额 }}
</template>
</el-table-column>
<el-table-column label="申请人" align="center" min-width="60">
<template slot-scope="scope">
{{ scope.row.申请人姓名 ? scope.row.申请人姓名 : '未提交' }}
</template>
</el-table-column>
<el-table-column label="申请时间" align="center" min-width="110">
<template slot-scope="scope">
{{ scope.row.申请时间 ? scope.row.申请时间 : '—' }}
</template>
</el-table-column>
<el-table-column label="采购审批" align="center" min-width="60">
<template slot-scope="scope">
{{ scope.row.姓名 ? scope.row.姓名 : '未审批' }}
</template>
</el-table-column>
<el-table-column label="审批时间" align="center" min-width="110">
<template slot-scope="scope">
{{ scope.row.审批时间 ? scope.row.审批时间 : '—' }}
</template>
</el-table-column>
<el-table-column label="生产审批" align="center" min-width="60">
<template slot-scope="scope">
{{ scope.row.姓名 ? scope.row.姓名 : '未审批' }}
</template>
</el-table-column>
<el-table-column label="审批时间" align="center" min-width="110">
<template slot-scope="scope">
{{ scope.row.审批时间 ? scope.row.审批时间 : '—' }}
</template>
</el-table-column>
<el-table-column label="财务审批" align="center" min-width="60">
<template slot-scope="scope">
{{ scope.row.姓名 ? scope.row.姓名 : '未审批' }}
</template>
</el-table-column>
<el-table-column label="审批时间" align="center" min-width="110">
<template slot-scope="scope">
{{ scope.row.审批时间 ? scope.row.审批时间 : '—' }}
</template>
</el-table-column>
<el-table-column label="总经理审批" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.姓名 ? scope.row.姓名 : '未审批' }}
</template>
</el-table-column>
<el-table-column label="审批时间" align="center" min-width="110">
<template slot-scope="scope">
{{ scope.row.审批时间 ? scope.row.审批时间 : '—' }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="300">
<template slot-scope="scope">
<el-button :disabled="Number(scope.row.是否提交申请)===1" type="primary" icon="el-icon-edit" size="mini" style="margin-left:10px" @click="handleEdit(scope.row)">编辑</el-button>
<el-button :disabled="Number(scope.row.是否提交申请)===1" type="danger" icon="el-icon-delete" size="mini" style="margin-left:10px" @click="handleDelete(scope.row)">删除</el-button>
<el-button :disabled="Number(scope.row.是否提交申请)===1" type="primary" size="mini" style="margin-left:10px" @click="submitApply(scope.row)">提交申请</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="pageCurrent1"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize1"
:total="total1"
style="display:inline-block;width:50%"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"/>
</div>
</el-card>
<el-card>
<h4 style="margin-top: 5px;display: inline-block;width: 150px;">采购入库单</h4>
<span>发票号</span>
<el-input v-model="invoiceNumber" size="small" placeholder="请选择发票结算申请单" readonly/>
<el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:10px" @click="addInStoreOrder()">追加入库单</el-button>
<el-button :disabled="group2.length === 0" type="danger" size="small" icon="el-icon-delete" style="margin-left:10px" @click="deleteTable2()">移除入库单</el-button>
<el-table ref="multipleTable" :data="tableData2" border highlight-current-row style="width: 100%;max-height: 250px;" height="250px" size="mini" @row-click="searchTable3" @selection-change="handleSelectionChange2">
<el-table-column type="selection" align="center" width="35"/>
<el-table-column label="入库单号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.入库单号 }}
</template>
</el-table-column>
<el-table-column label="入库日期" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.入库日期 }}
</template>
</el-table-column>
<el-table-column label="仓库" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.仓库 }}
</template>
</el-table-column>
<el-table-column label="合同编号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.合同编号 }}
</template>
</el-table-column>
<el-table-column label="合同名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.合同名称 }}
</template>
</el-table-column>
<el-table-column label="到货日期" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.到货日期 }}
</template>
</el-table-column>
<el-table-column label="业务号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.业务号 }}
</template>
</el-table-column>
<el-table-column label="供应商" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.供应商 }}
</template>
</el-table-column>
<el-table-column label="业务员" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.业务员 }}
</template>
</el-table-column>
<el-table-column label="业务类型" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.业务类型 }}
</template>
</el-table-column>
<el-table-column label="采购类型" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.采购类型 }}
</template>
</el-table-column>
<el-table-column label="入库类型" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.入库类型 }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
</el-table>
<h4>采购入库单明细</h4>
<el-table :data="tableData3" border style="width: 100%;max-height: 250px;" height="250px" size="mini">
<el-table-column label="名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.名称 }}
</template>
</el-table-column>
<el-table-column label="物料型号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.型号 }}
</template>
</el-table-column>
<el-table-column label="物料规格" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.规格 }}
</template>
</el-table-column>
<el-table-column label="零件图号" align="center" min-width="130">
<template slot-scope="scope">
{{ scope.row.图号 }}
</template>
</el-table-column>
<el-table-column label="数量" align="center" min-width="100" prop="数量">
<template slot-scope="scope">
{{ scope.row.数量 }}
</template>
</el-table-column>
<el-table-column label="本币单价" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.本币单价 }}
</template>
</el-table-column>
<el-table-column label="本币金额" align="center" min-width="100" prop="sum">
<template slot-scope="scope">
{{ scope.row.sum = scope.row.本币单价 * scope.row.数量 }}
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog :title="title1" :visible.sync="dialogVisible1" center style="min-height: 300px" width="650px">
<el-form ref="form1" :model="form1" :rules="rules1" label-position="right" label-width="90px">
<el-row>
<el-col :span="12">
<el-form-item label="发票号" prop="invoiceNum">
<el-input v-model="form1.invoiceNum" size="small" placeholder="发票号"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票金额" prop="money">
<el-input v-model="form1.money" size="small" placeholder="发票金额"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="已付款项">
<el-input v-model="form1.paid" size="small" placeholder="已付款项"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="尚欠金额">
<el-input v-model="form1.unpaid" size="small" placeholder="尚欠金额"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="税额">
<el-input v-model="form1.tax" size="small" placeholder="税额"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否费用类">
<el-input v-model="form1.isCost" size="small" placeholder="是否费用类发票"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="备注">
<el-input v-model="form1.remark" size="small" placeholder="备注" style="width: 500px"/>
</el-form-item>
<b v-show="title1 === '创建发票结算申请单'" style="float:left;color: #f56c6c;margin-top: 13px">* </b>
<el-form-item v-show="title1 === '创建发票结算申请单'" label="发票扫描件" style="display: inline-block">
<el-upload
id="invoiceScan"
ref="upload"
:auto-upload="false"
:on-success="uploadSuccess"
:before-upload="beforeUpload"
:on-exceed="warningExceed"
:limit="limit"
:action="upload+'?invoiceNum='+form1.invoiceNum+'&money='+form1.money+'&paid='+form1.paid+'&unpaid='+form1.unpaid+'&tax='+form1.tax+'&isCost='+form1.isCost+'&remark='+form1.remark+'&personId='+id"
list-type="picture-card">
<i class="el-icon-plus"/>
</el-upload>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible1 = false">取消</el-button>
<el-button v-if="title1 === '创建发票结算申请单'" size="small" type="primary" @click="submitAdd()">确定</el-button>
<el-button v-else size="small" type="primary" @click="submitEdit()">确定</el-button>
</div>
</el-dialog>
<el-dialog :title="title2" :visible.sync="dialogVisible2" center style="min-height: 300px" width="800px">
<span>入库单号</span>
<el-input v-model="inboundCardNumber" clearable size="small" style="width:200px" />
<el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 10px 10px" @click="searchInboundCard()">查询</el-button>
<el-table ref="multipleTable" :data="tableData01" border highlight-current-row style="width: 100%;max-height: 250px;" height="250px" size="mini" @row-click="searchTable02" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="35"/>
<el-table-column label="入库单号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.入库单号 }}
</template>
</el-table-column>
<el-table-column label="入库日期" align="center" min-width="100" >
<template slot-scope="scope" value-format="yyyy-MM-dd">
{{ scope.row.入库日期 }}
</template>
</el-table-column>
<el-table-column label="仓库" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.仓库名称 }}
</template>
</el-table-column>
<el-table-column label="合同编号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.采购合同编号 }}
</template>
</el-table-column>
<el-table-column label="到货单号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.到货单号 }}
</template>
</el-table-column>
<el-table-column label="到货日期" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.到货日期 }}
</template>
</el-table-column>
<el-table-column label="业务号" align="center" min-width="60">
<template slot-scope="scope">
{{ scope.row.业务号 }}
</template>
</el-table-column>
<el-table-column label="供应商" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</template>
</el-table-column>
<el-table-column label="业务员" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="业务类型" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.业务类型 }}
</template>
</el-table-column>
<el-table-column label="采购类型" align="center" min-width="80">
<template slot-scope="scope">
{{ scope.row.采购类型 }}
</template>
</el-table-column>
<el-table-column label="入库类别" align="center" min-width="80">
<template slot-scope="scope">
{{ scope.row.入库类别 }}
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
</el-table>
<el-table :data="tableData02" border style="width: 100%;max-height: 250px;" height="250px" size="mini">
<el-table-column label="名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.名称 }}
</template>
</el-table-column>
<el-table-column label="物料型号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.型号 }}
</template>
</el-table-column>
<el-table-column label="物料规格" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.规格 }}
</template>
</el-table-column>
<el-table-column label="零件图号" align="center" min-width="130">
<template slot-scope="scope">
{{ scope.row.图号 }}
</template>
</el-table-column>
<el-table-column label="数量" align="center" min-width="100" prop="数量">
<template slot-scope="scope">
{{ scope.row.数量 }}
</template>
</el-table-column>
<el-table-column label="本币单价" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.本币单价 }}
</template>
</el-table-column>
<el-table-column label="本币金额" align="center" min-width="100" prop="sum">
<template slot-scope="scope">
{{ scope.row.sum = scope.row.本币单价 * scope.row.数量 }}
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible2 = false">取消</el-button>
<el-button :disabled="group1.length===0" size="small" type="primary" @click="submitEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { searchTable1, submitEdit, submitDelete, submitApply, searchTable2, searchInboundCard, searchInboundCardDetail,
addTable2, deleteTable2 } from '@/api/PurchasingCenter/InvoiceSettlementApplication'
import { mapGetters } from 'vuex'
import { uploadInvoiceScan, readFile } from '@/utils/request'
import request from '@/utils/request'
export default {
name: '', // 发票结算申请
data() {
return {
invoiceNum: '',
total1: 0,
pageCurrent1: 1,
pageSize1: 10,
tableData1: [],
applyOrderNum: '',
invoiceNumber: '',
title2: '',
dialogVisible2: false,
tableData2: [],
tableData3: [],
dialogVisible1: false,
title1: '',
form1: {
invoiceNum: '',
money: '',
paid: '',
unpaid: '',
tax: '',
isCost: '',
remark: '',
applyOrderNum: ''
},
rules1: {
invoiceNum: [
{ required: true, message: '请输入发票号' }
],
money: [
{ required: true, message: '请输入开票金额' }
]
},
upload: uploadInvoiceScan,
limit: 1,
tableData01: [],
tableData02: [],
inboundCardNumber: '', // 入库单号
group1: [], // 入库单流水号组
group2: [] // 发票结算申请单明细流水号组
}
},
computed: {
...mapGetters([
'sidebar',
'name',
'id' // 人员编号
])
},
created() {
this.fetchData()
this.searchTable1()
},
methods: {
fetchData() {},
createOrder() {
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
this.form1.invoiceNum = ''
this.form1.money = ''
this.form1.paid = ''
this.form1.unpaid = ''
this.form1.tax = ''
this.form1.isCost = ''
this.form1.remark = ''
this.title1 = '创建发票结算申请单'
this.dialogVisible1 = true
},
searchTable1() {
this.invoiceNum ? this.check1 = 1 : this.check1 = 0
searchTable1(this.check1, this.invoiceNum, this.pageCurrent1, this.pageSize1).then(response => {
this.tableData1 = response.data.rows
this.tableData1.map(v => {
this.$set(v, 'scanSrc', '')
return v
})
for (let i = 0; i < response.data.rows.length; i++) {
this.tableData1[i].scanSrc = this.searchPic(response.data.rows[i], i)
}
this.total1 = response.data.total
})
},
handleEdit(row) {
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
this.form1.invoiceNum = row.发票号
this.form1.money = row.发票金额
this.form1.paid = row.已付款项
this.form1.unpaid = row.尚欠金额
this.form1.tax = row.税额
this.form1.isCost = row.是否费用类
this.form1.remark = row.备注
this.form1.applyOrderNum = row.发票结算申请单流水号
this.title1 = '编辑发票结算申请单'
this.dialogVisible1 = true
},
handleDelete(row) {
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
submitDelete(row.发票结算申请单流水号).then(response => {
if (response.data[0].result === '删除成功') {
this.$message.success('删除成功')
this.searchTable1()
} else if (response.data[0].result === '删除失败') {
this.$message.error('已提交申请,删除失败')
} else { this.$message.error('删除失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
},
async searchPic(row, i) {
const { data } = await request({
url: '',
method: 'post',
data: {
type: '3',
name: `select * from 采购管理_采购发票_附件 where 是否启用 = 1 and 发票交接流水号 = ${row.发票结算申请单流水号}`
}
})
this.tableData1[i].scanSrc = readFile + data[0].文件标识 + '.' + data[0].文件后缀
},
handleSizeChange1(val) {
this.pageCurrent1 = 1
this.pageSize1 = val
this.searchTable1()
},
handleCurrentChange1(val) {
this.pageCurrent1 = val
this.searchTable1()
},
submitApply(row) {
this.$confirm('确认提交申请吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.tableData2.length === 0) {
this.$message.warning('入库单为空')
} else {
submitApply(row.发票结算申请单流水号, this.id).then(response => {
if (response.data[0].result === '1') {
this.$message.success('提交成功')
this.searchTable1()
} else { this.$message.error('提交失败') }
})
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
},
searchInboundCard() {
let check
this.inboundCardNumber ? check = 1 : check = 0
this.tableData01 = []
searchInboundCard(check, this.inboundCardNumber).then(response => {
console.log(response.data)
this.tableData01 = response.data
})
},
searchTable2(row) {
this.applyOrderNum = row.发票结算申请单流水号
this.invoiceNumber = row.发票号
searchTable2(row.发票结算申请单流水号).then(response => {
this.tableData2 = response.data
})
},
searchTable3(row) {
searchInboundCardDetail(row.采购入库单流水号).then(response => {
this.tableData3 = response.data
})
},
beforeUpload(file) { // 上船前检测
const isJPG = /^image\/.*/.test(file.type)
const isLt4M = file.size / 1024 / 1024 < 4
if (!isJPG) {
this.$message.error('只能上传图片。。')
}
if (!isLt4M) {
this.$message.error('上传头像图片大小不能超过 4MB!')
}
return isJPG && isLt4M
},
uploadSuccess(res) { // 上传成功回调
if (res[0].result === '1') {
this.$message.success('增加成功')
this.dialogVisible1 = false
this.searchTable1()
this.$refs.upload.clearFiles()
} else {
this.$message.error('增加失败')
}
},
warningExceed() {
this.$message.error('仅可上传一张发票')
},
addInStoreOrder() {
if (this.applyOrderNum) {
this.title2 = '追加入库单'
this.dialogVisible2 = true
} else {
this.$message.error('请选择发票!')
}
},
submitAdd1() { // 提交新增
this.$refs['form1'].validate((valid) => {
if (valid) {
this.$refs.upload.submit() // 上传图片
} else {
console.log('error submit!!')
return false
}
})
},
submitEdit() { // 提交编辑
this.$refs['form1'].validate((valid) => {
if (valid) {
submitEdit(this.form1.invoiceNum, this.form1.money, this.form1.paid, this.form1.unpaid, this.form1.tax, this.form1.isCost, this.form1.remark, this.form1.applyOrderNum).then(response => {
if (response.data[0].result === '修改成功') {
this.$message.success('编辑成功')
this.dialogVisible1 = false
this.searchTable1()
} else if (response.data[0].result === '修改失败') {
this.$message.error('已提交申请,编辑失败')
} else { this.$message.error('编辑失败') }
})
} else {
console.log('error submit!!')
return false
}
})
},
searchTable02(row) {
searchInboundCardDetail(row.采购入库单流水号).then(response => {
this.tableData02 = response.data
})
},
handleSelectionChange(val) {
this.group1 = val
},
submitAdd2() { // 追加入库单
if (this.group1.length === 0) {
this.$message.warning('请选择入库单')
} else {
const group = []
for (let i = 0; i < this.group1.length; i++) {
group.push(this.group1[i].采购入库单流水号)
}
addTable2(this.applyOrderNum, group).then(response => {
if (response.data[0].result === '1') {
this.$message.success('追加成功')
this.dialogVisible2 = false
searchTable2(this.applyOrderNum).then(response => {
this.tableData2 = response.data
})
} else { this.$message.error('追加失败') }
})
}
},
handleSelectionChange2(val) {
this.group2 = val
},
deleteTable2() { // 移除入库单
if (this.group2.length === 0) {
this.$message.warning('请选择入库单')
} else {
const group = []
for (let i = 0; i < this.group2.length; i++) {
group.push(this.group2[i].发票结算申请单明细流水号组)
}
deleteTable2(group).then(response => {
if (response.data[0].result === '1') {
this.$message.success('移除成功')
this.dialogVisible2 = false
searchTable2(this.applyOrderNum).then(response => {
this.tableData2 = response.data
})
} else { this.$message.error('移除失败') }
})
}
}
}
}
</script>
<style scoped>
.el-card{
margin-bottom: 15px;
}
.el-select{
width:200px
}
.el-input{
width:200px
}
span{
margin: 10px 0 10px 10px;
}
#expandTable .el-form-item{
margin: 0;
}
</style>