任务流程

src/api/flowable/manage.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request';
 import { Message } from 'element-ui';
 
-export function postAction (url, parameter) {
+export function postAction(url, parameter) {
   return request({
     url: url,
     method: 'post',
@@ -9,7 +9,7 @@ export function postAction (url, parameter) {
   });
 }
 
-export async function listDictionaries () {
+export async function listDictionaries() {
   const res = await request.get('/system/dict/getPage', {});
   if (res.data.code == 0) {
     return res.data.data;
@@ -17,7 +17,7 @@ export async function listDictionaries () {
   return Promise.reject(new Error(res.data.message));
 }
 
-export function httpAction (url, parameter, method) {
+export function httpAction(url, parameter, method) {
   return request({
     url: url,
     method: method,
@@ -25,7 +25,7 @@ export function httpAction (url, parameter, method) {
   });
 }
 
-export function putAction (url, parameter) {
+export function putAction(url, parameter) {
   return request({
     url: url,
     method: 'put',
@@ -33,7 +33,7 @@ export function putAction (url, parameter) {
   });
 }
 
-export function getAction (url, parameter) {
+export function getAction(url, parameter) {
   return request({
     url: url,
     method: 'get',
@@ -41,7 +41,7 @@ export function getAction (url, parameter) {
   });
 }
 
-export function downloadAction (url, method, parameter, filename) {
+export function downloadAction(url, method, parameter, filename) {
   return request({
     url: url,
     method: method,
@@ -56,7 +56,7 @@ export function downloadAction (url, method, parameter, filename) {
           if (e.target.readyState === 2) {
             let res = {};
             res = JSON.parse(e.target.result);
-            Message.error(res.msg);
+            Message.error(res.message);
           }
         };
         reader.readAsText(response);
@@ -85,7 +85,7 @@ export function downloadAction (url, method, parameter, filename) {
     });
 }
 
-export function deleteAction (url, parameter) {
+export function deleteAction(url, parameter) {
   return request({
     url: url,
     method: 'delete',

src/components/FormGenerator/styles/home.scss

@@ -57,7 +57,7 @@ $lighterBlue: #409EFF;
   position: absolute;
   left: 0;
   top: 0;
-  height: 100vh;
+  height: calc(100vh - 162px);
 }
 .left-scrollbar{
   height: calc(100vh - 42px);
@@ -71,7 +71,7 @@ $lighterBlue: #409EFF;
   box-sizing: border-box;
 }
 .center-board {
-  height: 100vh;
+  height: calc(100vh - 162px);
   width: auto;
   margin: 0 350px 0 260px;
   box-sizing: border-box;

src/components/VueBpmn/index.vue

@@ -361,7 +361,7 @@
 
   .fm2-container {
     background: #fff;
-    height: calc(100vh - 84px);
+    height: calc(100vh - 162px);
     border: 1px solid #e0e0e0;
 
     .el-container {

src/components/select/SelectUser/index.vue

@@ -8,13 +8,17 @@
     fullscreen
     maxable
     title="选择用户"
-    append-to-body
+    :append-to-body="appendToBody"
     @update:visible="updateVisible"
   >
     <div class="el-dialog-body-custom-height">
       <el-row :gutter="5">
         <el-col :span="18">
-          <Organization @changeList="changeList" ref="organization" />
+          <Organization
+            @changeList="changeList"
+            :multipleSelect="multipleSelect"
+            ref="organization"
+          />
         </el-col>
         <el-col :span="6">
           <div>
@@ -66,9 +70,7 @@
       </el-row>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button icon="el-icon-close" @click="visibleInChild = false"
-        >取消</el-button
-      >
+      <el-button icon="el-icon-close" @click="updateVisible">取消</el-button>
       <el-button icon="el-icon-check" type="primary" @click="confirm"
         >确定</el-button
       >
@@ -80,7 +82,7 @@
   import Organization from '@/components/select/organization';
   import { getAction } from '@/api/flowable/manage';
   import { Message } from 'element-ui';
-  import clearList from './org-user-search.vue';
+  import clearList from './clear-list.vue';
 
   export default {
     name: 'SelectUser',
@@ -90,6 +92,7 @@
         type: Boolean,
         default: false
       },
+      //是否多选
       multipleSelect: {
         type: Boolean,
         default: false
@@ -99,9 +102,10 @@
         type: String,
         default: ''
       },
+      //是否为2级弹出框
       appendToBody: {
         type: Boolean,
-        default: false
+        default: true
       }
     },
     data() {
@@ -138,31 +142,20 @@
             prop: 'name',
             label: '姓名',
             sortable: 'custom',
-            showOverflowTooltip: true,
-      
+            showOverflowTooltip: true
           },
 
           {
             prop: 'loginName',
             label: '用户账号',
             sortable: 'custom',
-            showOverflowTooltip: true,
-          
+            showOverflowTooltip: true
           },
           {
             label: '操作',
             slot: 'action',
-            showOverflowTooltip: true,
-    
+            showOverflowTooltip: true
           }
-        ],
-        statusOptions: [
-          { value: 1, label: '全职' },
-          { value: 2, label: '兼职' },
-          { value: 3, label: '实习' },
-          { value: 4, label: '正式' },
-          { value: 5, label: '试用' },
-          { value: 6, label: '离职' }
         ]
       };
     },
@@ -196,27 +189,27 @@
       changeList(arr) {
         this.selectedRecords = arr;
         this.$refs.table.reload();
-        console.log(this.selectedRecords);
       },
       /* 更新visible */
       updateVisible(value) {
+        this.selectedRecords = [];
+        this.$refs.table.reload();
+        this.$refs.organization.$refs.userList.selectedRecords = [];
         this.$emit('update:visible', value);
-      },
-      close() {
         this.visibleInChild = false;
       },
       filterNode(value, data) {
         if (!value) return true;
         return data.label.indexOf(value) !== -1;
       },
-      getTreeData() {
-        getAction('/sys/org/getSelectTreeData', { type: this.type }).then(
-          (res) => {
-            const { data } = res;
-            this.treeData = data;
-          }
-        );
-      },
+      // getTreeData() {
+      //   getAction('/sys/org/getSelectTreeData', { type: this.type }).then(
+      //     (res) => {
+      //       const { data } = res;
+      //       this.treeData = data;
+      //     }
+      //   );
+      // },
       handleNodeClick(node) {
         this.currOrgId = node.id;
         this.listSysUsers();
@@ -268,8 +261,8 @@
           this.$emit('selectUserFinished', this.selectedRecords[0]);
         }
         this.selectedRecords = [];
+        this.$refs.table.reload();
         this.$refs.organization.$refs.userList.selectedRecords = [];
-        this.records = [];
         this.visibleInChild = false;
       }
     }

src/components/select/organization/components/org-user-list.vue

@@ -39,7 +39,6 @@
 </template>
 
 <script>
-  import OrgUserSearch from './org-user-search.vue';
   import OrgUserEdit from './org-user-edit.vue';
   import {
     getUserPage,
@@ -48,12 +47,16 @@
   } from '@/api/system/organization';
 
   export default {
-    components: { OrgUserSearch, OrgUserEdit },
+    components: { OrgUserEdit },
     props: {
       // 机构id
       organizationId: [Number, String],
       // 全部机构
-      organizationList: Array
+      organizationList: Array,
+      multipleSelect: {
+        type: Boolean,
+        default: false
+      }
     },
     data() {
       return {
@@ -141,17 +144,20 @@
     methods: {
       rowClick(row) {
         // let arr = this.selectedRecords;
-        let index = this.selectedRecords.findIndex(
-          (item) => item.id === row.id
-        );
-        if (index < 0) {
-          console.log('push');
-          this.selectedRecords.push(row);
+        if (this.multipleSelect) {
+          let index = this.selectedRecords.findIndex(
+            (item) => item.id === row.id
+          );
+          if (index < 0) {
+            console.log('push');
+            this.selectedRecords.push(row);
+          } else {
+            console.log('remove');
+            this.selectedRecords.splice(index, 1);
+          }
         } else {
-          console.log('remove');
-          this.selectedRecords.splice(index, 1);
+          this.selectedRecords = [row];
         }
-        console.log(this.selectedRecords);
         this.$emit('changeList', this.selectedRecords);
       },
       /* 表格数据源 */

src/components/select/organization/index.vue

@@ -31,6 +31,7 @@
             v-if="current"
             :organization-list="data"
             :organization-id="current.id"
+            :multipleSelect="multipleSelect"
             @changeList="changeList"
           />
         </template>
@@ -60,6 +61,12 @@
   export default {
     name: 'SystemOrganization',
     components: { OrgUserList, OrgEdit, OrgUserSearch },
+    props: {
+      multipleSelect: {
+        type: Boolean,
+        default: false
+      }
+    },
     data() {
       return {
         // 加载状态

src/views/flowable/components/ExecuteTask.vue

@@ -52,21 +52,25 @@
         <el-form-item label="抄送给:">
           <el-row align="left">
             <el-col :span="1" align="left">
-              <i
-                class="el-icon-plus el-icon--left"
-                style="cursor: pointer"
+              <el-button
+                size="small"
+                type="primary"
+                icon="el-icon-plus"
+                class="ele-btn-icon"
                 @click="doSelectCcTo"
-              ></i>
+              >
+                添加用户
+              </el-button>
             </el-col>
             <el-col :span="23" align="left">
               <el-tag
                 v-for="tag in ccToVos"
-                :key="tag.userId"
+                :key="tag.id"
                 effect="plain"
                 closable
                 @close="handleCcToClose(tag)"
                 style="margin-left: 5px"
-                >{{ tag.userName }}
+                >{{ tag.name }}
               </el-tag>
             </el-col>
           </el-row>
@@ -257,8 +261,8 @@
                   initiator: this.initiator,
                   values: realValues,
                   ccToVos: this.ccToVos
-                }).then(({ msg }) => {
-                  Message.success(msg);
+                }).then(({ data }) => {
+                  Message.success('执行' + data.message);
                   this.dialogExcuteTaskVisibleInChild = false;
                   this.$emit('executeTaskFinished');
                 });
@@ -272,8 +276,8 @@
             taskId: this.executeTaskId,
             message: this.message,
             ccToVos: this.ccToVos
-          }).then(({ msg }) => {
-            Message.success(msg);
+          }).then(({ data }) => {
+            Message.success('执行' + data.message);
             this.dialogExcuteTaskVisibleInChild = false;
             this.$emit('executeTaskFinished');
           });
@@ -294,9 +298,9 @@
         this.selectUserMultipleSelect = true;
         this.selectUserVisible = true;
         this.selectUserType = 'selectCcTo';
-        if (this.$refs.selectUser.treeData.length == 0) {
-          this.$refs.selectUser.getTreeData();
-        }
+        // if (this.$refs.selectUser.treeData.length == 0) {
+        //   this.$refs.selectUser.getTreeData();
+        // }
       },
       handleCcToClose(tag) {
         this.ccToVos.splice(this.ccToVos.indexOf(tag), 1);
@@ -306,31 +310,35 @@
         this.selectUserMultipleSelect = false;
         this.selectUserVisible = true;
         this.selectUserType = 'assign';
-        if (this.$refs.selectUser.treeData.length == 0) {
-          this.$refs.selectUser.getTreeData();
-        }
+        // if (this.$refs.selectUser.treeData.length == 0) {
+        //   this.$refs.selectUser.getTreeData();
+        // }
       },
       doDelegate() {
         this.checkMessage();
         this.selectUserMultipleSelect = false;
         this.selectUserVisible = true;
         this.selectUserType = 'delegate';
-        if (this.$refs.selectUser.treeData.length == 0) {
-          this.$refs.selectUser.getTreeData();
-        }
+        // if (this.$refs.selectUser.treeData.length == 0) {
+        //   this.$refs.selectUser.getTreeData();
+        // }
       },
       selectUserFinished(selectData) {
         if (!selectData || selectData.length == 0) {
           Message.error('请先选择用户');
           return;
         }
+        if (selectData.accountId == localStorage.getItem('userId')) {
+          Message.error('不能讲任务派给自己');
+          return;
+        }
         if (this.selectUserType === 'assign') {
           putAction('/flowable/task/assign', {
             taskId: this.executeTaskId,
-            userId: selectData.userId,
+            userId: selectData.accountId,
             message: this.message
-          }).then(({ msg }) => {
-            Message.success(msg);
+          }).then(({ data }) => {
+            Message.success(data.message);
             this.selectUserVisible = false;
             this.dialogExcuteTaskVisibleInChild = false;
             this.$emit('executeTaskFinished');
@@ -338,10 +346,10 @@
         } else if (this.selectUserType === 'delegate') {
           putAction('/flowable/task/delegate', {
             taskId: this.executeTaskId,
-            userId: selectData.userId,
+            userId: selectData.accountId,
             message: this.message
-          }).then(({ msg }) => {
-            Message.success(msg);
+          }).then(({ data }) => {
+            Message.success(data.message);
             this.selectUserVisible = false;
             this.dialogExcuteTaskVisibleInChild = false;
             this.$emit('executeTaskFinished');
@@ -360,8 +368,8 @@
           activityId: backNode.nodeId,
           activityName: backNode.nodeName,
           message: this.message
-        }).then(({ msg }) => {
-          Message.success(msg);
+        }).then(({ data }) => {
+          Message.success(data.message);
           this.dialogExcuteTaskVisibleInChild = false;
           this.$emit('executeTaskFinished');
         });

src/views/flowable/components/ProcessDetail.vue

@@ -1,8 +1,13 @@
 <template>
-  <el-dialog
+  <ele-modal
+    width="980px"
+    height="60%"
+    :visible="dialogProcessDetailVisibleInChild"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
     title="查看详情"
-    :visible.sync="dialogProcessDetailVisibleInChild"
-    fullscreen
+    maxable
+    @update:visible="updateVisible"
   >
     <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
       <el-tab-pane label="过程意见" name="comments">
@@ -11,45 +16,24 @@
           border
           fit
           highlight-current-row
-          style="width: 100%"
           :cell-style="{ padding: '3px' }"
         >
-          <el-table-column
-            label="任务节点"
-            prop="taskName"
-            align="center"
-            width="165px"
-          >
+          <el-table-column label="任务节点" prop="taskName" align="center">
             <template slot-scope="scope"
               ><span>{{ scope.row.taskName }}</span></template
             >
           </el-table-column>
-          <el-table-column
-            label="操作类型"
-            prop="typeDesc"
-            align="center"
-            width="80px"
-          >
+          <el-table-column label="操作类型" prop="typeDesc" align="center">
             <template slot-scope="scope"
               ><span>{{ scope.row.typeDesc }}</span></template
             >
           </el-table-column>
-          <el-table-column
-            label="参与人"
-            prop="userName"
-            align="center"
-            width="80px"
-          >
+          <el-table-column label="参与人" prop="userName" align="center">
             <template slot-scope="scope"
               ><span>{{ scope.row.userName }}</span></template
             >
           </el-table-column>
-          <el-table-column
-            label="时间"
-            prop="time"
-            align="center"
-            width="165px"
-          >
+          <el-table-column label="时间" prop="time" align="center">
             <template slot-scope="scope"
               ><span>{{ scope.row.time }}</span></template
             >
@@ -81,7 +65,12 @@
         <el-scrollbar> <img ref="img" alt="流程图" /></el-scrollbar>
       </el-tab-pane>
     </el-tabs>
-  </el-dialog>
+    <template v-slot:footer>
+      <el-button icon="el-icon-close" @click="updateVisible(false)"
+        >关闭</el-button
+      >
+    </template>
+  </ele-modal>
 </template>
 
 <script>
@@ -137,6 +126,10 @@
       init() {
         this.listComments();
       },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      },
       getImage(url) {
         let that = this;
         that.$nextTick(() => {
@@ -177,7 +170,7 @@
           getAction('/flowable/processInstance/formData', {
             processInstanceId: this.processInstanceId
           }).then((res) => {
-            const { data } = res;
+            const { data } = res.data;
             this.showBusinessKey = data.showBusinessKey;
             this.businessKey = data.businessKey;
             if (data && data.renderedStartForm) {
@@ -195,7 +188,8 @@
         getAction('/flowable/processInstance/comments', {
           processInstanceId: this.processInstanceId
         }).then((res) => {
-          const { data } = res;
+          const { data } = res.data;
+
           this.comments = data;
         });
       },

src/views/flowable/components/StartProcess.vue

@@ -7,6 +7,39 @@
     <div v-if="generateStartFormVisible">
       <form-parser :data="startFormJson" ref="generateStartForm"> </form-parser>
     </div>
+
+    <el-form label-width="100px">
+      <el-form-item label="业务主键Key:" v-if="showBusinessKey">
+        <el-input v-model="businessKey" placeholder="请输入业务主键Key" />
+      </el-form-item>
+      <el-form-item label="抄送给:">
+        <el-row align="left">
+          <el-col :span="1" align="left">
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-plus"
+              class="ele-btn-icon"
+              @click="doSelectCcTo"
+            >
+              添加用户
+            </el-button>
+          </el-col>
+          <el-col :span="23" align="left">
+            <el-tag
+              v-for="tag in ccToVos"
+              :key="tag.id"
+              effect="plain"
+              closable
+              @close="handleCcToClose(tag)"
+              style="margin-left: 5px"
+              >{{ tag.name }}
+            </el-tag>
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+
     <select-user
       ref="selectUser"
       :visible.sync="selectUserVisible"
@@ -15,33 +48,6 @@
       @selectUserFinished="selectUserFinished"
     ></select-user>
     <div slot="footer" class="dialog-footer">
-      <el-form label-width="100px">
-        <el-form-item label="业务主键Key:" v-if="showBusinessKey">
-          <el-input v-model="businessKey" placeholder="请输入业务主键Key" />
-        </el-form-item>
-        <el-form-item label="抄送给:">
-          <el-row align="left">
-            <el-col :span="1" align="left">
-              <i
-                class="el-icon-plus el-icon--left"
-                style="cursor: pointer"
-                @click="doSelectCcTo"
-              ></i>
-            </el-col>
-            <el-col :span="23" align="left">
-              <el-tag
-                v-for="tag in ccToVos"
-                :key="tag.userId"
-                effect="plain"
-                closable
-                @close="handleCcToClose(tag)"
-                style="margin-left: 5px"
-                >{{ tag.name }}
-              </el-tag>
-            </el-col>
-          </el-row>
-        </el-form-item>
-      </el-form>
       <el-button
         icon="el-icon-close"
         @click="dialogStartProcessVisibleInChild = false"
@@ -148,8 +154,8 @@
                   businessKey: this.businessKey,
                   values: realValues,
                   ccToVos: this.ccToVos
-                }).then(({ msg }) => {
-                  Message.success(msg);
+                }).then(({ data }) => {
+                  Message.success(data.message);
                   this.dialogStartProcessVisibleInChild = false;
                 });
               }
@@ -160,14 +166,16 @@
             processDefinitionId: this.processDefinition.id,
             businessKey: this.businessKey,
             ccToVos: this.ccToVos
-          }).then(({ msg }) => {
-            Message.success(msg);
+          }).then(({ data }) => {
+            Message.success(data.message);
             this.dialogStartProcessVisibleInChild = false;
           });
         }
       },
       reset() {
-        this.$refs.generateStartForm.resetFields();
+        if (this.generateStartFormVisible) {
+          this.$refs.generateStartForm.resetFields();
+        }
         this.ccToVos = [];
       }
     }

src/views/flowable/components/TaskDetail.vue

@@ -271,7 +271,7 @@
         }
       },
       dicts: {
-        type: Object,
+        type: Array,
         default: function () {
           return {};
         }

src/views/flowable/form/FormDesign.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <fm-making-form
+    <!-- <fm-making-form
       class="form-making-height"
       v-if="formDesignType == 'formMaking'"
       ref="formMaking"
@@ -8,7 +8,7 @@
       generate-json
     >
       <template #action><slot name="action"></slot></template>
-    </fm-making-form>
+    </fm-making-form> -->
     <form-generator
       v-if="formDesignType == 'formGenerator'"
       ref="formGenerator"
@@ -80,6 +80,6 @@
 
 <style lang="scss">
   .form-making-height {
-    height: calc(100vh - 84px);
+    height: 100%;
   }
 </style>

src/views/flowable/form/edit.vue

@@ -1,12 +1,14 @@
 <template>
-  <div>
-    <form-design ref="formDesign">
-      <template v-slot:action>
-        <el-button type="text" icon="el-icon-check" @click="btnSave"
-          >保存</el-button
-        >
-      </template>
-    </form-design>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <form-design ref="formDesign">
+        <template v-slot:action>
+          <el-button type="text" icon="el-icon-check" @click="btnSave"
+            >保存</el-button
+          >
+        </template>
+      </form-design>
+    </el-card>
   </div>
 </template>
 <script>

src/views/flowable/form/index.vue

@@ -26,7 +26,7 @@
             type="danger"
             icon="el-icon-delete"
             class="ele-btn-icon"
-            @click="btnDelete"
+            @click="btnDelete()"
           >
             批量删除
           </el-button>
@@ -42,12 +42,12 @@
               <el-dropdown-item icon="el-icon-view" @click.native="btnView(row)"
                 >查看</el-dropdown-item
               >
-              <el-dropdown-item
+              <!-- <el-dropdown-item
                 icon="el-icon-edit"
                 divided
                 @click.native="btnUpdate(row)"
                 >修改
-              </el-dropdown-item>
+              </el-dropdown-item> -->
               <el-dropdown-item
                 icon="el-icon-edit"
                 divided
@@ -86,7 +86,7 @@
         <el-form-item label="表单key" prop="formKey">
           <el-input
             v-model="temp.formKey"
-            :readonly="dialogStatus === 'update'"
+            :disabled="dialogStatus === 'update'"
           />
         </el-form-item>
         <el-form-item label="表单名称" prop="formName">
@@ -198,7 +198,7 @@
 
       resetTemp() {
         this.temp = {
-          formKey: undefined,
+          formKey: '',
           formName: ''
         };
       },
@@ -231,6 +231,7 @@
       },
       btnUpdate(row) {
         this.temp = Object.assign({}, row);
+        console.log(this.temp);
         this.dialogStatus = 'update';
         this.dialogFormVisible = true;
         this.$nextTick(() => {
@@ -255,24 +256,19 @@
         });
       },
       btnDelete(id) {
-        let ids = id
-          ? [id]
-          : this.selection.map((record) => {
-              return record.formKey;
-            });
+        let ids = id ? [id] : this.selection.map((record) => record.formKey);
+        console.log(ids);
         if (ids.length == 0) {
           Message.error('请选择要删除的记录');
           return;
         }
         deleteAction('/flowable/form/delete', { ids: ids.toString() }).then(
-          ({ msg }) => {
-            Message.success(msg);
+          ({ data }) => {
+            console.log(data);
+            Message.success('删除' + data.message);
             this.reload();
           }
         );
-      },
-      selectionChange(selection) {
-        this.selection = selection;
       }
     }
   };

src/views/flowable/model/edit.vue

@@ -1,11 +1,15 @@
 <template>
-  <div v-if="show">
-    <vue-bpmn
-      @save="btnSave"
-      :modelData="modelData"
-      :isView="isView"
-      :key="$route.query.id"
-    />
+  <div class="ele-body">
+    <el-card>
+      <div v-if="show">
+        <vue-bpmn
+          @save="btnSave"
+          :modelData="modelData"
+          :isView="isView"
+          :key="$route.query.id"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 <script>

src/views/flowable/model/index.vue

@@ -33,7 +33,7 @@
             icon="el-icon-delete"
             size="small"
             type="danger"
-            @click="btnDelete"
+            @click="btnDelete()"
             class="ele-btn-icon"
             >批量删除
           </el-button>
@@ -54,12 +54,12 @@
               <el-dropdown-item icon="el-icon-view" @click.native="btnView(row)"
                 >查看</el-dropdown-item
               >
-              <el-dropdown-item
+              <!-- <el-dropdown-item
                 icon="el-icon-edit"
                 divided
                 @click.native="btnUpdate(row)"
                 >修改
-              </el-dropdown-item>
+              </el-dropdown-item> -->
               <el-dropdown-item
                 icon="el-icon-edit"
                 divided
@@ -114,7 +114,11 @@
         label-width="110px"
       >
         <el-form-item label="模型key" prop="key">
-          <el-input v-model="temp.key" placeholder="不能为纯数字" />
+          <el-input
+            :disabled="dialogStatus === 'update'"
+            v-model="temp.key"
+            placeholder="不能为纯数字"
+          />
         </el-form-item>
         <el-form-item label="模型名称" prop="name">
           <el-input v-model="temp.name" />
@@ -385,7 +389,8 @@
           if (valid) {
             postAction('/flowable/model/save', this.temp).then(({ data }) => {
               this.dialogFormVisible = false;
-              Message.success(data);
+              console.log(data);
+              Message.success('添加' + data.message);
               this.reload();
             });
           }
@@ -401,7 +406,7 @@
       },
       btnCopy(row) {
         putAction('/flowable/model/copy', { id: row.id }).then((res) => {
-          Message.success(res.data.message);
+          Message.success('复制' + res.data.message);
           this.reload();
         });
       },

src/views/flowable/processDefinition.vue

@@ -14,15 +14,6 @@
           @submit.native.prevent
         >
           <el-row :gutter="15">
-            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 6 }">
-              <el-form-item label="流程定义ID:">
-                <el-input
-                  clearable
-                  v-model="listQuery.processDefinitionId"
-                  placeholder="请输入"
-                />
-              </el-form-item>
-            </el-col>
             <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 6 }">
               <el-form-item label="流程定义名称:">
                 <el-input
@@ -41,6 +32,16 @@
                 />
               </el-form-item>
             </el-col>
+            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 6 }">
+              <el-form-item label="流程定义分类:">
+                <DictSelection
+                  dictName="流程分类"
+                  clearable
+                  v-model="listQuery.processDefinitionCategory"
+                >
+                </DictSelection>
+              </el-form-item>
+            </el-col>
 
             <el-col v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 6 }">
               <div class="ele-form-actions">
@@ -334,6 +335,7 @@
         total: 0,
         listQuery: {
           processDefinitionId: undefined,
+
           processDefinitionName: undefined,
           processDefinitionKey: undefined,
           latestVersion: true,
@@ -403,6 +405,7 @@
           current: 1,
           size: 10,
           processDefinitionId: undefined,
+          processDefinitionCategory: undefined,
           processDefinitionName: undefined,
           processDefinitionKey: undefined,
           latestVersion: true,

src/views/flowable/processInstance.vue

@@ -1,135 +1,86 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox v-model="listQuery.unfinished">未办结</el-checkbox>
-      <el-checkbox v-model="listQuery.finished">已办结</el-checkbox>
-    </div>
-    <div class="filter-container">
-      <el-input
-        v-model="listQuery.processDefinitionId"
-        placeholder="流程定义ID"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.processInstanceId"
-        placeholder="流程实例ID"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.processDefinitionName"
-        placeholder="流程定义名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.processDefinitionKey"
-        placeholder="流程定义KEY"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.businessKey"
-        placeholder="业务主键KEY"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.startedBy"
-        placeholder="启动人"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-dropdown
-        split-button
-        type="primary"
-        @click="btnQuery"
-        class="filter-item"
-      >
-        <i class="el-icon-search el-icon--left"></i>查询
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
-            >重置</el-dropdown-item
-          >
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-    <el-table
-      :data="records"
-      ref="multipleTable"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      :cell-style="{ padding: '3px' }"
-    >
-      <el-table-column
-        label="流程实例ID"
-        prop="id"
-        align="center"
-        width="290px"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.id }}</span></template
-        >
-      </el-table-column>
-      <el-table-column
-        label="流程定义名称"
-        prop="processDefinitionName"
-        align="center"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.processDefinitionName }}</span></template
-        >
-      </el-table-column>
-      <el-table-column
-        label="流程定义KEY"
-        prop="processDefinitionKey"
-        align="center"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.processDefinitionKey }}</span></template
-        >
-      </el-table-column>
-      <el-table-column
-        label="版本"
-        prop="processDefinitionVersion"
-        align="center"
-        width="60px"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.processDefinitionVersion }}</span></template
-        >
-      </el-table-column>
-      <el-table-column
-        label="开始时间"
-        prop="startTime"
-        align="center"
-        width="165px"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.startTime }}</span></template
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="filter-container">
+        <el-checkbox v-model="listQuery.unfinished">未办结</el-checkbox>
+        <el-checkbox v-model="listQuery.finished">已办结</el-checkbox>
+      </div>
+      <div class="filter-container">
+        <el-input
+          v-model="listQuery.processDefinitionId"
+          placeholder="流程定义ID"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.processInstanceId"
+          placeholder="流程实例ID"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.processDefinitionName"
+          placeholder="流程定义名称"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.processDefinitionKey"
+          placeholder="流程定义KEY"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.businessKey"
+          placeholder="业务主键KEY"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.startedBy"
+          placeholder="启动人"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-dropdown
+          split-button
+          type="primary"
+          @click="btnQuery"
+          class="filter-item"
         >
