更新打包

package.json

@@ -37,6 +37,7 @@
     "@antv/g6": "3.1.10",
     "@antv/g6-editor": "^1.2.0",
     "@antv/util": "1.3.1",
+    "@johnhom/el-load-select": "^1.0.0",
     "@riophae/vue-treeselect": "0.4.0",
     "ace-builds": "^1.4.12",
     "axios": "^0.21.1",

src/components/VueFormMaking/components/Upload/file.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-upload
-      action="/api-web/uploadFile"
+      action="/api-web/import/oaUploadFile"
       :on-success="handleSuccess"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
@@ -10,6 +10,7 @@
       :limit="element.options.length"
       :headers="element.options.headers"
       :on-exceed="handleExceed"
+      :data="uploadData"
       :file-list="dataModel"
       :disabled="element.options.disabled"
       :style="{'width': element.options.width}"
@@ -29,7 +30,14 @@ export default {
   props: ['element', 'preview', 'dataModel'],
   data() {
     return {
-      fileListTmp: []
+      fileListTmp: [],
+      uploadData: {},
+    }
+  },
+  mounted() {
+    const query = this.$route.query
+    if(query.processId) {
+      this.uploadData.processId = query.processId
     }
   },
   methods: {
@@ -47,12 +55,20 @@ export default {
       return this.$confirm(`确定要移除 ${file.name}？`)
     },
     handleSuccess(response, file, fileList) {
-      this.fileListTmp.push({
-        uid: file.uid,
-        name: file.name,
-        url: response.data.url
-      })
-      this.$emit('fileList', this.fileListTmp)
+      console.log(response, file, fileList)
+      if(response.code === 200) {
+        this.fileListTmp.push({
+          uid: file.uid,
+          name: file.name,
+          url: response.data.url
+        })
+        this.$emit('fileList', this.fileListTmp)
+      } else {
+        const index = fileList.findIndex(item => item.uid === file.uid)
+        fileList.splice(index, 1)
+
+        this.$message.error(response.msg)
+      }
     }
   }
 }

src/components/loadSelect/index.vue

@@ -0,0 +1,142 @@
+<template>
+    <el-select
+        :value="value"
+        v-loadmore="loadMore"
+        @focus="focus"
+        @clear="clear"
+        filterable
+        remote
+        :filter-method="handleSearch"
+        :loading="loading"
+        clearable
+        v-bind="$attrs"
+        v-on="$listeners"
+    >
+        <el-option
+            v-for="option in data"
+            :label="option[dictLabel]"
+            :value="option[dictValue]"
+            :key="option.value"
+        ></el-option>
+        <!-- 此处加载中的value可以随便设置，只要不与其他数据重复即可 -->
+        <el-option
+            v-if="hasMore"
+            disabled
+            label="加载中..."
+            value="-1"
+        ></el-option>
+    </el-select>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            default: ""
+        },
+        // 列表数据
+        data: {
+            type: Array,
+            default: () => []
+        },
+        dictLabel: {
+            type: String,
+            default: "label"
+        },
+        dictValue: {
+            type: String,
+            default: "value"
+        },
+        // 调用页数的接口
+        request: {
+            type: Function,
+            default: () => {}
+        },
+        // 传入的页码
+        page: {
+            type: [Number, String],
+            default: 1
+        },
+        // 是否还有更多数据
+        hasMore: {
+            type: Boolean,
+            default: true
+        }
+    },
+    directives: {
+        // 这里实现一个组件内部的自定义指令
+        loadmore: {
+            // 指令的定义
+            bind(el, binding) {
+                const SELECTWRAP = el.querySelector(
+                    ".el-select-dropdown .el-select-dropdown__wrap"
+                );
+                if (!SELECTWRAP) {
+                    throw new Error('获取不到"el-select-dropdown__wrap"节点');
+                }
+                SELECTWRAP.addEventListener("scroll", () => {
+                    // scrollTop  这里可能因为浏览器缩放存在小数点的情况，导致了滚动到底部时
+                    // scrollHeight 减去滚动到底部时的scrollTop ，依然大于clientHeight 导致无法请求更多数据
+                    // 这里将scrollTop向上取整 保证滚到底部时，触发调用
+                    const CONDITION =
+                        SELECTWRAP.scrollHeight -
+                            Math.ceil(SELECTWRAP.scrollTop) <=
+                        SELECTWRAP.clientHeight;
+                    // el.scrollTop !== 0 当输入时，如果搜索结果很少，以至于没看到滚动条，那么此时的CONDITION计算结果是true，会执行bind.value()，此时不应该执行，否则搜索结果不匹配
+                    if (CONDITION && SELECTWRAP.scrollTop !== 0) {
+                        binding.value();
+                    }
+                });
+            }
+        }
+    },
+    data() {
+        return {
+            keyword: "", // 存储关键字用
+            loading: false
+        };
+    },
+    methods: {
+        // 请求下一页的数据
+        loadMore() {
+            // 如果没有更多数据，则不请求
+            if (!this.hasMore) {
+                return;
+            }
+            // 如果intercept属性为true则不请求数据，
+            if (this.loadMore.intercept) {
+                return;
+            }
+            this.loadMore.intercept = true;
+            this.request({
+                page: this.page + 1,
+                more: true,
+                keyword: this.keyword
+            }).then(() => {
+                this.loadMore.intercept = false;
+            });
+        },
+        // 选中下拉框没有数据时，自动请求第一页的数据
+        focus() {
+            if (!this.data.length) {
+                this.request({ page: 1 });
+            }
+        },
+        handleSearch(keyword) {
+            this.keyword = keyword;
+            this.loading = true;
+            console.log(keyword);
+            this.request({ page: 1, keyword: keyword }).then(() => {
+                this.loading = false;
+            });
+        },
+        // 删除选中时，如果请求了关键字，则清除关键字再请求第一页的数据
+        clear() {
+            if (this.keyword) {
+                this.keyword = "";
+                this.request({ page: 1 });
+            }
+        }
+    }
+};
+</script>

src/components/wfd/components/DetailPanel/NodeDetail.vue

