Merge remote-tracking branch 'origin/master'

src/api/bpm/task/index.ts

@@ -34,6 +34,19 @@ export const getTaskListByProcessInstanceId = async (processInstanceId: string)
 export const getTaskListByReturn = async (id: string) => {
   return await request.get({ url: '/bpm/task/list-by-return', params: { id } })
 }
+//得到当前处理人
+export const getTaskAssignee = async (taskId: string) => {
+  return await request.get({ url: '/bpm/task/getTaskAssignee', params: { taskId } })
+}
+//得到当前任务id列表
+export const getTaskIdsForProcessInstance = async (processinstanceId: string) => {
+  return await request.get({ url: '/bpm/task/getTaskIdsForProcessInstance', params: { processinstanceId } })
+}
+
+//得到当前处理人
+export const getTaskConfigFromBpmn = async (taskId: string,itemStr:string) => {
+  return await request.get({ url: '/bpm/task/getTaskConfigFromBpmn', params: { taskId,itemStr } })
+}
 
 // 回退
 export const returnTask = async (data: any) => {

src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json

@@ -170,7 +170,12 @@
           "type": "String"
         },
         {
-          "name": "formType",
+          "name": "itemType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "itemContent",
           "isAttr": true,
           "type": "String"
         },

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

@@ -90,7 +90,7 @@ import FlowCondition from './flow-condition/FlowCondition.vue'
 import SignalAndMassage from './signal-message/SignalAndMessage.vue'
 import ElementListeners from './listeners/ElementListeners.vue'
 import ElementProperties from './properties/ElementProperties.vue'
-// import ElementForm from './form/ElementForm.vue'
+// import ElementForm from './form/ElementForm2.vue'
 import UserTaskListeners from './listeners/UserTaskListeners.vue'
 // 切换tab自动刷新实现 begin+++++++++++++
 export type TabRefresh = {

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

@@ -66,7 +66,7 @@ import FlowCondition from './flow-condition/FlowCondition.vue'
 import SignalAndMassage from './signal-message/SignalAndMessage.vue'
 import ElementListeners from './listeners/ElementListeners.vue'
 import ElementProperties from './properties/ElementProperties.vue'
-// import ElementForm from './form/ElementForm.vue'
+// import ElementForm from './form/ElementForm2.vue'
 import UserTaskListeners from './listeners/UserTaskListeners.vue'
 
 defineOptions({ name: 'MyPropertiesPanel' })

src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue

@@ -2,231 +2,35 @@
   <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-form-item label="字段控制">
-      <!--          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
+        <el-radio-group v-model="itemType"  @change="updateElementItemType">
-      <!--          <el-option label="无" value="" />-->
+          <el-radio
-      <!--        </el-select>-->
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_FORM_ITEM_TYPE)"
-      <!--      </el-form-item>-->
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
 
-    <!--字段列表-->
+      <div class="panel-tab__content"  v-if="itemType == 1 ">
-    <!--    <div class="element-property list-property">-->
+        <el-input v-model="itemContent"   @change="updateElementItemContent" />
-    <!--      <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
+      </div>
-    <!--      <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 {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {ElMessageBox} from "element-plus";
 
 defineOptions({ name: 'ElementForm' })
 
@@ -239,6 +43,8 @@ const width = inject('width')
 
 const formKey = ref('')
 const businessKey = ref('')
+const itemType = ref(0)
+const itemContent = ref('')
 const optionModelTitle = ref('')
 const fieldList = ref<any[]>([])
 const formFieldForm = ref<any>({})
@@ -265,12 +71,19 @@ const formData = ref()
 const otherExtensions = ref()
 
 const bpmnInstances = () => (window as any)?.bpmnInstances
-const resetFormList = () => {
+const resetFormList = () => {  //
   bpmnELement.value = bpmnInstances().bpmnElement
   formKey.value = bpmnELement.value.businessObject.formKey
+  itemType.value = bpmnELement.value.businessObject.itemType
+  itemContent.value = bpmnELement.value.businessObject.itemContent
   if (formKey.value?.length > 0) {
     formKey.value = parseInt(formKey.value)
   }
+
+  if (itemType.value?.length > 0) {
+    itemType.value = parseInt(itemType.value)
+  }
+
   // 获取元素扩展属性 或者 创建扩展属性
   elExtensionElements.value =
     bpmnELement.value.businessObject.get('extensionElements') ||
@@ -296,7 +109,7 @@ const resetFormList = () => {
 }
 const updateElementFormKey = () => {
   bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
-    formKey: formKey.value
+    formKey: formKey.value,
   })
 }
 const updateElementBusinessKey = () => {
@@ -304,6 +117,17 @@ const updateElementBusinessKey = () => {
     businessKey: businessKey.value
   })
 }
