From b34e4348df3f9f697fcb4da64ee7ff11deca3170 Mon Sep 17 00:00:00 2001 From: spring <2396852758@qq.com> Date: 星期三, 02 四月 2025 10:26:42 +0800 Subject: [PATCH] 修改检验任务分页和文件预览 --- src/components/tool/file-preview.vue | 103 +++++----- src/components/do/a8-file-handling/DistributionCollectionRecord.vue | 383 ++++++++++++++++++++---------------------- src/components/view/b1-inspect-order-plan.vue | 13 3 files changed, 244 insertions(+), 255 deletions(-) diff --git a/src/components/do/a8-file-handling/DistributionCollectionRecord.vue b/src/components/do/a8-file-handling/DistributionCollectionRecord.vue index b7b9d78..f6a93c6 100644 --- a/src/components/do/a8-file-handling/DistributionCollectionRecord.vue +++ b/src/components/do/a8-file-handling/DistributionCollectionRecord.vue @@ -4,8 +4,8 @@ <div class="search"> <div class="search_thing"> <div class="search_label">鏂囦欢缂栧彿锛�</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="componentData.entity.documentCode" - @keyup.enter.native="refreshTable()"></el-input></div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable + v-model="componentData.entity.documentCode" @keyup.enter.native="refreshTable()"></el-input></div> </div> <div class="search_thing"> <div class="search_label">鏂囦欢鍚嶇О锛�</div> @@ -17,44 +17,36 @@ <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button> </div> <div class="btns" style="padding-left: 30px;"> - <el-button size="small" type="primary" @click="addDialogVisible=true,addInfo={},radio='鍙戞斁'" v-if="addPower">娣诲姞鍙戞斁璁板綍</el-button> + <el-button size="small" type="primary" @click="addDialogVisible = true, addInfo = {}, radio = '鍙戞斁'" + v-if="addPower">娣诲姞鍙戞斁璁板綍</el-button> <el-button size="small" type="primary" v-if="outPower" @click="handleOut" :loading="outLoading">瀵煎嚭</el-button> </div> </div> <div class="table"> <ValueTable ref="ValueTable" :url="$api.manageDocumentList.pageManageDocumentIssueRecycle" - :componentData="componentData" :delUrl="$api.manageDocumentList.delManageDocumentIssueRecycle" :key="upIndex"/> + :componentData="componentData" :delUrl="$api.manageDocumentList.delManageDocumentIssueRecycle" :key="upIndex" /> </div> - <el-dialog - :title="'娣诲姞'+radio+'璁板綍'" - :visible.sync="addDialogVisible" - width="800px" top="10vh"> + <el-dialog :title="'娣诲姞' + radio + '璁板綍'" :visible.sync="addDialogVisible" width="800px" top="10vh"> <el-row> <el-col :span="12" style="margin-bottom: 16px;"> <div class="search_thing"> <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>鐢宠缂栧彿锛�</div> <div class="search_input"> - <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="changeFileList" :disabled="radio=='鍥炴敹'" filterable allow-create clearable> - <el-option - v-for="item in fileList" - :key="item.documentCode" - :label="item.documentCode" + <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="changeFileList" + :disabled="radio == '鍥炴敹'" filterable allow-create clearable> + <el-option v-for="item in fileList" :key="item.documentCode" :label="item.documentCode" :value="item.documentCode"> </el-option> </el-select> </div> </div> </el-col> - <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='鍙戞斁'"> + <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '鍙戞斁'"> <div class="search_thing"> <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>鍙戞斁浜猴細</div> <div class="search_input"> <el-select v-model="addInfo.issueUser" size="small" style="width: 100%;" filterable> - <el-option - v-for="item in personList" - :key="item.value" - :label="item.label" - :value="item.value"> + <el-option v-for="item in personList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> @@ -65,11 +57,7 @@ <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>鍥炴敹浜猴細</div> <div class="search_input"> <el-select v-model="addInfo.recycleUser" size="small" style="width: 100%;" filterable> - <el-option - v-for="item in personList" - :key="item.value" - :label="item.label" - :value="item.value"> + <el-option v-for="item in personList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> @@ -79,12 +67,9 @@ <div class="search_thing"> <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>瀹℃壒浜猴細</div> <div class="search_input"> - <el-select v-model="addInfo.receiveUser" size="small" style="width: 100%;" :disabled="radio!='鍙戞斁'" filterable> - <el-option - v-for="item in personList" - :key="item.value" - :label="item.label" - :value="item.value"> + <el-select v-model="addInfo.receiveUser" size="small" style="width: 100%;" :disabled="radio != '鍙戞斁'" + filterable> + <el-option v-for="item in personList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> @@ -93,48 +78,48 @@ <el-col :span="12" style="margin-bottom: 16px;"> <div class="search_thing"> <div class="search_label">鏂囦欢鍚嶇О锛�</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.name" :disabled="radio=='鍥炴敹'"></el-input></div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.name" + :disabled="radio == '鍥炴敹'"></el-input></div> </div> </el-col> <el-col :span="12" style="margin-bottom: 16px;"> <div class="search_thing"> <div class="search_label">鏂囦欢鐗堟湰锛�</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.version" :disabled="radio=='鍥炴敹'"></el-input></div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.version" + :disabled="radio == '鍥炴敹'"></el-input></div> </div> </el-col> <el-col :span="12" style="margin-bottom: 16px;"> <div class="search_thing"> <div class="search_label">鏂囦欢鐘舵�侊細</div> <div class="search_input"> - <el-select v-model="addInfo.state" size="small" style="width: 100%;" :disabled="radio=='鍥炴敹'"> - <el-option :label="item.label" :value="item.value" v-for="(item,index) in fileState" :key="index"></el-option> + <el-select v-model="addInfo.state" size="small" style="width: 100%;" :disabled="radio == '鍥炴敹'"> + <el-option :label="item.label" :value="item.value" v-for="(item, index) in fileState" + :key="index"></el-option> </el-select> </div> </div> </el-col> - <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='鍙戞斁'"> + <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '鍙戞斁'"> <div class="search_thing"> <div class="search_label">鍙戞斁缂栧彿锛�</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.issueCode"></el-input></div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable + v-model="addInfo.issueCode"></el-input></div> </div> </el-col> <el-col :span="12" style="margin-bottom: 16px;" v-else> <div class="search_thing"> <div class="search_label">鍥炴敹缂栧彿锛�</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.recycleCode"></el-input></div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable + v-model="addInfo.recycleCode"></el-input></div> </div> </el-col> - <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='鍙戞斁'"> + <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '鍙戞斁'"> <div class="search_thing"> <div class="search_label">鍙戞斁鏃堕棿锛�</div> <div class="search_input"> - <el-date-picker - v-model="addInfo.issueDate" - type="date" - size="small" - placeholder="閫夋嫨鏃ユ湡" - format="yyyy-MM-dd" - value-format="yyyy-MM-dd" style="width: 100%;"> + <el-date-picker v-model="addInfo.issueDate" type="date" size="small" placeholder="閫夋嫨鏃ユ湡" + format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;"> </el-date-picker> </div> </div> @@ -143,42 +128,34 @@ <div class="search_thing"> <div class="search_label">鍥炴敹鏃堕棿锛�</div> <div class="search_input"> - <el-date-picker - v-model="addInfo.recycleDate" - type="date" - size="small" - placeholder="閫夋嫨鏃ユ湡" - format="yyyy-MM-dd" - value-format="yyyy-MM-dd" style="width: 100%;"> + <el-date-picker v-model="addInfo.recycleDate" type="date" size="small" placeholder="閫夋嫨鏃ユ湡" + format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;"> </el-date-picker> </div> </div> </el-col> - <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='鍙戞斁'"> + <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '鍙戞斁'"> <div class="search_thing"> <div class="search_label">鍙戞斁璇存槑锛�</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.issueNote" type="textarea" - :rows="2"></el-input></div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.issueNote" + type="textarea" :rows="2"></el-input></div> </div> </el-col> <el-col :span="12" style="margin-bottom: 16px;" v-else> <div class="search_thing"> <div class="search_label">鍥炴敹璇存槑锛�</div> - <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.recycleNote" type="textarea" - :rows="2"></el-input></div> + <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="addInfo.recycleNote" + type="textarea" :rows="2"></el-input></div> </div> </el-col> - <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='鍙戞斁'"> + <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '鍙戞斁'"> <div class="search_thing"> <div class="search_label">涓婁紶闄勪欢锛�</div> - <div class="search_input"><el-upload - style="margin: 8px 0 0px 50px;" - action="#" - :auto-upload="false" - :multiple="false" - accept='.pdf,.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx' :on-change="handleChangeUpload"> - <el-button size="small" type="primary">涓婁紶闄勪欢</el-button> - </el-upload></div> + <div class="search_input"><el-upload style="margin: 8px 0 0px 50px;" action="#" :auto-upload="false" + :multiple="false" accept='.pdf,.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx' + :on-change="handleChangeUpload"> + <el-button size="small" type="primary">涓婁紶闄勪欢</el-button> + </el-upload></div> </div> </el-col> </el-row> @@ -187,12 +164,9 @@ <el-button type="primary" @click="handleAdd" :loading="addLoading">纭� 瀹�</el-button> </span> </el-dialog> - <el-dialog - title="鏌ョ湅闄勪欢" - :visible.sync="lookDialogVisible" - width="800px" top="5vh" fullscreen> - <filePreview v-if="lookDialogVisible" :fileUrl="javaApi+'/word/'+currentInfo.url" - :currentFile="{}" style="height: 90vh;overflow-y: auto;"/> + <el-dialog title="鏌ョ湅闄勪欢" :visible.sync="lookDialogVisible" width="800px" top="5vh" fullscreen> + <filePreview v-if="lookDialogVisible" :fileUrl="javaApi + '/word/' + currentInfo.url" :currentFile="{}" + style="height: 90vh;overflow-y: auto;" /> </el-dialog> </div> </template> @@ -208,12 +182,12 @@ data() { return { ddPower: false, - outPower:true, + outPower: true, addInfo: {}, - addPower:true, - addLoading:false, + addPower: true, + addLoading: false, addDialogVisible: false, - outLoading:false, + outLoading: false, componentData: { entity: { documentCode: null, @@ -231,7 +205,7 @@ font: '鍥炴敹璁板綍', type: 'text', method: 'handleUpdate', - field:[], + field: [], // disabFun: (row, index) => { // return row.documentState=='閫氳繃' // } @@ -242,7 +216,7 @@ type: 'text', method: 'doDiy', disabFun: (row, index) => { - return row.documentState=='閫氳繃' + return row.documentState == '閫氳繃' } }, { @@ -260,13 +234,13 @@ type: 'text', method: 'handleCheck', disabFun: (row, index) => { - return row.receiveUser!=JSON.parse(localStorage.getItem("user")).userId||row.documentState=='閫氳繃' + return row.receiveUser != JSON.parse(localStorage.getItem("user")).userId || row.documentState == '閫氳繃' } },], tagField: { - state:{ + state: { select: [ - { + { value: '閫氳繃', label: '閫氳繃' }, @@ -278,7 +252,7 @@ }, }, selectField: { - state:{ + state: { select: [ { value: '閫氳繃', @@ -290,27 +264,27 @@ }, ] }, - signatory:{ + signatory: { select: [] }, }, - datePicker:['effectiveDate'], - addUpload:['signatoryUrl'], + datePicker: ['effectiveDate'], + addUpload: ['signatoryUrl'], requiredAdd: [], requiredUp: [], needSort: [], - inputType:聽'' + inputType: '' }, entityCopy: {}, upIndex: 0, - personList:[], - fileList:[], - fileList0:[], - radio:'鍙戞斁', - fileState:[], - file:null, - currentInfo:{}, - lookDialogVisible:false + personList: [], + fileList: [], + fileList0: [], + radio: '鍙戞斁', + fileState: [], + file: null, + currentInfo: {}, + lookDialogVisible: false } }, mounted() { @@ -321,8 +295,8 @@ this.getFileList0() this.selectEnumByCategory() }, - methods:{ - getPower(){ + methods: { + getPower() { let power = JSON.parse(sessionStorage.getItem('power')) let out = false let del = false @@ -359,6 +333,7 @@ }, refresh() { this.componentData.entity = this.HaveJson(this.entityCopy) + this.page.current = 1 this.upIndex++ this.refreshTable() }, @@ -385,51 +360,57 @@ }) }, // 鑾峰彇鏂囦欢鍒楄〃--鏂囦欢娓呭崟 - getFileList(){ - this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList,{ + getFileList() { + this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList, { entity: { orderBy: { field: 'createTime', order: 'desc' } }, - page:{ - current:-1, - size:-1 + page: { + current: -1, + size: -1 } - },{headers: { - 'Content-Type': 'application/json' - }}).then(res=>{ + }, { + headers: { + 'Content-Type': 'application/json' + } + }).then(res => { this.fileList = res.data.body.records - }).catch(err=>{}) + }).catch(err => { }) }, // 鑾峰彇鏂囦欢鍒楄〃--浣滃簾鏂囦欢 - getFileList0(){ - this.$axios.post(this.$api.manageDocumentList.pageManageDocumentCancel,{ + getFileList0() { + this.$axios.post(this.$api.manageDocumentList.pageManageDocumentCancel, { entity: { orderBy: { field: 'createTime', order: 'desc' } }, - page:{ - current:-1, - size:-1 + page: { + current: -1, + size: -1 } - },{headers: { - 'Content-Type': 'application/json' - }}).then(res=>{ + }, { + headers: { + 'Content-Type': 'application/json' + } + }).then(res => { this.fileList0 = res.data.body.records - }).catch(err=>{}) + }).catch(err => { }) }, // 瀵煎嚭 - handleOut(){ + handleOut() { this.outLoading = true - this.$axios.post(this.$api.manageDocumentList.exportManageDocumentIssueRecycle, {entity:this.componentData.entity},{headers: { + this.$axios.post(this.$api.manageDocumentList.exportManageDocumentIssueRecycle, { entity: this.componentData.entity }, { + headers: { 'Content-Type': 'application/json' - },responseType: "blob"},).then(res => { + }, responseType: "blob" + },).then(res => { this.outLoading = false - const blob = new Blob([res],{ type: 'application/octet-stream' }); + const blob = new Blob([res], { type: 'application/octet-stream' }); //灏咮lob 瀵硅薄杞崲鎴愬瓧绗︿覆 let reader = new FileReader(); reader.readAsText(blob, 'utf-8'); @@ -458,10 +439,10 @@ } }) }, - changeFileList(e){ - if(e){ - let obj = this.fileList.find(a=>a.documentCode == e) - if(obj){ + changeFileList(e) { + if (e) { + let obj = this.fileList.find(a => a.documentCode == e) + if (obj) { this.addInfo.name = obj.name this.addInfo.version = obj.version this.addInfo.state = obj.state @@ -469,52 +450,52 @@ } }, // 鎻愪氦 - handleAdd(){ - if(!this.addInfo.documentCode){ + handleAdd() { + if (!this.addInfo.documentCode) { this.$message.error('璇烽�夋嫨鏂囦欢') return } - if(!this.addInfo.receiveUser){ + if (!this.addInfo.receiveUser) { this.$message.error('璇烽�夋嫨瀹℃壒浜�') return } - if(this.radio=='鍙戞斁'){ - if(!this.addInfo.issueUser){ + if (this.radio == '鍙戞斁') { + if (!this.addInfo.issueUser) { this.$message.error('璇烽�夋嫨鍙戞斁浜�') return } - }else{ - if(!this.addInfo.recycleUser){ + } else { + if (!this.addInfo.recycleUser) { this.$message.error('璇烽�夋嫨鍥炴敹浜�') return } } this.addLoading = true; - if(!this.addInfo.id){ + if (!this.addInfo.id) { // 鏂板鍙戞斁璁板綍 let fd = new FormData(); //鏂囦欢淇℃伅涓璻aw鎵嶆槸鐪熺殑鏂囦欢 - if(this.file){ - fd.append("file",this.file.raw); + if (this.file) { + fd.append("file", this.file.raw); } - for(let key in this.addInfo){ - fd.append(key,this.addInfo[key]) + for (let key in this.addInfo) { + fd.append(key, this.addInfo[key]) } - this.$axios.post(this.$api.manageDocumentList.addManageDocumentIssueRecycle,fd,{ - headers: { - 'Content-Type': 'multipart/form-data' - }, - noQs:true - }).then(res=>{ - this.addLoading = false; - if(res.code==200){ + this.$axios.post(this.$api.manageDocumentList.addManageDocumentIssueRecycle, fd, { + headers: { + 'Content-Type': 'multipart/form-data' + }, + noQs: true + }).then(res => { + this.addLoading = false; + if (res.code == 200) { this.$message.success('鍙戞斁鎴愬姛') this.addDialogVisible = false this.refreshTable() } }) - }else{ - let {documentCode,id,issueUser,recycleUser,receiveUser,name,version,documentState,issueCode,recycleCode,issueDate,recycleDate,issueNote,recycleNote} = this.addInfo + } else { + let { documentCode, id, issueUser, recycleUser, receiveUser, name, version, documentState, issueCode, recycleCode, issueDate, recycleDate, issueNote, recycleNote } = this.addInfo // 娣诲姞鍥炴敹璁板綍 let obj = { documentCode, @@ -533,17 +514,17 @@ recycleNote } let fd = new FormData(); - for(let key in obj){ - fd.append(key,obj[key]) + for (let key in obj) { + fd.append(key, obj[key]) } - this.$axios.post(this.$api.manageDocumentList.doManageDocumentIssueRecycle,fd,{ - headers: { - 'Content-Type': 'multipart/form-data' - }, - noQs:true - }).then(res=>{ - this.addLoading = false; - if(res.code==200){ + this.$axios.post(this.$api.manageDocumentList.doManageDocumentIssueRecycle, fd, { + headers: { + 'Content-Type': 'multipart/form-data' + }, + noQs: true + }).then(res => { + this.addLoading = false; + if (res.code == 200) { this.$message.success('鎻愪氦鎴愬姛') this.addDialogVisible = false this.refreshTable() @@ -552,13 +533,13 @@ } }, // 娣诲姞鍥炴敹 - handleUpdate(row){ + handleUpdate(row) { this.addInfo = this.HaveJson(row) this.radio = '鍥炴敹' this.addDialogVisible = true }, // 瀹℃牳 - handleCheck(row){ + handleCheck(row) { this.$confirm('鏄惁瀹℃牳閫氳繃?', '鎻愮ず', { confirmButtonText: '閫氳繃', cancelButtonText: '涓嶉�氳繃', @@ -568,7 +549,7 @@ beforeClose: (action, instance, done) => { if (action === 'confirm') { // 鐐瑰嚮鈥滅‘瀹氣�濇寜閽紝鍏佽鍏抽棴 - this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, {id:row.id,documentState:'閫氳繃'}).then(res => { + this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, { id: row.id, documentState: '閫氳繃' }).then(res => { this.refreshTable() done(); this.$message({ @@ -576,12 +557,12 @@ message: '鎻愪氦鎴愬姛' }) }) - .catch(err => { + .catch(err => { - }) + }) } else if (action === 'cancel') { // 鐐瑰嚮鈥滃彇娑堚�濇寜閽紝涓嶅厑璁稿叧闂� - this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, {id:row.id,documentState:'涓嶉�氳繃'}).then(res => { + this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, { id: row.id, documentState: '涓嶉�氳繃' }).then(res => { this.refreshTable() done(); this.$message({ @@ -589,24 +570,24 @@ message: '鎻愪氦鎴愬姛' }) }) - .catch(err => { + .catch(err => { - }) + }) console.log("鍙栨秷鎸夐挳鐐瑰嚮浜嬩欢锛屼笉鍏抽棴寮规"); } else if (action === 'close') { // 鐐瑰嚮鈥溍椻�濇寜閽紝涓嶅厑璁稿叧闂� done(); console.log("脳鎸夐挳鐐瑰嚮浜嬩欢锛屼笉鍏抽棴寮规"); } - } + } }) }, - handleChangeUpload(file, fileLists){ + handleChangeUpload(file, fileLists) { this.file = file - this.$set(this.addInfo,'name',file.name) + this.$set(this.addInfo, 'name', file.name) }, // 鏌ョ湅闄勪欢 - handleLook(row){ + handleLook(row) { this.currentInfo = this.HaveJson(row) this.lookDialogVisible = true } @@ -616,42 +597,44 @@ <style scoped> .title { - height: 60px; - line-height: 60px; - } - .search { - background-color: #fff; - height: 40px; - display: flex; - align-items: center; - position: relative; - } + height: 60px; + line-height: 60px; +} - .search_thing { - width: 350px; - display: flex; - align-items: center; - } +.search { + background-color: #fff; + height: 40px; + display: flex; + align-items: center; + position: relative; +} - .search_label { - width: 110px; - font-size: 14px; - text-align: right; - } +.search_thing { + width: 350px; + display: flex; + align-items: center; +} - .search_input { - width: calc(100% - 110px); - } +.search_label { + width: 110px; + font-size: 14px; + text-align: right; +} - .table { - background-color: #fff; - width: calc(100% - 40px); - height: calc(100% - 60px - 80px); - padding: 20px; - } - .btns{ - position: absolute; - right: 20px; - top: 5px; - } +.search_input { + width: calc(100% - 110px); +} + +.table { + background-color: #fff; + width: calc(100% - 40px); + height: calc(100% - 60px - 80px); + padding: 20px; +} + +.btns { + position: absolute; + right: 20px; + top: 5px; +} </style> diff --git a/src/components/tool/file-preview.vue b/src/components/tool/file-preview.vue index 08d1757..517c6b3 100644 --- a/src/components/tool/file-preview.vue +++ b/src/components/tool/file-preview.vue @@ -8,43 +8,35 @@ <p>鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 PDF 棰勮銆�<a :href="fileUrl">涓嬭浇 PDF 鏂囦欢</a></p> </object> </div> + <a ref="pdfLink" :href="fileUrl" target="_blank" style="display: none;"></a> <div v-if="isDoc"> <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p> <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a> - <vue-office-docx v-else - :src="fileUrl" - style="height: 100vh;" - @rendered="renderedHandler" - @error="errorHandler" - /> + <vue-office-docx v-else :src="fileUrl" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> </div> <div v-if="isXls"> <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p> <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a> - <vue-office-excel v-else - :src="fileUrl" - :options="options" - style="height: 100vh;" - @rendered="renderedHandler" - @error="errorHandler" - /> + <vue-office-excel v-else :src="fileUrl" :options="options" style="height: 100vh;" @rendered="renderedHandler" + @error="errorHandler" /> </div> <div v-if="isZipOrRar"> <p>鍘嬬缉鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p> <a :href="fileUrl">涓嬭浇鏂囦欢</a> </div> <div v-if="isCsv"> - <p v-if="csvList.length==0">CSV 鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p> - <a :href="fileUrl" v-if="csvList.length==0">涓嬭浇鏂囦欢</a> - <el-tabs type="border-card" v-if="csvList.length>0" tab-position="bottom"> - <el-tab-pane :label="item.sheetName" v-for="(item,index) in csvList" :key="index"> + <p v-if="csvList.length == 0">CSV 鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p> + <a :href="fileUrl" v-if="csvList.length == 0">涓嬭浇鏂囦欢</a> + <el-tabs type="border-card" v-if="csvList.length > 0" tab-position="bottom"> + <el-tab-pane :label="item.sheetName" v-for="(item, index) in csvList" :key="index"> <el-table :data="item.tableData" height="75vh"> - <el-table-column :label="m.label" :prop="m.prop" v-for="(m,i) in item.column" :key="i" min-width="120px" show-overflow-tooltip> + <el-table-column :label="m.label" :prop="m.prop" v-for="(m, i) in item.column" :key="i" min-width="120px" + show-overflow-tooltip> <template slot-scope="scope" slot="header"> <div> - <el-tooltip :content="m.label" placement="top"> + <el-tooltip :content="m.label" placement="top"> <div class="oneLine"> - <span>{{m.label}}</span> + <span>{{ m.label }}</span> </div> </el-tooltip> </div> @@ -82,43 +74,54 @@ required: true }, }, - data(){ + data() { return { - isDocShow:true, - options:{ + isDocShow: true, + options: { xls: false, //棰勮xlsx鏂囦欢璁句负false锛涢瑙坸ls鏂囦欢璁句负true minColLength: 0, // excel鏈�灏戞覆鏌撳灏戝垪锛屽鏋滄兂瀹炵幇xlsx鏂囦欢鍐呭鏈夊嚑鍒楋紝灏辨覆鏌撳嚑鍒楋紝鍙互灏嗘鍊艰缃负0. minRowLength: 0, // excel鏈�灏戞覆鏌撳灏戣锛屽鏋滄兂瀹炵幇鏍规嵁xlsx瀹為檯鍑芥暟娓叉煋锛屽彲浠ュ皢姝ゅ�艰缃负0. widthOffset: 10, //濡傛灉娓叉煋鍑烘潵鐨勭粨鏋滄劅瑙夊崟鍏冩牸瀹藉害涓嶅锛屽彲浠ュ湪榛樿娓叉煋鐨勫垪琛ㄥ搴︿笂鍐嶅姞 Npx瀹� heightOffset: 10, //鍦ㄩ粯璁ゆ覆鏌撶殑鍒楄〃楂樺害涓婂啀鍔� Npx楂� - beforeTransformData: (workbookData) => {return workbookData}, //搴曞眰閫氳繃exceljs鑾峰彇excel鏂囦欢鍐呭锛岄�氳繃璇ラ挬瀛愬嚱鏁帮紝鍙互瀵硅幏鍙栫殑excel鏂囦欢鍐呭杩涜淇敼锛屾瘮濡傛煇涓崟鍏冩牸鐨勬暟鎹樉绀轰笉姝g‘锛屽彲浠ュ湪姝よ嚜琛屼慨鏀规瘡涓崟鍏冩牸鐨剉alue鍊笺�� - transformData: (workbookData) => {return workbookData}, //灏嗚幏鍙栧埌鐨別xcel鏁版嵁杩涜澶勭悊涔嬪悗涓旀覆鏌撳埌椤甸潰涔嬪墠锛屽彲閫氳繃transformData瀵瑰嵆灏嗘覆鏌撶殑鏁版嵁鍙婃牱寮忚繘琛屼慨鏀癸紝姝ゆ椂姣忎釜鍗曞厓鏍肩殑text鍊煎氨鏄嵆灏嗘覆鏌撳埌椤甸潰涓婄殑鍐呭 + beforeTransformData: (workbookData) => { return workbookData }, //搴曞眰閫氳繃exceljs鑾峰彇excel鏂囦欢鍐呭锛岄�氳繃璇ラ挬瀛愬嚱鏁帮紝鍙互瀵硅幏鍙栫殑excel鏂囦欢鍐呭杩涜淇敼锛屾瘮濡傛煇涓崟鍏冩牸鐨勬暟鎹樉绀轰笉姝g‘锛屽彲浠ュ湪姝よ嚜琛屼慨鏀规瘡涓崟鍏冩牸鐨剉alue鍊笺�� + transformData: (workbookData) => { return workbookData }, //灏嗚幏鍙栧埌鐨別xcel鏁版嵁杩涜澶勭悊涔嬪悗涓旀覆鏌撳埌椤甸潰涔嬪墠锛屽彲閫氳繃transformData瀵瑰嵆灏嗘覆鏌撶殑鏁版嵁鍙婃牱寮忚繘琛屼慨鏀癸紝姝ゆ椂姣忎釜鍗曞厓鏍肩殑text鍊煎氨鏄嵆灏嗘覆鏌撳埌椤甸潰涓婄殑鍐呭 }, - csvList:[],//csv鏂囦欢鏁版嵁 - imgUrl:'' + csvList: [],//csv鏂囦欢鏁版嵁 + imgUrl: '' } }, computed: { isImage() { let state = /\.(jpg|jpeg|png|gif)$/i.test(this.fileUrl) this.imgUrl = this.fileUrl - if(state){ + if (state) { this.imgUrl = this.fileUrl.replaceAll('word', 'img') } return state; }, isPdf() { - return /\.pdf$/i.test(this.fileUrl); + let state = /\.pdf$/i.test(this.fileUrl) + if (state) { + this.$nextTick(() => { + this.$refs.pdfLink.click(); + if (this.$parent.lookDialogVisible) { + this.$parent.lookDialogVisible = false + } else if (this.$parent.$parent.lookDialogVisible) { + this.$parent.$parent.lookDialogVisible = false + } + }) + } + return state; }, isDoc() { return /\.(doc|docx)$/i.test(this.fileUrl); }, - isXls(){ + isXls() { let state = /\.(xls|xlsx)$/i.test(this.fileUrl) - if(state){ - if(/\.(xlsx)$/i.test(this.fileUrl)){ + if (state) { + if (/\.(xlsx)$/i.test(this.fileUrl)) { this.options.xls = false - }else{ + } else { this.options.xls = true } } @@ -129,38 +132,38 @@ }, isCsv() { let state = /\.csv$/i.test(this.fileUrl) - if(state){ + if (state) { this.loadCSVData(); // this.main() } return state; }, isSupported() { - return this.isImage || this.isPdf || this.isDoc || this.isZipOrRar || this.isCsv||this.isXls; + return this.isImage || this.isPdf || this.isDoc || this.isZipOrRar || this.isCsv || this.isXls; } }, - methods:{ + methods: { renderedHandler() { - console.log("娓叉煋瀹屾垚") - this.isDocShow = true - this.resetStyle() + console.log("娓叉煋瀹屾垚") + this.isDocShow = true + this.resetStyle() }, errorHandler() { - console.log("娓叉煋澶辫触") - this.isDocShow = false + console.log("娓叉煋澶辫触") + this.isDocShow = false }, async loadCSVData() { this.$axios.post(this.$api.insOrderPlan.preview, { id: this.currentFile.id, - }).then( res => { + }).then(res => { let arr = res.data - arr = arr.map(m=>{ + arr = arr.map(m => { let obj = { - sheetName:m.sheetName, - tableData:[], - column:[] + sheetName: m.sheetName, + tableData: [], + column: [] } - obj.tableData = this.formatCSVToTable(m.content.replaceAll('null',' ')) + obj.tableData = this.formatCSVToTable(m.content.replaceAll('null', ' ')) // .replaceAll('MIN','=MIN').replaceAll('MAX','=MAX').replaceAll('AVERAGE','=AVERAGE') for (let item in obj.tableData[0]) { obj.column.push({ @@ -171,11 +174,11 @@ return obj }) this.csvList = arr - }).catch( err => { + }).catch(err => { console.log(err) }) }, - formatCSVToTable(str){ + formatCSVToTable(str) { const result = []; const jsonObj = str.split("\n"); let arrHeader = []; @@ -212,7 +215,7 @@ } return result }, - resetStyle(){ + resetStyle() { const elements = document.querySelectorAll('[style*="pt"]'); for (const element of elements) { const style = element.getAttribute('style'); diff --git a/src/components/view/b1-inspect-order-plan.vue b/src/components/view/b1-inspect-order-plan.vue index e24c5f2..e6d3f29 100644 --- a/src/components/view/b1-inspect-order-plan.vue +++ b/src/components/view/b1-inspect-order-plan.vue @@ -251,9 +251,9 @@ </el-table> <div style="display: flex;justify-content: flex-end;width: 100%;margin-top: 10px;"> <span></span> - <el-pagination @size-change="refreshTable" @current-change="refreshTable" :current-page="page.current" - :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" - :total="total"> + <el-pagination @size-change="m => refreshTable('size', m)" @current-change="m => refreshTable('current', m)" + :current-page="page.current" :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" + layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </div> @@ -1023,7 +1023,7 @@ this.loading = false; this.$message.success("璁ら鎴愬姛") this.claimVisible = false - this.refreshTable('page') + this.refreshTable() } else { this.loading = false; } @@ -1032,7 +1032,10 @@ this.loading = false; }) }, - refreshTable() { + refreshTable(type, val) { + if (type && val) { + this.page[type] = val; + } this.tableLoading = true this.$axios.post(this.$api.insOrderPlan.selectInsOrderPlanList, { entity: this.componentData.entity, -- Gitblit v1.9.3