From 7b6daed1d387f3401301cbadc0f9564f84fe8947 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 09 Jan 2024 16:15:38 +0800
Subject: [PATCH] 流程管理等页面,显示内容调整

---
 src/views/flow/manager.vue    |  613 ++++++++--------
 src/views/community/index.vue |    2 
 src/views/flow/follow.vue     |  376 +++++-----
 src/views/flow/deploy.vue     |  280 +++---
 src/views/flow/model.vue      |  871 +++++++++++------------
 src/views/district/index.vue  |    2 
 6 files changed, 1,060 insertions(+), 1,084 deletions(-)

diff --git a/src/views/community/index.vue b/src/views/community/index.vue
index ccb575f..8f3ed27 100644
--- a/src/views/community/index.vue
+++ b/src/views/community/index.vue
@@ -32,7 +32,7 @@
             datetime: "",
             selectionList: [],
             option: {
-                labelWidth: 120,
+                labelWidth: 96,
                 searchLabelWidth: 96,
                 searchShow: true,
                 searchMenuSpan: 3,
diff --git a/src/views/district/index.vue b/src/views/district/index.vue
index 4bce92b..bf2cc83 100644
--- a/src/views/district/index.vue
+++ b/src/views/district/index.vue
@@ -32,7 +32,7 @@
             datetime: "",
             selectionList: [],
             option: {
-                labelWidth: 120,
+                labelWidth: 96,
                 searchLabelWidth: 96,
                 searchShow: true,
                 searchMenuSpan: 3,
diff --git a/src/views/flow/deploy.vue b/src/views/flow/deploy.vue
index 7666177..3b64143 100644
--- a/src/views/flow/deploy.vue
+++ b/src/views/flow/deploy.vue
@@ -1,154 +1,154 @@
 <template>
-  <basic-container>
-    <avue-form ref="form" :option="option" v-model="form" :upload-before="uploadBefore" :upload-after="uploadAfter"/>
-  </basic-container>
+    <basic-container>
+        <avue-form ref="form" :option="option" v-model="form" :upload-before="uploadBefore" :upload-after="uploadAfter" />
+    </basic-container>
 </template>
 
 <script>
-  import {deployUpload} from "@/api/flow/flow";
-  import {flowCategory} from "@/util/flow";
+import { deployUpload } from "@/api/flow/flow"
+import { flowCategory } from "@/util/flow"
 
-  export default {
-    data() {
-      return {
-        form: {
-          flowCategory: '',
-          tenantId: '',
-          flowFile: [],
-          file: {},
-        },
-        option: {
-          labelWidth: 120,
-          menuBtn: false,
-          column: [
-            {
-              label: '流程类型',
-              prop: 'flowCategory',
-              type: 'select',
-              dicUrl: `/api/blade-system/dict/dictionary?code=flow`,
-              props: {
-                label: "dictValue",
-                value: "dictKey"
-              },
-              row: true,
-              span: 12,
-              dataType: "number",
-              rules: [
-                {
-                  required: true,
-                  message: '请选择流程类型',
-                  trigger: 'blur'
-                }
-              ]
+export default {
+    data () {
+        return {
+            form: {
+                flowCategory: '',
+                tenantId: '',
+                flowFile: [],
+                file: {},
             },
-            {
-              label: "流程模式",
-              prop: "flowMode",
-              type: "radio",
-              dicData: [
-                {
-                  label: "通用流程",
-                  value: 1
-                },
-                {
-                  label: "定制流程",
-                  value: 2
-                }
-              ],
-              value: 1,
-              row: true,
-              span: 12,
-              rules: [
-                {
-                  required: true,
-                  message: '请选择流程模式',
-                  trigger: 'blur'
-                }
-              ],
-            },
-            {
-              label: "所属租户",
-              prop: "tenantId",
-              type: "tree",
-              multiple: true,
-              dicUrl: "/api/blade-system/tenant/select",
-              props: {
-                label: "tenantName",
-                value: "tenantId"
-              },
-              display: false,
-              row: true,
-              span: 12,
-              rules: [
-                {
-                  required: true,
-                  message: '请选择所属租户',
-                  trigger: 'blur'
-                }
-              ],
-            },
-            {
-              label: '附件上传',
-              prop: 'flowFile',
-              type: 'upload',
-              loadText: '附件上传中,请稍等',
-              span: 24,
-              propsHttp: {
-                res: 'data'
-              },
-              tip: '请上传 bpmn20.xml 标准格式文件',
-              action: '/api/blade-flow/manager/check-upload'
-            },
-          ]
+            option: {
+                labelWidth: 96,
+                menuBtn: false,
+                column: [
+                    {
+                        label: '流程类型',
+                        prop: 'flowCategory',
+                        type: 'select',
+                        dicUrl: `/api/blade-system/dict/dictionary?code=flow`,
+                        props: {
+                            label: "dictValue",
+                            value: "dictKey"
+                        },
+                        row: true,
+                        span: 12,
+                        dataType: "number",
+                        rules: [
+                            {
+                                required: true,
+                                message: '请选择流程类型',
+                                trigger: 'blur'
+                            }
+                        ]
+                    },
+                    {
+                        label: "流程模式",
+                        prop: "flowMode",
+                        type: "radio",
+                        dicData: [
+                            {
+                                label: "通用流程",
+                                value: 1
+                            },
+                            {
+                                label: "定制流程",
+                                value: 2
+                            }
+                        ],
+                        value: 1,
+                        row: true,
+                        span: 12,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请选择流程模式',
+                                trigger: 'blur'
+                            }
+                        ],
+                    },
+                    {
+                        label: "所属租户",
+                        prop: "tenantId",
+                        type: "tree",
+                        multiple: true,
+                        dicUrl: "/api/blade-system/tenant/select",
+                        props: {
+                            label: "tenantName",
+                            value: "tenantId"
+                        },
+                        display: false,
+                        row: true,
+                        span: 12,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请选择所属租户',
+                                trigger: 'blur'
+                            }
+                        ],
+                    },
+                    {
+                        label: '附件上传',
+                        prop: 'flowFile',
+                        type: 'upload',
+                        loadText: '附件上传中,请稍等',
+                        span: 24,
+                        propsHttp: {
+                            res: 'data'
+                        },
+                        tip: '请上传 bpmn20.xml 标准格式文件',
+                        action: '/api/blade-flow/manager/check-upload'
+                    },
+                ]
+            }
         }
-      }
     },
     watch: {
-      'form.flowMode'() {
-        this.$refs.form.option.column.filter(item => {
-          if (item.prop === "tenantId") {
-            item.display = this.form.flowMode === 2;
-          }
-        });
-      }
+        'form.flowMode' () {
+            this.$refs.form.option.column.filter(item => {
+                if (item.prop === "tenantId") {
+                    item.display = this.form.flowMode === 2
+                }
+            })
+        }
     },
     methods: {
-      uploadBefore(file, done) {
-        this.$message.success('部署开始');
-        this.file = file;
-        done()
-      },
-      uploadAfter(res, done, loading) {
-        if (!this.form.flowCategory) {
-          this.$message.warning('清先选择流程类型');
-          loading()
-          return false;
-        }
-        if (this.form.flowMode === 2 && !this.form.tenantId) {
-          this.$message.warning('清先选择对应租户');
-          loading();
-          return false;
-        }
-        if (res.success) {
-          deployUpload(
-            flowCategory(this.form.flowCategory),
-            (this.form.tenantId) ? this.form.tenantId.join(",") : "",
-            [this.file]
-          ).then(res => {
-            const data = res.data;
-            if (data.success) {
-              done()
-            } else {
-              this.$message.error(data.msg);
-              loading()
+        uploadBefore (file, done) {
+            this.$message.success('部署开始')
+            this.file = file
+            done()
+        },
+        uploadAfter (res, done, loading) {
+            if (!this.form.flowCategory) {
+                this.$message.warning('清先选择流程类型')
+                loading()
+                return false
             }
-          })
-        } else {
-          this.$message.warning('请上传 bpmn20.xml 标准格式文件');
-          loading()
-          return false;
-        }
-      },
+            if (this.form.flowMode === 2 && !this.form.tenantId) {
+                this.$message.warning('清先选择对应租户')
+                loading()
+                return false
+            }
+            if (res.success) {
+                deployUpload(
+                    flowCategory(this.form.flowCategory),
+                    (this.form.tenantId) ? this.form.tenantId.join(",") : "",
+                    [this.file]
+                ).then(res => {
+                    const data = res.data
+                    if (data.success) {
+                        done()
+                    } else {
+                        this.$message.error(data.msg)
+                        loading()
+                    }
+                })
+            } else {
+                this.$message.warning('请上传 bpmn20.xml 标准格式文件')
+                loading()
+                return false
+            }
+        },
     }
-  }
+}
 </script>
diff --git a/src/views/flow/follow.vue b/src/views/flow/follow.vue
index fbaa282..37f2054 100644
--- a/src/views/flow/follow.vue
+++ b/src/views/flow/follow.vue
@@ -1,203 +1,209 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               ref="crud"
-               v-model="form"
-               :page.sync="page"
-               :permission="permissionList"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
-      <template slot-scope="{row}"
-                slot="suspensionState">
-        <el-tag>{{row.suspensionState===1?'激活':'挂起'}}</el-tag>
-      </template>
-    </avue-crud>
-    <el-dialog title="流程删除"
-               append-to-body
-               :visible.sync="followBox"
-               width="20%">
-      <el-form :model="form"
-               ref="form"
-               label-width="80px">
-        <el-form-item label="删除理由">
-          <el-input v-model="deleteReason"
-                    placeholder="请输入删除理由" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="followBox = false">关 闭</el-button>
-        <el-button type="primary"
-                   @click="handleDelete">确 定</el-button>
-      </span>
-    </el-dialog>
-  </basic-container>
+    <basic-container>
+        <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" :page.sync="page"
+            :permission="permissionList" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
+            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
+            @refresh-change="refreshChange" @on-load="onLoad">
+
+            <template slot-scope="{ row, size }" slot="suspensionState">
+                <el-tag :size="size" :type="showStatus(row.suspensionState).type"
+                    v-text="showStatus(row.suspensionState).text">
+                </el-tag>
+            </template>
+
+        </avue-crud>
+
+        <el-dialog title="流程删除" append-to-body :visible.sync="followBox" width="20%">
+            <el-form :model="form" ref="form" label-width="80px">
+                <el-form-item label="删除理由">
+                    <el-input v-model="deleteReason" placeholder="请输入删除理由" />
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="followBox = false">关 闭</el-button>
+                <el-button type="primary" @click="handleDelete">确 定</el-button>
+            </span>
+        </el-dialog>
+    </basic-container>
 </template>
 
 <script>
-  import {mapGetters} from "vuex";
-  import {followList, deleteProcessInstance} from "@/api/flow/flow";
+import { mapGetters } from "vuex"
+import { followList, deleteProcessInstance } from "@/api/flow/flow"
 
-  export default {
-    data() {
-      return {
-        form: {},
-        selectionId: '',
-        processInstanceId: '',
-        selectionList: [],
-        query: {},
-        loading: true,
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        followBox: false,
-        deleteReason: '',
-        option: {
-          height: 'auto',
-          calcHeight: 30,
-          tip: false,
-          searchShow: true,
-          searchMenuSpan: 6,
-          border: true,
-          index: true,
-          selection: true,
-          editBtn: false,
-          addBtn: false,
-          viewBtn: false,
-          dialogWidth: 900,
-          menuWidth: 100,
-          dialogClickModal: false,
-          column: [
-            {
-              label: "执行id",
-              prop: "executionId",
-              search: true,
-              width: 320,
+export default {
+    data () {
+        return {
+            form: {},
+            selectionId: '',
+            processInstanceId: '',
+            selectionList: [],
+            query: {},
+            loading: true,
+            page: {
+                pageSize: 10,
+                currentPage: 1,
+                total: 0
             },
-            {
-              label: "流程key",
-              prop: "processDefinitionKey",
-              search: true,
+            followBox: false,
+            deleteReason: '',
+            option: {
+                labelWidth: 84,
+                searchLabelWidth: 84,
+                searchShow: true,
+                searchMenuSpan: 3,
+                menuWidth: 80,
+
+                height: 'auto',
+                calcHeight: 30,
+                tip: false,
+                border: true,
+                index: true,
+                selection: true,
+                editBtn: false,
+                addBtn: false,
+                viewBtn: false,
+                dialogWidth: 900,
+                dialogClickModal: false,
+                column: [
+                    {
+                        label: "执行id",
+                        prop: "executionId",
+                        searchSpan: 4,
+                        search: true,
+                        width: 320,
+                    },
+                    {
+                        label: "流程key",
+                        prop: "processDefinitionKey",
+                        searchSpan: 4,
+                        search: true,
+                    },
+                    {
+                        label: "实例id",
+                        prop: "processInstanceId",
+                        searchSpan: 4,
+                        search: true,
+                        width: 320,
+                    },
+                    {
+                        width: 100,
+                        label: "状态",
+                        prop: "suspensionState",
+                        slot: true,
+                    },
+                    {
+                        width: 110,
+                        label: "发起人",
+                        prop: "startUser",
+                    },
+                    {
+                        width: 144,
+                        label: '开始时间',
+                        prop: 'startTime',
+                    },
+                ]
             },
-            {
-              label: "实例id",
-              prop: "processInstanceId",
-              search: true,
-              width: 320,
-            },
-            {
-              label: "状态",
-              prop: "suspensionState",
-              slot: true,
-              width: 80,
-            },
-            {
-              label: "发起人",
-              prop: "startUser",
-              width: 100,
-            },
-            {
-              label: '开始时间',
-              prop: 'startTime',
-              width: 165,
-            },
-          ]
-        },
-        data: []
-      };
+            data: []
+        }
     },
     computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          delBtn: this.vaildData(this.permission.flow_follow_delete, false),
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
-        });
-        return ids.join(",");
-      }
+        ...mapGetters(["permission"]),
+        permissionList () {
+            return {
+                delBtn: this.vaildData(this.permission.flow_follow_delete, false),
+            }
+        },
+        ids () {
+            let ids = []
+            this.selectionList.forEach(ele => {
+                ids.push(ele.id)
+            })
+            return ids.join(",")
+        },
+        showStatus () {
+            return (data) => {
+                if (data == 1) {
+                    return {
+                        text: '激活',
+                        type: 'success'
+                    }
+                } else {
+                    return {
+                        text: '挂起',
+                        type: 'info'
+                    }
+                }
+            }
+        }
     },
     methods: {
-      rowDel(row) {
-        this.followBox = true;
-        this.selectionId = row.id;
-        this.processInstanceId = row.processInstanceId;
-      },
-      handleDelete() {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return deleteProcessInstance({deleteReason: this.deleteReason, processInstanceId: this.processInstanceId});
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.followBox = false;
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      currentChange(currentPage) {
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize) {
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        this.loading = true;
-        followList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
-        });
-      }
+        rowDel (row) {
+            this.followBox = true
+            this.selectionId = row.id
+            this.processInstanceId = row.processInstanceId
+        },
+        handleDelete () {
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return deleteProcessInstance({ deleteReason: this.deleteReason, processInstanceId: this.processInstanceId })
+                })
+                .then(() => {
+                    this.onLoad(this.page)
+                    this.followBox = false
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                })
+        },
+        searchReset () {
+            this.query = {}
+            this.onLoad(this.page)
+        },
+        searchChange (params, done) {
+            this.query = params
+            this.page.currentPage = 1
+            this.onLoad(this.page, params)
+            done()
+        },
+        selectionChange (list) {
+            this.selectionList = list
+        },
+        selectionClear () {
+            this.selectionList = []
+            this.$refs.crud.toggleSelection()
+        },
+        currentChange (currentPage) {
+            this.page.currentPage = currentPage
+        },
+        sizeChange (pageSize) {
+            this.page.pageSize = pageSize
+        },
+        refreshChange () {
+            this.onLoad(this.page, this.query)
+        },
+        onLoad (page, params = {}) {
+            this.loading = true
+            followList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+                const data = res.data.data
+                this.page.total = data.total
+                this.data = data.records
+                this.loading = false
+                this.selectionClear()
+            })
+        }
     }