+const updateElementItemType = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    itemType: itemType.value
+  })
+}
+
+const updateElementItemContent = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    itemContent: itemContent.value
+  })
+}
 // 根据类型调整字段type
 const changeFieldTypeType = (type) => {
   // this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
@@ -462,15 +286,25 @@ const updateElementExtensions = () => {
 const formList = ref([]) // 流程表单的下拉框的数据
 onMounted(async () => {
   formList.value = await FormApi.getFormSimpleList()
+  if (!Array.isArray(formList.value)) {
+    console.error('Expected forms to be an array');
+    formList.value = [{ id: null, name: '请选择' }];
+  } else {
+    formList.value = [{ id: null, name: '请选择' }, ...formList.value];
+  }
 })
 
+
+
+
+//pch  end
 watch(
   () => props.id,
   (val) => {
     val &&
       val.length &&
       nextTick(() => {
-        resetFormList()
+        resetFormList();
       })
   },
   { immediate: true }

src/components/bpmnProcessDesigner/package/penal/form/ElementForm2.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="80px">
+      <el-form-item label="流程表单">
+        <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-radio-group v-model="itemType"  @change="updateElementItemType">
+          <el-radio
+              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_FORM_ITEM_TYPE)"
+              :key="dict.value"
+              :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import * as FormApi from '@/api/bpm/form'
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+
+defineOptions({ name: 'ElementForm' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+
+const formKey = ref('')
+const businessKey = ref('')
+const itemType = ref(0)
+const optionModelTitle = ref('')
+const fieldList = ref<any[]>([])
+const formFieldForm = ref<any>({})
+const fieldType = ref({
+  long: '长整型',
+  string: '字符串',
+  boolean: '布尔类',
+  date: '日期类',
+  enum: '枚举类',
+  custom: '自定义类型'
+})
+const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
+const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
+const fieldModelVisible = ref(false)
+const fieldOptionModelVisible = ref(false)
+const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
+const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
+const fieldEnumList = ref<any[]>([]) // 枚举值列表
+const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
+const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
+const bpmnELement = ref()
+const elExtensionElements = ref()
+const formData = ref()
+const otherExtensions = ref()
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const resetFormList = () => {
+  bpmnELement.value = bpmnInstances().bpmnElement
+  formKey.value = bpmnELement.value.businessObject.formKey
+  if (formKey.value?.length > 0) {
+    formKey.value = parseInt(formKey.value)
+  }
+  itemType.value = bpmnELement.value.businessObject.itemType
+  if (itemType.value?.length > 0) {
+    itemType.value = parseInt(itemType.value)
+  }
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnELement.value.businessObject.get('extensionElements') ||
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+  // 获取元素表单配置 或者 创建新的表单配置
+  formData.value =
+    elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
+
+  // 业务标识 businessKey， 绑定在 formData 中
+  businessKey.value = formData.value.businessKey
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value = elExtensionElements.value.values.filter(
+    (ex) => ex.$type !== `${prefix}:FormData`
+  )
+
+  // 复制原始值，填充表格
+  fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions()
+}
+const updateElementFormKey = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    formKey: formKey.value
+  })
+}
+const updateElementBusinessKey = () => {
+  bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
+    businessKey: businessKey.value
+  })
+}
+const updateElementItemType = () => {
+  // console.log(itemType.value,"itemType.value")
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    itemType: itemType.value
+  })
+}
+// 根据类型调整字段type
+const changeFieldTypeType = (type) => {
+  // this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+  formFieldForm.value['type'] = type === 'custom' ? '' : type
+}
+
+// 打开字段详情侧边栏
+const openFieldForm = (field, index) => {
+  formFieldIndex.value = index
+  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 = []
+    // 初始化约束条件列表
+    fieldConstraintsList.value = []
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = []
+  }
+  fieldModelVisible.value = true
+}
+// 打开字段 某个 配置项 弹窗
+const openFieldOptionForm = (option, index, type) => {
+  fieldOptionModelVisible.value = true
+  fieldOptionType.value = type
+  formFieldOptionIndex.value = index
+  if (type === 'property') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '属性配置')
+  }
+  if (type === 'enum') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '枚举值配置')
+  }
+  fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+  return (optionModelTitle.value = '约束条件配置')
+}
+
+// 保存字段 某个 配置项
+const saveFieldOption = () => {
+  if (formFieldOptionIndex.value === -1) {
+    if (fieldOptionType.value === 'property') {
+      fieldPropertiesList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'constraint') {
+      fieldConstraintsList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'enum') {
+      fieldEnumList.value.push(fieldOptionForm.value)
+    }
+  } else {
+    fieldOptionType.value === 'property' &&
+      fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'constraint' &&
+      fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'enum' &&
+      fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+  }
+  fieldOptionModelVisible.value = false
+  fieldOptionForm.value = {}
+}
+// 保存字段配置
+const saveField = () => {
+  const { id, type, label, defaultValue, datePattern } = formFieldForm.value
+  const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
+  defaultValue && (Field.defaultValue = defaultValue)
+  datePattern && (Field.datePattern = datePattern)
+  // 构建属性
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
+      return bpmnInstances().moddle.create(`${prefix}:Property`, {
+        id: fp.id,
+        value: fp.value
+      })
+    })
+    Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+      values: fieldPropertyList
+    })
+  }
+  // 构建校验规则
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
+      return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
+        name: fc.name,
+        config: fc.config
+      })
+    })
+    Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
+      constraints: fieldConstraintList
+    })
+  }
+  // 构建枚举值
+  if (fieldEnumList.value && fieldEnumList.value.length) {
+    Field.values = fieldEnumList.value.map((fe) => {
+      return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
+    })
+  }
+  // 更新数组 与 表单配置实例
+  if (formFieldIndex.value === -1) {
+    fieldList.value.push(formFieldForm.value)
+    formData.value.fields.push(Field)
+  } else {
+    fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
+    formData.value.fields.splice(formFieldIndex.value, 1, Field)
+  }
+  updateElementExtensions()
+  fieldModelVisible.value = false
+}
+
+// 移除某个 字段的 配置项
+const removeFieldOptionItem = (option, index, type) => {
+  // console.log(option, 'option')
+  if (type === 'property') {
+    fieldPropertiesList.value.splice(index, 1)
+    return
+  }
+  if (type === 'enum') {
+    fieldEnumList.value.splice(index, 1)
+    return
+  }
+  fieldConstraintsList.value.splice(index, 1)
+}
+// 移除 字段
+const removeField = (field, index) => {
+  console.log(field, 'field')
+  fieldList.value.splice(index, 1)
+  formData.value.fields.splice(index, 1)
+  updateElementExtensions()
+}
+
+const updateElementExtensions = () => {
+  // 更新回扩展元素
+  const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
+    values: otherExtensions.value.concat(formData.value)
+  })
+  // 更新到元素上
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    extensionElements: newElExtensionElements
+  })
+}
+
+const formList = ref([]) // 流程表单的下拉框的数据
+onMounted(async () => {
+  formList.value = await FormApi.getFormSimpleList()
+})
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetFormList()
+      })
+  },
+  { immediate: true }
+)
+</script>

