界面优化

yangys

2025-08-28 7bcc72a7fce7c0636b91b2d156e3d4962efb76a7

 src/views/flowmgr/backImport2.vue

@@ -1,22 +1,20 @@
<template>
  <basic-container>
    <avue-crud :addBtn="false" :option="option" :table-loading="loading" :data="data" ref="crud" @current-change="currentChange"
            @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
      >
    <avue-crud :addBtn="false" :option="option" :table-loading="loading" :data="data" ref="crud"
      @current-change="currentChange" v-model:page="page" @search-change="searchChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template #menu-left>
        <!-- <div style="display: flex;">
          <el-button type="primary" size="default" icon="el-icon-circle-plus" @click="importData">导入</el-button>
          <el-button type="primary" size="default" icon="el-icon-circle-plus" plain @click="handleWarehouse"
            style="margin-left: 12px;">入库</el-button>
        </div> -->
      </template>
      <template #menu="scope">
          <!-- <el-button type="primary" text size="default" @click.stop="fileView(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="hisFileView(scope.row, scope.index)">查看文件</el-button>
      </template>
    </avue-crud>
    <el-dialog title="文件名称" append-to-body v-model="fileViewModel">
      <el-table :data="tableData" border @row-click="showContent" max-height="200" highlight-current-row>
        <el-table-column type="index" label="#" width="40" align="center"/>
    <el-dialog title="查看文件" append-to-body v-model="fileViewModel">
      <el-table ref="hisFilesTable" :data="tableData" border @row-click="showHisContent" max-height="200" highlight-current-row>
        <el-table-column type="index" label="#" width="40" align="center" />
        <el-table-column prop="name" label="程序名称"></el-table-column>
      </el-table>
      <h4>程序内容</h4>
@@ -27,8 +25,9 @@