-      </el-table-column>
-      <el-table-column
-        label="结束时间"
-        prop="endTime"
-        align="center"
-        width="165px"
+          <i class="el-icon-search el-icon--left"></i>查询
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
+              >重置</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
       >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.endTime }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template slot-scope="{ row }">
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <!-- <el-button
+            icon="el-icon-plus"
+            type="primary"
+            @click="btnImport"
+            class="ele-btn-icon"
+            >导入
+          </el-button> -->
+        </template>
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
           <el-dropdown>
             <span class="el-dropdown-link"
               >操作<i class="el-icon-arrow-down el-icon--right"></i
@@ -168,15 +119,8 @@
             </el-dropdown-menu>
           </el-dropdown>
         </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :current.sync="listQuery.current"
-      :size.sync="listQuery.size"
-      @pagination="list"
-    />
+      </ele-pro-table>
+    </el-card>
 
     <el-dialog title="流程实例" :visible.sync="dialogFormVisible">
       <el-form
@@ -331,12 +275,76 @@
     data() {
       return {
         dicts: [],
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: 50,
+            align: 'center',
+            fixed: 'left'
+          },
+
+          {
+            prop: 'name',
+            label: '流程定义名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'id',
+            label: '流程实例ID',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processDefinitionName',
+            label: '流程定义名称',
+            align: 'center',
+
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processDefinitionKey',
+            label: '流程定义KEY',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'processDefinitionVersion',
+            label: '版本',
+            align: 'center',
+
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'startTime',
+            label: '开始时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'endTime',
+            label: '结束时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 230,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+
         records: null,
         selectedRecords: [],
         total: 0,
         listQuery: {
-          current: 1,
-          size: 10,
           processInstanceId: undefined,
           processDefinitionId: undefined,
           processDefinitionName: undefined,
@@ -372,33 +380,59 @@
         dialogViewVisible: false
       };
     },
-    created() {
-      if (this.$route.query && this.$route.query.processDefinitionId) {
-        this.listQuery.processDefinitionId =
-          this.$route.query.processDefinitionId;
+    // created() {
+    //   if (this.$route.query && this.$route.query.processDefinitionId) {
+    //     this.listQuery.processDefinitionId =
+    //       this.$route.query.processDefinitionId;
+    //   }
+    //   this.list();
+    // },
+    watch: {
+      $route: {
+        handler(route) {
+          if (route.query && route.query.processDefinitionId) {
+            this.listQuery.processDefinitionId =
+              route.query.processDefinitionId;
+          } else {
+            this.listQuery.processDefinitionId = undefined;
+          }
+          this.$refs.table?.reload({ page: 1 });
+        },
+        immediate: true
       }
-      this.list();
     },
     methods: {
+      async datasource({ page, limit }) {
+        const res = await getAction('/flowable/processInstance/list', {
+          ...this.listQuery,
+          current: page,
+          size: limit
+        });
+        const { data } = res.data;
+        return {
+          list: data.records,
+          count: data.total
+        };
+      },
+      /* 刷新表格 */
       list() {
-        getAction('/flowable/processInstance/list', this.listQuery).then(
-          (res) => {
-            if (res.data.code == 0) {
-              console.log(res.data.data);
-              this.records = res.data.data.records;
-              this.total = res.data.data.total;
-            }
-          }
-        );
+        this.$refs.table.reload({ page: 1 });
       },
+      // list() {
+      //   getAction('/flowable/processInstance/list', this.listQuery).then(
+      //     (res) => {
+      //       if (res.data.code == 0) {
+      //         this.records = res.data.data.records;
+      //         this.total = res.data.data.total;
+      //       }
+      //     }
+      //   );
+      // },
       btnQuery() {
-        this.listQuery.current = 1;
         this.list();
       },
       btnReset() {
         this.listQuery = {
-          current: 1,
-          size: 10,
           processInstanceId: undefined,
           processDefinitionId: undefined,
           processDefinitionName: undefined,
@@ -414,7 +448,8 @@
         getAction('/flowable/processInstance/queryById', {
           processInstanceId: row.id
         }).then((res) => {
-          const { data } = res;
+          const { data } = res.data;
+
           this.temp = Object.assign({}, data);
           this.dialogFormVisible = true;
         });
@@ -437,8 +472,8 @@
         deleteAction('/flowable/processInstance/delete', {
           processInstanceId: id,
           cascade: cascade
-        }).then(({ msg }) => {
-          Message.success(msg);
+        }).then(({ data }) => {
+          Message.success('删除' + data.message);
           this.list();
         });
       },
@@ -451,6 +486,12 @@
           this.temp.suspended = !suspend;
         });
       }
+    },
+    beforeRouteLeave(to, from, next) {
+      this.dialogViewVisible = false;
+      next((vm) => {
+        console.log(vm);
+      });
     }
   };
 </script>

