refactor: 重构 bpmnProcessDesigner 组件 ele => antd

apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue

@@ -1,24 +1,31 @@
-<template>
-  <div class="panel-tab__content">
-    <component :is="customConfigComponent" v-bind="$props" />
-  </div>
-</template>
-
 <script lang="ts" setup>
+import { defineOptions, defineProps, ref, watch } from 'vue';
+
 import { CustomConfigMap } from './data';
 
 defineOptions({ name: 'ElementCustomConfig' });
 
 const props = defineProps({
-  id: String,
+  id: {
-  type: String,
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
   businessObject: {
-    type: Object,
+    type: Object as () => BusinessObject,
-    default: () => {},
+    default: () => ({}),
   },
 });
 
-const bpmnInstances = () => (window as any)?.bpmnInstances;
+interface BusinessObject {
+  eventDefinitions?: Array<{ $type: string }>;
+  [key: string]: any;
+}
+
+// const bpmnInstances = () => (window as any)?.bpmnInstances;
 const customConfigComponent = ref<any>(null);
 
 watch(
@@ -30,11 +37,17 @@ watch(
         val +=
           props.businessObject.eventDefinitions[0]?.$type.split(':')[1] || '';
       }
-      customConfigComponent.value = CustomConfigMap[val]?.componet;
+      customConfigComponent.value = (CustomConfigMap as any)[val]?.component;
     }
   },
   { immediate: true },
 );
 </script>
 
+<template>
+  <div class="panel-tab__content">
+    <component :is="customConfigComponent" v-bind="$props" />
+  </div>
+</template>
+
 <style lang="scss" scoped></style>

apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/data.ts

@@ -4,10 +4,10 @@ import UserTaskCustomConfig from './components/UserTaskCustomConfig.vue';
 export const CustomConfigMap = {
   UserTask: {
     name: '用户任务',
-    componet: UserTaskCustomConfig,
+    component: UserTaskCustomConfig,
   },
   BoundaryEventTimerEventDefinition: {
     name: '定时边界事件(非中断)',
-    componet: BoundaryEventTimer,
+    component: BoundaryEventTimer,
   },
 };

apps/web-antd/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue

@@ -1,98 +1,28 @@
-<template>
-  <div class="panel-tab__content">
-    <el-form :model="flowConditionForm" label-width="90px" size="small">
-      <el-form-item label="流转类型">
-        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
-          <el-option label="普通流转路径" value="normal" />
-          <el-option label="默认流转路径" value="default" />
-          <el-option label="条件流转路径" value="condition" />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="条件格式"
-        v-if="flowConditionForm.type === 'condition'"
-        key="condition"
-      >
-        <el-select v-model="flowConditionForm.conditionType">
-          <el-option label="表达式" value="expression" />
-          <el-option label="脚本" value="script" />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="表达式"
-        v-if="
-          flowConditionForm.conditionType &&
-          flowConditionForm.conditionType === 'expression'
-        "
-        key="express"
-      >
-        <el-input
-          v-model="flowConditionForm.body"
-          style="width: 192px"
-          clearable
-          @change="updateFlowCondition"
-        />
-      </el-form-item>
-      <template
-        v-if="
-          flowConditionForm.conditionType &&
-          flowConditionForm.conditionType === 'script'
-        "
-      >
-        <el-form-item label="脚本语言" key="language">
-          <el-input
-            v-model="flowConditionForm.language"
-            clearable
-            @change="updateFlowCondition"
-          />
-        </el-form-item>
-        <el-form-item label="脚本类型" key="scriptType">
-          <el-select v-model="flowConditionForm.scriptType">
-            <el-option label="内联脚本" value="inlineScript" />
-            <el-option label="外部脚本" value="externalScript" />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          label="脚本"
-          v-if="flowConditionForm.scriptType === 'inlineScript'"
-          key="body"
-        >
-          <el-input
-            v-model="flowConditionForm.body"
-            type="textarea"
-            clearable
-            @change="updateFlowCondition"
-          />
-        </el-form-item>
-        <el-form-item
-          label="资源地址"
-          v-if="flowConditionForm.scriptType === 'externalScript'"
-          key="resource"
-        >
-          <el-input
-            v-model="flowConditionForm.resource"
-            clearable
-            @change="updateFlowCondition"
-          />
-        </el-form-item>
-      </template>
-    </el-form>
-  </div>
-</template>
-
 <script lang="ts" setup>
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import { Form, Input, Select } from 'ant-design-vue';
+
 defineOptions({ name: 'FlowCondition' });
 
 const props = defineProps({
-  businessObject: Object,
+  businessObject: {
-  type: String,
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: '',
+  },
 });
+
 const flowConditionForm = ref<any>({});
 const bpmnElement = ref();
 const bpmnElementSource = ref();
 const bpmnElementSourceRef = ref();
 const flowConditionRef = ref();
 const bpmnInstances = () => (window as any)?.bpmnInstances;