<script>
import {
  getList,
  getList,hisFileList
} from '@/api/flowmgr/backImport';
import { getRowIdentity } from 'element-plus/es/components/table/src/util';
export default {
  data() {
    return {
@@ -36,39 +35,62 @@
      tableData: [],
      fileViewModel: false,
      selection: [],
      selectedId:0,//查看文件用，当前选定行的id
      excelBox: false,
      loading: false,
      query:{},
      option: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        labelWidth: 120,
        emptyBtn: false,
        searchShow: true,
        searchEnter:true,
        searchSpan: 8,
        menu: true,
        // selection: true,
        column: [
          {
            label: '程序编号',
            prop: 'code'
            label: '关键字',
            prop: 'keyword',
            search: true,
            searchType: 'input',
            hide: true,
            viewDisplay: false,
          },
          {
            label: '导入时间',
            prop: 'createTime',
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            search: true,
            searchRange: true,
            hide: true,
          },
          {
            label: '程序包名',
            prop: 'name',
          },

          {
            label: '机床编号',
            prop: 'machineCode',
          },
          {
            label: '文件名称',
            prop: 'name',
            label: '导入时间',
            prop: 'createTime'
          },
        ],
      },
      page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            form: {},
            query: {},
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      form: {},
      query: {},
      data: [],
      excelForm: {},
      excelOption: {
@@ -93,65 +115,125 @@
    };
  },
  methods: {
    searchChange(params, done) {
      let data = {}
      this.query = params;
      this.page.currentPage = 1;
      params.createTimeBegin = params?.createTime?.[0] || '';
      params.createTimeEnd = params?.createTime?.[1] || '';
      data = {
        createTimeBegin: params.createTimeBegin || undefined,
        createTimeEnd: params.createTimeEnd || undefined,
        keyword: params.keyword || undefined,
      }
      this.query = data
      this.onLoad(this.page, data);
      done();
    },
    currentChange(currentPage) {
            this.page.currentPage = currentPage;
            // this.onLoad();
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        /** * 页面加载时获取数据
         */
        onLoad(page, params = {}) {
            console.log('onLoad', page, params);
            const data = {
                ...this.query,
                createTimeBegin: params.createTimeBegin,
                createTimeEnd: params.createTimeEnd,
                keyword: params.keyword || '',
                myProcessName: params.myProcessName || ''
            };
            this.loading = true;
            getList(page.currentPage, page.pageSize, Object.assign(data, params)).then(res => {
                const data = res.data.data
                this.page.total = data.total;
                this.data = data.records.map(v=> {
                    return {
                        ...v,
                        id: v.processInstanceId,
                    }
                });
                this.loading = false;
            }, () => {
                this.data = [];
                this.loading = false;
            }).catch(err => {
                this.data = [];
                this.loading = false;
            });
        },
    showContent(row, column, event) {
      console.log(row,111)
      axios({
        url: '/blade-mdm/program/dncsendback/back-file-content',
        method: 'get',
        params: {entryName: row.entryName}
      }).then(
      res => {
        console.log(res)
        if(res.data.code === 200) {
            this.appContent = res.data.data;
        } else {
            this.appContent = '程序内容加载失败'
        }
      this.page.currentPage = currentPage;
      // this.onLoad();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    /** * 页面加载时获取数据
     */
    onLoad(page, params = {}) {
      console.log('onLoad', page, params);
      const data = {
        ...this.query,
        createTimeBegin: params.createTimeBegin,
        createTimeEnd: params.createTimeEnd,
        keyword: params.keyword || ''
      };
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(data, params)).then(res => {
        const data = res.data.data
        
        this.page.total = data.total;
        
        this.data = data.records.map(v => {
          return {
            ...v,
            //id: v.processInstanceId,
          }
        });
        this.loading = false;
      }, () => {
        this.data = [];
        this.loading = false;
      }).catch(err => {
        console.log(err)
        this.data = [];
        this.loading = false;
      });
    },
    fileView(row) {
      this.tableData = row.files;
      this.fileViewModel = true;
    showHisContent(row) {
      //console.log(row)
      axios({
        url: '/blade-mdm/program/dncsendback/history-file-content',
        method: 'get',
        params: {id: this.selectedId, entryName: row.entryName }
      }).then(
        res => {
          console.log(res)
          if (res.data.code === 200) {
            this.appContent = res.data.data;
          } else {
            this.appContent = '程序内容加载失败'
          }
        });
    },
    hisFileView(row) {
      this.appContent='';//清空内容
      this.selectedId = row.id;
      //this.tableData = [{name:'ttt','entryName':'entry1'}];
      hisFileList({id: row.id}).then(res => {
          this.tableData = res.data.data
          this.loading = false;
          if(this.tableData.length > 0){
            this.showHisContent(this.tableData[0])
            this.$refs.hisFilesTable.setCurrentRow(this.tableData[0]); // 设置第一行高亮
          }
        }, () => {
          this.tableData = [];
          this.loading = false;
        }).catch(err => {
          console.log(err)
          this.tableData = [];
          this.loading = false;
        });

        this.fileViewModel = true;
    },
    cancelProcess(row) {
      console.log(row)
      //取消流程
      this.$confirm('是否取消流程？', '', {
                    confirmButtonText: this.$t('submitText'),
                    cancelButtonText: this.$t('cancelText'),
                    type: 'warning',
      }).then(() => {
          axios({
            url: '/blade-mdm/program/dncsendback/cancel-process',
            method: 'post',
            params: { id: row.id }
          }).then(
            res => {
              console.log(res)
              if (res.data.code === 200) {
                this.appContent = res.data.data;
              } else {
                this.appContent = '程序内容加载失败'
              }
            });
      }).catch(()=>{
        console.log('cancel')
      })
    },
    selectionChange(selection) {
      this.selection = selection;
@@ -170,7 +252,7 @@
    },
    handleWarehouse() {
      if (this.selection.length == 0) {
         return this.$message.error("请选择数据")
        return this.$message.error("请选择数据")
      }
      let selection = [];
      this.selection.forEach(item => {
@@ -203,6 +285,7 @@
    }
  },
};

</script>

<style lang="scss">