添加工作流

lyh

2025-06-27 a751e547d67c4f8e2c6fddf958c1559f792515bd

添加工作流

 package.json

@@ -55,6 +55,7 @@
    "vuex": "^3.1.0",
    "vxe-table": "2.9.13",
    "vxe-table-plugin-antd": "1.8.10",
    "workflow-bpmn-modeler": "^0.2.8",
    "xe-utils": "2.4.8"
  },
  "devDependencies": {

 src/main.js

@@ -50,24 +50,8 @@
//表单验证
import { rules } from '@/utils/rules'
import * as echarts from 'echarts'
import qs from 'qs'
// import VCalendar from 'v-calendar'; // å¼•å…¥æ—¥åŽ†æ’件
//
// Vue.use(VCalendar, {
//   componentPrefix: 'vc',
// });

//注入全局属性$message
import { message, notification } from 'ant-design-vue'
Vue.prototype.$message = message
Vue.prototype.$notification = notification
message.config({
})
notification.config({
  bottom: '20px',
  right: '100px'
})

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// å°†è‡ªåŠ¨æ³¨å†Œæ‰€æœ‰ç»„件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
@@ -75,18 +59,17 @@
import VueDragResize from "vue-drag-resize"
Vue.component('vue-drag-resize', VueDragResize)

// import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts
Vue.prototype.$qs = qs
Vue.prototype.rules = rules
Vue.config.productionTip = false
Vue.use(Storage, config.storageOptions)
Vue.use(Antd)
Vue.use(VueAxios, router)
Vue.use(Viser)
Vue.use(hasPermission)
Vue.use(JDictSelectTag)
Vue.use(Print)
Vue.use(ElementUI);
Vue.use(Antd)
Vue.use(preview)
Vue.use(vueBus);
Vue.use(JeecgComponents);

 src/views/flowable/api/definition.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,134 @@
import {axios as request} from '@/utils/request'

// æŸ¥è¯¢æµç¨‹å®šä¹‰åˆ—表
export function listDefinition(query) {
  return request({
    url: '/flowable/definition/list',
    method: 'get',
    params: query
  })
}

// éƒ¨ç½²æµç¨‹å®žä¾‹
export function definitionStartByDefId(procDefId,data) {
  return request({
    url: '/flowable/definition/startByProcDefId/' + procDefId,
    method: 'post',
    data: JSON.stringify(data)
  })
}
// éƒ¨ç½²æµç¨‹å®žä¾‹
export function definitionStartByDefKey(procDefKey,data) {
  return request({
    url: '/flowable/definition/startByProcDefKey/' + procDefKey,
    method: 'post',
    data: JSON.stringify(data)
  })
}
// éƒ¨ç½²æµç¨‹å®žä¾‹
export function definitionStartByDataId(dataId,data) {
  return request({
    url: '/flowable/definition/startByDataId/' + dataId,
    method: 'post',
    data: data
  })
}

// èŽ·å–流程变量
export function getProcessVariables(taskId) {
  return request({
    url: '/flowable/task/processVariables/' + taskId,
    method: 'get'
  })
}

// æ¿€æ´»/挂起流程
export function updateState(params) {
  return request({
    url: '/flowable/definition/updateState',
    method: 'put',
    params: params
  })
}

// æŒ‡å®šæµç¨‹åŠžç†äººå‘˜åˆ—表
export function userList(query) {
  return request({
    url: '/flowable/definition/userList',
    method: 'get',
    params: query
  })
}

// æŒ‡å®šæµç¨‹åŠžç†ç»„列表
export function roleList(query) {
  return request({
    url: '/flowable/definition/roleList',
    method: 'get',
    params: query
  })
}
// æŒ‡å®šæµç¨‹åˆ†ç±»åˆ—表
export function categoryList(query) {
  return request({
    url: '/flowable/definition/categoryList',
    method: 'get',
    params: query
  })
}

// è¯»å–xml文件
export function readXml(deployId) {
  return request({
    url: '/flowable/definition/readXml/' + deployId,
    method: 'get'
  })
}
// è¯»å–xml文件
export function readXmlByDataId(dataId) {
  return request({
    url: '/flowable/definition/readXmlByDataId/' + dataId,
    method: 'get'
  })
}
// è¯»å–image文件
export function readImage(deployId) {
  return request({
    url: '/flowable/definition/readImage/' + deployId,
    method: 'get'
  })
}

// è¯»å–image文件
export function getFlowViewer(procInsId) {
  return request({
    url: '/flowable/task/flowViewer/' + procInsId,
    method: 'get'
  })
}
// è¯»å–image文件
export function getFlowViewerByDataId(dataId) {
  return request({
    url: '/flowable/task/flowViewerByDataId/' + dataId,
    method: 'get'
  })
}

// è¯»å–xml文件
export function saveXml(data) {
  return request({
    url: '/flowable/definition/save',
    method: 'post',
    data: data
  })
}

// åˆ é™¤æµç¨‹å®šä¹‰
export function delDeployment(query) {
  return request({
    url: '/flowable/definition/delete/',
    method: 'delete',
    params: query
  })
}


 src/views/flowable/api/finished.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,37 @@
import {axios as request} from '@/utils/request'

// æŸ¥è¯¢å·²åŠžä»»åŠ¡åˆ—表
export function finishedList(query) {
  return request({
    url: '/flowable/task/finishedList',
    method: 'get',
    params: query
  })
}

// ä»»åŠ¡æµè½¬è®°å½•
export function flowRecord(query) {
  return request({
    url: '/flowable/task/flowRecord',
    method: 'get',
    params: query
  })
}

// æ’¤å›žä»»åŠ¡
export function revokeProcess(data) {
  return request({
    url: '/flowable/task/revokeProcess',
    method: 'post',
    data: data
  })
}

// éƒ¨ç½²æµç¨‹å®žä¾‹
export function deployStart(deployId) {
  return request({
    url: '/flowable/process/startFlow/' + deployId,
    method: 'get',
  })
}


 src/views/flowable/api/process.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,34 @@
import {axios as request} from '@/utils/request'

// æˆ‘的发起的流程
export function myProcessList(query) {
  return request({
    url: '/flowable/task/myProcess',
    method: 'get',
    params: query
  })
}


// å–消申请
export function deleteByDataId(dataId,deleteReason) {
  const data = {
    dataId:dataId,
    deleteReason:deleteReason
  }
  return request({
    url: '/flowable/instance/deleteByDataId',
    method: 'post',
    params: data
  })
}


// éƒ¨ç½²æµç¨‹å®žä¾‹
export function deployStart(deployId) {
  return request({
    url: '/flowable/process/startFlow/' + deployId,
    method: 'get',
  })
}


 src/views/flowable/api/todo.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,65 @@
import {axios as request} from '@/utils/request'

// æŸ¥è¯¢å¾…办任务列表
export function todoList(query) {
  return request({
    url: '/flowable/task/todoList',
    method: 'get',
    params: query
  })
}

// å®Œæˆä»»åŠ¡
export function completeTask(data) {
  return request({
    url: '/flowable/task/completeByDateId',
    method: 'post',
    data: data
  })
}

// å§”派任务
export function delegate(data) {
  return request({
    url: '/flowable/task/delegate',
    method: 'post',
    data: data
  })
}

// é€€å›žä»»åŠ¡
export function returnTask(data) {
  return request({
    url: '/flowable/task/taskReturnByDataId',
    method: 'post',
    data: data
  })
}

// é©³å›žä»»åŠ¡
export function rejectTask(data) {
  return request({
    url: '/flowable/task/taskRejectByDataId',
    method: 'post',
    data: data
  })
}

// å¯é€€å›žä»»åŠ¡åˆ—表
export function returnList(data) {
  return request({
    url: '/flowable/task/findReturnTaskListByDataId',
    method: 'post',
    data: data
  })
}

// ä¸‹ä¸€èŠ‚点 todo ç›®å‰ç›´æŽ¥è‡ªåŠ¨åˆ†é…åˆ°å€™é€‰äººï¼Œä¸ç”¨ä¸»åŠ¨é€‰äººï¼Œå¦‚有需要再开发
export function getNextFlowNode(data) {
  return request({
    url: '/flowable/task/nextFlowNode',
    method: 'post',
    data: data
  })
}


 src/views/flowable/components/ActApplyBtn.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,73 @@
<style lang="less">
</style>
<template>
  <span>
      <a-button :loading="submitLoading" :type="btnType" @click="applySubmit()" >{{text}}</a-button>
  </span>
</template>

<script>
  import {definitionStartByDataId} from "@views/flowable/api/definition";

export default {
    name: 'ActApplyBtn',
    components: {},
    props: {
        btnType: { type: String, default: 'link', required: false },
        /**/
        dataId: {
            type: String,
            default: '',
            required: true
        },
        variables:{
          type: Object,
          default: {},
        },
        text: {
            type: String,
            default: '提交申请',
            required: false
        }

    },
    data() {
        return {
            modalVisible: false,
            submitLoading: false,
            form: {
            },
        };
    },
    created() {
    },
    watch: {
    },
    methods: {
        applySubmit() {
            if (this.dataId && this.dataId.length < 1) {
                this.error = '必须传入参数dataId';
                this.$message.error(this.error);
                return;
            } else {
                this.error = '';
            }
            this.submitLoading = true;
            var params = Object.assign({
                dataId: this.dataId
            }, this.variables);
          definitionStartByDataId(this.dataId, params)
                .then(res => {
                    if (res.success) {
                        this.$message.success('操作成功');
                        this.$emit('success');
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .finally(() => (this.submitLoading = false));
        }
    }

};
</script>

 src/views/flowable/components/ActCancelBtn.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
<style lang="less">
</style>
<template>
  <span>
      <a-button :type="btnType" @click="cancel()" >{{text}}</a-button>
      <a-modal title="确认撤回" v-model="modalCancelVisible" :mask-closable="false" :width="500">
            <a-form ref="delForm" v-model="cancelForm" :label-width="70" v-if="modalCancelVisible">
                <a-form-item label="撤回原因" prop="reason">
                    <a-input type="textarea" v-model="cancelForm.reason" :rows="4" />
                </a-form-item>
            </a-form>
            <div slot="footer">
                <a-button type="text" @click="modalCancelVisible = false">取消</a-button>
                <a-button type="primary" :disabled="submitLoading" @click="handelSubmitCancel">提交</a-button>
            </div>
        </a-modal>
  </span>
</template>

<script>
import {deleteByDataId} from "@views/flowable/api/process";

export default {
    name: 'ActCancelBtn',
    components: {},
    props: {
        btnType: { type: String, default: 'link', required: false },
        /**/
        dataId: {
            type: String,
            default: '',
            required: true
        },
        text: {
            type: String,
            default: '撤回',
            required: false
        }
    },
    data() {
        return {
            modalCancelVisible: false,
            cancelForm: {
                reason: ''
            },
            submitLoading: false,
        };
    },
    created() {
    },
    watch: {
    },
    methods: {
        cancel() {
            this.modalCancelVisible = true;
        },
        handelSubmitCancel() {
            this.submitLoading = true;
          deleteByDataId(this.dataId, this.cancelForm.reason)
                .then(res => {
                    if (res.success) {
                        this.$message.success('操作成功');
                        this.modalCancelVisible = false;
                        this.$emit('success');
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .finally(() => (this.submitLoading = false));
        }
    }

};
</script>

 src/views/flowable/components/ActHandleBtn.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,235 @@
<style lang="less">
</style>
<template>
  <span>
      <a-button :type="btnType" @click="handle()" >{{text}}</a-button>
      <a-modal :title="modalTaskTitle" v-model="modalTaskVisible" :mask-closable="false" :width="500">

      <div  v-if="modalTaskVisible">
        <div v-if="type==handleType.reApply">
          ç¡®è®¤æ— è¯¯å¹¶é‡æ–°æäº¤ï¼Ÿ
        </div>
        <a-form ref="form" :model="form" :label-width="85" >
          <a-form-item v-if="type!==handleType.reApply" label="处理意见" prop="reason">
            <a-input type="textarea" v-model="form.comment" :rows="4" />
          </a-form-item>
          <div v-show="type==2">
            <a-form-item label="退回节点" prop="targetKey" v-if="returnTaskList.length">
              <a-radio-group v-model="form.targetKey" @change="targetKeyChange">
                <a-radio-button
                  v-for="item in returnTaskList"
                  :key="item.id"
                  :value="item.id"
                >{{item.name}}</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <span v-else>无可退回节点！</span>
          </div>
            <div v-if="form.targetKey !== 'start' && candidateUsers.length">
                <a-form-item label="下个节点审批候选人">
                    <a-select
                        mode="multiple"
                        v-model="candidateUsersSelecteds"
                        style="width: 100%"
                        placeholder="请选择下个节点审批候选人"
                    >
                    <a-select-option v-for="user in candidateUsers" :key="user.username" :value="user.username">
                        {{user.realname}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
            </div>
        </a-form>
      </div>
      <div slot="footer">
        <a-button type="text" @click="modalTaskVisible=false">取消</a-button>
        <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
      </div>
    </a-modal>
  </span>
</template>

<script>
  import {completeTask, rejectTask, returnList, returnTask} from "@views/flowable/api/todo";

export default {
    name: 'ActHandleBtn',
    components: {},
    props: {
        btnType: { type: String, default: 'link', required: false },
        /* handleType 0通过 1驳回 2退回  */
        type: {
            type: String|Number,
            default: '0',
            required: true
        },
        dataId: {
            type: String,
            default: '',
            required: true
        },
      /*流程变量*/
        variables:{
          type: Object,
          default: ()=>{},
        },
        candidateUsers:{
          type: Array,
          default: ()=>[],
        },
        text: {
            type: String,
            default: '处理',
            required: false
        }
    },
    data() {
        return {
          handleType:{
            // é€šè¿‡
            pass: 0,
            // é©³å›ž
            back: 1,
            // é€€å›ž
            return: 2,
            // é‡æ–°æäº¤
            reApply: 3
            },
            returnTaskList: [],
            candidateUsersSelecteds:[],
            modalTaskVisible: false,
            submitLoading: false,
            form: {
              comment:'',
              targetKey:''
            },
            modalTaskTitle: '',

        };
    },
    created() {
    },
    watch: {
    },
    methods: {
        handle() {
          this.form.comment = ''
          this.candidateUsersSelecteds = []
            if (this.type === this.handleType.delegate) {
                // this.delegateTask();
            } else if (this.type === this.handleType.pass) {
                this.passTask();
            } else if (this.type === this.handleType.back) {
                this.backTask();
            } else if(this.type === this.handleType.return){
                this.returnTask();
            } else if(this.type === this.handleType.reApply){
                this.reApply();
            }
            else {
                this.$message.warn('未知类型type，参见 handleType');
            }
        },
        reApply() {
            const v = this;
            this.modalTaskTitle = '确认重新提交';
            this.modalTaskVisible = true;
        },
        passTask() {
            const v = this;
            this.modalTaskTitle = '审批通过';
            this.modalTaskVisible = true;
        },
        backTask() {
          const v = this;
          this.modalTaskTitle = '审批驳回';
          this.modalTaskVisible = true;
        },
        returnTask() {
            const v = this;
            this.modalTaskTitle = '审批退回';
            this.modalTaskVisible = true;
            returnList({dataId:this.dataId}).then(res => {
              this.returnTaskList = res.result||[];
              // console.log(this.returnTaskList)
            })
        },

        handelSubmit() {
            console.log('提交');
            this.submitLoading = true;
            var formData = Object.assign({
                dataId:this.dataId,
                candidateUsers:this.candidateUsersSelecteds,
                values:Object.assign({dataId:this.dataId},this.variables)
            }, this.form);
            if (this.type==this.handleType.reApply){
              formData.comment = '重新提交'
            }
            if (!formData.comment){
              this.$message.error('请输入审批意见！');
              this.submitLoading=false
              return;
            }
            // æœ‰ä¸‹ä¸ªèŠ‚点审批人选择，但是未选
            if (this.candidateUsers.length &&
              this.candidateUsersSelecteds.length==0 &&
              this.form.targetKey !== 'start'
            ){
              this.$message.error('请选择下个节点审批人！');
              this.submitLoading=false
              return;
            }
            if (this.type == this.handleType.reApply || this.type == this.handleType.pass) {
                // é€šè¿‡
              completeTask(formData).then(res => {
                    this.submitLoading = false;
                    if (res.success) {
                        this.$message.success('操作成功');
                        this.modalTaskVisible = false;
                        this.$emit('success');
                    } else {
                        this.$message.error('操作失败');
                    }
                }).finally(()=>{this.submitLoading=false});
            } else if (this.type == this.handleType.back) {
                // é©³å›ž
                  rejectTask(formData).then(res => {
                        this.submitLoading = false;
                        if (res.success) {
                            this.$message.success('操作成功');
                            this.modalTaskVisible = false;
                            this.$emit('success');
                        } else {
                            this.$message.error('操作失败');
                        }
                    }).finally(()=>{this.submitLoading=false});

            } else if (this.type == this.handleType.return){
              if (!formData.targetKey){
                this.$message.error('请选择退回节点！');
                this.submitLoading=false
                return;
              }
              //退回
              returnTask(formData).then(res => {
                this.submitLoading = false;
                if (res.success) {
                  this.$message.success('操作成功');
                  this.modalTaskVisible = false;
                  this.$emit('success');
                } else {
                  this.$message.error('操作失败');
                }
              }).finally(()=>{this.submitLoading=false});
            }
        },

        targetKeyChange() {
            this.candidateUsersSelecteds = []
            this.$emit('targetKeyChange',this.form.targetKey)
        }
    }

};
</script>

 src/views/flowable/components/ActHistoricDetailBtn.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,53 @@
<style lang="less">
</style>
<template>
  <span>
      <a-button :type="btnType"  @click="history()" >{{text}}</a-button>
      <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="true" :width="'80%'" :footer="null">
          <div v-if="modalLsVisible">
              <HistoricDetail ref="historicDetail" :data-id="dataId"></HistoricDetail>
          </div>
      </a-modal>
  </span>
</template>

<script>
import HistoricDetail from './HistoricDetail';
export default {
    name: 'ActHistoricDetailBtn',
    components: { HistoricDetail },
    props: {
        btnType: { type: String, default: 'link', required: false },
        /**/
        dataId: {
            type: String,
            default: '',
            required: true
        },
        text: {
            type: String,
            default: '审批历史',
            required: false
        }
    },
    data() {
        return {
            modalLsVisible: false
        };
    },
    created() {
    },
    watch: {
    },
    methods: {
        history() {
            if (!this.dataId) {
                this.$message.error('流程实例ID不存在');
                return;
            }
            this.modalLsVisible = true;
        }
    }

};
</script>

 src/views/flowable/components/HistoricDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,343 @@
<style lang="less">
</style>
<template>
  <div class="search">
    <a-card>
      <p slot="title">
        <span>流程图</span>
      </p>
      <div :style="{height: svgHeight}" v-if="svgShow">
        <bpmnModeler class="svg" ref="bpm" :xml="xmlData" :is-view="true"></bpmnModeler>
      </div>
    </a-card>
    <a-card style="margin-top:10px;">
      <p slot="title">
        <span>流程审批进度历史</span>
      </p>
      <a-row style="position:relative">
        <div class="block">
          <a-timeline>
            <a-timeline-item
              v-for="(item,index ) in flowRecordList"
              :key="index"
              :color="setColor(item.finishTime)"
            >
              <p style="font-weight: 700;">{{item.taskName}}
                <i v-if="!item.finishTime" style="color: orange">(待办中。。。)</i>
              </p>

              <a-card :body-style="{ padding: '10px' }">
                <label v-if="item.assigneeName&&item.finishTime" style="font-weight: normal;margin-right: 30px;">实际办理人： {{item.assigneeName}} <a-tag type="info" size="mini">{{item.deptName}}</a-tag></label>
                <label v-if="item.candidate" style="font-weight: normal;margin-right: 30px;">候选办理人： {{item.candidate}}</label>
                <label style="font-weight: normal">接收时间： </label><label style="color:#8a909c;font-weight: normal">{{item.createTime}}</label>
                <label v-if="item.finishTime" style="margin-left: 30px;font-weight: normal">办结时间： </label><label style="color:#8a909c;font-weight: normal">{{item.finishTime}}</label>
                <label v-if="item.duration" style="margin-left: 30px;font-weight: normal">耗时： </label><label style="color:#8a909c;font-weight: normal">{{item.duration}}</label>

                <p  v-if="item.comment">
<!--  1 æ­£å¸¸æ„è§  2 é€€å›žæ„è§ 3 é©³å›žæ„è§                -->
                  <a-tag color="green" v-if="item.comment.type === '1'">
                    <span v-if="item.comment.comment!='重新提交'">通过：</span>
                    {{item.comment.comment}}
                  </a-tag>
                  <a-tag color="orange" v-if="item.comment.type === '2'">退回：  {{item.comment.comment}}</a-tag>
                  <a-tag color="red" v-if="item.comment.type === '3'">驳回：  {{item.comment.comment}}</a-tag>
                </p>
              </a-card>
            </a-timeline-item>
          </a-timeline>
        </div>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import {flowRecord} from "@views/flowable/api/finished";
import {getFlowViewerByDataId, readXmlByDataId} from "@views/flowable/api/definition";
import bpmnModeler from "workflow-bpmn-modeler";

export default {
    name: 'HistoricDetail',
  components: {
    bpmnModeler,
  },
    props: {
    /**/
        dataId: {
            type: String,
            default: '',
            required: true
        },

    },
    data() {
        return {
            taskList:[],
            flowRecordList: [], // æµç¨‹æµè½¬æ•°æ®
            formData:{},
            xmlData:'',
            type: 0,
            loading: false, // è¡¨å•åŠ è½½çŠ¶æ€
            loadingImg: false,
            data: [],
            id: '',
            imgUrl: '',
            backRoute: '',
          svgHeight:'',
          svgShow: true
        };
    },
    created() {
        this.init();
    },
    watch: {
      dataId: function(newval, oldName) {
            this.init();
        }
    },

    methods: {
        init() {
          this.getFlowRecordList()
          this.getModelDetail()
        },
      /** xml æ–‡ä»¶ */
      getModelDetail() {
        // å‘送请求，获取xml
        readXmlByDataId(this.dataId).then(res => {
          this.xmlData = res.result
          this.getFlowViewer()
          setTimeout(()=>{
            this.fitViewport()
          })
        })
      },
      // æµç¨‹è¿›è¡Œæƒ…况
      getFlowViewer() {
        getFlowViewerByDataId(this.dataId).then(res => {
          this.taskList = res.result || []
          this.fillColor();
        })
      },
      /** æµç¨‹æµè½¬è®°å½• */
      getFlowRecordList() {
        const params = {dataId: this.dataId}
        flowRecord(params).then(res => {
          // console.log(res)
          this.flowRecordList = res.result.flowList;
          this.finishOrder()
          // æµç¨‹è¿‡ç¨‹ä¸­ä¸å­˜åœ¨åˆå§‹åŒ–表单 ç›´æŽ¥è¯»å–的流程变量中存储的表单值
          if (res.result.formData) {
            this.formData = res.result.formData;
          }
        }).catch(res => {
          console.log(res)
        })
      },
        //整理顺序，把待办放最上面，并且只留一个（不然会签时会乱）
      finishOrder(){
        const list = []
        let noFinish = null
        for (const flow of this.flowRecordList) {
          if (flow.finishTime){
            // åŠžç»“的节点同时取有实际办理人的，因为会签会将所有的多实例都返回，需要过滤
            if (flow.assigneeId){
              list.push(flow)
            }
          } else {
            noFinish = flow
          }
        }
        if (noFinish){
          const find = list.find(obj=>obj.taskDefKey == noFinish.taskDefKey);
          if (find){
            noFinish.taskName = '【会签中】'+noFinish.taskName
          }
          this.flowRecordList = [noFinish,...list];
        } else {
          this.flowRecordList = list;
        }

      },
        setColor(val) {
          if (val) {
            return "#2bc418";
          } else {
            return "#b3bdbb";
          }
        },
      fillColor() {
        const modeler = this.$refs.bpm.modeler;
        const canvas = modeler.get('canvas')
        modeler._definitions.rootElements[0].flowElements.forEach(n => {
          const completeTask = this.taskList.find(m => m.key === n.id)
          const todoTask = this.taskList.find(m => !m.completed)
          const endTask = this.taskList[this.taskList.length - 1]
          //用户任务
          if (n.$type === 'bpmn:UserTask') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              canvas.addMarker(n.id, completeTask.back ? 'highlight-back' : 'highlight-noback')
              n.outgoing.forEach(nn => {
                const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
                    canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  }else {
                    canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  }
                }
              })
            }
          }
          // æŽ’他网关
          else if (n.$type === 'bpmn:ExclusiveGateway') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              n.outgoing.forEach(nn => {
                const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
                if (targetTask) {

                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }

              })
            }

          }
          // å¹¶è¡Œç½‘å…³
          else if (n.$type === 'bpmn:ParallelGateway') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              n.outgoing.forEach(nn => {
                debugger
                const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              })
            }
          }
          else if (n.$type === 'bpmn:StartEvent') {
            n.outgoing.forEach(nn => {
              const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
              if (completeTask) {
                canvas.addMarker(nn.id, 'highlight')
                canvas.addMarker(n.id, 'highlight')
                return
              }
            })
          }
          else if (n.$type === 'bpmn:EndEvent') {
            if (endTask.key === n.id && endTask.completed) {
              canvas.addMarker(n.id, 'highlight')
              return
            }
          }
        })
      },
      // è®©å›¾èƒ½è‡ªé€‚应屏幕
      fitViewport() {
        const modeler = this.$refs.bpm.modeler;
        const canvas = modeler.get('canvas')
        // this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
        if (this.svgHeight){
          document.querySelector('.canvas').style.height = this.svgHeight;
        }
        const bbox = document.querySelector('.flow-containers .viewport').getBBox()
        const currentViewbox = modeler.get('canvas').viewbox()
        if (!this.svgHeight){
          this.svgHeight = currentViewbox.inner.height + 'px'
          this.svgShow = false
          this.$nextTick(()=>{
            this.svgShow = true
          })
          // this.fitViewport()
          setTimeout(()=>{
            this.fitViewport()
          })
        }

        const elementMid = {
          x: bbox.x + bbox.width / 2 - 65,
          y: bbox.y + bbox.height / 2
        }
        // è°ƒèŠ‚位置
        modeler.get('canvas').viewbox({
          x: elementMid.x - currentViewbox.width / 2 + 70,
          y: elementMid.y - currentViewbox.height/2,
          width: currentViewbox.width,
          height: currentViewbox.height
        })
        // è°ƒèŠ‚大小缩放
        const zoom = currentViewbox.outer.width /(currentViewbox.inner.width+200)
        console.log('********',zoom,elementMid,currentViewbox.inner,currentViewbox.outer)
        // modeler.get('canvas').zoom(zoom)


      },
    }

};
</script>
<style lang="less">
   .highlight.djs-shape .djs-visual > :nth-child(1) {
     fill: green !important;
     stroke: green !important;
     fill-opacity: 0.2 !important;
   }
   .highlight.djs-shape .djs-visual > :nth-child(2) {
     fill: green !important;
   }
   .highlight.djs-shape .djs-visual > path {
     fill: green !important;
     fill-opacity: 0.2 !important;
     stroke: green !important;
   }
   .highlight.djs-connection > .djs-visual > path {
     stroke: green !important;
   }
   // .djs-connection > .djs-visual > path {
   //   stroke: orange !important;
   //   stroke-dasharray: 4px !important;
   //   fill-opacity: 0.2 !important;
   // }
   // .djs-shape .djs-visual > :nth-child(1) {
   //   fill: orange !important;
   //   stroke: orange !important;
   //   stroke-dasharray: 4px !important;
   //   fill-opacity: 0.2 !important;
   // }
   .highlight-todo.djs-connection > .djs-visual > path {
     stroke: orange !important;
     stroke-dasharray: 4px !important;
     fill-opacity: 0.2 !important;
   }
   .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
     fill: orange !important;
     stroke: orange !important;
     stroke-dasharray: 4px !important;
     fill-opacity: 0.2 !important;
   }
   .highlight-back.djs-connection > .djs-visual > path {
     stroke: red !important;
     stroke-dasharray: 4px !important;
     fill-opacity: 0.2 !important;
   }
   .highlight-back.djs-shape .djs-visual > :nth-child(1) {
     fill: red !important;
     stroke: red !important;
     stroke-dasharray: 4px !important;
     fill-opacity: 0.2 !important;
   }
   .overlays-div {
     font-size: 10px;
     color: red;
     width: 100px;
     top: -20px !important;
   }