src/views/flowable/startMyProcess/index.vue

@@ -1,67 +1,72 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-input
-        v-model="listQuery.processDefinitionName"
-        placeholder="流程定义名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-
-      <el-dropdown
-        split-button
-        type="primary"
-        @click="btnQuery"
-        class="filter-item"
-      >
-        <i class="el-icon-search el-icon--left"></i>查询
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
-            >重置</el-dropdown-item
-          >
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="filter-container">
+        <el-input
+          v-model="listQuery.processDefinitionName"
+          placeholder="流程定义名称"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
 
-    <el-row>
-      <el-col :span="12" v-for="row in records" :key="row.name">
-        <div
-          class="filter-container"
-          style="margin-right: 3px; margin-bottom: 3px"
+        <el-dropdown
+          split-button
+          type="primary"
+          @click="btnQuery"
+          class="filter-item"
         >
-          <el-card>
-            <div slot="header" class="clearfix">
-              <span>{{ row.name }}-v{{ row.version }}</span>
-              <div style="position: relative; text-align: right">
-                <el-button type="primary" size="mini" @click="btnImage(row.id)"
-                  >流程图</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click="btnStartInstance(row)"
-                  >发起流程
-                </el-button>
+          <i class="el-icon-search el-icon--left"></i>查询
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
+              >重置</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+
+      <el-row>
+        <el-col :span="12" v-for="row in records" :key="row.name">
+          <div
+            class="filter-container"
+            style="margin-right: 3px; margin-bottom: 3px"
+          >
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>{{ row.name }}-v{{ row.version }}</span>
+                <div style="position: relative; text-align: right">
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    @click="btnImage(row.id)"
+                    >流程图</el-button
+                  >
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    @click="btnStartInstance(row)"
+                    >发起流程
+                  </el-button>
+                </div>
+              </div>
+              <div class="text item">
+                {{ row.description ? row.description : '无描述' }}
               </div>