src/components/bpmnProcessDesigner/package/penal/form/ElementFormbk.vue

@@ -0,0 +1,478 @@
+<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'
+
+defineOptions({ name: 'ElementForm' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+
+const formKey = ref('')
+const businessKey = ref('')
+const optionModelTitle = ref('')
+const fieldList = ref<any[]>([])
+const formFieldForm = ref<any>({})
+const fieldType = ref({
+  long: '长整型',
+  string: '字符串',
+  boolean: '布尔类',
+  date: '日期类',
+  enum: '枚举类',
+  custom: '自定义类型'
+})
+const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
+const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
+const fieldModelVisible = ref(false)
+const fieldOptionModelVisible = ref(false)
+const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
+const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
+const fieldEnumList = ref<any[]>([]) // 枚举值列表
+const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
+const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
+const bpmnELement = ref()
+const elExtensionElements = ref()
+const formData = ref()
+const otherExtensions = ref()
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const resetFormList = () => {
+  bpmnELement.value = bpmnInstances().bpmnElement
+  formKey.value = bpmnELement.value.businessObject.formKey
+  if (formKey.value?.length > 0) {
+    formKey.value = parseInt(formKey.value)
+  }
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnELement.value.businessObject.get('extensionElements') ||
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+  // 获取元素表单配置 或者 创建新的表单配置
+  formData.value =
+    elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
+
+  // 业务标识 businessKey， 绑定在 formData 中
+  businessKey.value = formData.value.businessKey
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value = elExtensionElements.value.values.filter(
+    (ex) => ex.$type !== `${prefix}:FormData`
+  )
+
+  // 复制原始值，填充表格
+  fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions()
+}
+const updateElementFormKey = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    formKey: formKey.value
+  })
+}
+const updateElementBusinessKey = () => {
+  bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
+    businessKey: businessKey.value
+  })
+}
+// 根据类型调整字段type
+const changeFieldTypeType = (type) => {
+  // this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+  formFieldForm.value['type'] = type === 'custom' ? '' : type
+}
+
+// 打开字段详情侧边栏
+const openFieldForm = (field, index) => {
+  formFieldIndex.value = index
+  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 = []
+    // 初始化约束条件列表
+    fieldConstraintsList.value = []
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = []
+  }
+  fieldModelVisible.value = true
+}
+// 打开字段 某个 配置项 弹窗
+const openFieldOptionForm = (option, index, type) => {
+  fieldOptionModelVisible.value = true
+  fieldOptionType.value = type
+  formFieldOptionIndex.value = index
+  if (type === 'property') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '属性配置')
+  }
+  if (type === 'enum') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '枚举值配置')
+  }
+  fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+  return (optionModelTitle.value = '约束条件配置')
+}
+
+// 保存字段 某个 配置项
+const saveFieldOption = () => {
+  if (formFieldOptionIndex.value === -1) {
+    if (fieldOptionType.value === 'property') {
+      fieldPropertiesList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'constraint') {
+      fieldConstraintsList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'enum') {
+      fieldEnumList.value.push(fieldOptionForm.value)
+    }
+  } else {
+    fieldOptionType.value === 'property' &&
+      fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'constraint' &&
+      fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'enum' &&
+      fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+  }
+  fieldOptionModelVisible.value = false
+  fieldOptionForm.value = {}
+}
+// 保存字段配置
+const saveField = () => {
+  const { id, type, label, defaultValue, datePattern } = formFieldForm.value
+  const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
+  defaultValue && (Field.defaultValue = defaultValue)
+  datePattern && (Field.datePattern = datePattern)
+  // 构建属性
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
+      return bpmnInstances().moddle.create(`${prefix}:Property`, {
+        id: fp.id,
+        value: fp.value
+      })
+    })
+    Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+      values: fieldPropertyList
+    })
+  }
+  // 构建校验规则
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
+      return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
+        name: fc.name,
+        config: fc.config
+      })
+    })
+    Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
+      constraints: fieldConstraintList
+    })
+  }
+  // 构建枚举值
+  if (fieldEnumList.value && fieldEnumList.value.length) {
+    Field.values = fieldEnumList.value.map((fe) => {
+      return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
+    })
+  }
+  // 更新数组 与 表单配置实例
+  if (formFieldIndex.value === -1) {
+    fieldList.value.push(formFieldForm.value)
+    formData.value.fields.push(Field)
+  } else {
+    fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
+    formData.value.fields.splice(formFieldIndex.value, 1, Field)
+  }
+  updateElementExtensions()
+  fieldModelVisible.value = false
+}
+
+// 移除某个 字段的 配置项
+const removeFieldOptionItem = (option, index, type) => {
+  // console.log(option, 'option')
+  if (type === 'property') {
+    fieldPropertiesList.value.splice(index, 1)
+    return
+  }
+  if (type === 'enum') {
+    fieldEnumList.value.splice(index, 1)
+    return
+  }
+  fieldConstraintsList.value.splice(index, 1)
+}
+// 移除 字段
+const removeField = (field, index) => {
+  console.log(field, 'field')
+  fieldList.value.splice(index, 1)
+  formData.value.fields.splice(index, 1)
+  updateElementExtensions()
+}
+
+const updateElementExtensions = () => {
+  // 更新回扩展元素
+  const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
+    values: otherExtensions.value.concat(formData.value)
+  })
+  // 更新到元素上
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    extensionElements: newElExtensionElements
+  })
+}
+
+const formList = ref([]) // 流程表单的下拉框的数据
+onMounted(async () => {
+  formList.value = await FormApi.getFormSimpleList()
+})
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetFormList()
+      })
+  },
+  { immediate: true }
+)
+</script>

