From f97351a6f1fdc679f4956030d179dca843bbeb0c Mon Sep 17 00:00:00 2001
From: yangys <y_ys79@sina.com>
Date: 星期四, 27 十一月 2025 14:09:04 +0800
Subject: [PATCH] 审批界面增加pdf，图片预览功能
---
src/views/flow/components/TodolistLeft.vue | 311 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 251 insertions(+), 60 deletions(-)
diff --git a/src/views/flow/components/TodolistLeft.vue b/src/views/flow/components/TodolistLeft.vue
index ab4366f..2d597dd 100644
--- a/src/views/flow/components/TodolistLeft.vue
+++ b/src/views/flow/components/TodolistLeft.vue
@@ -1,30 +1,39 @@
<!--
* @Date: 2025-07-01 20:45:15
* @LastEditors: gaoshp
- * @LastEditTime: 2025-08-20 21:03:19
+ * @LastEditTime: 2025-08-27 20:48:41
* @FilePath: /mdmweb/src/views/flow/components/TodolistLeft.vue
-->
<template>
<basic-container>
- <!--'cureProgramTask', 鍥哄寲缂栧埗涓嶈兘娣诲姞鏂囦欢-->
- <div class="tool" v-show="['programmingTask', 'repalceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)">
- <el-button type="primary" plain @click="addApp">娣诲姞鏂囦欢
+ <!--'cureProgramTask', 鍥哄寲缂栧埗鑳芥坊鍔犳枃浠�0916-->
+ <div class="tool" v-show="['programmingTask','replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)">
+
+ <!--鏃犲浐鍖栫殑鎯呭喌鎵嶆樉绀鸿寮�鍏�-->
+ <el-switch v-if="row.variables.hasCuredProgram!=='Y'" v-model="programOnMachine" active-text="鐜板満缂栧埗" inactive-text="宸ヨ壓缂栧埗" />
+
+ <el-button type="primary" :disabled="programOnMachine" plain @click="addProgram">娣诲姞绋嬪簭
</el-button>
</div>
- <el-text type="danger" v-if="row.variables.curedLocked === 'Y'">鍥哄寲绋嬪簭宸插姞閿侊紝璇疯皑鎱庝娇鐢�</el-text>
- <el-table :data="tableData" border @row-click="showContent" max-height="200" highlight-current-row>
- <!-- <el-table-column prop="machineCode" label="鍔犲伐鏈哄簥">
- </el-table-column> -->
-
+ <el-text type="danger" v-if="row.variables.curedLocked === 'Y'">鍥哄寲绋嬪簭宸查攣瀹氾紝璇疯皑鎱庝娇鐢ㄣ�傞攣瀹氬師鍥狅細{{ remark }}<br/></el-text>
+ <el-text type="danger" v-if="row.processDefinitionKey === 'program-unlock'">绋嬪簭宸查攣瀹氾紝閿佸畾鍘熷洜锛歿{ remark }}<br/></el-text>
+ <el-text type="primary" v-if="row.processDefinitionKey === 'program-unlock'"><br/>瑙ｉ攣鍘熷洜锛�</el-text>
+ <el-text type="warning">{{row.variables.unlockReason}}</el-text>
+ <el-text type="danger" v-if="row.variables.hasCuredProgram==='Y' && row.variables.isProcessEditionSame=='N' && row.variables.cureProgramUseable==undefined">宸插浐鍖栫▼搴忓伐搴忕増娆′笉涓�鑷达紝娲惧伐鐗堟:{{row.variables.processEdition}},宸插浐鍖栫増娆★細{{row.variables.curedProcessEdition}}</el-text>
+ <el-text type="danger" v-if="row.variables.programOnMachine=='Y'">鐜板満缂栧埗</el-text>
+ <el-table :data="tableDataProgram" border @row-click="showContent" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" max-height="380" highlight-current-row>
<el-table-column type="index" label="#" width="40" align="center" />
<el-table-column prop="name" label="绋嬪簭鍚嶇О">
<template #default="{ row }">
<div style="display: flex;align-items: center;">
<span style="margin-right: 8px;">{{ row.name }}</span>
- <el-icon v-if="row.fileType === 'other'">
- <FolderOpened />
+ <!--
+ <el-icon>
+ <el-tooltip class="box-item" effect="light" content="绋嬪簭鏂囦欢" placement="right">
+ <Tickets/>
+ </el-tooltip>
</el-icon>
- <img v-else src="./app.jpg" alt="" width="16" height="16">
+ -->
</div>
</template>
</el-table-column>
@@ -32,7 +41,7 @@
<template #default="scope">
<!--'cureProgramTask', 鍥哄寲缂栧埗锛屼笉鑳藉垹闄ゅ拰涓婁紶-->
<a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;"
- v-show="['programmingTask', 'repalceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)"
+ v-show="['programmingTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)"
type="text" size="small" @click.stop="del(scope.$index, scope.row)">鍒犻櫎</a>
<a style="color: blue;cursor: pointer;font-size: 12px;margin-right: 4px;" type="text" size="small"
@click.stop="downloadFile(scope.$index, scope.row)">涓嬭浇</a>
@@ -42,25 +51,84 @@
</template>
</el-table-column>
</el-table>
- <h4>绋嬪簭鍐呭</h4>
- <div v-html="appContent" class="app-content">
+ <el-divider></el-divider>
+ <div class="tool" v-show="['programmingTask','cureProgramTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)">
+
+ <el-button type="primary" :disabled="programOnMachine" plain @click="addOtherFile">娣诲姞鏂囦欢
+ </el-button>
</div>
- <el-dialog title="绋嬪簭閫夋嫨" v-model="appDialog" width="400" v-if="appDialog">
- <avue-form :option="attOption" v-model="attForm" :upload-after="uploadAfter" class="att-box"></avue-form>
- <!-- <div slot="footer" class="dialog-footer">
- <el-button @click="appDialog = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="add">纭� 瀹�</el-button>
- </div> -->
+ <el-table :data="tableDataAttatch" border @row-click="showContent" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" max-height="380" highlight-current-row>
+ <el-table-column type="index" label="#" width="40" align="center" />
+ <el-table-column prop="name" label="鏂囦欢鍚嶇О">
+ <template #default="{ row }">
+ <div style="display: flex;align-items: center;">
+ <span style="margin-right: 8px;">{{ row.name }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column fixed="right" label="鎿嶄綔" width="150" align="center">
+ <template #default="scope">
+ <!--'cureProgramTask', 鍥哄寲缂栧埗锛屼笉鑳藉垹闄ゅ拰涓婁紶-->
+ <a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;"
+ v-show="['programmingTask','cureProgramTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)"
+ type="text" size="small" @click.stop="del(scope.$index, scope.row)">鍒犻櫎</a>
+ <a style="color: blue;cursor: pointer;font-size: 12px;margin-right: 4px;" type="text" size="small"
+ @click.stop="downloadFile(scope.$index, scope.row)">涓嬭浇</a>
+
+ </template>
+ </el-table-column>
+ </el-table>
+ <!--
+ <el-collapse>
+ <el-collapse-item :title="`鍥哄寲鏃х増鏈�: 闆剁粍浠跺彿: ${row.variables.drawingNo} 宸ュ簭鍙�: ${row.variables.processNo } 宸ュ簭鐗堟: ${ row.variables.processEdition }`" name="1">
+ <el-table :data="fileData" border @row-click="showContent" max-height="200" highlight-current-row>
+ <el-table-column type="index" label="#" width="40" align="center" />
+ <el-table-column prop="name" label="鏂囦欢鍚�">
+ <template #default="{ row }">
+ <div style="display: flex;align-items: center;">
+ <span>{{ row.name }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column fixed="right" label="鎿嶄綔" width="150" align="center">
+ <template #default="scope">
+ <a style="color: blue;cursor: pointer;font-size: 12px;margin-right: 4px;" type="text" size="small"
+ @click.stop="downloadFile(scope.$index, scope.row)">涓嬭浇</a>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-collapse-item>
+ </el-collapse>
+ v-if="pdfShow"
+ -->
+ <h5>鏂囦欢鍐呭</h5>
+ <div v-html="appContent" v-if="txtShow" class="app-content">
+ </div>
+ <el-image clsss="preview-content" v-if="imgShow" :src="imgUrl" :fit="fit" />
+ <div v-if="pdfShow" class="pdf-content">
+ <vue-pdf-embed v-if="pdfShow" :source="pdfUrl"/>
+
+ </div>
+ <el-dialog title="涓婁紶绋嬪簭鏂囦欢" v-model="programDialog" width="400" v-if="programDialog">
+ <avue-form :option="programOption" v-model="attForm" :upload-after="uploadAfter" class="att-box"></avue-form>
</el-dialog>
- <el-dialog title="绋嬪簭閫夋嫨" v-model="diffDialog" width="80%">
+ <el-dialog title="涓婁紶鍏朵粬鏂囦欢" v-model="otherFileDialog" width="400" v-if="otherFileDialog">
+ <avue-form :option="otherFileOption" v-model="attForm" :upload-after="uploadAfter" class="att-box"></avue-form>
+ </el-dialog>
+
+ <el-dialog title="鏂囦欢姣斿" v-model="diffDialog" width="80%">
<code-diff :old-string="this.content1" :new-string="this.content2" output-format="side-by-side"
:hideStat="true" :filename="codeDiffFileName1" :newFilename="codeDiffFileName2" />
</el-dialog>
</basic-container>
</template>
+<script setup>
+import VuePdfEmbed from 'vue-pdf-embed';
+</script>
<script>
-import { getAppList, getSelectedAppList, getContent, removeAtt } from '@/api/flow/todolist';
+
+import { getFileData, getSelectedAppList, getContent,getFileLink,removeAtt,queryLockRemark } from '@/api/flow/todolist';
import { exportBlob } from '@/api/common';
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
@@ -85,28 +153,19 @@
content1: '',
content2: '',
codeDiffFileName1: '鍥炰紶鐗堟湰',
- codeDiffFileName2: '璇曞垏鐗堟湰',
+ codeDiffFileName2: '涓嬪彂鐗堟湰',
showContentId: '',
+ programOnMachine:false,//鏄惁鐜板満缂栧埗
attForm: {
att: '',
fileType: 'program'
}, //绋嬪簭涓婁紶琛ㄥ崟
- attOption: {
+ programOption: {//绋嬪簭鏂囦欢涓婁紶
submitBtn: false,
emptyBtn: false,
menu: false,
column: [
- {
- label: '鏂囦欢绫诲瀷',
- prop: 'fileType',
- type: 'select',
- span: 24,
- clearable: false,
- dicData: [
- { label: '绋嬪簭鏂囦欢', value: 'program' },
- { label: '鍏朵粬鏂囦欢', value: 'other' },
- ],
- },
+
{
label: '娣诲姞鏂囦欢',
prop: 'att',
@@ -120,10 +179,41 @@
},
}
]
- }, //绋嬪簭涓婁紶
+ },
+ otherFileOption: {//鍏朵粬鏂囦欢涓婁紶
+ submitBtn: false,
+ emptyBtn: false,
+ menu: false,
+ column: [
+
+ {
+ label: '娣诲姞鏂囦欢',
+ prop: 'att',
+ type: 'upload',
+ multiple: true,
+ action: '/api/blade-mdm/flow/mgr/ncupload',
+ span: 24,
+ data: {
+ processInstanceId: this.row.processInstanceId,
+ fileType: 'other',
+ },
+ }
+ ]
+ },
tableData: [],//宸查�夌▼搴�
+ tableDataProgram:[], //绋嬪簭鏂囦欢锛歵ableData瀛愰泦
+ tableDataAttatch:[], //鍏朵粬鏂囦欢锛歵ableData瀛愰泦
appContent: '',//绋嬪簭鍐呭
- appDialog: false,
+ imgUrl:'', //鍥剧墖棰勮鍦板潃
+ pdfUrl:'',
+ imgShow: false,//鍥剧墖棰勮鏄惁鏄剧ず
+ pdfShow:false, //pdf鏄剧ず妗�
+ txtShow: true, //绋嬪簭鍐呭鏄惁鏄剧ず
+
+ //appDialog: false,
+ programDialog: false, //绋嬪簭鏂囦欢涓婁紶瀵硅瘽妗唌odel
+ otherFileDialog: false, //鍏朵粬鏂囦欢涓婁紶瀵硅瘽妗唌odel
+
form: {},
page: {
page: 1,
@@ -132,6 +222,7 @@
},
appData: [],
selectionList: [],
+ fileData: [],//宸查�夋枃浠�
optionApp: {
menu: false,
gridBtn: false,
@@ -164,15 +255,46 @@
// },
],
},
+
+ remark:'',//閿佸畾鍘熷洜
}
},
mounted() {
this.getAttList();
+ this.getFileData();
+ this.getLockRemark();//鑾峰彇閿佸畾鍘熷洜
this.onLoad(this.page);
+
},
methods: {
+ getFileData () {
+ getFileData(this.row.processInstanceId).then(res => {
+ if (res.data.code !== 200) {
+ this.$message.error(res.data.msg || '鑾峰彇鏂囦欢澶辫触');
+ return;
+ } else {
+ this.fileData = res.data.data || [];
+ }
+ })
+ },
+ getLockRemark () {
+ //鑾峰彇閿佸畾鍘熷洜
+ let nodeId = this.row.variables.nodeId;
+ if(!nodeId){
+ nodeId = this.row.variables.curedNodeId;
+ }
+ if(nodeId){
+ queryLockRemark(nodeId).then(res => {
+ if (res.data.code == 200) {
+ this.remark = res.data.data || '';
+ } else {
+ this.remark = '';
+ }
+ });
+ }
+ },
diffFile(index, row) {
- console.log(row)
+ //console.log(row)
axios({
url: '/blade-mdm/blade-mdm/flow/file/compare-with-try',
method: 'get',
@@ -207,16 +329,34 @@
getAttList() {
getSelectedAppList(this.row.processInstanceId).then(res => {
if (res.data.code !== 200) {
- this.$message.error('鑾峰彇宸查�夌▼搴忓け璐�');
+ this.$message.error('鑾峰彇绋嬪簭鍒楄〃澶辫触');
return;
} else {
- this.tableData = res.data.data || [];
+ this.tableData = res.data.data;//this.sortTable(res.data.data || []);
+
+ this.tableDataProgram = this.sortTable(this.tableData.filter(f => f.program==true));
+ this.tableDataAttatch = this.sortTable(this.tableData.filter(f => f.program==false));
}
// this.$emit('selection-change',this.tableData)
})
},
- addApp() {
- this.appDialog = true;
+ sortTable(data) {
+ data.sort(function(a,b){
+ if(a.program === b.program){//濡傛灉program鐩稿悓锛屾寜鐓ame鐨勯檷搴�
+ //return a.name - b.name
+ return a.name.localeCompare(b.name)
+ }else{
+ return b.program - a.program
+ }
+ });
+ return data;
+ },
+
+ addProgram() {
+ this.programDialog = true;
+ },
+ addOtherFile() {
+ this.otherFileDialog = true;
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
@@ -228,12 +368,6 @@
this.selectionList = list;
},
onLoad(page, params = {}) {
- const query = {}
- getAppList(page.currentPage, page.pageSize, Object.assign(query, params)).then(res => {
- const data = res.data.data;
- this.page.total = data.total;
- this.appData = data.records;
- });
},
add() {
console.log('add')
@@ -244,19 +378,60 @@
this.$emit('selection-change', this.tableData)
},
showContent(row, column, event) {
- if (!row?.id) {
- this.showContentId = ''
- return this.appContent = '';
- }
- this.showContentId = row.id
- getContent(row.id).then(res => {
- if (res.data.code === 200) {
- this.appContent = res.data.data
- } else {
- this.appContent = '绋嬪簭鍐呭鍔犺浇澶辫触'
+ //鍥剧墖
+ let lowerName = row.name.toLowerCase();
+ if(lowerName.endsWith(".png") || lowerName.endsWith(".jpg")){
+ this.imgShow = true;
+ this.pdfShow = false;
+ this.txtShow = false;
+ getFileLink(row.ossName).then(res => {
+ if (res.data.code === 200) {
+ this.imgUrl = res.data.data
+ } else {
+ //杩炴帴鍦板潃鍔犺浇澶辫触
+ this.imgUrl = "/img/404.svg";
+ }
+ })
+
+ //this.imgUrl = "http://192.168.56.1:2888/img/bg/img-logo.png"; //鍙互鏄剧ず
+ }else if(lowerName.endsWith(".pdf")){
+ //pdf
+ this.imgShow = false;
+ this.pdfShow = true;
+ this.txtShow = false;
+
+ //this.pdfUrl = "http://localhost:84/mdmfiles/mdm/upload/20251017/00cd6de10dcbea0338edb6e2315164dc.pdf";
+ this.pdfUrl = "http://localhost:84/mdmfiles/mdm/upload/20251017/test.pdf";
+
+ /*
+ getFileLink(row.ossName).then(res => {
+ if (res.data.code === 200) {
+ this.pdfUrl = res.data.data
+ } else {
+ //杩炴帴鍦板潃鍔犺浇澶辫触
+ this.pdfUrl = "";
+ }
+ })*/
+
+ }else{
+ this.imgShow = false;
+ this.pdfShow = false;
+ this.txtShow = true;
+ if (!row?.id) {
+ this.showContentId = ''
+ return this.appContent = '';
}
- })
+ this.showContentId = row.id
+ getContent(row.id).then(res => {
+ if (res.data.code === 200) {
+ this.appContent = res.data.data
+ } else {
+ this.appContent = '绋嬪簭鍐呭鍔犺浇澶辫触'
+ }
+ })
+ }
},
+
del(index, row) {
if (row.id === this.showContentId) {
this.showContentId = '';
@@ -290,6 +465,7 @@
<style lang="scss" scoped>
.tool {
+ margin-top:0px;
text-align: right;
margin-bottom: 10px;
}
@@ -306,6 +482,21 @@
max-height: 400px;
white-space: pre-wrap;
}
+.preview-content {
+ padding: 10px 10px;
+ min-height: 100px;
+ overflow: auto;
+ max-height: 400px;
+}
+
+.pdf-content {
+ background-color: #fffee1;
+ padding: 5px 5px;
+ min-height: 100px;
+ overflow: auto;
+ max-height: 400px;
+ white-space: pre-wrap;
+}
</style>
<style lang="scss">
.att-box {
--
Gitblit v1.9.3