From 4c0a4f757fe3133ddf43d0519f06c2292bbd8957 Mon Sep 17 00:00:00 2001 From: WXL <1785969728@qq.com> Date: 星期二, 17 十月 2023 15:51:54 +0800 Subject: [PATCH] 11 --- src/views/project/travelexpenseapply/travelexpensedetail/index.vue | 551 ++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 367 insertions(+), 184 deletions(-) diff --git a/src/views/project/travelexpenseapply/travelexpensedetail/index.vue b/src/views/project/travelexpenseapply/travelexpensedetail/index.vue index bb80450..3485938 100644 --- a/src/views/project/travelexpenseapply/travelexpensedetail/index.vue +++ b/src/views/project/travelexpenseapply/travelexpensedetail/index.vue @@ -956,7 +956,7 @@ <el-button type="primary" @click="submitForm" - v-if="operationType == 'edit'||userprofile.nickName == '闄堟厱鍗�'" + v-if="operationType == 'edit' || userprofile.nickName == '闄堟厱鍗�'" >淇� 瀛�</el-button > <el-button @@ -1006,98 +1006,207 @@ </el-table-column> </el-table> </div> - <div class="pdfimg"> - <div class="box-pdf"> - <div> - <el-upload - size="mini" - class="upload-demo" - :action="uploadFileUrl" - :file-list="fileListto" - :show-file-list="false" - multiple - drag - :headers="headers" - :on-success=" - (response, file, fileList) => - uploadSccess(response, file, fileList) - " - :on-preview="downFile" - :disabled="operationType == 'detail'" - :on-error="handleUploadError" - :on-remove="remove" - accept="image/*,.pdf" - > - <i class="el-icon-upload"></i> - <div class="el-upload__text"> - 灏嗙エ鎹嫋鍒版澶勶紝鎴� - <em - ><el-button - :disabled="operationType == 'detail'" - size="small" - type="primary" - >鐐瑰嚮涓婁紶</el-button - ></em + <el-tabs + style="margin-top: 20px;" + v-model="activeName" + type="border-card" + @tab-click="handleClick" + > + <el-tab-pane label="鏅�氶檮浠�" :name="1"> + <div class="pdfimg"> + <div class="box-pdf"> + <div> + <el-upload + size="mini" + class="upload-demo" + :action="uploadFileUrl" + :file-list="fileListto" + :show-file-list="false" + multiple + drag + :headers="headers" + :on-success=" + (response, file, fileList) => + uploadSccess(response, file, fileList) + " + :on-preview="downFile" + :disabled="operationType == 'detail'" + :on-error="handleUploadError" + :on-remove="remove" + accept="image/*,.pdf" > + <i class="el-icon-upload"></i> + <div class="el-upload__text"> + 灏嗙エ鎹嫋鍒版澶勶紝鎴� + <em + ><el-button + :disabled="operationType == 'detail'" + size="small" + type="primary" + >鐐瑰嚮涓婁紶</el-button + ></em + > + </div> + </el-upload> + <el-table + :data="fileListto" + @row-click="downFile" + style="width: 100%" + height="400" + > + <el-table-column + prop="name" + :show-overflow-tooltip="true" + label="鍚嶇О" + > + <template slot-scope="scope"> + <i style="color:#409EFF" class=" el-icon-s-order" />{{ + scope.row.name + }} + </template> + </el-table-column> + + <el-table-column + prop="name" + width="180" + :show-overflow-tooltip="true" + label="鍔熻兘" + > + <template slot-scope="scope"> + <el-button + type="primary" + size="mini" + @click.native.prevent.stop="deletedowfile(scope.row)" + >鍒犻櫎</el-button + > + <el-button + type="primary" + size="mini" + @click.native.prevent.stop="moveupdowfile(scope.row)" + >涓婄Щ</el-button + > + </template> + </el-table-column> + </el-table> </div> - </el-upload> - <el-table - :data="fileListto" - @row-click="downFile" - style="width: 100%" - height="400" + </div> + + <div + v-if="this.previewpdf && pdfimgsrcList.length" + class="pdfimgmin" > - <el-table-column - prop="name" - :show-overflow-tooltip="true" - label="鍚嶇О" + <!-- <img :src="pdfimg" /> --> + <el-image + style="width: 95%; height: 90%" + :src="pdfimg" + :preview-src-list="pdfimgsrcList" > - <template slot-scope="scope"> - <i style="color:#409EFF" class=" el-icon-s-order" />{{ - scope.row.name - }} - </template> - </el-table-column> - - <el-table-column - prop="name" - width="180" - :show-overflow-tooltip="true" - label="鍔熻兘" - > - <template slot-scope="scope"> - <el-button - type="primary" - size="mini" - @click.native.prevent.stop="deletedowfile(scope.row)" - >鍒犻櫎</el-button - > - <el-button - type="primary" - size="mini" - @click.native.prevent.stop="moveupdowfile(scope.row)" - >涓婄Щ</el-button - > - </template> - </el-table-column> - </el-table> - </div> - </div> - - <div v-if="this.previewpdf && pdfimgsrcList.length" class="pdfimgmin"> - <!-- <img :src="pdfimg" /> --> - <el-image - style="width: 95%; height: 90%" - :src="pdfimg" - :preview-src-list="pdfimgsrcList" - > - <!-- <div slot="error" class="image-slot"> + <!-- <div slot="error" class="image-slot"> <i class="el-icon-picture-outline"></i> </div> --> - </el-image> - </div> - <div v-else class="pdfimgmins">{{ hintitle }}</div> - </div> + </el-image> + </div> + <div v-else class="pdfimgmins">{{ hintitle }}</div> + </div> + </el-tab-pane> + <el-tab-pane label="鍙戠エ鏂囦欢" :name="2"> + <div class="pdfimg"> + <div class="box-pdf"> + <div> + <el-upload + size="mini" + class="upload-demo" + :action="uploadFileUrl" + :file-list="invoicefileList" + :show-file-list="false" + multiple + drag + :headers="headers" + :on-success=" + (response, file, fileList) => + uploadSccess(response, file, fileList) + " + :on-preview="downFile" + :disabled="operationType == 'detail'" + :on-error="handleUploadError" + :on-remove="remove" + accept="image/*,.pdf" + > + <i class="el-icon-upload"></i> + <div class="el-upload__text"> + 灏嗗彂绁ㄦ枃浠舵嫋鍒版澶勶紝鎴� + <em + ><el-button + :disabled="operationType == 'detail'" + size="small" + type="primary" + >鐐瑰嚮涓婁紶</el-button + ></em + > + </div> + </el-upload> + <el-table + :data="invoicefileListto" + @row-click="downFile" + style="width: 100%" + height="400" + > + <el-table-column + prop="name" + :show-overflow-tooltip="true" + label="鍚嶇О" + > + <template slot-scope="scope"> + <i style="color:#409EFF" class=" el-icon-s-order" />{{ + scope.row.name + }} + </template> + </el-table-column> + + <el-table-column + prop="name" + width="180" + :show-overflow-tooltip="true" + label="鍔熻兘" + > + <template slot-scope="scope"> + <el-button + type="primary" + size="mini" + @click.native.prevent.stop="deletedowfile(scope.row)" + >鍒犻櫎</el-button + > + <el-button + type="primary" + size="mini" + @click.native.prevent.stop="moveupdowfile(scope.row)" + >涓婄Щ</el-button + > + </template> + </el-table-column> + </el-table> + </div> + </div> + + <div + v-if="this.previewpdf && invoicepdfimgsrcList.length" + class="pdfimgmin" + > + <!-- <img :src="pdfimg" /> --> + <el-image + style="width: 95%; height: 90%" + :src="invoicepdfimg" + :preview-src-list="invoicepdfimgsrcList" + > + <!-- <div slot="error" class="image-slot"> + <i class="el-icon-picture-outline"></i> + </div> --> + </el-image> + </div> + <div v-else class="pdfimgmins">{{ hintitle }}</div> + </div></el-tab-pane + > + </el-tabs> </el-dialog> <el-dialog title="鎻愮ず" :visible.sync="Savereminder" width="30%"> <el-alert @@ -1189,6 +1298,7 @@ personsList: [], //涓嬫媺鍙互閫夋嫨浜哄憳鍒楄〃 personsSel: [], + activeName: 1, //鏂囦欢绫诲瀷 // 閮ㄩ棬鏍戦�夐」 deptOptions: undefined, @@ -1318,6 +1428,11 @@ //鏂囦欢鍒楄〃 fileList: [], fileListto: [], + invoicefileList: [], + invoicefileListto: [], + invoicepdfimg: "", + invoicepdfimgsrcList: [], + invoDatatop: [], //浜哄憳绫诲埆 persontype: null, //鍒拌揪鍦� @@ -1437,10 +1552,23 @@ console.log(this.Networkheader); } }, + // 鍙戠エ鍒囨崲 + handleClick(tab, event) { + if (this.activeName == 1) { + this.pdftitle = "鍏�" + this.pdfimgsrcList.length + "椤�"; + } else { + this.pdftitle = "鍏�" + this.invoicepdfimgsrcList.length + "椤�"; + } + }, remove(file, fileList) { const rbDetails = [...this.rbDetails]; - this.fileListto.splice(this.fileListto.indexOf(file), 1); - rbDetails[this.atpresent].annexfilesList = this.fileListto; + if (this.activeName == 1) { + this.fileListto.splice(this.fileListto.indexOf(file), 1); + rbDetails[this.atpresent].annexfilesList = this.fileListto; + } else { + this.invoicefileListto.splice(this.invoicefileListto.indexOf(file), 1); + rbDetails[this.atpresent].invoicefilesList = this.invoicefileListto; + } }, handleExceed() { @@ -1451,31 +1579,56 @@ uploadSccess(response, file, fileList) { this.rbDetails; //鑾峰彇绁ㄦ嵁淇℃伅浣嶇疆 - 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.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; + if (this.activeName == 1) { + 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.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); + } } else { - console.log(response.msg); + if (response.code == 200) { + // this.form.filename = file.raw.name; + this.previewpdf = true; + this.$modal.msgSuccess(response.msg); + this.invoicefileListto.push({ + name: file.name, + url: response.fileName + }); + this.invoicepdfimgsrcList.push( + this.Networkheader + "/prod-api" + response.fileName + ); + console.log(this.invoicepdfimgsrcList); + this.pdftitle = "鍏�" + this.invoicepdfimgsrcList.length + "椤�"; + this.pdfimg = this.Networkheader + "/prod-api" + response.fileName; + this.rbDetails[ + this.atpresent + ].invoicefilesList = this.invoicefileListto; + } else { + console.log(response.msg); + } } }, // 鐐瑰嚮绁ㄦ嵁 Filepopup(index, rows, row) { this.tableDatatop = []; this.pdfimgsrcList = []; + this.invoDatatop = []; + this.invoicepdfimgsrcList = []; + this.invoDatatop.push(row); this.tableDatatop.push(row); - // console.log(row); this.atpresent = index; this.pdfVisible = true; console.log(this.rbDetails[index]); @@ -1487,44 +1640,85 @@ 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 = ""; this.pdftitle = ""; } + // -鍙戠エ鏂囦欢 + if (this.rbDetails[index].invoicefilesList) { + this.previewpdf = true; + this.invoicefileListto = this.rbDetails[index].invoicefilesList; + console.log(this.invoicefileListto); + this.invoicepdfimg = + this.Networkheader + "/prod-api" + this.invoicefileListto[0].url; + this.invoicefileListto.forEach(item => { + this.invoicepdfimgsrcList.push( + this.Networkheader + "/prod-api" + item.url + ); + }); + console.log(this.invoicepdfimgsrcList); + console.log(this.invoicepdfimg); + } else { + this.invoicefileListto = []; + this.invoicepdfimg = ""; + this.pdftitle = ""; + } + + if (this.activeName == 1) { + this.pdftitle = "鍏�" + this.pdfimgsrcList.length + "椤�"; + } else { + this.pdftitle = "鍏�" + this.invoicepdfimgsrcList.length + "椤�"; + } }, // 鐐瑰嚮宸蹭笂浼犳枃浠� downFile(item) { - console.log(item, "鐐瑰嚮鏂囦欢鎷縤tem"); - this.pdftitle = - "鍏�" + this.pdfimgsrcList.length + "椤癸紝褰撳墠閫変腑" + item.name; - let name = item.name.split("."); - if (name[1] == "pdf") { - this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮"); - this.previewpdf = false; - this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮"; - } else if (name[1] == "jpg" || "png") { - this.previewpdf = true; - if (item.url) { - this.pdfimg = this.Networkheader + "/prod-api" + item.url; - - // if (!this.pdfimgsrcList.includes(this.pdfimg)) { - // this.pdfimgsrcList.push(this.pdfimg); - // console.log("鍔犲叆"); - // } - console.log(this.pdfimg, "pdfimg"); - console.log(this.pdfimgsrcList, "imglist"); + if (this.activeName == 1) { + console.log(item, "鐐瑰嚮鏂囦欢鎷縤tem"); + this.pdftitle = + "鍏�" + this.pdfimgsrcList.length + "椤癸紝褰撳墠閫変腑" + item.name; + let name = item.name.split("."); + if (name[1] == "pdf") { + this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮"); + this.previewpdf = false; + this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮"; + } else if (name[1] == "jpg" || "png") { + this.previewpdf = true; + if (item.url) { + this.pdfimg = this.Networkheader + "/prod-api" + item.url; + } else { + this.pdfimg = this.Networkheader + "/prod-api" + item.response.url; + } } else { - this.pdfimg = this.Networkheader + "/prod-api" + item.response.url; + this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮"; + this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮"); + this.previewpdf = false; } } else { - this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮"; - this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮"); - this.previewpdf = false; + console.log(item, "鐐瑰嚮鏂囦欢鎷縤tem"); + this.pdftitle = + "鍏�" + this.invoicepdfimgsrcList.length + "椤癸紝褰撳墠閫変腑" + item.name; + let name = item.name.split("."); + if (name[1] == "pdf") { + this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮"); + this.previewpdf = false; + this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮"; + } else if (name[1] == "jpg" || "png") { + this.previewpdf = true; + if (item.url) { + this.invoicepdfimg = this.Networkheader + "/prod-api" + item.url; + console.log(this.invoicepdfimg, "pdfimg"); + console.log(this.invoicepdfimgsrcList, "imglist"); + } else { + this.invoicepdfimg = + this.Networkheader + "/prod-api" + item.response.url; + } + } else { + this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮"; + this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮"); + this.previewpdf = false; + } } }, getIndexInArray(arr, obj) { @@ -1532,24 +1726,35 @@ }, // 鐐瑰嚮鍒犻櫎 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.fileListto.splice(index, 1); - console.log(index); - console.log(this.pdfimgsrcList); + if (this.activeName == 1) { + const indexlist = this.getIndexInArray( + this.pdfimgsrcList, + this.Networkheader + "/prod-api" + row.url + ); + this.pdfimgsrcList.splice(indexlist, 1); + const index = this.getIndexInArray(this.fileListto, row); + this.fileListto.splice(index, 1); + } else { + const indexlist = this.getIndexInArray( + this.invoicepdfimgsrcList, + this.Networkheader + "/prod-api" + row.url + ); + this.invoicepdfimgsrcList.splice(indexlist, 1); + const index = this.getIndexInArray(this.invoicefileListto, row); + this.invoicefileListto.splice(index, 1); + } }, // 鐐瑰嚮涓婄Щ moveupdowfile(row) { - const index = this.getIndexInArray(this.fileListto, row); - const item = this.fileListto.splice(index, 1)[0]; // 绉婚櫎鎸囧畾绱㈠紩澶勭殑鍏冪礌锛屽苟淇濆瓨鍒癷tem鍙橀噺涓� - this.fileListto.splice(index - 1, 0, item); // 灏唅tem鎻掑叆鍒扮储寮曚綅缃殑鍓嶄竴浣� + if (this.activeName == 1) { + const index = this.getIndexInArray(this.fileListto, row); + const item = this.fileListto.splice(index, 1)[0]; // 绉婚櫎鎸囧畾绱㈠紩澶勭殑鍏冪礌锛屽苟淇濆瓨鍒癷tem鍙橀噺涓� + this.fileListto.splice(index - 1, 0, item); // 灏唅tem鎻掑叆鍒扮储寮曚綅缃殑鍓嶄竴浣� + } else { + const index = this.getIndexInArray(this.invoicefileListto, row); + const item = this.invoicefileListto.splice(index, 1)[0]; // 绉婚櫎鎸囧畾绱㈠紩澶勭殑鍏冪礌锛屽苟淇濆瓨鍒癷tem鍙橀噺涓� + this.invoicefileListto.splice(index - 1, 0, item); // 灏唅tem鎻掑叆鍒扮储寮曚綅缃殑鍓嶄竴浣� + } }, /** 鏌ヨ閮ㄩ棬涓嬫媺鏍戠粨鏋� */ @@ -1980,6 +2185,11 @@ .split(",") .map(item => ({ url: item, name: item })) : []; + this.invoicefileListto = this.form.invoicefilesList + ? this.form.invoicefilesList + .split(",") + .map(item => ({ url: item, name: item })) + : []; this.form.recordstatus = response.data.recordstatus + ""; sessionStorage.removeItem("apiform"); sessionStorage.setItem("apiform", JSON.stringify(this.form)); @@ -2042,6 +2252,11 @@ .split(",") .map(item => ({ url: item, name: item })) : []; + this.invoicefileListto = this.form.invoicefilesList + ? this.form.invoicefilesList + .split(",") + .map(item => ({ url: item, name: item })) + : []; //瀹℃牳鐘舵�� this.form.recordstatus = response.data.recordstatus + ""; @@ -2057,16 +2272,6 @@ //鎶ラ攢鏄庣粏 getReimbursementdetaillist(ids).then(res => { this.rbDetails = res.data; - /* - for (let i = 0; i < this.rbDetails.length; 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, - }; - } - */ //鍚堣璐圭敤 // if (this.rbDetails.length > 0) this.sumTotalFee(); for (let i = 0; i < this.rbDetails.length; i++) { @@ -2106,6 +2311,11 @@ .split(",") .map(item => ({ url: item, name: item })) : []; + this.invoicefileListto = this.form.invoicefilesList + ? this.form.invoicefilesList + .split(",") + .map(item => ({ url: item, name: item })) + : []; //瀹℃牳鐘舵�� this.form.recordstatus = response.data.recordstatus + ""; @@ -2123,16 +2333,6 @@ getReimbursementdetaillist(ids).then(res => { this.rbDetails = res.data; console.log(this.rbDetails); - /* - for (let i = 0; i < this.rbDetails.length; 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, - }; - } - */ //鍚堣璐圭敤 // if (this.rbDetails.length > 0) this.sumTotalFee(); @@ -2201,8 +2401,6 @@ (amount, item) => amount + Number(item.amount), 0 ); - let list = this.fileListto; - console.log(list); //鏍¢獙璇锋閲戦鍚堣鏄惁绛変簬鎶ラ攢鍗曢噾棰� if (this.form.amountrequested != addnumber) { @@ -2249,12 +2447,6 @@ // 鍏抽棴绐楀彛 this.$store.dispatch("tagsView/delView", this.$route); this.$router.go(-1); - - // this.getList(); - // }) - // .catch(err => { - // this.$modal.msgError("淇敼鎶ラ攢鍗曚繚瀛樺け璐ワ紒"); - // }); } else { this.form.recordstatus = -1; addReimbursement(this.form) @@ -2343,9 +2535,6 @@ this.$refs["form"].validate(valid => { if (valid) { //绁ㄦ嵁鏂囦欢澶勭悊 - let list = this.fileListto; - console.log(list); - //鏍¢獙璇锋閲戦鍚堣鏄惁绛変簬鎶ラ攢鍗曢噾棰� if (this.form.amountrequested != addnumber) { this.$message({ @@ -2385,12 +2574,6 @@ } this.$modal.msgSuccess("淇敼鎶ラ攢鍗曚繚瀛樻垚鍔�!"); - - // this.getList(); - // }) - // .catch(err => { - // this.$modal.msgError("淇敼鎶ラ攢鍗曚繚瀛樺け璐ワ紒"); - // }); } else { this.form.recordstatus = -1; addReimbursement(this.form) -- Gitblit v1.9.3