完善流程

src/components/VueBpmn/index.vue

@@ -157,7 +157,6 @@
       },
       // 初始化流程图
       createNewDiagram(xml) {
-        console.log(xml);
         if (!xml) {
           // 初始化XML文本
           this.process.xml = newXml(
@@ -290,7 +289,7 @@
               xml = _this.replaceLtAndGt(xml);
               const process = _this.getProcess();
               _this.process.xml = xml;
-              console.log(xml);
+
               // eslint-disable-next-line vue/no-mutating-props
               _this.modelData.editor = xml;
               // eslint-disable-next-line vue/no-mutating-props

src/components/VueBpmn/mixins/mixinPanel.js

@@ -17,6 +17,7 @@ export default {
   },
   watch: {
     'formData.id': function (val) {
+      console.log('id变化了');
       this.updateProperty('id', val);
     },
     'formData.name': function (val) {

src/views/flowable/components/ExecuteTask.vue

@@ -190,7 +190,7 @@
         getAction('/flowable/task/executeTaskData', {
           taskId: this.executeTaskId
         }).then((res) => {
-          const { data } = res;
+          const { data } = res.data;
           this.startUserId = data.startUserId;
           this.showBusinessKey = data.showBusinessKey;
           this.businessKey = data.businessKey;
@@ -199,7 +199,7 @@
           this.initiator = data.initiator;
           this.buttons = data.buttons ?? [];
           if (data.renderedStartForm) {
-            this.startFormJson = JSON.parse(data.renderedStartForm);
+            this.startFormJson = JSON.parse(data.renderedTaskForm);
             this.processInstanceFormData = JSON.parse(
               data.variables.processInstanceFormData
             );

src/views/flowable/components/ProcessDetail.vue

@@ -1,140 +1,218 @@
 <template>
-    <el-dialog title="查看详情" :visible.sync="dialogProcessDetailVisibleInChild" fullscreen>
-        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
-            <el-tab-pane label="过程意见" name="comments">
-                <el-table
-                        :data="comments"
-                        border
-                        fit
-                        highlight-current-row
-                        style="width: 100%;"
-                        :cell-style="{padding:'3px'}"
-                >
-                    <el-table-column label="任务节点" prop="taskName" align="center" width="165px">
-                        <template slot-scope="scope"><span>{{ scope.row.taskName }}</span></template>
-                    </el-table-column>
-                    <el-table-column label="操作类型" prop="typeDesc" align="center" width="80px">
-                        <template slot-scope="scope"><span>{{ scope.row.typeDesc }}</span></template>
-                    </el-table-column>
-                    <el-table-column label="参与人" prop="userName" align="center" width="80px">
-                        <template slot-scope="scope"><span>{{ scope.row.userName }}</span></template>
-                    </el-table-column>
-                    <el-table-column label="时间" prop="time" align="center" width="165px">
-                        <template slot-scope="scope"><span>{{ scope.row.time }}</span></template>
-                    </el-table-column>
-                    <el-table-column label="意见" prop="fullMessage" align="left">
-                        <template slot-scope="scope"><span>{{ scope.row.fullMessage }}</span></template>
-                    </el-table-column>
-                </el-table>
-            </el-tab-pane>
-            <el-tab-pane label="流程表单" name="processIntanceForm">
-                <div v-if="generateStartFormVisible">
-                    <form-parser :data="startFormJson" :value="variables" ref="generateStartForm">
-                    </form-parser>
-                </div>
-                <el-form label-width="100px" v-if="showBusinessKey">
-                    <el-form-item label="业务主键Key:">
-                        <el-input v-model="businessKey" disabled/>
-                    </el-form-item>
-                </el-form>
-                <div v-if="!generateStartFormVisible&&!showBusinessKey">
-                    无
-                </div>
-            </el-tab-pane>
-            <el-tab-pane label="流程图" name="processIntanceImage">
-                <el-scrollbar><img :src="imagePath" alt="流程图"></el-scrollbar>
-            </el-tab-pane>
-        </el-tabs>
-
-    </el-dialog>
+  <el-dialog
+    title="查看详情"
+    :visible.sync="dialogProcessDetailVisibleInChild"
+    fullscreen
+  >
+    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+      <el-tab-pane label="过程意见" name="comments">
+        <el-table
+          :data="comments"
+          border
+          fit
+          highlight-current-row
+          style="width: 100%"
+          :cell-style="{ padding: '3px' }"
+        >
+          <el-table-column
+            label="任务节点"
+            prop="taskName"
+            align="center"
+            width="165px"
+          >
+            <template slot-scope="scope"
+              ><span>{{ scope.row.taskName }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            label="操作类型"
+            prop="typeDesc"
+            align="center"
+            width="80px"
+          >
+            <template slot-scope="scope"
+              ><span>{{ scope.row.typeDesc }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            label="参与人"
+            prop="userName"
+            align="center"
+            width="80px"
+          >
+            <template slot-scope="scope"
+              ><span>{{ scope.row.userName }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            label="时间"
+            prop="time"
+            align="center"
+            width="165px"
+          >
+            <template slot-scope="scope"
+              ><span>{{ scope.row.time }}</span></template
+            >
+          </el-table-column>
+          <el-table-column label="意见" prop="fullMessage" align="left">
+            <template slot-scope="scope"
+              ><span>{{ scope.row.fullMessage }}</span></template
+            >
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="流程表单" name="processIntanceForm">
+        <div v-if="generateStartFormVisible">
+          <form-parser
+            :data="startFormJson"
+            :value="variables"
+            ref="generateStartForm"
+          >
+          </form-parser>
+        </div>
+        <el-form label-width="100px" v-if="showBusinessKey">
+          <el-form-item label="业务主键Key:">
+            <el-input v-model="businessKey" disabled />
+          </el-form-item>
+        </el-form>
+        <div v-if="!generateStartFormVisible && !showBusinessKey"> 无 </div>
+      </el-tab-pane>
+      <el-tab-pane label="流程图" name="processIntanceImage">
+        <el-scrollbar> <img ref="img" alt="流程图" /></el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
 </template>
 
 <script>
-    import {getAction} from '@/api/flowable/manage'
-    // import {getToken} from '@/utils/auth'
-    import FormParser from '@/views/flowable/form/FormParser'
+  import { getAction } from '@/api/flowable/manage';
+  import { getToken } from '@/utils/token-util';
 
-    export default {
-        name: 'ProcessDetail',
-        components: {FormParser},
-        props: {
-            visible: {
-                type: Boolean,
-                default: function () {
-                    return false
-                }
-            },
-            processInstanceId: {
-                type: String,
-                default: function () {
-                    return ''
-                }
-            }
-        },
-        computed: {
-            dialogProcessDetailVisibleInChild: {
-                get() {
-                    return this.visible
-                },
-                set(val) {
-                    this.$emit('update:visible', val)
-                }
-            }
+  import FormParser from '@/views/flowable/form/FormParser';
+
+  export default {
+    name: 'ProcessDetail',
+    components: { FormParser },
+    props: {
+      visible: {
+        type: Boolean,
+        default: function () {
+          return false;
+        }
+      },
+      processInstanceId: {
+        type: String,
+        default: function () {
+          return '';
+        }
+      }
+    },
+    computed: {
+      dialogProcessDetailVisibleInChild: {
+        get() {
+          return this.visible;
         },
-        data() {
-            return {
-                activeName: 'comments',
-                comments: [],
-                imagePath: '',
-                isShowProcessInstanceForm: false,
-                generateStartFormVisible: false,
-                startFormJson: undefined,
-                variables: undefined,
-                showBusinessKey: false,
-                businessKey: undefined
+        set(val) {
+          this.$emit('update:visible', val);
+        }
+      }
+    },
+    data() {
+      return {
+        activeName: 'comments',
+        comments: [],
+        imagePath: '',
+        isShowProcessInstanceForm: false,
+        generateStartFormVisible: false,
+        startFormJson: undefined,
+        variables: undefined,
+        showBusinessKey: false,
+        businessKey: undefined
+      };
+    },
+    created() {
+      this.init();
+    },
+    methods: {
+      init() {
+        this.listComments();
+      },
+      getImage(url) {
+        let that = this;
+        that.$nextTick(() => {
+          let request = new XMLHttpRequest();
+          request.responseType = 'blob';
+          request.open('get', url, true);
+          // 添加自定义请求头
+          request.setRequestHeader(
+            'Authorization',
+            localStorage.getItem('access_token')
+          );
+          request.onreadystatechange = (e) => {
+            if (
+              request.readyState == XMLHttpRequest.DONE &&
+              request.status == 200
+            ) {
+              console.log(request);
+              that.$refs.img.src = URL.createObjectURL(request.response);
+              URL.createObjectURL(request.response);
+
+              that.$refs.img.onload = () => {
+                that.$refs.img && URL.revokeObjectURL(that.$refs.img.src);
+              };
             }
-        },
-        created() {
-            this.init()
-        },
-        methods: {
-            init() {
-                this.listComments()
-            },
-            handleClick(tab, event) {
-                if (tab.name == 'processIntanceForm') {
-                    this.showProcessInstanceForm();
-                } else if (tab.name == 'processIntanceImage') {
-                    this.showImage();
-                }
-            },
-            showProcessInstanceForm() {
-                if (!this.isShowProcessInstanceForm) {
-                    getAction('/flowable/processInstance/formData', {processInstanceId: this.processInstanceId}).then(res => {
-                        const {data} = res
-                        this.showBusinessKey = data.showBusinessKey
-                        this.businessKey = data.businessKey
-                        if (data && data.renderedStartForm) {
-                            this.startFormJson = JSON.parse(data.renderedStartForm)
-                            this.variables = JSON.parse(data.variables.processInstanceFormData)
-                            this.generateStartFormVisible = true
-                        }
-                        this.isShowProcessInstanceForm = true
-                    })
-                }
-            },
-            listComments() {
-                getAction('/flowable/processInstance/comments', {processInstanceId: this.processInstanceId}).then(res => {
-                    const {data} = res
-                    this.comments = data;
-                })
-            },
-            showImage() {
-                if (!this.imagePath) {
-                    this.imagePath = `${process.env.VUE_APP_BASE_API}` + '/flowable/processInstanceImage?processInstanceId=' + this.processInstanceId + '&access_token=' + getToken() + '&time=' + new Date()
-                }
+          };
+          request.send(null);
+        });
+      },
+      handleClick(tab, event) {
+        if (tab.name == 'processIntanceForm') {
+          this.showProcessInstanceForm();
+        } else if (tab.name == 'processIntanceImage') {
+          this.showImage();
+        }
+      },
+      showProcessInstanceForm() {
+        if (!this.isShowProcessInstanceForm) {
+          getAction('/flowable/processInstance/formData', {
+            processInstanceId: this.processInstanceId
+          }).then((res) => {
+            const { data } = res;
+            this.showBusinessKey = data.showBusinessKey;
+            this.businessKey = data.businessKey;
+            if (data && data.renderedStartForm) {
+              this.startFormJson = JSON.parse(data.renderedStartForm);
+              this.variables = JSON.parse(
+                data.variables.processInstanceFormData
+              );
+              this.generateStartFormVisible = true;
             }
+            this.isShowProcessInstanceForm = true;
+          });
+        }
+      },
+      listComments() {
+        getAction('/flowable/processInstance/comments', {
+          processInstanceId: this.processInstanceId
+        }).then((res) => {
+          const { data } = res;
+          this.comments = data;
+        });
+      },
+      showImage() {
+        if (!this.imagePath) {
+          this.imagePath =
+            `${process.env.VUE_APP_API_BASE_URL}` +
+            '/flowable/processInstanceImage?processInstanceId=' +
+            this.processInstanceId +
+            '&access_token=' +
+            getToken() +
+            '&time=' +
+            new Date();
+          console.log(this.imagePath);
+          this.getImage(this.imagePath);
         }
+      }
     }
+  };
 </script>
-

src/views/flowable/form/edit.vue

@@ -28,10 +28,22 @@
       };
     },
     created() {
-      if (this.$route.query && this.$route.query.formKey) {
-        this.formKey = this.$route.query.formKey;
+      // if (this.$route.query && this.$route.query.formKey) {
+      //   this.formKey = this.$route.query.formKey;
+      // }
+      // this.getFormData();
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          if (route.query && route.query.formKey) {
+            this.formKey = route.query.formKey;
+
+            this.getFormData();
+          }
+        },
+        immediate: true
       }
-      this.getFormData();
     },
     methods: {
       getFormData() {

src/views/flowable/form/index.vue

@@ -66,7 +66,15 @@
       </ele-pro-table>
     </el-card>
 
-    <el-dialog title="流程表单" :visible.sync="dialogFormVisible">
+    <ele-modal
+      width="30%"
+      :visible="dialogFormVisible"
+      :append-to-body="true"
+      :close-on-click-modal="true"
+      custom-class="ele-dialog-form"
+      title="流程表单"
+      @update:visible="updateVisible"
+    >
       <el-form
         ref="dataForm"
         :rules="rules"
@@ -85,7 +93,7 @@
           <el-input v-model="temp.formName" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <template v-slot:footer>
         <el-button icon="el-icon-close" @click="dialogFormVisible = false"
           >取消</el-button
         >
@@ -96,8 +104,8 @@
           @click="dialogStatus === 'create' ? createData() : updateData()"
           >确定
         </el-button>
-      </div>
-    </el-dialog>
+      </template>
+    </ele-modal>
   </div>
 </template>
 
@@ -170,9 +178,11 @@
     },
     created() {},
     methods: {
+      updateVisible() {
+        this.dialogFormVisible = false;
+      },
       /* 表格数据源 */
       async datasource({ page, limit, where, order }) {
-        // return pageRoles({ pageNum: page, size: limit, ...where });
         const res = await getAction('/flowable/form/list', {
           current: page,
           size: limit,

src/views/flowable/model/edit.vue

@@ -1,6 +1,11 @@
 <template>
   <div v-if="show">
-    <vue-bpmn @save="btnSave" :modelData="modelData" :isView="isView" />
+    <vue-bpmn
+      @save="btnSave"
+      :modelData="modelData"
+      :isView="isView"
+      :key="$route.query.id"
+    />
   </div>
 </template>
 <script>
@@ -25,32 +30,41 @@
       };
     },
     mounted() {
-      if (this.$route.query && this.$route.query.id) {
-        this.id = this.$route.query.id;
-      }
-      if (this.$route.query && this.$route.query.isView) {
-        this.isView = this.$route.query.isView === 'false' ? false : true;
+      // this.getModelData();
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          if (route.query && route.query.id) {
+            this.id = route.query.id;
+            this.getModelData();
+          }
+          if (route.query && route.query.isView) {
+            this.isView = route.query.isView === 'false' ? false : true;
+          }
+        },
+        immediate: true
       }
-      this.getModelData();
     },
+
     methods: {
       getModelData() {
         if (!this.id) {
           Message.error('id is null');
           return;
         }
-        getAction('/flowable/model/queryById', { id: this.id }).then(
-          ({ data }) => {
-            this.modelData.id = data.data.id;
-            this.modelData.editor = data.data.editor;
-            this.modelData.key = data.data.key;
-            this.modelData.name = data.data.name;
-            this.modelData.category = data.data.category;
-            this.modelData.description = data.data.description;
-            this.show = true;
-            console.log(this.modelData);
-          }
-        );
+        getAction('/flowable/model/queryById', {
+          id: this.id
+        }).then(({ data }) => {
+          this.modelData.id = data.data.id;
+          this.modelData.editor = data.data.editor;
+          this.modelData.key = data.data.key;
+          this.modelData.name = data.data.name;
+          this.modelData.category = data.data.category;
+          this.modelData.description = data.data.description;
+          this.show = true;
+          console.log(this.modelData, this.id);
+        });
       },
       btnSave(modelData) {
         putAction('/flowable/model/saveModelEditor', modelData).then((res) => {

src/views/flowable/model/index.vue

@@ -96,8 +96,15 @@
         </template>
       </ele-pro-table>
     </el-card>
-
-    <el-dialog title="流程模型" :visible.sync="dialogFormVisible">
+    <ele-modal
+      width="720px"
+      :visible="dialogFormVisible"
+      :append-to-body="true"
+      :close-on-click-modal="true"
+      custom-class="ele-dialog-form"
+      title="流程模型"
+      @update:visible="dialogFormVisible = false"
+    >
       <el-form
         ref="dataForm"
         :rules="rules"
@@ -123,7 +130,8 @@
           <el-input v-model="temp.tenantId" />
         </el-form-item> -->
       </el-form>
-      <div slot="footer" class="dialog-footer">
+
+      <template v-slot:footer>
         <el-button icon="el-icon-close" @click="dialogFormVisible = false"
           >取消</el-button
         >
@@ -134,8 +142,8 @@
           @click="dialogStatus === 'create' ? createData() : updateData()"
           >确定
         </el-button>
-      </div>
-    </el-dialog>
+      </template>
+    </ele-modal>
 
     <el-dialog title="流程导入" :visible.sync="dialogImportVisible">
       <!--<div class="filter-container">
@@ -270,7 +278,6 @@
     },
     created() {
       this.requestDict('流程分类');
-      this.list();
     },
     computed: {
       // 是否开启响应式布局
@@ -300,30 +307,7 @@
       reload(where) {
         this.$refs.table.reload({ page: 1, where });
       },
-      list() {
-        getAction('/flowable/model/list', this.listQuery).then((res) => {
-          console.log(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,
-          modelKey: undefined,
-          latestVersion: true,
-          modelName: undefined,
-          modelCategory: undefined
-        };
-        this.list();
-      },
+
       resetTemp() {
         this.temp = {
           id: undefined,
@@ -377,7 +361,7 @@
         postAction('/flowable/model/import', formData).then(({ msg }) => {
           this.dialogImportVisible = false;
           Message.success(msg);
-          this.list();
+          this.reload();
         });
       },
       //验证字符串是否是数字
@@ -402,7 +386,7 @@
             postAction('/flowable/model/save', this.temp).then(({ data }) => {
               this.dialogFormVisible = false;
               Message.success(data);
-              this.list();
+              this.reload();
             });
           }
         });
@@ -418,13 +402,14 @@
       btnCopy(row) {
         putAction('/flowable/model/copy', { id: row.id }).then((res) => {
           Message.success(res.data.message);
-          this.list();
+          this.reload();
         });
       },
       btnUpdateModel(row) {
         this.$router.push({
           path: '/flowable/model/edit',
           query: { id: row.id, isView: row.deployed }
+          // query: { id: row.id, isView: false }
         });
       },
       updateData() {
@@ -433,7 +418,7 @@
             putAction('/flowable/model/update', this.temp).then((res) => {
               this.dialogFormVisible = false;
               this.$message.success(res.data.message);
-              this.list();
+              this.reload();
             });
           }
         });
@@ -455,14 +440,14 @@
           console.log('res', res);
 
           Message.success('删除' + res.data.message);
-          this.list();
+          this.reload();
         });
       },
       btnDeploy(id) {
         postAction('/flowable/model/deploy', { id })
           .then((res) => {
             Message.success('部署' + res.data.message);
-            this.list();
+            this.reload();
           })
           .catch((err) => {
             console.log(err);

src/views/flowable/processDefinition.vue

@@ -1,113 +1,95 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-checkbox v-model="listQuery.latestVersion">最新版本</el-checkbox>
-      <el-checkbox v-model="listQuery.suspended">挂起的</el-checkbox>
-      <el-checkbox v-model="listQuery.active">激活的</el-checkbox>
-    </div>
-    <div class="filter-container">
-      <el-form
-        label-width="100px"
-        class="ele-form-search"
-        @keyup.enter.native="search"
-        @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
-                clearable
-                v-model="listQuery.processDefinitionName"
-                placeholder="请输入"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 6 }">
-            <el-form-item label="流程定义KEY:">
-              <el-input
-                clearable
-                v-model="listQuery.processDefinitionKey"
-                placeholder="请输入"
-              />
-            </el-form-item>
-          </el-col>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="filter-container">
+        <el-checkbox v-model="listQuery.latestVersion">最新版本</el-checkbox>
+        <el-checkbox v-model="listQuery.suspended">挂起的</el-checkbox>
+        <el-checkbox v-model="listQuery.active">激活的</el-checkbox>
+      </div>
+      <div class="filter-container">
+        <el-form
+          label-width="100px"
+          class="ele-form-search"
+          @keyup.enter.native="search"
+          @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
+                  clearable
+                  v-model="listQuery.processDefinitionName"
+                  placeholder="请输入"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 6 }">
+              <el-form-item label="流程定义KEY:">
+                <el-input
+                  clearable
+                  v-model="listQuery.processDefinitionKey"
+                  placeholder="请输入"
+                />
+              </el-form-item>
+            </el-col>
 
-          <el-col v-bind="styleResponsive ? { lg: 9, 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-col v-bind="styleResponsive ? { lg: 9, 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="btnImport"
-                class="filter-item"
-                >导入
-              </el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-    <el-table
-      :data="records"
-      ref="multipleTable"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      :cell-style="{ padding: '3px' }"
-    >
-      <el-table-column type="index" align="center" label="序号" width="50px">
-      </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="流程定义KEY" prop="key" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.key }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="流程定义分类" prop="category" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.category }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="版本" prop="version" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.version }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="状态" prop="suspended" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.suspended ? '挂起' : '激活' }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="表单key" prop="formKey" align="center">
-        <template slot-scope="scope"
-          ><span>{{ scope.row.formKey }}</span></template
-        >
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template slot-scope="{ row }">
+                <!-- <el-button
+                  icon="el-icon-plus"
+                  type="primary"
+                  @click="btnImport"
+                  class="filter-item"
+                  >导入
+                </el-button> -->
+              </div>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            icon="el-icon-plus"
+            type="primary"
+            @click="btnImport"
+            class="ele-btn-icon"
+            >导入
+          </el-button>
+        </template>
+        <template v-slot:category="{ row }">
+          <span v-html="getDictValue('流程分类', row.category)"></span>
+        </template>
+        <template v-slot:suspended="{ row }">
+          <span>{{ row.suspended ? '挂起' : '激活' }}</span>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
           <el-dropdown>
             <span class="el-dropdown-link"
               >操作<i class="el-icon-arrow-down el-icon--right"></i
@@ -164,15 +146,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
@@ -281,23 +256,83 @@
     postAction,
     putAction
   } from '@/api/flowable/manage';
+  import dictMixins from '@/mixins/dictMixins';
   import { Message } from 'element-ui';
 
   import ProcessImage from './components/ProcessImage';
   import ProcessDefinitionIdentityLink from './ProcessDefinitionIdentityLink';
 
   export default {
+    mixins: [dictMixins],
+
     name: 'FlowableProcessDefinition',
     components: { ProcessImage, ProcessDefinitionIdentityLink, Pagination },
     data() {
       return {
-        dicts: [],
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: 50,
+            align: 'center',
+            fixed: 'left'
+          },
+
+          {
+            prop: 'name',
+            label: '流程定义名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'key',
+            label: '流程定义KEY',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'category',
+            label: '流程定义分类',
+            align: 'center',
+            slot: 'category',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'version',
+            label: '版本',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'suspended',
+            label: '状态',
+            align: 'center',
+            slot: 'suspended',
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'formKey',
+            label: '表单key',
+            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,
           processDefinitionId: undefined,
           processDefinitionName: undefined,
           processDefinitionKey: undefined,
@@ -309,7 +344,7 @@
         dialogImportVisible: false,
         // importTenantId: '',
         dialogProcessImageVisible: false,
-        imagePath: '',
+
         // formJson: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
         formJson: undefined,
         temp: {
@@ -330,7 +365,7 @@
       };
     },
     created() {
-      this.list();
+      this.requestDict('流程分类');
     },
     computed: {
       // 是否开启响应式布局
@@ -339,20 +374,29 @@
       }
     },
     methods: {
-      list() {
-        getAction('/flowable/processDefinition/list', this.listQuery).then(
-          (res) => {
-            if (res.data.code == 0) {
-              const { data } = res.data;
-              this.records = data.records;
-              this.total = data.total;
-            }
-          }
-        );
+      /* 表格数据源 */
+      async datasource({ page, limit }) {
+        // return pageRoles({ pageNum: page, size: limit, ...where });
+        const res = await getAction('/flowable/processDefinition/list', {
+          current: page,
+          size: limit,
+          ...this.listQuery
+        });
+
+        const { data } = res.data;
+        return {
+          list: data.records,
+          count: data.total
+        };
+        // return data;
+      },
+      /* 刷新表格 */
+      reload() {
+        this.$refs.table.reload({ page: 1 });
       },
+
       btnQuery() {
-        this.listQuery.current = 1;
-        this.list();
+        this.reload();
       },
       btnReset() {
         this.listQuery = {
@@ -365,7 +409,7 @@
           suspended: false,
           active: false
         };
-        this.list();
+        this.reload();
       },
       btnView(row) {
         this.temp = Object.assign({}, row);
@@ -396,7 +440,7 @@
           cascade: cascade
         }).then(({ data }) => {
           Message.success('删除' + data.message);
-          this.list();
+          this.reload();
         });
       },
       btnSuspendOrActivate(processDefinitionId, suspend) {
@@ -405,7 +449,7 @@
           processDefinitionId
         }).then((res) => {
           Message.success((suspend ? '激活' : '挂起') + res.data.message);
-          this.list();
+          this.reload();
         });
       },
       btnImport() {
@@ -436,7 +480,7 @@
           ({ msg }) => {
             this.dialogImportVisible = false;
             Message.success(msg);
-            this.list();
+            this.reload();
           }
         );
       },
@@ -449,15 +493,6 @@
         );
       },
       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;
       },
@@ -465,9 +500,6 @@
         this.selectedProcessDefinitionId = row.id;
         this.selectedProcessDefinitionName = row.name;
         this.dialogProcessDefinitionIdentityLinkVisible = true;
-      },
-      selectionChange(selectedRecords) {
-        this.selectedRecords = selectedRecords;
       }
     }
   };

src/views/flowable/processInstance.vue

@@ -351,7 +351,7 @@
         importTenantId: '',
         dialogProcessImageVisible: false,
         processInstanceId: '',
-        imagePath: '',
+
         temp: {
           id: undefined,
           businessKey: '',

src/views/flowable/startMyProcess/index.vue

@@ -63,13 +63,8 @@
       @pagination="list"
     />
 
-    <el-dialog
-      title="流程图"
-      fullscreen
-      :visible.sync="dialogImageVisible"
-      width="80%"
-    >
-      <img :src="imagePath" alt="流程图" />
+    <el-dialog title="流程图" :visible.sync="dialogImageVisible" width="60%">
+      <img ref="img" alt="流程图" />
     </el-dialog>
 
     <start-process
@@ -126,6 +121,34 @@
       this.list();
     },
     methods: {
+      getImage(url) {
+        let that = this;
+        that.$nextTick(() => {
+          let request = new XMLHttpRequest();
+          request.responseType = 'blob';
+          request.open('get', url, true);
+          // 添加自定义请求头
+          request.setRequestHeader(
+            'Authorization',
+            localStorage.getItem('access_token')
+          );
+          request.onreadystatechange = (e) => {
+            if (
+              request.readyState == XMLHttpRequest.DONE &&
+              request.status == 200
+            ) {
+              console.log(request);
+              that.$refs.img.src = URL.createObjectURL(request.response);
+              URL.createObjectURL(request.response);
+
+              that.$refs.img.onload = () => {
+                that.$refs.img && URL.revokeObjectURL(that.$refs.img.src);
+              };
+            }
+          };
+          request.send(null);
+        });
+      },
       list() {
         getAction(
           '/flowable/processDefinition/listMyself',
@@ -157,7 +180,7 @@
       },
       btnImage(processDefinitionId) {
         this.imagePath =
-          `${process.env.VUE_APP_BASE_API}` +
+          `${process.env.VUE_APP_API_BASE_URL}` +
           '/flowable/processDefinition/image?processDefinitionId=' +
           processDefinitionId +
           '&access_token=' +
@@ -165,6 +188,7 @@
           '&time=' +
           new Date();
         this.dialogImageVisible = true;
+        this.getImage(this.imagePath);
       },
       btnStartInstance(row) {
         this.processDefinition = row;

src/views/flowable/taskTodo/index.vue

@@ -113,22 +113,17 @@
                 @click.native="btnClaim(row)"
                 >认领并执行
               </el-dropdown-item>
-              <el-dropdown-item
-                v-if="
+              <!-- 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
-                v-if="
-                  row.endTime == null &&
-                  row.assignee != null &&
-                  row.assignee != ''
-                "
                 icon="el-icon-edit"
                 divided
                 @click.native="btnExcuteTask(row)"
@@ -201,13 +196,15 @@
     },
     created() {
       this.list();
+      console.log(this.$store.getters);
     },
     methods: {
       list() {
         getAction('/flowable/task/listTodo', this.listQuery).then((res) => {
-          const { data } = res.data;
-          this.records = data.records;
-          this.total = data.total;
+          const { data } = res;
+          console.log(data);
+          this.records = data.data.records;
+          this.total = data.data.total;
         });
       },
       btnQuery() {

vue.config.js

@@ -2,7 +2,7 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const { transformElementScss } = require('ele-admin/lib/utils/dynamic-theme');
 const path = require('path');
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, dir);
 }
 
@@ -22,10 +22,10 @@ module.exports = {
       '/api': {
         // target: 'http://192.168.3.51:86', // 测试
 
-        // target: 'http://192.168.3.35:8080', // kang杨威
+        target: 'http://192.168.3.35:8080', // kang杨威
         // target: 'http://192.168.3.25:8080', // 黄峥嵘
         // target: 'http://192.168.3.41:8080', // 何江鹏
-        target: 'http://192.168.3.33:8080', // 谢一平
+        // target: 'http://192.168.3.33:8080', // 谢一平
 
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
         pathRewrite: {
@@ -34,7 +34,7 @@ module.exports = {
       }
     }
   },
-  chainWebpack (config) {
+  chainWebpack(config) {
     config.plugins.delete('prefetch');
     // set svg-sprite-loader
     // config.module.rule('svg').exclude.add(resolve('./src/icons')).end();