优化

src/api/bpm/processClass.js

@@ -40,3 +40,13 @@ export async function processTypeDeleteAPI(data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+export async function getProduceTreeByCode(code) {
+  const res = await request.get(
+    `/main/categoryLevel/getProduceTreeByPid?code=${code}`,
+    {}
+  );
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/components/FormGenerator/ParserDialog.vue

@@ -4,7 +4,7 @@
       v-bind="$attrs"
       width="500px"
       :close-on-click-modal="false"
-      :modal-append-to-body="false"
+      append-to-body
       @open="onOpen"
       v-on="$listeners"
     >
@@ -16,8 +16,8 @@
       />
 
       <div slot="footer">
-        <el-button @click="close"> 取消 </el-button>
-        <el-button type="primary" @click="getFormData"> 获取数据 </el-button>
+        <el-button @click="close"> 关闭 </el-button>
+<!--       <el-button type="primary" @click="getFormData"> 获取数据 </el-button>-->
       </div>
     </el-dialog>
   </div>

src/components/FormGenerator/RightPanel.vue

@@ -20,7 +20,7 @@
           size="small"
           label-width="80px"
         >
-          <el-form-item v-if="activeData.__config__.changeTag" label="组件类型">
+          <el-form-item v-if="activeData?.__config__?.changeTag" label="组件类型">
             <el-select
               v-model="activeData.__config__.tagIcon"
               placeholder="请选择组件类型"
@@ -57,13 +57,13 @@
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.componentName !== undefined"
+            v-if="activeData?.__config__?.componentName !== undefined"
             label="组件名"
           >
-            {{ activeData.__config__.componentName }}
+            {{ activeData?.__config__?.componentName }}
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.label !== undefined"
+            v-if="activeData?.__config__?.label !== undefined"
             label="标题"
           >
             <el-input
@@ -101,7 +101,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.span !== undefined"
+            v-if="activeData?.__config__?.span !== undefined"
             label="表单栅格"
           >
             <el-slider
@@ -114,7 +114,7 @@
           </el-form-item>
           <el-form-item
             v-if="
-              activeData.__config__.layout === 'rowFormItem' &&
+              activeData?.__config__?.layout === 'rowFormItem' &&
               activeData.gutter !== undefined
             "
             label="栅格间隔"
@@ -127,7 +127,7 @@
           </el-form-item>
           <el-form-item
             v-if="
-              activeData.__config__.layout === 'rowFormItem' &&
+              activeData?.__config__?.layout === 'rowFormItem' &&
               activeData.type !== undefined
             "
             label="布局模式"
@@ -167,7 +167,7 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.labelWidth !== undefined"
+            v-if="activeData?.__config__?.labelWidth !== undefined"
             label="标签宽度"
           >
             <el-input
@@ -191,13 +191,13 @@
             label="默认值"
           >
             <el-input
-              :value="setDefaultValue(activeData.__config__.defaultValue)"
+              :value="setDefaultValue(activeData?.__config__?.defaultValue)"
               placeholder="请输入默认值"
               @input="onDefaultValueInput"
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-checkbox-group'"
+            v-if="activeData?.__config__?.tag === 'el-checkbox-group'"
             label="至少应选"
           >
             <el-input-number
@@ -208,7 +208,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-checkbox-group'"
+            v-if="activeData?.__config__?.tag === 'el-checkbox-group'"
             label="最多可选"
           >
             <el-input-number
@@ -277,7 +277,7 @@
           <el-form-item
             v-if="
               activeData['icon'] !== undefined &&
-              activeData.__config__.tag === 'el-button'
+              activeData?.__config__?.tag === 'el-button'
             "
             label="按钮图标"
           >
@@ -295,7 +295,7 @@
             </el-input>
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-cascader'"
+            v-if="activeData?.__config__?.tag === 'el-cascader'"
             label="选项分隔符"
           >
             <el-input
@@ -340,7 +340,7 @@
             <el-input-number v-model="activeData.step" placeholder="步数" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-input-number'"
+            v-if="activeData?.__config__?.tag === 'el-input-number'"
             label="精度"
           >
             <el-input-number
@@ -350,7 +350,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-input-number'"
+            v-if="activeData?.__config__?.tag === 'el-input-number'"
             label="按钮位置"
           >
             <el-radio-group v-model="activeData['controls-position']">
@@ -410,7 +410,7 @@
           <el-form-item
             v-if="
               activeData.type !== undefined &&
-              'el-date-picker' === activeData.__config__.tag
+              'el-date-picker' === activeData?.__config__?.tag
             "
             label="时间类型"
           >
@@ -491,7 +491,7 @@
           <el-form-item
             v-if="
               activeData.type !== undefined &&
-              activeData.__config__.tag === 'el-button'
+              activeData?.__config__?.tag === 'el-button'
             "
             label="按钮类型"
           >
@@ -515,7 +515,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-button'"
+            v-if="activeData?.__config__?.tag === 'el-button'"
             label="按钮文字"
           >
             <el-input
@@ -551,7 +551,7 @@
           <template
             v-if="
               ['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(
-                activeData.__config__.tag
+                activeData?.__config__?.tag
               ) > -1
             "
           >
@@ -651,12 +651,12 @@
 
           <template
             v-if="
-              ['el-cascader', 'el-table'].includes(activeData.__config__.tag)
+              ['el-cascader', 'el-table'].includes(activeData?.__config__?.tag)
             "
           >
             <el-divider>选项</el-divider>
             <el-form-item
-              v-if="activeData.__config__.dataType"
+              v-if="activeData?.__config__?.dataType"
               label="数据类型"
             >
               <el-radio-group
@@ -668,7 +668,7 @@
               </el-radio-group>
             </el-form-item>
 
-            <template v-if="activeData.__config__.dataType === 'dynamic'">
+            <template v-if="activeData?.__config__?.dataType === 'dynamic'">
               <el-form-item label="数据位置">
                 <el-input
                   v-model="activeData.__config__.dataPath"
@@ -677,7 +677,7 @@
                 />
               </el-form-item>
 
-              <template v-if="activeData.__config__.dynamicOptions">
+              <template v-if="activeData?.__config__?.dynamicOptions">
                 <el-form-item label="标签键名">
                   <el-input
                     v-model="activeData.__config__.dynamicOptions.label"
@@ -701,7 +701,7 @@
 
             <!-- 级联选择静态树 -->
             <el-tree
-              v-if="activeData.__config__.dataType === 'static'"
+              v-if="activeData?.__config__?.dataType === 'static'"
               draggable
               :data="activeData.options"
               node-key="id"
@@ -709,7 +709,7 @@
               :render-content="renderContent"
             />
             <div
-              v-if="activeData.__config__.dataType === 'static'"
+              v-if="activeData?.__config__?.dataType === 'static'"
               style="margin-left: 20px"
             >
               <el-button
@@ -725,7 +725,7 @@
           </template>
 
           <el-form-item
-            v-if="activeData.__config__.optionType !== undefined"
+            v-if="activeData?.__config__?.optionType !== undefined"
             label="选项样式"
           >
             <el-radio-group v-model="activeData.__config__.optionType">
@@ -748,8 +748,8 @@
 
           <el-form-item
             v-if="
-              activeData.__config__.showLabel !== undefined &&
-              activeData.__config__.labelWidth !== undefined
+              activeData?.__config__?.showLabel !== undefined &&
+              activeData?.__config__?.labelWidth !== undefined
             "
             label="显示标签"
           >
@@ -796,15 +796,15 @@
           </el-form-item>
           <el-form-item
             v-if="
-              activeData.__config__.border !== undefined &&
-              activeData.__config__.optionType === 'default'
+              activeData?.__config__?.border !== undefined &&
+              activeData?.__config__?.optionType === 'default'
             "
             label="是否带边框"
           >
             <el-switch v-model="activeData.__config__.border" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-color-picker'"
+            v-if="activeData?.__config__?.tag === 'el-color-picker'"
             label="颜色格式"
           >
             <el-select
@@ -825,10 +825,10 @@
           <el-form-item
             v-if="
               activeData.size !== undefined &&
-              (activeData.__config__.optionType === 'button' ||
-                activeData.__config__.border ||
-                activeData.__config__.tag === 'el-color-picker' ||
-                activeData.__config__.tag === 'el-button')
+              (activeData?.__config__?.optionType === 'button' ||
+                activeData?.__config__?.border ||
+                activeData?.__config__?.tag === 'el-color-picker' ||
+                activeData?.__config__?.tag === 'el-button')
             "
             label="组件尺寸"
           >
@@ -845,31 +845,31 @@
             <el-switch v-model="activeData['show-word-limit']" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-input-number'"
+            v-if="activeData?.__config__?.tag === 'el-input-number'"
             label="严格步数"
           >
             <el-switch v-model="activeData['step-strictly']" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-cascader'"
+            v-if="activeData?.__config__?.tag === 'el-cascader'"
             label="任选层级"
           >
             <el-switch v-model="activeData.props.props.checkStrictly" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-cascader'"
+            v-if="activeData?.__config__?.tag === 'el-cascader'"
             label="是否多选"
           >
             <el-switch v-model="activeData.props.props.multiple" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-cascader'"
+            v-if="activeData?.__config__?.tag === 'el-cascader'"
             label="展示全路径"
           >
             <el-switch v-model="activeData['show-all-levels']" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-cascader'"
+            v-if="activeData?.__config__?.tag === 'el-cascader'"
             label="可否筛选"
           >
             <el-switch v-model="activeData.filterable" />
@@ -881,13 +881,13 @@
             <el-switch v-model="activeData.clearable" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.showTip !== undefined"
+            v-if="activeData?.__config__?.showTip !== undefined"
             label="显示提示"
           >
             <el-switch v-model="activeData.__config__.showTip" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-upload'"
+            v-if="activeData?.__config__?.tag === 'el-upload'"
             label="多选文件"
           >
             <el-switch v-model="activeData.multiple" />
@@ -911,25 +911,25 @@
             <el-switch v-model="activeData.disabled" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-select'"
+            v-if="activeData?.__config__?.tag === 'el-select'"
             label="能否搜索"
           >
             <el-switch v-model="activeData.filterable" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.tag === 'el-select'"
+            v-if="activeData?.__config__?.tag === 'el-select'"
             label="是否多选"
           >
             <el-switch v-model="activeData.multiple" @change="multipleChange" />
           </el-form-item>
           <el-form-item
-            v-if="activeData.__config__.required !== undefined"
+            v-if="activeData?.__config__?.required !== undefined"
             label="是否必填"
           >
             <el-switch v-model="activeData.__config__.required" />
           </el-form-item>
 
-          <template v-if="activeData.__config__.layoutTree">
+          <template v-if="activeData?.__config__?.layoutTree">
             <el-divider>布局结构树</el-divider>
             <el-tree
               :data="[activeData.__config__]"
@@ -952,7 +952,7 @@
             </el-tree>
           </template>
 
-          <template v-if="Array.isArray(activeData.__config__.regList)">
+          <template v-if="Array.isArray(activeData?.__config__?.regList)">
             <el-divider>正则校验</el-divider>
             <div
               v-for="(item, index) in activeData.__config__.regList"
@@ -1193,7 +1193,7 @@
     computed: {
       documentLink() {
         return (
-          this.activeData.__config__.document ||
+          this.activeData?.__config__?.document ||
           'https://element.eleme.cn/#/zh-CN/component/installation'
         );
       },
@@ -1411,11 +1411,12 @@
     right: 0;
     top: 0;
     padding-top: 3px;
+    height: 100%;
     .field-box {
       position: relative;
-      height: calc(100vh - 42px);
       box-sizing: border-box;
-      overflow: hidden;
+      overflow: auto;
+      height: 95%;
     }
     .el-scrollbar {
       height: 100%;

src/components/FormGenerator/components/generator/config.js

@@ -130,25 +130,25 @@ export const inputComponents = [
     'controls-position': '',
     disabled: false
   },
-  {
-    __config__: {
-      label: '编辑器',
-      showLabel: true,
-      changeTag: true,
-      labelWidth: null,
-      tag: 'tinymce',
-      tagIcon: 'rich-text',
-      defaultValue: null,
-      span: 24,
-      layout: 'colFormItem',
-      required: true,
-      regList: [],
-      document: 'http://tinymce.ax-z.cn'
-    },
-    placeholder: '',
-    height: 300, // 编辑器高度
-    branding: false // 隐藏右下角品牌烙印
-  }
+  // {
+  //   __config__: {
+  //     label: '编辑器',
+  //     showLabel: true,
+  //     changeTag: true,
+  //     labelWidth: null,
+  //     tag: 'tinymce',
+  //     tagIcon: 'rich-text',
+  //     defaultValue: null,
+  //     span: 24,
+  //     layout: 'colFormItem',
+  //     required: true,
+  //     regList: [],
+  //     document: 'http://tinymce.ax-z.cn'
+  //   },
+  //   placeholder: '',
+  //   height: 300, // 编辑器高度
+  //   branding: false // 隐藏右下角品牌烙印
+  // }
 ];
 
 // 选择型组件 【左面板】
@@ -331,52 +331,52 @@ export const selectComponents = [
     max: null,
     disabled: false
   },
-  {
-    __config__: {
-      label: '开关',
-      tag: 'el-switch',
-      tagIcon: 'switch',
-      defaultValue: false,
-      span: 24,
-      showLabel: true,
-      labelWidth: null,
-      layout: 'colFormItem',
-      required: true,
-      regList: [],
-      changeTag: true,
-      document: 'https://element.eleme.cn/#/zh-CN/component/switch'
-    },
-    style: {},
-    disabled: false,
-    'active-text': '',
-    'inactive-text': '',
-    'active-color': null,
-    'inactive-color': null,
-    'active-value': true,
-    'inactive-value': false
-  },
-  {
-    __config__: {
-      label: '滑块',
-      tag: 'el-slider',
-      tagIcon: 'slider',
-      defaultValue: null,
-      span: 24,
-      showLabel: true,
-      layout: 'colFormItem',
-      labelWidth: null,
-      required: true,
-      regList: [],
-      changeTag: true,
-      document: 'https://element.eleme.cn/#/zh-CN/component/slider'
-    },
-    disabled: false,
-    min: 0,
-    max: 100,
-    step: 1,
-    'show-stops': false,
-    range: false
-  },
+  // {
+  //   __config__: {
+  //     label: '开关',
+  //     tag: 'el-switch',
+  //     tagIcon: 'switch',
+  //     defaultValue: false,
+  //     span: 24,
+  //     showLabel: true,
+  //     labelWidth: null,
+  //     layout: 'colFormItem',
+  //     required: true,
+  //     regList: [],
+  //     changeTag: true,
+  //     document: 'https://element.eleme.cn/#/zh-CN/component/switch'
+  //   },
+  //   style: {},
+  //   disabled: false,
+  //   'active-text': '',
+  //   'inactive-text': '',
+  //   'active-color': null,
+  //   'inactive-color': null,
+  //   'active-value': true,
+  //   'inactive-value': false
+  // },
+  // {
+  //   __config__: {
+  //     label: '滑块',
+  //     tag: 'el-slider',
+  //     tagIcon: 'slider',
+  //     defaultValue: null,
+  //     span: 24,
+  //     showLabel: true,
+  //     layout: 'colFormItem',
+  //     labelWidth: null,
+  //     required: true,
+  //     regList: [],
+  //     changeTag: true,
+  //     document: 'https://element.eleme.cn/#/zh-CN/component/slider'
+  //   },
+  //   disabled: false,
+  //   min: 0,
+  //   max: 100,
+  //   step: 1,
+  //   'show-stops': false,
+  //   range: false
+  // },
   {
     __config__: {
       label: '时间选择',
@@ -477,48 +477,48 @@ export const selectComponents = [
     'value-format': 'yyyy-MM-dd',
     readonly: false
   },
-  {
-    __config__: {
-      label: '评分',
-      tag: 'el-rate',
-      tagIcon: 'rate',
-      defaultValue: 0,
-      span: 24,
-      showLabel: true,
-      labelWidth: null,
-      layout: 'colFormItem',
-      required: true,
-      regList: [],
-      changeTag: true,
-      document: 'https://element.eleme.cn/#/zh-CN/component/rate'
-    },
-    style: {},
-    max: 5,
-    'allow-half': false,
-    'show-text': false,
-    'show-score': false,
-    disabled: false
-  },
-  {
-    __config__: {
-      label: '颜色选择',
-      tag: 'el-color-picker',
-      tagIcon: 'color',
-      span: 24,
-      defaultValue: null,
-      showLabel: true,
-      labelWidth: null,
-      layout: 'colFormItem',
-      required: true,
-      regList: [],
-      changeTag: true,
-      document: 'https://element.eleme.cn/#/zh-CN/component/color-picker'
-    },
-    'show-alpha': false,
-    'color-format': '',
-    disabled: false,
-    size: 'medium'
-  },
+  // {
+  //   __config__: {
+  //     label: '评分',
+  //     tag: 'el-rate',
+  //     tagIcon: 'rate',
+  //     defaultValue: 0,
+  //     span: 24,
+  //     showLabel: true,
+  //     labelWidth: null,
+  //     layout: 'colFormItem',
+  //     required: true,
+  //     regList: [],
+  //     changeTag: true,
+  //     document: 'https://element.eleme.cn/#/zh-CN/component/rate'
+  //   },
+  //   style: {},
+  //   max: 5,
+  //   'allow-half': false,
+  //   'show-text': false,
+  //   'show-score': false,
+  //   disabled: false
+  // },
+  // {
+  //   __config__: {
+  //     label: '颜色选择',
+  //     tag: 'el-color-picker',
+  //     tagIcon: 'color',
+  //     span: 24,
+  //     defaultValue: null,
+  //     showLabel: true,
+  //     labelWidth: null,
+  //     layout: 'colFormItem',
+  //     required: true,
+  //     regList: [],
+  //     changeTag: true,
+  //     document: 'https://element.eleme.cn/#/zh-CN/component/color-picker'
+  //   },
+  //   'show-alpha': false,
+  //   'color-format': '',
+  //   disabled: false,
+  //   size: 'medium'
+  // },
   {
     __config__: {
       label: '上传',
@@ -551,129 +551,129 @@ export const selectComponents = [
   }
 ];
 
-// 布局型组件 【左面板】
-export const layoutComponents = [
-  {
-    __config__: {
-      layout: 'rowFormItem',
-      tagIcon: 'row',
-      label: '行容器',
-      layoutTree: true,
-      document:
-        'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
-    },
-    type: 'default',
-    justify: 'start',
-    align: 'top'
-  },
-  {
-    __config__: {
-      label: '按钮',
-      showLabel: true,
-      changeTag: true,
-      labelWidth: null,
-      tag: 'el-button',
-      tagIcon: 'button',
-      span: 24,
-      layout: 'colFormItem',
-      document: 'https://element.eleme.cn/#/zh-CN/component/button'
-    },
-    __slot__: {
-      default: '主要按钮'
-    },
-    type: 'primary',
-    icon: 'el-icon-search',
-    round: false,
-    size: 'medium',
-    plain: false,
-    circle: false,
-    disabled: false
-  },
-  {
-    __config__: {
-      layout: 'colFormItem',
-      tagIcon: 'table',
-      tag: 'el-table',
-      document: 'https://element.eleme.cn/#/zh-CN/component/table',
-      span: 24,
-      formId: 101,
-      renderKey: 1595761764203,
-      componentName: 'row101',
-      showLabel: true,
-      changeTag: true,
-      labelWidth: null,
-      label: '表格[开发中]',
-      dataType: 'dynamic',
-      method: 'get',
-      dataPath: 'list',
-      dataConsumer: 'data',
-      url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
-      children: [
-        {
-          __config__: {
-            layout: 'raw',
-            tag: 'el-table-column',
-            renderKey: 15957617660153
-          },
-          prop: 'date',
-          label: '日期'
-        },
-        {
-          __config__: {
-            layout: 'raw',
-            tag: 'el-table-column',
-            renderKey: 15957617660152
-          },
-          prop: 'address',
-          label: '地址'
-        },
-        {
-          __config__: {
-            layout: 'raw',
-            tag: 'el-table-column',
-            renderKey: 15957617660151
-          },
-          prop: 'name',
-          label: '名称'
-        },
-        {
-          __config__: {
-            layout: 'raw',
-            tag: 'el-table-column',
-            renderKey: 1595774496335,
-            children: [
-              {
-                __config__: {
-                  label: '按钮',
-                  tag: 'el-button',
-                  tagIcon: 'button',
-                  layout: 'raw',
-                  renderKey: 1595779809901
-                },
-                __slot__: {
-                  default: '主要按钮'
-                },
-                type: 'primary',
-                icon: 'el-icon-search',
-                round: false,
-                size: 'medium'
-              }
-            ]
-          },
-          label: '操作'
-        }
-      ]
-    },
-    data: [],
-    directives: [
-      {
-        name: 'loading',
-        value: true
-      }
-    ],
-    border: true,
-    type: 'default',
-    justify: 'start',
-    align: 'top'
-  }
-];
+// // 布局型组件 【左面板】
+// export const layoutComponents = [
+//   {
+//     __config__: {
+//       layout: 'rowFormItem',
+//       tagIcon: 'row',
+//       label: '行容器',
+//       layoutTree: true,
+//       document:
+//         'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
+//     },
+//     type: 'default',
+//     justify: 'start',
+//     align: 'top'
+//   },
+//   {
+//     __config__: {
+//       label: '按钮',
+//       showLabel: true,
+//       changeTag: true,
+//       labelWidth: null,
+//       tag: 'el-button',
+//       tagIcon: 'button',
+//       span: 24,
+//       layout: 'colFormItem',
+//       document: 'https://element.eleme.cn/#/zh-CN/component/button'
+//     },
+//     __slot__: {
+//       default: '主要按钮'
+//     },
+//     type: 'primary',
+//     icon: 'el-icon-search',
+//     round: false,
+//     size: 'medium',
+//     plain: false,
+//     circle: false,
+//     disabled: false
+//   },
+//   {
+//     __config__: {
+//       layout: 'colFormItem',
+//       tagIcon: 'table',
+//       tag: 'el-table',
+//       document: 'https://element.eleme.cn/#/zh-CN/component/table',
+//       span: 24,
+//       formId: 101,
+//       renderKey: 1595761764203,
+//       componentName: 'row101',
+//       showLabel: true,
+//       changeTag: true,
+//       labelWidth: null,
+//       label: '表格[开发中]',
+//       dataType: 'dynamic',
+//       method: 'get',
+//       dataPath: 'list',
+//       dataConsumer: 'data',
+//       url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
+//       children: [
+//         {
+//           __config__: {
+//             layout: 'raw',
+//             tag: 'el-table-column',
+//             renderKey: 15957617660153
+//           },
+//           prop: 'date',
+//           label: '日期'
+//         },
+//         {
+//           __config__: {
+//             layout: 'raw',
+//             tag: 'el-table-column',
+//             renderKey: 15957617660152
+//           },
+//           prop: 'address',
+//           label: '地址'
+//         },
+//         {
+//           __config__: {
+//             layout: 'raw',
+//             tag: 'el-table-column',
+//             renderKey: 15957617660151
+//           },
+//           prop: 'name',
+//           label: '名称'
+//         },
+//         {
+//           __config__: {
+//             layout: 'raw',
+//             tag: 'el-table-column',
+//             renderKey: 1595774496335,
+//             children: [
+//               {
+//                 __config__: {
+//                   label: '按钮',
+//                   tag: 'el-button',
+//                   tagIcon: 'button',
+//                   layout: 'raw',
+//                   renderKey: 1595779809901
+//                 },
+//                 __slot__: {
+//                   default: '主要按钮'
+//                 },
+//                 type: 'primary',
+//                 icon: 'el-icon-search',
+//                 round: false,
+//                 size: 'medium'
+//               }
+//             ]
+//           },
+//           label: '操作'
+//         }
+//       ]
+//     },
+//     data: [],
+//     directives: [
+//       {
+//         name: 'loading',
+//         value: true
+//       }
+//     ],
+//     border: true,
+//     type: 'default',
+//     justify: 'start',
+//     align: 'top'
+//   }
+// ];

src/components/FormGenerator/components/generator/drawingDefalut.js

@@ -1,39 +1,39 @@
 export default [
-  {
-    __config__: {
-      label: '单行文本',
-      labelWidth: null,
-      showLabel: true,
-      changeTag: true,
-      tag: 'el-input',
-      tagIcon: 'input',
-      defaultValue: undefined,
-      required: true,
-      layout: 'colFormItem',
-      span: 24,
-      document: 'https://element.eleme.cn/#/zh-CN/component/input',
-      // 正则校验规则
-      regList: [
-        {
-          pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
-          message: '手机号格式错误'
-        }
-      ]
-    },
-    // 组件的插槽属性
-    __slot__: {
-      prepend: '',
-      append: ''
-    },
-    __vModel__: 'mobile',
-    placeholder: '请输入手机号',
-    style: { width: '100%' },
-    clearable: true,
-    'prefix-icon': 'el-icon-mobile',
-    'suffix-icon': '',
-    maxlength: 11,
-    'show-word-limit': true,
-    readonly: false,
-    disabled: false
-  }
+  // {
+  //   __config__: {
+  //     label: '单行文本',
+  //     labelWidth: null,
+  //     showLabel: true,
+  //     changeTag: true,
+  //     tag: 'el-input',
+  //     tagIcon: 'input',
+  //     defaultValue: undefined,
+  //     required: true,
+  //     layout: 'colFormItem',
+  //     span: 24,
+  //     document: 'https://element.eleme.cn/#/zh-CN/component/input',
+  //     // 正则校验规则
+  //     regList: [
+  //       {
+  //         pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
+  //         message: '手机号格式错误'
+  //       }
+  //     ]
+  //   },
+  //   // 组件的插槽属性
+  //   __slot__: {
+  //     prepend: '',
+  //     append: ''
+  //   },
+  //   __vModel__: 'mobile',
+  //   placeholder: '请输入手机号',
+  //   style: { width: '100%' },
+  //   clearable: true,
+  //   'prefix-icon': 'el-icon-mobile',
+  //   'suffix-icon': '',
+  //   maxlength: 11,
+  //   'show-word-limit': true,
+  //   readonly: false,
+  //   disabled: false
+  // }
 ];

src/components/FormGenerator/index.vue

@@ -3,14 +3,15 @@
     <div class="left-board">
       <div class="logo-wrapper">
         <div class="logo">
-          <img :src="logo" alt="logo" /> Form Generator
-          <a
-            class="github"
-            href="https://github.com/JakHuang/form-generator"
-            target="_blank"
-          >
-            <img src="https://github.githubassets.com/pinned-octocat.svg" alt />
-          </a>
+          <img :src="logo" alt="logo" />
+          <!--          Form Generator-->
+          <!--          <a-->
+          <!--            class="github"-->
+          <!--            href="https://github.com/JakHuang/form-generator"-->
+          <!--            target="_blank"-->
+          <!--          >-->
+          <!--            <img src="https://github.githubassets.com/pinned-octocat.svg" alt />-->
+          <!--          </a>-->
         </div>
       </div>
       <el-scrollbar class="left-scrollbar">
@@ -36,8 +37,8 @@
                 @click="addComponent(element)"
               >
                 <div class="components-body">
-                  <svg-icon :icon-class="element.__config__.tagIcon" />
-                  {{ element.__config__.label }}
+                  <svg-icon :icon-class="element?.__config__?.tagIcon" />
+                  {{ element?.__config__?.label }}
                 </div>
               </div>
             </draggable>
@@ -55,8 +56,11 @@
         <el-button icon="el-icon-view" type="text" @click="preview">
           预览
         </el-button>
-        <el-button icon="el-icon-view" type="text" @click="showJson">
-          查看json
+        <!--        <el-button icon="el-icon-view" type="text" @click="showJson">-->
+        <!--          查看json-->
+        <!--        </el-button>-->
+        <el-button icon="el-icon-check" type="text" @click="saveJson">
+          保存
         </el-button>
         <!-- <el-button icon="el-icon-download" type="text" @click="download">
           导出vue文件
@@ -101,7 +105,7 @@
               />
             </draggable>
             <div v-show="!drawingList.length" class="empty-info">
-              从左侧拖入或点选组件进行表单设计
+              点选组件进行表单设计
             </div>
           </el-form>
         </el-row>
@@ -109,6 +113,7 @@
     </div>
 
     <right-panel
+      :key="rightPanelKey"
       :active-data="activeData"
       :form-conf="formConf"
       :show-field="!!drawingList.length"
@@ -251,9 +256,9 @@
         selectComponents,
         layoutComponents,
         labelWidth: 100,
-        drawingList: drawingDefalut,
+        drawingList: [],
         drawingData: {},
-        activeId: drawingDefalut[0].formId,
+        activeId: null,
         drawerVisible: false,
         formData: {},
         dialogVisible: false,
@@ -261,7 +266,8 @@
         jsonDrawerVisible: false,
         generateConf: null,
         showFileName: false,
-        activeData: drawingDefalut[0],
+        activeData: {},
+        rightPanelKey: 0,
         saveDrawingListDebounce: debounce(340, saveDrawingList),
         saveIdGlobalDebounce: debounce(340, saveIdGlobal),
         leftComponents: [
@@ -272,11 +278,11 @@
           {
             title: '选择型组件',
             list: selectComponents
-          },
-          {
-            title: '布局型组件',
-            list: layoutComponents
           }
+          // {
+          //   title: '布局型组件',
+          //   list: layoutComponents
+          // }
         ]
       };
     },
@@ -315,15 +321,15 @@
       }
     },
     mounted() {
-      if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
-        this.drawingList = drawingListInDB;
-      } else {
-        this.drawingList = drawingDefalut;
-      }
-      this.activeFormItem(this.drawingList[0]);
-      if (formConfInDB) {
-        this.formConf = formConfInDB;
-      }
+      // if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
+      //   this.drawingList = drawingListInDB;
+      // } else {
+      //   this.drawingList = drawingDefalut;
+      // }
+      // this.activeFormItem(this.drawingList[0]);
+      // if (formConfInDB) {
+      //   this.formConf = formConfInDB;
+      // }
       loadBeautifier((btf) => {
         beautifier = btf;
       });
@@ -395,6 +401,7 @@
         if (currentItem) {
           this.activeData = currentItem;
           this.activeId = currentItem.__config__.formId;
+          this.rightPanelKey++;
         }
       },
       onEnd(obj) {
@@ -500,6 +507,10 @@
         this.AssembleFormData();
         this.jsonDrawerVisible = true;
       },
+      saveJson() {
+        this.AssembleFormData();
+        this.$emit('submit', this.formData);
+      },
       onCopy() {
         this.$message.success('内容复制成功');
       },

src/components/FormGenerator/styles/home.scss

@@ -57,14 +57,14 @@ $lighterBlue: #409EFF;
   position: absolute;
   left: 0;
   top: 0;
-  height: calc(100vh - 162px);
+  height: 100%;
+  overflow: auto;
 }
 .left-scrollbar{
-  height: calc(100vh - 42px);
   overflow: hidden;
 }
 .center-scrollbar {
-  height: calc(100vh - 42px);
+  height: 97%;
   overflow: hidden;
   border-left: 1px solid #f1e8e8;
   border-right: 1px solid #f1e8e8;
@@ -135,7 +135,7 @@ $lighterBlue: #409EFF;
   box-sizing: border-box;
   & > .el-form {
     // 69 = 12+15+42
-    height: calc(100vh - 69px);
+    height: 100%;
   }
 }
 .drawing-board {

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -267,6 +267,7 @@
     },
     computed: {
       additionalModules() {
+        console.log(2222222222222222222);
         const Modules = [];
         // 仅保留用户自定义扩展模块
         if (this.onlyCustomizeAddi) {

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -2,194 +2,273 @@
   <div class="process-panel__container" :style="{ width: `${this.width}px` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
-        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType"
-                           :model="model" />
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-info"></i>常规</div
+        >
+        <element-base-info
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
       </el-collapse-item>
-      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
+      <el-collapse-item
+        name="condition"
+        v-if="elementType === 'Process'"
+        key="message"
+      >
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-s-comment"></i>消息与信号</div
+        >
         <signal-and-massage />
       </el-collapse-item>
-      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
-        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
+      <el-collapse-item
+        name="condition"
+        v-if="conditionFormVisible"
+        key="condition"
+      >
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-s-promotion"></i>流转条件</div
+        >
+        <flow-condition
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
       </el-collapse-item>
       <el-collapse-item name="condition" v-if="formVisible" key="form">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-order" />表单</div>
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-s-order" />表单</div
+        >
         <element-form :id="elementId" :type="elementType" />
+        <el-button type="primary" @click="handleConfigForm">配置动态表单</el-button>
       </el-collapse-item>
-      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
+      <el-collapse-item
+        name="distributionRules"
+        v-if="formVisible"
+        key="distributionRules"
+        class="distributionRules_wrap"
+      >
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-circle-plus"></i>分配规则</div
+        >
+        <!--        <element-properties :id="elementId" :type="elementType" />-->
+        <distribution-rules :id="elementId" :type="elementType" :model="model">
+        </distribution-rules>
+      </el-collapse-item>
+      <el-collapse-item
+        name="task"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="task"
+      >
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-s-claim"></i>任务</div
+        >
         <element-task :id="elementId" :type="elementType" />
       </el-collapse-item>
-      <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" key="multiInstance">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
-        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
+      <el-collapse-item
+        name="multiInstance"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="multiInstance"
+      >
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-s-help"></i>多实例</div
+        >
+        <element-multi-instance
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
       </el-collapse-item>
       <el-collapse-item name="listeners" key="listeners">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-message-solid"></i>执行监听器</div
+        >
         <element-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
-      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
+      <el-collapse-item
+        name="taskListeners"
+        v-if="elementType === 'UserTask'"
+        key="taskListeners"
+      >
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-message-solid"></i>任务监听器</div
+        >
         <user-task-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="extensions" key="extensions">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-circle-plus"></i>扩展属性</div
+        >
         <element-properties :id="elementId" :type="elementType" />
       </el-collapse-item>
+
       <el-collapse-item name="other" key="other">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
+        <div slot="title" class="panel-tab__title"
+          ><i class="el-icon-s-promotion"></i>其他</div
+        >
         <element-other-config :id="elementId" />
       </el-collapse-item>
     </el-collapse>
   </div>
 </template>
 <script>
-import ElementBaseInfo from "./base/ElementBaseInfo";
-import ElementOtherConfig from "./other/ElementOtherConfig";
-import ElementTask from "./task/ElementTask";
-import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
-import FlowCondition from "./flow-condition/FlowCondition";
-import SignalAndMassage from "./signal-message/SignalAndMessage";
-import ElementListeners from "./listeners/ElementListeners";
-import ElementProperties from "./properties/ElementProperties";
-import ElementForm from "./form/ElementForm";
-import UserTaskListeners from "./listeners/UserTaskListeners";
-/**
- * 侧边栏
- * @Author MiyueFE
- * @Home https://github.com/miyuesc
- * @Date 2021年3月31日18:57:51
- */
-export default {
-  name: "MyPropertiesPanel",
-  components: {
-    UserTaskListeners,
-    ElementForm,
-    ElementProperties,
-    ElementListeners,
-    SignalAndMassage,
-    FlowCondition,
-    ElementMultiInstance,
-    ElementTask,
-    ElementOtherConfig,
-    ElementBaseInfo
-  },
-  componentName: "MyPropertiesPanel",
-  props: {
-    bpmnModeler: Object,
-    prefix: {
-      type: String,
-      default: "camunda"
+  import ElementBaseInfo from './base/ElementBaseInfo';
+  import ElementOtherConfig from './other/ElementOtherConfig';
+  import ElementTask from './task/ElementTask';
+  import ElementMultiInstance from './multi-instance/ElementMultiInstance';
+  import FlowCondition from './flow-condition/FlowCondition';
+  import SignalAndMassage from './signal-message/SignalAndMessage';
+  import ElementListeners from './listeners/ElementListeners';
+  import ElementProperties from './properties/ElementProperties';
+  import ElementForm from './form/ElementForm';
+  import UserTaskListeners from './listeners/UserTaskListeners';
+
+  import distributionRules from './distribution-rules/index.vue';
+  /**
+   * 侧边栏
+   * @Author MiyueFE
+   * @Home https://github.com/miyuesc
+   * @Date 2021年3月31日18:57:51
+   */
+  export default {
+    name: 'MyPropertiesPanel',
+    components: {
+      distributionRules,
+      UserTaskListeners,
+      ElementForm,
+      ElementProperties,
+      ElementListeners,
+      SignalAndMassage,
+      FlowCondition,
+      ElementMultiInstance,
+      ElementTask,
+      ElementOtherConfig,
+      ElementBaseInfo
     },
-    width: {
-      type: Number,
-      default: 480
+    componentName: 'MyPropertiesPanel',
+    props: {
+      bpmnModeler: Object,
+      prefix: {
+        type: String,
+        default: 'camunda'
+      },
+      width: {
+        type: Number,
+        default: 480
+      },
+      idEditDisabled: {
+        type: Boolean,
+        default: false
+      },
+      model: Object // 流程模型的数据
     },
-    idEditDisabled: {
-      type: Boolean,
-      default: false
+    provide() {
+      return {
+        prefix: this.prefix,
+        width: this.width
+      };
     },
-    model: Object, // 流程模型的数据
-  },
-  provide() {
-    return {
-      prefix: this.prefix,
-      width: this.width
-    };
-  },
-  data() {
-    return {
-      activeTab: "base",
-      elementId: "",
-      elementType: "",
-      elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
-      conditionFormVisible: false, // 流转条件设置
-      formVisible: false // 表单配置
-    };
-  },
-  watch: {
-    elementId: {
-      handler() {
-        this.activeTab = "base";
-      }
-    }
-  },
-  created() {
-    this.initModels();
-  },
-  methods: {
-    initModels() {
-      // 初始化 modeler 以及其他 moddle
-      if (!this.bpmnModeler) {
-        // 避免加载时 流程图 并未加载完成
-        this.timer = setTimeout(() => this.initModels(), 10);
-        return;
-      }
-      if (this.timer) clearTimeout(this.timer);
-      window.bpmnInstances = {
-        modeler: this.bpmnModeler,
-        modeling: this.bpmnModeler.get("modeling"),
-        moddle: this.bpmnModeler.get("moddle"),
-        eventBus: this.bpmnModeler.get("eventBus"),
-        bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
-        elementFactory: this.bpmnModeler.get("elementFactory"),
-        elementRegistry: this.bpmnModeler.get("elementRegistry"),
-        replace: this.bpmnModeler.get("replace"),
-        selection: this.bpmnModeler.get("selection")
+    data() {
+      return {
+        activeTab: 'base',
+        elementId: '',
+        elementType: '',
+        elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
+        conditionFormVisible: false, // 流转条件设置
+        formVisible: false // 表单配置
       };
-      this.getActiveElement();
     },
-    getActiveElement() {
-      // 初始第一个选中元素 bpmn:Process
-      this.initFormOnChanged(null);
-      this.bpmnModeler.on("import.done", e => {
-        this.initFormOnChanged(null);
-      });
-      // 监听选择事件，修改当前激活的元素以及表单
-      this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
-        this.initFormOnChanged(newSelection[0] || null);
-      });
-      this.bpmnModeler.on("element.changed", ({ element }) => {
-        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
-        if (element && element.id === this.elementId) {
-          this.initFormOnChanged(element);
+    watch: {
+      elementId: {
+        handler() {
+          this.activeTab = 'base';
         }
-      });
-    },
-    // 初始化数据
-    initFormOnChanged(element) {
-      let activatedElement = element;
-      if (!activatedElement) {
-        activatedElement =
-          window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
-          window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
       }
-      if (!activatedElement) return;
-      console.log(`
+    },
+    created() {
+      this.initModels();
+    },
+    methods: {
+      handleConfigForm(){
+
+      },
+      initModels() {
+        // 初始化 modeler 以及其他 moddle
+        if (!this.bpmnModeler) {
+          // 避免加载时 流程图 并未加载完成
+          this.timer = setTimeout(() => this.initModels(), 10);
+          return;
+        }
+        if (this.timer) clearTimeout(this.timer);
+        window.bpmnInstances = {
+          modeler: this.bpmnModeler,
+          modeling: this.bpmnModeler.get('modeling'),
+          moddle: this.bpmnModeler.get('moddle'),
+          eventBus: this.bpmnModeler.get('eventBus'),
+          bpmnFactory: this.bpmnModeler.get('bpmnFactory'),
+          elementFactory: this.bpmnModeler.get('elementFactory'),
+          elementRegistry: this.bpmnModeler.get('elementRegistry'),
+          replace: this.bpmnModeler.get('replace'),
+          selection: this.bpmnModeler.get('selection')
+        };
+        this.getActiveElement();
+      },
+      getActiveElement() {
+        // 初始第一个选中元素 bpmn:Process
+        this.initFormOnChanged(null);
+        this.bpmnModeler.on('import.done', (e) => {
+          this.initFormOnChanged(null);
+        });
+        // 监听选择事件，修改当前激活的元素以及表单
+        this.bpmnModeler.on('selection.changed', ({ newSelection }) => {
+          this.initFormOnChanged(newSelection[0] || null);
+        });
+        this.bpmnModeler.on('element.changed', ({ element }) => {
+          // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+          if (element && element.id === this.elementId) {
+            this.initFormOnChanged(element);
+          }
+        });
+      },
+      // 初始化数据
+      initFormOnChanged(element) {
+        let activatedElement = element;
+        if (!activatedElement) {
+          activatedElement =
+            window.bpmnInstances.elementRegistry.find(
+              (el) => el.type === 'bpmn:Process'
+            ) ??
+            window.bpmnInstances.elementRegistry.find(
+              (el) => el.type === 'bpmn:Collaboration'
+            );
+        }
+        if (!activatedElement) return;
+        console.log(`
               ----------
       select element changed:
                 id:  ${activatedElement.id}
               type:  ${activatedElement.businessObject.$type}
               ----------
               `);
-      console.log("businessObject: ", activatedElement.businessObject);
-      window.bpmnInstances.bpmnElement = activatedElement;
-      this.bpmnElement = activatedElement;
-      this.elementId = activatedElement.id;
-      this.elementType = activatedElement.type.split(":")[1] || "";
-      this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
-      this.conditionFormVisible = !!(
-        this.elementType === "SequenceFlow" &&
-        activatedElement.source &&
-        activatedElement.source.type.indexOf("StartEvent") === -1
-      );
-      this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
-    },
-    beforeDestroy() {
-      window.bpmnInstances = null;
+        console.log('businessObject: ', activatedElement.businessObject);
+        window.bpmnInstances.bpmnElement = activatedElement;
+        this.bpmnElement = activatedElement;
+        this.elementId = activatedElement.id;
+        this.elementType = activatedElement.type.split(':')[1] || '';
+        this.elementBusinessObject = JSON.parse(
+          JSON.stringify(activatedElement.businessObject)
+        );
+        this.conditionFormVisible = !!(
+          this.elementType === 'SequenceFlow' &&
+          activatedElement.source &&
+          activatedElement.source.type.indexOf('StartEvent') === -1
+        );
+        this.formVisible =
+          this.elementType === 'UserTask' || this.elementType === 'StartEvent';
+      },
+      beforeDestroy() {
+        window.bpmnInstances = null;
+      }
     }
-  }
-};
+  };
 </script>
+

src/components/bpmnProcessDesigner/package/penal/distribution-rules/index.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <el-form
+      ref="taskAssignRuleForm"
+      :model="form"
+      :rules="rules"
+      label-width="110px"
+    >
+      <el-form-item label="规则类型" prop="type">
+        <el-select
+          v-model="form.type"
+          clearable
+          style="width: 100%"
+          @change="emptyingRules"
+        >
+          <el-option
+            v-for="dict in this.dict[
+              this.dictEnum['工作流任务分配规则的类型']
+            ] || []"
+            :key="parseInt(dict.dictCode)"
+            :label="dict.dictValue"
+            :value="parseInt(dict.dictCode)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
+        <el-select
+          v-model="form.roleIds"
+          multiple
+          clearable
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in roleOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="form.type === 20 || form.type === 21"
+        label="指定部门"
+        prop="deptIds"
+      >
+        <!--        <treeSelect-->
+        <!--          v-model="form.deptIds"-->
+        <!--          :options="deptTreeOptions"-->
+        <!--          multiple-->
+        <!--          flat-->
+        <!--          :defaultExpandLevel="3"-->
+        <!--          placeholder="请选择指定部门"-->
+        <!--          :normalizer="normalizer"-->
+        <!--        />-->
+
+        <ele-tree-select
+          clearable
+          multiple
+          ref="planTreeRef"
+          filterable
+          :data="deptTreeOptions"
+          v-model="form.deptIds"
+          :checkStrictly="true"
+          childrenKey="children"
+          node-key="id"
+          valueKey="id"
+          labelKey="name"
+          placeholder="请选择"
+          default-expand-all
+        />
+      </el-form-item>
+      <el-form-item v-if="form.type === 22" label="指定工种" prop="workTypeIds">
+        <el-select
+          v-model="form.workTypeIds"
+          multiple
+          clearable
+          style="width: 100%"
+        >
+          <el-option
+            v-for="dict in this.dict[this.dictEnum['工种']] || []"
+            :key="dict.dictCode"
+            :label="dict.dictValue"
+            :value="dict.dictCode"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="form.type === 30 || form.type === 31 || form.type === 32"
+        label="指定用户"
+        prop="userIds"
+      >
+        <el-select
+          v-model="form.userIds"
+          multiple
+          clearable
+          style="width: 100%"
+          :filterable="true"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="form.type === 40"
+        label="指定用户组"
+        prop="userGroupIds"
+      >
+        <el-select
+          v-model="form.userGroupIds"
+          multiple
+          clearable
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in userGroupOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="form.type === 50" label="指定脚本" prop="scripts">
+        <el-select
+          v-model="form.scripts"
+          multiple
+          clearable
+          style="width: 100%"
+        >
+          <el-option
+            v-for="dict in this.dict[
+              this.dictEnum['工作流任务分配自定义脚本']
+            ] || []"
+            :key="dict.dictCode"
+            :label="dict.dictValue"
+            :value="dict.dictCode"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="form.type === 60"
+        label="自定义变量"
+        prop="variableName"
+      >
+        <el-input
+          placeholder="请输入自定义变量名称"
+          v-model="form.variableName"
+          clearable
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="form.type === 70" label="审核方向" prop="direction">
+        <el-select v-model="form.direction" clearable style="width: 100%">
+          <el-option key="0" label="从下到上" value="0" />
+          <el-option key="1" label="从上到下" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="form.type === 70"
+        label="指定部门负责人"
+        prop="topLevel"
+      >
+        <el-select
+          v-if="form.direction == 0"
+          v-model="form.topLevel"
+          clearable
+          style="width: 100%"
+        >
+          <el-option key="1" label="直接部门负责人" value="1" />
+          <el-option key="2" label="上二级部门负责人" value="2" />
+          <el-option key="3" label="上三级部门负责人" value="3" />
+          <el-option key="4" label="上四级部门负责人" value="4" />
+          <el-option key="5" label="上五级部门负责人" value="5" />
+          <el-option key="6" label="上六级部门负责人" value="6" />
+          <el-option key="7" label="上七级部门负责人" value="7" />
+          <el-option key="8" label="上八级部门负责人" value="8" />
+          <el-option key="9" label="上九级部门负责人" value="9" />
+        </el-select>
+        <el-select v-else v-model="form.topLevel" clearable style="width: 100%">
+          <el-option key="99" label="最高级部门负责人" value="99" />
+          <el-option key="2" label="第二层部门负责人" value="2" />
+          <el-option key="3" label="第三层部门负责人" value="3" />
+          <el-option key="4" label="第四层部门负责人" value="4" />
+          <el-option key="5" label="第五层部门负责人" value="5" />
+          <el-option key="6" label="第六层部门负责人" value="6" />
+          <el-option key="7" label="第七层部门负责人" value="7" />
+          <el-option key="8" label="第八层部门负责人" value="8" />
+          <el-option key="9" label="第九层部门负责人" value="9" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+  import treeSelect from '@riophae/vue-treeselect';
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+  import { listRoles } from '@/api/system/role';
+  import {
+    listAllUserBind,
+    listOrganizations
+  } from '@/api/system/organization';
+  import { listSimpleUserGroups } from '@/api/bpm/userGroup';
+  import dictMixins from '@/mixins/dictMixins';
+  export default {
+    name: 'index',
+    components: { treeSelect },
+    mixins: [dictMixins],
+    props: {
+      model: {
+        type: Object,
+        default: () => {}
+      }
+    },
+    data() {
+      return {
+        form: {
+          options: [],
+          roleIds: [],
+          userIds: [],
+          deptIds: [],
+          workTypeIds: [],
+          userGroupIds: [],
+          scripts: [],
+          variableName: '',
+          topLevel: ''
+        },
+        userGroupOptions: [],
+        userOptions: [],
+        deptTreeOptions: [],
+        roleOptions: [],
+        rules: {}
+      };
+    },
+    created() {
+      this.requestDict('工作流任务分配规则的类型');
+      this.requestDict('工作流任务分配自定义脚本');
+      this.requestDict('工种');
+      this.init0();
+    },
+    methods: {
+      /** 初始化 */
+      init0() {
+        // 设置可见
+        // 获得列表
+
+        // 获得角色列表
+        this.roleOptions = [];
+        listRoles({
+          current: 1,
+          size: 9999
+        }).then((data) => {
+          this.roleOptions.push(...data.list);
+        });
+        // 获得部门列表
+        this.deptOptions = [];
+        this.deptTreeOptions = [];
+        listOrganizations().then((data) => {
+          this.deptOptions.push(...data);
+          this.deptTreeOptions.push(...this.handleTree(data, 'id'));
+        });
+        // 获得岗位列表 暂无岗位概念
+        this.postOptions = [];
+        /*listSimplePosts().then(response => {
+        this.postOptions.push(...response.data);
+      });*/
+        // 获得用户列表
+        this.userOptions = [];
+        listAllUserBind().then((data) => {
+          this.userOptions.push(...data);
+        });
+        // 获得用户组列表
+        this.userGroupOptions = [];
+        listSimpleUserGroups().then((response) => {
+          this.userGroupOptions.push(...response);
+        });
+      },
+      // 选择规则清空上一次选择内容
+      emptyingRules() {
+        this.form.options = [];
+        this.form.roleIds = [];
+        this.form.deptIds = [];
+        this.form.workTypeIds = [];
+        this.form.userIds = [];
+        this.form.userGroupIds = [];
+        this.form.scripts = [];
+        this.form.variableName = '';
+      },
+      /**
+       * 构造树型结构数据
+       * @param {*} data 数据源
+       * @param {*} id id字段 默认 'id'
+       * @param {*} parentId 父节点字段 默认 'parentId'
+       * @param {*} children 孩子节点字段 默认 'children'
+       * @param {*} rootId 根Id 默认 0
+       */
+      handleTree(data, id, parentId, children, rootId) {
+        id = id || 'id';
+        parentId = parentId || 'parentId';
+        children = children || 'children';
+        rootId =
+          rootId ||
+          Math.min.apply(
+            Math,
+            data.map((item) => {
+              return item[parentId];
+            })
+          ) ||
+          0;
+        //对源数据深度克隆
+        const cloneData = JSON.parse(JSON.stringify(data));
+        //循环所有项
+        const treeData = cloneData.filter((father) => {
+          let branchArr = cloneData.filter((child) => {
+            //返回每一项的子级数组
+            return father[id] == child[parentId];
+          });
+          branchArr.length > 0 ? (father.children = branchArr) : '';
+          //返回第一层
+          return father[parentId] == rootId;
+        });
+        return treeData !== '' ? treeData : data;
+      },
+
+      // 格式化部门的下拉框
+      normalizer(node) {
+        return {
+          id: node.id,
+          label: node.name,
+          children: node.children
+        };
+      }
+    }
+  };
+</script>
+<style scoped lang="scss">
+  ::v-deep .vue-treeselect__menu-container {
+    z-index: 9999999;
+  }
+</style>

src/views/bpm/model/components/modelSearch.vue

@@ -9,9 +9,18 @@
     <el-row :gutter="15">
       <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
         <el-form-item label="流程分类：" prop="queryParams.processTypeId">
-          <el-select v-model="queryParams.processTypeId" clearable style="width: 100%">
-            <el-option v-for="item in processTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>
-          </el-select>
+          <ele-tree-select
+            clearable
+            ref="processTypeRef"
+            filterable
+            :data="processTypeList"
+            v-model="queryParams.processTypeId"
+            childrenKey="children"
+            valueKey="id"
+            labelKey="name"
+            placeholder="请选择"
+            default-expand-all
+          />
         </el-form-item>
       </el-col>
       <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">

src/views/bpm/model/index.vue

@@ -49,9 +49,23 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="110px">
         <el-form-item label="流程分类" prop="processTypeId">
-          <el-select v-model="form.processTypeId" clearable style="width: 100%" @change="handleProcessType">
-            <el-option v-for="item in processTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>
-          </el-select>
+          <!--          <el-select v-model="form.processTypeId" clearable style="width: 100%" @change="handleProcessType">-->
+          <!--            <el-option v-for="item in processTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>-->
+          <!--          </el-select>-->
+          <ele-tree-select
+            clearable
+            ref="processTypeRef"
+            filterable
+            :data="processTypeList"
+            v-model="form.processTypeId"
+            childrenKey="children"
+            valueKey="id"
+            labelKey="name"
+            placeholder="请选择"
+            default-expand-all
+            @change="handleProcessType"
+          />
+
         </el-form-item>
         <el-form-item label="流程标识" prop="key">
           <el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="!!form.id"/>
@@ -95,20 +109,20 @@
 
 <script>
 import {
+  createModel,
   deleteModel,
   deployModel,
-  getModelPage,
   getModel,
-  updateModelState,
-  createModel,
-  updateModel
+  getModelPage,
+  updateModel,
+  updateModelState
 } from "@/api/bpm/model";
 import Pagination from '@/components/Pagination';
 import dictMixins from '@/mixins/dictMixins';
 import modelSearch from './components/modelSearch.vue';
 import taskAssignRuleDialog from '../taskAssignRule/taskAssignRuleDialog.vue';
-import {getProcessTypePageAPI} from "@/api/bpm/processClass";
-
+import {getProduceTreeByCode} from "@/api/bpm/processClass";
+import {getTreeByPid} from "@/api/classifyManage";
 export default {
   mixins: [dictMixins],
   name: 'BpmModel',
@@ -244,14 +258,17 @@ export default {
   methods: {
     handleProcessType(val) {
       if (!val) return this.form.processTypeName = ''
-      this.form.processTypeName = this.processTypeList.find(item => item.id == val)?.name
+      let node = this.$refs.processTypeRef.$refs.tree.getCurrentNode()
+      this.form.processTypeName = node.name
     },
     async getProcessTypeList() {
-      const {list} = await getProcessTypePageAPI({
-        pageNum: 1,
-        size: 9999,
-      });
-      this.processTypeList = list
+      this.processTypeList = []
+      const data = await getProduceTreeByCode('PROCESS001')
+
+      if (data[0]?.id) {
+        const res = await getTreeByPid(data[0]?.id)
+        this.processTypeList = res.data[0]?.children || []
+      }
     },
 
     /* 表格数据源 */

src/views/bpm/model/modelEditor.vue

@@ -52,17 +52,42 @@ export default {
   },
   created() {
     // 如果 modelId 非空，说明是修改流程模型
-    const modelId = this.$route.query && this.$route.query.modelId
-    if (modelId) {
-      getModel(modelId).then(data => {
-        this.xmlString = data.bpmnXml
-        this.model = {
-          ...data,
-          bpmnXml: undefined, // 清空 bpmnXml 属性
-        }
-        // this.controlForm.processId = response.data.key
-      })
-    }
+    this.$nextTick(()=>{
+      const modelId = this.$route.query && this.$route.query.modelId
+      if (modelId) {
+        getModel(modelId).then(data => {
+          this.xmlString = data.bpmnXml
+          this.model = {
+            ...data,
+            bpmnXml: undefined, // 清空 bpmnXml 属性
+          }
+
+          // this.controlForm.processId = response.data.key
+        })
+
+      }
+    })
+  },
+  activated() {
+    // 如果 modelId 非空，说明是修改流程模型
+    this.$nextTick(()=>{
+      const modelId = this.$route.query && this.$route.query.modelId
+      if (modelId) {
+        getModel(modelId).then(data => {
+          this.xmlString = data.bpmnXml
+          this.model = {
+            ...data,
+            bpmnXml: undefined, // 清空 bpmnXml 属性
+          }
+
+          // this.controlForm.processId = response.data.key
+        })
+
+      }
+    })
+  },
+  deactivated() {
+    this.$destroy()
   },
   methods: {
     initModeler(modeler) {

src/views/bpm/processClass/components/edit.vue

@@ -11,6 +11,24 @@
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="50px">
       <el-row>
+        <el-col :span="24">
+          <el-form-item
+            label="父级"
+            prop="parentId">
+            <ele-tree-select
+              clearable
+              ref="projectRef"
+              filterable
+              :data="projectList"
+              v-model="form.parentId"
+              childrenKey="sonTreeList"
+              valueKey="id"
+              labelKey="name"
+              placeholder="请选择"
+              default-expand-all
+            />
+          </el-form-item>
+        </el-col>
         <el-col :span="24">
           <el-form-item
             label="名称"
@@ -57,6 +75,7 @@ export default {
       return {
         id: '',
         name: '',
+        parentId: '',
         remark: '',
       };
     };

src/views/bpm/taskAssignRule/taskAssignRuleDialog.vue

@@ -212,6 +212,51 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item v-if="form.type === 70" label="审核方向" prop="direction">
+          <el-select
+            v-model="form.direction"
+            clearable
+            style="width: 100%"
+            @change="handleChangeDirection"
+          >
+            <el-option key="0" label="从下到上" value="0"/>
+            <el-option key="1" label="从上到下" value="1"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.type === 70" label="指定部门负责人" prop="topLevel">
+          <el-select
+            v-if="form.direction==0"
+            v-model="form.topLevel"
+            clearable
+            style="width: 100%"
+          >
+            <el-option key="1" label="直接部门负责人" value="1"/>
+            <el-option key="2" label="上二级部门负责人" value="2"/>
+            <el-option key="3" label="上三级部门负责人" value="3"/>
+            <el-option key="4" label="上四级部门负责人" value="4"/>
+            <el-option key="5" label="上五级部门负责人" value="5"/>
+            <el-option key="6" label="上六级部门负责人" value="6"/>
+            <el-option key="7" label="上七级部门负责人" value="7"/>
+            <el-option key="8" label="上八级部门负责人" value="8"/>
+            <el-option key="9" label="上九级部门负责人" value="9"/>
+          </el-select>
+          <el-select
+            v-else
+            v-model="form.topLevel"
+            clearable
+            style="width: 100%"
+          >
+            <el-option key="99" label="最高级部门负责人" value="99"/>
+            <el-option key="2" label="第二层部门负责人" value="2"/>
+            <el-option key="3" label="第三层部门负责人" value="3"/>
+            <el-option key="4" label="第四层部门负责人" value="4"/>
+            <el-option key="5" label="第五层部门负责人" value="5"/>
+            <el-option key="6" label="第六层部门负责人" value="6"/>
+            <el-option key="7" label="第七层部门负责人" value="7"/>
+            <el-option key="8" label="第八层部门负责人" value="8"/>
+            <el-option key="9" label="第九层部门负责人" value="9"/>
+          </el-select>
+        </el-form-item>
         <el-form-item
           v-if="form.type === 60"
           label="自定义变量"
@@ -303,6 +348,9 @@
           scripts: [
             { required: true, message: '指定脚本不能为空', trigger: 'change' }
           ],
+          direction: [
+            { required: true, message: '审核方向不能为空', trigger: 'change' }
+          ],
           variableName: [
             { required: true, validator: varValidator, trigger: 'blur' }
           ]
@@ -423,8 +471,9 @@
           this.list = data;
         });
       },
+
       // 选择规则清空上一次选择内容
-      emptyingRules() {
+      emptyingRules(val) {
         this.form.options = [];
         this.form.roleIds = [];
         this.form.deptIds = [];
@@ -433,6 +482,12 @@
         this.form.userGroupIds = [];
         this.form.scripts = [];
         this.form.variableName = '';
+        this.$set(this.form,'direction',val=='70'?'0':'')
+        this.$set(this.form,'topLevel',val=='70'?'1':'')
+      },
+      // 选择规则清空上一次选择内容
+      handleChangeDirection(val) {
+        this.$set(this.form,'topLevel',val=='0'?'1':'99')
       },
       /** 处理修改任务分配规则的按钮操作 */
       handleUpdateTaskAssignRule(row) {
@@ -462,6 +517,10 @@
           this.form.userGroupIds.push(...row.options);
         } else if (row.type === 50) {
           this.form.scripts.push(...row.options);
+        }else if (row.type === 70) {
+          let res = JSON.parse(row.variableName);
+          this.$set(this.form,'direction',res.direction)
+          this.$set(this.form,'topLevel',res.topLevel)
         }
         this.open = true;
       },
@@ -491,6 +550,11 @@
               form.options = form.userGroupIds;
             } else if (form.type === 50) {
               form.options = form.scripts;
+            } else if (form.type === 70) {
+              form.variableName = JSON.stringify({
+                direction:form.direction,
+                topLevel:form.topLevel
+              })
             }
             form.roleIds = undefined;
             form.deptIds = undefined;
@@ -498,6 +562,8 @@
             form.userIds = undefined;
             form.userGroupIds = undefined;
             form.scripts = undefined;
+            form.direction = undefined;
+            form.topLevel = undefined;
             // 新增
             if (!form.id) {
               form.modelId = this.modelId; // 模型编号

src/views/documentManagement/certificateManagement/index.vue

@@ -34,8 +34,8 @@
         <template v-slot:picture="{ row }">
           <el-image
             style="width: 100px; height: 100px"
-            :src="row.imageUrl"
-            :preview-src-list="[row.imageUrl]"
+            :src="row.fileObj[0]?.storePath"
+            :preview-src-list="row.fileObj.map(item => item.storePath)"
           />
         </template>
         <template v-slot:action="{ row }">