-  };
+}
 </script>
 
 <style>
-  .none-border {
+.none-border {
     border: 0;
     background-color: transparent !important;
-  }
+}
 </style>
diff --git a/src/views/flow/manager.vue b/src/views/flow/manager.vue
index 8e48430..c8b9863 100644
--- a/src/views/flow/manager.vue
+++ b/src/views/flow/manager.vue
@@ -1,315 +1,340 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" :page.sync="page"
-      :permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
-      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
-      @refresh-change="refreshChange" @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-radio-group v-model="mode" size="small">
-          <el-radio-button label="1">通用流程</el-radio-button>
-          <el-radio-button label="2">定制流程</el-radio-button>
-        </el-radio-group>
-      </template>
-      <template slot-scope="scope" slot="menu">
-        <el-button type="text" size="small" icon="el-icon-refresh" v-if="permission.flow_manager_state"
-          @click.stop="handleState(scope.row,scope.index)">变更状态
-        </el-button>
-        <el-button type="text" size="small" icon="el-icon-search" v-if="permission.flow_manager_image"
-          @click.stop="handleImage(scope.row,scope.index)">流程图
-        </el-button>
-        <el-button type="text" size="small" icon="el-icon-delete" v-if="permission.flow_manager_remove"
-          @click.stop="handleSlotDelete(scope.row,scope.index)">删除
-        </el-button>
-      </template>
-      <template slot-scope="{row}" slot="tenantId">
-        <el-tag>{{row.tenantId===''?'通用':row.tenantId}}</el-tag>
-      </template>
-      <template slot-scope="{row}" slot="version">
-        <el-tag>v{{row.version}}</el-tag>
-      </template>
-      <template slot-scope="{row}" slot="suspensionState">
-        <el-tag>{{row.suspensionState===1?'激活':'挂起'}}</el-tag>
-      </template>
-      <template slot-scope="{row}" slot="category">
-        <el-tag>{{row.categoryName}}</el-tag>
-      </template>
-    </avue-crud>
-    <flow-design is-dialog :is-display.sync="flowBox" :process-definition-id="processDefinitionId"></flow-design>
-    <el-dialog title="流程变更" append-to-body :visible.sync="stateBox" width="20%">
-      <el-form :model="form" ref="form" label-width="80px">
-        <el-form-item label="流程状态">
-          <el-select v-model="flowState" placeholder="请选择" value="">
-            <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="stateBox = false">关 闭</el-button>
-        <el-button type="primary" @click="handleDoState">确 定</el-button>
-      </span>
-    </el-dialog>
-  </basic-container>
+    <basic-container>
+        <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" :page.sync="page"
+            :permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
+            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
+            @refresh-change="refreshChange" @on-load="onLoad">
+            <template slot="menuLeft">
+                <el-radio-group v-model="mode" size="small">
+                    <el-radio-button label="1">通用流程</el-radio-button>
+                    <el-radio-button label="2">定制流程</el-radio-button>
+                </el-radio-group>
+            </template>
+            <template slot-scope="{ row, size, index }" slot="menu">
+                <el-button type="text" :size="size" icon="el-icon-refresh" v-if="permission.flow_manager_state"
+                    @click.stop="handleState(row, index)">变更状态
+                </el-button>
+                <el-button type="text" :size="size" icon="el-icon-search" v-if="permission.flow_manager_image"
+                    @click.stop="handleImage(row, index)">流程图
+                </el-button>
+                <el-button type="text" :size="size" icon="el-icon-delete" v-if="permission.flow_manager_remove"
+                    @click.stop="handleSlotDelete(row, index)">删除
+                </el-button>
+            </template>
+            <template slot-scope="{ row, size }" slot="tenantId">
+                <el-tag :size="size">{{ row.tenantId === '' ? '通用' : row.tenantId }}</el-tag>
+            </template>
+            <template slot-scope="{ row, size }" slot="version">
+                <el-tag :size="size">v{{ row.version }}</el-tag>
+            </template>
+            <template slot-scope="{ row, size }" slot="suspensionState">
+                <el-tag :size="size" :type="showStatus(row.suspensionState).type"
+                    v-text="showStatus(row.suspensionState).text">
+                </el-tag>
+            </template>
+            <template slot-scope="{ row, size }" slot="category">
+                <el-tag :size="size">{{ row.categoryName }}</el-tag>
+            </template>
+        </avue-crud>
+        <flow-design is-dialog :is-display.sync="flowBox" :process-definition-id="processDefinitionId"></flow-design>
+        <el-dialog title="流程变更" append-to-body :visible.sync="stateBox" width="20%">
+            <el-form :model="form" ref="form" label-width="80px">
+                <el-form-item label="流程状态">
+                    <el-select v-model="flowState" placeholder="请选择" value="">
+                        <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="stateBox = false">关 闭</el-button>
+                <el-button type="primary" @click="handleDoState">确 定</el-button>
+            </span>
+        </el-dialog>
+    </basic-container>
 </template>
 
 <script>