-            </div>
-            <div class="text item">
-              {{ row.description ? row.description : '无描述' }}
-            </div>
-            <div class="text item">
-              {{ row.category ? row.category : '无命名空间' }}
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :current.sync="listQuery.current"
-      :size.sync="listQuery.size"
-      @pagination="list"
-    />
+              <div class="text item">
+                {{ row.category ? row.category : '无命名空间' }}
+              </div>
+            </el-card>
+          </div>
+        </el-col>
+      </el-row>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :current.sync="listQuery.current"
+        :size.sync="listQuery.size"
+        @pagination="list"
+      />
+    </el-card>
 
     <el-dialog title="流程图" :visible.sync="dialogImageVisible" width="60%">
       <img ref="img" alt="流程图" />
@@ -137,7 +142,6 @@
               request.readyState == XMLHttpRequest.DONE &&
               request.status == 200
             ) {
-              console.log(request);
               that.$refs.img.src = URL.createObjectURL(request.response);
               URL.createObjectURL(request.response);
 

src/views/flowable/task/index.vue

@@ -1,189 +1,154 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox v-model="listQuery.unfinished">任务未办结</el-checkbox>
-      <el-checkbox v-model="listQuery.finished">任务已办结</el-checkbox>
-      <el-checkbox v-model="listQuery.processUnfinished"
-        >流程未办结</el-checkbox
-      >
-      <el-checkbox v-model="listQuery.processFinished">流程已办结</el-checkbox>
-    </div>
-    <div class="filter-container">
-      <el-input
-        v-model="listQuery.processInstanceId"
-        placeholder="流程实例ID"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.taskId"
-        placeholder="任务ID"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.taskName"
-        placeholder="任务名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.processInstanceBusinessKey"
-        placeholder="业务主键"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.taskAssignee"
-        placeholder="执行人"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.taskOwner"
-        placeholder="所有人"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.taskInvolvedUser"
-        placeholder="干系人"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.parentTaskId"
-        placeholder="父任务ID"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-date-picker
-        v-model="listQuery.taskDueAfter"
-        value-format="yyyy-MM-dd"
-        placeholder="到期日开始"
-        type="date"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskDueBefore"
-        value-format="yyyy-MM-dd"
-        placeholder="到期日结束"
-        type="date"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskCreatedAfter"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="创建时间开始"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskCreatedBefore"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="创建时间结束"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskCompletedAfter"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="完成时间开始"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskCompletedBefore"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="完成时间结束"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      />
-      <el-dropdown
-        split-button
-        type="primary"
-        class="filter-item"
-        @click="btnQuery"
-      >
-        <i class="el-icon-search el-icon--left" />查询
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
-            >重置</el-dropdown-item
-          >
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-    <el-table
-      :data="records"
-      ref="multipleTable"
-      @selection-change="selectionChange"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      :cell-style="{ padding: '3px' }"
-    >
-      <el-table-column type="selection" align="center"> </el-table-column>
-      <el-table-column
-        label="流程实例名称"
-        prop="processInstanceName"
-        align="center"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.processInstanceName }}</span></template
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="filter-container">
+        <el-checkbox v-model="listQuery.unfinished">任务未办结</el-checkbox>
+        <el-checkbox v-model="listQuery.finished">任务已办结</el-checkbox>
+        <el-checkbox v-model="listQuery.processUnfinished"
+          >流程未办结</el-checkbox
         >
