| | |
| | | </el-col> |
| | | </el-row> |
| | | --> |
| | | <el-row v-if="jurisdiction"> |
| | | <!-- <el-alert title="当前为查看状态,不支持修改存储。" type="warning"> |
| | | </el-alert> --> |
| | | <el-alert |
| | | title="当前为查看状态,不支持修改存储。" |
| | | type="warning" |
| | | show-icon |
| | | > |
| | | </el-alert> |
| | | </el-row> |
| | | <el-row style="margin-top: 25px; margin-bottom: 5px"> |
| | | <el-col :span="20">报销明细</el-col> |
| | | </el-row> |
| | |
| | | :data="rbDetails" |
| | | ref="table" |
| | | border |
| | | max-height="400" |
| | | max-height="800" |
| | | highlight-current-row |
| | | :summary-method="getSummaries" |
| | | show-summary |
| | |
| | | label="序号" |
| | | align="center" |
| | | fixed |
| | | width="65" |
| | | width="88" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input v-model="scope.row.orderno" placeholder="序号" /> |
| | |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="days" label="天数" width="65" align="center"> |
| | | <el-table-column |
| | | prop="days" |
| | | label="天数" |
| | | width="100" |
| | | align="center" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.days" |
| | |
| | | prop="trafficexpense" |
| | | label="交通费" |
| | | align="center" |
| | | width="80" |
| | | width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | |
| | | prop="cityfee" |
| | | label="市内交通费" |
| | | align="center" |
| | | width="100" |
| | | width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | |
| | | prop="hotelexpense" |
| | | label="住宿费" |
| | | align="center" |
| | | width="80" |
| | | width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | <!-- <el-table-column |
| | | prop="foodexpenses" |
| | | label="餐费报销" |
| | | align="center" |
| | | width="80" |
| | | width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | <el-input |
| | | v-model="scope.row.foodexpenses" |
| | | placeholder="伙食费报销" |
| | | @blur=" |
| | |
| | | " |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> --> |
| | | <el-table-column |
| | | prop="foodallowance" |
| | | label="伙食补助" |
| | | align="center" |
| | | width="80" |
| | | width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | |
| | | prop="otherexpense" |
| | | label="公杂费补助" |
| | | align="center" |
| | | width="80" |
| | | width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | |
| | | prop="otherfeeamount" |
| | | label="其他费用" |
| | | align="center" |
| | | width="90" |
| | | width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | |
| | | :visible.sync="pdfVisible" |
| | | width="60%" |
| | | > |
| | | <div> |
| | | <el-table :data="tableDatatop" style="width: 100%"> |
| | | <el-table-column prop="orderno" label="序号"> </el-table-column> |
| | | <el-table-column prop="personname" label="费用人员"> |
| | | </el-table-column> |
| | | <el-table-column prop="createTime" label="开始日期"> |
| | | </el-table-column> |
| | | <el-table-column prop="endtime" label="结束日期"> </el-table-column> |
| | | <el-table-column prop="departure" label="出发地"> </el-table-column> |
| | | <el-table-column prop="destination" label="到达地"> </el-table-column> |
| | | <el-table-column prop="days" label="天数"> </el-table-column> |
| | | </el-table> |
| | | <el-table :data="tableDatatop" style="width: 100%"> |
| | | <el-table-column prop="traffictype" label="出发交通工具"> |
| | | </el-table-column> |
| | | <el-table-column prop="traffictype2" label="返回交通工具"> |
| | | </el-table-column> |
| | | <el-table-column prop="trafficexpense" label="交通费"> |
| | | </el-table-column> |
| | | <el-table-column prop="cityfee" label="市内交通费"> </el-table-column> |
| | | <el-table-column prop="hotelexpense" label="住宿费"> |
| | | </el-table-column> |
| | | <el-table-column prop="foodallowance" label="伙食补助"> |
| | | </el-table-column> |
| | | <el-table-column prop="otherexpense" label="公杂费补助"> |
| | | </el-table-column> |
| | | <el-table-column prop="otherfeeamount" label="其他费用"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="pdfimg"> |
| | | <div class="box-pdf"> |
| | | <div> |
| | |
| | | :show-file-list="false" |
| | | multiple |
| | | drag |
| | | :limit="20" |
| | | :headers="headers" |
| | | :on-success=" |
| | | (response, file, fileList) => |
| | |
| | | :on-preview="downFile" |
| | | :disabled="operationType == 'detail'" |
| | | :on-error="handleUploadError" |
| | | :on-exceed="handleExceed" |
| | | :on-remove="remove" |
| | | accept="image/*,.pdf" |
| | | > |
| | |
| | | :data="fileListto" |
| | | @row-click="downFile" |
| | | style="width: 100%" |
| | | height="400" |
| | | > |
| | | <el-table-column |
| | | prop="name" |
| | |
| | | <el-button |
| | | type="primary" |
| | | size="mini" |
| | | @click.native.prevent="deletedowfile(scope.row)" |
| | | @click.native.prevent.stop="deletedowfile(scope.row)" |
| | | >删除</el-button |
| | | > |
| | | <el-button |
| | | type="primary" |
| | | size="mini" |
| | | @click.native.prevent="moveupdowfile(scope.row)" |
| | | @click.native.prevent.stop="moveupdowfile(scope.row)" |
| | | >上移</el-button |
| | | > |
| | | </template> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-if="this.previewpdf" class="pdfimgmin"> |
| | | <div v-if="this.previewpdf && pdfimgsrcList.length" class="pdfimgmin"> |
| | | <!-- <img :src="pdfimg" /> --> |
| | | <el-image |
| | | style="width: 95%; height: 90%" |
| | |
| | | import { |
| | | listReimbursementpayee, |
| | | addReimbursementpayee, |
| | | updateReimbursementpayee |
| | | updateReimbursementpayee, |
| | | delReimbursementpayee |
| | | } from "@/api/project/reimbursementpayee"; |
| | | import { |
| | | listReimbursement, |
| | |
| | | starttime: null, |
| | | endtime: null |
| | | }, |
| | | tableDatatop: [ |
| | | { |
| | | date: "2016-05-02", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1518 弄" |
| | | } |
| | | ], |
| | | //查询付款 |
| | | queryParamsPayee: { |
| | | rbid: null |
| | |
| | | flowconclusion: null, |
| | | fundid: null |
| | | }, |
| | | jurisdiction: false, |
| | | |
| | | //保存按钮控制 |
| | | idisabled: false |
| | |
| | | }, |
| | | |
| | | mounted() { |
| | | window.addEventListener("beforeunload", e => this.beforeunloadHandler(e)); |
| | | |
| | | //选择业务类型:1、新增;2、修改;3、查看 |
| | | let curId = this.$route.query.id; |
| | | let pos = this.$route.query.pos; |
| | |
| | | }, |
| | | |
| | | methods: { |
| | | // 浏览器页面关闭或刷新提示 |
| | | beforeunloadHandler(e) { |
| | | if ( |
| | | (JSON.stringify(this.form) == sessionStorage.getItem("apiform") && |
| | | JSON.stringify(this.rbDetails) == |
| | | sessionStorage.getItem("apifunddetail")) || |
| | | !sessionStorage.getItem("apifunddetail") |
| | | ) { |
| | | } else { |
| | | this._beforeUnload_time = new Date().getTime(); |
| | | e = e || window.event; |
| | | if (e) { |
| | | e.returnValue = "关闭提示"; |
| | | } |
| | | return "关闭提示"; |
| | | } |
| | | }, |
| | | |
| | | handleUploadError() {}, |
| | | // 获取请求头 |
| | | Getnetworkheader() { |
| | |
| | | //获取票据信息位置 |
| | | if (response.code == 200) { |
| | | this.form.filename = file.raw.name; |
| | | |
| | | this.previewpdf = true; |
| | | this.$modal.msgSuccess(response.msg); |
| | | this.fileListto.push({ |
| | | name: file.name, |
| | | url: response.fileName |
| | | }); |
| | | // this.fileListto.push({ |
| | | // name: file.name, |
| | | // url: response.url |
| | | // }); |
| | | this.pdfimgsrcList.push( |
| | | this.Networkheader + "/prod-api" + response.fileName |
| | | ); |
| | | console.log(this.pdfimgsrcList); |
| | | this.pdftitle = "共" + this.pdfimgsrcList.length + "项"; |
| | | this.pdfimg = this.Networkheader + "/prod-api" + response.fileName; |
| | | this.rbDetails[this.atpresent].annexfilesList = this.fileListto; |
| | | } else { |
| | | console.log(response.msg); |
| | |
| | | }, |
| | | // 点击票据 |
| | | Filepopup(index, rows, row) { |
| | | this.tableDatatop = []; |
| | | this.pdfimgsrcList = []; |
| | | this.tableDatatop.push(row); |
| | | // console.log(row); |
| | | this.atpresent = index; |
| | | this.pdfVisible = true; |
| | | console.log(this.rbDetails[index]); |
| | | if (this.rbDetails[index].annexfilesList) { |
| | | this.previewpdf = true; |
| | | this.fileListto = this.rbDetails[index].annexfilesList; |
| | | console.log(this.fileListto); |
| | | this.pdfimg = this.Networkheader + "/prod-api" + this.fileListto[0].url; |
| | | this.pdfimgsrcList = []; |
| | | this.fileListto.forEach(item => { |
| | | this.pdfimgsrcList.push(this.Networkheader + "/prod-api" + item.url); |
| | | }); |
| | | console.log(this.pdfimgsrcList); |
| | | console.log(this.pdfimg); |
| | | this.pdftitle = "共" + this.pdfimgsrcList.length + "项"; |
| | | } else { |
| | | this.fileListto = []; |
| | | this.pdfimg = ""; |
| | |
| | | |
| | | // 点击已上传文件 |
| | | downFile(item) { |
| | | console.log(item); |
| | | this.pdftitle = item.name; |
| | | console.log(item, "点击文件拿item"); |
| | | this.pdftitle = |
| | | "共" + this.pdfimgsrcList.length + "项,当前选中" + item.name; |
| | | let name = item.name.split("."); |
| | | if (name[1] == "pdf") { |
| | | this.$modal.msgWarning("当前文件暂不支持预览"); |
| | |
| | | this.previewpdf = true; |
| | | if (item.url) { |
| | | this.pdfimg = this.Networkheader + "/prod-api" + item.url; |
| | | // this.pdfimgsrcList = []; |
| | | // this.pdfimgsrcList.push(this.pdfimg); |
| | | console.log(this.pdfimg); |
| | | |
| | | // if (!this.pdfimgsrcList.includes(this.pdfimg)) { |
| | | // this.pdfimgsrcList.push(this.pdfimg); |
| | | // console.log("加入"); |
| | | // } |
| | | console.log(this.pdfimg, "pdfimg"); |
| | | console.log(this.pdfimgsrcList, "imglist"); |
| | | } else { |
| | | this.pdfimg = this.Networkheader + "/prod-api" + item.response.url; |
| | | } |
| | |
| | | deletedowfile(row) { |
| | | console.log(this.fileListto); |
| | | console.log(row); |
| | | const indexlist = this.getIndexInArray( |
| | | this.pdfimgsrcList, |
| | | this.Networkheader + "/prod-api" + row.url |
| | | ); |
| | | console.log(indexlist); |
| | | this.pdfimgsrcList.splice(indexlist, 1); |
| | | const index = this.getIndexInArray(this.fileListto, row); |
| | | this.fileList = this.fileListto.splice(index, 1); |
| | | this.fileListto.splice(index, 1); |
| | | console.log(index); |
| | | console.log(this.pdfimgsrcList); |
| | | }, |
| | | // 点击上移 |
| | | moveupdowfile(row) { |
| | |
| | | //获取报销主信息 |
| | | getReimbursement(curId).then(response => { |
| | | this.form = response.data; |
| | | |
| | | this.fileListto = this.form.annexfiles |
| | | ? this.form.annexfiles |
| | | .split(",") |
| | | .map(item => ({ url: item, name: item })) |
| | | : []; |
| | | this.form.recordstatus = response.data.recordstatus + ""; |
| | | sessionStorage.removeItem("apiform"); |
| | | sessionStorage.setItem("apiform", JSON.stringify(this.form)); |
| | | |
| | | //获取报销明细信息 |
| | | getReimbursementdetaillist(curId).then(res => { |
| | |
| | | if (this.rbDetails.length == 0) { |
| | | this.addDetailRow(0); |
| | | } |
| | | |
| | | //实时合计金额 |
| | | //this.sumTotalFee(); |
| | | for (let i = 0; i < this.rbDetails.length; i++) { |
| | | this.sumRowFee(this.rbDetails[i]); |
| | | //解析出差地址 |
| | | /* |
| | | this.rbDetails[i].index = i; |
| | | this.rbDetails[i].searchAddress = { |
| | | sheng: this.rbDetails[i].travelprovincename, |
| | | shi: this.rbDetails[i].travelcityname, |
| | | qu: this.rbDetails[i].traveltownname, |
| | | }; */ |
| | | } |
| | | sessionStorage.removeItem("apifunddetail"); |
| | | sessionStorage.setItem( |
| | | "apifunddetail", |
| | | JSON.stringify(this.rbDetails) |
| | | ); |
| | | }); |
| | | |
| | | //获取报销打款信息 |
| | |
| | | handleDetail(ids) { |
| | | this.operationType = "detail"; |
| | | this.title = "报销申请详情"; |
| | | this.jurisdiction = true; |
| | | |
| | | this.reset(); |
| | | this.open = true; |
| | |
| | | this.addPayeeRow(0); |
| | | } |
| | | }); |
| | | sessionStorage.removeItem("apiform"); |
| | | sessionStorage.setItem("apiform", JSON.stringify(this.form)); |
| | | }); |
| | | }, |
| | | |
| | |
| | | |
| | | getReimbursement(id).then(response => { |
| | | this.form = response.data; |
| | | |
| | | //票据 |
| | | this.fileListto = this.form.annexfiles |
| | | ? this.form.annexfiles |
| | |
| | | this.addPayeeRow(0); |
| | | } |
| | | }); |
| | | sessionStorage.removeItem("apiform"); |
| | | sessionStorage.setItem("apiform", JSON.stringify(this.form)); |
| | | }); |
| | | }, |
| | | |
| | |
| | | */ |
| | | |
| | | //票据文件处理 |
| | | const addnumber = this.rbPayees.reduce( |
| | | (amount, item) => amount + Number(item.amount), |
| | | 0 |
| | | ); |
| | | let list = this.fileListto; |
| | | console.log(list); |
| | | |
| | | //校验请款金额合计是否等于报销单金额 |
| | | if ( |
| | | this.form.amountrequested != |
| | | this.rbPayees.reduce( |
| | | (amount, item) => amount + Number(item.amount), |
| | | 0.0 |
| | | ) |
| | | ) { |
| | | if (this.form.amountrequested != addnumber) { |
| | | this.$message({ |
| | | message: |
| | | "报销请款表中合计金额不等于报销单的报销金额,请更正后再保存!", |
| | |
| | | rbPayees[i].rbid = response.data; |
| | | addReimbursementpayee(rbPayees[i]); |
| | | } |
| | | sessionStorage.setItem( |
| | | "apifunddetail", |
| | | JSON.stringify(this.rbDetails) |
| | | ); |
| | | sessionStorage.setItem("apiform", JSON.stringify(this.form)); |
| | | |
| | | this.$modal.msgSuccess("新增报销单保存成功!"); |
| | | this.open = false; |
| | |
| | | this.Savereminder = false; |
| | | this.Reminderquantity = 0; |
| | | this.totalquantity = 0; |
| | | const addnumber = this.rbPayees.reduce( |
| | | (amount, item) => amount + Number(item.amount), |
| | | 0 |
| | | ); |
| | | console.log(addnumber, "addnumber"); |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | //票据文件处理 |
| | |
| | | console.log(list); |
| | | |
| | | //校验请款金额合计是否等于报销单金额 |
| | | if ( |
| | | this.form.amountrequested != |
| | | this.rbPayees.reduce( |
| | | (amount, item) => amount + Number(item.amount), |
| | | 0.0 |
| | | ) |
| | | ) { |
| | | if (this.form.amountrequested != addnumber) { |
| | | this.$message({ |
| | | message: |
| | | "报销请款表中合计金额不等于报销单的报销金额,请更正后再保存!", |
| | |
| | | |
| | | //新增一行 |
| | | addDetailRow(rowIndex) { |
| | | console.log(rowIndex); |
| | | |
| | | let rowData = { |
| | | //index: this.rbDetails.length, |
| | | searchAddress: { |
| | |
| | | endtime: null, |
| | | destination: null, |
| | | days: null, |
| | | persontype: null, |
| | | personname: null, |
| | | trafficexpense: 0, |
| | | traffictype: null, |
| | | traffictype2: null, |
| | |
| | | total: 0, |
| | | orderno: null, |
| | | personname2: null, |
| | | personname: null, |
| | | destination: null |
| | | }; |
| | | if (this.rbDetails.length) { |
| | | console.log(this.rbDetails[rowIndex].persontype); |
| | | console.log(this.rbDetails[rowIndex].personname); |
| | | rowData.persontype = this.rbDetails[rowIndex].persontype; |
| | | rowData.personname = this.rbDetails[rowIndex].personname; |
| | | } |
| | | // if (this.Reminderquantity >= 5) { |
| | | // this.Savereminder = true; |
| | | // return; |
| | |
| | | }) |
| | | .then(() => { |
| | | console.log(row); |
| | | let arrow=[]; |
| | | arrow.push(row.id); |
| | | if (row.id !== null) { |
| | | delReimbursementdetail(row.id).then(res => { |
| | | delReimbursementpayee(arrow).then(res => { |
| | | this.$modal.msgSuccess("删除成功"); |
| | | rows.splice(index, 1); |
| | | this.recountOrderNo2(); |
| | |
| | | if (!isNaN(parseFloat(row.otherfeeamount))) { |
| | | totalFee += parseFloat(row.otherfeeamount); |
| | | } |
| | | row.total = totalFee; |
| | | row.total = totalFee.toFixed(2); |
| | | |
| | | /* |
| | | if (!isNaN(parseFloat(this.rbDetails[rowIndex].trafficexpense))) { |
| | |
| | | sums[index] = "合计"; |
| | | return; |
| | | } |
| | | if (index === 18) { |
| | | sums[index] = this.form.amountrequested; |
| | | return; |
| | | } |
| | | //去除部分字段计算 |
| | | if (columnnames.indexOf(column.property) > -1) { |
| | | return; |
| | |
| | | return prev; |
| | | } |
| | | }, 0); |
| | | sums[index] += ""; |
| | | sums[index] = sums[index].toFixed(2); // 保留2位小数,解决小数合计列; |
| | | } else { |
| | | sums[index] = ""; |
| | | } |
| | |
| | | line-height: 36px; |
| | | text-align: center; |
| | | } |
| | | ::v-deep .el-alert__title { |
| | | font-size: 20px; |
| | | line-height: 20px; |
| | | } |
| | | </style> |