-  import {
+import {
     mapGetters
-  } from "vuex";
-  import {
+} from "vuex"
+import {
     managerList,
     changeState,
     deleteDeployment
-  } from "@/api/flow/flow";
-  import {
+} from "@/api/flow/flow"
+import {
     flowCategory
-  } from "@/util/flow";
+} from "@/util/flow"
 
-  export default {
-    data() {
-      return {
-        form: {},
-        mode: '1',
-        selectionId: '',
-        selectionList: [],
-        query: {},
-        loading: true,
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        processDefinitionId: '',
-        flowBox: false,
-        stateBox: false,
-        flowState: '',
-        stateOptions: [{
-          value: 'active',
-          label: '激活'
-        }, {
-          value: 'suspend',
-          label: '挂起'
-        }],
-        option: {
-          height: 'auto',
-          calcHeight: 30,
-          tip: false,
-          searchShow: true,
-          searchMenuSpan: 6,
-          border: true,
-          index: true,
-          selection: true,
-          editBtn: false,
-          addBtn: false,
-          viewBtn: false,
-          delBtn: false,
-          dialogWidth: 900,
-          menuWidth: 250,
-          dialogClickModal: false,
-          column: [{
-              label: '租户编号',
-              prop: 'tenantId',
-              slot: true,
-              width: 120,
+export default {
+    data () {
+        return {
+            form: {},
+            mode: '1',
+            selectionId: '',
+            selectionList: [],
+            query: {},
+            loading: true,
+            page: {
+                pageSize: 10,
+                currentPage: 1,
+                total: 0
             },
-            {
-              label: '流程主键',
-              prop: 'id',
+            processDefinitionId: '',
+            flowBox: false,
+            stateBox: false,
+            flowState: '',
+            stateOptions: [{
+                value: 'active',
+                label: '激活'
+            }, {
+                value: 'suspend',
+                label: '挂起'
+            }],
+            option: {
+                labelWidth: 96,
+                searchLabelWidth: 96,
+                searchShow: true,
+                searchMenuSpan: 3,
+                menuWidth: 240,
+
+                height: 'auto',
+                calcHeight: 30,
+                tip: false,
+                border: true,
+                index: true,
+                selection: true,
+                editBtn: false,
+                addBtn: false,
+                viewBtn: false,
+                delBtn: false,
+                dialogWidth: 900,
+                dialogClickModal: false,
+                column: [{
+                    label: '租户编号',
+                    prop: 'tenantId',
+                    slot: true,
+                    width: 120,
+                },
+                {
+                    overHidden: true,
+                    label: '流程主键',
+                    prop: 'id',
+                },
+                {
+                    width: 150,
+                    overHidden: true,
+                    label: '流程标识',
+                    prop: 'key',
+                    searchSpan: 4,
+                    search: true,
+                },
+                {
+                    width: 150,
+                    overHidden: true,
+                    label: '流程名称',
+                    prop: 'name',
+                    searchSpan: 4,
+                    search: true,
+                },
+                {
+                    width: 120,
+                    label: "流程分类",
+                    type: "select",
+                    row: true,
+                    dicUrl: "/api/blade-system/dict/dictionary?code=flow",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey"
+                    },
+                    dataType: "number",
+                    slot: true,
+                    prop: "category",
+                    // search: true,
+                },
+                {
+                    width: 100,
+                    label: '流程版本',
+                    prop: 'version',
+                    slot: true,
+                },
+                {
+                    width: 100,
+                    label: '状态',
+                    prop: 'suspensionState',
+                    slot: true,
+                },
+                {
+                    width: 144,
+                    label: '部署时间',
+                    prop: 'deploymentTime',
+                },
+                ]
             },
-            {
-              label: '流程标识',
-              prop: 'key',
-              search: true,
-              width: 150,
-            },
-            {
-              label: '流程名称',
-              prop: 'name',
-              search: true,
-              width: 150,
-            },
-            {
-              label: "流程分类",
-              type: "select",
-              row: true,
-              dicUrl: "/api/blade-system/dict/dictionary?code=flow",
-              props: {
-                label: "dictValue",
-                value: "dictKey"
-              },
-              dataType: "number",
-              slot: true,
-              prop: "category",
-              // search: true,
-              width: 100,
-            },
-            {
-              label: '流程版本',
-              prop: 'version',
-              slot: true,
-              width: 80,
-            },
-            {
-              label: '状态',
-              prop: 'suspensionState',
-              slot: true,
-              width: 80,
-            },
-            {
-              label: '部署时间',
-              prop: 'deploymentTime',
-              width: 165,
-            },
-          ]
-        },
-        data: []
-      };
+            data: []
+        }
     },
     watch: {
-      'mode'() {
-        this.onLoad(this.page);
-      }
+        'mode' () {
+            this.onLoad(this.page)
+        }
     },
     computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          delBtn: this.vaildData(this.permission.flow_manager_remove, false),
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
-        });
-        return ids.join(",");
-      },
-      deploymentIds() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.deploymentId);
-        });
-        return ids.join(",");
-      }
+        ...mapGetters(["permission"]),
+        permissionList () {
+            return {
+                delBtn: this.vaildData(this.permission.flow_manager_remove, false),
+            }
+        },
+        ids () {
+            let ids = []
+            this.selectionList.forEach(ele => {
+                ids.push(ele.id)
+            })
+            return ids.join(",")
+        },
+        deploymentIds () {
+            let ids = []
+            this.selectionList.forEach(ele => {
+                ids.push(ele.deploymentId)
+            })
+            return ids.join(",")
+        },
+        showStatus () {
+            return (data) => {
+                if (data == 1) {
+                    return {
+                        text: '激活',
+                        type: 'success'
+                    }
+                } else {
+                    return {
+                        text: '挂起',
+                        type: 'info'
+                    }
+                }
+            }
+        }
     },
     methods: {
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
+        searchReset () {
+            this.query = {}
+            this.onLoad(this.page)
+        },
+        searchChange (params, done) {
+            this.query = params
+            this.page.currentPage = 1
+            this.onLoad(this.page, params)
+            done()
+        },
+        selectionChange (list) {
+            this.selectionList = list
+        },
+        selectionClear () {
+            this.selectionList = []
+            this.$refs.crud.toggleSelection()
+        },
+        handleDelete () {
+            if (this.selectionList.length === 0) {
+                this.$message.warning("请选择至少一条数据")
+                return
+            }
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return deleteDeployment(this.deploymentIds)
+                })
+                .then(() => {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                    this.$refs.crud.toggleSelection()
+                    this.onLoad(this.page)
+                })
+        },
+        handleSlotDelete (row) {
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return deleteDeployment(row.deploymentId)
+                })
+                .then(() => {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                    this.$refs.crud.toggleSelection()
+                    this.onLoad(this.page)
+                })
+        },
+        handleState (row) {
+            this.stateBox = true
+            this.selectionId = row.id
+        },
+        handleDoState () {
+            if (!this.flowState) {
+                this.$message({
+                    type: "warn",
+                    message: "请先选择流程状态!"
+                })
+                return
+            }
+            changeState({
+                processId: this.selectionId,
+                state: this.flowState
+            }).then(res => {
+                const data = res.data
+                if (data.success) {
+                    this.$message({
+                        type: "success",
+                        message: data.msg
+                    })
+                    this.stateBox = false
+                    this.onLoad(this.page)
+                } else {
+                    this.$message({
+                        type: "warn",
+                        message: data.msg
+                    })
+                }
+            })
+        },
+        handleImage (row) {
+            this.processDefinitionId = row.id
+            this.flowBox = true
+        },
+        currentChange (currentPage) {
+            this.page.currentPage = currentPage
+        },
+        sizeChange (pageSize) {
+            this.page.pageSize = pageSize
+        },
+        refreshChange () {
+            this.onLoad(this.page, this.query)
+        },
+        onLoad (page, params = {}) {
+            const values = {
+                ...params,
+                category: (params.category) ? flowCategory(params.category) : null,
+                mode: this.mode
+            }
+            this.loading = true
+            managerList(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
+                const data = res.data.data
+                this.page.total = data.total
+                this.data = data.records
+                this.loading = false
+                this.selectionClear()
+            })
         }
