审批界面增加pdf，图片预览功能

yangys

2025-11-27 f97351a6f1fdc679f4956030d179dca843bbeb0c

 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,14 +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 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>
@@ -46,12 +63,61 @@
      </div>
    </template>
  </el-dialog>

  <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="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="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: "",
@@ -69,6 +135,58 @@
      treecFileData: [],
      TreeNode: {},
      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: 4,
        menu: true,
        // selection: true,
        column: [
          {
            label: '修改人',
            prop: 'name',
            search: true,
            searchType: 'input',
            searchSpan:6,
            hide: false,
            viewDisplay: true,
          },
          {
            label: '修改时间',
            prop: 'createTime',
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            search: true,
            searchSpan:12,
            searchRange: true,
            hide: false,
          },
        ],
      },
      dataHis:[],
      pageHis: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      diffBox: false,
      content1: "",
      content2: "",
      codeDiffFileName1: "",
      codeDiffFileName2: "",
    }
  },
  computed: {},
@@ -76,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({
@@ -92,12 +231,92 @@
    },
    fileView(row) {
      this.fileOptionTitle = "查看";
      this.getFileContent(row);
      if(row.dirType != 'PROGRAM'){
        this.getFileContent(row);
      }else{
        this.getProgramDirFileContent(row);
      }
    },
    fileEdit(row) {
      this.fileOptionTitle = "编辑";
      this.fileRow = {...row};
      this.getFileContent(row);
    },
    viewHistory(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 = {}
      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.queryHis = data
      this.onLoadHis();
      done();
    },
    currentChangeHis(currentPage) {
      this.pageHis.currentPage = currentPage;
      this.onLoadHis();
    },
    sizeChangeHis(pageSize) {
      this.pageHis.pageSize = pageSize;
    },
    refreshChangeHis() {
      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;
@@ -113,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({
@@ -170,10 +406,35 @@
          this.defaultKeys = [res.data.data[firstIndex].id];
        }
      )
    }
    },/*
    sizeChange(size) {
      this.sizeHis = size;
      this.onLoad();
    },*/
    onLoadHis() {
      this.loadingHis = true;
      getFileChangeList(this.pageHis.currentPage, this.pageHis.pageSize, this.queryHis).then(res => {
        const data = res.data.data
        
        this.pageHis.total = data.total;
        
        this.dataHis = data.records;
        this.loadingHis = false;
      }, () => {
        this.dataHis = [];
        this.loadingHis = false;
      }).catch(err => {
        //console.log(err)
        this.dataHis = [];
        this.loadingHis = false;
      });
    },
  },
  mounted() {
    this.treeLoad();
  },
  created(){
    this.searchTable({});
  }
};
</script>
@@ -201,4 +462,10 @@
  display: flex;
  justify-content: flex-end;
}


.has-key-word-style {
      background-color: #d5ebfc;
    }
//https://juejin.cn/post/6997669587495944223
</style>