@@ -1,112 +1,156 @@
-<template>
-  <div>
-    <!-- <div v-if="writePreview" class="panelRow">
-      <div>可写模版：</div>
-      <el-select
-        style="width:90%; font-size:12px"
-        placeholder="选择模版"
-        :disabled="readOnly"
-        :value="model.writeTpls"
-        :multiple="true"
-        :filterable="true"
-        size="small"
-        @change="(e) => onChange('writeTpls', e)"
-      >
-        <template v-for="(templateValue, templateIndex) in templatesBase">
-          <el-option v-if="templates.indexOf(templateValue.id) !== -1" :key="templateIndex" :label="templateValue.name" :value="templateValue.id" />
-        </template>
-      </el-select>
-    </div>
-    <div v-if="readonlyPreview" class="panelRow">
-      <div>只读模版：</div>
-      <el-select
-        style="width:90%; font-size:12px"
-        placeholder="选择模版"
-        :disabled="readOnly"
-        :value="model.readonlyTpls"
-        :multiple="true"
-        :filterable="true"
-        size="small"
-        @change="(e) => onChange('readonlyTpls', e)"
-      >
-        <template v-for="(templateValue, templateIndex) in templatesBase">
-          <el-option v-if="templates.indexOf(templateValue.id) !== -1" :key="templateIndex" :label="templateValue.name" :value="templateValue.id" />
-        </template>
-      </el-select>
-    </div>
-    <div class="panelRow">
-      <div>隐藏模版：</div>
-      <el-select
-        style="width:90%; font-size:12px"
-        placeholder="选择模版"
-        :disabled="readOnly"
-        :value="model.hideTpls"
-        :multiple="true"
-        :filterable="true"
-        size="small"
-        @change="(e) => onChange('hideTpls', e)"
-      >
-        <template v-for="(templateValue, templateIndex) in templatesBase">
-          <el-option v-if="templates.indexOf(templateValue.id) !== -1" :key="templateIndex" :label="templateValue.name" :value="templateValue.id" />
-        </template>
-      </el-select>
-    </div> -->
-    <div v-if="ccPreview" class="panelRow">
-      <div>抄送：</div>
-      <el-select
-        size="small"
-        style="width:90%; font-size:12px"
-        placeholder="请选择抄送人"
-        :value="model.cc"
-        :multiple="true"
-        :filterable="true"
-        @change="(e) => { onChange('cc', e); getPersons(e) }"
-      >
-        <el-option v-for="user in users" :key="user.userId" :label="user.nickName===''?user.username:user.nickName" :value="user.userId" />
-      </el-select>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  inject: ['i18n'],
-  props: {
-    model: {
-      type: Object,
-      default: () => ({})
-    },
-    onChange: {
-      type: Function,
-      default: () => {}
-    },
-    readOnly: {
-      type: Boolean,
-      default: false
-    },
-    templates: {
-      type: Array,
-      default: () => ([])
-    },
-    templatesBase: {
-      type: Array,
-      default: () => ([])
-    },
-    writePreview: {
-      type: Boolean,
-      default: true
-    },
-    readonlyPreview: {
-      type: Boolean,
-      default: true
-    },
-    ccPreview: {
-      type: Boolean,
-      default: true
-    },
-    users: {
-      type: Array,
-      default: () => ([])
-    }
-  }
-}
-</script>
+<template>
+  <div>
+    <!-- <div v-if="writePreview" class="panelRow">
+      <div>可写模版：</div>
+      <el-select
+        style="width:90%; font-size:12px"
+        placeholder="选择模版"
+        :disabled="readOnly"
+        :value="model.writeTpls"
+        :multiple="true"
+        :filterable="true"
+        size="small"
+        @change="(e) => onChange('writeTpls', e)"
+      >
+        <template v-for="(templateValue, templateIndex) in templatesBase">
+          <el-option v-if="templates.indexOf(templateValue.id) !== -1" :key="templateIndex" :label="templateValue.name" :value="templateValue.id" />
+        </template>
+      </el-select>
+    </div>
+    <div v-if="readonlyPreview" class="panelRow">
+      <div>只读模版：</div>
+      <el-select
+        style="width:90%; font-size:12px"
+        placeholder="选择模版"
+        :disabled="readOnly"
+        :value="model.readonlyTpls"
+        :multiple="true"
+        :filterable="true"
+        size="small"
+        @change="(e) => onChange('readonlyTpls', e)"
+      >
+        <template v-for="(templateValue, templateIndex) in templatesBase">
+          <el-option v-if="templates.indexOf(templateValue.id) !== -1" :key="templateIndex" :label="templateValue.name" :value="templateValue.id" />
+        </template>
+      </el-select>
+    </div>
+    <div class="panelRow">
+      <div>隐藏模版：</div>
+      <el-select
+        style="width:90%; font-size:12px"
+        placeholder="选择模版"
+        :disabled="readOnly"
+        :value="model.hideTpls"
+        :multiple="true"
+        :filterable="true"
+        size="small"
+        @change="(e) => onChange('hideTpls', e)"
+      >
+        <template v-for="(templateValue, templateIndex) in templatesBase">
+          <el-option v-if="templates.indexOf(templateValue.id) !== -1" :key="templateIndex" :label="templateValue.name" :value="templateValue.id" />
+        </template>
+      </el-select>
+    </div> -->
+    <div v-if="ccPreview" class="panelRow">
+      <div>抄送：</div>
+      <el-select
+        size="small"
+        style="width:90%; font-size:12px"
+        placeholder="请选择抄送人"
+        :value="model.cc"
+        :multiple="true"
+        :filterable="true"
+        @change="(e) => { onChange('cc', e); getPersons(e) }"
+      >
+        <el-option v-for="user in users" :key="user.userId" :label="user.nickName===''?user.username:user.nickName" :value="user.userId" />
+      </el-select>
+      <!-- <load-select
+        v-model="selected"
+        :data="data"
+        :page="page"
+        :hasMore="more"
+        :request="getData"
+      ></load-select> -->
+    </div>
+  </div>
+</template>
+<script>
+// import loadSelect from '@johnhom/el-load-select'
+import loadSelect from '@/components/loadSelect'
+import { listUser } from '@/api/system/sysuser'
+export default {
+  components: {
+    loadSelect
+  },
+  inject: ['i18n'],
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    onChange: {
+      type: Function,
+      default: () => {}
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    templates: {
+      type: Array,
+      default: () => ([])
+    },
+    templatesBase: {
+      type: Array,
+      default: () => ([])
+    },
+    writePreview: {
+      type: Boolean,
+      default: true
+    },
+    readonlyPreview: {
+      type: Boolean,
+      default: true
+    },
+    ccPreview: {
+      type: Boolean,
+      default: true
+    },
+    users: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      selected: "",
+      page: 1,
+      more: true,
+      data: []
+    }
+  },
+  methods: {
+    // 获取用户
+    // 传入给load-select组件的函数
+      getData({ page = 1, more = false, keyword = "" } = {}) {
+        return new Promise(async (resolve) => {
+          // 访问后端接口API
+          await listUser({ page, keyword, pageSize: 10 }).then(res => {
+              console.log(res)
+              if (more) {
+                  this.data = [...this.data, ...(res.data.list || [])];
+              } else {
+                  this.data = res.data.list || [];
+              }
+              console.log(this.data)
+              this.page = res.data.page;
+              let { count, page, pageSize } = res.data;
+              this.more = page * pageSize < count;
+              this.page = page;
+              resolve();
+          });
+        });
+    }
+  }
+}
+</script>