-        this.$confirm("确定将选择数据删除?", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning"
-          })
-          .then(() => {
-            return deleteDeployment(this.deploymentIds);
-          })
-          .then(() => {
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-            this.onLoad(this.page);
-          });
-      },
-      handleSlotDelete(row) {
-        this.$confirm("确定将选择数据删除?", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning"
-          })
-          .then(() => {
-            return deleteDeployment(row.deploymentId);
-          })
-          .then(() => {
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-            this.onLoad(this.page);
-          });
-      },
-      handleState(row) {
-        this.stateBox = true;
-        this.selectionId = row.id;
-      },
-      handleDoState() {
-        if (!this.flowState) {
-          this.$message({
-            type: "warn",
-            message: "请先选择流程状态!"
-          });
-          return;
-        }
-        changeState({
-          processId: this.selectionId,
-          state: this.flowState
-        }).then(res => {
-          const data = res.data;
-          if (data.success) {
-            this.$message({
-              type: "success",
-              message: data.msg
-            });
-            this.stateBox = false;
-            this.onLoad(this.page);
-          } else {
-            this.$message({
-              type: "warn",
-              message: data.msg
-            });
-          }
-        })
-      },
-      handleImage(row) {
-        this.processDefinitionId = row.id;
-        this.flowBox = true;
-      },
-      currentChange(currentPage) {
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize) {
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        const values = {
-          ...params,
-          category: (params.category) ? flowCategory(params.category) : null,
-          mode: this.mode
-        };
-        this.loading = true;
-        managerList(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
-        });
-      }
     }