-      </el-table-column>
-      <el-table-column label="任务名称" prop="name" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.name }}</span></template
+        <el-checkbox v-model="listQuery.processFinished"
+          >流程已办结</el-checkbox
         >
-      </el-table-column>
-      <el-table-column
-        label="开始时间"
-        prop="claimTime"
-        align="center"
-        width="165px"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.createTime }}</span></template
+      </div>
+      <div class="filter-container">
+        <el-input
+          v-model="listQuery.processInstanceId"
+          placeholder="流程实例ID"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.taskId"
+          placeholder="任务ID"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.taskName"
+          placeholder="任务名称"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.processInstanceBusinessKey"
+          placeholder="业务主键"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.taskAssignee"
+          placeholder="执行人"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.taskOwner"
+          placeholder="所有人"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.taskInvolvedUser"
+          placeholder="干系人"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.parentTaskId"
+          placeholder="父任务ID"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-date-picker
+          v-model="listQuery.taskDueAfter"
+          value-format="yyyy-MM-dd"
+          placeholder="到期日开始"
+          type="date"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskDueBefore"
+          value-format="yyyy-MM-dd"
+          placeholder="到期日结束"
+          type="date"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskCreatedAfter"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="创建时间开始"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskCreatedBefore"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="创建时间结束"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskCompletedAfter"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="完成时间开始"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskCompletedBefore"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="完成时间结束"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        />
+        <el-dropdown
+          split-button
+          type="primary"
+          class="filter-item"
+          @click="btnQuery"
         >