</style>

 src/views/flowable/mixin/FlowableMixin.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,68 @@
import Vue from "vue";
import {USER_INFO} from "@/store/mutation-types";

/**
 *
 */

export const FlowableMixin = {
  data(){
    return {
      loginUser:{}
    }
  },
  created() {
    this.loginUser = Vue.ls.get(USER_INFO);
  },
  methods:{
    // å½“前数据是否可提交
    isCanApply(row){
      // æ²¡æœ‰æµç¨‹å®žä¾‹çš„即可提交
      return !Boolean(row.processInstanceId);
    },
    // å½“前数据是否可撤回
    isCanRecall(row){
      // è¿›è¡Œä¸­çš„流程&&当前节点不是开始节点&&状态不是通过
      return Boolean(row.processInstanceId)&&row.taskNameId!=='start'&&row.actStatus!=='审批通过';
    },
    // é‡æ–°æäº¤æŒ‰é’®
    isCanReApply(row){
      return row.taskNameId=='start'&&this.isTodoUsers(row);
    },
    // é€šè¿‡æŒ‰é’®
    isCanPass(row){
      return row.taskNameId!=='start'&& this.isTodoUsers(row);
    },
    // é©³å›žé€€å›žæŒ‰é’®
    isCanBacke(row){
      // ä¸æ˜¯start节点&&在可操作人员列表
      return row.taskNameId!=='start'&&this.isTodoUsers(row);
    },
    // æŸ¥çœ‹å®¡æ‰¹åŽ†å²æŒ‰é’®
    isCanHistoric(row){
      // æœ‰å®žä¾‹id就能查看
      return Boolean(row.processInstanceId);
    },
    // å½“前登录人是否在处理人列表
    isTodoUsers(row){
      const todoUsers = row.todoUsers;
      if (todoUsers&&todoUsers.length){
        const parse = JSON.parse(todoUsers)||[];
        return parse.includes(this.loginUser.username);
      }else {
        return false;
      }
    },
    // å½“前登录人是否是处理过的人列表
    isDoneUsers(row){
      const doneUsers = row.doneUsers;
      if (doneUsers&&doneUsers.length){
        const parse = JSON.parse(doneUsers)||[];
        return parse.includes(this.loginUser.username);
      }else {
        return false;
      }
    },
  }

}

 src/views/flowable/modeler/modelerDesign.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,400 @@