-  };
+}
 </script>
\ No newline at end of file
diff --git a/src/views/flow/model.vue b/src/views/flow/model.vue
index bcf88cb..a53aeb1 100644
--- a/src/views/flow/model.vue
+++ b/src/views/flow/model.vue
@@ -1,482 +1,427 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               ref="crud"
-               v-model="form"
-               :page.sync="page"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-button type="primary"
-                   size="mini"
-                   icon="el-icon-circle-plus"
-                   v-if="permission.flow_model_create"
-                   plain
-                   @click="handleCreate">创 建
-        </el-button>
-        <el-button type="danger"
-                   size="mini"
-                   icon="el-icon-delete"
-                   v-if="permission.flow_model_delete"
-                   plain
-                   @click="handleDelete">删 除
-        </el-button>
-      </template>
-      <template slot-scope="scope"
-                slot="menu">
-        <el-button type="text"
-                   size="mini"
-                   icon="el-icon-setting"
-                   v-if="permission.flow_model_update"
-                   @click.stop="handleUpdate(scope.row,scope.index)">配置
-        </el-button>
-        <el-button type="text"
-                   size="mini"
-                   icon="el-icon-upload2"
-                   v-if="permission.flow_model_deploy"
-                   @click.stop="handleDeploy(scope.row,scope.index)">部署
-        </el-button>
-        <el-button type="text"
-                   size="mini"
-                   icon="el-icon-delete"
-                   v-if="permission.flow_model_delete"
-                   @click.stop="handleSlotDelete(scope.row,scope.index)">删除
-        </el-button>
-      </template>
-      <template slot-scope="{row}"
-                slot="version">
-        <el-tag>v{{ row.version }}</el-tag>
-      </template>
-    </avue-crud>
-    <el-dialog title="流程配置"
-               append-to-body
-               destroy-on-close
-               :visible.sync="flowBox"
-               :close-on-press-escape="false"
-               :fullscreen="true"
-               :before-close="handleNutflowClose"
-               custom-class="wf-dialog">
-      <wf-design-base v-if="nutflowOption.step === 1"
-                      class="animated fadeIn"
-                      style="height: calc(100vh - 108px);"
-                      ref="wf-design"
-                      :options="nutflowOption.step1"></wf-design-base>
-      <wf-design-base v-if="nutflowOption.step === 2"
-                      class="animated fadeIn"
-                      style="height: calc(100vh - 108px);"
-                      ref="wf-design-view"
-                      :options="nutflowOption.step2"></wf-design-base>
-      <span slot="footer"
-            class="avue-dialog__footer">
-        <el-button size="small"
-                   @click="handleNutflowClose(() => {}, true)">取 消</el-button>
-        <el-button v-if="nutflowOption.step === 1"
-                   size="small"
-                   type="success"
-                   @click="handleStep(1)">下 一 步</el-button>
-        <el-button v-if="nutflowOption.step === 2"
-                   size="small"
-                   type="success"
-                   @click="handleStep(-1)">上 一 步</el-button>
-        <el-button v-if="nutflowOption.step === 2"
-                   size="small"
-                   type="primary"
-                   @click="handleSubmitModel">确 定</el-button>
-      </span>
-    </el-dialog>
-    <el-dialog title="流程部署"
-               append-to-body
-               :visible.sync="deployBox"
-               width="20%">
-      <avue-form ref="form"
-                 :option="optionDeploy"
-                 v-model="form"
-                 @submit="handleSubmit"/>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button @click="deployBox = false">取 消</el-button>
-        <el-button type="primary"
-                   @click="handleDoDeploy"
-                   :loading="deployLoading">确 定</el-button>
-      </span>
-    </el-dialog>
-  </basic-container>
+    <basic-container>
+        <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" :page.sync="page"
+            @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
+            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
+            <template slot="menuLeft">
+                <el-button type="primary" size="mini" icon="el-icon-circle-plus" v-if="permission.flow_model_create" plain
+                    @click="handleCreate">创 建
+                </el-button>
+                <el-button type="danger" size="mini" icon="el-icon-delete" v-if="permission.flow_model_delete" plain
+                    @click="handleDelete">删 除
+                </el-button>
+            </template>
+
+            <template slot-scope="{ row, size, index }" slot="menu">
+                <el-button type="text" :size="size" icon="el-icon-setting" v-if="permission.flow_model_update"
+                    @click.stop="handleUpdate(row, index)">配置
+                </el-button>
+                <el-button type="text" :size="size" icon="el-icon-upload2" v-if="permission.flow_model_deploy"
+                    @click.stop="handleDeploy(row, index)">部署
+                </el-button>
+                <el-button type="text" :size="size" icon="el-icon-delete" v-if="permission.flow_model_delete"
+                    @click.stop="handleSlotDelete(row, index)">删除
+                </el-button>
+            </template>
+            <template slot-scope="{row, size}" slot="version">
+                <el-tag :size="size">v{{ row.version }}</el-tag>
+            </template>
+        </avue-crud>
+        <el-dialog title="流程配置" append-to-body destroy-on-close :visible.sync="flowBox" :close-on-press-escape="false"
+            :fullscreen="true" :before-close="handleNutflowClose" custom-class="wf-dialog">
+            <wf-design-base v-if="nutflowOption.step === 1" class="animated fadeIn" style="height: calc(100vh - 108px);"
+                ref="wf-design" :options="nutflowOption.step1"></wf-design-base>
+            <wf-design-base v-if="nutflowOption.step === 2" class="animated fadeIn" style="height: calc(100vh - 108px);"
+                ref="wf-design-view" :options="nutflowOption.step2"></wf-design-base>
+            <span slot="footer" class="avue-dialog__footer">
+                <el-button size="small" @click="handleNutflowClose(() => { }, true)">取 消</el-button>
+                <el-button v-if="nutflowOption.step === 1" size="small" type="success" @click="handleStep(1)">下 一
+                    步</el-button>
+                <el-button v-if="nutflowOption.step === 2" size="small" type="success" @click="handleStep(-1)">上 一
+                    步</el-button>
+                <el-button v-if="nutflowOption.step === 2" size="small" type="primary" @click="handleSubmitModel">确
+                    定</el-button>
+            </span>
+        </el-dialog>
+        <el-dialog title="流程部署" append-to-body :visible.sync="deployBox" width="20%">
+            <avue-form ref="form" :option="optionDeploy" v-model="form" @submit="handleSubmit" />
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="deployBox = false">取 消</el-button>
+                <el-button type="primary" @click="handleDoDeploy" :loading="deployLoading">确 定</el-button>
+            </span>
+        </el-dialog>
+    </basic-container>
 </template>
 
 <script>
