Files
JY1.0/src/views/PurchasingCenter/InvoiceSettlementApplication/index.vue
zhangdingyu faab73c1fa 样式
2019-09-18 12:24:50 +08:00

698 lines
28 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>
<div slot="header">
<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="tableData2=[];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>
</div>
<h4 style="margin-top: 5px">发票结算申请单</h4>
<el-table id="expandTable" :data="tableData1" border highlight-current-row style="width: 100%;height: 300px;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 :lg="10" :sm="12">
<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="200">
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</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="115">
<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.审批人1姓名 ? scope.row.审批人1姓名 : '未审批' }}
</template>
</el-table-column>
<el-table-column label="审批时间" align="center" min-width="115">
<template slot-scope="scope">
{{ scope.row.审批1时间 ? scope.row.审批1时间 : '—' }}
</template>
</el-table-column>
<el-table-column label="总经理审批" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.审批人4姓名 ? scope.row.审批人4姓名 : '未审批' }}
</template>
</el-table-column>
<el-table-column label="审批时间" align="center" min-width="115">
<template slot-scope="scope">
{{ scope.row.审批4时间 ? scope.row.审批4时间 : '—' }}
</template>
</el-table-column>
<el-table-column label="财务审批" align="center" min-width="60">
<template slot-scope="scope">
{{ scope.row.审批人3姓名 ? scope.row.审批人3姓名 : '未审批' }}
</template>
</el-table-column>
<el-table-column label="审批时间" align="center" min-width="115">
<template slot-scope="scope">
{{ scope.row.审批3时间 ? scope.row.审批3时间 : '—' }}
</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 :disabled="disabled" type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:10px" @click="addInStoreRecord()">追加入库记录</el-button>
<el-table :data="tableData2" border highlight-current-row 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.采购物料名称 || scope.row.离线物料名称 || scope.row.采购零件名称 }}
</template>
</el-table-column>
<el-table-column label="图号或型号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.采购物料型号 || scope.row.离线物料型号 || scope.row.采购零件图号 }}
</template>
</el-table-column>
<el-table-column label="规格" align="center" min-width="150">
<template slot-scope="scope">
{{ scope.row.采购物料规格 || scope.row.离线物料规格 || scope.row.采购零件规格 }}
</template>
</el-table-column>
<el-table-column label="供应商" align="center" min-width="150">
<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.采购合同编号 || scope.row.离线合同编号 }}
</template>
</el-table-column>
<el-table-column label="合同名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.采购合同名称 || scope.row.离线合同名称 }}
</template>
</el-table-column>
<el-table-column label="到票数量" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.到票数量 }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button :disabled="disabled" type="danger" size="mini" icon="el-icon-delete" @click="deleteTable2(scope.row)">删除</el-button>
</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="供应商" prop="supplierValue">
<el-select v-model="form1.supplierValue" :disabled="title1 === '编辑发票结算申请单'" placeholder="供应商" filterable size="small">
<el-option
v-for="item in supplier"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</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.paid" 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.isCost" size="small" placeholder="是否费用类发票"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input v-model="form1.remark" size="small" placeholder="备注"/>
</el-form-item>
</el-col>
<!--<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+'&supplierValue='+form1.supplierValue+'&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="submitAdd1()">确定</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="900px">
<span>供应商</span>
<el-input v-model="supplierName" size="small" placeholder="请选择供应商发票" style="margin: 0 5px 10px 0;" readonly/>
<el-radio-group v-model="contractType" size="small" @change="searchTable01()">
<el-radio label="采购合同" border/>
<el-radio label="离线合同" border/>
</el-radio-group>
<el-table :data="tableData01" border highlight-current-row style="width: 100%;max-height: 250px;" height="250px" size="mini" @row-click="searchTable02">
<el-table-column label="供应商" align="center" min-width="200">
<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.采购合同编号 ? scope.row.采购合同编号 : scope.row.离线合同编号 }}
</template>
</el-table-column>
<el-table-column label="合同名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.采购合同名称 ? scope.row.采购合同名称 : scope.row.离线合同名称 }}
</template>
</el-table-column>
</el-table>
<el-table ref="multipleTable" :data="tableData02" border style="width: 100%;max-height: 250px;" height="250px" size="mini" @selection-change="handleSelectionChange">
<el-table-column :selectable="selectable" type="selection" align="center" width="35"/>
<el-table-column label="名称" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.物料名称 ? scope.row.物料名称 : scope.row.零件名称 }}
</template>
</el-table-column>
<el-table-column label="图号或型号" align="center" min-width="150">
<template slot-scope="scope">
{{ scope.row.物料型号 ? scope.row.物料型号 : scope.row.零件图号 }}
</template>
</el-table-column>
<el-table-column label="规格" align="center" min-width="150">
<template slot-scope="scope">
{{ scope.row.物料规格 ? scope.row.物料规格 : scope.row.规格 }}
</template>
</el-table-column>
<el-table-column label="采购数量" align="center" width="80">
<template slot-scope="scope">
{{ scope.row.数量 }}
</template>
</el-table-column>
<el-table-column label="已到货数量" align="center" width="90">
<template slot-scope="scope">
{{ scope.row.已到货数量 ? scope.row.已到货数量 : scope.row.到货数量 }}
</template>
</el-table-column>
<el-table-column label="已到票数量" align="center" width="90">
<template slot-scope="scope">
{{ scope.row.到票数量 }}
</template>
</el-table-column>
<el-table-column label="本次到票数量" align="center" width="100">
<template slot-scope="scope">
<el-input-number v-model="scope.row.本次到票数量" :min="0" :max="(scope.row.已到货数量||scope.row.到货数量)-scope.row.到票数量" size="mini" controls-position="right" style="width: 100%;"/>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible2 = false">取消</el-button>
<el-button :disabled="group.length===0" size="small" type="primary" @click="submitAdd2()">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { insertInto, searchSupplier, searchTable1, submitEdit, submitDelete, submitApply, searchTable2, searchPurchase, searchOffline, searchPurchaseDetail, searchOfflineDetail,
addTable2, deleteTable2 } from '@/api/PurchasingCenter/InvoiceSettlementApplication'
import { mapGetters } from 'vuex'
import { uploadInvoiceScan } from '@/utils/request'
export default {
name: '', // 发票结算申请
data() {
return {
disabled: false,
contractType: '采购合同',
invoiceNum: '',
total1: 0,
pageCurrent1: 1,
pageSize1: 10,
tableData1: [],
applyOrderNum: '',
invoiceNumber: '',
title2: '',
dialogVisible2: false,
tableData2: [],
dialogVisible1: false,
title1: '',
supplier: [],
supplierName: '',
supplierValue: '',
form1: {
invoiceNum: '',
money: '',
supplierValue: '',
paid: '',
unpaid: '',
tax: '',
isCost: '',
remark: '',
applyOrderNum: ''
},
rules1: {
invoiceNum: [
{ required: true, message: '请输入发票号' }
],
money: [
{ required: true, message: '请输入开票金额' }
],
supplierValue: [
{ required: true, message: '请选择供应商' }
]
},
upload: uploadInvoiceScan,
limit: 1,
tableData01: [],
tableData02: [],
inboundCardNumber: '', // 入库单号
group: [] // 发票结算申请单明细流水号组
}
},
computed: {
...mapGetters([
'sidebar',
'name',
'id' // 人员编号
])
},
created() {
this.fetchData()
this.searchTable1()
},
methods: {
fetchData() {
this.supplier = []
searchSupplier().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.supplier.push({
label: response.data[i].供应商名称,
value: response.data[i].供应商流水号
})
}
})
},
createOrder() {
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
this.form1.invoiceNum = ''
this.form1.money = ''
this.form1.supplierValue = ''
this.form1.paid = ''
this.form1.unpaid = ''
this.form1.tax = ''
this.form1.isCost = ''
this.form1.remark = ''
this.title1 = '创建发票结算申请单'
this.dialogVisible1 = true
},
searchTable1() {
let check1
this.invoiceNum ? check1 = 1 : check1 = 0
searchTable1(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
})
},
submitAdd1() { // 提交新增
this.$refs['form1'].validate((valid) => {
if (valid) {
insertInto(this.form1.invoiceNum, this.form1.money, this.form1.supplierValue, this.form1.paid, this.form1.unpaid, this.form1.tax, this.form1.isCost, this.form1.remark).then(response => {
if (response.data[0].result === '1') {
this.$message.success('增加成功')
this.dialogVisible1 = false
this.searchTable1()
} else {
this.$message.error('增加失败')
}
})
} else {
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 {
return false
}
})
},
handleEdit(row) {
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
this.form1.invoiceNum = row.发票号
this.form1.money = row.发票金额
this.form1.supplierValue = Number(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: '已取消操作'
})
})
},
searchPic(row, i) {
},
warningExceed() {
this.$message.error('仅可上传一张发票')
},
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('增加失败')
}
},
handleSizeChange1(val) {
this.pageCurrent1 = 1
this.pageSize1 = val
this.searchTable1()
},
handleCurrentChange1(val) {
this.pageCurrent1 = val
this.searchTable1()
},
submitApply(row) {
if (this.tableData2.length === 0) {
this.$message.warning('发票结算申请明细为空!')
} else {
this.$confirm('确认提交申请吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
submitApply(row.发票结算申请单流水号, this.id).then(response => {
if (response.data[0].result === '1') {
this.$message.success('提交成功')
this.searchTable1()
this.tableData2 = []
} else { this.$message.error('提交失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
},
searchTable2(row) {
this.applyOrderNum = row.发票结算申请单流水号
this.invoiceNumber = row.发票号
this.supplierName = row.供应商名称
this.supplierValue = row.供应商流水号
Number(row.是否提交申请) === 1 ? this.disabled = true : this.disabled = false
searchTable2(row.发票结算申请单流水号).then(response => {
this.tableData2 = response.data
})
},
addInStoreRecord() {
if (this.applyOrderNum) {
this.searchTable01()
this.title2 = '追加入库单'
this.dialogVisible2 = true
} else {
this.$message.error('请选择发票!')
}
},
searchTable01() {
this.tableData01 = []
this.tableData02 = []
if (this.contractType === '采购合同') {
searchPurchase(this.supplierValue).then(response => {
this.tableData01 = response.data
})
} else if (this.contractType === '离线合同') {
searchOffline(this.supplierValue).then(response => {
response.data.map(data => {
if (Number(data.离线合同状态) === 2) {
this.tableData01.push(data)
}
})
})
}
},
searchTable02(row) {
this.tableData02 = []
if (this.contractType === '采购合同') {
searchPurchaseDetail(row.采购合同流水号).then(response => {
response.data.map(data => {
this.$set(data, '本次到票数量', 0)
data.本次到票数量 = data.已到货数量 - data.到票数量
this.tableData02.push(data)
})
})
} else if (this.contractType === '离线合同') {
searchOfflineDetail(row.离线合同流水号).then(response => {
response.data.map(data => {
this.$set(data, '本次到票数量', 0)
data.本次到票数量 = data.到货数量 - data.到票数量
this.tableData02.push(data)
})
})
}
},
handleSelectionChange(val) {
this.group = val
},
submitAdd2() { // 追加入库单
if (this.group.length === 0) {
this.$message.warning('请选择零件或物料')
} else {
const group1 = []
const group2 = []
if (this.contractType === '采购合同') {
for (let i = 0; i < this.group.length; i++) {
group1.push(this.group[i].采购合同明细流水号)
group2.push(this.group[i].本次到票数量)
}
addTable2(this.applyOrderNum, group1, group2, 1).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('追加失败') }
})
} else if (this.contractType === '离线合同') {
for (let i = 0; i < this.group.length; i++) {
group1.push(this.group[i].离线合同明细流水号)
group2.push(this.group[i].本次到票数量)
}
addTable2(this.applyOrderNum, group1, group2, 2).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('追加失败') }
})
}
}
},
deleteTable2(row) {
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteTable2(row.发票结算申请单明细流水号).then(response => {
if (response.data[0].result === '1') {
this.$message.success('删除成功')
searchTable2(this.applyOrderNum).then(response => {
this.tableData2 = response.data
})
} else { this.$message.error('删除失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
},
selectable(row) {
return Number(row.本次到票数量) > 0
}
}
}
</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>