优化流程

src/components/Dict/DictSelection.vue

@@ -41,27 +41,27 @@
         default: 'dictCode'
       }
     },
-    data () {
+    data() {
       return {};
     },
     computed: {
       ...mapGetters(['dict', 'getDict']),
-      dictList () {
+      dictList() {
         return this.dict[dictEnum[this.dictName]] || [];
       },
       selectVal: {
-        set (val) {
+        set(val) {
           this.$emit('updateVal', val);
           // change获取选中项所有数据
 
           this.$emit('itemChange', this.getDict(this.dictName, val));
         },
-        get () {
+        get() {
           return this.value;
         }
       }
     },
-    created () {
+    created() {
       if (this.dictName) {
         this.requestDict(this.dictName);
       }

src/components/VueBpmn/BpmnElement/BpmnNode.vue

@@ -30,14 +30,20 @@
             label="任务分类"
             prop="taskCategory"
           >
-            <el-select v-model="formData.category">
+            <!-- <el-select v-model="formData.category">
               <el-option
-                v-for="item in this.taskCategory"
+                v-for="item in taskCategory"
                 :label="item.name"
                 :value="item.id"
                 :key="item.id"
               ></el-option>
-            </el-select>
+            </el-select> -->
+            <DictSelection
+              dictName="任务类型"
+              clearable
+              v-model="formData.taskCategory"
+            >
+            </DictSelection>
           </el-form-item>
 
           <el-form-item
@@ -72,7 +78,8 @@
             <el-input v-model="formData.initiator" clearable />
           </el-form-item>
           <el-form-item v-if="!!showConfig.assignee" label="执行人">
-            <el-input v-model="formData.assignee" clearable />
+            <!-- <el-input v-model="formData.assignee" clearable /> -->
+            <userSelectVue v-model="formData.assignee" />
           </el-form-item>
           <el-form-item v-if="!!showConfig.candidateUsers" label="候选用户">
             <el-input v-model="formData.candidateUsers" clearable />
@@ -151,17 +158,13 @@
   import mixinPanel from '../mixins/mixinPanel';
   import MultiInstance from '../properties/multiInstance';
   import listener from '../properties/listener';
+  import userSelectVue from './uesrSelect.vue';
 
   export default {
     name: 'BpmnNode',
-    components: { listener, MultiInstance },
+    components: { listener, MultiInstance, userSelectVue },
     mixins: [mixinPanel],
-    props: {
-      taskCategory: {
-        type: Array,
-        required: true
-      }
-    },
+
     data() {
       return {
         activeName: '1',

src/components/VueBpmn/BpmnElement/BpmnProcess.vue

@@ -26,14 +26,20 @@
           </el-form-item>
 
           <el-form-item label="流程分类" prop="processCategory">
-            <el-select v-model="formData.processCategory">
+            <!-- <el-select v-model="formData.processCategory">
               <el-option
                 v-for="item in this.processCategory"
                 :label="item.name"
                 :value="item.id"
                 :key="item.id"
               ></el-option>
-            </el-select>
+            </el-select> -->
+            <DictSelection
+              dictName="流程分类"
+              clearable
+              v-model="formData.processCategory"
+            >
+            </DictSelection>
           </el-form-item>
         </el-collapse-item>
         <el-collapse-item name="2">
@@ -109,12 +115,7 @@
     name: 'BpmnProcess',
     components: { Properties, listener },
     mixins: [mixinPanel],
-    props: {
-      processCategory: {
-        type: Array,
-        required: true
-      }
-    },
+
     data() {
       return {
         activeName: '1',

src/components/VueBpmn/BpmnElement/index.vue

@@ -7,8 +7,6 @@
       v-if="element"
       :element="element"
       :modeler="modeler"
-      :processCategory="processCategory"
-      :taskCategory="taskCategory"
     />
   </div>
 </template>
@@ -23,14 +21,6 @@
     name: 'Element',
     components: { bpmnProcess, bpmnNode },
     props: {
-      processCategory: {
-        type: Array,
-        required: true
-      },
-      taskCategory: {
-        type: Array,
-        required: true
-      },
       modeler: {
         type: Object,
         required: true

src/components/VueBpmn/BpmnElement/uesrSelect.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <ele-table-select
+      v-model="selectVal"
+      :clearable="true"
+      placeholder="请选择"
+      value-key="id"
+      label-key="loginName"
+      :table-config="tableConfig"
+      :popper-width="580"
+    >
+      <!-- 角色列 -->
+      <template v-slot:roles="{ row }">
+        <el-tag
+          v-for="item in row.roleList"
+          :key="item.id"
+          size="mini"
+          type="primary"
+          :disable-transitions="true"
+        >
+          {{ item.name }}
+        </el-tag>
+      </template>
+    </ele-table-select>
+  </div>
+</template>
+
+<script>
+  import { pageUsers } from '@/api/system/user';
+
+  export default {
+    model: {
+      prop: 'value',
+      event: 'updateVal'
+    },
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    data() {
+      return {
+        // 表格配置
+        tableConfig: {
+          datasource: [],
+          columns: [
+            {
+              columnKey: 'index',
+              type: 'index',
+              width: 45,
+              align: 'center',
+              showOverflowTooltip: true,
+              fixed: 'left'
+            },
+            {
+              prop: 'loginName',
+              label: '用户账号',
+              sortable: 'custom',
+              showOverflowTooltip: true,
+              minWidth: 110
+            },
+
+            {
+              columnKey: 'roles',
+              label: '角色',
+              showOverflowTooltip: true,
+              minWidth: 110,
+              slot: 'roles'
+            }
+          ],
+          toolbar: false,
+          pageSize: 5,
+          pageSizes: [5, 10, 15, 20],
+          size: 'small'
+        }
+      };
+    },
+    created() {
+      this.getUserPage();
+    },
+    computed: {
+      selectVal: {
+        set(val) {
+          this.$emit('updateVal', val);
+        },
+        get() {
+          return this.value;
+        }
+      }
+    },
+    methods: {
+      async getUserPage() {
+        const res = await pageUsers({
+          current: 1,
+          size: 9999
+        });
+        console.log(res);
+        this.tableConfig.datasource = res.list;
+      }
+    }
+  };
+</script>
+
+<style></style>

src/components/VueBpmn/index.vue

@@ -44,13 +44,7 @@
           <div class="canvas" ref="canvas" />
         </el-container>
         <el-aside class="widget-config-container1">
-          <bpmn-element
-            ref="_bpmnElement"
-            v-if="modeler"
-            :modeler="modeler"
-            :processCategory="processCategory"
-            :taskCategory="taskCategory"
-          />
+          <bpmn-element ref="_bpmnElement" v-if="modeler" :modeler="modeler" />
         </el-aside>
       </el-container>
     </el-main>
@@ -91,7 +85,7 @@
   import translate from './translate/index';
   import Modeler from 'bpmn-js/lib/Modeler';
   import BpmnElement from './BpmnElement';
-  import { getDicts } from '@/utils/util.js';
+
   // 引入flowable的节点文件
   import flowableModdle from './descriptors/flowable.json';
   import VueAceEditor from 'vue2-ace-editor';
@@ -133,24 +127,6 @@
       };
     },
     mounted() {
-      const _this = this;
-      const res = getDicts();
-      console.log(res);
-      _this.processCategory =
-        res.data['processCategory']?.map((item) => {
-          return {
-            id: item.value,
-            name: item.content
-          };
-        }) ?? [];
-
-      _this.taskCategory =
-        res.data['taskCategory']?.map((item) => {
-          return {
-            id: item.value,
-            name: item.content
-          };
-        }) ?? [];
       this.modeler = new Modeler({
         container: this.$refs.canvas,
         additionalModules: [
@@ -163,40 +139,7 @@
         }
       });
       // 新增流程定义
-      console.log(this.modelData, 55555);
       this.createNewDiagram(this.modelData?.editor);
-      // return;
-      // getDicts('processCategory,taskCategory').then(({ data }) => {
-      //   _this.processCategory =
-      //     data['processCategory']?.map((item) => {
-      //       return {
-      //         id: item.value,
-      //         name: item.content
-      //       };
-      //     }) ?? [];
-
-      //   _this.taskCategory =
-      //     data['taskCategory']?.map((item) => {
-      //       return {
-      //         id: item.value,
-      //         name: item.content
-      //       };
-      //     }) ?? [];
-
-      //   // const canvas = this.$refs.canvas;
-      //   // 生成实例
-      // this.modeler = new Modeler({
-      //   container: this.$refs.canvas,
-      //   additionalModules: [
-      //     {
-      //       translate: ['value', translate]
-      //     }
-      //   ],
-      //   moddleExtensions: {
-      //     flowable: flowableModdle
-      //   }
-      // });
-      // });
     },
     methods: {
       // init ace editor

src/components/VueBpmn/mixins/showConfig.js

@@ -1,72 +1,70 @@
 export default {
-    'bpmn:StartEvent': {
-        form: true,
-        formKey: true,
-        candidate: true,
-        initiator: true
-    },
-    'bpmn:EndEvent': {
-    },
-    'bpmn:UserTask': {
-        taskCategory: true,
-        candidate: true,
-        assignee: true,
-        candidateUsers: true,
-        candidateGroups: true,
-        // async: true,
-        // priority: true,
-        // skipExpression: true,
-        // dueDate: true,
-        form: true,
-        formKey: true,
-        buttons: true,
-        multiInstance: true,
-        taskListener: true
-    },
-    'bpmn:ServiceTask': {
-        // async: true,
-        // skipExpression: true,
-        // isForCompensation: true,
-        // triggerable: true,
-        // class: true,
-    },
-    'bpmn:ScriptTask': {
-        // async: true,
-        // isForCompensation: true,
-        // autoStoreVariables: true,
-    },
-    'bpmn:ManualTask': {
-        // async: true,
-        // isForCompensation: true,
-    },
-    'bpmn:ReceiveTask': {
-        // async: true,
-        // isForCompensation: true,
-    },
-    'bpmn:SendTask': {
-        // async: true,
-        // isForCompensation: true
-    },
-    'bpmn:BusinessRuleTask': {
-        // async: true,
-        // isForCompensation: true,
-        // ruleVariablesInput: true,
-        // rules: true,
-        // resultVariable: true,
-        // exclude: true,
-    },
-    'bpmn:SubProcess': {
-        // async: true,
-        // isForCompensation: true,
-        // ruleVariablesInput: true,
-        // rules: true,
-        // resultVariable: true,
-        // exclude: true,
-        multiInstance: true,
-    },
-    'bpmn2:intermediateThrowEvent': {
-    },
-    'bpmn:SequenceFlow': {
-        conditionExpression: true
-    }
-}
+  'bpmn:StartEvent': {
+    form: true,
+    formKey: true,
+    candidate: true,
+    initiator: true
+  },
+  'bpmn:EndEvent': {},
+  'bpmn:UserTask': {
+    taskCategory: true,
+    candidate: true,
+    assignee: true,
+    candidateUsers: true,
+    candidateGroups: true,
+    // async: true,
+    // priority: true,
+    // skipExpression: true,
+    // dueDate: true,
+    form: true,
+    formKey: true,
+    buttons: true,
+    multiInstance: true,
+    taskListener: true
+  },
+  'bpmn:ServiceTask': {
+    // async: true,
+    // skipExpression: true,
+    // isForCompensation: true,
+    // triggerable: true,
+    // class: true,
+  },
+  'bpmn:ScriptTask': {
+    // async: true,
+    // isForCompensation: true,
+    // autoStoreVariables: true,
+  },
+  'bpmn:ManualTask': {
+    // async: true,
+    // isForCompensation: true,
+  },
+  'bpmn:ReceiveTask': {
+    // async: true,
+    // isForCompensation: true,
+  },
+  'bpmn:SendTask': {
+    // async: true,
+    // isForCompensation: true
+  },
+  'bpmn:BusinessRuleTask': {
+    // async: true,
+    // isForCompensation: true,
+    // ruleVariablesInput: true,
+    // rules: true,
+    // resultVariable: true,
+    // exclude: true,
+  },
+  'bpmn:SubProcess': {
+    // async: true,
+    // isForCompensation: true,
+    // ruleVariablesInput: true,
+    // rules: true,
+    // resultVariable: true,
+    // exclude: true,
+    multiInstance: true
+  },
+  'bpmn2:intermediateThrowEvent': {},
+  'bpmn:SequenceFlow': {
+    conditionExpression: true
+  }
+};

src/components/VueBpmn/properties/multiInstance.vue

@@ -1,151 +1,196 @@
 <template>
-    <el-drawer :title="title" :visible.sync="_multiInstanceDrawer" direction="rtl" @open="init">
-        <div style="padding: 10px;">
-            <el-form ref="multiInstanceForm" :model="multiInstance" label-width="80px">
-                <el-form-item label="多实例类型">
-                    <el-select v-model="multiInstance.isSequential" clearable>
-                        <el-option
-                                v-for="item in multiInstanceOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="循环基数" prop="loopCardinality">
-                    <el-input v-model="multiInstance.loopCardinality" clearable/>
-                </el-form-item>
-                <el-form-item label="集合">
-                    <el-input v-model="multiInstance.collection" clearable/>
-                </el-form-item>
-                <el-form-item label="元素变量">
-                    <el-input v-model="multiInstance.elementVariable" clearable/>
-                </el-form-item>
-                <el-form-item label="完成条件">
-                    <el-input v-model="multiInstance.completionCondition" clearable/>
-                </el-form-item>
-            </el-form>
-            <div style="text-align:right">
-                <el-button icon="el-icon-close" @click="_multiInstanceDrawer = false">取消</el-button>
-                <el-button icon="el-icon-check" type="primary" @click="save">确定</el-button>
-            </div>
-        </div>
-    </el-drawer>
+  <el-drawer
+    :title="title"
+    :visible.sync="_multiInstanceDrawer"
+    direction="rtl"
+    @open="init"
+  >
+    <div style="padding: 10px">
+      <el-form
+        ref="multiInstanceForm"
+        :model="multiInstance"
+        label-width="80px"
+      >
+        <el-form-item label="多实例类型">
+          <el-select v-model="multiInstance.isSequential" clearable>
+            <el-option
+              v-for="item in multiInstanceOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="循环基数" prop="loopCardinality">
+          <el-input v-model="multiInstance.loopCardinality" clearable />
+        </el-form-item>
+        <el-form-item label="集合">
+          <el-input v-model="multiInstance.collection" clearable />
+        </el-form-item>
+        <el-form-item label="元素变量">
+          <el-input v-model="multiInstance.elementVariable" clearable />
+        </el-form-item>
+        <el-form-item label="完成条件">
+          <el-input v-model="multiInstance.completionCondition" clearable />
+        </el-form-item>
+      </el-form>
+      <div style="text-align: right">
+        <el-button icon="el-icon-close" @click="_multiInstanceDrawer = false"
+          >取消</el-button
+        >
+        <el-button icon="el-icon-check" type="primary" @click="save"
+          >确定</el-button
+        >
+      </div>
+    </div>
+  </el-drawer>
 </template>
 
 <script>
-    import mixinPanel from '../mixins/mixinPanel'
+  import mixinPanel from '../mixins/mixinPanel';
 
-    export default {
-        props: {
-            multiInstanceDrawer: {
-                type: Boolean,
-                default: false
-            },
-            title: {
-                type: String,
-                default: ''
-            }
+  export default {
+    props: {
+      multiInstanceDrawer: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    mixins: [mixinPanel],
+    computed: {
+      _multiInstanceDrawer: {
+        get() {
+          return this.multiInstanceDrawer;
         },
-        mixins: [mixinPanel],
-        computed: {
-            _multiInstanceDrawer:{
-                get(){
-                    return this.multiInstanceDrawer
-                },
-                set(v){
-                    this.$emit("changeMultiInstanceDrawer",v)
-                }
-            }
-        },
-        data() {
-            return {
-                multiInstanceOptions: [
-                    {
-                        value: undefined,
-                        label: ''
-                    },
-                    {
-                        value: true,
-                        label: '串行'
-                    },
-                    {
-                        value: false,
-                        label: '并行'
-                    }
-                ],
-                multiInstance: {
-                    isSequential: '',
-                    loopCardinality: '',
-                    collection: '',
-                    elementVariable: '',
-                    completionCondition: '',
-                },
-            }
-        },
-        mounted() {
-            this.init()
-        },
-        methods: {
-            init() {
-                const loopCharacteristics = this.element.businessObject?.loopCharacteristics
-                const isSequential = loopCharacteristics === undefined ? undefined : (loopCharacteristics.isSequential ?? false)
-                const data = {}
-                data.isSequential = isSequential
-                data.collection = loopCharacteristics?.collection
-                data.elementVariable = loopCharacteristics?.elementVariable
-                data.loopCardinality = loopCharacteristics?.loopCardinality?.body
-                data.completionCondition = loopCharacteristics?.completionCondition?.body
+        set(v) {
+          this.$emit('changeMultiInstanceDrawer', v);
+        }
+      }
+    },
+    data() {
+      return {
+        multiInstanceOptions: [
+          {
+            value: undefined,
+            label: ''
+          },
+          {
+            value: true,
+            label: '串行'
+          },
+          {
+            value: false,
+            label: '并行'
+          }
+        ],
+        multiInstance: {
+          isSequential: '',
+          loopCardinality: '',
+          collection: '',
+          elementVariable: '',
+          completionCondition: ''
+        }
+      };
+    },
+    mounted() {
+      this.init();
+    },
+    methods: {
+      init() {
+        const loopCharacteristics =
+          this.element.businessObject?.loopCharacteristics;
+        const isSequential =
+          loopCharacteristics === undefined
+            ? undefined
+            : loopCharacteristics.isSequential ?? false;
+        const data = {};
+        data.isSequential = isSequential;
+        data.collection = loopCharacteristics?.collection;
+        data.elementVariable = loopCharacteristics?.elementVariable;
+        data.loopCardinality = loopCharacteristics?.loopCardinality?.body;
+        data.completionCondition =
+          loopCharacteristics?.completionCondition?.body;
 
-                this.multiInstance = data
-            },
-            save() {
-                let hasMultiInstance = false
-                if(this.multiInstance.isSequential === undefined || this.multiInstance.isSequential === ''){
-                    delete this.element.businessObject.loopCharacteristics
-                    this.multiInstance = {}
-                    this.updateProperties({loopCharacteristics: undefined})
-                }else{
-                    let loopCharacteristics = this.element.businessObject.loopCharacteristics
-                    if (!loopCharacteristics) {
-                        loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
-                    }
+        this.multiInstance = data;
+      },
+      save() {
+        let hasMultiInstance = false;
+        if (
+          this.multiInstance.isSequential === undefined ||
+          this.multiInstance.isSequential === ''
+        ) {
+          delete this.element.businessObject.loopCharacteristics;
+          this.multiInstance = {};
+          this.updateProperties({ loopCharacteristics: undefined });
+        } else {
+          let loopCharacteristics =
+            this.element.businessObject.loopCharacteristics;
+          if (!loopCharacteristics) {
+            loopCharacteristics = this.modeler
+              .get('moddle')
+              .create('bpmn:MultiInstanceLoopCharacteristics');
+          }
 
-                    loopCharacteristics.isSequential = this.multiInstance.isSequential
+          loopCharacteristics.isSequential = this.multiInstance.isSequential;
 
-                    if(this.multiInstance.collection){
-                        loopCharacteristics.set(this.descriptorPrefix + 'collection',this.multiInstance.collection)
-                    }else{
-                        loopCharacteristics.set(this.descriptorPrefix + 'collection',undefined)
-                    }
-                    if(this.multiInstance.elementVariable){
-                        loopCharacteristics.set(this.descriptorPrefix + 'elementVariable',this.multiInstance.elementVariable)
-                    }else{
-                        loopCharacteristics.set(this.descriptorPrefix + 'elementVariable',undefined)
-                    }
-                    if (this.multiInstance.loopCardinality) {
-                        const loopCardinality = this.modeler.get('moddle').create('bpmn:Expression', {body: this.multiInstance.loopCardinality})
-                        loopCharacteristics['loopCardinality'] = loopCardinality
-                    }else{
-                        loopCharacteristics['loopCardinality'] = undefined
-                    }
-                    if (this.multiInstance.completionCondition) {
-                        const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', {body: this.multiInstance.completionCondition})
-                        loopCharacteristics['completionCondition'] = completionCondition
-                    }else{
-                        loopCharacteristics['completionCondition'] = undefined
-                    }
-                    this.updateProperties({loopCharacteristics})
-                    hasMultiInstance = true
-                }
-                this._multiInstanceDrawer = false
-                this.$emit("saveMultiInstance", hasMultiInstance)
-            }
+          if (this.multiInstance.collection) {
+            loopCharacteristics.set(
+              this.descriptorPrefix + 'collection',
+              this.multiInstance.collection
+            );
+          } else {
+            loopCharacteristics.set(
+              this.descriptorPrefix + 'collection',
+              undefined
+            );
+          }
+          if (this.multiInstance.elementVariable) {
+            loopCharacteristics.set(
+              this.descriptorPrefix + 'elementVariable',
+              this.multiInstance.elementVariable
+            );
+          } else {
+            loopCharacteristics.set(
+              this.descriptorPrefix + 'elementVariable',
+              undefined
+            );
+          }
+          if (this.multiInstance.loopCardinality) {
+            const loopCardinality = this.modeler
+              .get('moddle')
+              .create('bpmn:Expression', {
+                body: this.multiInstance.loopCardinality
+              });
+            loopCharacteristics['loopCardinality'] = loopCardinality;
+          } else {
+            loopCharacteristics['loopCardinality'] = undefined;
+          }
+          if (this.multiInstance.completionCondition) {
+            const completionCondition = this.modeler
+              .get('moddle')
+              .create('bpmn:Expression', {
+                body: this.multiInstance.completionCondition
+              });
+            loopCharacteristics['completionCondition'] = completionCondition;
+          } else {
+            loopCharacteristics['completionCondition'] = undefined;
+          }
+          this.updateProperties({ loopCharacteristics });
+          hasMultiInstance = true;
         }
+        this._multiInstanceDrawer = false;
+        this.$emit('saveMultiInstance', hasMultiInstance);
+      }
     }
+  };
 </script>
 
 <style>
-    /*.muti-instance .el-form-item {
+  /*.muti-instance .el-form-item {
         margin-bottom: 22px;
     }*/
 </style>

src/components/VueBpmn/properties/properties.vue

@@ -1,140 +1,180 @@
 <template>
-    <el-drawer :title="title" :visible.sync="_propertiesDrawer" direction="rtl" @open="init">
-        <div style="padding: 10px;">
-            <el-table ref="propertiesRef" :data="properties" border fit highlight-current-row @row-click="editProperty">
-                <el-table-column prop="name" label="名称" align="center"/>
-                <el-table-column prop="value" label="值" align="center"/>
-                <el-table-column label="操作" align="center">
-                    <template slot-scope="{row}">
-                        <el-button icon="el-icon-delete" @click.native.stop="deleteProperty(row)"></el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <div v-if="showForm">
-                <el-divider></el-divider>
-                <el-form :model="property" label-width="80px">
-                    <el-form-item label="名称">
-                        <el-input v-model="property.name"/>
-                    </el-form-item>
-                    <el-form-item label="值" prop="value">
-                        <el-input v-model="property.value"/>
-                    </el-form-item>
-                </el-form>
-            </div>
-        </div>
-        <div style="text-align:right;padding: 10px;">
-            <el-button icon="el-icon-plus" type="primary" @click="addProperty">添加</el-button>
-            <el-button icon="el-icon-close" @click="_propertiesDrawer = false">取消</el-button>
-            <el-button icon="el-icon-check" type="primary" @click="save">确定</el-button>
-        </div>
-    </el-drawer>
+  <el-drawer
+    :title="title"
+    :visible.sync="_propertiesDrawer"
+    direction="rtl"
+    @open="init"
+  >
+    <div style="padding: 10px">
+      <el-table
+        ref="propertiesRef"
+        :data="properties"
+        border
+        fit
+        highlight-current-row
+        @row-click="editProperty"
+      >
+        <el-table-column prop="name" label="名称" align="center" />
+        <el-table-column prop="value" label="值" align="center" />
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{ row }">
+            <el-button
+              icon="el-icon-delete"
+              @click.native.stop="deleteProperty(row)"
+            ></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="showForm">
+        <el-divider></el-divider>
+        <el-form :model="property" label-width="80px">
+          <el-form-item label="名称">
+            <el-input v-model="property.name" />
+          </el-form-item>
+          <el-form-item label="值" prop="value">
+            <el-input v-model="property.value" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div style="text-align: right; padding: 10px">
+      <el-button icon="el-icon-plus" type="primary" @click="addProperty"
+        >添加</el-button
+      >
+      <el-button icon="el-icon-close" @click="_propertiesDrawer = false"
+        >取消</el-button
+      >
+      <el-button icon="el-icon-check" type="primary" @click="save"
+        >确定</el-button
+      >
+    </div>
+  </el-drawer>
 </template>
 
 <script>
-    import mixinPanel from '../mixins/mixinPanel'
-    import {randomString} from '@/utils/util'
+  import mixinPanel from '../mixins/mixinPanel';
+  import { randomString } from '@/utils/util';
 
-    export default {
-        props: {
-            propertiesDrawer: {
-                type: Boolean,
-                default: false
-            },
-            title: {
-                type: String,
-                default: ''
-            }
+  export default {
+    props: {
+      propertiesDrawer: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    mixins: [mixinPanel],
+    computed: {
+      _propertiesDrawer: {
+        get() {
+          return this.propertiesDrawer;
         },
-        mixins: [mixinPanel],
-        computed: {
-            _propertiesDrawer: {
-                get() {
-                    return this.propertiesDrawer
-                },
-                set(v) {
-                    // this.init()
-                    this.$emit("changePropertiesDrawer", v)
-                }
-            }
-        },
-        data() {
-            return {
-                properties: [],
-                property: {
-                    id: '',
-                    name: '',
-                    value: ''
-                },
-                showForm: false
-            }
-        },
-        mounted() {
-            this.init()
+        set(v) {
+          // this.init()
+          this.$emit('changePropertiesDrawer', v);
+        }
+      }
+    },
+    data() {
+      return {
+        properties: [],
+        property: {
+          id: '',
+          name: '',
+          value: ''
         },
-        methods: {
-            init(){
-                this.showForm = false
-                this.property = {
-                    id: '',
-                    name: '',
-                    value: ''
-                }
-                this.properties = this.element.businessObject.extensionElements?.values
-                    .filter(item => item.$type === (this.descriptorPrefix + 'Properties'))
-                    .shift()?.values?.map(property => {
-                        return {
-                            name: property.name,
-                            value: property.value
-                        }
-                    }) ?? []
-            },
-            addProperty() {
-                this.showForm = true
-                let val = {
-                    id: randomString(),
-                    name: '',
-                    value: ''
-                }
-                this.properties.push(val)
-                this.property = val
-                this.$refs['propertiesRef'].setCurrentRow(val, true)
-            },
-            deleteProperty(row) {
-                let index = this.properties.indexOf(row)
-                this.properties.splice(index, 1)
-                this.showForm = false
-            },
-            editProperty(row) {
-                this.showForm = true
-                this.property = row
-            },
-            save() {
-                let extensionElements = this.element.businessObject.get('extensionElements')
-                if (!extensionElements) {
-                    extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
-                }
-                extensionElements.values = extensionElements.values?.filter(item => item.$type !== (this.descriptorPrefix + 'Properties')) ?? []
-                if(this.properties?.length > 0){
-                    const propertiesElement = this.modeler.get('moddle').create(this.descriptorPrefix + 'Properties')
-                    this.properties.forEach(item => {
-                        const propertyElement = this.modeler.get('moddle').create(this.descriptorPrefix + 'Property')
-                        propertyElement['name'] = item.name
-                        propertyElement['value'] = item.value
-                        propertiesElement.get('values').push(propertyElement)
-                    })
-                    extensionElements.get("values").push(propertiesElement)
-                }
-
-                this.updateProperties({extensionElements: extensionElements.get('values')?.length == 0 ? undefined : extensionElements})
-                this._propertiesDrawer = false
-                this.$emit("saveProperties", this.properties?.length)
-            }
+        showForm: false
+      };
+    },
+    mounted() {
+      this.init();
+    },
+    methods: {
+      init() {
+        this.showForm = false;
+        this.property = {
+          id: '',
+          name: '',
+          value: ''
+        };
+        this.properties =
+          this.element.businessObject.extensionElements?.values
+            .filter(
+              (item) => item.$type === this.descriptorPrefix + 'Properties'
+            )
+            .shift()
+            ?.values?.map((property) => {
+              return {
+                name: property.name,
+                value: property.value
+              };
+            }) ?? [];
+      },
+      addProperty() {
+        this.showForm = true;
+        let val = {
+          id: randomString(),
+          name: '',
+          value: ''
+        };
+        this.properties.push(val);
+        this.property = val;
+        this.$refs['propertiesRef'].setCurrentRow(val, true);
+      },
+      deleteProperty(row) {
+        let index = this.properties.indexOf(row);
+        this.properties.splice(index, 1);
+        this.showForm = false;
+      },
+      editProperty(row) {
+        this.showForm = true;
+        this.property = row;
+      },
+      save() {
+        let extensionElements =
+          this.element.businessObject.get('extensionElements');
+        if (!extensionElements) {
+          extensionElements = this.modeler
+            .get('moddle')
+            .create('bpmn:ExtensionElements');
         }
+        extensionElements.values =
+          extensionElements.values?.filter(
+            (item) => item.$type !== this.descriptorPrefix + 'Properties'
+          ) ?? [];
+        if (this.properties?.length > 0) {
+          const propertiesElement = this.modeler
+            .get('moddle')
+            .create(this.descriptorPrefix + 'Properties');
+          this.properties.forEach((item) => {
+            const propertyElement = this.modeler
+              .get('moddle')
+              .create(this.descriptorPrefix + 'Property');
+            propertyElement['name'] = item.name;
+            propertyElement['value'] = item.value;
+            propertiesElement.get('values').push(propertyElement);
+          });
+          extensionElements.get('values').push(propertiesElement);
+        }
+
+        this.updateProperties({
+          extensionElements:
+            extensionElements.get('values')?.length == 0
+              ? undefined
+              : extensionElements
+        });
+        this._propertiesDrawer = false;
+        this.$emit('saveProperties', this.properties?.length);
+      }
     }
+  };
 </script>
 
 <style>
-    .el-badge__content.is-fixed {
-        top: 12px;
-    }
+  .el-badge__content.is-fixed {
+    top: 12px;
+  }
 </style>

src/enum/dict.js

@@ -1,4 +1,6 @@
 export default {
   类型用途: 'type_use',
-  分隔符: 'separate'
+  分隔符: 'separate',
+  任务类型: 'taskCategory',
+  流程分类: 'processCategory'
 };

src/mixins/dictMixins.js

@@ -2,7 +2,7 @@ import { mapGetters, mapActions } from 'vuex';
 import dictEnum from '@/enum/dict';
 
 export default {
-  data () {
+  data() {
     return {
       dictEnum
     };

src/store/modules/dict.js

@@ -39,7 +39,7 @@ const mutations = {
 
 const actions = {
   // 根据字典enumName请求字典 已获取的不做重复请求
-  async requestDict ({ commit, state }, enumName) {
+  async requestDict({ commit, state }, enumName) {
     const code = dictEnum[enumName];
 
     if (state[code]?.length) return state[code];
@@ -82,7 +82,7 @@ const actions = {
     return [];
   },
   // 更新字典
-  async reloadRequestDict ({ commit }, enumName) {
+  async reloadRequestDict({ commit }, enumName) {
     const code = dictEnum[enumName];
     const res = await getByCode(code);
     if (res?.code == 0) {

src/utils/shuju.js

@@ -1,106 +0,0 @@
-export const res = {
-  code: 200,
-  msg: '操作成功',
-  data: {
-    processCategory: [
-      {
-        createBy: null,
-        createDate: null,
-        createTime: null,
-        updateBy: null,
-        updateDate: null,
-        updateTime: null,
-        codeInfoId: '',
-        codeTypeId: 'processCategory',
-        value: '',
-        content: '',
-        parentValue: null,
-        sortNo: -999,
-        remark: null,
-        isOk: null
-      },
-      {
-        createBy: 'admin',
-        createDate: '2020-09-23',
-        createTime: '2020-09-23 00:00:38',
-        updateBy: 'admin',
-        updateDate: '2020-09-23',
-        updateTime: '2020-09-23 00:03:58',
-        codeInfoId: 'processCategory-demo',
-        codeTypeId: 'processCategory',
-        value: 'demo',
-        content: '示例流程',
-        parentValue: '',
-        sortNo: 1,
-        remark: '',
-        isOk: '1'
-      },
-      {
-        createBy: 'admin',
-        createDate: '2020-09-23',
-        createTime: '2020-09-23 00:01:43',
-        updateBy: 'admin',
-        updateDate: '2020-09-23',
-        updateTime: '2020-09-23 00:01:59',
-        codeInfoId: 'processCategory-hr',
-        codeTypeId: 'processCategory',
-        value: 'hr',
-        content: 'HR流程',
-        parentValue: '',
-        sortNo: 2,
-        remark: '',
-        isOk: '1'
-      }
-    ],
-    taskCategory: [
-      {
-        createBy: null,
-        createDate: null,
-        createTime: null,
-        updateBy: null,
-        updateDate: null,
-        updateTime: null,
-        codeInfoId: '',
-        codeTypeId: 'taskCategory',
-        value: '',
-        content: '',
-        parentValue: null,
-        sortNo: -999,
-        remark: null,
-        isOk: null
-      },
-      {
-        createBy: 'admin',
-        createDate: '2020-09-22',
-        createTime: '2020-09-22 17:34:02',
-        updateBy: null,
-        updateDate: null,
-        updateTime: null,
-        codeInfoId: 'taskCategory-todo',
-        codeTypeId: 'taskCategory',
-        value: 'todo',
-        content: '待办',
-        parentValue: '',
-        sortNo: 1,
-        remark: '',
-        isOk: '1'
-      },
-      {
-        createBy: 'admin',
-        createDate: '2020-09-22',
-        createTime: '2020-09-22 17:34:21',
-        updateBy: null,
-        updateDate: null,
-        updateTime: null,
-        codeInfoId: 'taskCategory-toRead',
-        codeTypeId: 'taskCategory',
-        value: 'toRead',
-        content: '待阅',
-        parentValue: '',
-        sortNo: 2,
-        remark: '',
-        isOk: '1'
-      }
-    ]
-  }
-};

src/utils/util.js

@@ -1,27 +1,6 @@
 import { getAction } from '@/api/flowable/manage';
-import { res } from './shuju';
-import store from '@/store';
 
-export function getDicts(codeTypeIds) {
-  // let dicts = store.getters.dicts;
-  // let result = {};
-  // if (dicts && dicts !== {}) {
-  //   let codeTypeIdArr = codeTypeIds.split(',');
-  //   let every = codeTypeIdArr.every((codeTypeId) => {
-  //     if (dicts[codeTypeId] && dicts[codeTypeId].length > 0) {
-  //       result[codeTypeId] = dicts[codeTypeId];
-  //       return true;
-  //     }
-  //     return false;
-  //   });
-  //   if (every) {
-  //     return new Promise(function (resolve) {
-  //       resolve({ data: result });
-  //     });
-  //   }
-  // }
-  return res;
-}
+import store from '@/store';
 
 export function formatDictText(dicts, values) {
   if (!(Array.isArray(dicts) && dicts.length > 0)) {

src/views/flowable/components/ProcessImage.vue

@@ -1,61 +1,86 @@
 <template>
-    <el-dialog title="流程图" :visible.sync="dialogProcessImageVisibleInChild" fullscreen>
-        <img :src="imagePath" alt="流程图">
-    </el-dialog>
+  <el-dialog
+    title="流程图"
+    :visible.sync="dialogProcessImageVisibleInChild"
+    fullscreen
+  >
+    <img :src="imagePath" alt="流程图" />
+  </el-dialog>
 </template>
 
 <script>
-    // import {getToken} from '@/utils/auth'
+  import { getToken } from '@/utils/token-util';
 
-    export default {
-        name: 'ProcessImage',
-        props: {
-            visible: {
-                type: Boolean,
-                default: function () {
-                    return false
-                }
-            },
-            processDefinitionId: {
-                type: String,
-                default: function () {
-                    return ''
-                }
-            },
-            processInstanceId: {
-                type: String,
-                default: function () {
-                    return ''
-                }
-            }
-        },
-        computed: {
-            dialogProcessImageVisibleInChild: {
-                get() {
-                    return this.visible
-                },
-                set(val) {
-                    this.$emit('update:visible', val)
-                }
-            },
-        },
-        data() {
-            return {
-                imagePath: ''
-            }
-        },
-        created() {
-            this.init()
+  export default {
+    name: 'ProcessImage',
+    props: {
+      visible: {
+        type: Boolean,
+        default: function () {
+          return false;
+        }
+      },
+      processDefinitionId: {
+        type: String,
+        default: function () {
+          return '';
+        }
+      },
+      processInstanceId: {
+        type: String,
+        default: function () {
+          return '';
+        }
+      }
+    },
+    computed: {
+      dialogProcessImageVisibleInChild: {
+        get() {
+          return this.visible;
         },
-        methods: {
-            init() {
-                if (this.processInstanceId && this.processInstanceId != null && this.processInstanceId !== '') {
-                  //  this.imagePath = `${process.env.VUE_APP_BASE_API}` + '/flowable/processInstanceImage?processInstanceId=' + this.processInstanceId + '&access_token=' + getToken() + '&time=' + new Date()
-                } else if (this.processDefinitionId && this.processDefinitionId != null && this.processDefinitionId !== '') {
-                  //  this.imagePath = `${process.env.VUE_APP_BASE_API}` + '/flowable/processDefinition/image?processDefinitionId=' + this.processDefinitionId + '&access_token=' + getToken() + '&time=' + new Date()
-                }
-            }
+        set(val) {
+          this.$emit('update:visible', val);
         }
+      }
+    },
+    data() {
+      return {
+        imagePath: ''
+      };
+    },
+    created() {
+      this.init();
+    },
+    methods: {
+      init() {
+        if (
+          this.processInstanceId &&
+          this.processInstanceId != null &&
+          this.processInstanceId !== ''
+        ) {
+          this.imagePath =
+            `${process.env.VUE_APP_API_BASE_URL}` +
+            '/flowable/processInstanceImage?processInstanceId=' +
+            this.processInstanceId +
+            '&access_token=' +
+            getToken() +
+            '&time=' +
+            new Date();
+        } else if (
+          this.processDefinitionId &&
+          this.processDefinitionId != null &&
+          this.processDefinitionId !== ''
+        ) {
+          this.imagePath =
+            `${process.env.VUE_APP_API_BASE_URL}` +
+            '/flowable/processDefinition/image?processDefinitionId=' +
+            this.processDefinitionId +
+            '&access_token=' +
+            getToken() +
+            '&time=' +
+            new Date();
+        }
+      }
     }
+  };
 </script>
-

src/views/flowable/model/edit.vue

@@ -53,11 +53,10 @@
         );
       },
       btnSave(modelData) {
-        putAction('/flowable/model/saveModelEditor', modelData).then(
-          ({ msg, data }) => {
-            Message.success(msg);
-          }
-        );
+        putAction('/flowable/model/saveModelEditor', modelData).then((res) => {
+          Message.success('保存' + res.data.message);
+          this.$router.push('/flowable/model');
+        });
       }
     }
   };

src/views/flowable/model/index.vue

@@ -3,35 +3,99 @@
     <div class="filter-container">
       <el-checkbox v-model="listQuery.latestVersion">最新版本</el-checkbox>
     </div>
+
     <div class="filter-container">
-      <el-input
-        v-model="listQuery.modelKey"
-        placeholder="模型key"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.modelName"
-        placeholder="模型名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-select
-        v-model="listQuery.modelCategory"
-        placeholder="模型类别"
-        class="filter-item"
+      <el-form
+        label-width="77px"
+        class="ele-form-search"
+        @keyup.enter.native="search"
+        @submit.native.prevent
       >
-        <el-option
-          v-for="(item, index) in dicts.processCategory"
-          :key="index"
-          :label="item.content"
-          :value="item.value"
-        ></el-option>
-      </el-select>
+        <el-row :gutter="15">
+          <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+            <el-form-item label="模型key:">
+              <el-input
+                clearable
+                v-model="listQuery.modelKey"
+                placeholder="请输入"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+            <el-form-item label="模型名称:">
+              <el-input
+                clearable
+                v-model="listQuery.modelName"
+                placeholder="请输入"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+            <el-form-item label="流程分类:">
+              <DictSelection
+                dictName="流程分类"
+                clearable
+                v-model="listQuery.modelCategory"
+              >
+              </DictSelection>
+            </el-form-item>
+          </el-col>
+          <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="用户名:">
+          <el-input clearable v-model="where.nickname" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="性别:">
+          <el-select
+            clearable
+            v-model="where.sex"
+            placeholder="请选择"
+            class="ele-fluid"
+          >
+            <el-option label="男" :value="1" />
+            <el-option label="女" :value="2" />
+          </el-select>
+        </el-form-item>
+      </el-col> -->
+          <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 6 }">
+            <div class="ele-form-actions">
+              <el-button @click="btnReset">重置</el-button>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                class="ele-btn-icon"
+                @click="btnQuery"
+              >
+                查询
+              </el-button>
+
+              <el-button
+                icon="el-icon-plus"
+                type="primary"
+                @click="btnCreate"
+                class="filter-item"
+                >新增
+              </el-button>
+              <el-button
+                icon="el-icon-plus"
+                type="primary"
+                @click="btnImport"
+                class="filter-item"
+                >导入
+              </el-button>
+              <el-button
+                icon="el-icon-delete"
+                @click="btnDelete()"
+                class="filter-item"
+                >批量删除
+              </el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
 
-      <el-dropdown
+      <!-- <el-dropdown
         split-button
         type="primary"
         @click="btnQuery"
@@ -43,26 +107,7 @@
             >重置</el-dropdown-item
           >
         </el-dropdown-menu>
-      </el-dropdown>
-      <el-button-group>
-        <el-button
-          icon="el-icon-plus"
-          type="primary"
-          @click="btnCreate"
-          class="filter-item"
-          >新增
-        </el-button>
-        <el-button
-          icon="el-icon-plus"
-          type="primary"
-          @click="btnImport"
-          class="filter-item"
-          >导入
-        </el-button>
-        <!--<el-button v-permission="'flowable:model:delete'" icon="el-icon-delete" @click="btnDelete()"
-                           class="filter-item">批量删除
-                </el-button>-->
-      </el-button-group>
+      </el-dropdown> -->
     </div>
     <el-table
       :data="records"
@@ -86,9 +131,9 @@
         >
       </el-table-column>
       <el-table-column label="模型类别" prop="category" align="center">
-        <!-- <template slot-scope="scope">
-                    <span v-html="formatDictText(dicts.processCategory,scope.row.category)"></span>
-                </template> -->
+        <template slot-scope="scope">
+          <span v-html="getDictValue('流程分类', scope.row.category)"></span>
+        </template>
       </el-table-column>
       <el-table-column label="版本" prop="version" align="center">
         <template slot-scope="scope"
@@ -170,20 +215,22 @@
         label-width="110px"
       >
         <el-form-item label="模型key" prop="key">
-          <el-input v-model="temp.key" />
+          <el-input v-model="temp.key" placeholder="不能为纯数字" />
         </el-form-item>
         <el-form-item label="模型名称" prop="name">
           <el-input v-model="temp.name" />
         </el-form-item>
         <el-form-item label="模型类别" prop="category">
-          <el-select v-model="temp.category" placeholder="模型类别">
+          <!-- <el-select v-model="temp.category" placeholder="模型类别">
             <el-option
               v-for="item in dicts.processCategory"
               :key="item.value"
               :label="item.content"
               :value="item.value"
             ></el-option>
-          </el-select>
+          </el-select> -->
+          <DictSelection dictName="流程分类" clearable v-model="temp.category">
+          </DictSelection>
         </el-form-item>
         <el-form-item label="模型描述" prop="description">
           <el-input v-model="temp.description" />
@@ -237,10 +284,12 @@
     putAction
   } from '@/api/flowable/manage';
   import { Message } from 'element-ui';
+  import dictMixins from '@/mixins/dictMixins';
 
   export default {
     name: 'FlowableModel',
     components: { Pagination },
+    mixins: [dictMixins],
     data() {
       return {
         dicts: [],
@@ -267,7 +316,12 @@
         rules: {
           id: [{ required: true, message: '该项不能为空', trigger: 'change' }],
           key: [{ required: true, message: '该项不能为空', trigger: 'change' }],
-          name: [{ required: true, message: '该项不能为空', trigger: 'change' }]
+          name: [
+            { required: true, message: '该项不能为空', trigger: 'change' }
+          ],
+          category: [
+            { required: true, message: '该项不能为空', trigger: 'change' }
+          ]
         },
         dialogImportVisible: false
       };
@@ -278,8 +332,15 @@
       // })
     },
     created() {
+      this.requestDict('流程分类');
       this.list();
     },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
     methods: {
       list() {
         getAction('/flowable/model/list', this.listQuery).then((res) => {
@@ -361,12 +422,28 @@
           this.list();
         });
       },
+      //验证字符串是否是数字
+      checkNumber(theObj) {
+        var reg = /^[0-9]+.?[0-9]*$/;
+        if (reg.test(theObj)) {
+          return true;
+        }
+        return false;
+      },
       createData() {
+        if (this.checkNumber(this.temp.key)) {
+          this.$message({
+            message: 'KEY不能为纯数字',
+            type: 'warning'
+          });
+          return;
+        }
+
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
-            postAction('/flowable/model/save', this.temp).then(({ msg }) => {
+            postAction('/flowable/model/save', this.temp).then(({ data }) => {
               this.dialogFormVisible = false;
-              Message.success(msg);
+              Message.success(data);
               this.list();
             });
           }
@@ -381,9 +458,8 @@
         });
       },
       btnCopy(row) {
-        putAction('/flowable/model/copy', { id: row.id }).then(({ msg }) => {
-          console.log('msg', msg);
-          Message.success(msg);
+        putAction('/flowable/model/copy', { id: row.id }).then((res) => {
+          Message.success(res.data.message);
           this.list();
         });
       },
@@ -396,9 +472,9 @@
       updateData() {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
-            putAction('/flowable/model/update', this.temp).then(({ msg }) => {
+            putAction('/flowable/model/update', this.temp).then((res) => {
               this.dialogFormVisible = false;
-              this.$message.success(msg);
+              this.$message.success(res.data.message);
               this.list();
             });
           }
@@ -420,14 +496,14 @@
         }).then((res) => {
           console.log('res', res);
 
-          Message.success(res.data.message);
+          Message.success('删除' + res.data.message);
           this.list();
         });
       },
       btnDeploy(id) {
         postAction('/flowable/model/deploy', { id })
-          .then(({ msg }) => {
-            Message.success(msg);
+          .then((res) => {
+            Message.success('部署' + res.data.message);
             this.list();
           })
           .catch((err) => {

src/views/flowable/processDefinition.vue

@@ -274,7 +274,7 @@
   export default {
     name: 'FlowableProcessDefinition',
     components: { ProcessImage, ProcessDefinitionIdentityLink, Pagination },
-    data () {
+    data() {
       return {
         dicts: [],
         records: null,
@@ -314,11 +314,11 @@
         selectedProcessDefinitionName: ''
       };
     },
-    created () {
+    created() {
       this.list();
     },
     methods: {
-      list () {
+      list() {
         getAction('/flowable/processDefinition/list', this.listQuery).then(
           (res) => {
             // const {data} = res
@@ -326,24 +326,18 @@
             // this.total = data.total
             if (res.data.code == 0) {
               console.log('res.data.data', res.data.data);
-              const { data } = res;
-              this.records = res.data.data.list;
-              this.total = res.data.data.count;
-              console.log(
-                'this.records',
-                this.records,
-                'this.total',
-                this.total
-              );
+              const { data } = res.data;
+              this.records = data.records;
+              this.total = data.total;
             }
           }
         );
       },
-      btnQuery () {
+      btnQuery() {
         this.listQuery.current = 1;
         this.list();
       },
-      btnReset () {
+      btnReset() {
         this.listQuery = {
           current: 1,
           size: 10,
@@ -356,17 +350,17 @@
         };
         this.list();
       },
-      btnView (row) {
+      btnView(row) {
         this.temp = Object.assign({}, row);
         this.dialogFormVisible = true;
       },
-      btnViewProcessInstanceList (row) {
+      btnViewProcessInstanceList(row) {
         this.$router.push({
           path: '/flowable/processInstance',
           query: { processDefinitionId: row.id }
         });
       },
-      btnDelete (id, cascade) {
+      btnDelete(id, cascade) {
         let ids = id
           ? [id]
           : this.selectedRecords.map((record) => {
@@ -388,7 +382,7 @@
           this.list();
         });
       },
-      btnSuspendOrActivate (processDefinitionId, suspend) {
+      btnSuspendOrActivate(processDefinitionId, suspend) {
         let suspendOrActivate = suspend ? 'activate' : 'suspend';
         putAction('/flowable/processDefinition/' + suspendOrActivate, {
           processDefinitionId
@@ -397,10 +391,10 @@
           this.list();
         });
       },
-      btnImport () {
+      btnImport() {
         this.dialogImportVisible = true;
       },
-      beforeUpload (file) {
+      beforeUpload(file) {
         // 上传前格式与大小校验
         const fileName = file.name;
         const isFileTypeOk =
@@ -417,7 +411,7 @@
         }
         return isFileTypeOk && isLt512;
       },
-      doImport (fileObj) {
+      doImport(fileObj) {
         let formData = new FormData();
         formData.set('file', fileObj.file);
         // formData.set("tenantId", this.importTenantId);
@@ -429,7 +423,7 @@
           }
         );
       },
-      btnExport (row) {
+      btnExport(row) {
         downloadAction(
           '/flowable/processDefinition/xml',
           'get',
@@ -437,17 +431,25 @@
           row.name + '-v' + row.version + '.bpmn20.xml'
         );
       },
-      btnImage (processDefinitionId) {
-        // this.imagePath = `${process.env.VUE_APP_BASE_API}` + '/flowable/processDefinition/image?processDefinitionId=' + processDefinitionId + '&access_token=' + getToken() + '&time=' + new Date()
+      btnImage(processDefinitionId) {
+        // this.imagePath =
+        //   `${process.env.VUE_APP_API_BASE_URL}` +
+        //   '/flowable/processDefinition/image?processDefinitionId=' +
+        //   processDefinitionId +
+        //   '&access_token=' +
+        //   getToken() +
+        //   '&time=' +
+        //   new Date();
+        // console.log(this.imagePath);
         this.selectedProcessDefinitionId = processDefinitionId;
         this.dialogProcessImageVisible = true;
       },
-      btnProcessDefinitionIdentityLink (row) {
+      btnProcessDefinitionIdentityLink(row) {
         this.selectedProcessDefinitionId = row.id;
         this.selectedProcessDefinitionName = row.name;
         this.dialogProcessDefinitionIdentityLinkVisible = true;
       },
-      selectionChange (selectedRecords) {
+      selectionChange(selectedRecords) {
         this.selectedRecords = selectedRecords;
       }
     }

src/views/system/user/components/user-search.vue

@@ -12,7 +12,7 @@
           <el-input clearable v-model="where.loginName" placeholder="请输入" />
         </el-form-item>
       </el-col>
-<!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
         <el-form-item label="用户名:">
           <el-input clearable v-model="where.nickname" placeholder="请输入" />
         </el-form-item>
@@ -52,7 +52,7 @@
     data() {
       // 默认表单数据
       const defaultWhere = {
-        loginName: '',
+        loginName: ''
         // nickname: '',
         // sex: undefined
       };