<template>
|
<div class="bill">
|
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addBill" size="medium" v-if="writeAble">新增单据</el-button>
|
<el-table
|
stripe
|
:data="bills"
|
style="margin-top:30px"
|
:cell-class-name="cellClass"
|
:header-cell-class-name="headerCellClass"
|
highlight-current-row
|
v-loading='loading'
|
>
|
<el-table-column min-width="220">
|
<template slot="header">
|
<span>
|
<span class="red-star">{{billsRules.billtype.required?'*':''}}</span>
|
<span style="padding-left:8px">单据类型</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.billtypeDesc}}</span>
|
<el-select style="padding-left:15px;display:block;" v-model="row.billtype" placeholder="请选择" size="small" v-show="row.isEdit">
|
<el-option
|
v-for="item in billtype"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<template slot="header">
|
<span>
|
<span class="red-star">{{billsRules.billcode.required?'*':''}}</span>
|
<span style="padding-left:8px">发票代码/单据编码</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.billcode}}</span>
|
<el-input style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.billcode" placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<template slot="header">
|
<span>
|
<span class="red-star">{{billsRules.billno.required?'*':''}}</span>
|
<span style="padding-left:8px">发票号码/单据号码</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.billno}}</span>
|
<el-input style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.billno" placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<template slot="header">
|
<span>
|
<span class="red-star">{{billsRules.billdate.required?'*':''}}</span>
|
<span style="padding-left:8px">开票日期/制单日期</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.billdate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.billdate"
|
type="date"
|
v-show="row.isEdit"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<template slot="header">
|
<span>
|
<span class="red-star">{{billsRules.billsum.required?'*':''}}</span>
|
<span style="padding-left:8px">发票金额/单据金额</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.billsum}}</span>
|
<el-input style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.billsum" placeholder="请输入" @blur="row.billsum=formatMoney(row.billsum)"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="单据备注" min-width='200' show-overflow-tooltip>
|
<template slot-scope="{row}">
|
<span v-show="!row.isEdit">{{row.billremark}}</span>
|
<el-input size="small" v-show="row.isEdit" v-model="row.billremark" maxlength="200" placeholder="请输入" require></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作管理" width="110" fixed="right" v-if="billsRules.billtype.writeAble">
|
<template slot-scope="scope">
|
<el-button type="text" @click.native="handleEdit(scope.row)" v-if="!scope.row.isEdit">修改</el-button>
|
<el-button type="text" @click.native="handleSave(scope.row)" v-else>保存</el-button>
|
<el-button type="text" @click.native="handleCancel(scope.row,scope.$index)" v-if="scope.row.isCancel">取消</el-button>
|
<el-button type="text" @click.native="handleDelete(scope.row,scope.$index)" v-else>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<script>
|
import {
|
getDictionaryList,
|
saveCreditorBillInfo,
|
delCreditorBillInfo,
|
qryCreditorInfo
|
} from '@api/product'
|
import common from '@/utils/common'
|
export default {
|
props: ['applySerialNo','creditorBills','billsRules','writeAble'],
|
data () {
|
return {
|
billtype:[],
|
bills:[],
|
initialArr:[],
|
loading:false
|
}
|
},
|
async created () {
|
this.getCreditorBills(this.creditorBills)
|
this.billtype = await this.qryDictionaryList('EntBillType')
|
},
|
methods: {
|
headerCellClass() {
|
return "headerCellClass";
|
},
|
cellClass() {
|
return "cellClass";
|
},
|
qryCreditorInfo(){
|
return new Promise(resolve=>{
|
qryCreditorInfo({applySerialNo:this.applySerialNo}).then(res=>{
|
resolve(res.result)
|
})
|
})
|
},
|
// 对父组件传过来的数据进行处理
|
async getCreditorBills(creditorBills){
|
const arr = []
|
const copyArr = []
|
creditorBills.forEach(val => {
|
const obj = {}
|
for (const key in val) {
|
obj['billtypeDesc'] = val['billtype'].valueDesc
|
val['billsum'].value = this.formatMoney(val['billsum'].value)
|
obj[key] = val[key].value
|
}
|
arr.push(obj)
|
copyArr.push(Object.assign({}, obj));
|
});
|
this.bills = arr
|
this.initialArr = copyArr
|
},
|
qryDictionaryList(code){
|
return new Promise(resolve=>{
|
getDictionaryList({
|
codeNo: code
|
}).then(res=>{
|
resolve(res.result)
|
})
|
})
|
},
|
// 金额格式化
|
formatMoney(value) {
|
if(value){
|
value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
|
if(value=='NaN')return
|
let l = value.split(".")[0].split("").reverse();
|
let r = value.split(".")[1];
|
let t = "";
|
for (let i = 0; i < l.length; i++) {
|
t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? "," : "");
|
}
|
return t.split("").reverse().join("") + "." + r;
|
}
|
},
|
// 新增单据信息
|
addBill(){
|
for (let i = 0; i < this.bills.length; i++) {
|
if(this.bills[i].isEdit){
|
this.$message.warning('请先保存当前凭证信息再新增')
|
return;
|
}
|
};
|
this.bills.unshift({
|
billtype:'',
|
billcode:'',
|
billno:'',
|
billdate:'',
|
billsum:'',
|
billremark:'',
|
isEdit:true,
|
})
|
},
|
// 修改
|
handleEdit(row){
|
this.$set(row,'isEdit',true)
|
this.$set(row, "isCancel", true);
|
},
|
// 保存
|
async handleSave(row){
|
let msg = ''
|
for (const key in row) {
|
if (this.billsRules.hasOwnProperty(key)) {
|
if(this.billsRules[key].required && !row[key]){
|
msg = msg ? msg : `${this.billsRules[key].filedDescription}不能为空`
|
}
|
}
|
}
|
if(msg){
|
this.$message.warning(msg)
|
return
|
}
|
this.loading = true
|
row.objectno = this.applySerialNo
|
const res = await saveCreditorBillInfo(row)
|
if(res.code == '00'){
|
// 通知父组件刷新列表
|
const result = await this.qryCreditorInfo()
|
this.getCreditorBills(result.creditorBills)
|
this.$emit('sendBills',result)
|
}
|
this.loading = false
|
},
|
// 取消
|
handleCancel(row,index){
|
const arr = []
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
for (const key in row) {
|
if(key != 'isEdit' && key != 'isCancel' && row[key] != this.initialArr[i][key]){
|
arr.push(key)
|
}
|
}
|
}
|
}
|
if(arr.length){
|
common.comfirm('提示','当前有数据未保存，是否放弃保存？',()=>{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
arr.forEach(val => {
|
for (const key in this.initialArr[index]) {
|
if (this.initialArr[index].hasOwnProperty(val)) {
|
this.bills[index][key] = this.initialArr[index][key]
|
}
|
}
|
});
|
})
|
}else{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
}
|
},
|
// 删除
|
handleDelete(row,index){
|
if(row.serialno){
|
common.comfirm('提示','请确认是否删除该单据信息?',async ()=>{
|
const res = await delCreditorBillInfo({ objectno:this.applySerialNo,serialno:row.serialno })
|
if(res.code == '00'){
|
this.$message.success('删除成功')
|
const result = await this.qryCreditorInfo()
|
this.getCreditorBills(result.creditorBills)
|
this.$emit('sendBills',result)
|
}
|
})
|
}else{
|
this.bills.splice(index,1)
|
}
|
},
|
}
|
}
|
</script>
|
<style lang="stylus">
|
.bill
|
>.el-button
|
padding 9px 12px
|
.el-table
|
.cellClass
|
height 48px
|
padding 0
|
.cell
|
line-height 18px
|
.headerCellClass
|
height 47px
|
padding 0
|
background-color: #f5f5f5
|
.cell
|
line-height 20px
|
color #222222
|
.red-star
|
width 7px
|
display inline-block
|
vertical-align: middle;
|
color: #FF4300;
|
</style>
|
