src/api/flow/todolist.js

@@ -1,7 +1,7 @@
/*
 * @Date: 2025-06-12 22:38:05
 * @LastEditors: gaoshp
 * @LastEditTime: 2025-06-17 21:22:59
 * @LastEditTime: 2025-07-01 23:38:48
 * @FilePath: /mdmweb/src/api/flow/todolist.js
 */
import request from '@/axios';
@@ -29,4 +29,33 @@
    method: 'get',
    params,
  });
}
export const getAppList = (current, size, params) => {
  return request({
    url: '/blade-mdm/program/ncfile/programpickpage',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    },
  })
}
export const getSelectedAppList = processInstanceId => {
  return request({
    url: '/blade-mdm/program/ncfile/list-by-process',
    method: 'get',
    params: {
      processInstanceId
    },
  })
}
export const getContent = id => {
  return request({
    url: '/blade-mdm/program/ncfile/content',
    method: 'get',
    params: {
      id
    },
  })
}

 src/views/flow/components/TodolistLeft.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,162 @@
<!--
 * @Date: 2025-07-01 20:45:15
 * @LastEditors: gaoshp
 * @LastEditTime: 2025-07-01 23:50:05
 * @FilePath: /mdmweb/src/views/flow/components/TodolistLeft.vue
-->
<template>
    <basic-container>
        <div class="tool" v-show="row.taskDefinitionKey === 'programmingTask'">
            <el-button type="primary" @click="addApp">添加程序</el-button>
        </div>
        <el-table :data="tableData" border @row-click="showContent">
            <el-table-column prop="code" label="编号">
            </el-table-column>
            <el-table-column prop="name" label="程序名称">
            </el-table-column>
            <el-table-column prop="name" label="工序名称">
            </el-table-column>
        </el-table>
        <h4>程序内容</h4>
        <div v-html="appContent" class="app-content">
        </div>
        <el-dialog title="程序选择" v-model="appDialog" width="50%" v-if="appDialog">
            <avue-crud :option="optionApp" v-model="form" v-model:page="page" ref="crud" :data="appData"
                @current-change="currentChange" @size-change="sizeChange"
                @on-load="onLoad" @selection-change="selectionChange">
                <template #search="{ }"></template>
                <template #search-menu="{ }"></template>
            </avue-crud>
            <div slot="footer" class="dialog-footer">
                <el-button @click="appDialog = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="add">ç¡® å®š</el-button>
            </div>
        </el-dialog>
    </basic-container>
</template>