src/components/wfd/components/DetailPanel/UserTaskDetail.vue

@@ -1,292 +1,292 @@
-<template>
-  <div :data-clazz="model.clazz">
-    <div class="panelTitle">{{ i18n['userTask'] }}</div>
-    <div class="panelBody">
-      <DefaultDetail :model="model" :on-change="onChange" :read-only="readOnly" />
-      <!-- <div class="panelRow">
-        <div>之后任务：</div>
-        <el-select
-          size="small"
-          style="width:90%; font-size:12px"
-          placeholder="选择任务"
-          :disabled="readOnly"
-          :value="model.task"
-          :multiple="true"
-          :filterable="true"
-          @change="(e) => onChange('task', e)"
-        >
-          <el-option v-for="(taskValue, taskIndex) in tasks" :key="taskIndex" :label="taskValue.name" :value="taskValue.full_name" />
-        </el-select>
-      </div> -->
-      <div class="panelRow">
-        <div><span style="color: red">*</span> {{ i18n['userTask.assignType'] }}：</div>
-        <el-select
-          size="small"
-          style="width:90%; font-size: 12px"
-          :placeholder="i18n['userTask.assignType.placeholder']"
-          :value="model.assignType"
-          :disabled="readOnly"
-          @change="(e) => { onChange('assignValue', []); onChange('assignType', e); assignmentType() }"
-        >
-          <el-option key="person" value="person" :label="i18n['userTask.assignType.person']" />
-          <el-option key="role" value="role" :label="i18n['userTask.assignType.role']" />
-          <!-- <el-option key="persongroup" value="persongroup" :label="i18n['userTask.assignType.persongroup']" /> -->
-          <el-option key="department" value="department" :label="i18n['userTask.assignType.department']" />
-          <el-option key="variable" value="variable" :label="i18n['userTask.assignType.variable']" />
-          <el-option key="post" value="post" :label="i18n['userTask.assignType.post']" />
-        </el-select>
-      </div>
-      <div v-if="model.assignType === 'person'" class="panelRow">
-        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.person.title'] }}：</div>
-        <el-select
-          size="small"
-          style="width:90%; font-size:12px"
-          :placeholder="i18n['userTask.assignType.person.placeholder']"
-          :disabled="readOnly"
-          :value="model.assignValue"
-          :multiple="true"
-          :filterable="true"
-          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
-        >
-          <el-option v-for="user in users" :key="user.userId" :label="user.nickName===''?user.username:user.nickName" :value="user.userId" />
-        </el-select>
-      </div>
-      <div v-else-if="model.assignType === 'role'" class="panelRow">
-        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.role.title'] }}：</div>
-        <el-select
-          v-model.number="model.assignValue"
-          size="small"
-          style="width:90%; font-size:12px"
-          :placeholder="i18n['userTask.assignType.role.placeholder']"
-          :disabled="readOnly"
-          :multiple="true"
-          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
-        >
-          <el-option v-for="(item, index) in roles" :key="index" :label="item.roleName" :value="item.roleId" />
-        </el-select>
-      </div>
-      <!-- <div v-else-if="model.assignType === 'persongroup'" class="panelRow">
-        <div>{{ i18n['userTask.assignType.persongroup.title'] }}：</div>
-        <el-select
-          style="width:90%; font-size:12px"
-          :placeholder="i18n['userTask.assignType.persongroup.placeholder']"
-          :value="model.assignValue"
-          :disabled="readOnly"
-          :multiple="true"
-          :filterable="true"
-          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
-        >
-          <el-option v-for="group in groups" :key="group.id" :label="group.nickname===''?group.name:group.nickname" :value="group.id" />
-        </el-select>
-      </div> -->
-      <div v-else-if="model.assignType === 'department'" class="panelRow">
-        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.department.title'] }}：</div>
-        <!-- <el-select
-          size="small"
-          style="width:90%; font-size:12px"
-          :placeholder="i18n['userTask.assignType.department.placeholder']"
-          :value="model.assignValue"
-          :disabled="readOnly"
-          :multiple="true"
-          :filterable="true"
-          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
-        >
-          <el-option v-for="department in departments" :key="department.deptId" :label="department.deptName" :value="department.deptId" />
-        </el-select> -->
-        <treeselect
-          :value="model.assignValue"
-          size="small"
-          style="width:90%; font-size:12px"
-          :options="departments"
-          :normalizer="normalizer"
-          :multiple="true"
-          :is-disabled="readOnly"
-          :placeholder="i18n['userTask.assignType.department.placeholder']"
-          @input="(e) => { onChange('assignValue', e); getPersons(e) }"
-        />
-      </div>
-      <div v-else-if="model.assignType === 'variable'" class="panelRow">
-        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.variable.title'] }}：</div>
-        <el-select
-          v-model.number="model.assignValue"
-          size="small"
-          style="width:90%; font-size:12px"
-          :placeholder="i18n['userTask.assignType.variable.placeholder']"
-          :disabled="readOnly"
-          :multiple="true"
-          :filterable="true"
-          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
-        >
-          <el-option v-for="(item, index) in variableOptions" :key="index" :label="item.label" :value="item.value" />
-        </el-select>
-      </div>
-      <div v-else-if="model.assignType === 'post'" class="panelRow">
-        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.post.title'] }}：</div>
-        <el-select
-          v-model.number="model.assignValue"
-          size="small"
-          style="width:90%; font-size:12px"
-          :placeholder="i18n['userTask.assignType.post.placeholder']"
-          :disabled="readOnly"
-          :multiple="true"
-          :filterable="true"
-          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
-        >
-          <el-option v-for="(item, index) in postOptions" :key="index" :label="item.postName" :value="item.postId" />
-        </el-select>
-      </div>
-      <div v-if="false" class="panelRow">
-        <el-checkbox
-          size="small"
-          :disabled="model.assignType !== 'role' && model.assignType !== 'department' && (
-            model.assignValue===undefined ||
-            model.assignValue===null ||
-            model.assignValue.length <= 1 ||
-            model.activeOrder ||
-            readOnly)"
-          :value="model.isCounterSign"
-          @change="(e) => { onChange('isCounterSign', e); initCounterSign(e) }"
-        >{{ i18n['userTask.counterSign'] }}</el-checkbox>
-        <!-- <el-checkbox
-          size="small"
-          :disabled="
-            model.assignValue===undefined||
-              model.assignValue===null||
-              model.assignValue.length <= 1||
-              model.isCounterSign||
-              readOnly"
-          :value="model.activeOrder"
-          @change="(value) => onChange('activeOrder', value)"
-        >{{ i18n['userTask.activeOrder'] }}</el-checkbox> -->
-        <el-checkbox
-          v-if="(model.assignType === 'role' || model.assignType === 'department') &&
-            model.assignValue!==undefined &&
-            model.assignValue!==null &&
-            model.assignValue.length >= 1 &&
-            model.isCounterSign"
-          size="small"
-          :value="model.fullHandle"
-          @change="(value) => onChange('fullHandle', value)"
-        >{{ i18n['userTask.fullHandle'] }}</el-checkbox>
-      </div>
-      <NodeDetail
-        :model="model"
-        :on-change="onChange"
-        :read-only="readOnly"
-        :templates="templates"
-        :templates-base="templatesBase"
-        :readonly-preview="false"
-        :users="users"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import DefaultDetail from './DefaultDetail'
-import NodeDetail from './NodeDetail'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  inject: ['i18n'],
-  components: {
-    DefaultDetail,
-    NodeDetail,
-    Treeselect
-  },
-  props: {
-    model: {
-      type: Object,
-      default: () => ({})
-    },
-    users: {
-      type: Array,
-      default: () => ([])
-    },
-    roles: {
-      type: Array,
-      default: () => ([])
-    },
-    groups: {
-      type: Array,
-      default: () => ([])
-    },
-    departments: {
-      type: Array,
-      default: () => ([])
-    },
-    postOptions: {
-      type: Array,
-      default: () => ([])
-    },
-    tasks: {
-      type: Array,
-      default: () => ([])
-    },
-    onChange: {
-      type: Function,
-      default: () => {}
-    },
-    readOnly: {
-      type: Boolean,
-      default: false
-    },
-    templates: {
-      type: Array,
-      default: () => ([])
-    },
-    templatesBase: {
-      type: Array,
-      default: () => ([])
-    }
-  },
-  data() {
-    return {
-      //   {
-      //   value: 1,
-      //   label: '创建者'
-      // },
-      variableOptions: [{
-        value: 1,
-        label: '创建者'
-      }, {
-        value: 2,
-        label: '创建者部门主管'
-      }, {
-        value: 3,
-        label: '创建者上级部门主管'
-      }, {
-        value: 4,
-        label: '各分部主管会签'
-      }],
-      roleList: []
-    }
-  },
-  methods: {
-    /** 转换菜单数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children
-      }
-      return {
-        id: node.deptId,
-        label: node.deptName,
-        children: node.children
-      }
-    },
-    getPersons(e) {
-      if (e === undefined || e === null || e.length <= 1) {
-        this.onChange('activeOrder', false)
-        this.onChange('isCounterSign', false)
-      }
-    },
-    initCounterSign(e) {
-      if (!e) {
-        this.onChange('fullHandle', false)
-      }
-    },
-    assignmentType() {
-      this.onChange('isCounterSign', false)
-    }
-  }
-}
-</script>
+<template>
+  <div :data-clazz="model.clazz">
+    <div class="panelTitle">{{ i18n['userTask'] }}</div>
+    <div class="panelBody">
+      <DefaultDetail :model="model" :on-change="onChange" :read-only="readOnly" />
+      <!-- <div class="panelRow">
+        <div>之后任务：</div>
+        <el-select
+          size="small"
+          style="width:90%; font-size:12px"
+          placeholder="选择任务"
+          :disabled="readOnly"
+          :value="model.task"
+          :multiple="true"
+          :filterable="true"
+          @change="(e) => onChange('task', e)"
+        >
+          <el-option v-for="(taskValue, taskIndex) in tasks" :key="taskIndex" :label="taskValue.name" :value="taskValue.full_name" />
+        </el-select>
+      </div> -->
+      <div class="panelRow">
+        <div><span style="color: red">*</span> {{ i18n['userTask.assignType'] }}：</div>
+        <el-select
+          size="small"
+          style="width:90%; font-size: 12px"
+          :placeholder="i18n['userTask.assignType.placeholder']"
+          :value="model.assignType"
+          :disabled="readOnly"
+          @change="(e) => { onChange('assignValue', []); onChange('assignType', e); assignmentType() }"
+        >
+          <el-option key="person" value="person" :label="i18n['userTask.assignType.person']" />
+          <el-option key="role" value="role" :label="i18n['userTask.assignType.role']" />
+          <!-- <el-option key="persongroup" value="persongroup" :label="i18n['userTask.assignType.persongroup']" /> -->
+          <el-option key="department" value="department" :label="i18n['userTask.assignType.department']" />
+          <el-option key="variable" value="variable" :label="i18n['userTask.assignType.variable']" />
+          <el-option key="post" value="post" :label="i18n['userTask.assignType.post']" />
+        </el-select>
+      </div>
+      <div v-if="model.assignType === 'person'" class="panelRow">
+        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.person.title'] }}：</div>
+        <el-select
+          size="small"
+          style="width:90%; font-size:12px"
+          :placeholder="i18n['userTask.assignType.person.placeholder']"
+          :disabled="readOnly"
+          :value="model.assignValue"
+          :multiple="true"
+          :filterable="true"
+          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
+        >
+          <el-option v-for="user in users" :key="user.userId" :label="user.nickName===''?user.username:user.nickName" :value="user.userId" />
+        </el-select>
+      </div>
+      <div v-else-if="model.assignType === 'role'" class="panelRow">
+        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.role.title'] }}：</div>
+        <el-select
+          v-model.number="model.assignValue"
+          size="small"
+          style="width:90%; font-size:12px"
+          :placeholder="i18n['userTask.assignType.role.placeholder']"
+          :disabled="readOnly"
+          :multiple="true"
+          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
+        >
+          <el-option v-for="(item, index) in roles" :key="index" :label="item.roleName" :value="item.roleId" />
+        </el-select>
+      </div>
+      <!-- <div v-else-if="model.assignType === 'persongroup'" class="panelRow">
+        <div>{{ i18n['userTask.assignType.persongroup.title'] }}：</div>
+        <el-select
+          style="width:90%; font-size:12px"
+          :placeholder="i18n['userTask.assignType.persongroup.placeholder']"
+          :value="model.assignValue"
+          :disabled="readOnly"
+          :multiple="true"
+          :filterable="true"
+          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
+        >
+          <el-option v-for="group in groups" :key="group.id" :label="group.nickname===''?group.name:group.nickname" :value="group.id" />
+        </el-select>
+      </div> -->
+      <div v-else-if="model.assignType === 'department'" class="panelRow">
+        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.department.title'] }}：</div>
+        <!-- <el-select
+          size="small"
+          style="width:90%; font-size:12px"
+          :placeholder="i18n['userTask.assignType.department.placeholder']"
+          :value="model.assignValue"
+          :disabled="readOnly"
+          :multiple="true"
+          :filterable="true"
+          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
+        >
+          <el-option v-for="department in departments" :key="department.deptId" :label="department.deptName" :value="department.deptId" />
+        </el-select> -->
+        <treeselect
+          :value="model.assignValue"
+          size="small"
+          style="width:90%; font-size:12px"
+          :options="departments"
+          :normalizer="normalizer"
+          :multiple="true"
+          :is-disabled="readOnly"
+          :placeholder="i18n['userTask.assignType.department.placeholder']"
+          @input="(e) => { onChange('assignValue', e); getPersons(e) }"
+        />
+      </div>
+      <div v-else-if="model.assignType === 'variable'" class="panelRow">
+        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.variable.title'] }}：</div>
+        <el-select
+          v-model.number="model.assignValue"
+          size="small"
+          style="width:90%; font-size:12px"
+          :placeholder="i18n['userTask.assignType.variable.placeholder']"
+          :disabled="readOnly"
+          :multiple="true"
+          :filterable="true"
+          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
+        >
+          <el-option v-for="(item, index) in variableOptions" :key="index" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div v-else-if="model.assignType === 'post'" class="panelRow">
+        <div><span style="color: red">*</span> {{ i18n['userTask.assignType.post.title'] }}：</div>
+        <el-select
+          v-model.number="model.assignValue"
+          size="small"
+          style="width:90%; font-size:12px"
+          :placeholder="i18n['userTask.assignType.post.placeholder']"
+          :disabled="readOnly"
+          :multiple="true"
+          :filterable="true"
+          @change="(e) => { onChange('assignValue', e); getPersons(e) }"
+        >
+          <el-option v-for="(item, index) in postOptions" :key="index" :label="item.postName" :value="item.postId" />
+        </el-select>
+      </div>
+      <div v-if="false" class="panelRow">
+        <el-checkbox
+          size="small"
+          :disabled="model.assignType !== 'role' && model.assignType !== 'department' && (
+            model.assignValue===undefined ||
+            model.assignValue===null ||
+            model.assignValue.length <= 1 ||
+            model.activeOrder ||
+            readOnly)"
+          :value="model.isCounterSign"
+          @change="(e) => { onChange('isCounterSign', e); initCounterSign(e) }"
+        >{{ i18n['userTask.counterSign'] }}</el-checkbox>
+        <!-- <el-checkbox
+          size="small"
+          :disabled="
+            model.assignValue===undefined||
+              model.assignValue===null||
+              model.assignValue.length <= 1||
+              model.isCounterSign||
+              readOnly"
+          :value="model.activeOrder"
+          @change="(value) => onChange('activeOrder', value)"
+        >{{ i18n['userTask.activeOrder'] }}</el-checkbox> -->
+        <el-checkbox
+          v-if="(model.assignType === 'role' || model.assignType === 'department') &&
+            model.assignValue!==undefined &&
+            model.assignValue!==null &&
+            model.assignValue.length >= 1 &&
+            model.isCounterSign"
+          size="small"
+          :value="model.fullHandle"
+          @change="(value) => onChange('fullHandle', value)"
+        >{{ i18n['userTask.fullHandle'] }}</el-checkbox>
+      </div>
+      <NodeDetail
+        :model="model"
+        :on-change="onChange"
+        :read-only="readOnly"
+        :templates="templates"
+        :templates-base="templatesBase"
+        :readonly-preview="false"
+        :users="users"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DefaultDetail from './DefaultDetail'
+import NodeDetail from './NodeDetail'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  inject: ['i18n'],
+  components: {
+    DefaultDetail,
+    NodeDetail,
+    Treeselect
+  },
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    users: {
+      type: Array,
+      default: () => ([])
+    },
+    roles: {
+      type: Array,
+      default: () => ([])
+    },
+    groups: {
+      type: Array,
+      default: () => ([])
+    },
+    departments: {
+      type: Array,
+      default: () => ([])
+    },
+    postOptions: {
+      type: Array,
+      default: () => ([])
+    },
+    tasks: {
+      type: Array,
+      default: () => ([])
+    },
+    onChange: {
+      type: Function,
+      default: () => {}
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    templates: {
+      type: Array,
+      default: () => ([])
+    },
+    templatesBase: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      //   {
+      //   value: 1,
+      //   label: '创建者'
+      // },
+      variableOptions: [{
+        value: 1,
+        label: '创建者'
+      }, {
+        value: 2,
+        label: '创建者部门主管'
+      }, {
+        value: 3,
+        label: '创建者上级部门主管'
+      }, {
+        value: 4,
+        label: '各分部主管会签'
+      }],
+      roleList: []
+    }
+  },
+  methods: {
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      }
+    },
+    getPersons(e) {
+      if (e === undefined || e === null || e.length <= 1) {
+        this.onChange('activeOrder', false)
+        this.onChange('isCounterSign', false)
+      }
+    },
+    initCounterSign(e) {
+      if (!e) {
+        this.onChange('fullHandle', false)
+      }
+    },
+    assignmentType() {
+      this.onChange('isCounterSign', false)
+    }
+  }
+}
+</script>

src/components/wfd/components/Wfd.vue

@@ -1,314 +1,314 @@
-<template>
-  <div class="root">
-    <ToolbarPanel v-if="!isView" ref="toolbar" />
-    <div style="display: flex">
-      <ItemPanel v-if="!isView" ref="addItemPanel" :height="height" />
-      <div ref="canvas" class="canvasPanel" :style="{'height':height+'px','width':isView?'100%':'70%','border-bottom':isView?0:null}" />
-      <DetailPanel
-        v-if="!isView"
-        ref="detailPanel"
-        :height="height"
-        :model="selectedModel"
-        :read-only="mode !== 'edit'"
-        :users="users"
-        :roles="roles"
-        :groups="groups"
-        :departments="departments"
-        :post-options="postOptions"
-        :tasks="tasks"
-        :process="process"
-        :templates="templates"
-        :templates-base="templatesBase"
-        :signal-defs="processModel.signalDefs"
-        :message-defs="processModel.messageDefs"
-        :on-change="(key,val)=>{onItemCfgChange(key,val)}"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import G6 from '@antv/g6/src'
-import Grid from '@antv/g6/build/grid'
-import { getShapeName } from '../util/clazz'
-import Command from '../plugins/command'
-import Toolbar from '../plugins/toolbar'
-import AddItemPanel from '../plugins/addItemPanel'
-import CanvasPanel from '../plugins/canvasPanel'
-import ToolbarPanel from '../components/ToolbarPanel'
-import ItemPanel from '../components/ItemPanel'
-import DetailPanel from '../components/DetailPanel'
-import i18n from '../locales'
-import { exportXML } from '../util/bpmn'
-import registerShape from '../shape'
-import registerBehavior from '../behavior'
-registerShape(G6)
-registerBehavior(G6)
-export default {
-  name: 'WfdVue',
-  components: {
-    ToolbarPanel,
-    ItemPanel,
-    DetailPanel
-  },
-  provide() {
-    return {
-      i18n: i18n[this.lang]
-    }
-  },
-  props: {
-    isView: {
-      type: Boolean,
-      default: false
-    },
-    mode: {
-      type: String,
-      default: 'edit'
-    },
-    height: {
-      type: Number,
-      default: 800
-    },
-    lang: {
-      type: String,
-      default: 'zh'
-    },
-    data: {
-      type: Object,
-      default: () => ({ nodes: [], edges: [] })
-    },
-    // 人员
-    users: {
-      type: Array,
-      default: () => ([])
-    },
-    // 角色
-    roles: {
-      type: Array,
-      default: () => ([])
-    },
-    // 人员组
-    groups: {
-      type: Array,
-      default: () => ([])
-    },
-    // 部门
-    departments: {
-      type: Array,
-      default: () => ([])
-    },
-    // 岗位
-    postOptions: {
-      type: Array,
-      default: () => ([])
-    },
-    // 任务
-    tasks: {
-      type: Array,
-      default: () => ([])
-    },
-    process: {
-      type: Array,
-      default: () => ([])
-    },
-    templates: {
-      type: Array,
-      default: () => ([])
-    },
-    templatesBase: {
-      type: Array,
-      default: () => ([])
-    }
-  },
-  data() {
-    return {
-      resizeFunc: () => {},
-      selectedModel: {},
-      previous: '',
-      processModel: {
-        id: '',
-        name: '',
-        clazz: 'process',
-        dataObjs: [],
-        signalDefs: [],
-        messageDefs: []
-      },
-      graph: null,
-      cmdPlugin: null
-    }
-  },
-  watch: {
-    data(oldData, newData) {
-      if (oldData !== newData) {
-        if (this.graph) {
-          this.graph.changeData(this.initShape(newData))
-          this.graph.setMode(this.mode)
-          this.graph.emit('canvas:click')
-          if (this.cmdPlugin) {
-            this.cmdPlugin.initPlugin(this.graph)
-          }
-          if (this.isView) {
-            this.graph.fitView(5)
-          }
-        }
-      }
-    }
-  },
-  destroyed() {
-    window.removeEventListener('resize', this.resizeFunc)
-    this.graph.getNodes().forEach(node => {
-      node.getKeyShape().stopAnimate()
-    })
-  },
-  mounted() {
-    let plugins = []
-    if (!this.isView) {
-      this.cmdPlugin = new Command()
-      const toolbar = new Toolbar({ container: this.$refs['toolbar'].$el })
-      const addItemPanel = new AddItemPanel({ container: this.$refs['addItemPanel'].$el })
-      const canvasPanel = new CanvasPanel({ container: this.$refs['canvas'] })
-      plugins = [this.cmdPlugin, toolbar, addItemPanel, canvasPanel]
-    }
-    const width = this.$refs['canvas'].offsetWidth
-    const grid = new Grid()
-    this.graph = new G6.Graph({
-      plugins: [...plugins, grid],
-      container: this.$refs['canvas'],
-      height: this.height,
-      width: width,
-      modes: {
-        default: ['drag-canvas', 'clickSelected'],
-        view: [],
-        edit: ['drag-canvas', 'hoverNodeActived', 'hoverAnchorActived', 'dragNode', 'dragEdge',
-          'dragPanelItemAddNode', 'clickSelected', 'deleteItem', 'itemAlign']
-      },
-      defaultEdge: {
-        shape: 'flow-polyline-round'
-      }
-    })
-    this.graph.saveXML = (createFile = true) => exportXML(this.graph.save(), this.processModel, createFile)
-    if (this.isView) { this.graph.setMode('view') } else { this.graph.setMode(this.mode) }
-    this.graph.data(this.initShape(this.data))
-    this.graph.render()
-    if (this.isView && this.data && this.data.nodes) {
-      this.graph.fitView(5)
-    }
-    this.initEvents()
-  },
-  methods: {
-    initShape(data) {
-      if (data && data.nodes) {
-        return {
-          nodes: data.nodes.map(node => {
-            return {
-              shape: getShapeName(node.clazz),
-              ...node
-            }
-          }),
-          edges: data.edges
-        }
-      }
-      return data
-    },
-    verifyProcess(pv) {
-      // if (pv.label === undefined || pv.label === null || pv.label === '') {
-      //   return '标题不能为空'
-      // } else
-      if (pv.sort === undefined || pv.sort === null || pv.sort === '') {
-        return '顺序不能为空'
-      }
-      if (pv.clazz === 'userTask' || pv.clazz === 'receiveTask') {
-        if (pv.assignType === undefined || pv.assignType === null || pv.assignType === '') {
-          return '审批节点或处理节点的处理人类型不能为空'
-        } else if (pv.assignValue === undefined || pv.assignValue === null || pv.assignValue === '' || pv.assignValue.length === 0) {
-          return '审批节点或处理节点的处理人不能为空'
-        }
-      }
-      if (pv.clazz === 'flow') {
-        if (pv.flowProperties === undefined || pv.flowProperties === null || pv.flowProperties === '') {
-          return '流转属性不能为空'
-        }
-      }
-      return ''
-    },
-    initEvents() {
-      this.graph.on('afteritemselected', (items) => {
-        if (items && items.length > 0) {
-          if (this.previous !== '') {
-            // var previousValue = ''
-            const item = this.graph.findById(this.previous[0])
-            if (item !== undefined) {
-              // previousValue = { ...item.getModel() }
-              // var err = this.verifyProcess(previousValue)
-              // if (err !== '') {
-              //   this.selectedModel = previousValue
-              //   this.$message.error(err)
-              //   return
-              // }
-            }
-          }
-          const item = this.graph.findById(items[0])
-          this.selectedModel = { ...item.getModel() }
-          this.previous = items
-        } else {
-          if (this.previous !== '') {
-            this.selectedModel = this.processModel
-          }
-        }
-      })
-      const page = this.$refs['canvas']
-      const graph = this.graph
-      const height = this.height - 1
-      this.resizeFunc = () => {
-        graph.changeSize(page.offsetWidth, height)
-      }
-      window.addEventListener('resize', this.resizeFunc)
-    },
-    onItemCfgChange(key, value) {
-      var items = ''
-      if (this.previous.length !== 0) {
-        items = [this.previous[0]]
-      } else {
-        items = this.graph.get('selectedItems')
-      }
-      if (items && items.length > 0) {
-        const item = this.graph.findById(items[0])
-        if (this.graph.executeCommand) {
-          this.graph.executeCommand('update', {
-            itemId: items[0],
-            updateModel: { [key]: value || null }
-          })
-        } else {
-          this.graph.updateItem(item, { [key]: value || null })
-        }
-        this.selectedModel = { ...item.getModel() }
-      } else {
-        const canvasModel = { ...this.processModel, [key]: value || null }
-        this.selectedModel = canvasModel
-        this.processModel = canvasModel
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-    .root{
-        width: 100%;
-        height: 100%;
-        background-color: #fff;
-        display: block;
-    }
-    .canvasPanel {
-        flex: 0 0 auto;
-        float: left;
-        width:70%;
-        background-color: #fff;
-        border-bottom: 1px solid #E9E9E9;
-        z-index: 99;
-    }
-</style>
-
-<style>
-  .panelRow > div:nth-child(1) {
-    line-height:18px
-  }
-</style>
+<template>
+  <div class="root">
+    <ToolbarPanel v-if="!isView" ref="toolbar" />
+    <div style="display: flex">
+      <ItemPanel v-if="!isView" ref="addItemPanel" :height="height" />
+      <div ref="canvas" class="canvasPanel" :style="{'height':height+'px','width':isView?'100%':'70%','border-bottom':isView?0:null}" />
+      <DetailPanel
+        v-if="!isView"
+        ref="detailPanel"
+        :height="height"
+        :model="selectedModel"
+        :read-only="mode !== 'edit'"
+        :users="users"
+        :roles="roles"
+        :groups="groups"
+        :departments="departments"
+        :post-options="postOptions"
+        :tasks="tasks"
+        :process="process"
+        :templates="templates"
+        :templates-base="templatesBase"
+        :signal-defs="processModel.signalDefs"
+        :message-defs="processModel.messageDefs"
+        :on-change="(key,val)=>{onItemCfgChange(key,val)}"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import G6 from '@antv/g6/src'
+import Grid from '@antv/g6/build/grid'
+import { getShapeName } from '../util/clazz'
+import Command from '../plugins/command'
+import Toolbar from '../plugins/toolbar'
+import AddItemPanel from '../plugins/addItemPanel'
+import CanvasPanel from '../plugins/canvasPanel'
+import ToolbarPanel from '../components/ToolbarPanel'
+import ItemPanel from '../components/ItemPanel'
+import DetailPanel from '../components/DetailPanel'
+import i18n from '../locales'
+import { exportXML } from '../util/bpmn'
+import registerShape from '../shape'
+import registerBehavior from '../behavior'
+registerShape(G6)
+registerBehavior(G6)
+export default {
+  name: 'WfdVue',
+  components: {
+    ToolbarPanel,
+    ItemPanel,
+    DetailPanel
+  },
+  provide() {
+    return {
+      i18n: i18n[this.lang]
+    }
+  },
+  props: {
+    isView: {
+      type: Boolean,
+      default: false
+    },
+    mode: {
+      type: String,
+      default: 'edit'
+    },
+    height: {
+      type: Number,
+      default: 800
+    },
+    lang: {
+      type: String,
+      default: 'zh'
+    },
+    data: {
+      type: Object,
+      default: () => ({ nodes: [], edges: [] })
+    },
+    // 人员
+    users: {
+      type: Array,
+      default: () => ([])
+    },
+    // 角色
+    roles: {
+      type: Array,
+      default: () => ([])
+    },
+    // 人员组
+    groups: {
+      type: Array,
+      default: () => ([])
+    },
+    // 部门
+    departments: {
+      type: Array,
+      default: () => ([])
+    },
+    // 岗位
+    postOptions: {
+      type: Array,
+      default: () => ([])
+    },
+    // 任务
+    tasks: {
+      type: Array,
+      default: () => ([])
+    },
+    process: {
+      type: Array,
+      default: () => ([])
+    },
+    templates: {
+      type: Array,
+      default: () => ([])
+    },
+    templatesBase: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      resizeFunc: () => {},
+      selectedModel: {},
+      previous: '',
+      processModel: {
+        id: '',
+        name: '',
+        clazz: 'process',
+        dataObjs: [],
+        signalDefs: [],
+        messageDefs: []
+      },
+      graph: null,
+      cmdPlugin: null
+    }
+  },
+  watch: {
+    data(oldData, newData) {
+      if (oldData !== newData) {
+        if (this.graph) {
+          this.graph.changeData(this.initShape(newData))
+          this.graph.setMode(this.mode)
+          this.graph.emit('canvas:click')
+          if (this.cmdPlugin) {
+            this.cmdPlugin.initPlugin(this.graph)
+          }
+          if (this.isView) {
+            this.graph.fitView(5)
+          }
+        }
+      }
+    }
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.resizeFunc)
+    this.graph.getNodes().forEach(node => {
+      node.getKeyShape().stopAnimate()
+    })
+  },
+  mounted() {
+    let plugins = []
+    if (!this.isView) {
+      this.cmdPlugin = new Command()
+      const toolbar = new Toolbar({ container: this.$refs['toolbar'].$el })
+      const addItemPanel = new AddItemPanel({ container: this.$refs['addItemPanel'].$el })
+      const canvasPanel = new CanvasPanel({ container: this.$refs['canvas'] })
+      plugins = [this.cmdPlugin, toolbar, addItemPanel, canvasPanel]
+    }
+    const width = this.$refs['canvas'].offsetWidth
+    const grid = new Grid()
+    this.graph = new G6.Graph({
+      plugins: [...plugins, grid],
+      container: this.$refs['canvas'],
+      height: this.height,
+      width: width,
+      modes: {
+        default: ['drag-canvas', 'clickSelected'],
+        view: [],
+        edit: ['drag-canvas', 'hoverNodeActived', 'hoverAnchorActived', 'dragNode', 'dragEdge',
+          'dragPanelItemAddNode', 'clickSelected', 'deleteItem', 'itemAlign']
+      },
+      defaultEdge: {
+        shape: 'flow-polyline-round'
+      }
+    })
+    this.graph.saveXML = (createFile = true) => exportXML(this.graph.save(), this.processModel, createFile)
+    if (this.isView) { this.graph.setMode('view') } else { this.graph.setMode(this.mode) }
+    this.graph.data(this.initShape(this.data))
+    this.graph.render()
+    if (this.isView && this.data && this.data.nodes) {
+      this.graph.fitView(5)
+    }
+    this.initEvents()
+  },
+  methods: {
+    initShape(data) {
+      if (data && data.nodes) {
+        return {
+          nodes: data.nodes.map(node => {
+            return {
+              shape: getShapeName(node.clazz),
+              ...node
+            }
+          }),
+          edges: data.edges
+        }
+      }
+      return data
+    },
+    verifyProcess(pv) {
+      // if (pv.label === undefined || pv.label === null || pv.label === '') {
+      //   return '标题不能为空'
+      // } else
+      if (pv.sort === undefined || pv.sort === null || pv.sort === '') {
+        return '顺序不能为空'
+      }
+      if (pv.clazz === 'userTask' || pv.clazz === 'receiveTask') {
+        if (pv.assignType === undefined || pv.assignType === null || pv.assignType === '') {
+          return '审批节点或处理节点的处理人类型不能为空'
+        } else if (pv.assignValue === undefined || pv.assignValue === null || pv.assignValue === '' || pv.assignValue.length === 0) {
+          return '审批节点或处理节点的处理人不能为空'
+        }
+      }
+      if (pv.clazz === 'flow') {
+        if (pv.flowProperties === undefined || pv.flowProperties === null || pv.flowProperties === '') {
+          return '流转属性不能为空'
+        }
+      }
+      return ''
+    },
+    initEvents() {
+      this.graph.on('afteritemselected', (items) => {
+        if (items && items.length > 0) {
+          if (this.previous !== '') {
+            // var previousValue = ''
+            const item = this.graph.findById(this.previous[0])
+            if (item !== undefined) {
+              // previousValue = { ...item.getModel() }
+              // var err = this.verifyProcess(previousValue)
+              // if (err !== '') {
+              //   this.selectedModel = previousValue
+              //   this.$message.error(err)
+              //   return
+              // }
+            }
+          }
+          const item = this.graph.findById(items[0])
+          this.selectedModel = { ...item.getModel() }
+          this.previous = items
+        } else {
+          if (this.previous !== '') {
+            this.selectedModel = this.processModel
+          }
+        }
+      })
+      const page = this.$refs['canvas']
+      const graph = this.graph
+      const height = this.height - 1
+      this.resizeFunc = () => {
+        graph.changeSize(page.offsetWidth, height)
+      }
+      window.addEventListener('resize', this.resizeFunc)
+    },
+    onItemCfgChange(key, value) {
+      var items = ''
+      if (this.previous.length !== 0) {
+        items = [this.previous[0]]
+      } else {
+        items = this.graph.get('selectedItems')
+      }
+      if (items && items.length > 0) {
+        const item = this.graph.findById(items[0])
+        if (this.graph.executeCommand) {
+          this.graph.executeCommand('update', {
+            itemId: items[0],
+            updateModel: { [key]: value || null }
+          })
+        } else {
+          this.graph.updateItem(item, { [key]: value || null })
+        }
+        this.selectedModel = { ...item.getModel() }
+      } else {
+        const canvasModel = { ...this.processModel, [key]: value || null }
+        this.selectedModel = canvasModel
+        this.processModel = canvasModel
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+    .root{
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        display: block;
+    }
+    .canvasPanel {
+        flex: 0 0 auto;
+        float: left;
+        width:70%;
+        background-color: #fff;
+        border-bottom: 1px solid #E9E9E9;
+        z-index: 99;
+    }
+</style>
+
+<style>
+  .panelRow > div:nth-child(1) {
+    line-height:18px
+  }
+</style>

src/views/process/list/template-manager.vue

@@ -26,7 +26,7 @@ export default {
       dataList: [{
         id: 1,
         title: '乐团退费模板',
-        url: 'https://daya.ks3-cn-beijing.ksyun.com/202203/T14lYae.xls'
+        url: 'https://daya.ks3-cn-beijing.ksyun.com/202203/乐团退费模板.xls'
       }]
     }
   },