-      </el-table-column>
-      <el-table-column
-        label="结束时间"
-        prop="endTime"
-        align="center"
-        width="165px"
+          <i class="el-icon-search el-icon--left" />查询
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
+              >重置</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
       >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.endTime }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="所有人" prop="owner" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.owner }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="执行人" prop="assignee" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.assignee }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template slot-scope="{ row }">
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <!-- <el-button
+            icon="el-icon-plus"
+            type="primary"
+            @click="btnImport"
+            class="ele-btn-icon"
+            >导入
+          </el-button> -->
+        </template>
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
           <el-dropdown>
             <span class="el-dropdown-link"
               >操作<i class="el-icon-arrow-down el-icon--right"></i
@@ -201,32 +166,30 @@
                 >查看详情
               </el-dropdown-item>
               <el-dropdown-item
-                v-permission="'flowable:task:execute'"
+                icon="el-icon-edit"
                 v-if="
-                  row.endTime == null &&
+                  (row.endTime == null || row.endTime == '') &&
                   (row.assignee == null || row.assignee == '')
                 "
-                icon="el-icon-edit"
                 divided
                 @click.native="btnClaim(row)"
                 >认领并执行
               </el-dropdown-item>
               <el-dropdown-item
-                v-permission="'flowable:task:execute'"
+                icon="el-icon-edit"
                 v-if="
-                  row.endTime == null &&
-                  row.assignee === $store.getters.sysUser.userId
+                  (row.endTime == null || row.endTime == '') &&
+                  row.assignee == userId
                 "
-                icon="el-icon-edit"
                 divided
                 @click.native="btnUnclaim(row)"
                 >取消认领
               </el-dropdown-item>
               <el-dropdown-item
                 v-if="
-                  row.endTime == null &&
-                  row.assignee != null &&
-                  row.assignee === $store.getters.sysUser.userId
+                  (row.endTime == null || row.endTime == '') &&
+                  (row.assignee != null || row.assignee != '') &&
+                  row.assignee == userId
                 "
                 icon="el-icon-edit"
                 divided
@@ -237,15 +200,8 @@
             </el-dropdown-menu>
           </el-dropdown>
         </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :current.sync="listQuery.current"
-      :size.sync="listQuery.size"
-      @pagination="list"
-    />
+      </ele-pro-table>
+    </el-card>
     <!-- 弹窗任务信息 -->
     <task-detail
       v-if="dialogTaskDetailVisible"
@@ -286,13 +242,78 @@
     components: { Pagination, TaskDetail, ExecuteTask, ProcessDetail },
     data() {
       return {
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: 50,
+            align: 'center',
+            fixed: 'left'
+          },
+
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: '任务名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'claimTime',
+            label: '开始时间',
+            align: 'center',
+
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'endTime',
+            label: '结束时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'owner',
+            label: '所有人',
+            align: 'center',
+
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'assignee',
+            label: '执行人',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 230,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+
         dicts: [],
         records: null,
         selectedRecords: [],
         total: 0,
+        userId: localStorage.getItem('userId'),
         listQuery: {
-          current: 1,
-          size: 10,
           processInstanceId: undefined,
           taskId: undefined,
           taskName: undefined,
@@ -362,19 +383,41 @@
         dialogViewVisible: false
       };
     },