<script>
import { getAppList,getSelectedAppList,getContent } from '@/api/flow/todolist';
export default {
    props: {
        row: {
            type: Object,
        }
    },
    data() {
        return {
            tableData: [],//已选程序
            appContent: '',//程序内容
            appDialog: false,
            form: {},
            page: {
                page: 1,
                size: 10,
                total: 0,
            },
            appData: [],
            selectionList: [],
            optionApp: {
                menu: false,
                gridBtn: false,
                addBtn: false,
                editBtn: false,
                delBtn: false,
                columnBtn: false,
                refreshBtn: false,
                searchShowBtn: false,
                tip: false,
                searchShow: false,
                dialogWidth: '60%',
                border: true,
                index: true,
                selection: true,
                menuWidth: 100,
                dialogClickModal: false,
                column: [
                    {
                        label: 'machineCode',
                        prop: '设备编号',
                    },
                    {
                        label: '程序名称',
                        prop: 'name',
                    },
                    {
                        label: '工序名称',
                        prop: 'processName',
                    },
                ],
            },
        }
    },
    mounted() {
        console.log(this.row,'row')
        getSelectedAppList(this.row.processInstanceId).then(res => {
            if (res.data.code !== 200) {
                this.$message.error('获取已选程序失败');
                return;
            } else {
                this.appData = res.data
            }
            this.$emit('selection-change',this.tableData)
        })
        this.onLoad(this.page);
    },
    methods: {
        addApp() {
            this.appDialog = true;
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        selectionChange(list) {
            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')
            this.tableData = this.tableData.concat(this.selectionList.filter(item => {
                return !this.tableData.some(existingItem => existingItem.id === item.id);
            }));
            this.appDialog = false;
            this.$emit('selection-change',this.tableData)
        },
        showContent (row, column, event) {
            getContent(row.id).then(res => {
                if(res.data.code === 200) {
                    this.appContent = res.data.data
                } else {
                    this.appContent = '程序内容加载失败'
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.tool {
    text-align: right;
    margin-bottom: 10px;
}

.dialog-footer {
    text-align: center;
}
.app-content {
    background-color: #fffee1;
    padding: 10px;
    min-height: 100px;
}
</style>

 src/views/flow/components/TodolistRightTop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,91 @@
<!--
 * @Date: 2025-07-01 20:45:15
 * @LastEditors: gaoshp
 * @LastEditTime: 2025-07-04 19:10:24
 * @FilePath: /mdmweb/src/views/flow/components/TodolistRightTop.vue
-->
<template>
    <basic-container>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="120px" disabled>
        <el-form-item label="流程标题">
            <el-input v-model="formInline.processDefinitionName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="创建人">
            <el-input v-model="formInline.startUserName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="设计版次">
            <el-input v-model="formInline.empty" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="工艺版次">
            <el-input v-model="formInline.craftEdition" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="任务车间">
            <el-input v-model="formInline.empty" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="产品型号">
            <el-input v-model="formInline.productModel" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="工序号">
            <el-input v-model="formInline.processNo" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="工序名称">
            <el-input v-model="formInline.processName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="零组件号">
            <el-input v-model="formInline.partNo" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="加工机床">
            <el-input v-model="formInline.machineCode" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="过程卡号">
            <el-input v-model="formInline.empty" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
            <el-input v-model="formInline.createTime" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="计划加工时间">
            <el-input v-model="formInline.planStartTime" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="程序包名">
            <el-input v-model="formInline.programmer" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="当前节点">
            <el-input v-model="formInline.taskName" placeholder=""></el-input>
        </el-form-item>
    </el-form>
    </basic-container>
</template>

<script>
export default {
    props: {
        row: {
            type: Object,
        }
    },
    data() {
        return {
            formInline: {}
        }
    },
    mounted() {
        // Initialize formInline with row data
        this.formInline = {
            ...this.row,
            processDefinitionName: this.row.processDefinitionName || '',
            taskName: this.row.taskName || '',
            createTime: this.row.createTime || '',
            startUserName: this.row.startUserName || '',
            craftEdition: this.row.variables.craftEdition || '',
            machineCode: this.row.variables.machineCode || '',
            processName: this.row.variables.processName || '',
            processNo: this.row.variables.processNo || '',
            planStartTime: this.row.variables.planStartTime || '',
            productModel: this.row.variables.productModel || '',
            partNo: this.row.variables.partNo || '',
        }
    }
}
</script>

<style lang="scss" scoped></style>

 src/views/flow/todolist.vue

@@ -13,15 +13,28 @@
                </el-button>
            </template>
        </avue-crud>
        <el-dialog title="审批" append-to-body v-model="approveBox" width="30%">
            <avue-form ref="form" :option="optionApprove" v-model="formApprove" @submit="handleSubmit" />
            <!-- <template #footer>
                <span class="dialog-footer">
                    <el-button @click="deployBox = false">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="handleDoDeploy" :loading="deployLoading">ç¡® å®š</el-button>
                </span>
            </template> -->
        </el-dialog>
        <!-- <el-dialog title="审批" append-to-body v-model="approveBox" width="100%">
            <div class="approve-box">
                <div class="left">
                    <TodolistLeft :row="row"/>
                </div>
                <div class="right">
                    <TodolistRightTop :row="row" />
                    <avue-form ref="form" :option="optionApprove" v-model="formApprove" @submit="handleSubmit" />
                </div>
            </div>
        </el-dialog> -->
        <el-drawer title="审批" append-to-body v-model="approveBox" size="100%" v-if="approveBox">
            <div class="approve-box">
                <div class="left">
                    <TodolistLeft :row="row" @selection-change="selectionChange"/>
                </div>
                <div class="right">
                    <TodolistRightTop :row="row" />
                    <avue-form ref="form" :option="optionApprove" v-model="formApprove" @submit="handleSubmit" />
                </div>
            </div>
        </el-drawer>
    </basic-container>
</template>

@@ -29,9 +42,16 @@
import { getList, approve,getAssignee } from '@/api/flow/todolist';
import { mapGetters } from 'vuex';
import dayjs from 'dayjs';
import TodolistLeft from './components/TodolistLeft.vue';
import TodolistRightTop from './components/TodolistRightTop.vue';
export default {
    components: {
        TodolistLeft,
        TodolistRightTop
    },
    data() {
        return {
            applist: [],
            assigneeData: [],
            row: {},
            approveBox: false,
@@ -258,6 +278,7 @@
                ...this.formApprove,
                taskId: this.row.taskId,
                processInstanceId: this.row.processInstanceId,
                programIds: this.applist.map(v => v.id).join(','),
            }).then(res => {
                this.$message.success('审批成功');
                this.approveBox = false;
@@ -326,8 +347,24 @@
                this.loading = false;
            });
        },
        selectionChange (applist) {
            this.applist = applist
        },
    },
};
</script>

<style></style>
<style scoped="scoped" lang="scss">
.approve-box {
    display: flex;
    & > div {
        border: 1px solid #ccc;
    }
    .left {
        width: 400px;
    }
    .right {
        flex:1;
    }
}
</style>

 src/views/wel/index.vue

@@ -22,22 +22,29 @@
        <span>{{row.name}}</span>
        <el-button :size="size" text icon="el-icon-setting" type="primary" placeholder="修改" @click="showEdit(row)" title="修改"></el-button>
        <el-button :size="size" text icon="el-icon-delete" type="primary" @click="showDel(row)" placeholder="删除" title="删除"></el-button>
        <el-button :size="size" text v-if="row.nodeType < 70" icon="el-icon-document-add" type="primary" @click="showAdd(row)" placeholder="新增子级" title="新增子级"></el-button>
        <el-button :size="size" text v-if="row.nodeType == 70" icon="el-icon-upload" type="primary" @click="showUpload(row)" placeholder="文件上传" title="文件上传"></el-button>
        <el-button :size="size" text v-if="row.nodeType < 60" icon="el-icon-document-add" type="primary" @click="showAdd(row)" placeholder="新增子级" title="新增子级"></el-button>
        <el-button :size="size" text v-if="row.nodeType == 60" icon="el-icon-upload" type="primary" @click="showUpload(row)" placeholder="文件上传" title="文件上传"></el-button>
        <el-button :size="size" text v-if="row.nodeType == 60" icon="el-icon-pie-chart" type="primary" @click="upgrade(row)" placeholder="升级" title="升级"></el-button>
      </template>
    </avue-crud>
    <el-dialog :title="modalTitle" append-to-body v-model="modalBox">
      <avue-form :option="modalOption" v-model="modalForm" @submit="modalSubmit" @reset-change="modalCancel"/>
    </el-dialog>
    <el-dialog title="上传文件" append-to-body v-model="uploadmodalBox">
      <avue-form :option="uploadmodalOption" v-model="uploadmodalForm" @submit="uploadmodalSubmit" @reset-change="uploadmodalCancel"/>
      <avue-form :option="uploadmodalOption" v-model="uploadmodalForm" @submit="uploadmodalSubmit" @reset-change="uploadmodalCancel" :upload-before="uploadBefore" :upload-after="uploadAfter">
        <template #filelist>
          <div v-for="item in fileList" v-if="fileList.length > 0">
            <span>{{item.name}}</span>
            <span class="delFile" @click="delFile(item)">X</span>
          </div>
        </template>
      </avue-form>
    </el-dialog>


    <avue-tabs :option="tabsOption" @change="tabsHandleChange" style="margin-top: 30px;"></avue-tabs>
      <avue-form v-if="tabsType === 'tab1'" :option="tabsFormOption" v-model="tabsForm"/>
    <span v-else-if="tabsType === 'tab2'">版本信息</span>

      <avue-form v-if="tabsType === 'tab1'" :option="tabsFormOption" v-model="tabsForm"></avue-form>
      <span v-else-if="tabsType === 'tab2'">版本信息</span>
      <span v-else-if="tabsType === 'tab3'">文件内容</span>
  </basic-container>
</template>

@@ -46,8 +53,10 @@
export default {
  data() {
    return {
      fileList: [],
      tabsType: "tab1",
      tabsOption: {
      tabsOption: {},
      tabsOption1: {
        column: [{
          icon: 'el-icon-info',
          label: '节点信息',
@@ -56,6 +65,21 @@
          icon: 'el-icon-warning',
          label: '版本信息',
          prop: 'tab2',
        }]
      },
      tabsOption2: {
        column: [{
          icon: 'el-icon-info',
          label: '节点信息',
          prop: 'tab1',
        }, {
          icon: 'el-icon-warning',
          label: '版本信息',
          prop: 'tab2',
        }, {
          icon: 'el-icon-warning',
          label: '文件内容',
          prop: 'tab3'
        }]
      },
      tabsFormOption: {
@@ -109,44 +133,6 @@
      },
      tabsForm: {},
      uploadmodalBox: false,
      uploadmodalOption: {
        submitText: "保存",
        emptyText: "取消",
        menuPosition: "right",
        column: [
          {
            label: '节点类型',
            prop: 'nodeType',
            type: 'select',
            dicUrl: '/blade-system/dict-biz/dictionary?code=nc_node_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            disabled: true
          },
          {
            label: '选择文件',
            prop: 'abcd',
            type: 'upload',
            data: "{a:123}",
            action: "",
            showFileList: false,
            span: 24
          },
          {
            label: '全路径',
            prop: 'abc',
            span: 24
          },
          {
            label: '备注',
            prop: 'remark',
            type: "textarea",
            span: 24
          }
        ]
      },
      uploadmodalForm: {},
      selectedColumn: {},
      modalForm: {},
@@ -266,16 +252,121 @@
      data: [],
    };
  },
  computed: {
    uploadmodalOption() {
      return {
        submitText: "保存",
        emptyText: "取消",
        menuPosition: "right",
        column: [
          {
            label: '节点类型',
            prop: 'nodeType',
            type: 'select',
            dicUrl: '/blade-system/dict-biz/dictionary?code=nc_node_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            disabled: true
          },
          {
            label: '选择文件',
            prop: 'uploadFile',
            type: 'upload',
            data: {nodeId: this.tabsForm.id}, 
            action: "",
            showFileList: false,
            span: 24,
            action: "/blade-mdm/program/ncfile/upload"
          },
          {
            label: '文件列表',
            prop: 'filelist'
          },
          {
            label: '全路径',
            prop: 'abc',
            span: 24
          },
          {
            label: '备注',
            prop: 'remark',
            type: "textarea",
            span: 24
          }
        ]
      }
    }
  },
  watch: {
    uploadmodalBox(old) {
      this.onLoad();
    }
  },
  methods: {
    upgrade(row) {  //升级
      this.loading = true;
      var obj = {id: row.id}
      axios({
        url: '/blade-mdm/program/ncfile/upgrade-process-edition',
        method: 'post',
        data: obj,
      }).then(
        resp => {
          this.$message.success('升级成功');
        }
      );
    },
    delFile(item) {
      this.loading = true;
      var obj = {id: item.id}
      axios({
        url: '/blade-mdm/program/ncfile/remove',
        method: 'post',
        params: obj,
      }).then(
        resp => {
          this.getFile(this.uploadmodalForm.id);
        }
      );
    },
    uploadBefore(file,done,loading,column) {
      done();
      //nodeId: this.tabsForm.id
    },
    uploadAfter(res,done,loading,column) {
      this.getFile(column.data.nodeId);
    },
    rowClick(row) {
      this.tabsForm = row;
      if(this.tabsForm.nodeType < 60) {
        this.tabsOption = this.tabsOption1;
      }else {
        this.tabsOption = this.tabsOption2;
      }
    },
    tabsHandleChange(tabs) {
      this.tabsType = tabs.prop;
    },
    showUpload(row) {
      this.uploadmodalForm = row;
      //获取文件list
      this.getFile(row.id);
      this.uploadmodalBox = true;
    },
    getFile(id) {
      this.loading = true;
      var obj = {nodeId: id}
      axios({
        url: '/blade-mdm/program/ncfile/list-by-node',
        method: 'get',
        params: obj,
      }).then(
        resp => {
          this.fileList = resp.data.data;
        }
      );
    },
    uploadmodalSubmit(row,done) {
      
@@ -315,7 +406,7 @@
      })
    },
    showAdd (row) {  //新增子节点
      if(row.nodeType == 70) {
      if(row.nodeType == 60) {
        return;
      }
      this.modalTitle = "新增子节点";
@@ -417,6 +508,21 @@
      );
    }
  },
  mounted() {
    this.tabsOption = this.tabsOption1;
    //查看内容
    // this.loading = true;
    // var obj = {id: "1940982493963415554"}
    // axios({
    //   url: '/blade-mdm/program/ncfile/content',
    //   method: 'get',
    //   params: obj,
    // }).then(
    //   res => {
        
    //   }
    // );
  }
};
</script>

@@ -424,4 +530,9 @@
.el-form-item__label {
  width: 120px!important;
}
.delFile {
  color: red;
  margin-left: 12px;
  cursor: pointer;
}
</style>