src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue

@@ -92,6 +92,7 @@ const resetAttributesList = () => {
     (pre, current) => pre.concat(current.values),
     []
   )
+  console.log(JSON.stringify(bpmnElementPropertyList.value ?? []),"bpmnElementPropertyList.value ?? []")
   // 复制 显示
   elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
 }

src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue

@@ -32,7 +32,6 @@
           {{ dict.label }}
         </el-radio>
       </el-radio-group>
-
     </el-form-item>
     <!--    ---pch add at 2024-11-06 end--->
     <el-form-item
@@ -197,6 +196,7 @@ const resetTaskForm = () => {
   if (!businessObject) {
     return
   }
+
   if (businessObject.candidateStrategy != undefined) {
     userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any
   } else {

src/utils/dict.ts

@@ -176,7 +176,7 @@ export enum DICT_TYPE {
   BPM_PROCESS_LISTENER_TYPE = 'bpm_process_listener_type',
   BPM_PROCESS_LISTENER_VALUE_TYPE = 'bpm_process_listener_value_type',
   BPM_TASK_CANDIDATE_RANGE = 'bpm_task_candidate_range',
-  OA_PROJECT_TYPE ='oa_project_type',
+  BPM_TASK_FORM_ITEM_TYPE ='bpm_task_form_item_type',
   // ========== PAY 模块 ==========
   PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
   PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态

src/views/Home/qjgl/QjglDetail.vue

@@ -11,12 +11,12 @@
       <el-row>
         <el-col :span="24">
           <el-form-item label="请假标题" prop="title">
-            <el-input v-model="formData.title" placeholder="请输入请假标题" disabled />
+            <el-input  v-model="formData.title" placeholder="请输入请假标题" :disabled="!isEditable('title')" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="起草人" prop="userName">
-            <el-input v-model="formData.userName" placeholder="请输入起草人" disabled />
+            <el-input  v-model="formData.userName" placeholder="请输入起草人"  :disabled="!isEditable('userName')" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -24,17 +24,17 @@
             <el-input v-model="formData.deptId" placeholder="请输入部门" v-show="false"  />
 <!--            <div class="pull-left" v-show="true" v-if="userInfo?.dept">{{ userInfo?.dept.name }} </div>-->
 <!--            <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo }} </div>-->
-            <el-input v-model="formData.deptName" placeholder="请输入部门信息" disabled/>
+            <el-input v-model="formData.deptName" placeholder="请输入部门信息" :disabled="!isEditable('deptName')" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="开始时间" prop="startTime" readonly>
+          <el-form-item label="开始时间" prop="startTime" >
             <el-date-picker
                 v-model="formData.startTime"
                 type="datetime"
                 value-format="x"
                 placeholder="选择开始时间"
-                disabled
+                :disabled="!isEditable('startTime')"
             />
           </el-form-item>
         </el-col>
@@ -45,14 +45,15 @@
                 type="datetime"
                 value-format="x"
                 placeholder="选择结束时间"
-                disabled
+                :disabled="!isEditable('startTime')"
+
             />
           </el-form-item>
         </el-col>
 
         <el-col :span="12">
           <el-form-item label="请假类型" prop="type" >
-            <el-select v-model="formData.type" placeholder="请选择请假类型" :disabled="isReadOnly">
+            <el-select v-model="formData.type" placeholder="请选择请假类型" :disabled="!isEditable('type')">
               <el-option
                   v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
                   :key="dict.value"
@@ -64,13 +65,13 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="请假天数" prop="day" >
-            <el-input v-model="formData.day" placeholder="请输入请假天数" disabled/>
+            <el-input v-model="formData.day" placeholder="请输入请假天数" :disabled="!isEditable('day')"/>
           </el-form-item>
         </el-col>
 
         <el-col :span="24">
           <el-form-item label="请假原因" prop="reason" >
-            <el-input v-model="formData.reason" placeholder="请输入请假原因" style="height: 100px;" disabled/>
+            <el-input v-model="formData.reason" placeholder="请输入请假原因" style="height: 100px;" :disabled="!isEditable('reason')"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -83,8 +84,9 @@ import { QjglApi, QjglVO } from '@/api/home/qjgl'
 import { propTypes } from '@/utils/propTypes'
 import {getUserProfile, ProfileVO} from "@/api/system/user/profile";
 import {DeptVO, getDept} from "@/api/system/dept";
-import * as DefinitionApi from '@/api/bpm/definition'
+import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
+import { getAccessToken } from '@/utils/auth'
+import {useUserStore} from "@/store/modules/user";
 /** 请假管理 表单 */
 defineOptions({ name: 'QjglDetail' })
 
@@ -128,39 +130,12 @@ const deptInfo = ref({} as DeptVO )
 const formRef = ref() // 表单 Ref
 const { query } = useRoute() // 查询参数
 const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
-/** 打开弹窗 */
+// pch begin
-// const open = async (type: string, id?: number) => {
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
-//   dialogVisible.value = true
+const userId = useUserStore().getUser.id // 当前登录的编号
-//   dialogTitle.value = t('action.' + type)
+//pch end
-//   formType.value = type
-//   resetForm()
-//   // 修改时，设置数据
-//   if (id) {
-//     formLoading.value = true
-//     try {
-//       formData.value = await QjglApi.getQjgl(id)
-//     } finally {
-//       formLoading.value = false
-//     }
-//   }
-// }
-// defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const getUserInfo = async () => {
     const users = await getUserProfile()
-  // if ( formData.value.deptId == '' ){
-  //   userInfo.value = users
-  //   formData.value.deptId= users.dept.id
-  //
-  //   deptInfo.value = {} as DeptVO
-  // }else{
-  //   const dept = await getDept(formData.value.deptId)
-  //   deptInfo.value = dept
-  //   userInfo.value = {} as ProfileVO
-  // }
-  // if (formData.value.userName == ''){
-  //   const users = await getUserProfile()
-  //   formData.value.userName= users.nickname
-  // }
 
   if (formData.value.deptId == ''||formData.value.deptId == undefined){
     formData.value.deptId= users.dept.id
@@ -180,30 +155,27 @@ const getUserInfo = async () => {
   }
 
 }
+const editableFields = ref([])
+const isEditable =  (field) =>  {
+  return editableFields.value.includes(field);  // 如果字段在 editableFields 中，则返回 true
+}
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
+const updatetForm = async () => {
   // 校验表单
   await formRef.value.validate()
   // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as QjglVO
-    if (formType.value === 'create') {
+    await QjglApi.updateQjgl(data)
-      await QjglApi.createQjgl(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await QjglApi.updateQjgl(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
     // 发送操作成功的事件
-    emit('success')
+    //emit('success')
   } finally {
     formLoading.value = false
   }
 }
-
+defineExpose({updatetForm})
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
@@ -223,17 +195,53 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+const itemControl = async () => {
+  // console.log(userId,"userId")
+  // console.log(queryId,"queryId")
+  let  flag = false
+  let itemType = ""
+  let itemContent = ""
+  if (queryId.length > 33 ) {  //流程中打开表单
+    const taskids = await TaskApi.getTaskIdsForProcessInstance( queryId )  //通过流程实例id得到待办任务列表
+    const token = getAccessToken()
+    for (const taskid of taskids) {
+      // 在 for...of 中可以使用 await
+      const assignee = await TaskApi.getTaskAssignee(taskid); //通过待办任务id得到审批人
+      //console.log(assignee, "assignee");
+      if ( assignee == userId ) {
+        flag = true
+        itemType = await TaskApi.getTaskConfigFromBpmn( taskid ,"itemType")
+        //console.log(itemType,"itemType")
+        if ( itemType == "1") {
+          itemContent = await TaskApi.getTaskConfigFromBpmn( taskid ,"itemContent")
+        }
+      }
+    }
+    if ( flag ) {  //当然用户是审批人
+      if ( itemType == "1") { //表单字段0:禁用,1:允许
+        //editableFields.value.push("userName")
+        const parsedObject = JSON.parse(itemContent);
+        Object.entries(parsedObject).forEach(([key, value]) => {
+          editableFields.value.push( key )
+          //console.log(key);
+        });
+      }
+
+    }
+  }
+}
 onMounted(async () => {
   const id = props.id || queryId
   if (id) {
     formLoading.value = true
     try {
       formData.value = await QjglApi.getQjgl(id)
+      await itemControl()
+      // TaskApi.getTaskAssignee()
     } finally {
       formLoading.value = false
     }
   }
-   //await getUserInfo()
+
-  // await getKnowtypeTree()
 })
 </script>

src/views/bpm/processInstance/detail/index.vue

@@ -18,7 +18,7 @@
           </el-col>
           <!-- 情况二：业务表单 -->
           <div v-if="processInstance?.processDefinition?.formType === 20">
-            <BusinessFormComponent :id="processInstance.businessKey" />
+            <BusinessFormComponent ref="businessForm" :id="processInstance.businessKey" />
           </div>
         </el-card>
       </el-tab-pane>
@@ -253,12 +253,13 @@ watch(
     deep: true
   }
 )
-
+const  businessForm = ref()
 /** 处理审批通过和不通过的操作 */
 const handleAudit = async (task, pass) => {
   // 1.1 获得对应表单
   const index = runningTasks.value.indexOf(task)
   const auditFormRef = proxy.$refs['form' + index][0]
+
   // 1.2 校验表单
   const elForm = unref(auditFormRef)
   if (!elForm) return
@@ -271,6 +272,7 @@ const handleAudit = async (task, pass) => {
     reason: auditForms.value[index].reason,
     copyUserIds: auditForms.value[index].copyUserIds
   }
+
   if (pass) {
     // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
     const formCreateApi = approveFormFApis.value[index]
@@ -279,6 +281,10 @@ const handleAudit = async (task, pass) => {
       data.variables = approveForms.value[index].value
     }
 
+    if (businessForm.value && businessForm.value.updatetForm) {
+        businessForm.value.updatetForm() // 调用异步组件的提交方法
+    }
+
     await TaskApi.approveTask(data)
     message.success('审批通过成功')
   } else {
@@ -286,7 +292,7 @@ const handleAudit = async (task, pass) => {
     message.success('审批不通过成功')
   }
   // 2.2 加载最新数据
-  getDetail()
+  //getDetail()
   delView(unref(currentRoute))
   back()
 }
@@ -370,6 +376,8 @@ const getProcessInstance = async () => {
           if ( formCreatePath ) {
             const   formCustomViewPaht = await FormProcessMappingApi.getFormCustomViewPath( formCreatePath )
             if ( formCustomViewPaht ) {
+              console.log(formCustomViewPaht,"formCustomViewPaht")
+              console.log(registerComponent(formCustomViewPaht),"registerComponent(formCustomViewPaht)")
               BusinessFormComponent.value = registerComponent(formCustomViewPaht)
             }
           }
@@ -459,6 +467,7 @@ const loadRunningTask = (tasks) => {
       approveForms.value.push({}) // 占位，避免为空
     }
   })
+  console.log(runningTasks,"runningTasks")
 }
 
 /** 初始化 */