-    created() {
-      if (this.$route.query && this.$route.query.processInstanceId) {
-        this.listQuery.processInstanceId = this.$route.query.processInstanceId;
+
+    watch: {
+      $route: {
+        handler(route) {
+          if (route.query && route.query.processInstanceId) {
+            this.listQuery.processInstanceId = route.query.processInstanceId;
+          } else {
+            this.listQuery.processInstanceId = undefined;
+          }
+          this.$refs.table?.reload({ page: 1 });
+        },
+        immediate: true
       }
-      this.list();
     },
     methods: {
-      list() {
-        getAction('/flowable/task/list', this.listQuery).then((res) => {
-          const { data } = res;
-          this.records = data.data.records;
-          this.total = data.data.total;
+      async datasource({ page, limit }) {
+        const res = await getAction('/flowable/task/list', {
+          ...this.listQuery,
+          current: page,
+          size: limit
         });
+        const { data } = res.data;
+        return {
+          list: data.records,
+          count: data.total
+        };
+      },
+      list() {
+        this.$refs.table.reload({ page: 1 });
+
+        // getAction('/flowable/task/list', this.listQuery).then((res) => {
+        //   const { data } = res;
+        //   this.records = data.data.records;
+        //   this.total = data.data.total;
+        // });
       },
       btnQuery() {
         this.listQuery.current = 1;
@@ -382,8 +425,6 @@
       },
       btnReset() {
         this.listQuery = {
-          current: 1,
-          size: 10,
           processInstanceId: undefined,
           taskId: undefined,
           taskName: undefined,
@@ -412,7 +453,7 @@
       btnViewTask(row) {
         getAction('/flowable/task/queryById', { taskId: row.id }).then(
           (res) => {
-            const { data } = res;
+            const { data } = res.data;
             this.taskDetailData = Object.assign({}, data);
             this.dialogTaskDetailVisible = true;
           }
@@ -430,8 +471,8 @@
       },
       btnUnclaim(row) {
         putAction('/flowable/task/unclaim', { taskId: row.id }).then(
-          ({ msg }) => {
-            Message.success(msg);
+          ({ data }) => {
+            Message.success(data.message);
             this.list();
           }
         );

src/views/flowable/taskDone/index.vue

@@ -1,165 +1,173 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox v-model="listQuery.processUnfinished"
-        >流程未办结</el-checkbox
-      >
-      <el-checkbox v-model="listQuery.processFinished">流程已办结</el-checkbox>
-    </div>
-    <div class="filter-container">
-      <el-input
-        v-model="listQuery.processInstanceId"
-        placeholder="流程实例ID"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.taskName"
-        placeholder="任务名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.processInstanceBusinessKey"
-        placeholder="业务主键Key"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-date-picker
-        v-model="listQuery.taskCreatedAfter"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="创建时间开始"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskCreatedBefore"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="创建时间结束"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskCompletedAfter"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="完成时间开始"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskCompletedBefore"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        placeholder="完成时间结束"
-        type="datetime"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-dropdown
-        split-button
-        type="primary"
-        @click="btnQuery"
-        class="filter-item"
-      >
-        <i class="el-icon-search el-icon--left"></i>查询
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
-            >重置</el-dropdown-item
-          >
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-    <el-table
-      :data="records"
-      border
-      fit
-      highlight-current-row
-      style="width: 99%"
-      :cell-style="{ padding: '3px' }"
-    >
-      <el-table-column
-        label="流程实例名称"
-        prop="processInstanceName"
-        align="center"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.processInstanceName }}</span></template
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="filter-container">
+        <el-checkbox v-model="listQuery.processUnfinished"
+          >流程未办结</el-checkbox
         >
-      </el-table-column>
-      <el-table-column label="任务名称" prop="name" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.name }}</span></template
+        <el-checkbox v-model="listQuery.processFinished"
+          >流程已办结</el-checkbox
         >
-      </el-table-column>
-      <el-table-column
-        label="开始时间"
-        prop="createTime"
-        align="center"
-        width="165px"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.createTime }}</span></template
+      </div>
+      <div class="filter-container">
+        <el-input
+          v-model="listQuery.processInstanceId"
+          placeholder="流程实例ID"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.taskName"
+          placeholder="任务名称"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.processInstanceBusinessKey"
+          placeholder="业务主键Key"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-date-picker
+          v-model="listQuery.taskCreatedAfter"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="创建时间开始"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskCreatedBefore"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="创建时间结束"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskCompletedAfter"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="完成时间开始"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskCompletedBefore"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="完成时间结束"
+          type="datetime"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-dropdown
+          split-button
+          type="primary"
+          @click="btnQuery"
+          class="filter-item"
         >
-      </el-table-column>
-      <el-table-column
-        label="完成时间"
-        prop="endTime"
-        align="center"
-        width="165px"
+          <i class="el-icon-search el-icon--left"></i>查询
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
+              >重置</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <el-table
+        :data="records"
+        border
+        fit
+        highlight-current-row
+        style="width: 99%"
+        :cell-style="{ padding: '3px' }"
       >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.endTime }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="工作耗时" prop="workTimeInMillis" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.workTimeInMillis }}</span></template
+        <el-table-column
+          label="流程实例名称"
+          prop="processInstanceName"
+          align="center"
         >
-      </el-table-column>
-      <el-table-column label="总耗时" prop="durationInMillis" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.durationInMillis }}</span></template
+          <template slot-scope="scope"
+            ><span>{{ scope.row.processInstanceName }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="任务名称" prop="name" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.name }}</span></template
+          >
+        </el-table-column>
+        <el-table-column
+          label="开始时间"
+          prop="createTime"
+          align="center"
+          width="165px"
         >
-      </el-table-column>
-      <el-table-column label="所有人" prop="owner" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.owner }}</span></template
+          <template slot-scope="scope"
+            ><span>{{ scope.row.createTime }}</span></template
+          >
+        </el-table-column>
+        <el-table-column
+          label="完成时间"
+          prop="endTime"
+          align="center"
+          width="165px"
         >
-      </el-table-column>
-      <el-table-column label="执行人" prop="assignee" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.assignee }}</span></template
+          <template slot-scope="scope"
+            ><span>{{ scope.row.endTime }}</span></template
+          >
+        </el-table-column>
+        <el-table-column
+          label="工作耗时"
+          prop="workTimeInMillis"
+          align="center"
         >
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template slot-scope="{ row }">
-          <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-view"
-                @click.native="btnView(row.processInstanceId)"
-                >查看详情
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :current.sync="listQuery.current"
-      :size.sync="listQuery.size"
-      @pagination="list"
-    />
+          <template slot-scope="scope"
+            ><span>{{ scope.row.workTimeInMillis }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="总耗时" prop="durationInMillis" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.durationInMillis }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="所有人" prop="owner" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.owner }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="执行人" prop="assignee" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.assignee }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{ row }">
+            <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-view"
+                  @click.native="btnView(row.processInstanceId)"
+                  >查看详情
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :current.sync="listQuery.current"
+        :size.sync="listQuery.size"
+        @pagination="list"
+      />
+    </el-card>
 
     <process-detail
       v-if="dialogViewVisible"

src/views/flowable/taskTodo/index.vue