<template>
  <div>
<!--  ==================流程定义列表===============  -->
    <a-card v-if="!xmlFrame.open||xmlView">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="流程名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程分类" prop="category">
        <el-select @change="handleQuery" v-model="queryParams.category" placeholder="请选择流程分类" clearable prop="category">
          <el-option label="请选择" value="" />
          <el-option v-for="category in categorys" :key="category.id" :label="category.name" :value="category.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="激活" prop="active">
        <el-switch
          v-model="queryParams.active"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleQuery"
        >
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleLoadXml"
        >新增流程定义</el-button>
      </el-form-item>
    </el-form>

      <el-table
        v-loading="loading" fit
        :data="definitionList"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="流程定义id" align="center" prop="id" />
      <el-table-column label="流程标识Key" align="center" prop="key"  />
      <el-table-column label="流程分类" align="center" >
        <template slot-scope="scope">
            <span>{{ getCategoryName(scope.row.category) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程名称" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-button type="text" @click="handleReadImage(scope.row.deploymentId)">
            <span>{{ scope.row.name }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="流程版本" align="center">
        <template slot-scope="scope">
          <el-tag size="medium" >v{{ scope.row.version }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
          <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              æ›´å¤šæ“ä½œ<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit-outline" @click.native="handleLoadXml(scope.row)">
                ç¼–辑
              </el-dropdown-item>
<!--              <el-dropdown-item icon="el-icon-connection" @click.native="handleAddForm(scope.row)" v-if="scope.row.formId == null">
                é…ç½®è¡¨å•
              </el-dropdown-item>-->
              <el-dropdown-item icon="el-icon-video-pause" @click.native="handleUpdateSuspensionState(scope.row)" v-if="scope.row.suspensionState === 1">
                æŒ‚èµ·
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-video-play" @click.native="handleUpdateSuspensionState(scope.row)" v-if="scope.row.suspensionState === 2">
                æ¿€æ´»
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)" >
                åˆ é™¤
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="total>0"
      :total="total"
      :current-page.sync="queryParams.pageNum"
      :page-size.sync="queryParams.pageSize"
      @size-change="getList"
      @current-change="getList"
    />
    </a-card>
      <!-- æµç¨‹å›¾ -->
    <a-card v-if="xmlFrame.open&&!xmlView" :title="xmlFrame.title">
      <a slot="extra" href="#" @click="()=>{xmlFrame.open=false}">返回</a>
      <bpmn-modeler
        v-if="xmlShow"
        ref="refNode"
        :xml="xmlData"
        :users="users"
        :groups="groups"
        :categorys="categorys"
        :is-view="xmlView"
        @save="save"
      />
    </a-card>
<!--  å¼¹çª—预览  -->
      <a-modal :title="xmlFrame.title" :visible.sync="xmlView&&xmlFrame.open" :width="xmlFrame.width"
        :footer="null" closable @cancel="()=>{xmlView=false,xmlFrame.open=false}"
      >
        <bpmn-modeler
          v-if="xmlShow"
          ref="refNode"
          :xml="xmlData"
          :users="users"
          :groups="groups"
          :categorys="categorys"
          :is-view="xmlView"
          @save="save"
        />
      </a-modal>

  </div>
</template>

<script>
import bpmnModeler from "workflow-bpmn-modeler";
import {
  categoryList,
  delDeployment,
  listDefinition,
  readXml,
  roleList,
  saveXml,
  updateState,
  userList
} from "@views/flowable/api/definition";

export default {
  components: {
    bpmnModeler,
  },
  data() {
    return {
      /*===================设计器属性======================*/
      users: [],
      groups: [],
      categorys: [],
      /*=================页面属性===================*/
      loading: true,
      // æ€»æ¡æ•°
      total: 0,
      // æµç¨‹å®šä¹‰è¡¨æ ¼æ•°æ®
      definitionList: [],
      allDefinitionList: [],
      // æŸ¥è¯¢å‚æ•°
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null
      },
      xmlFrame:{
        width:'70%',
        title:'流程图',
        open: false,
        src: "",
      },
      // xml
      xmlData:"",
      xmlShow: true,
      xmlView: false,

    };
  },
  created() {
    this.initUserAndRole();
    this.getList();
  },
  methods: {
    /*===============设计器===============*/
    initUserAndRole(){
      userList({}).then(res=>{
        this.users = res.result||[]
        this.users.map(o=>{
          o.id = o.username
          o.name = o.realname
        })
      })
      roleList({}).then(res=>{
        this.groups = res.result||[]
        this.groups.map(o=>{
          o.name = o.roleName
        })
      })
      categoryList({}).then(res=>{
        this.categorys = res.result||[]
      })
    },
    getModelDetail(deployId) {
      // å‘送请求，获取xml
      readXml(deployId).then(res =>{
        this.xmlData = res.result;
      })
    },
    getCategoryName(category){
      let find = this.categorys.find(o=>o.id==category);
      if (find){
        return find.name
      }
      return ''
    },
    /*保存流程定义*/
    save(data) {
      console.log(data);  // { process: {...}, xml: '...', svg: '...' }
      const params = {
        name: data.process.name,
        category: data.process.category,
        xml: data.xml
      }
      saveXml(params).then(res => {
        this.$message.success(res.message)
        // å…³é—­å½“前标签页并返回上个页面
        this.getList()
        this.xmlFrame.open = false
      })
    },
    /*================页面===============*/
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.suspensionState = this.queryParams.active?1:0;
      this.getList();
    },
    /** æŸ¥è¯¢æµç¨‹å®šä¹‰åˆ—表 */
    getList() {
      this.loading = true;
      // æœ€æ–°ç‰ˆæœ¬
      const param1 = Object.assign({
        isLastVersion:1,
      },this.queryParams)
      listDefinition(param1).then(response => {
        this.definitionList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
        for (const definition of this.definitionList) {
          definition.hasChildren = true
        }
      });
      // // æ‰€æœ‰
      // const param2 = Object.assign({
      //   isLastVersion:0
      // },this.queryParams,{
      //   pageSize: 9999,
      //   pageNum:1
      // })
      // listDefinition(param2).then(response => {
      //   console.log(response)
      //   this.allDefinitionList = response.result.records;
      // });
    },
    /** é‡ç½®æŒ‰é’®æ“ä½œ */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /** æ‰“开流程设计弹窗页面 */
    handleLoadXml(row){
      if (row&&row.deploymentId){
        console.log(row.deploymentId)
        this.handleReadImage(row.deploymentId)
        this.xmlView = false
        this.xmlFrame.title = "编辑流程图";
      } else {
        //新增
        this.xmlData = ''
        this.xmlView = false
        this.xmlFrame.open = true
        this.xmlFrame.title = '新增流程'
        this.xmlShow = false
        this.$nextTick(()=>{
          this.xmlShow = true
        })
      }
      this.xmlFrame.width = '90%'
    },
    /** æµç¨‹å›¾æŸ¥çœ‹ */
    handleReadImage(deploymentId){
      this.xmlFrame.title = "流程图";
      this.xmlFrame.open = true;
      this.xmlFrame.width = '70%';
      // this.xmlFrame.src = process.env.VUE_APP_BASE_API + "/flowable/definition/xmlFrame/" + deploymentId;
      // å‘送请求，获取xml
      this.xmlView = true
      readXml(deploymentId).then(res =>{
        if (res.success){
          this.xmlData = res.result
          /*this.xmlShow = false
          this.$nextTick(()=>{
            this.xmlShow = true
          })*/
        } else {
          this.$message.error("获取流程图失败！")
        }
      })
    },
    // æ‰“开业务表单
    handleForm() {
    },
    // é…ç½®ä¸šåŠ¡è¡¨å•
    handleAddForm(row) {
    },
    /** æŒ‚èµ·/激活流程 */
    handleUpdateSuspensionState(row){
      let state = 1;
      if (row.suspensionState === 1) {
        state = 2
      }
      const params = {
        deployId: row.deploymentId,
        state: state
      }
      updateState(params).then(res => {
        this.$message.success(res.message);
        this.getList();
      });
    },
    /** åˆ é™¤æŒ‰é’®æ“ä½œ */
    handleDelete(row) {
      // const ids = row.deploymentId || this.ids;
      const params = {
        deployId: row.deploymentId
      }
      this.$confirm({
        title:"警告",
        content:'是否确认删除流程定义编号为"' + params.deployId + '"的数据项?',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        onOk:()=>{
          delDeployment(params).then(res=>{
            this.getList();
            if (res.success){
              this.$message.success('删除成功');
            } else {
              this.$message.success('删除失败');
            }
          })
        }
      })
    },
    load(tree, treeNode, resolve) {
      const key = tree.key;
      const childrens = []
      for (const one of this.allDefinitionList) {
        if (one.key==key&&one.id!=tree.id){
          childrens.push(one)
        }
      }
      console.log(tree, treeNode,this.allDefinitionList,childrens)
      resolve(childrens)
    }
  },
  computed: {
    getContainer() {
      return document.querySelector('#app')
    }
  }
};
</script>

 src/views/flowable/workflow/FlowCompleted.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,300 @@
<!--
 Description: å·¥ä½œæµ-我的已办 List
 Author: ä½œè€… liuyh
 Date:   2025-02-27
-->
<template>
  <a-card :bordered="false">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="流程分类">
              <j-dict-select-tag placeholder="请选择流程分类" v-model="queryParam.category"
                                 dictCode="flow_type"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="操作时间">
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间"
                      class="query-group-cust"
                      v-model="queryParam.startTime"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间"
                      class="query-group-cust"
                      v-model="queryParam.endTime"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- æŸ¥è¯¢åŒºåŸŸ-END -->

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
            <a @click="handelDetial(record,text)">详情</a>
        </span>

      </a-table>
    </div>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
export default {
  name: 'NcDeviceCharactersList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDictSelectTag,
  },
  data() {
    return {
      description: '工作流-已办',
      // è¡¨å¤´
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 200,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '流程分类',
          align: 'center',
          dataIndex: 'category_dictText',
          width: 200
        },
        {
          title: '流程名称',
          align: 'center',
          dataIndex: 'procDefName',
          width: 200
        },
        {
          title: '流程业务简要描述',
          align: 'center',
          dataIndex: 'description',
          width: 300
        },
        {
          title: '流程发起人名称',
          align: 'center',
          dataIndex: 'startUserName',
          width: 250
        },
        {
          title: '任务名称',
          align: 'center',
          dataIndex: 'taskName',
          width: 250
        },
        {
          title: '操作时间',
          align: 'center',
          dataIndex: 'finishTime',
          width: 300
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 200,
          fixed: 'right'
        }
      ],
      url: {
        list: '/assign/flow/finishedList'
      },
      dictOptions: {},
      selectShenpiData: {},
      selectDispatchFileXqData: {},
      selectWeekMaintenanceData: {},
      selectInspectionOrderXqData: {},
      selectRepairOrderData: {},
      selectOutBoundOrderData: {},
      selectLossBoundOrderData: {},
      selectStocktakingBoundOrderData: {}
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handelDetial(item, index) {
      console.log('点击了详情')
      console.log('item----->', item)
      console.log('index----->', index)
      let approcesstype = this.splitAprocessType(item.category)
      console.log('approcesstype--->', approcesstype)
      switch (approcesstype) {
        case 'drApproval':
          this.handDrDetial(item)
          break
        case 'ggApproval':
          this.handDispatchFileDetial(item)
          break
        case 'sbdjApproval':
          this.handInspectionOrder(item)
          break
        case 'WEEK_MAINTENANCE':
          this.handleWeekMaintenance(item)
          break
        case 'eam_repair':
          this.handleRepairOrder(item)
          break
        case 'toolOutStorageApproval':
          this.handleToolOutStorageApproval(item)
          break
        case 'toolsStocktakingBound':
          this.handleToolStocktakingApproval(item)
          break
        case 'toolsLossApproval':
          this.handleToolLossApproval(item)
          break
        default:
          alert('没找到该流程')
      }
    },

    splitAprocessType(title) {
      let parts = title.split('：') // æ³¨æ„å†’号是全角字符，使用对应的字进行分割
      let result = parts[0]
      return result
    },
    handDrDetial(item) {
      this.selectShenpiData = item
      this.selectShenpiData.assignee_dictText = item.todoUsers_dictText
      this.selectShenpiData.procInstId = item.procInsId
      this.selectShenpiData.title = item.description
      this.$refs.modalFormApproval.clearTableSource()
      this.$refs.modalFormApproval.getAllApproveData(item)
    },
    handDispatchFileDetial(item) {
      console.log('item----->', item)
      this.selectDispatchFileXqData = item
      this.selectDispatchFileXqData.assignee_dictText = item.todoUsers_dictText
      this.selectDispatchFileXqData.procInstId = item.procInsId
      this.selectDispatchFileXqData.processInstanceId = item.procInsId
      this.selectDispatchFileXqData.title = item.description
      this.$refs.modalFormDispatchFileXq.clearTableSource()
      this.$refs.modalFormDispatchFileXq.getAllApproveData(item)
    },
    handleWeekMaintenance(record) {
      this.selectWeekMaintenanceData = Object.assign({}, record)
      this.$refs.weekMaintenanceApprovalModal.handleDetail(record)
      this.$refs.weekMaintenanceApprovalModal.title = '详情'
      this.$refs.weekMaintenanceApprovalModal.disableSubmit = true
    },

    handInspectionOrder(record) {
      console.log('record----->', record)
      this.selectInspectionOrderXqData = Object.assign({}, record)
      const { todoUsers_dictText, procInsId, description, taskName } = this.selectInspectionOrderXqData
      this.selectInspectionOrderXqData.assignee_dictText = todoUsers_dictText
      this.selectInspectionOrderXqData.procInstId = procInsId
      this.selectInspectionOrderXqData.processInstanceId = procInsId
      this.selectInspectionOrderXqData.title = description
      this.$refs.modalFormInspectionOrderXq.visible = true
      this.$refs.modalFormInspectionOrderXq.title = taskName
      this.$refs.modalFormInspectionOrderXq.disableSubmit = true
      this.$refs.modalFormInspectionOrderXq.getAllApproveData({
        ...record,
        procInstId: procInsId,
        processInstanceId: procInsId
      })
      this.$refs.modalFormInspectionOrderXq.getBasicInformation(record)
    },

    /**
     * ç‚¹å‡»è®¾å¤‡ç»´ä¿®åˆ†ç±»æµç¨‹è¯¦æƒ…时触发
     * @param record
     */
    handleRepairOrder(record) {
      this.selectRepairOrderData = Object.assign({}, record)
      const { procInsId, taskName } = this.selectRepairOrderData
      this.$refs.repairOrderApprovalModal.visible = true
      this.$refs.repairOrderApprovalModal.disableSubmit = true
      this.$refs.repairOrderApprovalModal.title = taskName
      this.$refs.modalFormInspectionOrderXq.getAllApproveData({
        ...record,
        procInstId: procInsId,
        processInstanceId: procInsId
      })
      this.$refs.repairOrderApprovalModal.getBasicInformation(record)
    },

    handleToolOutStorageApproval(item) {
      this.selectOutBoundOrderData = Object.assign({}, item)
      item.procInstId = item.procInsId
      item.processInstanceId = item.procInsId
      this.selectOutBoundOrderData.assignee_dictText = item.todoUsers_dictText
      this.$refs.outBoundOrderHandle.auditVisible = false
      this.$refs.outBoundOrderHandle.clearTableSource()
      this.$refs.outBoundOrderHandle.getAllApproveData(item)
    },

    handleToolStocktakingApproval(item) {

      this.selectStocktakingBoundOrderData = Object.assign({}, item)
      item.procInstId = item.procInsId
      item.processInstanceId = item.procInsId
      this.selectStocktakingBoundOrderData.assignee_dictText = item.todoUsers_dictText
      this.$refs.stocktakingBoundHandle.auditVisible = false
      this.$refs.stocktakingBoundHandle.disableSubmit = true
      this.$refs.stocktakingBoundHandle.clearTableSource()
      this.$refs.stocktakingBoundHandle.getAllApproveData(item)

    },
    handleToolLossApproval(item) {
      this.selectLossBoundOrderData = Object.assign({}, item)
      item.procInstId = item.procInsId
      item.processInstanceId = item.procInsId
      this.selectStocktakingBoundOrderData.assignee_dictText = item.todoUsers_dictText
      this.$refs.lossBoundHandle.auditVisible = false
      this.$refs.lossBoundHandle.disableSubmit = true
      this.$refs.lossBoundHandle.clearTableSource()
      this.$refs.lossBoundHandle.getAllApproveData(item)

    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

 src/views/flowable/workflow/FlowLedger.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,248 @@
<!--
 Description: å·¥ä½œæµ-总台账 List
 Author: ä½œè€… liuyh
 Date:   2025-02-27
-->
<template>
  <a-card :bordered="false">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="流程分类">
              <j-dict-select-tag placeholder="请选择流程分类" v-model="queryParam.category"
                                 dictCode="flow_type"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="流程名称">
              <a-input placeholder="请输入流程名称" v-model="queryParam.flowName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="简要描述">
              <a-input placeholder="请输入简要描述" v-model="queryParam.title"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="操作时间">
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" class="query-group-cust"
                      v-model="queryParam.startTime"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" class="query-group-cust"
                      v-model="queryParam.endTime"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- æŸ¥è¯¢åŒºåŸŸ-END -->

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
            <a @click="handelDetail(record,text)">详情</a>
        </span>
      </a-table>
    </div>

  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'

  export default {
    name: 'FlowLedger',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      JDictSelectTag
    },
    data() {
      return {
        description: '流程管理',
        // è¡¨å¤´
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '流程分类',
            align: 'center',
            dataIndex: 'category_dictText',
            width: 200
          },
          {
            title: '流程名称',
            align: 'center',
            dataIndex: 'flowName'
          },
          {
            title: '流程业务简要描述',
            align: 'center',
            dataIndex: 'description',
          },
          {
            title: '申请人',
            align: 'center',
            dataIndex: 'proposer_dictText'
          },
          {
            title: '前驱节点',
            align: 'center',
            dataIndex: 'preNode'
          },
          {
            title: '当前节点',
            align: 'center',
            dataIndex: 'taskName'
          },
          {
            title: '流程开始时间',
            align: 'center',
            dataIndex: 'startTime'
          },
          {
            title: '流程结束时间',
            align: 'center',
            dataIndex: 'endTime'
          },
          {
            title: '处理时长',
            align: 'center',
            dataIndex: 'duration'
          },
          {
            title: '当前任务人',
            align: 'center',
            dataIndex: 'todoUsers_dictText'
          },
          {
            title: '处理过的人',
            align: 'center',
            dataIndex: 'doneUsers_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 200,
            fixed: 'right'
          }
        ],
        url: {
          list: '/assign/flow/list'
        },
        dictOptions: {},
        selectShenpiData: {},
        selectDispatchFileXqData: {},
        selectInspectionOrderXqData: {}
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      handelDetail(item, index) {
        console.log('点击了详情')
        console.log('item----->', item)
        console.log('index----->', index)
        let approcesstype = this.splitAprocessType(item.category)
        console.log('approcesstype--->', approcesstype)
        switch (approcesstype) {
          case 'drApproval':
            item.description=item.description
            this.handDrDetial(item)
            break
          case 'ggApproval':
            item.description=item.description
            this.handDispatchFileDetial(item)
            break
          case 'sbdjApproval':
            item.description = item.description
            this.handInspectionOrderDetail(item)
            break
          default:
            alert('没找到该流程')
        }
      },
      splitAprocessType(title) {
        let parts = title.split('：') // æ³¨æ„å†’号是全角字符，使用对应的字进行分割
        let result = parts[0]
        return result
      },
      handDrDetial(item) {
        this.selectShenpiData = item
        this.selectShenpiData.assignee_dictText=item.todoUsers_dictText
        this.selectShenpiData.createTime=item.startTime
        this.selectShenpiData.procInstId=item.processInstanceId
        this.$refs.modalFormApproval.clearTableSource()
        this.$refs.modalFormApproval.getAllApproveData(item)
      },
      handDispatchFileDetial(item){
        this.selectDispatchFileXqData = item





        this.selectDispatchFileXqData.assignee_dictText=item.todoUsers_dictText
        this.selectDispatchFileXqData.createTime=item.startTime
        this.selectDispatchFileXqData.procInstId=item.processInstanceId
        this.$refs.modalFormDispatchFileXq.clearTableSource()
        this.$refs.modalFormDispatchFileXq.getAllApproveData(item)
      },
      handInspectionOrderDetail(item) {
        this.selectInspectionOrderXqData = item
        this.selectInspectionOrderXqData.assignee_dictText = item.todoUsers_dictText
        this.selectInspectionOrderXqData.createTime = item.startTime
        this.selectInspectionOrderXqData.procInstId = item.processInstanceId
        this.$refs.modalFormInspectionOrderXq.visible = true
        this.$refs.modalFormInspectionOrderXq.disableSubmit = true
        this.$refs.modalFormInspectionOrderXq.getAllApproveData(item)
        this.$refs.modalFormInspectionOrderXq.getBasicInformation(item)
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>

 src/views/flowable/workflow/FlowTodo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,583 @@
<!--
 Description: å·¥ä½œæµ-我的待办 List
 Author: ä½œè€… liuyh
 Date:   2025-02-27
-->
<template>
  <a-card :bordered='false'>
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class='table-page-search-wrapper'>
      <a-form
        layout='inline'
        @keyup.enter.native='searchQuery'
      >
        <a-row :gutter='24'>
          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <a-form-item label='流程分类'>
              <j-dict-select-tag
                v-model='queryParam.category'
                dictCode='flow_type'
                placeholder='请选择流程分类'
              ></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <!--<a-col :xl="4" :lg="6" :md="8" :sm="24">-->
          <!--<a-form-item label="流程名称">-->
          <!--<a-input placeholder="请输入流程名称" v-model="queryParam.flowName"></a-input>-->
          <!--</a-form-item>-->
          <!--</a-col>-->
          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <a-form-item label='当前节点'>
              <a-input
                v-model='queryParam.name'
                placeholder='请输入当前节点精确查询'
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <a-form-item label='简要描述'>
              <a-input
                v-model='queryParam.title'
                placeholder='请输入简要描述'
              ></a-input>
            </a-form-item>
          </a-col>
          <template v-if='toggleSearchStatus'>
            <a-col
              :lg='8'
              :md='12'
              :sm='24'
              :xl='8'
            >
              <a-form-item label='任务时间范围'>
                <j-date
                  v-model='queryParam.startTime'
                  :show-time='false'
                  class='query-group-cust'
                  date-format='YYYY-MM-DD HH:mm:ss'
                  placeholder='请选择开始时间'
                ></j-date>
                <span class='query-group-split-cust'></span>
                <j-date
                  v-model='queryParam.endTime'
                  :show-time='false'
                  class='query-group-cust'
                  date-format='YYYY-MM-DD HH:mm:ss'
                  placeholder='请选择结束时间'
                ></j-date>
              </a-form-item>
            </a-col>
          </template>

          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <span
              class='table-page-search-submitButtons'
              style='float: left;overflow: hidden;'
            >
              <a-button
                icon='search'
                type='primary'
                @click='searchQuery'
              >查询</a-button>
              <a-button
                icon='reload'
                style='margin-left: 8px'
                @click='searchReset'
              >重置</a-button>
              <a
                style='margin-left: 8px'
                @click='handleToggleSearch'
              >
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- æŸ¥è¯¢åŒºåŸŸ-END -->

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class='table-operator'>
      <a-dropdown v-if='selectedRowKeys.length > 0 '>
        <a-menu slot='overlay'>
          <a-menu-item
            key='1'
            @click='batchHandle'
          >
            <a-icon type='delete' />
            æ‰¹é‡å¤„理
          </a-menu-item>
        </a-menu>
        <a-button style='margin-left: 8px'> æ‰¹é‡æ“ä½œ
          <a-icon type='down' />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div
        class='ant-alert ant-alert-info'
        style='margin-bottom: 16px;'
      >
        <i class='anticon anticon-info-circle ant-alert-icon'></i>已选择&nbsp;<a style='font-weight: 600'>{{
          selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a
          style='margin-left: 24px'
          @click='onClearSelected'
        >清空</a>
      </div>

      <a-table
        ref='table'
        :columns='columns'
        :dataSource='dataSource'
        :loading='loading'
        :pagination='ipagination'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        :scroll='{x:getTableColumnsTotalWidth,y:465}'
        bordered
        rowKey='id'
        size='middle'
        @change='handleTableChange'
      >

        <span
          slot='action'
          slot-scope='text, record'
        >
          <a @click='handelDetail(record,text)'>执行/审批</a>
        </span>

      </a-table>
    </div>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { getAction } from '@api/manage'
export default {
  name: 'NcDeviceCharactersList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDictSelectTag,
  },
  data() {
    return {
      description: '工作流-我的待办',
      // è¡¨å¤´
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '流程分类',
          align: 'center',
          dataIndex: 'category_dictText',
          width: 100
        },
        {
          title: '流程名称',
          align: 'center',
          dataIndex: 'flowName',
          width: 200
        },
        {
          title: '流程业务简要描述',
          align: 'center',
          dataIndex: 'description',
          width: 350,
          ellipsis: true

        },
        {
          title: '上一步处理人',
          align: 'center',
          dataIndex: 'preNodeAssignee_dictText',
          width: 150
        },
        {
          title: '前驱节点',
          align: 'center',
          dataIndex: 'preNode',
          width: 200
        },
        {
          title: '当前节点',
          align: 'center',
          dataIndex: 'name',
          width: 200
        },
        {
          title: '当前节点开始时间',
          align: 'center',
          dataIndex: 'createTime',
          width: 200
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 150,
          fixed: 'right'
        }
      ],
      url: {
        list: '/assign/flow/toTaskBySelf',
        isSameNode: '/assign/flow/isSameNode'
      },
      dictOptions: {},
      selectShenpiData: {},
      selectDispatchFileXqData: {},
      selectInspectionOrderData: {},
      selectWeekMaintenanceData: {},
      selectSecondMaintenanceData: {},
      selectThirdMaintenanceData: {},
      selectBachData: {},
      selectRepairOrderData: {},
      selectOutBoundOrderData: {},
      selectLossBoundOrderData: {},
      selectStocktakingBoundOrderData: {},
      selectInboundOrderData: {},
      selectSparePartApplyData: {},
      selectGuideCardData:{},
      selectEquipmentAssignProductData:{},
      selectEquipmentSealUpData:{},
      //业务信息ID
      dataId: undefined
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    getTableColumnsTotalWidth() {
      return this.columns.reduce((total, item) => total + item.width, 0)
    }
  },
  methods: {
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      if (!params) {
        return false
      }
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          // console.log(res)
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          if (this.selectedRowKeys.length > 0) this.selectedRowKeys = this.selectionRows = []
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    handelDetail(item, index) {
      console.log('点击了详情')
      console.log('item----->', item)
      console.log('index----->', index)
      let processType = this.splitAprocessType(item.category)
      console.log('processType--->', processType)
      switch (processType) {
        case 'drApproval':
          this.handDrDetial(item)
          break
        case 'ggApproval':
          this.handDispatchFileDetial(item)
          break
        case 'ncFileSettingProcessApproval':
          this.handStandardizedDetial(item)
          break
        case 'sbdjApproval':
          this.handInspectionOrder(item)
          break
        case 'WEEK_MAINTENANCE':
          this.handleWeekMaintenance(item)
          break
        case 'eam_repair':
          this.handleRepairOrder(item)
          break
        case 'equipment_lean_out':
          this.handleEquipmentLeanOut(item)
          break
        case 'second_maintenance':
          this.handleSecondMaintenance(item)
          break
        case 'third_maintenance':
          this.handleThirdMaintenance(item)
          break
        case 'toolOutStorageApproval':
          this.handleToolOutStorageApproval(item)
          break
        case 'toolsStocktakingBound':
          this.handleToolStocktakingApproval(item)
          break
        case 'toolsLossApproval':
          this.handleToolLossApproval(item)
          break
        case 'equipment_seal_up':
          this.handleEquipmentSealUp(item)
          break
        case 'toolInStorageApproval':
          this.handleToolInStorage(item)
          break
        case 'equipment_transfer':
          this.handleEquipmentTransfer(item)
          break
        case 'equipment_scrap':
          this.handleEquipmentScrap(item)
          break
        case 'spare_part_apply':
          this.handleSparePartApplyApproval(item)
          break
        case 'programConfirmApproval':
          this.handleGuideCardApproval(item)
          break
        case 'equipmentAssignProductApproval':
          this.handleEquipmentAssignProductApproval(item)
          break
        default:
          alert('没找到该流程')
      }
    },

    batchHandle() {
      const categorySet = new Set(this.selectionRows.map(item => item.category))
      const nameSet = new Set(this.selectionRows.map(item => item.name))
      if (categorySet.size !== 1 || nameSet.size !== 1) {
        this.$notification.info({
          message: '消息',
          description: '请选择同一流程分类下的同一当前节点'
        })
        return
      }

      if (categorySet.has('eam_repair')) {
        this.$notification.info({
          message: '消息',
          description: '设备维修流程无法批量处理'
        })
        return
      }

      if (categorySet.has('sbdjApproval')) {
        this.$refs.inspectionOrderBatchHandleRef.visible = true
        this.$refs.inspectionOrderBatchHandleRef.title = this.selectionRows[0].name
        this.$refs.inspectionOrderBatchHandleRef.getAllApproveData(this.selectionRows[0])
        this.$refs.inspectionOrderBatchHandleRef.getBasicInformation(this.selectionRows[0])
      } else if (categorySet.has('WEEK_MAINTENANCE')) {
        this.$refs.weenMaintenanceBatchApprovalModalRef.handleDetail(this.selectionRows[0])
        this.$refs.weenMaintenanceBatchApprovalModalRef.title = this.selectionRows[0].name
      }
    },

    splitAprocessType(title) {
      let parts = title.split('：') // æ³¨æ„å†’号是全角字符，使用对应的字进行分割
      let result = parts[0]
      return result
    },
    //DNC-指派NC程序至设备
    handDrDetial(item) {
      this.selectShenpiData = item
      this.$refs.modalFormApproval.clearTableSource()
      this.$refs.modalFormApproval.getAllApproveData(item)
    },
    //DNC-NC程序签派
    handDispatchFileDetial(item) {
      console.log('item----->', item)
      this.selectDispatchFileXqData = item
      this.$refs.modalFormDispatchFileXq.clearTableSource()
      this.$refs.modalFormDispatchFileXq.getAllApproveData(item)
    },
    //DNC-定型审批页面
    handStandardizedDetial(item){
      this.selectDispatchFileXqData = item
      this.$refs.StandardizedProcessHandle.clearTableSource()
      this.$refs.StandardizedProcessHandle.getAllApproveData(item)
    },

    handInspectionOrder(record) {
      console.log('record----->', record)
      this.selectInspectionOrderData = Object.assign({}, record)
      this.$refs.modalFormInspectionOrder.visible = true
      this.$refs.modalFormInspectionOrder.title = record.name
      this.$refs.modalFormInspectionOrder.getAllApproveData(record)
      this.$refs.modalFormInspectionOrder.getBasicInformation(record)
    },

    handleWeekMaintenance(item) {
      if (item && item.dataId) {
        this.selectWeekMaintenanceData = Object.assign({}, item)
        this.$refs.weekMaintenanceApprovalModal.handleDetail(item)
        this.$refs.weekMaintenanceApprovalModal.title = item.name
        this.$refs.weekMaintenanceApprovalModal.disableSubmit = false
      }
    },

    /**
     * ç‚¹å‡»è®¾å¤‡ç»´ä¿®åˆ†ç±»æµç¨‹è¯¦æƒ…时触发
     * @param record
     */
    handleRepairOrder(record) {
      this.selectRepairOrderData = Object.assign({}, record)
      this.$refs.repairOrderApprovalModal.visible = true
      this.$refs.repairOrderApprovalModal.title = record.name
      this.$refs.repairOrderApprovalModal.getAllApproveData(record)
      this.$refs.repairOrderApprovalModal.getBasicInformation(record)
    },
    handleEquipmentLeanOut(item) {
      this.$refs.equipmentLeanOutApprovalModelRef.visible = true
      this.$refs.equipmentLeanOutApprovalModelRef.title = item.name
      this.$refs.equipmentLeanOutApprovalModelRef.handleDetail(item)
      this.$refs.equipmentLeanOutApprovalModelRef.disableSubmit = false
    },
    handleSecondMaintenance(item) {
      if (item && item.dataId) {
        this.selectSecondMaintenanceData = Object.assign({}, item)
        this.$refs.secondMaintenanceApprovalModal.handleDetail(item)
        this.$refs.secondMaintenanceApprovalModal.title = item.name
        this.$refs.secondMaintenanceApprovalModal.disableSubmit = false
      }
    },
    handleThirdMaintenance(item) {
      if (item && item.dataId) {
        this.selectThirdMaintenanceData = Object.assign({}, item)
        this.$refs.thirdMaintenanceApprovalModal.handleDetail(item)
        this.$refs.thirdMaintenanceApprovalModal.title = item.name
        this.$refs.thirdMaintenanceApprovalModal.disableSubmit = false
      }
    },
    handleToolOutStorageApproval(item) {
      if (item && item.dataId) {
        this.selectOutBoundOrderData = Object.assign({}, item)
        this.$refs.outBoundOrderHandle.auditVisible = true
        this.$refs.outBoundOrderHandle.clearTableSource()
        this.$refs.outBoundOrderHandle.getAllApproveData(item)
      }
    },
    handleToolStocktakingApproval(item) {
      if (item && item.dataId) {
        this.selectStocktakingBoundOrderData = Object.assign({}, item)
        this.$refs.stocktakingBoundHandle.auditVisible = true
        this.$refs.stocktakingBoundHandle.clearTableSource()
        this.$refs.stocktakingBoundHandle.getAllApproveData(item)
      }
    },
    handleToolLossApproval(item) {
      if (item && item.dataId) {
        this.selectLossBoundOrderData = Object.assign({}, item)
        this.$refs.lossBoundHandle.auditVisible = true
        this.$refs.lossBoundHandle.clearTableSource()
        this.$refs.lossBoundHandle.getAllApproveData(item)
      }
    },

    handleEquipmentSealUp(item) {
      this.$refs.equipmentSealUpApprovalModelRef.visible = true
      this.$refs.equipmentSealUpApprovalModelRef.title = item.name
      this.$refs.equipmentSealUpApprovalModelRef.handleDetail(item)
      this.$refs.equipmentSealUpApprovalModelRef.disableSubmit = false
    },
    handleToolInStorage(item) {
      if (item && item.dataId) {
        this.selectInboundOrderData = Object.assign({}, item)
        this.$refs.inboundOrderApprovalModal.auditVisible = true
        this.$refs.inboundOrderApprovalModal.clearTableSource()
        this.$refs.inboundOrderApprovalModal.getAllApproveData(item)
      }
    },
    handleEquipmentTransfer(item) {
      this.$refs.equipmentTransferApprovalModelRef.visible = true
      this.$refs.equipmentTransferApprovalModelRef.title = item.name
      this.$refs.equipmentTransferApprovalModelRef.handleDetail(item)
      this.$refs.equipmentTransferApprovalModelRef.disableSubmit = false
    },
    handleEquipmentScrap(item) {
      this.$refs.equipmentScrapApprovalModelRef.visible = true
      this.$refs.equipmentScrapApprovalModelRef.title = item.name
      this.$refs.equipmentScrapApprovalModelRef.handleDetail(item)
      this.$refs.equipmentScrapApprovalModelRef.disableSubmit = false
    },
    handleSparePartApplyApproval(item) {
      if (item && item.dataId) {
        this.selectSparePartApplyData = Object.assign({}, item)
        this.$refs.sparePartApplyModal.auditVisible = true
        this.$refs.sparePartApplyModal.clearTableSource()
        this.$refs.sparePartApplyModal.getAllApproveData(item)
      }
    },
    //DNC-程序确认表流程
    handleGuideCardApproval(item) {
      console.log('item----->', item)
      this.selectGuideCardData = item
      this.$refs.guideCardBatchHandle.clearTableSource()
      this.$refs.guideCardBatchHandle.getAllApproveData(item)
    },
    //DNC-设备结构树指派产品结构树
    handleEquipmentAssignProductApproval(item){
      console.log('item----->', item)
      this.selectEquipmentSealUpData = item
      this.$refs.assignEquipmentFileStreamHandle.clearTableSource()
      this.$refs.assignEquipmentFileStreamHandle.getAllApproveData(item)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>