流程设计更新

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

@@ -58,7 +58,8 @@
             <el-collapse v-model="tab_active">
               <el-collapse-item name="condition" v-if="formVisible" key="form">
                 <template #title><Icon icon="ep:list" />表单</template>
-                <element-form :id="elementId" :type="elementType" />
+<!--                <element-form :id="elementId" :type="elementType" /> 久组件-->
+                <ElementFormNew :id="elementId" :type="elementType" />
               </el-collapse-item>
             </el-collapse>
           </div>
@@ -90,6 +91,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 ElementFormNew from './form/ElementFormNew.vue'
 // import ElementForm from './form/ElementForm2.vue'
 import UserTaskListeners from './listeners/UserTaskListeners.vue'
 // 切换tab自动刷新实现 begin+++++++++++++

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

@@ -20,11 +20,70 @@
       </el-form-item>
     </el-form>
 
-      <div class="panel-tab__content"  v-if="itemType == 1 ">
+    <div  v-if="itemType == 1 ">
-        <el-input v-model="itemContent"   @change="updateElementItemContent" />
+
+      <el-table
+        :data="parsedData"
+        max-height="240"
+        fit
+        border
+      >
+        <el-table-column label="序号" width="60px" type="index" />
+        <el-table-column label="字段名" prop="key" min-width="100px" show-overflow-tooltip />
+        <el-table-column label="字段值" prop="value" min-width="100px" show-overflow-tooltip />
+        <el-table-column label="操作" width="110px">
+          <template #default="scope">
+            <el-button link @click="EditForm(scope.row, scope.$index)" size="small">
+              编辑
+            </el-button>
+            <el-divider direction="vertical" />
+            <el-button link size="small" style="color: #ff4d4f" @click="removeForm(scope.$index)">
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <XButton
+          type="primary"
+          preIcon="ep:plus"
+          title="添加字段"
+          @click="addNew()"
+        />
       </div>
+    </div>
 
   </div>
+
+  <el-dialog
+    v-model="Visible"
+    title="字段配置"
+    width="600px"
+    append-to-body
+    destroy-on-close
+  >
+
+    <el-form
+      :model="propertyForm"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="字段名：" prop="key">
+        <el-input v-model="propertyForm.key" clearable />
+      </el-form-item>
+      <el-form-item label="字段值：" prop="value">
+        <el-input v-model="propertyForm.value" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="Visible = false">取 消</el-button>
+      <el-button type="primary" @click="saveAttribute">确 定</el-button>
+    </template>
+
+  </el-dialog>
+
 </template>
 
 <script lang="ts" setup>
@@ -69,6 +128,98 @@ const bpmnELement = ref()
 const elExtensionElements = ref()
 const formData = ref()
 const otherExtensions = ref()
+// ----------------------------------------------------------------------------- 扩展组件应用
+const parsedData =ref([]); // 定义存放JSON数组对象
+const Visible = ref(false); // 弹窗控制
+const idEditIndex = ref(null); // 编辑索引判断是否编辑
+// 表单数据模型
+const propertyForm = ref({
+  key:undefined,
+  value:undefined
+})
+// 表单校验
+const formRules = reactive({
+  key: [{ required: true, message: '字段名不能为空', trigger: 'blur' }],
+  value: [{ required: true, message: '字段值不能为空', trigger: 'blur' }],
+})
+
+// 新建修改字段
+const addNew = ()=> {
+  resetForm();
+  Visible.value = true;
+}
+
+// 清空表单数据
+const resetForm = ()=> {
+  propertyForm.value={
+    key:undefined,
+    value:undefined
+  }
+  idEditIndex.value = null;
+}
+
+// 保存数据并更新itemContent
+const saveAttribute = ()=> {
+  // console.log("保存idEditIndex--------:  ",idEditIndex.value)
+
+  // 深拷贝后添加，避免引用问题
+  const newAttribute = { ...propertyForm.value };
+
+  // 判断idEditIndex 为空新建,不为空更新
+  if (idEditIndex.value === null) {
+    parsedData.value.push(newAttribute)
+  } else {
+    parsedData.value[idEditIndex.value] = newAttribute;
+  }
+
+  resetForm();  // 清空数据
+
+  updateContent();  // 更新itemContent
+
+  Visible.value = false  // 关闭弹窗
+}
+
+// 删除数据
+const removeForm = (index:any)=> {
+
+  // 删除弹框
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      // 判断index删除数据
+      if (index >= 0 && index < parsedData.value.length) {
+        parsedData.value.splice(index, 1);
+      }
+      // 更新itemContent
+      updateContent();
+    })
+    .catch(() => console.info('操作取消'))
+}
+
+// 编辑数据
+const EditForm = (attr:any,index:any)=> {
+
+  propertyForm.value = { ...attr};  // 赋值数据
+  idEditIndex.value = index;  // 赋值索引
+  Visible.value = true;  // 打开弹窗
+}
+
+// XML数据每次改变更新
+const updateContent = ()=> {
+
+  // JSON数组 转换为字符串
+  itemContent.value = JSON.stringify(parsedData.value)
+
+  // 更新itemContent
+  updateElementItemContent();
+
+  // console.log("更新parsedData-------:  ",parsedData.value)
+  // console.log("更新itemContent--------:",itemContent.value)
+}
+
+// ----------------------------------------------------------------------------- 扩展组件应用
 
 const bpmnInstances = () => (window as any)?.bpmnInstances
 const resetFormList = () => {  //
@@ -76,6 +227,14 @@ const resetFormList = () => {  //
   formKey.value = bpmnELement.value.businessObject.formKey
   itemType.value = bpmnELement.value.businessObject.itemType
   itemContent.value = bpmnELement.value.businessObject.itemContent
+
+  try {
+    // 转换为JSON数组
+    parsedData.value = JSON.parse(itemContent.value);
+  } catch (error) {
+    console.error("无效JSON格式", error);
+  }
+
   if (formKey.value?.length > 0) {
     formKey.value = parseInt(formKey.value)
   }