fix ui

Author: xlorne

flow-engine-framework/src/main/java/com/codingapi/flow/form/FormFieldMeta.java

@@ -1,5 +1,6 @@
 package com.codingapi.flow.form;
 
+import com.codingapi.flow.utils.RandomUtils;
 import lombok.Data;
 
 /**
@@ -8,6 +9,8 @@
 @Data
 public class FormFieldMeta {
 
+    // 字段编号
+    private String id;
     // 字段名称
     private String name;
     // 字段编号
@@ -19,4 +22,8 @@ public class FormFieldMeta {
     // 默认值
     private String defaultValue;
 
+    public FormFieldMeta() {
+        this.id = RandomUtils.generateStringId();
+    }
+
 }

flow-engine-framework/src/main/java/com/codingapi/flow/form/FormMeta.java

@@ -72,6 +72,7 @@ public static FormMeta fromMap(Map<String, Object> map) {
         if(fields!=null && !fields.isEmpty()) {
             for (Map<String, Object> field : fields) {
                 FormFieldMeta fieldMeta = new FormFieldMeta();
+                fieldMeta.setId((String) field.get("id"));
                 fieldMeta.setName((String) field.get("name"));
                 fieldMeta.setCode((String) field.get("code"));
                 fieldMeta.setType((String) field.get("type"));

frontend/packages/flow-design/src/pages/design-panel/manager/workflow/form.ts

@@ -13,15 +13,15 @@ export class WorkflowFormManager {
 
     private loadFormList(): void {
         this.formList.push(this.form);
-        if(this.form.subForms && this.form.subForms.length>0) {
+        if (this.form.subForms && this.form.subForms.length > 0) {
             for (const subForm of this.form.subForms) {
                 this.formList.push(subForm);
             }
         }
     }
 
-    public getFormFields(code:string){
-        let result:FormField[] = [];
+    public getFormFields(code: string) {
+        let result: FormField[] = [];
         for (const subForm of this.formList) {
             if (subForm.code == code) {
                 result = subForm.fields || [];
@@ -30,56 +30,59 @@ export class WorkflowFormManager {
         return result;
     }
 
-    public removeSubForm(code:string){
+    public removeSubForm(code: string) {
         const currentSubForms = this.form.subForms || [];
         const subForms = currentSubForms.filter(subForm => subForm.code !== code);
         return {
             ...this.form,
-            subForms:subForms
+            subForms: subForms
         }
     }
 
-    public addSubForm(values:any){
+    public addSubForm(values: any) {
         const subForms = [...this.form.subForms || []];
         subForms.push(values);
         return {
             ...this.form,
-            subForms:subForms
+            subForms: subForms
         }
     }
 
-    public mergeValue(code: string, values: any):FlowForm {
+    public updateFieldValue(code: string, values: any): FlowForm {
         const currentFields = this.getFormFields(code);
-        const currentFieldCode = values['code'];
-        const list:FormField[] = [];
+        const currentFieldId = values['id'];
+        const list: FormField[] = [];
         let exist = false;
         for (const field of currentFields) {
-            if(field.code === currentFieldCode) {
+            if (field.id === currentFieldId) {
                 list.push(values);
                 exist = true;
-            }else {
+            } else {
                 list.push(field);
             }
         }
-        if(!exist){
-            list.push(values);
+        if (!exist) {
+            list.push({
+                ...values,
+                id:crypto.randomUUID(),
+            });
         }
         const mainCode = this.form.code;
-        if(code===mainCode){
+        if (code === mainCode) {
             return {
                 ...this.form,
-                fields:list,
+                fields: list,
             }
-        }else {
+        } else {
             return {
                 ...this.form,
-                subForms:this.form.subForms.map(item=>{
-                    if(item.code===code){
+                subForms: this.form.subForms.map(item => {
+                    if (item.code === code) {
                         return {
                             ...item,
-                            fields:list
+                            fields: list
                         }
-                    }else {
+                    } else {
                         return item;
                     }
                 }),
@@ -92,22 +95,22 @@ export class WorkflowFormManager {
         const fields = [...currentFields];
         const list = fields.filter(file => file.code !== fieldCode);
         const mainCode = this.form.code;
-        if(formCode==mainCode){
+        if (formCode == mainCode) {
             return {
                 ...this.form,
-                fields:list,
+                fields: list,
             }
-        }else {
+        } else {
             return {
                 ...this.form,
-                fields:list,
-                subForms:this.form.subForms.map(item=>{
-                    if(item.code===formCode){
+                fields: list,
+                subForms: this.form.subForms.map(item => {
+                    if (item.code === formCode) {
                         return {
                             ...item,
-                            fields:list
+                            fields: list
                         }
-                    }else {
+                    } else {
                         return item;
                     }
                 }),

frontend/packages/flow-design/src/pages/design-panel/presenters/index.ts

@@ -97,7 +97,7 @@ export class Presenter {
 
     public updateWorkflowFormField(code: string, values: any) {
         const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
-        const form = workflowFormManager.mergeValue(code, values);
+        const form = workflowFormManager.updateFieldValue(code, values);
         this.updateWorkflowForm(form);
     }
 

frontend/packages/flow-design/src/pages/design-panel/tabs/form.tsx

@@ -48,6 +48,13 @@ const FormFieldModal: React.FC<FormFieldModalProps> = (props) => {
                     props.onClose?.();
                 }}
             >
+                <Form.Item
+                    name={"id"}
+                    hidden={true}
+                >
+                    <Input/>
+                </Form.Item>
+
                 <Form.Item
                     name={"name"}
                     label={"字段名称"}
@@ -185,6 +192,11 @@ const FormTable: React.FC<FormTableProps> = (props) => {
     const [editable, setEditable] = useState(false);
 
     const columns: TableProps<any>['columns'] = [
+        {
+            dataIndex: 'id',
+            title: 'id',
+            hidden: true,
+        },
         {
             dataIndex: 'name',
             title: '字段名称',
@@ -246,7 +258,7 @@ const FormTable: React.FC<FormTableProps> = (props) => {
         <>
             <Table
                 columns={columns}
-                rowKey={"code"}
+                rowKey={"id"}
                 dataSource={workflowFormManager.getFormFields(props.code)}
                 title={() => {
                     return (

frontend/packages/flow-design/src/pages/design-panel/types.ts

@@ -34,6 +34,7 @@ export interface DesignPanelProps {
 
 // 表单字段
 export interface FormField{
+    id:string;
     name: string;
     code: string;
     type: string;