+
 const resetFlowCondition = () => {
   bpmnElement.value = bpmnInstances().bpmnElement;
   bpmnElementSource.value = bpmnElement.value.source;
@@ -105,10 +35,7 @@ const resetFlowCondition = () => {
     bpmnElementSourceRef.value.default.id === bpmnElement.value.id
   ) {
     flowConditionForm.value = { type: 'default' };
-  } else if (!bpmnElement.value.businessObject.conditionExpression) {
+  } else if (bpmnElement.value.businessObject.conditionExpression) {
-    // 普通
-    flowConditionForm.value = { type: 'normal' };
-  } else {
     // 带条件
     const conditionExpression =
       bpmnElement.value.businessObject.conditionExpression;
@@ -117,23 +44,27 @@ const resetFlowCondition = () => {
     if (flowConditionForm.value.resource) {
       // this.$set(this.flowConditionForm, "conditionType", "script");
       // this.$set(this.flowConditionForm, "scriptType", "externalScript");
-      flowConditionForm.value['conditionType'] = 'script';
+      flowConditionForm.value.conditionType = 'script';
-      flowConditionForm.value['scriptType'] = 'externalScript';
+      flowConditionForm.value.scriptType = 'externalScript';
       return;
     }
     if (conditionExpression.language) {
       // this.$set(this.flowConditionForm, "conditionType", "script");
       // this.$set(this.flowConditionForm, "scriptType", "inlineScript");
-      flowConditionForm.value['conditionType'] = 'script';
+      flowConditionForm.value.conditionType = 'script';
-      flowConditionForm.value['scriptType'] = 'inlineScript';
+      flowConditionForm.value.scriptType = 'inlineScript';
 
       return;
     }
     // this.$set(this.flowConditionForm, "conditionType", "expression");
-    flowConditionForm.value['conditionType'] = 'expression';
+    flowConditionForm.value.conditionType = 'expression';
+  } else {
+    // 普通
+    flowConditionForm.value = { type: 'normal' };
   }
 };
-const updateFlowType = (flowType) => {
+
+const updateFlowType = (flowType: any) => {
   // 正常条件类
   if (flowType === 'condition') {
     flowConditionRef.value = bpmnInstances().moddle.create(
@@ -167,8 +98,9 @@ const updateFlowType = (flowType) => {
     conditionExpression: null,
   });
 };
+
 const updateFlowCondition = () => {
-  let { conditionType, scriptType, body, resource, language } =
+  const { conditionType, scriptType, body, resource, language } =
     flowConditionForm.value;
   let condition;
   if (conditionType === 'expression') {
@@ -182,10 +114,10 @@ const updateFlowCondition = () => {
         language,
       });
       // this.$set(this.flowConditionForm, "resource", "");
-      flowConditionForm.value['resource'] = '';
+      flowConditionForm.value.resource = '';
     } else {
       // this.$set(this.flowConditionForm, "body", "");
-      flowConditionForm.value['body'] = '';
+      flowConditionForm.value.body = '';
       condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
         resource,
         language,
@@ -205,8 +137,8 @@ onBeforeUnmount(() => {
 
 watch(
   () => props.businessObject,
-  (val) => {
+  (_) => {
-    console.log(val, 'val');
+    // console.log(val, 'val');
     nextTick(() => {
       resetFlowCondition();
     });
@@ -216,3 +148,89 @@ watch(
   },
 );
 </script>
+
+<template>
+  <div class="panel-tab__content">
+    <Form
+      :model="flowConditionForm"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="流转类型">
+        <Select v-model:value="flowConditionForm.type" @change="updateFlowType">
+          <Select.Option value="normal">普通流转路径</Select.Option>
+          <Select.Option value="default">默认流转路径</Select.Option>
+          <Select.Option value="condition">条件流转路径</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label="条件格式"
+        v-if="flowConditionForm.type === 'condition'"
+        key="condition"
+      >
+        <Select v-model:value="flowConditionForm.conditionType">
+          <Select.Option value="expression">表达式</Select.Option>
+          <Select.Option value="script">脚本</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label="表达式"
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'expression'
+        "
+        key="express"
+      >
+        <Input
+          v-model:value="flowConditionForm.body"
+          style="width: 192px"
+          allow-clear
+          @change="updateFlowCondition"
+        />
+      </Form.Item>
+      <template
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'script'
+        "
+      >
+        <Form.Item label="脚本语言" key="language">
+          <Input
+            v-model:value="flowConditionForm.language"
+            allow-clear
+            @change="updateFlowCondition"
+          />
+        </Form.Item>
+        <Form.Item label="脚本类型" key="scriptType">
+          <Select v-model:value="flowConditionForm.scriptType">
+            <Select.Option value="inlineScript">内联脚本</Select.Option>
+            <Select.Option value="externalScript">外部脚本</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          label="脚本"
+          v-if="flowConditionForm.scriptType === 'inlineScript'"
+          key="body"
+        >
+          <Input
+            v-model:value="flowConditionForm.body"
+            :autosize="{ minRows: 2, maxRows: 6 }"
+            allow-clear
+            @change="updateFlowCondition"
+          />
+        </Form.Item>
+        <Form.Item
+          label="资源地址"
+          v-if="flowConditionForm.scriptType === 'externalScript'"
+          key="resource"
+        >
+          <Input
+            v-model:value="flowConditionForm.resource"
+            allow-clear
+            @change="updateFlowCondition"
+          />
+        </Form.Item>
+      </template>
+    </Form>
+  </div>
+</template>

apps/web-antd/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue

@@ -1,248 +1,25 @@
-<template>
-  <div class="panel-tab__content">
-    <el-form label-width="80px">
-      <el-form-item label="流程表单">
-        <!--        <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
-        <el-select v-model="formKey" clearable @change="updateElementFormKey">
-          <el-option
-            v-for="form in formList"
-            :key="form.id"
-            :label="form.name"
-            :value="form.id"
-          />
-        </el-select>
-      </el-form-item>
-      <!--      <el-form-item label="业务标识">-->
-      <!--        <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
-      <!--          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
-      <!--          <el-option label="无" value="" />-->
-      <!--        </el-select>-->
-      <!--      </el-form-item>-->
-    </el-form>
-
-    <!--字段列表-->
-    <!--    <div class="element-property list-property">-->
-    <!--      <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
-    <!--      <el-table :data="fieldList" max-height="240" fit border>-->
-    <!--        <el-table-column label="序号" type="index" width="50px" />-->
-    <!--        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
-    <!--        <el-table-column-->
-    <!--          label="字段类型"-->
-    <!--          prop="type"-->
-    <!--          min-width="80px"-->
-    <!--          :formatter="(row) => fieldType[row.type] || row.type"-->
-    <!--          show-overflow-tooltip-->
-    <!--        />-->
-    <!--        <el-table-column-->
-    <!--          label="默认值"-->
-    <!--          prop="defaultValue"-->
-    <!--          min-width="80px"-->
-    <!--          show-overflow-tooltip-->
-    <!--        />-->
-    <!--        <el-table-column label="操作" width="90px">-->
-    <!--          <template #default="scope">-->
-    <!--            <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
-    <!--              >编辑</el-button-->
-    <!--            >-->
-    <!--            <el-divider direction="vertical" />-->
-    <!--            <el-button-->
-    <!--              type="primary"-->
-    <!--              link-->
-    <!--              style="color: #ff4d4f"-->
-    <!--              @click="removeField(scope, scope.$index)"-->
-    <!--              >移除</el-button-->
-    <!--            >-->
-    <!--          </template>-->
-    <!--        </el-table-column>-->
-    <!--      </el-table>-->
-    <!--    </div>-->
-    <!--    <div class="element-drawer__button">-->
-    <!--      <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
-    <!--    </div>-->
-
-    <!--字段配置侧边栏-->
-    <!--    <el-drawer-->
-    <!--      v-model="fieldModelVisible"-->
-    <!--      title="字段配置"-->
-    <!--      :size="`${width}px`"-->
-    <!--      append-to-body-->
-    <!--      destroy-on-close-->
-    <!--    >-->
-    <!--      <el-form :model="formFieldForm" label-width="90px">-->
-    <!--        <el-form-item label="字段ID">-->
-    <!--          <el-input v-model="formFieldForm.id" clearable />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="类型">-->
-    <!--          <el-select-->
-    <!--            v-model="formFieldForm.typeType"-->
-    <!--            placeholder="请选择字段类型"-->
-    <!--            clearable-->
-    <!--            @change="changeFieldTypeType"-->
-    <!--          >-->
-    <!--            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
-    <!--          </el-select>-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
-    <!--          <el-input v-model="formFieldForm.type" clearable />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="名称">-->
-    <!--          <el-input v-model="formFieldForm.label" clearable />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
-    <!--          <el-input v-model="formFieldForm.datePattern" clearable />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="默认值">-->
-    <!--          <el-input v-model="formFieldForm.defaultValue" clearable />-->
-    <!--        </el-form-item>-->
-    <!--      </el-form>-->
-
-    <!--      &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
-    <!--      <template v-if="formFieldForm.type === 'enum'">-->
-    <!--        <el-divider key="enum-divider" />-->
-    <!--        <p class="listener-filed__title" key="enum-title">-->
-    <!--          <span><Icon icon="ep:menu" />枚举值列表：</span>-->
-    <!--          <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
-    <!--            >添加枚举值</el-button-->
-    <!--          >-->
-    <!--        </p>-->
-    <!--        <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
-    <!--          <el-table-column label="序号" width="50px" type="index" />-->
-    <!--          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
-    <!--          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
-    <!--          <el-table-column label="操作" width="90px">-->
-    <!--            <template #default="scope">-->
-    <!--              <el-button-->
-    <!--                type="primary"-->
-    <!--                link-->
-    <!--                @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
-    <!--                >编辑</el-button-->
-    <!--              >-->
-    <!--              <el-divider direction="vertical" />-->
-    <!--              <el-button-->
-    <!--                type="primary"-->
-    <!--                link-->
-    <!--                style="color: #ff4d4f"-->
-    <!--                @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
-    <!--                >移除</el-button-->
-    <!--              >-->
-    <!--            </template>-->
-    <!--          </el-table-column>-->
-    <!--        </el-table>-->
-    <!--      </template>-->
-
-    <!--      &lt;!&ndash; 校验规则 &ndash;&gt;-->
-    <!--      <el-divider key="validation-divider" />-->
-    <!--      <p class="listener-filed__title" key="validation-title">-->
-    <!--        <span><Icon icon="ep:menu" />约束条件列表：</span>-->
-    <!--        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
-    <!--          >添加约束</el-button-->
-    <!--        >-->
-    <!--      </p>-->
-    <!--      <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
-    <!--        <el-table-column label="序号" width="50px" type="index" />-->
-    <!--        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
-    <!--        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
-    <!--        <el-table-column label="操作" width="90px">-->
-    <!--          <template #default="scope">-->
-    <!--            <el-button-->
-    <!--              type="primary"-->
-    <!--              link-->
-    <!--              @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
-    <!--              >编辑</el-button-->
-    <!--            >-->
-    <!--            <el-divider direction="vertical" />-->
-    <!--            <el-button-->
-    <!--              type="primary"-->
-    <!--              link-->
-    <!--              style="color: #ff4d4f"-->
-    <!--              @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
-    <!--              >移除</el-button-->
-    <!--            >-->
-    <!--          </template>-->
-    <!--        </el-table-column>-->
-    <!--      </el-table>-->
-
-    <!--      &lt;!&ndash; 表单属性 &ndash;&gt;-->
-    <!--      <el-divider key="property-divider" />-->
-    <!--      <p class="listener-filed__title" key="property-title">-->
-    <!--        <span><Icon icon="ep:menu" />字段属性列表：</span>-->
-    <!--        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
-    <!--          >添加属性</el-button-->
-    <!--        >-->
-    <!--      </p>-->
-    <!--      <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
-    <!--        <el-table-column label="序号" width="50px" type="index" />-->
-    <!--        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
-    <!--        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
-    <!--        <el-table-column label="操作" width="90px">-->
-    <!--          <template #default="scope">-->
-    <!--            <el-button-->
-    <!--              type="primary"-->
-    <!--              link-->
-    <!--              @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
-    <!--              >编辑</el-button-->
-    <!--            >-->
-    <!--            <el-divider direction="vertical" />-->
-    <!--            <el-button-->
-    <!--              type="primary"-->
-    <!--              link-->
-    <!--              style="color: #ff4d4f"-->
-    <!--              @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
-    <!--              >移除</el-button-->
-    <!--            >-->
-    <!--          </template>-->
-    <!--        </el-table-column>-->
-    <!--      </el-table>-->
-
-    <!--      &lt;!&ndash; 底部按钮 &ndash;&gt;-->
-    <!--      <div class="element-drawer__button">-->
-    <!--        <el-button>取 消</el-button>-->
-    <!--        <el-button type="primary" @click="saveField">保 存</el-button>-->
-    <!--      </div>-->
-    <!--    </el-drawer>-->
-
-    <!--    <el-dialog-->
-    <!--      v-model="fieldOptionModelVisible"-->
-    <!--      :title="optionModelTitle"-->
-    <!--      width="600px"-->
-    <!--      append-to-body-->
-    <!--      destroy-on-close-->
-    <!--    >-->
-    <!--      <el-form :model="fieldOptionForm" label-width="96px">-->
-    <!--        <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
-    <!--          <el-input v-model="fieldOptionForm.id" clearable />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
-    <!--          <el-input v-model="fieldOptionForm.name" clearable />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
-    <!--          <el-input v-model="fieldOptionForm.config" clearable />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
-    <!--          <el-input v-model="fieldOptionForm.value" clearable />-->
-    <!--        </el-form-item>-->
-    <!--      </el-form>-->
-    <!--      <template #footer>-->
-    <!--        <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
-    <!--        <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
-    <!--      </template>-->
-    <!--    </el-dialog>-->
-  </div>
-</template>
-
 <script lang="ts" setup>
-import * as FormApi from '@/api/bpm/form';
+import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { Form, FormItem, Select } from 'ant-design-vue';
+
+import { getFormSimpleList } from '#/api/bpm/form';
 
 defineOptions({ name: 'ElementForm' });
 
 const props = defineProps({
-  id: String,
+  id: {
-  type: String,
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
 });
 const prefix = inject('prefix');
-const width = inject('width');
 
-const formKey = ref(undefined);
+const formKey = ref<number | string | undefined>(undefined);
 const businessKey = ref('');
 const optionModelTitle = ref('');
 const fieldList = ref<any[]>([]);
@@ -282,21 +59,20 @@ const resetFormList = () => {
     bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
   // 获取元素表单配置 或者 创建新的表单配置
   formData.value =
-    elExtensionElements.value.values.filter(
+    elExtensionElements.value.values.find(
-      (ex) => ex.$type === `${prefix}:FormData`,
+      (ex: any) => ex.$type === `${prefix}:FormData`,
-    )?.[0] ||
+    ) || bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] });
-    bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] });
 
   // 业务标识 businessKey， 绑定在 formData 中
   businessKey.value = formData.value.businessKey;
 
   // 保留剩余扩展元素，便于后面更新该元素对应属性
   otherExtensions.value = elExtensionElements.value.values.filter(
-    (ex) => ex.$type !== `${prefix}:FormData`,
+    (ex: any) => ex.$type !== `${prefix}:FormData`,
   );
 
   // 复制原始值，填充表格
-  fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []));
+  fieldList.value = structuredClone(formData.value.fields || []);
 
   // 更新元素扩展属性，避免后续报错
   updateElementExtensions();
@@ -306,7 +82,7 @@ const updateElementFormKey = () => {
     formKey: formKey.value,
   });
 };