-import {mapGetters} from "vuex";
-import {modelList, removeModel, deployModel, submitModel, detail} from "@/api/flow/flow";
-import {flowCategory} from "@/util/flow";
+import { mapGetters } from "vuex"
+import { modelList, removeModel, deployModel, submitModel, detail } from "@/api/flow/flow"
+import { flowCategory } from "@/util/flow"
 
 export default {
-  data() {
-    return {
-      form: {},
-      optionDeploy: {
-        menuBtn: false,
-        column: [
-          {
-            label: "流程类型",
-            type: "select",
-            dicUrl: "/api/blade-system/dict/dictionary?code=flow",
-            props: {
-              label: "dictValue",
-              value: "dictKey"
+    data () {
+        return {
+            form: {},
+            optionDeploy: {
+                menuBtn: false,
+                column: [
+                    {
+                        label: "流程类型",
+                        type: "select",
+                        dicUrl: "/api/blade-system/dict/dictionary?code=flow",
+                        props: {
+                            label: "dictValue",
+                            value: "dictKey"
+                        },
+                        dataType: "number",
+                        slot: true,
+                        prop: "categoryValue",
+                        search: true,
+                        span: 24,
+                        rules: [{
+                            required: true,
+                            message: "请选择流程类型",
+                            trigger: "blur"
+                        }]
+                    },
+                    {
+                        label: "流程模式",
+                        prop: "flowMode",
+                        type: "radio",
+                        dicData: [
+                            {
+                                label: "通用流程",
+                                value: 1
+                            },
+                            {
+                                label: "定制流程",
+                                value: 2
+                            }
+                        ],
+                        value: 1,
+                        span: 24,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请选择流程模式',
+                                trigger: 'blur'
+                            }
+                        ],
+                    },
+                    {
+                        label: "所属租户",
+                        prop: "tenantId",
+                        type: "tree",
+                        multiple: true,
+                        dicUrl: "/api/blade-system/tenant/select",
+                        props: {
+                            label: "tenantName",
+                            value: "tenantId"
+                        },
+                        display: false,
+                        span: 24,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请选择所属租户',
+                                trigger: 'blur'
+                            }
+                        ],
+                    },
+                ],
             },
-            dataType: "number",
-            slot: true,
-            prop: "categoryValue",
-            search: true,
-            span: 24,
-            rules: [{
-              required: true,
-              message: "请选择流程类型",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "流程模式",
-            prop: "flowMode",
-            type: "radio",
-            dicData: [
-              {
-                label: "通用流程",
-                value: 1
-              },
-              {
-                label: "定制流程",
-                value: 2
-              }
-            ],
-            value: 1,
-            span: 24,
-            rules: [
-              {
-                required: true,
-                message: '请选择流程模式',
-                trigger: 'blur'
-              }
-            ],
-          },
-          {
-            label: "所属租户",
-            prop: "tenantId",
-            type: "tree",
-            multiple: true,
-            dicUrl: "/api/blade-system/tenant/select",
-            props: {
-              label: "tenantName",
-              value: "tenantId"
+            selectionId: '',
+            selectionList: [],
+            query: {},
+            loading: true,
+            deployLoading: false,
+            page: {
+                pageSize: 10,
+                currentPage: 1,
+                total: 0
             },
-            display: false,
-            span: 24,
-            rules: [
-              {
-                required: true,
-                message: '请选择所属租户',
-                trigger: 'blur'
-              }
-            ],
-          },
-        ],
-      },
-      selectionId: '',
-      selectionList: [],
-      query: {},
-      loading: true,
-      deployLoading: false,
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
-      deployBox: false,
-      flowBox: false,
-      option: {
-        height: 'auto',
-        calcHeight: 30,
-        tip: false,
-        searchShow: true,
-        searchMenuSpan: 6,
-        border: true,
-        index: true,
-        selection: true,
-        editBtn: false,
-        addBtn: false,
-        viewBtn: false,
-        delBtn: false,
-        dialogWidth: 900,
-        menuWidth: 200,
-        dialogClickModal: false,
-        size: 'mini',
-        searchSize: 'mini',
-        column: [
-          {
-            label: '模型主键',
-            prop: 'id',
-          },
-          {
-            label: '模型标识',
-            prop: 'modelKey',
-            search: true,
-            overHidden: true
-          },
-          {
-            label: '模型名称',
-            prop: 'name',
-            search: true,
-            overHidden: true
-          },
-          {
-            label: '流程版本',
-            prop: 'version',
-            slot: true,
-            overHidden: true
-          },
-          {
-            label: '创建时间',
-            prop: 'created',
-            overHidden: true
-          },
-          {
-            label: '更新时间',
-            prop: 'lastUpdated',
-            overHidden: true
-          },
-        ]
-      },
-      data: [],
-      nutflowOption: {
-        process: {},
-        step: 1,
-        step1: {
-          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
+            deployBox: false,
+            flowBox: false,
+            option: {
+                labelWidth: 96,
+                searchLabelWidth: 96,
+                searchShow: true,
+                searchMenuSpan: 3,
+                menuWidth: 210,
+
+                height: 'auto',
+                calcHeight: 30,
+                tip: false,
+                border: true,
+                index: true,
+                selection: true,
+                editBtn: false,
+                addBtn: false,
+                viewBtn: false,
+                delBtn: false,
+                dialogWidth: 900,
+                dialogClickModal: false,
+                column: [
+                    {
+                        label: '模型主键',
+                        prop: 'id',
+                    },
+                    {
+                        label: '模型标识',
+                        prop: 'modelKey',
+                        searchSpan: 4,
+                        search: true,
+                        overHidden: true
+                    },
+                    {
+                        label: '模型名称',
+                        prop: 'name',
+                        searchSpan: 4,
+                        search: true,
+                        overHidden: true
+                    },
+                    {
+                        label: '流程版本',
+                        prop: 'version',
+                        slot: true,
+                        overHidden: true
+                    },
+                    {
+                        width: 144,
+                        label: '创建时间',
+                        prop: 'created',
+                    },
+                    {
+                        width: 144,
+                        label: '更新时间',
+                        prop: 'lastUpdated',
+                    },
+                ]
+            },
+            data: [],
+            nutflowOption: {
+                process: {},
+                step: 1,
+                step1: {
+                    toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
+                },
+                step2: {
+                    mode: 'view',
+                    simulation: true,
+                    minimap: true,
+                }
+            }
+        }
+    },
+    watch: {
+        'form.flowMode' () {
+            this.$refs.form.option.column.filter(item => {
+                if (item.prop === "tenantId") {
+                    item.display = this.form.flowMode === 2
+                }
+            })
+        }
+    },
+    computed: {
+        ...mapGetters(["permission"]),
+        ids () {
+            let ids = []
+            this.selectionList.forEach(ele => {
+                ids.push(ele.id)
+            })
+            return ids.join(",")
+        }
+    },
+    methods: {
+        handleSubmitModel () {
+            const registry = this.$refs['wf-design-view'].getElementRegistry().getAll()
+            const { businessObject } = registry[0]
+            const { id, name, documentation } = businessObject
+            const description = (documentation && documentation.length > 0) ? documentation[0].text : null
+            const params = {
+                ...this.nutflowOption.process,
+                modelKey: id,
+                name,
+                description,
+                modelEditorXml: this.nutflowOption.process.xml
+            }
+            submitModel(params).then(() => {
+                this.$message.success("操作成功")
+                this.handleNutflowClose()
+                this.onLoad(this.page, this.query)
+            })
         },
-        step2: {
-          mode: 'view',
-          simulation: true,
-          minimap: true,
-        }
-      }
-    };
-  },
-  watch: {
-    'form.flowMode'() {
-      this.$refs.form.option.column.filter(item => {
-        if (item.prop === "tenantId") {
-          item.display = this.form.flowMode === 2;
-        }
-      });
-    }
-  },
-  computed: {
-    ...mapGetters(["permission"]),
-    ids() {
-      let ids = [];
-      this.selectionList.forEach(ele => {
-        ids.push(ele.id);
-      });
-      return ids.join(",");
-    }
-  },
-  methods: {
-    handleSubmitModel() {
-      const registry = this.$refs['wf-design-view'].getElementRegistry().getAll()
-      const {businessObject} = registry[0]
-      const {id, name, documentation} = businessObject
-      const description = (documentation && documentation.length > 0) ? documentation[0].text : null
-      const params = {
-        ...this.nutflowOption.process,
-        modelKey: id,
-        name,
-        description,
-        modelEditorXml: this.nutflowOption.process.xml
-      }
-      submitModel(params).then(() => {
-        this.$message.success("操作成功")
-        this.handleNutflowClose()
-        this.onLoad(this.page, this.query)
-      })
-    },
-    handleStep(step) {
-      if (step === 1) { // 下一步
-        this.$refs['wf-design'].getData('xml').then(data => {
-          this.$set(this.nutflowOption.step1, 'xml', data)
-          this.$set(this.nutflowOption.step2, 'xml', data)
-          this.$set(this.nutflowOption.process, 'xml', data)
-          this.$set(this.nutflowOption, 'step', 2)
-        })
-      } else this.$set(this.nutflowOption, 'step', 1)
-    },
-    handleNutflowClose(done, flag) {
-      const initOption = {
-        process: {},
-        step: 1,
-        step1: {
-          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
+        handleStep (step) {
+            if (step === 1) { // 下一步
+                this.$refs['wf-design'].getData('xml').then(data => {
+                    this.$set(this.nutflowOption.step1, 'xml', data)
+                    this.$set(this.nutflowOption.step2, 'xml', data)
+                    this.$set(this.nutflowOption.process, 'xml', data)
+                    this.$set(this.nutflowOption, 'step', 2)
+                })
+            } else this.$set(this.nutflowOption, 'step', 1)
         },
-        step2: {
-          mode: 'view',
-          simulation: true,
-          minimap: true,
+        handleNutflowClose (done, flag) {
+            const initOption = {
+                process: {},
+                step: 1,
+                step1: {
+                    toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
+                },
+                step2: {
+                    mode: 'view',
+                    simulation: true,
+                    minimap: true,
+                }
+            }
+            if (done || flag) {
+                this.$confirm('确定要关闭吗?关闭未保存的修改都会丢失。', '警告', {
+                    type: 'warning'
+                }).then(() => {
+                    this.$set(this, 'nutflowOption', initOption)
+                    if (typeof done == 'function') done()
+                    this.flowBox = false
+                }).catch(() => {
+                })
+            } else {
+                this.$set(this, 'nutflowOption', initOption)
+                this.flowBox = false
+            }
+        },
+        handleSubmit (form, done) {
+            this.deployLoading = true
+            deployModel({
+                modelId: this.selectionId,
+                category: flowCategory(form.categoryValue),
+                tenantIds: form.tenantId ? form.tenantId.join(",") : ""
+            }).then(res => {
+                const data = res.data
+                if (data.success) {
+                    this.$message({
+                        type: "success",
+                        message: data.msg
+                    })
+                    done()
+                    this.$refs.form.resetForm()
+                    this.deployBox = false
+                    this.deployLoading = false
+                } else {
+                    done()
+                    this.deployLoading = false
+                    this.$message({
+                        type: "warn",
+                        message: data.msg
+                    })
+                }
+            })
+        },
+        searchReset () {
+            this.query = {}
+            this.onLoad(this.page)
+        },
+        searchChange (params, done) {
+            this.query = params
+            this.page.currentPage = 1
+            this.onLoad(this.page, params)
+            done()
+        },
+        selectionChange (list) {
+            this.selectionList = list
+        },
+        selectionClear () {
+            this.selectionList = []
+            this.$refs.crud.toggleSelection()
+        },
+        handleDelete () {
+            if (this.selectionList.length === 0) {
+                this.$message.warning("请选择至少一条数据")
+                return
+            }
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return removeModel(this.ids)
+                })
+                .then(() => {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                    this.$refs.crud.toggleSelection()
+                    this.onLoad(this.page)
+                })
+        },
+        handleCreate () {
+            this.flowBox = true
+        },
+        handleUpdate (row) {
+            detail({ id: row.id }).then(res => {
+                const data = res.data.data
+                const { modelEditorXml } = data
+                this.$set(this.nutflowOption.step1, 'xml', modelEditorXml)
+                this.$set(this.nutflowOption, 'process', data)
+                this.flowBox = true
+            })
+        },
+        handleDeploy (row) {
+            this.deployBox = true
+            this.selectionId = row.id
+        },
+        handleDoDeploy () {
+            this.$refs.form.submit()
+        },
+        handleSlotDelete (row) {
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return removeModel(row.id)
+                })
+                .then(() => {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                    this.$refs.crud.toggleSelection()
+                    this.onLoad(this.page)
+                })
+        },
+        currentChange (currentPage) {
+            this.page.currentPage = currentPage
+        },
+        sizeChange (pageSize) {
+            this.page.pageSize = pageSize
+        },
+        refreshChange () {
+            this.onLoad(this.page, this.query)
+        },
+        onLoad (page, params = {}) {
+            this.loading = true
+            modelList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+                const data = res.data.data
+                this.page.total = data.total
+                this.data = data.records
+                this.loading = false
+                this.selectionClear()
+            })
         }
-      }
-      if (done || flag) {
-        this.$confirm('确定要关闭吗?关闭未保存的修改都会丢失。', '警告', {
-          type: 'warning'
-        }).then(() => {
-          this.$set(this, 'nutflowOption', initOption)
-          if (typeof done == 'function') done()
-          this.flowBox = false
-        }).catch(() => {
-        })
-      } else {
-        this.$set(this, 'nutflowOption', initOption)
-        this.flowBox = false
-      }
-    },
-    handleSubmit(form, done) {
-      this.deployLoading = true;
-      deployModel({
-        modelId: this.selectionId,
-        category: flowCategory(form.categoryValue),
-        tenantIds: form.tenantId ? form.tenantId.join(",") : ""
-      }).then(res => {
-        const data = res.data;
-        if (data.success) {
-          this.$message({
-            type: "success",
-            message: data.msg
-          });
-          done();
-          this.$refs.form.resetForm();
-          this.deployBox = false;
-          this.deployLoading = false;
-        } else {
-          done();
-          this.deployLoading = false;
-          this.$message({
-            type: "warn",
-            message: data.msg
-          });
-        }
-      })
-    },
-    searchReset() {
-      this.query = {};
-      this.onLoad(this.page);
-    },
-    searchChange(params, done) {
-      this.query = params;
-      this.page.currentPage = 1;
-      this.onLoad(this.page, params);
-      done();
-    },
-    selectionChange(list) {
-      this.selectionList = list;
-    },
-    selectionClear() {
-      this.selectionList = [];
-      this.$refs.crud.toggleSelection();
-    },
-    handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning("请选择至少一条数据");
-        return;
-      }
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return removeModel(this.ids);
-        })
-        .then(() => {
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          this.$refs.crud.toggleSelection();
-          this.onLoad(this.page);
-        });
-    },
-    handleCreate() {
-      this.flowBox = true;
-    },
-    handleUpdate(row) {
-      detail({id: row.id}).then(res => {
-        const data = res.data.data
-        const {modelEditorXml} = data
-        this.$set(this.nutflowOption.step1, 'xml', modelEditorXml)
-        this.$set(this.nutflowOption, 'process', data)
-        this.flowBox = true;
-      })
-    },
-    handleDeploy(row) {
-      this.deployBox = true;
-      this.selectionId = row.id;
-    },
-    handleDoDeploy() {
-      this.$refs.form.submit();
-    },
-    handleSlotDelete(row) {
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return removeModel(row.id);
-        })
-        .then(() => {
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          this.$refs.crud.toggleSelection();
-          this.onLoad(this.page);
-        });
-    },
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage;
-    },
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize;
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query);
-    },
-    onLoad(page, params = {}) {
-      this.loading = true;
-      modelList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-        const data = res.data.data;
-        this.page.total = data.total;
-        this.data = data.records;
-        this.loading = false;
-        this.selectionClear();
-      });
     }
-  }
-};
+}
 </script>
 
 <style lang="scss">
-
 .wf-dialog {
-  .el-dialog__body {
-    padding: 5px;
-  }
+    .el-dialog__body {
+        padding: 5px;
+    }
 
-  .avue-dialog__footer {
-    text-align: center;
-  }
+    .avue-dialog__footer {
+        text-align: center;
+    }
 }
 </style>

--
Gitblit v1.9.3