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/wel/gongkong.vue | 274 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 210 insertions(+), 64 deletions(-)
diff --git a/src/views/wel/gongkong.vue b/src/views/wel/gongkong.vue
index 8e229ea..fc42c9f 100644
--- a/src/views/wel/gongkong.vue
+++ b/src/views/wel/gongkong.vue
@@ -8,8 +8,23 @@
-->
<template>
<div class="gongkongMain">
- <div>
- <el-tree :data="treeData" :props="defaultProps" node-key="id" :default-expand-all="false" :default-expanded-keys="defaultKeys" @node-click="handleNodeClick" />
+ <div class="organization-tree">
+ <el-input v-model="keyword" placeholder="杈撳叆鎼滅储鍏抽敭瀛�" @input="handleInput" clearable="true"/>
+ <el-tree ref="tree" :filter-node-method="filterNodeMethod" :current-node-key="currentNodeKey" :data="treeData" :highlight-current="true" :props="defaultProps" node-key="id" :default-expand-all="false" :default-expanded-keys="defaultKeys" @node-click="handleNodeClick" >
+ <template #default="scope">
+ <div
+ :class="
+ keyword === ''
+ ? ''
+ : scope.data.name.indexOf(keyword) !== -1
+ ? 'has-key-word-style'
+ : ''
+ "
+ >
+ {{ scope.data.name}}
+ </div>
+ </template>
+ </el-tree>
</div>
<div>
<el-row>
@@ -21,15 +36,16 @@
</el-col>
</el-row>
<el-table :data="treecFileData" style="width: 100%">
- <el-table-column prop="name" label="鍚嶇О" />
- <el-table-column prop="fileModifyTime" label="鍒涘缓鏃ユ湡" />
- <el-table-column prop="fileModifyTime" label="淇敼鏃ユ湡" />
- <el-table-column prop="fileSizeDisplay" label="澶у皬" />
- <el-table-column fixed="right" label="鎿嶄綔" min-width="120">
+ <el-table-column prop="name" label="鍚嶇О"/>
+ <el-table-column prop="fileModifyTime" label="鍒涘缓鏃ユ湡" width="160"/>
+ <el-table-column prop="fileModifyTime" label="淇敼鏃ユ湡" width="160"/>
+ <el-table-column prop="fileSizeDisplay" label="澶у皬" width="100"/>
+ <el-table-column fixed="right" label="鎿嶄綔" min-width="110">
<template #default="scope">
<el-button link type="primary" size="small" @click="fileView(scope.row)">鏌ョ湅</el-button>
- <el-button link type="primary" size="small" @click="fileEdit(scope.row)">缂栬緫</el-button>
- <el-button type="primary" text size="small" @click.stop="viewHistory(scope.row, scope.index)">淇敼璁板綍</el-button>
+ <el-button link type="primary" v-if="scope.row.dirType!='PROGRAM'" size="small" @click="fileEdit(scope.row)">缂栬緫</el-button>
+ <el-button type="primary" v-if="scope.row.dirType!='PROGRAM'" text size="small" @click.stop="viewHistory(scope.row, scope.index)">淇敼璁板綍</el-button>
+ <el-button type="primary" v-if="scope.row.dirType=='SEND'" text size="small" @click.stop="changeName(scope.row)">閲嶅懡鍚�</el-button>
</template>
</el-table-column>
</el-table>
@@ -48,26 +64,60 @@
</template>
</el-dialog>
- <el-dialog title="淇敼璁板綍" append-to-body v-model="viewHisModel">
+ <el-dialog title="淇敼璁板綍" width="900" append-to-body v-model="viewHisModel">
<avue-crud :addBtn="false" :option="optionHis" :table-loading="loadingHis" :data="dataHis" ref="crud"
- @current-change="currentChangeHis" v-model:page="pageHiz" @search-change="searchChangeHis" @size-change="sizeChangeHis" @refresh-change="refreshChange" @on-load="onLoadHis">
- <!--
+ @current-change="currentChangeHis" v-model:page="pageHis" @search-change="searchChangeHis" @size-change="sizeChangeHis" @refresh-change="refreshChangeHis" @on-load="onLoadHis">
+
<template #menu="scope">
- <el-button type="primary" :disabled="scope.row.processExecuted==true" text size="default" @click.stop="cancelProcess(scope.row, scope.index)">鎾ら攢</el-button>
- <el-button type="primary" text size="default" @click.stop="hisFileView(scope.row, scope.index)">鏌ョ湅鏂囦欢</el-button>
+ <!--<el-button type="primary" :disabled="scope.row.processExecuted==true" text size="default" @click.stop="cancelProcess(scope.row, scope.index)">鎾ら攢</el-button> -->
+ <el-button type="primary" text size="default" @click.stop="hisCompare(scope.row, scope.index)">姣斿</el-button>
</template>
- -->
+
</avue-crud>
+ </el-dialog>
+
+ <el-drawer title="鏂囦欢瀵规瘮" append-to-body v-model="diffBox" size="100%" class="code-box">
+ <div>
+ <code-diff :old-string="this.content1" :new-string="this.content2" output-format="side-by-side" :hideStat="true" :filename="codeDiffFileName1" :newFilename="codeDiffFileName2"/>
+ </div>
+ </el-drawer>
+
+ <el-dialog title="淇敼鏂囦欢鍚�" width="400" append-to-body v-model="changeNameModel">
+ <avue-form :option="changeNameOption" v-model="changeNameForm" @submit="changeNameSubmit">
+
+ </avue-form>
+
</el-dialog>
</template>
<script>
import {
getFileChangeList
} from '@/api/wel/changehis';
+import { pageHeaderEmits } from 'element-plus';
+import qs from 'qs';
export default {
+ name: 'OrganizationTree',
components: {},
data() {
return {
+ keyword: '',//鏍戞煡璇㈠叧閿瓧
+ currentNodeKey: null,
+ filterData: [], // 杩囨护鍚庣殑鏁版嵁
+ activeNode: null,
+
+ changeNameModel:false,
+ changeNameForm : {},
+ changeNameOption:{
+ labelWidth:80,
+ size:'mini',
+ column:[
+ {
+ span:22,
+ label:'鏂囦欢鍚�',
+ prop:"name"
+ }
+ ]
+ },
defaultKeys: [],
fileOptionTitle: "",
fileContent: "",
@@ -87,15 +137,20 @@
fileRow: {},
loadingHis:false,
viewHisModel:false,
+
+ queryHis:{},
optionHis: {
addBtn: false,
editBtn: false,
delBtn: false,
+ columnBtn:false,
+ gridBtn:false,
+ refreshBtn:false,
labelWidth: 120,
emptyBtn: false,
searchShow: true,
searchEnter:true,
- searchSpan: 8,
+ searchSpan: 4,
menu: true,
// selection: true,
column: [
@@ -104,6 +159,7 @@
prop: 'name',
search: true,
searchType: 'input',
+ searchSpan:6,
hide: false,
viewDisplay: true,
},
@@ -114,6 +170,7 @@
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
search: true,
+ searchSpan:12,
searchRange: true,
hide: false,
},
@@ -125,7 +182,11 @@
currentPage: 1,
total: 0,
},
-
+ diffBox: false,
+ content1: "",
+ content2: "",
+ codeDiffFileName1: "",
+ codeDiffFileName2: "",
}
},
computed: {},
@@ -133,6 +194,27 @@
},
methods: {
+ async handleInput (v) {
+ this.$refs.tree.filter(v)
+ },
+
+ filterNodeMethod (value, data, node) {
+ if (!value) {
+ return true
+ }
+ return this.getHasKeyword(value, node)
+ },
+ getHasKeyword (value, node) {
+
+ if (node.data instanceof Array) {
+ node.data = node.data.length > 0 ? node.data[0] : {}
+ }
+ if (node.data.name && node.data.name.indexOf(value) !== -1) {
+ return true
+ } else {
+ return node.parent && this.getHasKeyword(value, node.parent)
+ }
+ },
fileDialogComit() {
this.loading = true;
axios({
@@ -149,7 +231,11 @@
},
fileView(row) {
this.fileOptionTitle = "鏌ョ湅";
- this.getFileContent(row);
+ if(row.dirType != 'PROGRAM'){
+ this.getFileContent(row);
+ }else{
+ this.getProgramDirFileContent(row);
+ }
},
fileEdit(row) {
this.fileOptionTitle = "缂栬緫";
@@ -157,23 +243,51 @@
this.getFileContent(row);
},
viewHistory(row){
- console.log(row);
this.viewHisModel = true;
+ this.queryHis.machineFileId = row.id;
+ this.onLoadHis();
},
+ changeName(row){
+ //alert(row.id)
+ this.changeNameForm.id = row.id;
+ this.changeNameForm.name = row.name;
+ this.changeNameModel = true;
+ },
+ changeNameSubmit(form,done){
+ axios.post('/blade-mdm/gkw/node/change-file-name',qs.stringify(form)).then(res=>{
+ if (res.data.code == 200) {
+ this.$message.success('鎿嶄綔鎴愬姛!姝ｅ湪澶勭悊鏂囦欢锛岃绋嶅悗鍒锋柊鏌ョ湅銆�');
+ this.changeNameModel = false;
+ } else {
+ this.$message({ type: 'error', message: res.data.msg });
+ }
+ }).catch(error => {
+ this.$message.error(res.data.msg );
+ }).finally(() => {
+ // 涓嶇鎴愬姛杩樻槸澶辫触锛岄兘寤惰繜 1 绉掑悗鍒锋柊鍒楄〃
+ setTimeout(() => {
+ this.searchTable(this.TreeNode)
+ }, 5000); // 1000 姣 = 1 绉�
+ });;
+
+ done();
+ },
searchChangeHis(params, done) {
let data = {}
- this.query = params;
- this.page.currentPage = 1;
+ console.log(params)
+ this.pageHis.currentPage = 1;
+ let fileId = this.queryHis.machineFileId;
params.createTimeBegin = params?.createTime?.[0] || '';
params.createTimeEnd = params?.createTime?.[1] || '';
data = {
createTimeBegin: params.createTimeBegin || undefined,
createTimeEnd: params.createTimeEnd || undefined,
name: params.name || undefined,
+ machineFileId:fileId,
}
- this.query = data
- this.onLoadHis(this.page, data);
+ this.queryHis = data
+ this.onLoadHis();
done();
},
currentChangeHis(currentPage) {
@@ -184,7 +298,25 @@
this.pageHis.pageSize = pageSize;
},
refreshChangeHis() {
- this.onLoadHis(this.pageHis, this.query);
+ this.onLoadHis();
+ },
+ hisCompare(row){
+ //鏂囦欢姣斿
+ this.loading = true;
+ axios({
+ url: '/blade-mdm/gkw/node/his-compare',
+ method: 'get',
+ params: {id: row.id},
+ }).then(
+ res => {
+ this.loading = false;
+ this.content1 = res.data.data.content1;
+ this.content2 = res.data.data.content2;
+ this.codeDiffFileName1 = "淇敼鍓�";
+ this.codeDiffFileName2 = "淇敼鍚�";
+ this.diffBox = true;
+ }
+ );
},
getFileContent(row) {
this.loading = true;
@@ -200,45 +332,62 @@
}
);
},
+ getProgramDirFileContent(row) {
+ this.loading = true;
+ axios({
+ url: '/blade-mdm/ossfile/file-content',
+ method: 'get',
+ params: {ossFileName:row.ossName},
+ }).then(
+ res => {
+ this.loading = false;
+ this.fileDialogVisible = true;
+ this.fileContent = res.data.data;
+ }
+ );
+ },
onQuery() {
this.size = 10;
this.searchTable(this.TreeNode);
},
sizeChange(size) {
this.size = size;
- this.treeLoad(this.TreeNode);
+ this.searchTable(this.TreeNode);
},
currentChange(current) {
+ //console.log('curr',current)
this.current = current;
- this.treeLoad();
+ this.searchTable();
},
- handleNodeClick(TreeNode,b,c,d) {
+ handleNodeClick(data,node) {
this.fileName = "";
- this.searchTable(TreeNode);
+ this.searchTable(data);
+
+ this.activeNode = data.value
+ this.$emit('node-click', data, node)
},
searchTable(TreeNode) {
this.TreeNode = {...TreeNode};
- if(TreeNode.dirType == 'SEND' || TreeNode.dirType == 'REC' || TreeNode.dirType == 'TEMP') {
- var obj = {
- name: this.fileName,
- dirType: TreeNode.dirType,
- machineCode: TreeNode.machineCode,
- current: this.current,
- size: this.size
- }
- axios({
- url: '/blade-mdm/gkw/node/file-page',
- method: 'get',
- params: obj
- }).then(
- res => {
- this.treecFileData = res.data.data.records;
- this.fileTotal = res.data.data.total;
- }
- )
- }else {
- return;
+ var obj = {
+ name: this.fileName,
+ dirType: this.TreeNode.dirType,
+ nodeType: this.TreeNode.nodeType,
+ nodeId: this.TreeNode.nodeType!='dir'?this.TreeNode.id:undefined,
+ machineCode: this.TreeNode.machineCode,
+ current: this.current,
+ size: this.size
}
+ axios({
+ url: '/blade-mdm/gkw/node/file-page',
+ method: 'get',
+ params: obj
+ }).then(
+ res => {
+ this.treecFileData = res.data.data.records;
+ this.fileTotal = res.data.data.total;
+ }
+ )
+
},
treeLoad () {
axios({
@@ -262,32 +411,20 @@
this.sizeHis = size;
this.onLoad();
},*/
- onLoadHis(page, params = {}) {
- console.log('onLoadhis', page, params);
- const data = {
- ...this.query,
- createTimeBegin: params.createTimeBegin,
- createTimeEnd: params.createTimeEnd,
- name: params.name || ''
- };
+ onLoadHis() {
this.loadingHis = true;
- getFileChangeList(page.currentPage, page.pageSize, Object.assign(data, params)).then(res => {
+ getFileChangeList(this.pageHis.currentPage, this.pageHis.pageSize, this.queryHis).then(res => {
const data = res.data.data
this.pageHis.total = data.total;
- this.data = data.records.map(v => {
- return {
- ...v,
- //id: v.processInstanceId,
- }
- });
+ this.dataHis = data.records;
this.loadingHis = false;
}, () => {
this.dataHis = [];
this.loadingHis = false;
}).catch(err => {
- console.log(err)
+ //console.log(err)
this.dataHis = [];
this.loadingHis = false;
});
@@ -295,6 +432,9 @@
},
mounted() {
this.treeLoad();
+ },
+ created(){
+ this.searchTable({});
}
};
</script>
@@ -322,4 +462,10 @@
display: flex;
justify-content: flex-end;
}
+
+
+.has-key-word-style {
+ background-color: #d5ebfc;
+ }
+//https://juejin.cn/post/6997669587495944223
</style>
\ No newline at end of file
--
Gitblit v1.9.3