-const updateElementBusinessKey = () => {
+const _updateElementBusinessKey = () => {
   bpmnInstances().modeling.updateModdleProperties(
     toRaw(bpmnELement.value),
     formData.value,
@@ -316,36 +92,14 @@ const updateElementBusinessKey = () => {
   );
 };
 // 根据类型调整字段type
-const changeFieldTypeType = (type) => {
+const _changeFieldTypeType = (type: any) => {
-  // this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+  formFieldForm.value.type = type === 'custom' ? '' : type;
-  formFieldForm.value['type'] = type === 'custom' ? '' : type;
 };
 
 // 打开字段详情侧边栏
-const openFieldForm = (field, index) => {
+const _openFieldForm = (field: any, index: any) => {
   formFieldIndex.value = index;
-  if (index !== -1) {
+  if (index === -1) {
-    const FieldObject = formData.value.fields[index];
-    formFieldForm.value = JSON.parse(JSON.stringify(field));
-    // 设置自定义类型
-    // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
-    formFieldForm.value['typeType'] = !fieldType.value[field.type]
-      ? 'custom'
-      : field.type;
-    // 初始化枚举值列表
-    field.type === 'enum' &&
-      (fieldEnumList.value = JSON.parse(
-        JSON.stringify(FieldObject?.values || []),
-      ));
-    // 初始化约束条件列表
-    fieldConstraintsList.value = JSON.parse(
-      JSON.stringify(FieldObject?.validation?.constraints || []),
-    );
-    // 初始化自定义属性列表
-    fieldPropertiesList.value = JSON.parse(
-      JSON.stringify(FieldObject?.properties?.values || []),
-    );
-  } else {
     formFieldForm.value = {};
     // 初始化枚举值列表
     fieldEnumList.value = [];
@@ -353,28 +107,49 @@ const openFieldForm = (field, index) => {
     fieldConstraintsList.value = [];
     // 初始化自定义属性列表
     fieldPropertiesList.value = [];
+  } else {
+    const FieldObject = formData.value.fields[index];
+    formFieldForm.value = structuredClone(field);
+    // 设置自定义类型
+    // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+    formFieldForm.value.typeType = fieldType.value[
+      field.type as keyof typeof fieldType.value
+    ]
+      ? field.type
+      : 'custom';
+    // 初始化枚举值列表
+    field.type === 'enum' &&
+      (fieldEnumList.value = structuredClone(FieldObject?.values || []));
+    // 初始化约束条件列表
+    fieldConstraintsList.value = structuredClone(
+      FieldObject?.validation?.constraints || [],
+    );
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = structuredClone(
+      FieldObject?.properties?.values || [],
+    );
   }
   fieldModelVisible.value = true;
 };
 // 打开字段 某个 配置项 弹窗
-const openFieldOptionForm = (option, index, type) => {
+const _openFieldOptionForm = (option: any, index: any, type: any) => {
   fieldOptionModelVisible.value = true;
   fieldOptionType.value = type;
   formFieldOptionIndex.value = index;
   if (type === 'property') {
-    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {};
+    fieldOptionForm.value = option ? structuredClone(option) : {};
     return (optionModelTitle.value = '属性配置');
   }
   if (type === 'enum') {
-    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {};
+    fieldOptionForm.value = option ? structuredClone(option) : {};
     return (optionModelTitle.value = '枚举值配置');
   }
-  fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {};
+  fieldOptionForm.value = option ? structuredClone(option) : {};
   return (optionModelTitle.value = '约束条件配置');
 };
 
 // 保存字段 某个 配置项
-const saveFieldOption = () => {
+const _saveFieldOption = () => {
   if (formFieldOptionIndex.value === -1) {
     if (fieldOptionType.value === 'property') {
       fieldPropertiesList.value.push(fieldOptionForm.value);
@@ -409,7 +184,7 @@ const saveFieldOption = () => {
   fieldOptionForm.value = {};
 };
 // 保存字段配置
-const saveField = () => {
+const _saveField = () => {
   const { id, type, label, defaultValue, datePattern } = formFieldForm.value;
   const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, {
     id,
@@ -419,8 +194,8 @@ const saveField = () => {
   defaultValue && (Field.defaultValue = defaultValue);
   datePattern && (Field.datePattern = datePattern);
   // 构建属性
-  if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length > 0) {
-    const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp: any) => {
       return bpmnInstances().moddle.create(`${prefix}:Property`, {
         id: fp.id,
         value: fp.value,
@@ -431,8 +206,8 @@ const saveField = () => {
     });
   }
   // 构建校验规则
-  if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length > 0) {
-    const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc: any) => {
       return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
         name: fc.name,
         config: fc.config,
@@ -443,8 +218,8 @@ const saveField = () => {
     });
   }
   // 构建枚举值
-  if (fieldEnumList.value && fieldEnumList.value.length) {
+  if (fieldEnumList.value && fieldEnumList.value.length > 0) {
-    Field.values = fieldEnumList.value.map((fe) => {
+    Field.values = fieldEnumList.value.map((fe: any) => {
       return bpmnInstances().moddle.create(`${prefix}:Value`, {
         name: fe.name,
         id: fe.id,
@@ -464,7 +239,7 @@ const saveField = () => {
 };
 
 // 移除某个 字段的 配置项
-const removeFieldOptionItem = (option, index, type) => {
+const _removeFieldOptionItem = (_option: any, index: any, type: any) => {
   // console.log(option, 'option')
   if (type === 'property') {
     fieldPropertiesList.value.splice(index, 1);
@@ -477,8 +252,8 @@ const removeFieldOptionItem = (option, index, type) => {
   fieldConstraintsList.value.splice(index, 1);
 };
 // 移除 字段
-const removeField = (field, index) => {
+const _removeField = (field: any, index: any) => {
-  console.log(field, 'field');
+  console.warn(field, 'field');
   fieldList.value.splice(index, 1);
   formData.value.fields.splice(index, 1);
   updateElementExtensions();
@@ -489,7 +264,7 @@ const updateElementExtensions = () => {
   const newElExtensionElements = bpmnInstances().moddle.create(
     `bpmn:ExtensionElements`,
     {
-      values: otherExtensions.value.concat(formData.value),
+      values: [...otherExtensions.value, formData.value],
     },
   );
   // 更新到元素上
@@ -498,17 +273,26 @@ const updateElementExtensions = () => {
   });
 };
 
-const formList = ref([]); // 流程表单的下拉框的数据
+const formList = ref<any[]>([]); // 流程表单的下拉框的数据
+const formOptions = computed(() => {
+  return formList.value.map((form: any) => ({
+    value: form.id,
+    label: form.name,
+  }));
+});
+
 onMounted(async () => {
-  formList.value = await FormApi.getFormSimpleList();
+  formList.value = await getFormSimpleList();
-  formKey.value = parseInt(formKey.value);
+  formKey.value = formKey.value
+    ? Number.parseInt(formKey.value as string)
+    : undefined;
 });
 
 watch(
   () => props.id,
-  (val) => {
+  (val: any) => {
     val &&
-      val.length &&
+      val.length > 0 &&
       nextTick(() => {
         resetFormList();
       });
@@ -516,3 +300,231 @@ watch(
   { immediate: true },
 );
 </script>
+
+<template>
+  <div class="panel-tab__content">
+    <Form :label-col="{ style: { width: '80px' } }">
+      <FormItem label="流程表单">
+        <!--        <Input v-model:value="formKey" @change="updateElementFormKey" />-->
+        <Select
+          v-model:value="formKey"
+          allow-clear
+          @change="updateElementFormKey"
+          :options="formOptions"
+        />
+      </FormItem>
+      <!--      <FormItem label="业务标识">-->
+      <!--        <Select v-model:value="businessKey" @change="updateElementBusinessKey">-->
+      <!--          <SelectOption v-for="i in fieldList" :key="i.id" :value="i.id">{{ i.label }}</SelectOption>-->
+      <!--          <SelectOption value="">无</SelectOption>-->
+      <!--        </Select>-->
+      <!--      </FormItem>-->
+    </Form>
+
+    <!--字段列表-->
+    <!--    <div class="element-property list-property">-->
+    <!--      <Divider><Icon icon="ep:coin" /> 表单字段</Divider>-->
+    <!--      <Table :data-source="fieldList" :scroll="{ y: 240 }" bordered>-->
+    <!--        <TableColumn title="序号" type="index" width="50px" />-->
+    <!--        <TableColumn title="字段名称" dataIndex="label" width="80px" :ellipsis="true" />-->
+    <!--        <TableColumn-->
+    <!--          title="字段类型"-->
+    <!--          dataIndex="type"-->
+    <!--          width="80px"-->
+    <!--          :customRender="({ text }) => fieldType[text] || text"-->
+    <!--          :ellipsis="true"-->
+    <!--        />-->
+    <!--        <TableColumn-->
+    <!--          title="默认值"-->
+    <!--          dataIndex="defaultValue"-->
+    <!--          width="80px"-->
+    <!--          :ellipsis="true"-->
+    <!--        />-->
+    <!--        <TableColumn title="操作" width="90px">-->
+    <!--          <template #default="scope">-->
+    <!--            <Button type="link" @click="openFieldForm(scope, scope.$index)">-->
+    <!--              编辑-->
+    <!--            </Button>-->
+    <!--            <Divider type="vertical" />-->
+    <!--            <Button-->
+    <!--              type="link"-->
+    <!--              danger-->
+    <!--              @click="removeField(scope, scope.$index)"-->
+    <!--            >-->
+    <!--              移除-->
+    <!--            </Button>-->
+    <!--          </template>-->
+    <!--        </TableColumn>-->
+    <!--      </Table>-->
+    <!--    </div>-->
+    <!--    <div class="element-drawer__button">-->
+    <!--      <Button type="primary" @click="openFieldForm(null, -1)">添加字段</Button>-->
+    <!--    </div>-->
+
+    <!--字段配置侧边栏-->
+    <!--    <Drawer-->
+    <!--      v-model:open="fieldModelVisible"-->
+    <!--      title="字段配置"-->
+    <!--      :width="`${width}px`"-->
+    <!--      destroyOnClose-->
+    <!--    >-->
+    <!--      <Form :model="formFieldForm" :label-col="{ style: { width: '90px' } }">-->
+    <!--        <FormItem label="字段ID">-->
+    <!--          <Input v-model:value="formFieldForm.id" allowClear />-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="类型">-->
+    <!--          <Select-->
+    <!--            v-model:value="formFieldForm.typeType"-->
+    <!--            placeholder="请选择字段类型"-->
+    <!--            allowClear-->
+    <!--            @change="changeFieldTypeType"-->
+    <!--          >-->
+    <!--            <SelectOption v-for="(value, key) of fieldType" :key="key" :value="key">{{ value }}</SelectOption>-->
+    <!--          </Select>-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
+    <!--          <Input v-model:value="formFieldForm.type" allowClear />-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="名称">-->
+    <!--          <Input v-model:value="formFieldForm.label" allowClear />-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
+    <!--          <Input v-model:value="formFieldForm.datePattern" allowClear />-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="默认值">-->
+    <!--          <Input v-model:value="formFieldForm.defaultValue" allowClear />-->
+    <!--        </FormItem>-->
+    <!--      </Form>-->
+
+    <!--      &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
+    <!--      <template v-if="formFieldForm.type === 'enum'">-->
+    <!--        <Divider key="enum-divider" />-->
+    <!--        <p class="listener-filed__title" key="enum-title">-->
+    <!--          <span><Icon icon="ep:menu" />枚举值列表：</span>-->
+    <!--          <Button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
+    <!--            >添加枚举值</Button-->
+    <!--          >-->
+    <!--        </p>-->
+    <!--        <Table :data-source="fieldEnumList" key="enum-table" :scroll="{ y: 240 }" bordered>-->
+    <!--          <TableColumn title="序号" width="50px" type="index" />-->
+    <!--          <TableColumn title="枚举值编号" dataIndex="id" width="100px" :ellipsis="true" />-->
+    <!--          <TableColumn title="枚举值名称" dataIndex="name" width="100px" :ellipsis="true" />-->
+    <!--          <TableColumn title="操作" width="90px">-->
+    <!--            <template #default="scope">-->
+    <!--              <Button-->
+    <!--                type="link"-->
+    <!--                @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
+    <!--              >-->
+    <!--                编辑-->
+    <!--              </Button>-->
+    <!--              <Divider type="vertical" />-->
+    <!--              <Button-->
+    <!--                type="link"-->
+    <!--                danger-->
+    <!--                @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
+    <!--              >-->
+    <!--                移除-->
+    <!--              </Button>-->
+    <!--            </template>-->
+    <!--          </TableColumn>-->
+    <!--        </Table>-->
+    <!--      </template>-->
+
+    <!--      &lt;!&ndash; 校验规则 &ndash;&gt;-->
+    <!--      <Divider key="validation-divider" />-->
+    <!--      <p class="listener-filed__title" key="validation-title">-->
+    <!--        <span><Icon icon="ep:menu" />约束条件列表：</span>-->
+    <!--        <Button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
+    <!--          >添加约束</Button-->
+    <!--        >-->
+    <!--      </p>-->
+    <!--      <Table :data-source="fieldConstraintsList" key="validation-table" :scroll="{ y: 240 }" bordered>-->
+    <!--        <TableColumn title="序号" width="50px" type="index" />-->
+    <!--        <TableColumn title="约束名称" dataIndex="name" width="100px" :ellipsis="true" />-->
+    <!--        <TableColumn title="约束配置" dataIndex="config" width="100px" :ellipsis="true" />-->
+    <!--        <TableColumn title="操作" width="90px">-->
+    <!--          <template #default="scope">-->
+    <!--            <Button-->
+    <!--              type="link"-->
+    <!--              @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
+    <!--            >-->
+    <!--              编辑-->
+    <!--            </Button>-->
+    <!--            <Divider type="vertical" />-->
+    <!--            <Button-->
+    <!--              type="link"-->
+    <!--              danger-->
+    <!--              @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
+    <!--            >-->
+    <!--              移除-->
+    <!--            </Button>-->
+    <!--          </template>-->
+    <!--        </TableColumn>-->
+    <!--      </Table>-->
+
+    <!--      &lt;!&ndash; 表单属性 &ndash;&gt;-->
+    <!--      <Divider key="property-divider" />-->
+    <!--      <p class="listener-filed__title" key="property-title">-->
+    <!--        <span><Icon icon="ep:menu" />字段属性列表：</span>-->
+    <!--        <Button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
+    <!--          >添加属性</Button-->
+    <!--        >-->
+    <!--      </p>-->
+    <!--      <Table :data-source="fieldPropertiesList" key="property-table" :scroll="{ y: 240 }" bordered>-->
+    <!--        <TableColumn title="序号" width="50px" type="index" />-->
+    <!--        <TableColumn title="属性编号" dataIndex="id" width="100px" :ellipsis="true" />-->
+    <!--        <TableColumn title="属性值" dataIndex="value" width="100px" :ellipsis="true" />-->
+    <!--        <TableColumn title="操作" width="90px">-->
+    <!--          <template #default="scope">-->
+    <!--            <Button-->
+    <!--              type="link"-->
+    <!--              @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
+    <!--            >-->
+    <!--              编辑-->
+    <!--            </Button>-->
+    <!--            <Divider type="vertical" />-->
+    <!--            <Button-->
+    <!--              type="link"-->
+    <!--              danger-->
+    <!--              @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
+    <!--            >-->
+    <!--              移除-->
+    <!--            </Button>-->
+    <!--          </template>-->
+    <!--        </TableColumn>-->
+    <!--      </Table>-->
+
+    <!--      &lt;!&ndash; 底部按钮 &ndash;&gt;-->
+    <!--      <div class="element-drawer__button">-->
+    <!--        <Button>取 消</Button>-->
+    <!--        <Button type="primary" @click="saveField">保 存</Button>-->
+    <!--      </div>-->
+    <!--    </Drawer>-->
+
+    <!--    <Modal-->
+    <!--      v-model:open="fieldOptionModelVisible"-->
+    <!--      :title="optionModelTitle"-->
+    <!--      width="600px"-->
+    <!--      destroyOnClose-->
+    <!--    >-->
+    <!--      <Form :model="fieldOptionForm" :label-col="{ style: { width: '96px' } }">-->
+    <!--        <FormItem label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
+    <!--          <Input v-model:value="fieldOptionForm.id" allowClear />-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
+    <!--          <Input v-model:value="fieldOptionForm.name" allowClear />-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
+    <!--          <Input v-model:value="fieldOptionForm.config" allowClear />-->
+    <!--        </FormItem>-->
+    <!--        <FormItem label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
+    <!--          <Input v-model:value="fieldOptionForm.value" allowClear />-->
+    <!--        </FormItem>-->
+    <!--      </Form>-->
+    <!--      <template #footer>-->
+    <!--        <Button @click="fieldOptionModelVisible = false">取 消</Button>-->
+    <!--        <Button type="primary" @click="saveFieldOption">确 定</Button>-->
+    <!--      </template>-->
+    <!--    </Modal>-->
+  </div>
+</template>