@@ -1,146 +1,148 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <!--<el-input v-model="listQuery.processInstanceId" placeholder="流程实例ID" style="width: 200px;"
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="filter-container">
+        <!--<el-input v-model="listQuery.processInstanceId" placeholder="流程实例ID" style="width: 200px;"
                       class="filter-item" @keyup.enter.native="btnQuery"/>-->
-      <el-input
-        v-model="listQuery.taskName"
-        placeholder="任务名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-input
-        v-model="listQuery.processInstanceBusinessKey"
-        placeholder="业务主键Key"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="btnQuery"
-      />
-      <el-date-picker
-        v-model="listQuery.taskDueAfter"
-        value-format="yyyy-MM-dd"
-        placeholder="到期日开始"
-        type="date"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-date-picker
-        v-model="listQuery.taskDueBefore"
-        value-format="yyyy-MM-dd"
-        placeholder="到期日结束"
-        type="date"
-        style="width: 200px"
-        class="filter-item"
-      ></el-date-picker>
-      <el-dropdown
-        split-button
-        type="primary"
-        @click="btnQuery"
-        class="filter-item"
-      >
-        <i class="el-icon-search el-icon--left"></i>查询
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
-            >重置</el-dropdown-item
-          >
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-    <el-table
-      :data="records"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      :cell-style="{ padding: '3px' }"
-    >
-      <el-table-column
-        label="流程实例名称"
-        prop="processInstanceName"
-        align="center"
-      >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.processInstanceName }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="任务名称" prop="name" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.name }}</span></template
+        <el-input
+          v-model="listQuery.taskName"
+          placeholder="任务名称"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-input
+          v-model="listQuery.processInstanceBusinessKey"
+          placeholder="业务主键Key"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="btnQuery"
+        />
+        <el-date-picker
+          v-model="listQuery.taskDueAfter"
+          value-format="yyyy-MM-dd"
+          placeholder="到期日开始"
+          type="date"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-date-picker
+          v-model="listQuery.taskDueBefore"
+          value-format="yyyy-MM-dd"
+          placeholder="到期日结束"
+          type="date"
+          style="width: 200px"
+          class="filter-item"
+        ></el-date-picker>
+        <el-dropdown
+          split-button
+          type="primary"
+          @click="btnQuery"
+          class="filter-item"
         >
-      </el-table-column>
-      <el-table-column
-        label="开始时间"
-        prop="createTime"
-        align="center"
-        width="165px"
+          <i class="el-icon-search el-icon--left"></i>查询
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
+              >重置</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <el-table
+        :data="records"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+        :cell-style="{ padding: '3px' }"
       >
-        <template slot-scope="scope"
-          ><span>{{ scope.row.createTime }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="到期日期" prop="dueDate" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.dueDate }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="所有人" prop="owner" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.owner }}</span></template
+        <el-table-column
+          label="流程实例名称"
+          prop="processInstanceName"
+          align="center"
         >
-      </el-table-column>
-      <el-table-column label="执行人" prop="assignee" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.assignee }}</span></template
+          <template slot-scope="scope"
+            ><span>{{ scope.row.processInstanceName }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="任务名称" prop="name" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.name }}</span></template
+          >
+        </el-table-column>
+        <el-table-column
+          label="开始时间"
+          prop="createTime"
+          align="center"
+          width="165px"
         >
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template slot-scope="{ row }">
-          <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-view"
-                @click.native="btnView(row.processInstanceId)"
-                >查看详情
-              </el-dropdown-item>
-              <el-dropdown-item
-                v-if="row.assignee == null || row.assignee == ''"
-                icon="el-icon-edit"
-                divided
-                @click.native="btnClaim(row)"
-                >认领并执行
-              </el-dropdown-item>
-              <!-- v-if="
+          <template slot-scope="scope"
+            ><span>{{ scope.row.createTime }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="到期日期" prop="dueDate" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.dueDate }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="所有人" prop="owner" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.owner }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="执行人" prop="assignee" align="center">
+          <template slot-scope="scope"
+            ><span>{{ scope.row.assignee }}</span></template
+          >
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{ row }">
+            <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-view"
+                  @click.native="btnView(row.processInstanceId)"
+                  >查看详情
+                </el-dropdown-item>
+                <el-dropdown-item
+                  v-if="row.assignee == null || row.assignee == ''"
+                  icon="el-icon-edit"
+                  divided
+                  @click.native="btnClaim(row)"
+                  >认领并执行
+                </el-dropdown-item>
+                <!-- v-if="
                   row.assignee === $store.getters.sysUser.userId &&
                   row.endTime == null
                 " -->
-              <el-dropdown-item
-                icon="el-icon-edit"
-                divided
-                @click.native="btnUnclaim(row)"
-                >取消签收
-              </el-dropdown-item>
-              <el-dropdown-item
-                icon="el-icon-edit"
-                divided
-                @click.native="btnExcuteTask(row)"
-                >执行
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :current.sync="listQuery.current"
-      :size.sync="listQuery.size"
-      @pagination="list"
-    />
+                <el-dropdown-item
+                  icon="el-icon-edit"
+                  divided
+                  @click.native="btnUnclaim(row)"
+                  >取消签收
+                </el-dropdown-item>
+                <el-dropdown-item
+                  icon="el-icon-edit"
+                  divided
+                  @click.native="btnExcuteTask(row)"
+                  >执行
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :current.sync="listQuery.current"
+        :size.sync="listQuery.size"
+        @pagination="list"
+      />
+    </el-card>
 
     <!-- 执行任务 -->
     <execute-task
@@ -225,7 +227,8 @@
       },
       btnClaim(row) {
         putAction('/flowable/task/claim', { taskId: row.id })
-          .then(({ msg }) => {
+          .then(({ data }) => {
+            Message.success('认领' + data.message + '，请编辑执行');
             this.list();
             this.btnExcuteTask(row);
           })
@@ -235,8 +238,8 @@
       },
       btnUnclaim(row) {
         putAction('/flowable/task/unclaim', { taskId: row.id }).then(
-          ({ msg }) => {
-            Message.success(msg);
+          ({ data }) => {
+            Message.success(data.message);
             this.list();
           }
         );

src/views/system/role/components/role-edit.vue

@@ -31,7 +31,6 @@
           inactive-color="#ff4949"
           :active-value="1"
           :inactive-value="0"
-          @change="changeEnable(row)"
         >
         </el-switch>
       </el-form-item>
@@ -96,6 +95,7 @@
             return false;
           }
           this.loading = true;
+
           const saveOrUpdate = this.isUpdate ? putRoles : addRole;
           saveOrUpdate(this.form)
             .then((msg) => {
@@ -118,8 +118,8 @@
     watch: {
       visible(visible) {
         if (visible) {
-          if (this.data) {
-            // this.$util.assignObject(this.form, this.data);
+          if (this.data != null) {
+            this.$util.assignObject(this.form, this.data);
             this.form = this.data;
             this.isUpdate = true;
           } else {

src/views/system/role/index.vue

@@ -199,12 +199,14 @@
       },
       /* 显示编辑 */
       openEdit(row) {
-        this.current = row;
+        this.current = Object.assign({}, row);
+
         this.showEdit = true;
       },
       /* 显示分配权限 */
       openAuth(row) {
-        this.current = row;
+        this.current = Object.assign({}, row);
+
         this.showAuth = true;
       },
       /* 删除 */