diff --git a/package.json b/package.json
index e958a94f607062d97bb7251991ba500ff7ea508e..86a6ec278b34905f8634afe1770bd0b69cf8eabc 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "reflect-metadata": "^0.2.2",
     "type-fest": "^4.20.0",
     "umi-request": "^1.4.0",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/components/ArrowTag/index.module.css b/src/components/ArrowTag/index.module.css
index 62131bcc280113d82c059cfd00cb4cbcd16e6193..ffd3c533ecf7e0be58ec26d18171564e9b40d39f 100644
--- a/src/components/ArrowTag/index.module.css
+++ b/src/components/ArrowTag/index.module.css
@@ -16,4 +16,5 @@
   font-weight: 600;
   font-size: 16px;
   padding: 0 10px 0 5px;
+  transform: translateX(-1px);
 }
diff --git a/src/components/BasicModal/index.tsx b/src/components/BasicModal/index.tsx
index 9e6e54ae3ff62ae0bb6d9d29586189bb9d48b184..ee61a4f5350e92a7b31734ccc4f4ff74479b6723 100644
--- a/src/components/BasicModal/index.tsx
+++ b/src/components/BasicModal/index.tsx
@@ -28,7 +28,12 @@ const BasicModal: React.FC<PropsWithChildren<ModalProps>> = (props) => {
   }
 
   return (
-    <div className={styles.modalWrap} style={{ zIndex }}>
+    <div
+      className={styles.modalWrap}
+      style={{ zIndex }}
+      // 禁止弹窗冒泡
+      onClick={(e) => e.stopPropagation()}
+    >
       <div className={styles.modalMask} />
       <div className={styles.modalContentWrap}>
         <div
diff --git a/src/components/FormComponentRender/renderComponent.tsx b/src/components/FormComponentRender/renderComponent.tsx
index 5aaad7f0c0dbe9dc2a39eeb4fb926e57f9fc7336..ea9d958e27f8278fe711bec6edce036c43c89f09 100644
--- a/src/components/FormComponentRender/renderComponent.tsx
+++ b/src/components/FormComponentRender/renderComponent.tsx
@@ -1,11 +1,13 @@
 import Checkbox from "@/customForm/components/Checkbox";
+import DatePicker from "@/customForm/components/DatePicker";
 import FileUpload from "@/customForm/components/FileUpload";
 import List from "@/customForm/components/List";
 import FormRadio from "@/customForm/components/Radio";
+import HnSelect from "@/customForm/components/Select";
 import UserSelect from "@/customForm/components/UserSelect";
 import ImageUpload from "@/customForm/components/imageUpload";
 import { ComponentsType } from "@/customForm/interfaces";
-import { DatePicker, Input, Select } from "antd";
+import { Input } from "antd";
 import { useMemo } from "react";
 
 interface RenderComponentProps {
@@ -20,29 +22,41 @@ const RenderComponent = (props: RenderComponentProps) => {
 
   const componentsRegister = useMemo(() => {
     const composeProps = { ...newProps, ...config };
+
     switch (componentType) {
       case "TextInput":
         return <Input {...composeProps} />;
+      case "NumberInput":
+        return <Input {...composeProps} />;
       case "Branch":
         return "";
       case "DatePicker":
-        return <DatePicker {...composeProps}></DatePicker>;
+        return (
+          <DatePicker
+            {...composeProps}
+            onChange={(str) => {
+              console.log(str);
+            }}
+          ></DatePicker>
+        );
       case "TextAreaInput":
         return <Input.TextArea {...composeProps} />;
       case "Radio":
         return <FormRadio {...composeProps} />;
       case "Select":
-        return <Select style={{ width: 160 }} {...composeProps} />;
+        return <HnSelect {...composeProps}></HnSelect>;
       case "FileUpload":
-        return <FileUpload></FileUpload>;
+        return <FileUpload {...composeProps}></FileUpload>;
       case "ImgUpload":
-        return <ImageUpload></ImageUpload>;
+        return <ImageUpload {...composeProps}></ImageUpload>;
       case "Checkbox":
         return <Checkbox {...composeProps}></Checkbox>;
       case "List":
         return <List {...composeProps}></List>;
       case "UserSelect":
         return <UserSelect {...composeProps}></UserSelect>;
+      case "PhoneInput":
+        return <Input {...composeProps} />;
       default:
         return "";
     }
diff --git a/src/config/dev.ts b/src/config/dev.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d81d7030d1c1d2bfa7effb79ed9e186a993c5641
--- /dev/null
+++ b/src/config/dev.ts
@@ -0,0 +1,3 @@
+export default {
+  imgHost: "http://192.168.2.24:9000",
+};
diff --git a/src/config/util.ts b/src/config/util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf1bbcab8ad0c6346157ed1215179cca700bb754
--- /dev/null
+++ b/src/config/util.ts
@@ -0,0 +1,5 @@
+import dev from "./dev";
+
+export function composeImgUrl(imgStr: string) {
+  return `${dev.imgHost}${imgStr}`;
+}
diff --git a/src/customForm/components/Checkbox/index.tsx b/src/customForm/components/Checkbox/index.tsx
index 3aa5a41c6c77325c232c22b86f3611df0c75eaa1..466964f84ffc7602f27ffbfe28ae9a6b12a2ecf2 100644
--- a/src/customForm/components/Checkbox/index.tsx
+++ b/src/customForm/components/Checkbox/index.tsx
@@ -17,7 +17,7 @@ const Checkbox = ({ value, onChange, options }: CheckboxProps) => {
   const [selected, setSelected] = useState<string[]>([]);
 
   useEffect(() => {
-    if (typeof value === "object" && isEqual(value, selected)) {
+    if (typeof value === "object" && !isEqual(value, selected)) {
       setSelected(value);
     }
   }, [value]);
@@ -53,6 +53,9 @@ const Checkbox = ({ value, onChange, options }: CheckboxProps) => {
       </div>
     );
   }
+  if (options && options.length === 0) {
+    return <div>没有可供选择的选项</div>;
+  }
   return (
     <div
       onClick={onChange?.bind(this, !value)}
diff --git a/src/customForm/components/DatePicker/index.tsx b/src/customForm/components/DatePicker/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0efc7d37110643e09e8a4fadab5c7ac4f05bb876
--- /dev/null
+++ b/src/customForm/components/DatePicker/index.tsx
@@ -0,0 +1,34 @@
+import { DatePicker, Radio } from "antd";
+import React from "react";
+
+interface HnDatePickerProps {
+  picker: any;
+  onChange?: (value: any) => void;
+  value?: any;
+  isRange: boolean;
+}
+
+const HnDatePicker: React.FC<HnDatePickerProps> = (props) => {
+  const { isRange, value, picker, onChange } = props;
+
+  if (isRange) {
+    return (
+      <DatePicker.RangePicker
+        inputReadOnly
+        picker={picker}
+        value={value}
+        onChange={onChange}
+      ></DatePicker.RangePicker>
+    );
+  }
+  return (
+    <DatePicker
+      value={value}
+      picker={picker}
+      onChange={onChange}
+      inputReadOnly
+    ></DatePicker>
+  );
+};
+
+export default HnDatePicker;
diff --git a/src/customForm/components/FileUpload/index.tsx b/src/customForm/components/FileUpload/index.tsx
index 84ac5c01d47e7a93da207ee80782c518d460152e..a7635f2609f6a57fdd8b4aab7cca6e60fc3f4754 100644
--- a/src/customForm/components/FileUpload/index.tsx
+++ b/src/customForm/components/FileUpload/index.tsx
@@ -1,37 +1,70 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { InboxOutlined } from "@ant-design/icons";
 import type { UploadProps } from "antd";
 import { message, Upload } from "antd";
+import { isEqual } from "lodash";
 
 const { Dragger } = Upload;
 
-const props: UploadProps = {
-  name: "file",
-  multiple: true,
-  action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
-  onChange(info) {
-    const { status } = info.file;
-    if (status !== "uploading") {
-      console.log(info.file, info.fileList);
-    }
-    if (status === "done") {
-      message.success(`${info.file.name} file uploaded successfully.`);
-    } else if (status === "error") {
-      message.error(`${info.file.name} file upload failed.`);
+interface FileUploadProps {
+  onChange: (params: string) => void;
+  value: string;
+  placeholder?: string;
+}
+
+const FileUpload: React.FC<FileUploadProps> = (props) => {
+  const { placeholder, value, onChange } = props;
+  const [fileList, setFilList] = useState<string[]>([]);
+  useEffect(() => {
+    if (typeof value === "string") {
+      const list = value?.split(",");
+      if (list && list.length > 0 && isEqual(fileList, list)) {
+        setFilList(list);
+      }
     }
-  },
-  onDrop(e) {
-    console.log("Dropped files", e.dataTransfer.files);
-  },
-};
+  }, [value]);
 
-const FileUpload: React.FC = () => (
-  <Dragger {...props}>
-    <p className="ant-upload-drag-icon">
-      <InboxOutlined />
-    </p>
-    <p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
-  </Dragger>
-);
+  const DraggerProps: UploadProps = {
+    name: "file",
+    multiple: true,
+    action: "/apis/oss/upload?bucketName=cgtf",
+    maxCount: 1,
+    accept: ".pdf",
+    onChange(info) {
+      const { status } = info.file;
+      if (status === "done") {
+        const imgStr = info.fileList.map((item) => {
+          return item.response.data;
+        }) as string[];
+        setFilList(imgStr);
+        onChange(imgStr.join(","));
+        message.success(`${info.file.name}上传成功.`);
+      } else if (status === "error") {
+        message.error(`${info.file.name}上传失败.`);
+      }
+    },
+    defaultFileList: fileList.map((v, i) => {
+      return {
+        uid: (i + 1).toString(),
+        name: v,
+        status: "done",
+        url: v,
+      };
+    }),
+    onDrop(e) {
+      console.log("Dropped files", e.dataTransfer.files);
+    },
+  };
+  return (
+    <Dragger {...DraggerProps}>
+      <p className="ant-upload-drag-icon">
+        <InboxOutlined />
+      </p>
+      <p className="ant-upload-text">
+        {placeholder ?? "单击或拖动文件到此区域进行上传"}
+      </p>
+    </Dragger>
+  );
+};
 
 export default FileUpload;
diff --git a/src/customForm/components/List/index.tsx b/src/customForm/components/List/index.tsx
index 1736ffa506461c3a146a556291fbc495fbfd82a5..96db624b2ac258670418943f03744cd3abcb7e14 100644
--- a/src/customForm/components/List/index.tsx
+++ b/src/customForm/components/List/index.tsx
@@ -1,33 +1,29 @@
 import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
-import { Button, Flex, Input, Space } from "antd";
-import { cloneDeep, isEqual } from "lodash";
+import { Button, Flex, Input } from "antd";
+import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 
 interface ListProps {
-  value: { label: string; value: string }[];
-  onChange: (params: { label: string; value: string }[]) => void;
+  value: string[];
+  onChange: (params: string[]) => void;
 }
 
 const List = (props: ListProps) => {
   const { value, onChange } = props;
-  const [data, setData] = useState([
-    {
-      label: "",
-      value: "",
-    },
-  ]);
+  const [data, setData] = useState([""]);
 
   useEffect(() => {
-    if (!value || isEqual(data, value)) {
-      return;
-    } else {
+    if (value && Array.isArray(value) && value.length > 0) {
       setData(value);
+    } else {
+      setData([""]);
     }
+    console.log(value);
   }, [value]);
 
   const add = (index: number) => {
     const temp = cloneDeep(data);
-    temp.splice(index + 1, 0, { label: "", value: "" });
+    temp.splice(index + 1, 0, "");
     setData(temp);
   };
 
@@ -39,9 +35,9 @@ const List = (props: ListProps) => {
   const LabelChange = (e: any, index: number) => {
     const v = e.target.value;
     const temp = cloneDeep(data);
-    temp[index].label = v;
-    temp[index].value = v;
+    temp[index] = v;
     setData(temp);
+    onChange(temp);
   };
 
   return (
@@ -51,7 +47,7 @@ const List = (props: ListProps) => {
           <Flex gap={12} key={i} style={{ marginBottom: 12 }}>
             <Input
               placeholder="请填写选项"
-              value={item.label}
+              value={item}
               onChange={(e: any) => LabelChange(e, i)}
             ></Input>
             <Button
diff --git a/src/customForm/components/Radio/index.tsx b/src/customForm/components/Radio/index.tsx
index f32fde496d1c2f47b9c19c440bf7a9d14cee58bc..b2da414971d6a6969e8c3dc2b5b0b79f107f73b0 100644
--- a/src/customForm/components/Radio/index.tsx
+++ b/src/customForm/components/Radio/index.tsx
@@ -8,9 +8,15 @@ interface FormRadioProps {
 }
 
 const FormRadio: React.FC<FormRadioProps> = ({ option, onChange, value }) => {
+  let optionTemp: any = [...option];
+  optionTemp = optionTemp.map((v: any) => {
+    if (typeof v === "string") return { label: v, value: v };
+
+    return v;
+  });
   return (
     <Radio.Group onChange={onChange} value={value}>
-      {option.map((item) => {
+      {optionTemp.map((item: any) => {
         return <Radio value={item.value}>{item.label}</Radio>;
       })}
     </Radio.Group>
diff --git a/src/customForm/components/Select/index.tsx b/src/customForm/components/Select/index.tsx
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..af76974bde7541eca7906beb017e44aa35028795 100644
--- a/src/customForm/components/Select/index.tsx
+++ b/src/customForm/components/Select/index.tsx
@@ -0,0 +1,42 @@
+import { Select } from "antd";
+import { useEffect, useMemo } from "react";
+
+interface HnSelectProps {
+  value?: any;
+  onChange?: (value: any) => void;
+  option?: string[] | { label: string; value: string }[];
+  multiple?: boolean;
+  [kye: string]: any;
+}
+
+const HnSelect = (props: HnSelectProps) => {
+  const { option, multiple, value, onChange, ...config } = props;
+
+  /** 构造适用的option */
+  const newOption = useMemo(() => {
+    let temp!: any[];
+    if (typeof option === "string") {
+      temp = (option as string).split(",");
+    } else if (Array.isArray(option)) {
+      temp = option;
+    }
+    return temp?.map((item) => {
+      if (typeof item === "string") {
+        return { label: item, value: item };
+      }
+      return item;
+    });
+  }, [option]);
+  return (
+    <Select
+      value={value}
+      onChange={onChange}
+      mode={multiple ? "multiple" : undefined}
+      style={{ width: 160 }}
+      options={newOption}
+      {...config}
+    />
+  );
+};
+
+export default HnSelect;
diff --git a/src/customForm/components/UserSelect/index.module.css b/src/customForm/components/UserSelect/index.module.css
index d55867373bacb22ab4e534b5ed11772221dceb0e..9f42ca9a0769628a86c5080f4e33ba23ed302804 100644
--- a/src/customForm/components/UserSelect/index.module.css
+++ b/src/customForm/components/UserSelect/index.module.css
@@ -2,7 +2,7 @@
   /* width: 320px; */
   height: 40px;
   display: flex;
-  padding: 0 22px;
+  padding: 0 12px;
   align-items: center;
   justify-content: space-between;
   border-radius: 10px;
@@ -64,7 +64,14 @@
 .leftCard {
   flex: 1;
 }
-
+.treeContent {
+  height: 410px;
+  overflow: auto;
+  border-radius: 10px;
+  background-color: #ffffff;
+  padding: 16px 0;
+  box-sizing: border-box;
+}
 .footer {
   height: 86px;
   display: flex;
diff --git a/src/customForm/components/UserSelect/index.tsx b/src/customForm/components/UserSelect/index.tsx
index 53c5854aed3e8fa873e7984a4c33dfadb88dc229..948c29ea3c258b07be212e447a516b7ded7c4cc4 100644
--- a/src/customForm/components/UserSelect/index.tsx
+++ b/src/customForm/components/UserSelect/index.tsx
@@ -1,55 +1,96 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import styles from "./index.module.css";
 import { DownOutlined } from "@ant-design/icons";
 import BasicModal from "@/components/BasicModal";
 import { useBoolean } from "ahooks";
-import { Button, Input, Space, Tag, Tree, TreeDataNode } from "antd";
+import { Button, Empty, Input, Space, Tag, Tree, TreeDataNode } from "antd";
 import setting from "@/assets/images/setting/setting.png";
+import service from "@/service";
+import { isEqual } from "lodash";
 
-const treeData: TreeDataNode[] = [
-  {
-    title: "parent 1",
-    key: "0-0",
-    children: [
-      {
-        title: "parent 1-0",
-        key: "0-0-0",
-        disabled: true,
-        children: [
-          {
-            title: "leaf",
-            key: "0-0-0-0",
-            disableCheckbox: true,
-          },
-          {
-            title: "leaf",
-            key: "0-0-0-1",
-          },
-        ],
-      },
-      {
-        title: "parent 1-1",
-        key: "0-0-1",
-        children: [
-          {
-            title: <span style={{ color: "#1677ff" }}>sss</span>,
-            key: "0-0-1-0",
-          },
-        ],
-      },
-    ],
-  },
-];
+interface UserSelectProps {
+  value: string[];
+  onChange: (values: string[]) => void;
+}
+
+const UserSelect = (props: UserSelectProps) => {
+  const { value, onChange } = props;
+  const [selected, setSelected] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isEqual(value, selected)) {
+      return;
+    } else {
+      console.log(value);
+      setSelected(value);
+    }
+  }, [value]);
 
-const UserSelect = () => {
-  const [selected, setSelected] = useState("");
   /** 开启选人modal */
   const [visible, { toggle }] = useBoolean(false);
+  const [dataSource, setDataSource] = useState<API.StaffInfo[]>([]);
+  const [userTree, setUserTree] = useState<TreeDataNode[]>([]);
+
+  const buildTree = (data: API.StaffInfo[]) => {
+    const treeData = data
+      .filter((v) => !v.isAccountLocked)
+      .map((item) => {
+        return {
+          title: item.nickName,
+          key: item.id,
+          value: item.id,
+        };
+      });
+    setUserTree(treeData);
+    return treeData;
+  };
+
+  useEffect(() => {
+    buildTree(dataSource);
+  }, [dataSource]);
+
+  useEffect(() => {
+    service.commonService.getAllUser().then((res) => {
+      if (res.code === 200) {
+        setDataSource(res.data);
+      }
+    });
+  }, []);
+
+  const onCheck = (ids: string[]) => {
+    setSelected(ids);
+  };
+
+  const selectedInfo = useMemo(() => {
+    return (
+      selected?.map((item) => {
+        return dataSource.find((data) => data.id === item);
+      }) ?? []
+    );
+  }, [selected, dataSource]);
+
+  const onSearch = (searchStr: string) => {
+    if (searchStr.length === 0) {
+      buildTree(dataSource);
+    }
+
+    const list = dataSource.filter((item) => {
+      return item.nickName.includes(searchStr);
+    });
+    buildTree(list);
+  };
+
+  const submit = () => {
+    if (onChange && typeof onChange === "function") {
+      onChange(selected);
+      toggle();
+    }
+  };
   return (
     <>
       <div className={styles.selectBtn} onClick={toggle}>
-        {selected && selected.length > 0 ? (
-          <div>selected</div>
+        {selected && selected?.length > 0 ? (
+          <div>{selectedInfo.map((v) => v?.nickName).join(",")}</div>
         ) : (
           <div>请选择</div>
         )}
@@ -73,29 +114,40 @@ const UserSelect = () => {
               <Input.Search
                 style={{ marginBottom: 16 }}
                 placeholder="请输入人员名称"
+                onSearch={onSearch}
               ></Input.Search>
-              <Tree
-                checkable
-                defaultExpandedKeys={["0-0-0", "0-0-1"]}
-                defaultSelectedKeys={["0-0-0", "0-0-1"]}
-                defaultCheckedKeys={["0-0-0", "0-0-1"]}
-                treeData={treeData}
-              />
+              <div className={styles.treeContent}>
+                <Tree
+                  checkable
+                  treeData={userTree}
+                  checkedKeys={selected}
+                  onCheck={onCheck as any}
+                />
+              </div>
             </div>
             <div className={styles.rightCard}>
               <div>选中的人员</div>
-              <div>
-                <Tag closeIcon>Prevent Default</Tag>
-                <Tag closeIcon>Prevent Default</Tag>
-                <Tag closeIcon>Prevent Default</Tag>
-                <Tag closeIcon>Prevent Default</Tag>
+              <div style={{ marginTop: 8 }}>
+                {selectedInfo?.map((item) => {
+                  return (
+                    <Tag closeIcon style={{ marginBottom: 8 }}>
+                      {item?.nickName}
+                    </Tag>
+                  );
+                })}
+                {selectedInfo?.length === 0 && (
+                  <div>
+                    <Empty description="暂未选中人员"></Empty>
+                  </div>
+                )}
               </div>
             </div>
           </div>
           <div className={styles.footer}>
             <Space>
-              <Button type="primary">确定</Button>
-              <Button>取消</Button>
+              <Button type="primary" onClick={submit}>
+                确定
+              </Button>
             </Space>
           </div>
         </div>
diff --git a/src/customForm/components/imageUpload/index.tsx b/src/customForm/components/imageUpload/index.tsx
index 3b55e42fdc77b077334ac062bd59acc61062f9da..d79a49bd50b80ad7c291f1f56c7d1b6b26a2dc71 100644
--- a/src/customForm/components/imageUpload/index.tsx
+++ b/src/customForm/components/imageUpload/index.tsx
@@ -1,10 +1,17 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { PlusOutlined } from "@ant-design/icons";
 import { Image, Upload } from "antd";
 import type { GetProp, UploadFile, UploadProps } from "antd";
+import { isEqual } from "lodash";
+import { composeImgUrl } from "@/config/util";
 
 type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
 
+interface ImageUploadProps {
+  onChange: (params: string) => void;
+  value: string;
+  placeholder?: string;
+}
 const getBase64 = (file: FileType): Promise<string> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -13,17 +20,28 @@ const getBase64 = (file: FileType): Promise<string> =>
     reader.onerror = (error) => reject(error);
   });
 
-const ImageUpload: React.FC = () => {
+const ImageUpload: React.FC<ImageUploadProps> = (props) => {
+  const { placeholder, value, onChange } = props;
+
   const [previewOpen, setPreviewOpen] = useState(false);
   const [previewImage, setPreviewImage] = useState("");
-  const [fileList, setFileList] = useState<UploadFile[]>([
-    {
-      uid: "-1",
-      name: "image.png",
-      status: "done",
-      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-    },
-  ]);
+  const [fileList, setFileList] = useState<any[]>([]);
+
+  useEffect(() => {
+    const list = value?.split(",") ?? [];
+    const temp = list.map((v, i) => {
+      return {
+        uid: (i + 1).toString(),
+        name: v,
+        status: "done",
+        url: composeImgUrl(v),
+      };
+    });
+    console.log(temp);
+    if (temp && temp?.length > 0 && !isEqual(temp, fileList)) {
+      setFileList(temp);
+    }
+  }, [value]);
 
   const handlePreview = async (file: UploadFile) => {
     if (!file.url && !file.preview) {
@@ -34,25 +52,40 @@ const ImageUpload: React.FC = () => {
     setPreviewOpen(true);
   };
 
-  const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) =>
+  const handleChange: UploadProps["onChange"] = ({
+    fileList: newFileList,
+    file,
+  }) => {
+    const { status } = file;
     setFileList(newFileList);
+    if (status === "done") {
+      const imgStr = newFileList.map((item) => {
+        return item.response.data;
+      });
+
+      onChange(imgStr.join(","));
+    }
+  };
 
   const uploadButton = (
     <button style={{ border: 0, background: "none" }} type="button">
       <PlusOutlined />
-      <div style={{ marginTop: 8 }}>Upload</div>
+      <div style={{ marginTop: 8 }}>上传图片</div>
     </button>
   );
   return (
     <>
       <Upload
-        action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
+        action="/apis/oss/upload?bucketName=cgtf"
         listType="picture-card"
-        fileList={fileList}
+        fileList={fileList as any}
+        // defaultFileList={}
         onPreview={handlePreview}
+        maxCount={1}
+        accept="image/*"
         onChange={handleChange}
       >
-        {fileList.length >= 8 ? null : uploadButton}
+        {fileList.length >= 1 ? null : uploadButton}
       </Upload>
       {previewImage && (
         <Image
diff --git a/src/customForm/entity/base.ts b/src/customForm/entity/base.ts
index 26ef2e8edf6e57ada20c05639327990c5bece1f0..97daa94f18203845ca7cbef62624b8da05ae423e 100644
--- a/src/customForm/entity/base.ts
+++ b/src/customForm/entity/base.ts
@@ -5,12 +5,11 @@ import {
   KeyOf,
   ObjectConfigMetadata,
   ObjectMetadata,
-  OnlyProperties,
   PropInfo,
   PropInfoMap,
 } from "../interfaces";
 import { Rule } from "antd/es/form";
-import { v4 } from "uuid";
+import { generateUUID } from "../utils";
 /**
  * 获取属性默认值
  */
@@ -33,8 +32,9 @@ export default class BaseFormComponent<
       component: getCompInfo(this),
     };
   }
-  /** 组件所属分组 */
-  group!: string;
+
+  groupId = "";
+
   /** 表单项标签 */
   @Property({
     def: "文本",
@@ -45,6 +45,7 @@ export default class BaseFormComponent<
     },
   })
   label!: string;
+
   /** 对应的组件类型 */
   componentType!: U;
   /** 表单项key，生成规则就使用 uuid 随机生成吧 */
@@ -58,24 +59,41 @@ export default class BaseFormComponent<
       const info = objInfo.properties[key];
       this[key] = defaults(info) as this[typeof key];
     }
-
     this.componentType = this.constructor.name as U;
-
-    this.group = "";
     /** 表单key值随机分配 */
-    this.key = v4();
+    this.key = generateUUID();
   }
 
   /** 设置值 */
-  setValues(v: OnlyProperties<BaseFormComponent>) {
+  setValues(v: Record<string, any>) {
     for (const k in v) {
       if (this[k as KeyOf<BaseFormComponent>] === undefined) {
         /** 不接受不存在的值 */
         continue;
       }
-      this[k as KeyOf<BaseFormComponent>] = v[k as KeyOf<BaseFormComponent>];
+
+      this[k as KeyOf<BaseFormComponent>] = v[k];
     }
   }
+  toJsonValidationRules() {
+    const obj = this;
+    //@ts-ignore
+    if (obj.validationRules?.[0]?.pattern) {
+      const rule = [
+        {
+          ...obj.validationRules?.[0],
+          //@ts-ignore
+          pattern: obj.validationRules[0].pattern.toString(),
+        },
+      ];
+      return JSON.stringify(rule);
+    }
+    return JSON.stringify(obj.validationRules);
+  }
+  /** 序列化 */
+  toJson() {
+    return JSON.stringify(this);
+  }
 
   /** 获取静态元数据 */
   meta(): ObjectMetadata<this> {
@@ -117,47 +135,33 @@ export default class BaseFormComponent<
   /** 组件的config 配置 */
   componentOption?: T;
   /** 表单的检验规则 */
-  validationRules?: Rule[];
+  validationRules = [] as Rule[];
 }
 
 /** config 基类 */
 export class BaseConfig {
-  @Property({
-    desc: "打印",
-    def: false,
-    type: "Checkbox",
-  })
-  print?: boolean;
-
-  @Property({
-    desc: "必须",
-    def: true,
-    type: "Checkbox",
-  })
-  require?: boolean;
-
-  @Property({
-    desc: "模版",
-    def: true,
-    type: "FileUpload",
-  })
-  templateUrl?: string;
   /** 获取对象的静态元数据 */
   static get info(): ObjectConfigMetadata {
     return {
       properties: getPropMap(this),
     };
   }
-
-  constructor() {
-    const objInfo = new.target.info as ObjectConfigMetadata<this>;
-
+  init() {
+    const objInfo = (this.constructor as any)
+      .info as ObjectConfigMetadata<this>;
     for (const k in objInfo.properties) {
       const key = k;
       const info = objInfo.properties[key];
       this[key] = defaults(info) as this[typeof key];
     }
   }
+  update(v: Record<string, any>) {
+    for (const k in v) {
+      //@ts-ignore
+      this[k] = v[k];
+    }
+    return this;
+  }
 
   /** 获取静态元数据 */
   meta() {
diff --git a/src/customForm/entity/branch.ts b/src/customForm/entity/branch.ts
index d32c5f8e0fa4328332a5a51a450a7b497c24a8e9..1cf844332b73fc17eec11073b53116754259e49a 100644
--- a/src/customForm/entity/branch.ts
+++ b/src/customForm/entity/branch.ts
@@ -10,5 +10,6 @@ import branchIcon from "@/assets/images/setting/branch.png";
 export class Branch extends BaseFormComponent {
   constructor() {
     super();
+    this.label = "明细";
   }
 }
diff --git a/src/customForm/entity/date-picker.ts b/src/customForm/entity/date-picker.ts
index 864de89ade70bc4c34c6fbc90fe4a7af00715686..fef57038a48b7f4b2d29c2e0a63e7016ce35889b 100644
--- a/src/customForm/entity/date-picker.ts
+++ b/src/customForm/entity/date-picker.ts
@@ -5,9 +5,10 @@ import datetimeIcon from "@/assets/images/setting/datetime.png";
 class DatePickerConfig extends BaseConfig {
   constructor() {
     super();
+    this.init();
   }
   @Property({
-    def: "",
+    def: "date",
     desc: "时间选择模式",
     type: "Select",
     config: {
@@ -16,11 +17,39 @@ class DatePickerConfig extends BaseConfig {
         { label: "日期", value: "date" },
         { label: "月份", value: "month" },
         { label: "年份", value: "year" },
-        { label: "范围选择", value: "range" },
       ],
     },
   })
-  mode!: string;
+  picker!: string;
+
+  @Property({
+    def: false,
+    desc: "是否是范围选择",
+    type: "Checkbox",
+    config: {},
+  })
+  isRange!: boolean;
+
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
 }
 
 /** 文本组件 */
@@ -32,6 +61,7 @@ class DatePickerConfig extends BaseConfig {
 export class DatePicker extends BaseFormComponent {
   constructor() {
     super();
+    this.label = "日期";
     this.componentOption = new DatePickerConfig();
   }
 }
diff --git a/src/customForm/entity/file-upload.ts b/src/customForm/entity/file-upload.ts
index 7bd008af1277c866e7114712c8eefa38bcf75e51..80a095f7952014a9b27c522a71a33929b17b7546 100644
--- a/src/customForm/entity/file-upload.ts
+++ b/src/customForm/entity/file-upload.ts
@@ -3,14 +3,37 @@ import BaseFormComponent, { BaseConfig } from "./base";
 import fileIcon from "@/assets/images/setting/file.png";
 
 class FileUploadConfig extends BaseConfig {
-  constructor() {
-    super();
-  }
   @Property({
-    def: "",
+    def: "上传文件",
     desc: "提示",
+    type: "TextInput",
   })
   placeholder!: string;
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
+
+  constructor() {
+    super();
+    this.init();
+  }
 }
 
 /** 文本组件 */
@@ -22,6 +45,7 @@ class FileUploadConfig extends BaseConfig {
 export class FileUpload extends BaseFormComponent {
   constructor() {
     super();
+    this.label = "文件";
     this.componentOption = new FileUploadConfig();
   }
 }
diff --git a/src/customForm/entity/img-upload.ts b/src/customForm/entity/img-upload.ts
index ac37c7d16885fac3093f88839030e0549ab92c77..b23607df23207d0ff7b082e83d0b5b20d8e01e0c 100644
--- a/src/customForm/entity/img-upload.ts
+++ b/src/customForm/entity/img-upload.ts
@@ -5,12 +5,29 @@ import imgIcon from "@/assets/images/setting/img.png";
 class ImgUploadConfig extends BaseConfig {
   constructor() {
     super();
+    this.init();
   }
+
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
   @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
     def: "",
-    desc: "提示",
+    type: "FileUpload",
   })
-  placeholder!: string;
+  templateUrl?: string;
 }
 
 /** 文本组件 */
@@ -22,7 +39,7 @@ class ImgUploadConfig extends BaseConfig {
 export class ImgUpload extends BaseFormComponent {
   constructor() {
     super();
-
+    this.label = "图片";
     this.componentOption = new ImgUploadConfig();
   }
 }
diff --git a/src/customForm/entity/number.ts b/src/customForm/entity/number.ts
index 5fbb6ee3b797ba6634d5f5fcf48da052d0153f79..7196c2502406756723386d6600cd4be986c22f7a 100644
--- a/src/customForm/entity/number.ts
+++ b/src/customForm/entity/number.ts
@@ -3,11 +3,8 @@ import BaseFormComponent, { BaseConfig } from "./base";
 import numberIcon from "@/assets/images/setting/number.png";
 
 class NumberConfig extends BaseConfig {
-  constructor() {
-    super();
-  }
   @Property({
-    def: "",
+    def: "请输入",
     desc: "提示",
     type: "TextInput",
     config: {
@@ -17,6 +14,31 @@ class NumberConfig extends BaseConfig {
   placeholder!: string;
 
   type = "number";
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
+
+  constructor() {
+    super();
+    this.init();
+  }
 }
 
 /** 文本组件 */
@@ -28,7 +50,7 @@ class NumberConfig extends BaseConfig {
 export class NumberInput extends BaseFormComponent {
   constructor() {
     super();
-
+    this.label = "数字";
     this.componentOption = new NumberConfig();
   }
 }
diff --git a/src/customForm/entity/phone.ts b/src/customForm/entity/phone.ts
index 150a589723ec91dc42caa37385ea35810defbb79..978898986fe3af8b4cadd50824349b334797110e 100644
--- a/src/customForm/entity/phone.ts
+++ b/src/customForm/entity/phone.ts
@@ -5,17 +5,38 @@ import phoneIcon from "@/assets/images/setting/phone.png";
 class PhoneConfig extends BaseConfig {
   constructor() {
     super();
+    this.init();
   }
   @Property({
-    def: "",
+    def: "请输入手机号",
     desc: "提示",
     config: {
       placeholder: "请输入文本",
     },
+    type: "TextInput",
   })
   placeholder!: string;
 
-  type = "number";
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
 }
 
 /** 文本组件 */
@@ -27,7 +48,15 @@ class PhoneConfig extends BaseConfig {
 export class PhoneInput extends BaseFormComponent {
   constructor() {
     super();
+    this.label = "手机号";
 
     this.componentOption = new PhoneConfig();
+    /** 验证规则  */
+    this.validationRules = [
+      {
+        message: "请输入正确的手机号",
+        pattern: /^1[3-9][0-9]{9}$/,
+      },
+    ];
   }
 }
diff --git a/src/customForm/entity/radio.ts b/src/customForm/entity/radio.ts
index 7af05cf95f0fa41de96d9813256b9ab2f0a18383..75c7e66842c5d7e87c894292dd79fad652d5f95d 100644
--- a/src/customForm/entity/radio.ts
+++ b/src/customForm/entity/radio.ts
@@ -5,6 +5,7 @@ import radioIcon from "@/assets/images/setting/radio.png";
 class RadioConfig extends BaseConfig {
   constructor() {
     super();
+    this.init();
   }
   @Property({
     def: "",
@@ -12,6 +13,26 @@ class RadioConfig extends BaseConfig {
     type: "List",
   })
   option!: string;
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
 }
 
 /** 文本组件 */
@@ -23,6 +44,7 @@ class RadioConfig extends BaseConfig {
 export class Radio extends BaseFormComponent {
   constructor() {
     super();
+    this.label = "单选";
 
     this.componentOption = new RadioConfig();
   }
diff --git a/src/customForm/entity/select.ts b/src/customForm/entity/select.ts
index 52184f9148ae63181d242217f5e9ac3e53235370..bee8c76623ffa2bc6eae898dc8062ab3bd9afb12 100644
--- a/src/customForm/entity/select.ts
+++ b/src/customForm/entity/select.ts
@@ -5,13 +5,49 @@ import selectIcon from "@/assets/images/setting/select.png";
 class SelectConfig extends BaseConfig {
   constructor() {
     super();
+    this.init();
   }
   @Property({
-    def: "",
+    def: [],
     desc: "添加选项",
     type: "List",
   })
   option!: string;
+
+  @Property({
+    def: "请选择",
+    desc: "提示",
+    type: "TextInput",
+  })
+  placeholder!: string;
+
+  @Property({
+    def: true,
+    desc: "是否可多选",
+    type: "Checkbox",
+  })
+  multiple!: string;
+
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
 }
 
 /** 文本组件 */
@@ -23,7 +59,7 @@ class SelectConfig extends BaseConfig {
 export class Select extends BaseFormComponent {
   constructor() {
     super();
-
+    this.label = "多选";
     this.componentOption = new SelectConfig();
   }
 }
diff --git a/src/customForm/entity/text-input.ts b/src/customForm/entity/text-input.ts
index 63091381f1e4d9d4036f35190b2c2e62e665e2f7..59c075efba5bf95ce066985154d035d404409f1f 100644
--- a/src/customForm/entity/text-input.ts
+++ b/src/customForm/entity/text-input.ts
@@ -5,16 +5,53 @@ import textIcon from "@/assets/images/setting/text.png";
 class TextConfig extends BaseConfig {
   constructor() {
     super();
+    this.init();
   }
   @Property({
-    def: "",
-    desc: "提示",
+    def: "请输入",
+    desc: "提示文本",
     type: "TextInput",
     config: {
       placeholder: "请输入文本",
     },
   })
   placeholder!: string;
+  @Property({
+    desc: "前缀文本",
+    type: "TextInput",
+    config: {
+      placeholder: "例如：¥",
+    },
+  })
+  prefix?: string;
+  @Property({
+    desc: "后缀文本",
+    type: "TextInput",
+    config: {
+      placeholder: "例如：RMB",
+    },
+  })
+  suffix?: string;
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
 }
 
 /** 文本组件 */
@@ -26,6 +63,7 @@ class TextConfig extends BaseConfig {
 export class TextInput extends BaseFormComponent {
   constructor() {
     super();
+    this.label = "文本";
     this.componentOption = new TextConfig();
   }
 }
diff --git a/src/customForm/entity/textarea.ts b/src/customForm/entity/textarea.ts
index 46f881a50fe08eadd7a531cc1c954a707cd9f11e..b5d6fb3baf4b8911ed2594e480fe400d20058269 100644
--- a/src/customForm/entity/textarea.ts
+++ b/src/customForm/entity/textarea.ts
@@ -6,16 +6,37 @@ import textareaIcon from "@/assets/images/setting/textarea.png";
 class TextConfig extends BaseConfig {
   constructor() {
     super();
+    this.init();
   }
   @Property({
-    def: "",
+    def: "请输入",
     desc: "提示",
     config: {
-      placeholder: "请输入文本",
+      placeholder: "请输入提示",
     },
     type: "TextInput",
   })
   placeholder!: string;
+  @Property({
+    desc: "打印",
+    def: false,
+    type: "Checkbox",
+  })
+  print?: boolean;
+
+  @Property({
+    desc: "必须",
+    def: true,
+    type: "Checkbox",
+  })
+  require?: boolean;
+
+  @Property({
+    desc: "模版",
+    def: "",
+    type: "FileUpload",
+  })
+  templateUrl?: string;
 }
 
 /** 文本组件 */
@@ -27,6 +48,7 @@ class TextConfig extends BaseConfig {
 export class TextAreaInput extends BaseFormComponent {
   constructor() {
     super();
+    this.label = "多行输入";
     this.componentOption = new TextConfig();
   }
 }
diff --git a/src/customForm/eventBus.ts b/src/customForm/eventBus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e0e406687614a25535db8b0bed898ae4a8062051
--- /dev/null
+++ b/src/customForm/eventBus.ts
@@ -0,0 +1,32 @@
+/** 构造个事件总线，用于及时通知各个层级的数据更新 */
+class EventBus {
+  handlers: Record<string, Array<(data?: any) => void>>;
+  constructor() {
+    this.handlers = {};
+  }
+
+  on(eventType: string, handler: (data?: any) => void) {
+    if (!this.handlers[eventType]) {
+      this.handlers[eventType] = [];
+    }
+    this.handlers[eventType].push(handler);
+  }
+
+  emit(eventType: string, data?: any) {
+    const handlers = this.handlers[eventType];
+    if (handlers) {
+      handlers.forEach((handler: (arg0: any) => any) => handler(data));
+    }
+  }
+
+  off(eventType: string, handler: (data?: any) => void) {
+    const handlers = this.handlers[eventType];
+    if (handlers) {
+      this.handlers[eventType] = handlers.filter((h) => h !== handler);
+    }
+  }
+}
+
+const eventBus = new EventBus();
+
+export default eventBus;
diff --git a/src/customForm/registry.ts b/src/customForm/registry.ts
index c4120f1f8f3cfa72253e040900709633048d759b..cd9eb32fb7d91a4bea28194b821d129ec646a260 100644
--- a/src/customForm/registry.ts
+++ b/src/customForm/registry.ts
@@ -25,26 +25,10 @@ export interface ReadonlyRegistry<
     callbackfn: (value: V, key: string, registry: this) => void,
     thisArg?: unknown
   ): void;
-  /**
-   *
-   */
   readonly size: number;
-  /** Returns an iterable of entries in the map. */
   [Symbol.iterator](): IterableIterator<[string, V]>;
-
-  /**
-   * Returns an iterable of key, value pairs for every entry in the map.
-   */
   entries(): IterableIterator<[string, V]>;
-
-  /**
-   * Returns an iterable of keys in the map
-   */
   keys(): IterableIterator<string>;
-
-  /**
-   * Returns an iterable of values in the map
-   */
   values(): IterableIterator<V>;
 }
 
diff --git a/src/customForm/utils.ts b/src/customForm/utils.ts
index c581fa05dd8f492a6fbf7e1e3103cdfbe568dccc..2c3ca66a94aee9a04cc47ff284c1eeed855ef7d8 100644
--- a/src/customForm/utils.ts
+++ b/src/customForm/utils.ts
@@ -1,4 +1,6 @@
+import { cloneDeep } from "lodash";
 import BaseFormComponent from "./entity/base";
+import { v4 } from "uuid";
 
 /**
  * 在类上注册字段，或获取已经注册的字段
@@ -37,7 +39,7 @@ export function getOrDefineMap<U, T extends Function>(
 /**
  * 通过configList构建分组
  */
-export function buildListByGroup(target: Array<BaseFormComponent>) {
+export function buildListByGroupId(target: Array<BaseFormComponent>) {
   const groupList: Array<{
     title: string;
     list: Array<BaseFormComponent>;
@@ -46,10 +48,10 @@ export function buildListByGroup(target: Array<BaseFormComponent>) {
   const groupMap: { [key: string]: Array<BaseFormComponent> } = {};
 
   target.forEach((formConfig) => {
-    if (!groupMap[formConfig.group]) {
-      groupMap[formConfig.group] = [];
+    if (!groupMap[formConfig?.groupId]) {
+      groupMap[formConfig?.groupId] = [];
     }
-    groupMap[formConfig.group].push(formConfig);
+    groupMap[formConfig?.groupId].push(formConfig);
   });
 
   for (const groupTitle in groupMap) {
@@ -63,3 +65,65 @@ export function buildListByGroup(target: Array<BaseFormComponent>) {
 
   return groupList;
 }
+/** 请确保所有元素是按照正确的顺序排列，不然会存在问题 */
+export function buildTreeByGroup(target: Array<BaseFormComponent>) {
+  const output = [] as Array<
+    BaseFormComponent & { children?: Array<BaseFormComponent> }
+  >;
+  const groupMap = {} as any;
+
+  target.forEach((item) => {
+    const newItem = cloneDeep(item);
+    if (newItem.componentType === "Branch") {
+      if (newItem.key) {
+        groupMap[item.key] = newItem;
+      }
+      output.push(newItem);
+    } else {
+      if (groupMap[newItem.groupId]) {
+        if (!groupMap[newItem.groupId].children) {
+          groupMap[newItem.groupId].children = [];
+        }
+        groupMap[newItem.groupId].children.push(newItem);
+      } else {
+        output.push(newItem);
+      }
+    }
+  });
+
+  return output;
+}
+/** 生成uuid */
+export function generateUUID() {
+  let id = "";
+  do {
+    id = v4().replace(/-/g, ""); // 去掉连字符
+  } while (/\d/.test(id.charAt(0))); // 如果第一个字符是数字，重新生成
+  return id;
+}
+
+export function buildTreeByGroupName(target: any[]) {
+  // debugger;
+  const groupList = target.reduce((pre, cur) => {
+    if (cur.groupName in pre) {
+      if ("child" in pre[cur.groupName]) {
+        pre[cur.groupName]["child"].push(cur);
+      } else pre[cur.groupName]["child"] = [cloneDeep(pre[cur.groupName]), cur];
+    } else {
+      pre[cur.groupName] = cloneDeep(cur);
+    }
+    return pre;
+  }, {} as any);
+  return groupList;
+}
+
+/** 反序列化规则 */
+export function inversionSerializationRule(inputStr: string) {
+  let value = JSON.parse(inputStr);
+
+  if (Array.isArray(value) && value.length > 0) {
+    value[0].pattern = eval(value[0].pattern);
+  }
+
+  return value;
+}
diff --git a/src/main.tsx b/src/main.tsx
index e9caa22f7b4aad5b83509f12454563f8d06698f7..d1e79165e7551620fad82b9d2be57d04d44c5148 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,18 +4,18 @@ import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import router from "./router";
 import "./customForm/entity";
+import locale from "antd/locale/zh_CN";
+import dayjs from "dayjs";
 
-import autofit from "autofit.js";
+import "dayjs/locale/zh-cn";
+import { ConfigProvider } from "antd";
 
-autofit.init({
-  dh: 1080,
-  dw: 1920,
-  el: "body",
-  resize: true,
-});
+dayjs.locale("zh-cn");
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <ConfigProvider locale={locale}>
+      <RouterProvider router={router} />
+    </ConfigProvider>
   </React.StrictMode>
 );
diff --git a/src/pages/ApplicationMaterial/attachment.module.css b/src/pages/ApplicationMaterial/attachment.module.css
index ba8e96dcfdc795c51f8f8d7b0c255dd475eed989..e4d31258c6c4c228501921e970bb74920826eb52 100644
--- a/src/pages/ApplicationMaterial/attachment.module.css
+++ b/src/pages/ApplicationMaterial/attachment.module.css
@@ -2,8 +2,46 @@
   border-radius: 10px;
   padding: 16px 18px;
   box-sizing: border-box;
+  margin-bottom: 12px;
+  background-color: #e7f3fb;
 }
 
 .noItem {
-  background-color: #f0f5fb;
+  border-radius: 10px;
+  background-color: #f0f5fb !important;
+}
+
+.noValueStatus {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  background-color: rgba(4, 4, 4, 0.2);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  justify-content: center;
+}
+
+.noValueIcon {
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: rgba(4, 4, 4, 0.2);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.successIcon {
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: #00cc7d;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
diff --git a/src/pages/ApplicationMaterial/attachment.tsx b/src/pages/ApplicationMaterial/attachment.tsx
index 1417c88a9fef68f330b128a6003408f97de1acbf..23bf52a093222caf333566607f1c02d07bf4c915 100644
--- a/src/pages/ApplicationMaterial/attachment.tsx
+++ b/src/pages/ApplicationMaterial/attachment.tsx
@@ -1,38 +1,105 @@
-import { Flex, Image, Space } from "antd";
+import { Button, Empty, Flex, Image, Space } from "antd";
 import uploadSuccessIcon from "@/assets/images/form/dui.png";
 import styles from "./attachment.module.css";
 import classNames from "classnames";
+import { useMemo } from "react";
+import {
+  CheckOutlined,
+  ExclamationCircleOutlined,
+  MinusOutlined,
+} from "@ant-design/icons";
+import { composeImgUrl } from "@/config/util";
 
-const Item = ({ has = true }: { has?: boolean }) => {
+const Item = ({ label, value }: { label: string; value: string }) => {
+  // console.log(value);
+  let fileType = "none";
+  if (value && value.length > 0) {
+    const extra = value.split(".")[1];
+
+    if (extra === "pdf") {
+      fileType = "pdf";
+    } else if (extra === "jpg" || extra === "png" || extra === "jpeg") {
+      fileType = "img";
+    }
+  }
   return (
-    <div className={classNames(styles.itemWrapper, !has && styles.noItem)}>
+    <div
+      className={classNames(
+        styles.itemWrapper,
+        !value?.length && styles.noItem
+      )}
+    >
       <Flex align="center" justify="space-between">
         <Flex gap={8} align="center">
-          <img
-            src={uploadSuccessIcon}
-            alt=""
-            style={{ width: 18, height: 18 }}
-          />
-          <div>租房协议复印件</div>
+          {fileType === "none" ? (
+            <div className={styles.noValueIcon}>
+              <MinusOutlined />
+            </div>
+          ) : (
+            <div className={styles.successIcon}>
+              <CheckOutlined />
+            </div>
+          )}
+          <div>{label}</div>
         </Flex>
-        <Image
-          width={40}
-          style={{ borderRadius: 4 }}
-          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-        ></Image>
+        {fileType === "none" && (
+          <div className={styles.noValueStatus}>
+            <ExclamationCircleOutlined />
+          </div>
+        )}
+        {fileType === "pdf" && (
+          <div
+            className={styles.noValueStatus}
+            onClick={() => {
+              window.open(composeImgUrl(value));
+            }}
+          >
+            <span>pdf</span>
+          </div>
+        )}
+        {fileType === "img" && (
+          <Image
+            width={40}
+            height={40}
+            style={{ borderRadius: 4 }}
+            src={composeImgUrl(value)}
+          ></Image>
+        )}
       </Flex>
     </div>
   );
 };
 
+type AttachmentProps = {
+  configSource: any;
+  data: any;
+};
 /** 附件列表 */
-const Attachment = () => {
+const Attachment = (props: AttachmentProps) => {
+  const { configSource, data } = props;
+
+  const hasAttachmentConfig = useMemo(() => {
+    return (
+      configSource?.matterContentList?.filter((v: any) => {
+        return (
+          v.componentType == "ImgUpload" || v.componentType == "FileUpload"
+        );
+      }) ?? []
+    );
+  }, [configSource]);
+
+  const findValue = (key: string) => {
+    const reportContents = data?.reportContents ?? [];
+    return reportContents.find((v: any) => v.contentId === key)?.content;
+  };
   return (
     <div>
-      <Item has={false}></Item>
-      <Item></Item>
-      <Item></Item>
-      <Item></Item>
+      {hasAttachmentConfig.length === 0 && <Empty description="无附件"></Empty>}
+      {hasAttachmentConfig.map((item: any) => {
+        return (
+          <Item label={item.label} value={findValue(item.fieldKey)}></Item>
+        );
+      })}
     </div>
   );
 };
diff --git a/src/pages/ApplicationMaterial/components/card.module.css b/src/pages/ApplicationMaterial/components/card.module.css
index b66b4dc3830a3b5bc4acdf1f366edf135bdd0362..653a6c56284eb57426de02abdbc0c1d899383a13 100644
--- a/src/pages/ApplicationMaterial/components/card.module.css
+++ b/src/pages/ApplicationMaterial/components/card.module.css
@@ -28,3 +28,9 @@
   box-sizing: border-box;
   border-radius: 0px 10px 10px 10px;
 }
+
+.headerWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/pages/ApplicationMaterial/components/card.tsx b/src/pages/ApplicationMaterial/components/card.tsx
index b375ac4fbcd139f2a25bc4a5c94ef2e6f7d34262..46ff4e4f7b1658506dfc22b80173f12ef15f7be0 100644
--- a/src/pages/ApplicationMaterial/components/card.tsx
+++ b/src/pages/ApplicationMaterial/components/card.tsx
@@ -1,17 +1,23 @@
 import React, { PropsWithChildren } from "react";
 import styles from "./card.module.css";
+import { VerticalAlignBottomOutlined } from "@ant-design/icons";
 
 interface CardProps {
   title: string;
   bg: string;
   contentStyle?: React.CSSProperties;
+  headerExtra?: any;
 }
 
 const Card: React.FC<PropsWithChildren<CardProps>> = (props) => {
-  const { title, bg, children, contentStyle } = props;
+  const { title, headerExtra, bg, children, contentStyle } = props;
   return (
     <div className={styles.container}>
-      <div className={styles.header}>{title}</div>
+      <div className={styles.headerWrapper}>
+        <div className={styles.header}>{title}</div>
+        {headerExtra}
+      </div>
+
       <div
         style={{ ...contentStyle, background: bg }}
         className={styles.content}
diff --git a/src/pages/ApplicationMaterial/content.tsx b/src/pages/ApplicationMaterial/content.tsx
index 04ce3d05bcdbeb5c01e7cb4aeb3b34322f26cf4e..4fd058b0e90ec7412331f5eec1933c867d4f2901 100644
--- a/src/pages/ApplicationMaterial/content.tsx
+++ b/src/pages/ApplicationMaterial/content.tsx
@@ -1,8 +1,11 @@
 import { Space } from "antd";
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useMemo } from "react";
 import DecoratePoint from "./components/decoratePoint";
 import styles from "./content.module.css";
 import LabelText from "./components/labelText";
+import BaseFormComponent from "@/customForm/entity/base";
+import { OnlyProperties } from "@/customForm/interfaces";
+import { buildListByGroupId } from "@/customForm/utils";
 
 const Title: React.FC<PropsWithChildren> = ({ children }) => {
   return (
@@ -16,47 +19,76 @@ const Title: React.FC<PropsWithChildren> = ({ children }) => {
 const Card: React.FC<PropsWithChildren> = ({ children }) => {
   return <div className={styles.card}>{children}</div>;
 };
+type ContentProps = {
+  configSource: any;
+  data: any;
+};
+const Content = (props: ContentProps) => {
+  const { configSource, data } = props;
 
-const Content = () => {
+  const config = useMemo(() => {
+    const matterContentList = configSource?.matterContentList;
+    let groupList = [] as any;
+    let configList = [] as any;
+    if (matterContentList) {
+      const temp = matterContentList.map((item: any) => {
+        return {
+          ...item,
+          componentOption: item.otherSet ? JSON.parse(item.otherSet) : {},
+          key: item.fieldKey,
+        };
+      });
+      temp.forEach((item: OnlyProperties<BaseFormComponent>) => {
+        if (item.componentType === "Branch") {
+          groupList.push(item);
+        } else {
+          if (
+            item.componentType !== "ImgUpload" &&
+            item.componentType !== "FileUpload"
+          ) {
+            configList.push(item);
+          }
+        }
+      });
+      return {
+        groupList: groupList,
+        configList: buildListByGroupId(configList),
+      };
+    } else
+      return {
+        groupList: [],
+        configList: [],
+      };
+  }, [configSource]);
+  const findValue = (key: string) => {
+    const reportContents = data?.reportContents ?? [];
+    return reportContents.find((v: any) => v.contentId === key)?.content;
+  };
   return (
     <div>
-      <div className={styles.group}>
-        <Title>户外招牌信息</Title>
-        <Card>
-          <LabelText
-            label="招牌名称"
-            wrap
-            text="倔强干洗店"
-            labelColor="rgba(139, 146, 159, 1)"
-            textColor="rgba(89, 101, 118, 1)"
-          ></LabelText>
-          <LabelText
-            label="招牌名称"
-            text="倔强干洗店"
-            wrap
-            labelColor="rgba(139, 146, 159, 1)"
-            textColor="rgba(89, 101, 118, 1)"
-          ></LabelText>
-          <LabelText
-            label="招牌名称"
-            wrap
-            text="倔强干洗店"
-            labelColor="rgba(139, 146, 159, 1)"
-            textColor="rgba(89, 101, 118, 1)"
-          ></LabelText>
-          <LabelText
-            label="招牌名称"
-            text="倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店倔强干洗店"
-            wrap
-            labelColor="rgba(139, 146, 159, 1)"
-            textColor="rgba(89, 101, 118, 1)"
-          ></LabelText>
-        </Card>
-      </div>
-      <div className={styles.group}>
-        <Title>申请理由</Title>
-        <Card>这里是申请理由，这里是申请理由，这里是申请理由。</Card>
-      </div>
+      {config.configList.map((item) => {
+        return (
+          <div className={styles.group}>
+            {item.title && item.title.length > 0 && <Title>{item.title}</Title>}
+            <Card>
+              {item.list.map((subItem) => {
+                const value = findValue(subItem.key);
+                if (value) {
+                  return (
+                    <LabelText
+                      label={subItem.label}
+                      wrap
+                      text={value}
+                      labelColor="rgba(139, 146, 159, 1)"
+                      textColor="rgba(89, 101, 118, 1)"
+                    ></LabelText>
+                  );
+                }
+              })}
+            </Card>
+          </div>
+        );
+      })}
     </div>
   );
 };
diff --git a/src/pages/ApplicationMaterial/index.tsx b/src/pages/ApplicationMaterial/index.tsx
index 6223c451d5d21717654b79053f0535906597166f..fe1b74ef4229a2e8b9542acb606dd14c5e43d0f5 100644
--- a/src/pages/ApplicationMaterial/index.tsx
+++ b/src/pages/ApplicationMaterial/index.tsx
@@ -1,8 +1,8 @@
 import BasicModal from "@/components/BasicModal";
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import styles from "./index.module.css";
 import wodeshengqing from "@/assets/images/applyRecord/wodeshengqing.png";
-import { Flex, Space } from "antd";
+import { Button, Flex, Space, message } from "antd";
 import Card from "./components/card";
 
 import LabelText from "./components/labelText";
@@ -11,6 +11,10 @@ import Content from "./content";
 import Attachment from "./attachment";
 import ProcessTimeLine from "./timeLine";
 import Review from "./review";
+import { VerticalAlignBottomOutlined } from "@ant-design/icons";
+import service from "@/service";
+
+import { composeImgUrl } from "@/config/util";
 
 type EditMode = "review" | "check";
 
@@ -18,8 +22,43 @@ interface ApplicationMaterialProps {
   visible: boolean;
   mode?: EditMode;
   onClose: () => void;
+  actionObj: any;
 }
 
+/**
+ * 下载文件
+ * @param {String} path - 下载地址/下载请求地址。
+ * @param {String} name - 下载文件的名字/重命名（考虑到兼容性问题，最好加上后缀名）
+ */
+const downloadFile = (path: string, name: string) => {
+  const xhr = new XMLHttpRequest();
+  xhr.open("get", path);
+  xhr.responseType = "blob";
+  xhr.send();
+  xhr.onload = function () {
+    if (this.status === 200 || this.status === 304) {
+      // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
+      if ("msSaveOrOpenBlob" in navigator) {
+        // navigator.msSaveOrOpenBlob(this.response, name);
+        //@ts-ignore
+        navigator.msSaveOrOpenBlob(this.response, name);
+        return;
+      }
+      // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
+      // const url = URL.createObjectURL(blob);
+      const url = URL.createObjectURL(this.response);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.href = url;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  };
+};
+
 const Header = ({ mode }: { mode: EditMode }) => {
   return (
     <Flex align="center" gap={12} className={styles.header}>
@@ -32,7 +71,77 @@ const Header = ({ mode }: { mode: EditMode }) => {
 };
 
 const ApplicationMaterial: React.FC<ApplicationMaterialProps> = (props) => {
-  const { visible = false, onClose, mode = "check" } = props;
+  const { visible = false, onClose, mode = "check", actionObj } = props;
+  const [configSource, setConfigSource] = useState<any>({});
+  const [detail, setDetail] = useState<any>({});
+  const pageSource = location.pathname.includes("apply-record")
+    ? "user"
+    : "admin";
+  const init = () => {
+    if (mode === "review") {
+      service.managementService
+        .getApplicationFormDetail(actionObj.id)
+        .then((res) => {
+          if (res.code === 200) {
+            setDetail(res.data);
+          }
+        });
+    } else {
+      service.applyService
+        .getApplicationFormDetail(actionObj.id)
+        .then((res) => {
+          if (res.code === 200) {
+            setDetail(res.data);
+          }
+        });
+    }
+
+    service.settingService.getTemplateConfig(actionObj.thingId).then((res) => {
+      if (res.code === 200) {
+        if (pageSource === "user") {
+          service.applyService
+            .getApplicationNodeConfig(res.data.flowProcessId)
+            .then((res1) => {
+              if (res1.code === 200) {
+                if (res1.examineKeys == "all") {
+                  setConfigSource(res.data);
+                } else {
+                  const keys = res1.examineKeys.split(",");
+                  const temp = { ...res.data };
+                  temp.matterContentList = temp.matterContentList.filter(
+                    (item: any) => keys.includes(item.fieldKey)
+                  );
+                  setConfigSource(temp);
+                }
+              }
+            });
+          return;
+        }
+
+        setConfigSource(res.data);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (visible) {
+      init();
+    }
+  }, [actionObj]);
+
+  const downloadAll = () => {
+    const canDownload =
+      detail?.reportContents?.filter((v: any) => {
+        return v.downFlag && v.content.length > 0;
+      }) ?? [];
+    if (canDownload.length === 0) {
+      message.warning("无可下载内容");
+      return;
+    }
+    canDownload.forEach((v: any) => {
+      downloadFile(composeImgUrl(v.content), v.reportName);
+    });
+  };
   return (
     <BasicModal
       visible={visible}
@@ -76,20 +185,41 @@ const ApplicationMaterial: React.FC<ApplicationMaterialProps> = (props) => {
             contentStyle={
               mode === "review"
                 ? {
-                    /** 消除编辑状态下padding */
                     padding: 0,
                   }
                 : {}
             }
           >
-            {mode === "review" ? <Review /> : <ProcessTimeLine />}
+            {mode === "review" ? (
+              <Review
+                actionObj={actionObj}
+                detail={detail}
+                configSource={configSource}
+              />
+            ) : (
+              <ProcessTimeLine detail={actionObj} />
+            )}
           </Card>
 
           <Card title="申请内容" bg="#fff">
-            <Content />
+            <Content configSource={configSource} data={detail} />
           </Card>
-          <Card title="申请附件" bg="#fff">
-            <Attachment />
+
+          <Card
+            title="申请附件"
+            bg="#fff"
+            headerExtra={
+              <Button
+                type="text"
+                style={{ color: "rgba(46, 108, 255, 1)" }}
+                onClick={downloadAll}
+              >
+                一键下载附件
+                <VerticalAlignBottomOutlined />
+              </Button>
+            }
+          >
+            <Attachment configSource={configSource} data={detail} />
           </Card>
         </div>
       </div>
diff --git a/src/pages/ApplicationMaterial/review.module.css b/src/pages/ApplicationMaterial/review.module.css
index 58797bba9e33162d9f1ec6b3d281d74682c5e748..352badc4b995c4976cf4aee496f95fb7c50b1cb4 100644
--- a/src/pages/ApplicationMaterial/review.module.css
+++ b/src/pages/ApplicationMaterial/review.module.css
@@ -4,15 +4,60 @@
 }
 
 .timeLineWrapper {
-  height: calc(100% - 226px);
+  height: calc(100% - 100px);
   padding: 36px;
   box-sizing: border-box;
   overflow: auto;
 }
 
 .editWrapper {
-  height: 226px;
+  height: 100px;
   box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
-  padding: 32px 32px 0px;
+  padding: 0px 32px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.editContent {
+  /* width: 425px; */
+
+  height: 110px;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  overflow: auto;
+  background-color: #f3f6fb;
+}
+
+.btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #e7ebf1;
+}
+
+.header {
+  height: 86px;
+  border-radius: 10px;
+  background: linear-gradient(
+    90deg,
+    rgba(242, 247, 254, 1) 0%,
+    rgba(237, 245, 255, 1) 100%
+  );
+  padding: 0 21px;
+}
+
+.modalTitle {
+  font-size: 24px;
+  font-weight: bolder;
+  color: rgba(33, 45, 57, 1);
+}
+
+.modalBody {
+  padding: 24px;
+  overflow: auto;
 }
diff --git a/src/pages/ApplicationMaterial/review.tsx b/src/pages/ApplicationMaterial/review.tsx
index 27979211b678e1612aedb0cb7266a561330d0171..e88ab995d3e157bfdb37f702295a58a26a5cc896 100644
--- a/src/pages/ApplicationMaterial/review.tsx
+++ b/src/pages/ApplicationMaterial/review.tsx
@@ -1,44 +1,286 @@
-import TextArea from "antd/es/input/TextArea";
 import styles from "./review.module.css";
 import ProcessTimeLine from "./timeLine";
-import { Button, Flex, Space } from "antd";
-import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Flex,
+  Image,
+  Upload,
+  UploadProps,
+  Input,
+  ConfigProvider,
+  message,
+  Form,
+} from "antd";
+import wodeshengqing from "@/assets/images/applyRecord/wodeshengqing.png";
 
-const Review = () => {
+import {
+  CheckOutlined,
+  CloseOutlined,
+  FormOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
+import { useEffect, useMemo, useState } from "react";
+import service from "@/service";
+import { composeImgUrl } from "@/config/util";
+import eventBus from "@/customForm/eventBus";
+import BasicModal from "@/components/BasicModal";
+import {
+  buildListByGroupId,
+  inversionSerializationRule,
+} from "@/customForm/utils";
+import BaseFormComponent from "@/customForm/entity/base";
+import { OnlyProperties } from "@/customForm/interfaces";
+import GroupCard from "../User/SubmitApplication/components/groupCard";
+import RenderComponent from "@/components/FormComponentRender/renderComponent";
+
+const Header = () => {
+  return (
+    <Flex align="center" gap={12} className={styles.header}>
+      <img src={wodeshengqing} alt="" style={{ width: 46, height: 46 }}></img>
+      <div className={styles.modalTitle}>办理事项</div>
+    </Flex>
+  );
+};
+
+interface ReviewProps {
+  detail: any;
+  actionObj: any;
+  configSource: any;
+}
+const Review = (props: ReviewProps) => {
+  const { detail, actionObj, configSource } = props;
+
+  const [inputStr, setInputStr] = useState("");
+
+  const [fileList, setFileList] = useState<string[]>([]);
+  const forwardAndReverseName =
+    actionObj?.forwardAndReverseName?.split(",") ?? [];
+  const [openDealModal, setOpenDealModal] = useState(false);
+  const [form] = Form.useForm();
+
+  const formConfig = useMemo(() => {
+    let matterContentList = configSource?.matterContentList;
+
+    if (actionObj?.examineKeys !== "all") {
+      const examineKeys = actionObj?.examineKeys?.split(",") ?? [];
+      matterContentList = configSource?.matterContentList?.filter((v: any) =>
+        examineKeys.includes(v.fieldKey)
+      );
+    }
+    console.log(configSource, actionObj);
+    let groupList = [] as any;
+    let configList = [] as any;
+    if (matterContentList) {
+      let temp = matterContentList
+        .sort((pre: any, cur: any) => pre.sort - cur.sort)
+        .map((item: any) => {
+          return {
+            ...item,
+            componentOption: item.otherSet ? JSON.parse(item.otherSet) : {},
+            key: item.fieldKey,
+            validationRules: inversionSerializationRule(item.validationRules),
+          };
+        });
+
+      temp.forEach((item: OnlyProperties<BaseFormComponent>) => {
+        if (item.componentType === "Branch") {
+          groupList.push(item);
+        } else {
+          configList.push(item);
+        }
+      });
+      return {
+        groupList: groupList,
+        configList: buildListByGroupId(configList),
+      };
+    }
+    return {
+      groupList: [],
+      configList: [],
+    };
+  }, [configSource, actionObj]);
+  const handleChange: UploadProps["onChange"] = ({
+    fileList: newFileList,
+    file,
+  }) => {
+    if (file.status === "done") {
+      const imgStr = newFileList.map((v) => v.response.data);
+      setFileList(imgStr);
+    }
+  };
+
+  const remakeChange = (e: any) => {
+    const value = e.target.value;
+    setInputStr(value);
+  };
+
+  const submitExamine = (type?: string) => {
+    form.validateFields().then((res) => {
+      const formData = new FormData();
+      formData.append("taskId", actionObj?.taskId);
+      formData.append("approveComment", inputStr);
+      formData.append("attachmentList", fileList.join(","));
+      if (actionObj.nodeName === "审批节点") {
+        if (type === "reverse") {
+          formData.append("approvePass", "false");
+        } else formData.append("approvePass", "true");
+      }
+
+      service.managementService.completeExamine(formData).then((res) => {
+        if (res.code === 200) {
+          message.success("审批完成");
+          eventBus.emit("updateTableList");
+        }
+      });
+    });
+  };
+  const getGroupName = (key: string) => {
+    return formConfig.groupList.find((v: any) => v.key === key)?.label ?? "";
+  };
+
+  console.log(formConfig);
   return (
     <div className={styles.container}>
+      <BasicModal
+        visible={openDealModal}
+        width={600}
+        zIndex={9999}
+        contentStyle={{ borderRadius: 10, maxHeight: 700 }}
+        onClose={function (): void {
+          setOpenDealModal(false);
+        }}
+      >
+        <Header />
+        <div className={styles.modalBody}>
+          <Form form={form} colon={false} layout="vertical">
+            {formConfig.configList.map((item: any) => {
+              return (
+                <GroupCard title={getGroupName(item.title)}>
+                  {item.list.map((formItem: any) => {
+                    return (
+                      <Form.Item
+                        label={formItem.label}
+                        name={formItem.key}
+                        rules={[
+                          {
+                            required: formItem.componentOption?.require,
+                            message: `请填写${formItem?.label}`,
+                          },
+                          ...formItem.validationRules,
+                        ]}
+                      >
+                        <RenderComponent
+                          config={formItem.componentOption}
+                          componentType={formItem.componentType}
+                        ></RenderComponent>
+                      </Form.Item>
+                    );
+                  })}
+                </GroupCard>
+              );
+            })}
+            <GroupCard title={""}>
+              <Form.Item label="审批意见">
+                <div className={styles.editContent}>
+                  <ConfigProvider
+                    theme={{
+                      components: {
+                        Input: {
+                          activeBg: "#f3f6fb",
+                          activeBorderColor: "#f3f6fb",
+                          activeShadow: "unset",
+                        },
+                      },
+                    }}
+                  >
+                    <Input.TextArea
+                      placeholder="填写审批意见"
+                      onChange={remakeChange}
+                      style={{
+                        border: 0,
+                        backgroundColor: "#f3f6fb",
+                      }}
+                    />
+                  </ConfigProvider>
+                  <Flex gap={12}>
+                    {fileList.map((item) => {
+                      return (
+                        <Image
+                          width={36}
+                          height={36}
+                          style={{ borderRadius: 4 }}
+                          src={composeImgUrl(item)}
+                        ></Image>
+                      );
+                    })}
+                    <Upload
+                      action="/apis/oss/upload?bucketName=cgtf"
+                      accept=".pdf,image/*"
+                      showUploadList={false}
+                      onChange={handleChange}
+                    >
+                      <div className={styles.btn}>
+                        <PlusOutlined />
+                      </div>
+                    </Upload>
+                  </Flex>
+                </div>
+              </Form.Item>
+            </GroupCard>
+            <Form.Item>
+              <Flex style={{ marginTop: 18 }} gap={14}>
+                {actionObj.nodeName === "审批节点" && (
+                  <Button
+                    type="text"
+                    icon={<CloseOutlined />}
+                    iconPosition="start"
+                    size="large"
+                    onClick={submitExamine.bind(this, "reverse")}
+                    style={{
+                      backgroundColor: "#EDF1F7",
+                      color: "rgba(252, 74, 99, 1)",
+                    }}
+                  >
+                    {forwardAndReverseName[1]}
+                  </Button>
+                )}
+                <Button
+                  icon={<CheckOutlined />}
+                  iconPosition="start"
+                  type="text"
+                  size="large"
+                  onClick={() => submitExamine()}
+                  style={{
+                    backgroundColor: "#EDF1F7",
+                    color: "rgba(46, 108, 255, 1)",
+                  }}
+                >
+                  {forwardAndReverseName[0] ?? "通过"}
+                </Button>
+              </Flex>
+            </Form.Item>
+          </Form>
+        </div>
+      </BasicModal>
       <div className={styles.timeLineWrapper}>
-        <ProcessTimeLine></ProcessTimeLine>
+        <ProcessTimeLine detail={detail}></ProcessTimeLine>
       </div>
       <div className={styles.editWrapper}>
-        <TextArea rows={4} placeholder="填写审批意见" maxLength={6} />
-
-        <Flex justify="flex-end" style={{ marginTop: 18 }} gap={14}>
-          <Button
-            type="text"
-            icon={<CloseOutlined />}
-            iconPosition="start"
-            size="large"
-            style={{
-              backgroundColor: "#EDF1F7",
-              color: "rgba(252, 74, 99, 1)",
-            }}
-          >
-            驳回
-          </Button>
-          <Button
-            icon={<CheckOutlined />}
-            iconPosition="start"
-            type="text"
-            size="large"
-            style={{
-              backgroundColor: "#EDF1F7",
-              color: "rgba(46, 108, 255, 1)",
-            }}
-          >
-            同意
-          </Button>
-        </Flex>
+        <Button
+          icon={<FormOutlined />}
+          iconPosition="start"
+          type="text"
+          size="large"
+          onClick={() => {
+            setOpenDealModal(true);
+          }}
+          style={{
+            backgroundColor: "#EDF1F7",
+            color: "rgba(46, 108, 255, 1)",
+          }}
+        >
+          办理
+        </Button>
       </div>
     </div>
   );
diff --git a/src/pages/ApplicationMaterial/timeLine.module.css b/src/pages/ApplicationMaterial/timeLine.module.css
index 332cd67e6e316d4ff72e7a81cfe75b547dc5234b..b2776bda8f4ce969f498ddf5a488795066a75195 100644
--- a/src/pages/ApplicationMaterial/timeLine.module.css
+++ b/src/pages/ApplicationMaterial/timeLine.module.css
@@ -46,3 +46,15 @@
   font-weight: bold;
   font-size: 18px;
 }
+
+.noValueStatus {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  background-color: rgba(4, 4, 4, 0.2);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: center;
+}
diff --git a/src/pages/ApplicationMaterial/timeLine.tsx b/src/pages/ApplicationMaterial/timeLine.tsx
index de593ff67bd05a6b95b76d90032055f1bc7a70a0..487b30efe9f6d36f5bd86db0719fde6f3dacf605 100644
--- a/src/pages/ApplicationMaterial/timeLine.tsx
+++ b/src/pages/ApplicationMaterial/timeLine.tsx
@@ -1,105 +1,121 @@
-import { Badge, Timeline, TimelineItemProps } from "antd";
+import { Button, Flex, Timeline, Image } from "antd";
 import DecoratePoint from "./components/decoratePoint";
 import styles from "./timeLine.module.css";
-const data = [
-  {
-    title: "申请",
-    people: "李政生",
-    time: "2024.05.22 10:00:00",
-    remake: "",
-    status: 2,
-  },
-  {
-    title: "受理",
-    people: "胡新宇",
-    time: "2024.05.22 10:00:00",
-    remake: "同意",
-    status: 2,
-  },
-  {
-    title: "审查",
-    status: 1,
+import service from "@/service";
+import { useEffect, useMemo, useState } from "react";
+import { composeImgUrl } from "@/config/util";
 
-    list: [
-      {
-        title: "科室审批意见",
-        people: "李政生",
-        time: "2024.05.22 10:00:00",
-        remake: "同意",
-        status: 2,
-      },
-      {
-        title: "现场勘察初审意见",
-        people: "游少游",
-        time: "2024.05.22 10:00:00",
-        remake: "同意",
-        status: 1,
-      },
-    ],
-  },
-  {
-    title: "决定",
-    remake: "",
-    status: 0,
-  },
-  {
-    title: "制证",
-    remake: "",
-    status: 0,
-  },
-  {
-    title: "颁发",
-    remake: "",
-    status: 0,
-  },
-];
+interface ProcessTimeLineProps {
+  detail: any;
+}
+const ProcessTimeLine = (props: ProcessTimeLineProps) => {
+  const { detail } = props;
 
-const ProcessTimeLine = () => {
-  const NoPassTitle = (title: string) => {
-    return <div className={styles.noPassTitle}>{title}</div>;
+  const [dataSource, setDataSource] = useState<any[]>([]);
+
+  const getData = () => {
+    if (detail.type === "check") {
+      setDataSource(detail.metaData?.approveHistories ?? []);
+      return;
+    }
+    if (detail?.id) {
+      service.managementService.getExamineHistory(detail.id).then((res) => {
+        if (res.code === 200) {
+          setDataSource(res.data);
+        }
+      });
+    }
   };
-  const items: TimelineItemProps[] = data.map((v) => {
-    let element;
 
-    if (v.list) {
-      element = (
-        <>
-          <div className={styles.title}>{v.title}</div>
-          {v.list.map((subV) => (
-            <div className={styles.subItem}>
-              <div className={styles.title}>
-                <Badge status="processing" style={{ marginRight: 10 }} />
-                {subV.title + subV.people}
-              </div>
-              <div className={styles.subTime}>{subV.time}</div>
-              {subV.remake && subV.remake?.length > 0 && (
-                <div className={styles.subRemake}>{subV.remake}</div>
-              )}
-            </div>
-          ))}
-        </>
-      );
-    } else {
-      element = !v.status ? (
-        NoPassTitle(v.title)
-      ) : (
-        <>
-          <div>
-            <div className={styles.title}>{v.title + v.people}</div>
-            <div className={styles.time}>{v.time}</div>
-            {v.remake && v.remake?.length > 0 && (
-              <div className={styles.remake}>{v.remake}</div>
-            )}
+  const items = useMemo(() => {
+    return dataSource.map((v, i) => {
+      let status = false;
+
+      if (v.current) {
+        status = true;
+      }
+      if (v.approveTime) {
+        status = true;
+      }
+      const attachments = v.attachments;
+      const element = (
+        <div>
+          <div className={styles.title}>
+            {v.nodeName + " " + (v?.approveUserName ?? "")}
           </div>
-        </>
+          <div className={styles.time}>{v.approveTime}</div>
+          {v.current && (
+            <Flex
+              className={styles.remake}
+              align="center"
+              justify="space-between"
+            >
+              <div style={{ color: "rgba(1, 179, 110, 1)" }}>审批中...</div>
+            </Flex>
+          )}
+          {v?.approveComment && v.approveComment?.length > 0 && (
+            <Flex
+              className={styles.remake}
+              align="center"
+              justify="space-between"
+            >
+              <div>{v.approveComment}</div>
+              <Flex>
+                {attachments?.map((attachment: any, i: number) => {
+                  let fileType = "none";
+                  if (attachment && attachment.length > 0) {
+                    const extra = attachment.split(".")[1];
+
+                    if (extra === "pdf") {
+                      fileType = "pdf";
+                    } else if (
+                      extra === "jpg" ||
+                      extra === "png" ||
+                      extra === "jpeg"
+                    ) {
+                      fileType = "img";
+                    }
+                  }
+                  return (
+                    <>
+                      {fileType === "pdf" && (
+                        <div
+                          className={styles.noValueStatus}
+                          onClick={() => {
+                            window.open(composeImgUrl(attachment));
+                          }}
+                        >
+                          pdf
+                        </div>
+                      )}
+                      {fileType === "img" && (
+                        <Image
+                          width={40}
+                          height={40}
+                          style={{ borderRadius: 4 }}
+                          src={composeImgUrl(attachment)}
+                        ></Image>
+                      )}
+                    </>
+                  );
+                })}
+              </Flex>
+            </Flex>
+          )}
+        </div>
       );
-    }
 
-    return {
-      dot: <DecoratePoint type={!v.status ? 1 : 2} />,
-      children: element,
-    };
-  });
+      return {
+        dot: <DecoratePoint type={status ? 2 : 1} />,
+        children: element,
+      };
+    });
+  }, [dataSource]);
+
+  useEffect(() => {
+    getData();
+  }, [detail]);
+
   return (
     <div>
       <Timeline items={items} />
diff --git a/src/pages/Login/index.module.css b/src/pages/Login/adminLogin.module.css
similarity index 100%
rename from src/pages/Login/index.module.css
rename to src/pages/Login/adminLogin.module.css
diff --git a/src/pages/Login/adminLogin.tsx b/src/pages/Login/adminLogin.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..43c939e6c57264fecf14b2903d5ef3f3a8288acf
--- /dev/null
+++ b/src/pages/Login/adminLogin.tsx
@@ -0,0 +1,143 @@
+import {
+  Button,
+  Dropdown,
+  Flex,
+  Form,
+  Input,
+  MenuProps,
+  Space,
+  message,
+} from "antd";
+import BasicModal from "@/components/BasicModal";
+import avatarIcon from "@/assets/images/user/avatar.png";
+import styles from "./adminLogin.module.css";
+import { useBoolean } from "ahooks";
+import service from "@/service";
+import useUserStore from "@/store/useUserStore";
+import { LogoutOutlined } from "@ant-design/icons";
+import eventBus from "@/customForm/eventBus";
+
+const AdminLogin: React.FC = () => {
+  const [visible, { setFalse, setTrue }] = useBoolean(false);
+  const [form] = Form.useForm<{
+    username: string;
+    password: string;
+  }>();
+  const { adminInfo, updateAdminInfo } = useUserStore();
+
+  const onFinish = (values: any) => {
+    const params = {
+      ...values,
+    };
+    service.loginService.getToken(params).then((res) => {
+      if (res.code === 200) {
+        /** 存储token */
+        localStorage.setItem("admin_token", res.data.access_token);
+        /** 以用户平台的token获取本身平台的信息 */
+        service.loginService.getUserInfo().then((userRes) => {
+          if (userRes.code === 200) {
+            updateAdminInfo(userRes.data);
+            setFalse();
+            eventBus.emit("updateList");
+            message.success("登录成功！");
+          }
+        });
+      }
+    });
+  };
+  const items: MenuProps["items"] = [
+    {
+      key: "1",
+      label: (
+        <Space>
+          <LogoutOutlined />
+          退出登录
+        </Space>
+      ),
+    },
+  ];
+  const onLogout = (item: any) => {
+    if (item.key === "1") {
+      updateAdminInfo(undefined);
+      localStorage.removeItem("admin_token");
+      message.success("退出成功");
+      eventBus.emit("updateList");
+    }
+  };
+  return (
+    <>
+      {adminInfo ? (
+        <Space size="large">
+          <Dropdown menu={{ items, onClick: onLogout }}>
+            <Flex align="center">
+              <img src={avatarIcon} alt="" style={{ width: 55, height: 55 }} />
+              <div>{adminInfo?.nickname}</div>
+            </Flex>
+          </Dropdown>
+        </Space>
+      ) : (
+        <Button onClick={setTrue} type="primary" style={{ marginLeft: 12 }}>
+          登录
+        </Button>
+      )}
+
+      <BasicModal
+        width={1155}
+        visible={visible}
+        height={739}
+        onClose={setFalse}
+        contentStyle={{ borderRadius: 10 }}
+      >
+        <div className={styles.container}>
+          <div></div>
+          <div>
+            <div className={styles.title}>欢迎登录</div>
+            <div>
+              <Form
+                layout="vertical"
+                form={form}
+                requiredMark={false}
+                initialValues={{
+                  username: "12400000106",
+                  password: "zhrc@123",
+                }}
+                onFinish={onFinish}
+              >
+                <Form.Item
+                  hasFeedback
+                  label="账号"
+                  name="username"
+                  validateDebounce={1000}
+                  rules={[{ required: true, message: "请输入账号" }]}
+                >
+                  <Input placeholder="请输入账号" size="large" />
+                </Form.Item>
+                <Form.Item
+                  hasFeedback
+                  label="密码"
+                  name="password"
+                  validateDebounce={1000}
+                  rules={[{ required: true, message: "请输入密码" }]}
+                >
+                  <Input.Password placeholder="请输入密码" size="large" />
+                </Form.Item>
+                <Form.Item>
+                  <Button
+                    type="primary"
+                    shape="round"
+                    onClick={form.submit}
+                    style={{ width: 120, height: 46 }}
+                  >
+                    登录
+                  </Button>
+                </Form.Item>
+              </Form>
+            </div>
+          </div>
+        </div>
+      </BasicModal>
+    </>
+  );
+};
+
+export default AdminLogin;
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
deleted file mode 100644
index 3c862621cac18a5acda10c42311292f038703000..0000000000000000000000000000000000000000
--- a/src/pages/Login/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Badge, Button, Flex, Form, Input, Space } from "antd";
-import { Link } from "react-router-dom";
-
-import BasicModal from "@/components/BasicModal";
-import avatarIcon from "@/assets/images/user/avatar.png";
-import flowIcon from "@/assets/images/user/flow.png";
-import styles from "./index.module.css";
-import { useBoolean } from "ahooks";
-import { useState } from "react";
-
-const Login: React.FC = () => {
-  const [userInfo, setUserInfo] = useState<any>();
-  const [visible, { setFalse, setTrue }] = useBoolean(false);
-
-  return (
-    <>
-      {userInfo ? (
-        <Space size="large">
-          {
-            // 管理页面不显示
-            window.location.pathname !== "/management" && (
-              <Link to={"/apply-record"}>
-                <Badge count={5}>
-                  <img
-                    src={flowIcon}
-                    alt=""
-                    style={{ width: 30, height: 32 }}
-                  />
-                </Badge>
-              </Link>
-            )
-          }
-
-          <Flex align="center">
-            <img src={avatarIcon} alt="" style={{ width: 55, height: 55 }} />
-            <div>ADMIN</div>
-          </Flex>
-        </Space>
-      ) : (
-        <Button onClick={setTrue} type="primary">
-          登录
-        </Button>
-      )}
-
-      <BasicModal
-        width={1155}
-        visible={visible}
-        height={739}
-        onClose={setFalse}
-        contentStyle={{ borderRadius: 10 }}
-      >
-        <div className={styles.container}>
-          <div></div>
-          <div>
-            <div className={styles.title}>欢迎登录</div>
-            <div>
-              <Form layout="vertical">
-                <Form.Item
-                  hasFeedback
-                  label="账号"
-                  name="field_a"
-                  validateDebounce={1000}
-                  rules={[{ max: 3 }]}
-                >
-                  <Input placeholder="请输入账号" size="large" />
-                </Form.Item>
-                <Form.Item
-                  hasFeedback
-                  label="密码"
-                  name="field_b"
-                  validateDebounce={1000}
-                  rules={[{ max: 3 }]}
-                >
-                  <Input placeholder="请输入密码" size="large" />
-                </Form.Item>
-                <Form.Item>
-                  <Button
-                    type="primary"
-                    shape="round"
-                    onClick={() => {
-                      setUserInfo({});
-                    }}
-                    style={{ width: 120, height: 46 }}
-                  >
-                    登录
-                  </Button>
-                </Form.Item>
-              </Form>
-            </div>
-          </div>
-        </div>
-      </BasicModal>
-    </>
-  );
-};
-
-export default Login;
diff --git a/src/pages/Login/login.module.css b/src/pages/Login/login.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..392242aa1995d4680e741aa4bb4e19602f001729
--- /dev/null
+++ b/src/pages/Login/login.module.css
@@ -0,0 +1,22 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.container > :first-child {
+  width: 539px;
+  background-image: url("@/assets/images/loginBg.png");
+  background-size: 100% 100%;
+}
+
+.container > :last-child {
+  flex: 1;
+  padding: 130px 110px 0;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 72px;
+}
diff --git a/src/pages/Login/login.tsx b/src/pages/Login/login.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6b97425d45c7e8a3d4fe00ceb324c3bf4d58a3d0
--- /dev/null
+++ b/src/pages/Login/login.tsx
@@ -0,0 +1,217 @@
+import {
+  Badge,
+  Button,
+  Dropdown,
+  Flex,
+  Form,
+  Input,
+  MenuProps,
+  Space,
+  Tabs,
+  message,
+} from "antd";
+import { Link } from "react-router-dom";
+
+import BasicModal from "@/components/BasicModal";
+import avatarIcon from "@/assets/images/user/avatar.png";
+import flowIcon from "@/assets/images/user/flow.png";
+import styles from "./login.module.css";
+import { useBoolean } from "ahooks";
+import service from "@/service";
+import useUserStore from "@/store/useUserStore";
+import { useEffect, useState } from "react";
+import { DownOutlined, LogoutOutlined, SmileOutlined } from "@ant-design/icons";
+
+const Login: React.FC = () => {
+  const [visible, { setFalse, setTrue }] = useBoolean(false);
+  const [form] = Form.useForm<{
+    username: string;
+    password: string;
+  }>();
+  const [registerForm] = Form.useForm<{
+    username: string;
+    password: string;
+  }>();
+  const { userInfo, updateUserInfo } = useUserStore();
+  const [recordListNum, setRecordListNum] = useState(0);
+  const onLogin = (values: any) => {
+    const params = {
+      ...values,
+    };
+    service.loginService.onLogin(params).then((res) => {
+      if (res.code === 200) {
+        localStorage.setItem("applyUserInfo", JSON.stringify(res.data));
+        updateUserInfo(res.data);
+        setFalse();
+      }
+    });
+  };
+
+  const onRegister = (values: any) => {
+    service.loginService.register(values).then((res) => {
+      if (res.code === 200) {
+        message.success("注册成功");
+      }
+    });
+  };
+
+  useEffect(() => {
+    const mobile = userInfo?.mobile;
+
+    if (mobile) {
+      service.applyService
+        .getExamineProgress({
+          pageNum: 1,
+          pageSize: 100,
+          loginName: mobile,
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            setRecordListNum(res.data.total);
+          }
+        });
+    }
+  }, [userInfo]);
+  const items: MenuProps["items"] = [
+    {
+      key: "1",
+      label: (
+        <Space>
+          <LogoutOutlined />
+          退出登录
+        </Space>
+      ),
+    },
+  ];
+  const onLogout = (item: any) => {
+    if (item.key === "1") {
+      updateUserInfo(undefined);
+      localStorage.removeItem("applyUserInfo");
+    }
+  };
+
+  return (
+    <>
+      {userInfo ? (
+        <Space size="large">
+          <Link to={"/apply-record"}>
+            <Badge count={recordListNum}>
+              <img src={flowIcon} alt="" style={{ width: 30, height: 32 }} />
+            </Badge>
+          </Link>
+          <Dropdown menu={{ items, onClick: onLogout }}>
+            <Space style={{ cursor: "pointer" }}>
+              <Flex align="center">
+                <img
+                  src={avatarIcon}
+                  alt=""
+                  style={{ width: 55, height: 55 }}
+                />
+                <div>{userInfo?.username}</div>
+              </Flex>
+            </Space>
+          </Dropdown>
+        </Space>
+      ) : (
+        <Button onClick={setTrue} type="primary">
+          登录
+        </Button>
+      )}
+
+      <BasicModal
+        width={1155}
+        visible={visible}
+        height={739}
+        onClose={setFalse}
+        contentStyle={{ borderRadius: 10 }}
+      >
+        <div className={styles.container}>
+          <div></div>
+          <div>
+            <div className={styles.title}>欢迎登录</div>
+            <div>
+              <Tabs>
+                <Tabs.TabPane tab="登录" key="1">
+                  <Form
+                    layout="vertical"
+                    form={form}
+                    requiredMark={false}
+                    onFinish={onLogin}
+                  >
+                    <Form.Item
+                      hasFeedback
+                      label="账号"
+                      name="username"
+                      validateDebounce={1000}
+                      rules={[{ required: true, message: "请输入账号" }]}
+                    >
+                      <Input placeholder="请输入账号" size="large" />
+                    </Form.Item>
+                    <Form.Item
+                      hasFeedback
+                      label="密码"
+                      name="password"
+                      validateDebounce={1000}
+                      rules={[{ required: true, message: "请输入密码" }]}
+                    >
+                      <Input.Password placeholder="请输入密码" size="large" />
+                    </Form.Item>
+                    <Form.Item>
+                      <Button
+                        type="primary"
+                        shape="round"
+                        onClick={form.submit}
+                        style={{ width: 120, height: 46 }}
+                      >
+                        登录
+                      </Button>
+                    </Form.Item>
+                  </Form>
+                </Tabs.TabPane>
+                <Tabs.TabPane tab="注册" key="2">
+                  <Form
+                    layout="vertical"
+                    form={registerForm}
+                    requiredMark={false}
+                    onFinish={onRegister}
+                  >
+                    <Form.Item
+                      hasFeedback
+                      label="账号"
+                      name="phone"
+                      validateDebounce={1000}
+                      rules={[{ required: true, message: "请输入账号" }]}
+                    >
+                      <Input placeholder="请输入账号" size="large" />
+                    </Form.Item>
+                    <Form.Item
+                      hasFeedback
+                      label="密码"
+                      name="password"
+                      validateDebounce={1000}
+                      rules={[{ required: true, message: "请输入密码" }]}
+                    >
+                      <Input.Password placeholder="请输入密码" size="large" />
+                    </Form.Item>
+                    <Form.Item>
+                      <Button
+                        type="primary"
+                        shape="round"
+                        htmlType="submit"
+                        style={{ width: 120, height: 46 }}
+                      >
+                        注册
+                      </Button>
+                    </Form.Item>
+                  </Form>
+                </Tabs.TabPane>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </BasicModal>
+    </>
+  );
+};
+
+export default Login;
diff --git a/src/pages/Management/Main/index.tsx b/src/pages/Management/Main/index.tsx
index 43c313111234b7390042d5201393cd195437bb4a..c3cb0152db1a1be6737dda4bf88e1781481384b4 100644
--- a/src/pages/Management/Main/index.tsx
+++ b/src/pages/Management/Main/index.tsx
@@ -1,28 +1,66 @@
-import Login from "@/pages/Login";
 import styles from "./index.module.css";
 import ItemCard from "./itemCard";
-import { Button } from "antd";
+import { Button, Flex } from "antd";
 import Setting from "@/pages/Setting";
+import { useBoolean } from "ahooks";
+import { useEffect, useState } from "react";
+import service from "@/service";
+import { PlusCircleOutlined } from "@ant-design/icons";
+import eventBus from "@/customForm/eventBus";
+import AdminLogin from "@/pages/Login/adminLogin";
+import useUserStore from "@/store/useUserStore";
 
 const ManagementMain = () => {
+  const [visible, { setTrue, setFalse }] = useBoolean(false);
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const { adminInfo } = useUserStore();
+  const init = () => {
+    setDataSource([]);
+    if (adminInfo) {
+      service.managementService.getAllApplication().then((res) => {
+        if (res.code === 200) {
+          setDataSource(res.data.list);
+        }
+      });
+    }
+  };
+  useEffect(() => {
+    init();
+    const handleEvent = () => {
+      init();
+    };
+    eventBus.on("updateList", handleEvent);
+    return () => {
+      eventBus.off("updateList", handleEvent);
+    };
+  }, [adminInfo]);
+
   return (
     <div className={styles.container}>
-      <Setting />
+      <Setting visible={visible} onClose={setFalse} mode={"add"} />
       <div className={styles.header}>
-        <div>
-          <Button type="primary">添加</Button>
-        </div>
-        <Login />
+        <Flex>
+          <Button
+            type="primary"
+            icon={<PlusCircleOutlined />}
+            onClick={setTrue}
+          >
+            添加事项
+          </Button>
+          <AdminLogin />
+        </Flex>
       </div>
       <div className={styles.titleWrapper}>
         <div className={styles.title}>行政许可与行政备案</div>
       </div>
       <div className={styles.scrollView}>
         <div className={styles.content}>
-          <ItemCard></ItemCard>
-          <ItemCard></ItemCard>
-          <ItemCard></ItemCard>
-          <ItemCard></ItemCard>
+          {dataSource.length === 0 && (
+            <div className={styles.empty}>暂无需要审批的项</div>
+          )}
+          {dataSource?.map((item) => {
+            return <ItemCard data={item}></ItemCard>;
+          })}
         </div>
       </div>
     </div>
diff --git a/src/pages/Management/Main/itemCard.tsx b/src/pages/Management/Main/itemCard.tsx
index eacf4dbed5e17e77c43b908aec242bd118e99ff6..9b2fe9361805e84d59f56046495fd228b0d8d00b 100644
--- a/src/pages/Management/Main/itemCard.tsx
+++ b/src/pages/Management/Main/itemCard.tsx
@@ -1,69 +1,32 @@
 import { Flex, Space } from "antd";
 import styles from "./itemCard.module.css";
 import icon from "@/assets/images/icon/icon1.png";
-import icon1 from "@/assets/images/management/icon1.png";
-
+import { useNavigate, useNavigation } from "react-router-dom";
 import ArrowTag from "@/components/ArrowTag";
+import useUserStore from "@/store/useUserStore";
+
+const ItemCard: React.FC<{ data: any }> = (props) => {
+  const { data } = props;
+  const navigate = useNavigate();
 
-const ItemCard: React.FC = () => {
-  const demoData = [
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-    {
-      icon: icon1,
-      title: "全部",
-      num: 50,
-    },
-  ];
+  const clickHandler = (nodeInfo: any) => {
+    const id = nodeInfo.elementId ?? "";
 
+    navigate(`/management/${data.id}?active=${id}`);
+  };
   return (
     <div className={styles.container}>
-      <Flex gap={24}>
+      <Flex gap={24} align="center">
         <img src={icon} alt="" style={{ width: 86, height: 86 }} />
-        <div className={styles.title}>
-          临时性建筑物搭建、堆放物 料、占道施工审批
-        </div>
+        <div className={styles.title}>{data.thingName}</div>
       </Flex>
       <Space>
         <ArrowTag
-          text="行政许可"
+          text={data.thingType ? "行政许可" : "行政备案"}
           style={{ color: "rgba(0, 119, 255, 1)" }}
         ></ArrowTag>
         <ArrowTag
-          text="面向用户"
+          text={data.implementingAgency}
           color="#FFE0B7"
           style={{
             color: "rgba(255, 128, 3, 1)",
@@ -71,17 +34,17 @@ const ItemCard: React.FC = () => {
         ></ArrowTag>
       </Space>
       <div className={styles.list}>
-        {demoData.map((v) => {
+        {data?.nodeCount?.map((v: any) => {
           return (
-            <Flex align="center" justify="center" className={styles.itemStatus}>
+            <Flex
+              align="center"
+              justify="center"
+              className={styles.itemStatus}
+              onClick={clickHandler.bind(this, v)}
+            >
               <Flex align="center" gap={9}>
-                <img
-                  src={v.icon}
-                  alt=""
-                  style={{ width: 20, height: 20 }}
-                ></img>
-                <div className={styles.itemName}>{v.title}</div>
-                <div className={styles.value}>{v.num}</div>
+                <div className={styles.itemName}>{v.elementName}</div>
+                <div className={styles.value}>{v.elementCount}</div>
               </Flex>
             </Flex>
           );
diff --git a/src/pages/Management/PendingReviewList/index.module.css b/src/pages/Management/PendingReviewList/index.module.css
index a0420bafd728c6782ae08fa5cd5142244929c456..fa471ed57d17d8de11b7a1156ae4a340d140b55b 100644
--- a/src/pages/Management/PendingReviewList/index.module.css
+++ b/src/pages/Management/PendingReviewList/index.module.css
@@ -89,16 +89,6 @@
   font-size: 16px;
 }
 
-.settingBtn {
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-
-  &:active {
-    opacity: 0.4;
-  }
-}
-
 .tableWrapper {
   padding: 44px;
   box-sizing: border-box;
@@ -112,3 +102,19 @@
   /* 事项申请记录 */
   font-size: 24px;
 }
+
+.settingBtn {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+
+  &:active {
+    opacity: 0.4;
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background-color: rgba(140, 178, 255, 0.4);
+}
diff --git a/src/pages/Management/PendingReviewList/index.tsx b/src/pages/Management/PendingReviewList/index.tsx
index a4f9b137615aba0b34c5a3e99bff4bdf3472e2ca..dd088ba71d4f19fa3942e4928c52e44d85fa9ff8 100644
--- a/src/pages/Management/PendingReviewList/index.tsx
+++ b/src/pages/Management/PendingReviewList/index.tsx
@@ -2,10 +2,14 @@ import ArrowTag from "@/components/ArrowTag";
 import { Flex, Popover, Space } from "antd";
 import styles from "./index.module.css";
 import icon1 from "@/assets/images/icon/icon1.png";
-import { useNavigate } from "react-router-dom";
-import { RollbackOutlined } from "@ant-design/icons";
-import settingIcon from "@/assets/images/pendingReview/setting.png";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { RollbackOutlined, SettingOutlined } from "@ant-design/icons";
 import ListTable from "./listTable";
+import { useEffect, useState } from "react";
+import service from "@/service";
+import eventBus from "@/customForm/eventBus";
+import Setting from "@/pages/Setting";
+import { useBoolean } from "ahooks";
 const IncludePopoverTag = ({
   title,
   content,
@@ -25,24 +29,65 @@ const IncludePopoverTag = ({
 
 const PendingReviewList = () => {
   const navigate = useNavigate();
+  const { thingId } = useParams<{ thingId: string }>();
+
+  const [applicationInfo, setApplicationInfo] = useState<any>();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const [showSettingModal, { setFalse, setTrue }] = useBoolean(false);
+  const [config, setConfig] = useState({});
+  const active = searchParams.get("active");
+  const init = () => {
+    service.managementService.getAllApplication(thingId).then((res) => {
+      if (res.code === 200) {
+        setApplicationInfo(res.data?.list?.[0]);
+      }
+    });
+  };
+  useEffect(() => {
+    init();
+  }, [thingId]);
+
+  useEffect(() => {
+    const handler = () => {
+      init();
+    };
+    eventBus.on("updateTableList", handler);
+    return () => eventBus.off("updateTableList", handler);
+  }, []);
+
+  const openSetting = () => {
+    if (thingId) {
+      service.settingService.getTemplateConfig(thingId).then((res) => {
+        if (res.code === 200) {
+          setConfig(res.data);
+          setTrue();
+        }
+      });
+    }
+  };
 
   return (
     <div className={styles.container}>
+      <Setting
+        visible={showSettingModal}
+        onClose={setFalse}
+        mode="edit"
+        initialValue={config}
+      ></Setting>
       <div className={styles.contentWrapper}>
         <div className={styles.header}>
           <img src={icon1} alt="" style={{ width: 86, height: 86 }} />
           <div>
-            <div className={styles.itemTitle}>
-              工程建设涉及城市绿地、树木审批
-            </div>
+            <div className={styles.itemTitle}>{applicationInfo?.thingName}</div>
             <Flex>
               <Space>
                 <ArrowTag
-                  text="行政许可"
+                  text={applicationInfo?.thingType ? "行政许可" : "行政备案"}
                   style={{ color: "rgba(0, 119, 255, 1)" }}
                 ></ArrowTag>
                 <ArrowTag
-                  text="面向用户"
+                  text={applicationInfo?.implementingAgency}
                   color="#FFE0B7"
                   style={{
                     color: "rgba(255, 128, 3, 1)",
@@ -52,25 +97,27 @@ const PendingReviewList = () => {
               <Space style={{ marginLeft: 24 }}>
                 <IncludePopoverTag
                   title="设定依据"
-                  content="《城市市容和环境卫生管理条例》（国务院令第 101 号）第十四条：任何单位和个人都不得在街道两侧和公共场地堆放物料，搭建建筑物、构筑物或者其他设施。因建设等特殊需要，在街道两侧和公共场地临时堆放物料，搭建非永久性建筑物、构筑物或者其他设施的，必须征得城市人民政府市容环境卫生行政主管部门同意后，按照有关规定办理审批手续。《成都市市容和环境卫生管理条例》（2018 年 9 月 30 日四川省第十三届人民代表大会常务委员会第六次会议批准）第二十三条 除因公共利益等特殊需要并报经所在地区（市）县城市管理部门批准（影响交通安全的，还应当征得公安交通管理部门同意）的外，任何单位和个人不得擅自占用城市道路、广场、桥梁、下穿通（隧）道、街道游园及其他公共场地从事下列活动：（一）设置市场、摊点；（二）作业、搭建设施，堆（摆）放物品；（三）开展经营、宣传等活动。禁止占用城市道路开展棋牌等娱乐活动。《成都市市政工程设施管理条例》（2020 年 3 月 31 日四川省第十三届人民代表大会常务委员会第十七次会议批准）第二十一条：因特殊情况需要临时占用城市道路的，应当经市政工程设施主管部门和公安机关批准，方可按照规定占用，并按照规定缴纳城市道路占用费。"
+                  content={applicationInfo?.legalBasis}
                 ></IncludePopoverTag>
                 <IncludePopoverTag
                   title="行驶内容"
-                  content=""
+                  content={applicationInfo?.actionsTaken}
                 ></IncludePopoverTag>
                 <IncludePopoverTag
                   title="申请材料"
-                  content=""
+                  content={applicationInfo?.applicationMaterials}
                 ></IncludePopoverTag>
                 <IncludePopoverTag
                   title="办理流程"
-                  content=""
+                  content={applicationInfo?.specialProcedure}
                 ></IncludePopoverTag>
               </Space>
             </Flex>
           </div>
           <div className={styles.action}>
-            <img src={settingIcon} alt="" className={styles.settingBtn}></img>
+            <div className={styles.settingBtn} onClick={openSetting}>
+              <SettingOutlined style={{ color: "#fff" }} />
+            </div>
 
             <div
               className={styles.backBtn}
@@ -87,7 +134,12 @@ const PendingReviewList = () => {
         </div>
         <div className={styles.tableWrapper}>
           <div className={styles.tableTitle}>事项申请记录</div>
-          <ListTable></ListTable>
+          {applicationInfo && (
+            <ListTable
+              applicationInfo={applicationInfo}
+              active={active as string}
+            ></ListTable>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/pages/Management/PendingReviewList/listTable.module.css b/src/pages/Management/PendingReviewList/listTable.module.css
index 510086dce03103cfb13b46ce96e4d107471ecd9a..4d581785c10fb003a85497a2bd494492191b4e33 100644
--- a/src/pages/Management/PendingReviewList/listTable.module.css
+++ b/src/pages/Management/PendingReviewList/listTable.module.css
@@ -11,8 +11,9 @@
 }
 
 .tagItem {
-  width: 90px;
+  /* width: 90px; */
   height: 50px;
+  padding: 0 22px;
   border-radius: 10px;
   background-color: #dce6ff;
   font-family: Adobe Heiti Std;
@@ -23,10 +24,6 @@
   /* 受理 */
   font-size: 18px;
   cursor: pointer;
-
-  &:active {
-    opacity: 0.5;
-  }
 }
 
 .active {
diff --git a/src/pages/Management/PendingReviewList/listTable.tsx b/src/pages/Management/PendingReviewList/listTable.tsx
index 7a2e51587c741fc952e5e934fa329ec830fbb021..d2db2c5b11fa49be430f517d85be345dafcf143d 100644
--- a/src/pages/Management/PendingReviewList/listTable.tsx
+++ b/src/pages/Management/PendingReviewList/listTable.tsx
@@ -1,15 +1,7 @@
-import {
-  ConfigProvider,
-  Flex,
-  Input,
-  Space,
-  Table,
-  TableProps,
-  Tag,
-} from "antd";
+import { ConfigProvider, Flex, Input, Space, Table, TableProps } from "antd";
 import styles from "./listTable.module.css";
 import classNames from "classnames";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SearchOutlined } from "@ant-design/icons";
 import listIcon from "@/assets/images/pendingReview/list.png";
 import mapIcon from "@/assets/images/pendingReview/map.png";
@@ -17,174 +9,150 @@ import cardIcon from "@/assets/images/pendingReview/card.png";
 import ApplicationMaterial from "@/pages/ApplicationMaterial";
 import { useBoolean } from "ahooks";
 
-interface DataType {
-  key: string;
-  name: string;
-  age: number;
-  address: string;
-  tags: string[];
-}
-
-const data: DataType[] = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address1: "safmafsaf",
-    address: "New York No. 1 Lake Park",
-    tags: ["nice", "developer"],
-  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 42,
-    address1: "safmafsaf",
-    address: "London No. 1 Lake Park",
-    tags: ["loser"],
-  },
-  {
-    key: "3",
-    name: "Joe Black",
-    address1: "safmafsaf",
-    age: 32,
-    address: "Sydney No. 1 Lake Park",
-    tags: ["cool", "teacher"],
-  },
-  {
-    key: "3",
-    name: "Joe Black",
-    address1: "safmafsaf",
-    age: 32,
-    address: "Sydney No. 1 Lake Park",
-    tags: ["cool", "teacher"],
-  },
-  {
-    key: "3",
-    name: "Joe Black",
-    address1: "safmafsaf",
-    age: 32,
-    address: "Sydney No. 1 Lake Park",
-    tags: ["cool", "teacher"],
-  },
-  {
-    key: "3",
-    name: "Joe Black",
-    address1: "safmafsaf",
-    age: 32,
-    address: "Sydney No. 1 Lake Park",
-    tags: ["cool", "teacher"],
-  },
-];
-
-const TagTab = () => {
-  const [activeTab, setActiveTab] = useState(0);
-  const demo = [
-    {
-      label: "全部",
-      value: "50",
-    },
-    {
-      label: "全部",
-      value: "50",
-    },
-    {
-      label: "全部",
-      value: "50",
-    },
-  ];
-
-  const clickHandle = (index: number) => {
-    setActiveTab(index);
-  };
+import service from "@/service";
+import eventBus from "@/customForm/eventBus";
 
+const TagTab = ({ activeTab, tags, onChange }: any) => {
   return (
     <Flex gap={14} align="center">
-      {demo.map((item, index) => {
+      {tags.map((item: any, index: number) => {
         return (
           <div
-            onClick={clickHandle.bind(this, index)}
+            onClick={onChange.bind(this, index)}
             className={classNames(
               styles.tagItem,
               index === activeTab ? styles.active : ""
             )}
           >
-            {item.label}&nbsp;{item.value}
+            {item.elementName}&nbsp;{item.elementCount}
           </div>
         );
       })}
     </Flex>
   );
 };
-const ListTable = () => {
+
+const ListTable = (props: { applicationInfo: any; active?: string }) => {
+  const { applicationInfo, active } = props;
   const [showDetail, { setFalse, setTrue }] = useBoolean(false);
-  const columns: TableProps<DataType>["columns"] = [
+  const [actionObj, setActionObj] = useState<any>();
+  const [activeTab, setActiveTab] = useState(0);
+
+  const [inputStr, setInputStr] = useState("");
+
+  const flowList = applicationInfo?.nodeCount;
+  const [paginationInfo, setPaginationInfo] = useState<any>();
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  useEffect(() => {
+    if (active && active.length > 0) {
+      const index = flowList.findIndex(
+        (item: any) => item.elementId === active
+      );
+      setActiveTab(index);
+    } else {
+      setActiveTab(0);
+    }
+  }, [active]);
+
+  useEffect(() => {
+    getData(1);
+  }, [activeTab, inputStr, applicationInfo]);
+
+  useEffect(() => {
+    const handler = () => {
+      setFalse();
+    };
+    eventBus.on("updateTableList", handler);
+    return () => eventBus.off("updateTableList", handler);
+  }, []);
+
+  const getData = (pageNum: number) => {
+    const params = {
+      thingId: applicationInfo.id,
+      name: inputStr,
+      elementId: flowList[activeTab]?.elementId ?? undefined,
+      pageNum: pageNum,
+      pageSize: 6,
+    };
+    service.managementService.getApplicationRecordById(params).then((res) => {
+      if (res.code === 200) {
+        setDataSource(res.data?.list);
+        setPaginationInfo(res.data);
+      }
+    });
+  };
+  const columns: TableProps<any>["columns"] = [
     {
       title: "申请编号",
-      dataIndex: "name",
-      key: "name",
-      render: (text) => <a>{text}</a>,
+      dataIndex: "id",
     },
     {
       title: "申请单位",
-      dataIndex: "age",
-      key: "age",
+      dataIndex: "name",
+      key: "name",
     },
     {
       title: "申请时间",
-      dataIndex: "address",
-      key: "address",
+      dataIndex: "createAt",
+      key: "createAt",
     },
     {
       title: "办理阶段",
-      key: "tags",
-      dataIndex: "tags",
-      render: (_, { tags }) => (
-        <>
-          {tags.map((tag) => {
-            let color = tag.length > 5 ? "geekblue" : "green";
-            if (tag === "loser") {
-              color = "volcano";
-            }
-            return (
-              <Tag color={color} key={tag}>
-                {tag.toUpperCase()}
-              </Tag>
-            );
-          })}
-        </>
-      ),
+      key: "nodeNameAlias",
+      dataIndex: "nodeNameAlias",
     },
     {
       title: "办理说明",
-      dataIndex: "address1",
-      key: "address1",
+      dataIndex: "applicantType",
+      key: "applicantType",
     },
     {
-      title: "Action",
+      title: "操作",
       key: "action",
       render: (_, record) => (
-        <Space size="middle" onClick={setTrue}>
+        <Space
+          size="middle"
+          onClick={() => {
+            setActionObj(record);
+            setTrue();
+          }}
+        >
           <a>办理</a>
         </Space>
       ),
     },
   ];
 
+  const clickHandle = (index: number) => {
+    setActiveTab(index);
+  };
+
+  const inputChange = (e: any) => {
+    const value = e.target.value;
+    setInputStr(value);
+  };
+
   return (
     <>
       <ApplicationMaterial
         visible={showDetail}
         mode="review"
+        actionObj={actionObj}
         onClose={setFalse}
       ></ApplicationMaterial>
       <div className={styles.container}>
         <Flex style={{ margin: "24px 0" }} justify="space-between">
-          <TagTab></TagTab>
+          <TagTab
+            activeTab={activeTab}
+            tags={flowList}
+            onChange={clickHandle}
+          ></TagTab>
           <Space>
             <Input
               placeholder="输入申请单位名称搜索"
               prefix={<SearchOutlined />}
               style={{ height: 50 }}
+              onChange={inputChange}
             ></Input>
             <div className={styles.iconBtn}>
               <img
@@ -217,7 +185,18 @@ const ListTable = () => {
             },
           }}
         >
-          <Table columns={columns} dataSource={data} />
+          <Table
+            columns={columns}
+            dataSource={dataSource}
+            pagination={{
+              pageSize: 6,
+              total: paginationInfo?.total,
+              current: paginationInfo?.pageNum,
+              onChange: (pageNum) => {
+                getData(pageNum);
+              },
+            }}
+          />
         </ConfigProvider>
       </div>
     </>
diff --git a/src/pages/Setting/Flow/applyForNodeSetting.module.css b/src/pages/Setting/Flow/applyForNodeSetting.module.css
index b262953797ac51e66cbfcf3f44301c1edcc8ba5a..742a87bb64f31bca2c17eb790dbec8027498dc21 100644
--- a/src/pages/Setting/Flow/applyForNodeSetting.module.css
+++ b/src/pages/Setting/Flow/applyForNodeSetting.module.css
@@ -9,13 +9,3 @@
 .container {
   height: 100%;
 }
-
-.content {
-  height: calc(100% - 86px);
-}
-
-.footer {
-  height: 86px;
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/src/pages/Setting/Flow/applyForNodeSetting.tsx b/src/pages/Setting/Flow/applyForNodeSetting.tsx
index e3b4f0d4d5741dcda43dab5b048b9da559dacbb1..ef3824f30af3bfc3566ce12dbe8f718e6e020d4a 100644
--- a/src/pages/Setting/Flow/applyForNodeSetting.tsx
+++ b/src/pages/Setting/Flow/applyForNodeSetting.tsx
@@ -1,15 +1,21 @@
 import RenderComponent from "@/components/FormComponentRender/renderComponent";
 import { ComponentsType } from "@/customForm/interfaces";
-import { Button, Flex, Form, Input } from "antd";
+import { Button, Form } from "antd";
 import FormSelect from "./components/formSelect";
 import styles from "./applyForNodeSetting.module.css";
 
-const ApplyForNodeSetting = () => {
+interface ApplyForNodeSettingProps {
+  onUpdate: (value: any) => void;
+  value: any;
+}
+
+const ApplyForNodeSetting = (props: ApplyForNodeSettingProps) => {
+  const { onUpdate, value } = props;
   const FormConfig = [
     {
       label: "申请范围",
       componentType: "Checkbox",
-      key: "asd",
+      key: "scopeOfApplication",
       config: {
         options: [
           {
@@ -17,20 +23,28 @@ const ApplyForNodeSetting = () => {
             value: "自然人",
           },
           {
-            label: "自然人",
-            value: "自然人",
+            label: "企业",
+            value: "企业",
+          },
+          {
+            label: "个体工商户",
+            value: "个体工商户",
           },
         ],
       },
     },
-
     {
       label: "申请内容",
+      //@ts-ignore
       component: <FormSelect />,
-      key: "asd",
+      key: "examineKeys",
     },
   ];
   const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    onUpdate(values);
+  };
   return (
     <div className={styles.container}>
       <div className={styles.content}>
@@ -39,10 +53,8 @@ const ApplyForNodeSetting = () => {
           form={form}
           colon={false}
           layout="vertical"
-          // wrapperCol={{ offset: 1, span: 22 }}
-          onFinish={(re) => {
-            console.log(re);
-          }}
+          initialValues={value}
+          onFinish={onFinish}
         >
           {FormConfig.map((item) => {
             return (
@@ -58,13 +70,13 @@ const ApplyForNodeSetting = () => {
               </Form.Item>
             );
           })}
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              保存
+            </Button>
+          </Form.Item>
         </Form>
       </div>
-      <div className={styles.footer}>
-        <Button type="primary" style={{ height: 50, width: 150 }}>
-          保存
-        </Button>
-      </div>
     </div>
   );
 };
diff --git a/src/pages/Setting/Flow/components/formSelect.module.css b/src/pages/Setting/Flow/components/formSelect.module.css
index 5a02f044418a7e6e20359eabd5b195a36b49114a..f6d9846b2ea1c7cdae4528b2d068ada8eacae361 100644
--- a/src/pages/Setting/Flow/components/formSelect.module.css
+++ b/src/pages/Setting/Flow/components/formSelect.module.css
@@ -1,6 +1,6 @@
 .checkboxWrapper {
   width: 320px;
-  max-height: 250px;
+  max-height: 160px;
   margin-top: 12px;
   padding: 22px;
   box-sizing: border-box;
diff --git a/src/pages/Setting/Flow/components/formSelect.tsx b/src/pages/Setting/Flow/components/formSelect.tsx
index a740e4136df2c27f4376fc5b565621ae936823e6..9d2f1499e866ec2000316d402a34769089545e54 100644
--- a/src/pages/Setting/Flow/components/formSelect.tsx
+++ b/src/pages/Setting/Flow/components/formSelect.tsx
@@ -1,19 +1,54 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useFormContext } from "../..";
 import { Radio, RadioChangeEvent } from "antd";
 import Checkbox from "@/customForm/components/Checkbox";
 import styles from "./formSelect.module.css";
+import { isEqual } from "lodash";
+
+interface FormSelectProps {
+  value: "all" | string;
+  onChange: (value: string) => void;
+}
+
+const FormSelect = (props: FormSelectProps) => {
+  const { value, onChange } = props;
 
-const FormSelect = () => {
   const { formConfigList } = useFormContext();
   const [selected, setSelected] = useState<string[]>([]);
   const [selectedMode, setSelectedMode] = useState("all");
 
   const modeChange = (e: RadioChangeEvent) => {
-    console.log(e.target.value);
+    if (e.target.value === "all") {
+      onChange("all");
+    } else {
+      setSelected([]);
+      onChange("");
+    }
     setSelectedMode(e.target.value);
   };
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+    if (value === "all") {
+      setSelected([]);
+      setSelectedMode("all");
+      return;
+    }
+
+    if (isEqual(value, selected.join(","))) {
+      return;
+    }
+    setSelected(value?.split(","));
+    setSelectedMode("parts");
+  }, [value]);
+
+  const onCheckChange = (params: string[]) => {
+    setSelected(params as string[]);
+    onChange(params.join(","));
+  };
   const config = formConfigList.map((v) => ({ label: v.label, value: v.key }));
+
   return (
     <div>
       <div style={{ height: 32 }}>
@@ -27,7 +62,7 @@ const FormSelect = () => {
         <div className={styles.checkboxWrapper}>
           <Checkbox
             value={selected}
-            onChange={(params) => setSelected(params as string[])}
+            onChange={onCheckChange as any}
             options={config}
           ></Checkbox>
         </div>
diff --git a/src/pages/Setting/Flow/examineNodeSetting.module.css b/src/pages/Setting/Flow/examineNodeSetting.module.css
index b262953797ac51e66cbfcf3f44301c1edcc8ba5a..742a87bb64f31bca2c17eb790dbec8027498dc21 100644
--- a/src/pages/Setting/Flow/examineNodeSetting.module.css
+++ b/src/pages/Setting/Flow/examineNodeSetting.module.css
@@ -9,13 +9,3 @@
 .container {
   height: 100%;
 }
-
-.content {
-  height: calc(100% - 86px);
-}
-
-.footer {
-  height: 86px;
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/src/pages/Setting/Flow/examineNodeSetting.tsx b/src/pages/Setting/Flow/examineNodeSetting.tsx
index e19f12af34c21009b9c372b5399b768a841fae36..d5a12e401fd074e552efaf39b4b2dd4989645b58 100644
--- a/src/pages/Setting/Flow/examineNodeSetting.tsx
+++ b/src/pages/Setting/Flow/examineNodeSetting.tsx
@@ -3,27 +3,65 @@ import { ComponentsType } from "@/customForm/interfaces";
 import { Button, Flex, Form, Input } from "antd";
 import FormSelect from "./components/formSelect";
 import styles from "./examineNodeSetting.module.css";
-const ActionDescChange = () => {
+import { useState } from "react";
+import { useUpdateEffect } from "ahooks";
+
+const ActionDescChange = (props: {
+  value: string[];
+  onChange: (value: string[]) => void;
+}) => {
+  const [value, setValue] = useState<string[]>(props.value);
+
+  const inputChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const str = e.target.value;
+    setValue((pre) => {
+      const newValue = [...pre];
+      newValue[index] = str;
+      return newValue;
+    });
+  };
+
+  useUpdateEffect(() => {
+    props.onChange(value);
+  }, [value]);
+
   return (
     <Flex gap={12}>
       <div>
         <div style={{ marginBottom: 8 }}>正向操作</div>
-        <Input value={"同意"} size="large"></Input>
+        <Input
+          value={value[0]}
+          size="large"
+          onChange={(e) => inputChange(e, 0)}
+        ></Input>
       </div>
       <div>
         <div style={{ marginBottom: 8 }}>逆向操作</div>
-        <Input value={"驳回"} size="large"></Input>
+        <Input
+          value={value[1]}
+          onChange={(e) => inputChange(e, 1)}
+          size="large"
+        ></Input>
       </div>
     </Flex>
   );
 };
 
-const ExamineNodeSetting = () => {
+interface ExamineNodeSettingProps {
+  onUpdate: (value: any) => void;
+  value: any;
+}
+const ExamineNodeSetting = (props: ExamineNodeSettingProps) => {
+  const { onUpdate, value } = props;
+
   const FormConfig = [
     {
       label: "审批节点名称",
       componentType: "TextInput",
-      key: "asd",
+      key: "elementAlias",
       config: {
         placeholder: "请输入",
         size: "large",
@@ -32,23 +70,29 @@ const ExamineNodeSetting = () => {
     {
       label: "指定审批人",
       componentType: "UserSelect",
-      key: "asd",
+      key: "approverList",
       config: {
         placeholder: "请输入",
       },
     },
     {
       label: "",
+      //@ts-ignore
       component: <ActionDescChange />,
-      key: "asd",
+      key: "forwardAndReverseName",
     },
     {
       label: "审批内容",
+      //@ts-ignore
       component: <FormSelect />,
-      key: "asd",
+      key: "examineKeys",
     },
   ];
   const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    onUpdate(values);
+  };
   return (
     <div className={styles.container}>
       <div className={styles.content}>
@@ -56,11 +100,9 @@ const ExamineNodeSetting = () => {
         <Form
           form={form}
           colon={false}
+          initialValues={value}
           layout="vertical"
-          // wrapperCol={{ offset: 1, span: 22 }}
-          onFinish={(re) => {
-            console.log(re);
-          }}
+          onFinish={onFinish}
         >
           {FormConfig.map((item) => {
             return (
@@ -76,13 +118,13 @@ const ExamineNodeSetting = () => {
               </Form.Item>
             );
           })}
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              保存
+            </Button>
+          </Form.Item>
         </Form>
       </div>
-      <div className={styles.footer}>
-        <Button type="primary" style={{ height: 50, width: 150 }}>
-          保存
-        </Button>
-      </div>
     </div>
   );
 };
diff --git a/src/pages/Setting/Flow/index.module.css b/src/pages/Setting/Flow/index.module.css
index 83cec91ea59e502a226557c573bfbcbdc4e7f02c..42ea098d6fe6cc7002d17a68588bb6e91a488595 100644
--- a/src/pages/Setting/Flow/index.module.css
+++ b/src/pages/Setting/Flow/index.module.css
@@ -4,7 +4,11 @@
   background-color: #f9fcff;
 
   box-sizing: border-box;
+}
+
+.contentWrapper {
   display: flex;
+  height: calc(100% - 86px);
 }
 
 .endNode {
@@ -22,10 +26,11 @@
 }
 
 .lineNode {
-  height: 150px;
+  height: 120px;
   position: relative;
-  width: 5px;
-  background-color: gray;
+  width: 3px;
+
+  background-color: rgba(0, 0, 0, 0.5);
   margin-bottom: 15px;
 
   &:after {
@@ -41,6 +46,14 @@
   }
 }
 
+.footer {
+  height: 86px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 22px;
+}
+
 .actionBtn {
   position: absolute;
   top: 50%;
@@ -53,20 +66,32 @@
   }
 }
 
+.active {
+  background-color: rgb(134, 178, 229);
+  /* color: #fff !important; */
+}
 .flowChartContent {
   display: flex;
   flex: 1;
   flex-direction: column;
+  /* justify-content: center; */
   align-items: center;
   padding: 36px;
   box-sizing: border-box;
+  overflow: auto;
+  /* align-content: flex-start; */
+
+  > div {
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: auto;
+  }
 }
 
 .baseNodeHeader {
-  height: 40px;
-  border-radius: 10px 10px 0 0;
+  height: 35px;
+  /* border-radius: 10px 10px 0 0; */
   padding: 0 22px;
-
   background-color: #e1f2fd;
   position: relative;
   display: flex;
@@ -75,24 +100,12 @@
   font-weight: 400;
   font-size: 18px;
   align-items: center;
-
-  &::after {
-    content: "";
-    position: absolute;
-    border-radius: 10px 10px 0 0;
-
-    background-color: #418af5;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 5px;
-  }
+  justify-content: space-between;
 }
 .baseNode {
   width: 297px;
   border-radius: 10px;
   border: 1px solid #e9eef5;
-
   background-color: #ffffff;
 }
 .baseNodeContent {
@@ -119,4 +132,13 @@
   background-color: #fff;
   padding: 36px;
   box-sizing: border-box;
+  overflow: auto;
+}
+
+.decorator {
+  border-radius: 10px 10px 0 0;
+
+  background-color: #418af5;
+
+  height: 5px;
 }
diff --git a/src/pages/Setting/Flow/index.tsx b/src/pages/Setting/Flow/index.tsx
index d7c1844a9120e12bc6eeb0fc6719bc2168cc8e5e..96679fa0c165c2b00e7097583d4d1b6b98e79eda 100644
--- a/src/pages/Setting/Flow/index.tsx
+++ b/src/pages/Setting/Flow/index.tsx
@@ -1,21 +1,29 @@
-import { Button, Popover } from "antd";
+import { Button, Empty, Modal, Popover, message, notification } from "antd";
 import styles from "./index.module.css";
 import plus from "@/assets/images/setting/plus.png";
-import { RightOutlined } from "@ant-design/icons";
+import { CloseOutlined, RightOutlined } from "@ant-design/icons";
 import { useEffect, useState } from "react";
 import { useFormContext } from "..";
 import { FlowChartNode } from "../interface";
-import { v4 } from "uuid";
 import ExamineNodeSetting from "./examineNodeSetting";
 import ApplyForNodeSetting from "./applyForNodeSetting";
 import TransactNodeSetting from "./transactNodeSetting";
+import classNames from "classnames";
+import service from "@/service";
+import eventBus from "@/customForm/eventBus";
+import { buildLineData, getDefaultNodeByType } from "../util";
+
 /** 结束节点 */
 const EndNodeRender = () => {
   return <div className={styles.endNode}>流程结束</div>;
 };
 
+interface LineNodeRenderProps {
+  add: (type: "办理" | "审批") => void;
+}
 /** 线节点 */
-const LineNodeRender = () => {
+const LineNodeRender = (props: LineNodeRenderProps) => {
+  const { add } = props;
   return (
     <div className={styles.lineNode}>
       <Popover
@@ -23,8 +31,12 @@ const LineNodeRender = () => {
         arrow={false}
         content={
           <div>
-            <Button type="text">办理</Button>
-            <Button type="text">审批</Button>
+            <Button type="text" onClick={add.bind(this, "办理")}>
+              办理
+            </Button>
+            <Button type="text" onClick={add.bind(this, "审批")}>
+              审批
+            </Button>
           </div>
         }
       >
@@ -39,13 +51,39 @@ const LineNodeRender = () => {
 type BaseNodeProps = {
   title: string;
   content: string;
+  clickHandle?: () => void;
+  showClose?: boolean;
+  onClose?: () => void;
+  active: boolean;
 };
 /** 基础节点 */
-const BaseNodeRender = ({ title, content }: BaseNodeProps) => {
+const BaseNodeRender = (props: BaseNodeProps) => {
+  const {
+    title,
+    content,
+    clickHandle,
+    showClose = true,
+    active = false,
+    onClose,
+  } = props;
   return (
     <div className={styles.baseNode}>
-      <div className={styles.baseNodeHeader}>{title}</div>
-      <div className={styles.baseNodeContent}>
+      <div className={styles.decorator}></div>
+      <div className={styles.baseNodeHeader}>
+        <div>{title}</div>
+        {showClose && (
+          <Button
+            type="text"
+            shape="circle"
+            icon={<CloseOutlined />}
+            onClick={onClose}
+          ></Button>
+        )}
+      </div>
+      <div
+        className={classNames(styles.baseNodeContent, active && styles.active)}
+        onClick={clickHandle}
+      >
         <div>{content}</div>
         <RightOutlined />
       </div>
@@ -55,57 +93,200 @@ const BaseNodeRender = ({ title, content }: BaseNodeProps) => {
 
 const Flow = () => {
   /** 当前操作对象 */
-  const [actionNode, setActionNode] = useState({});
+  const [actionNode, setActionNode] = useState<any>();
 
-  /**  */
-  const { flowData, setFlowData } = useFormContext();
+  /** 流程图数据   */
+  const { flowData, setFlowData, baseInfo, mode, flowMetaData } =
+    useFormContext();
 
   useEffect(() => {
     if (flowData.length === 0) {
-      setFlowData([
-        {
-          elementId: v4(),
-          elementName: "申请人",
-          elementType: 1,
+      const newValue = [getDefaultNodeByType(1), getDefaultNodeByType()];
+      setFlowData(newValue as any);
+      setActionNode(newValue[0]);
+    }
+  }, []);
+
+  const openNotification = (message: string) => {
+    notification.open({
+      message: message,
+      description: "",
+      type: "success",
+      duration: 2,
+    });
+  };
+
+  const addElement = (index: number, type: "办理" | "审批") => {
+    let node;
+    if (type === "办理") {
+      node = getDefaultNodeByType(2);
+    } else {
+      node = getDefaultNodeByType(3);
+    }
+    setFlowData((pre) => {
+      const newData = [...pre];
+      newData.splice(index + 1, 0, node as any);
+      return newData;
+    });
+  };
+
+  /** 删除节点 */
+  const deleteNode = (index: number) => {
+    if (mode === "edit") {
+      Modal.confirm({
+        title: "是否删除节点？",
+        content: "删除节点会影响到正在审批的用户，请确认是否删除",
+        okText: "确认",
+        cancelText: "取消",
+        centered: true,
+        onOk() {
+          if (flowData[index].elementId === actionNode?.elementId) {
+            setActionNode(undefined);
+          }
+          setFlowData((pre) => {
+            const newData = [...pre];
+            newData.splice(index, 1);
+            return newData;
+          });
         },
-        {
-          elementId: v4(),
-          elementName: "审批人",
-          elementType: 4,
+        onCancel() {
+          console.log("Cancel");
         },
-      ]);
+      });
+    } else {
+      if (flowData[index].elementId === actionNode?.elementId) {
+        setActionNode(undefined);
+      }
+      setFlowData((pre) => {
+        const newData = [...pre];
+        newData.splice(index, 1);
+        return newData;
+      });
     }
-  }, []);
+  };
 
-  const renderNode = (item: FlowChartNode) => {
-    switch (item.elementType) {
-      case 1:
-        return (
-          <>
-            <BaseNodeRender
-              title={item.elementName}
-              content="111"
-            ></BaseNodeRender>
-            <LineNodeRender></LineNodeRender>
-          </>
-        );
-      case 4:
-        return <EndNodeRender></EndNodeRender>;
+  const renderNode = (item: FlowChartNode, index: number) => {
+    if ([1, 2, 3].includes(item.nodeType as number)) {
+      let content = "去设置";
+      if (item.nodeType === 1) {
+        content = (item.scopeOfApplication as string[])?.join(",") ?? "去设置";
+      }
+
+      return (
+        <>
+          <BaseNodeRender
+            active={actionNode?.elementId === item.elementId}
+            title={item?.elementAlias ?? item.elementName}
+            content={content}
+            onClose={() => deleteNode(index)}
+            clickHandle={() => setActionNode(item)}
+            showClose={item.nodeType != 1}
+          ></BaseNodeRender>
+          <LineNodeRender
+            add={(type) => {
+              addElement(index, type);
+            }}
+          ></LineNodeRender>
+        </>
+      );
+    }
+    return <EndNodeRender></EndNodeRender>;
+  };
+
+  const onUpdate = (params: any) => {
+    for (const key in params) {
+      actionNode[key] = params[key];
     }
+
+    setFlowData((pre) => {
+      const newData = [...pre];
+      const index = newData.findIndex(
+        (item) => item.elementId === actionNode.elementId
+      );
+      newData[index] = actionNode;
+      return newData;
+    });
+    openNotification("已更新节点信息");
+  };
+
+  const onSave = () => {
+    // console.log(flowData, baseInfo);
+    const metaData =
+      mode === "edit"
+        ? flowMetaData.current
+        : {
+            processId: baseInfo?.processId,
+            processName: baseInfo?.thingName,
+            description: "",
+          };
+
+    const lineData = buildLineData(flowData);
+
+    const nodeList = flowData?.map((v) => {
+      const temp = { ...v };
+      temp.forwardAndReverseName = (
+        temp.forwardAndReverseName as string[]
+      )?.join(",");
+      temp.scopeOfApplication = (temp.scopeOfApplication as string[])?.join(
+        ","
+      );
+      temp.approverList = (temp.approverList as unknown as string[])?.join(",");
+      return temp;
+    });
+    const params = {
+      ...metaData,
+      elementParams: [
+        {
+          elementId: "startEvent",
+          elementName: "开始节点",
+          elementType: 1,
+        },
+        ...nodeList,
+        ...lineData,
+      ],
+    };
+
+    service.settingService.saveFlowConfig(params as any).then((res) => {
+      if (res.code === 200) {
+        openNotification(mode === "add" ? "创建成功" : "修改成功");
+        eventBus.emit("updateList");
+      }
+    });
   };
 
   return (
     <div className={styles.container}>
-      <div className={styles.flowChartContent}>
-        {flowData.map((item, i) => {
-          return renderNode(item);
-        })}
+      <div className={styles.contentWrapper}>
+        <div className={styles.flowChartContent}>
+          {flowData?.map((item, index) => {
+            return renderNode(item, index);
+          })}
+        </div>
+        <div className={styles.settingContent}>
+          {actionNode?.nodeType === 1 && (
+            <ApplyForNodeSetting value={actionNode} onUpdate={onUpdate} />
+          )}
+          {actionNode?.nodeType === 2 && (
+            <TransactNodeSetting value={actionNode} onUpdate={onUpdate} />
+          )}
+          {actionNode?.nodeType === 3 && (
+            <ExamineNodeSetting value={actionNode} onUpdate={onUpdate} />
+          )}
+          {!actionNode && (
+            <div style={{ textAlign: "center", marginTop: 100 }}>
+              <Empty description="未选中任意流程节点"></Empty>
+            </div>
+          )}
+        </div>
       </div>
-      <div className={styles.settingContent}>
-        {/* <ExamineNodeSetting /> */}
-
-        {/* <ApplyForNodeSetting /> */}
-        <TransactNodeSetting />
+      <div className={styles.footer}>
+        <Button
+          type="primary"
+          style={{ width: 150, height: 50, fontSize: 18 }}
+          onClick={onSave}
+        >
+          确定
+        </Button>
       </div>
     </div>
   );
diff --git a/src/pages/Setting/Flow/transactNodeSetting.module.css b/src/pages/Setting/Flow/transactNodeSetting.module.css
index b262953797ac51e66cbfcf3f44301c1edcc8ba5a..742a87bb64f31bca2c17eb790dbec8027498dc21 100644
--- a/src/pages/Setting/Flow/transactNodeSetting.module.css
+++ b/src/pages/Setting/Flow/transactNodeSetting.module.css
@@ -9,13 +9,3 @@
 .container {
   height: 100%;
 }
-
-.content {
-  height: calc(100% - 86px);
-}
-
-.footer {
-  height: 86px;
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/src/pages/Setting/Flow/transactNodeSetting.tsx b/src/pages/Setting/Flow/transactNodeSetting.tsx
index 8edf8fcaec7797ea59c7cea50abce8debbe608df..085e257033134a6092ae7e1856f74028fb66bf42 100644
--- a/src/pages/Setting/Flow/transactNodeSetting.tsx
+++ b/src/pages/Setting/Flow/transactNodeSetting.tsx
@@ -3,13 +3,18 @@ import { ComponentsType } from "@/customForm/interfaces";
 import { Button, Form } from "antd";
 import FormSelect from "./components/formSelect";
 import styles from "./transactNodeSetting.module.css";
+interface TransactNodeSettingProps {
+  onUpdate: (value: any) => void;
+  value: any;
+}
+const TransactNodeSetting = (props: TransactNodeSettingProps) => {
+  const { onUpdate, value } = props;
 
-const TransactNodeSetting = () => {
   const FormConfig = [
     {
       label: "办理节点名称",
       componentType: "TextInput",
-      key: "asd",
+      key: "elementAlias",
       config: {
         placeholder: "请输入",
         size: "large",
@@ -18,20 +23,24 @@ const TransactNodeSetting = () => {
     {
       label: "指定办理人",
       componentType: "UserSelect",
-      key: "asd",
+      key: "approverList",
       config: {
         placeholder: "请输入",
       },
     },
 
     {
-      label: "审批内容",
+      label: "办理内容",
+      //@ts-ignore
       component: <FormSelect />,
-      key: "asd",
+      key: "examineKeys",
     },
   ];
-  const [form] = Form.useForm();
 
+  const [form] = Form.useForm();
+  const onFinish = (values: any) => {
+    onUpdate(values);
+  };
   return (
     <div className={styles.container}>
       <div className={styles.content}>
@@ -39,11 +48,10 @@ const TransactNodeSetting = () => {
         <Form
           form={form}
           colon={false}
+          initialValues={value}
           layout="vertical"
           // wrapperCol={{ offset: 1, span: 22 }}
-          onFinish={(re) => {
-            console.log(re);
-          }}
+          onFinish={onFinish}
         >
           {FormConfig.map((item) => {
             return (
@@ -59,13 +67,13 @@ const TransactNodeSetting = () => {
               </Form.Item>
             );
           })}
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              保存
+            </Button>
+          </Form.Item>
         </Form>
       </div>
-      <div className={styles.footer}>
-        <Button type="primary" style={{ height: 50, width: 150 }}>
-          保存
-        </Button>
-      </div>
     </div>
   );
 };
diff --git a/src/pages/Setting/FormMatch/complex-table.tsx b/src/pages/Setting/FormMatch/complex-table.tsx
index 075de128c6bf12ac05599b3bcb0bc3ab78072875..db14c08ff8457f60b621b0329c8c595e612b732f 100644
--- a/src/pages/Setting/FormMatch/complex-table.tsx
+++ b/src/pages/Setting/FormMatch/complex-table.tsx
@@ -1,8 +1,12 @@
 import BaseFormComponent from "@/customForm/entity/base";
-import { Button, ConfigProvider, Table } from "antd";
+import { Button, ConfigProvider, Popover, Space, Table } from "antd";
 import { ColumnsType } from "antd/es/table";
 import { useContext, useMemo, useState } from "react";
-import { HolderOutlined } from "@ant-design/icons";
+import {
+  DeleteOutlined,
+  HolderOutlined,
+  PlusCircleOutlined,
+} from "@ant-design/icons";
 import type { DragEndEvent } from "@dnd-kit/core";
 import { DndContext } from "@dnd-kit/core";
 import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
@@ -16,9 +20,12 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import React from "react";
 import styles from "./complex-table.module.css";
+import Menu from "./menu";
 
 import Checkbox from "@/customForm/components/Checkbox";
 import { useFormContext } from "..";
+import { buildTreeByGroup } from "@/customForm/utils";
+import { cloneDeep } from "lodash";
 
 interface RowContextProps {
   setActivatorNodeRef?: (element: HTMLElement | null) => void;
@@ -84,6 +91,20 @@ interface ComplexTableProps {
 const ComplexTable = ({ onClickRow, activeRow }: ComplexTableProps) => {
   const { setFormConfigList, formConfigList } = useFormContext();
 
+  const TableData = useMemo(
+    () => buildTreeByGroup(formConfigList),
+    [formConfigList]
+  );
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const deleteNode = (record: any) => {
+    const newConfig = cloneDeep(formConfigList);
+    newConfig.splice(
+      formConfigList.findIndex((item) => item.key === record.key),
+      1
+    );
+    setFormConfigList(newConfig);
+  };
   const columns: ColumnsType<BaseFormComponent> = [
     {
       title: "字段名称",
@@ -97,23 +118,97 @@ const ComplexTable = ({ onClickRow, activeRow }: ComplexTableProps) => {
       },
       key: "componentType",
     },
-    {
-      title: "选项",
-      dataIndex: "",
-      render(value, record, index) {
-        return "无";
-      },
-    },
+    // {
+    //   title: "选项",
+    //   dataIndex: "",
+    //   render(value, record) {
+    //     if (record.componentType === "Branch") {
+    //       return (
+    //         <Popover
+    //           placement="top"
+    //           trigger={"click"}
+    //           content={<Menu groupId={record.key} />}
+    //           arrow={false}
+    //         >
+    //           <Button type="primary" icon={<PlusCircleOutlined />} ghost>
+    //             添加子字段
+    //           </Button>
+    //         </Popover>
+    //       );
+    //     }
+    //     return "无";
+    //   },
+    //   onCell(record) {
+    //     if (record.componentType === "Branch") {
+    //       return {
+    //         colSpan: 4,
+    //       };
+    //     }
+    //     return {
+    //       colSpan: 1,
+    //     };
+    //   },
+    // },
     {
       title: "提示",
       dataIndex: "componentOption",
       key: "name",
-      render(_, record: any) {
+      // render(_, record: any) {
+      //   if (record.componentOption?.placeholder) {
+      //     return record.componentOption.placeholder;
+      //   }
+
+      //   return "无";
+      // },
+      render(value, record) {
+        if (record.componentType === "Branch") {
+          return (
+            <Popover
+              placement="top"
+              trigger={"click"}
+              open={popoverOpen}
+              content={
+                <Menu
+                  groupId={record.key}
+                  onClick={() => setPopoverOpen(false)}
+                />
+              }
+              arrow={false}
+              onOpenChange={() => {
+                setPopoverOpen(!popoverOpen);
+              }}
+            >
+              <Button type="primary" icon={<PlusCircleOutlined />} ghost>
+                添加子字段
+              </Button>
+            </Popover>
+          );
+        }
         if (record.componentOption?.placeholder) {
           return record.componentOption.placeholder;
         }
         return "无";
       },
+      onCell(record) {
+        if (record.componentType === "Branch") {
+          return {
+            colSpan: 2,
+          };
+        }
+        return {
+          colSpan: 1,
+        };
+      },
+      // onCell(record) {
+      //   if (record.componentType === "Branch") {
+      //     return {
+      //       colSpan: 0,
+      //     };
+      //   }
+      //   return {
+      //     colSpan: 1,
+      //   };
+      // },
     },
     {
       title: "必填",
@@ -122,23 +217,58 @@ const ComplexTable = ({ onClickRow, activeRow }: ComplexTableProps) => {
           <Checkbox value={record.componentOption?.require ?? false}></Checkbox>
         );
       },
+      onCell(record) {
+        if (record.componentType === "Branch") {
+          return {
+            colSpan: 0,
+          };
+        }
+        return {
+          colSpan: 1,
+        };
+      },
       key: "require",
     },
+    // {
+    //   title: "打印",
+    //   render(_, record) {
+    //     return (
+    //       <Checkbox value={record.componentOption?.print ?? false}></Checkbox>
+    //     );
+    //   },
+    //   onCell(record) {
+    //     if (record.componentType === "Branch") {
+    //       return {
+    //         colSpan: 0,
+    //       };
+    //     }
+    //     return {
+    //       colSpan: 1,
+    //     };
+    //   },
+    //   key: "print",
+    // },
     {
-      title: "打印",
+      title: "操作",
       render(_, record) {
         return (
-          <Checkbox value={record.componentOption?.print ?? false}></Checkbox>
+          <Space>
+            <Button
+              type="text"
+              danger
+              icon={<DeleteOutlined />}
+              onClick={(e) => {
+                e.stopPropagation();
+                deleteNode(record);
+              }}
+            ></Button>
+            <Popover title="" content="拖动" trigger={"hover"}>
+              <DragHandle />
+            </Popover>
+          </Space>
         );
       },
-      key: "print",
-    },
-    {
-      key: "sort",
-      title: "排序",
-      align: "center",
-      width: 80,
-      render: () => <DragHandle />,
+      key: "action",
     },
   ];
 
@@ -183,7 +313,7 @@ const ComplexTable = ({ onClickRow, activeRow }: ComplexTableProps) => {
           strategy={verticalListSortingStrategy}
         >
           <Table
-            dataSource={formConfigList}
+            dataSource={TableData}
             columns={columns}
             components={{ body: { row: Row } }}
             pagination={false}
diff --git a/src/pages/Setting/FormMatch/formView.module.css b/src/pages/Setting/FormMatch/formView.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea3d140f09c7b75e2f3192596a3fdc60b87ec9f3
--- /dev/null
+++ b/src/pages/Setting/FormMatch/formView.module.css
@@ -0,0 +1,14 @@
+.container {
+  margin-bottom: 16px;
+}
+
+.card {
+  border-radius: 10px;
+  background-color: #f9fcff;
+  padding: 8px;
+  box-sizing: border-box;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/pages/Setting/FormMatch/formView.tsx b/src/pages/Setting/FormMatch/formView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e5de64cf4a020e9386b66ae7439e3787b4507efe
--- /dev/null
+++ b/src/pages/Setting/FormMatch/formView.tsx
@@ -0,0 +1,87 @@
+import RenderComponent from "@/components/FormComponentRender/renderComponent";
+
+import { Form, Flex } from "antd";
+import { useFormContext } from "..";
+import { useMemo } from "react";
+import BaseFormComponent from "@/customForm/entity/base";
+import { OnlyProperties } from "@/customForm/interfaces";
+import { buildListByGroupId } from "@/customForm/utils";
+import { PropsWithChildren } from "react";
+import styles from "./formView.module.css";
+import DecoratePoint from "@/pages/ApplicationMaterial/components/decoratePoint";
+
+const GroupCard: React.FC<PropsWithChildren & { title?: string }> = (props) => {
+  const { children, title } = props;
+  return (
+    <div className={styles.container}>
+      {title && title?.length > 0 ? (
+        <Flex align="center" gap={8} style={{ marginBottom: 16 }}>
+          <DecoratePoint></DecoratePoint>
+          <div className="">{title}</div>
+        </Flex>
+      ) : undefined}
+      <div className={styles.card}>{children}</div>
+    </div>
+  );
+};
+
+const FormView = () => {
+  const { formConfigList } = useFormContext();
+  const getGroupName = (key: string) => {
+    return config.groupList.find((v: any) => v.key === key)?.label ?? "";
+  };
+
+  const config = useMemo(() => {
+    let groupList = [] as any;
+    let configList = [] as any;
+    if (formConfigList) {
+      formConfigList.forEach((item: OnlyProperties<BaseFormComponent>) => {
+        if (item.componentType === "Branch") {
+          groupList.push(item);
+        } else {
+          configList.push(item);
+        }
+      });
+      return {
+        groupList: groupList,
+        configList: buildListByGroupId(configList),
+      };
+    } else
+      return {
+        groupList: [],
+        configList: [],
+      };
+  }, [formConfigList]);
+  return (
+    <Form colon={false} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      {config.configList.map((item: any) => {
+        return (
+          <GroupCard title={getGroupName(item.title)}>
+            {item.list.map((formItem: any) => {
+              return (
+                <Form.Item
+                  label={formItem.label}
+                  rules={[
+                    {
+                      required: formItem.componentOption?.require,
+                      message: `请填写${formItem?.label}`,
+                    },
+                    ...formItem.validationRules,
+                  ]}
+                  name={formItem.key}
+                >
+                  <RenderComponent
+                    config={formItem.componentOption}
+                    componentType={formItem.componentType}
+                  ></RenderComponent>
+                </Form.Item>
+              );
+            })}
+          </GroupCard>
+        );
+      })}
+    </Form>
+  );
+};
+
+export default FormView;
diff --git a/src/pages/Setting/FormMatch/index.module.css b/src/pages/Setting/FormMatch/index.module.css
index e6a7eae894c6c81a240ef78c8bbe0847d82709c2..8c91d949e8c3f80a7954859925a2a4f251a6979f 100644
--- a/src/pages/Setting/FormMatch/index.module.css
+++ b/src/pages/Setting/FormMatch/index.module.css
@@ -17,22 +17,22 @@
 }
 
 .rightCard {
-  width: 389px;
+  flex-grow: 1;
   height: 650px;
   border-radius: 10px;
   background-color: #ffffff;
   border: 1px solid #e9eef5;
-  padding: 24px;
+
   box-sizing: border-box;
 }
 
 .cardWrapper {
   display: flex;
-  gap: 28px;
+  gap: 12px;
 }
 
 .leftCard {
-  width: 816px;
+  width: 700px;
   height: 650px;
   border-radius: 10px;
   background-color: #ffffff;
@@ -57,8 +57,23 @@
   margin-top: 150px;
 }
 
+.titleWrapper {
+  padding: 16px 16px 0 16px;
+}
+
 .formWrapper {
   overflow: auto;
   height: 540px;
-  margin-top: 20px;
+  /* margin-top: 20px; */
+  padding: 16px 16px 0 16px;
+}
+
+.centerCard {
+  height: 650px;
+  border-radius: 10px;
+  background-color: #ffffff;
+  border: 1px solid #e9eef5;
+
+  box-sizing: border-box;
+  width: 360px;
 }
diff --git a/src/pages/Setting/FormMatch/index.tsx b/src/pages/Setting/FormMatch/index.tsx
index 626d9d093729c24c0e25f7bf3170ade3b2001c12..f59d1e632a7762476db661f42a6d560d068ddf5d 100644
--- a/src/pages/Setting/FormMatch/index.tsx
+++ b/src/pages/Setting/FormMatch/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Form, Flex, Popover } from "antd";
+import { Button, Form, Flex, Popover, message, notification } from "antd";
 import styles from "./index.module.css";
 import { useEffect, useMemo, useState } from "react";
 import { PlusCircleOutlined } from "@ant-design/icons";
@@ -7,6 +7,9 @@ import BaseFormComponent from "@/customForm/entity/base";
 import ComplexTable from "./complex-table";
 import RenderComponent from "../../../components/FormComponentRender/renderComponent";
 import { PropInfo, PropInfoMap } from "@/customForm/interfaces";
+import { useFormContext } from "..";
+import service from "@/service";
+import FormView from "./formView";
 
 const FormRender = (data?: PropInfoMap<BaseFormComponent>) => {
   if (data) {
@@ -40,11 +43,37 @@ const FormRender = (data?: PropInfoMap<BaseFormComponent>) => {
 const FormMatch = () => {
   /** 当前选中/操作的对象 */
   const [selectRow, setSelectRow] = useState<BaseFormComponent>();
+  /** 需要删除的对象 */
+  const [deleteList, setDeleteList] = useState<BaseFormComponent[]>();
+
   /** 当前操作的对象 */
   const actionObjMetadata = useMemo(
     () => selectRow?.meta() ?? undefined,
     [selectRow]
   );
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const {
+    formConfigList,
+    setFormConfigList,
+    setActiveKey,
+    setActiveTabs,
+    baseInfo,
+    mode,
+  } = useFormContext();
+
+  /** 当选中值不匹配时及时清掉右侧表单 */
+  useEffect(() => {
+    if (selectRow?.key) {
+      const has = formConfigList.findIndex((v) => {
+        return v.key === selectRow?.key;
+      });
+
+      if (has === -1) {
+        setSelectRow(undefined);
+      }
+    }
+  }, [formConfigList]);
 
   const name = actionObjMetadata?.component.name ?? "无";
 
@@ -57,15 +86,10 @@ const FormMatch = () => {
     const meta = selectRow?.meta();
     /** 表单值初始化 */
     if (meta?.properties) {
-      const keys = Object.keys(meta.properties);
-      const values = keys.reduce((pre, key) => {
-        const info = meta.properties[key as keyof BaseFormComponent];
-        return {
-          ...pre,
-          [key]: info.def,
-        };
-      }, {});
-      form.setFieldsValue(values);
+      form.setFieldsValue({
+        label: selectRow?.label,
+        ...selectRow?.componentOption,
+      });
     }
   }, [selectRow]);
 
@@ -80,6 +104,61 @@ const FormMatch = () => {
       },
     };
   };
+  /** 更新原始值 */
+  const updateOriginFormConfig = (values: Record<string, any>) => {
+    const originObj = formConfigList.find((v) => v.key === selectRow?.key);
+    const { label, ...others } = values;
+    console.log(values);
+    if (originObj) {
+      originObj.setValues({
+        label: values.label,
+        componentOption: originObj.componentOption?.update(others) ?? {},
+      });
+    }
+    setFormConfigList([...formConfigList]);
+  };
+
+  const onFieldsChange = () => {
+    form.validateFields().then((values) => {
+      updateOriginFormConfig(values);
+    });
+  };
+
+  /** 保存表单 */
+  const submit = async () => {
+    if (mode === "edit") {
+      await service.managementService.removeAllConfigById(baseInfo?.id);
+    }
+    const reqList = formConfigList.map((item, index) => {
+      const newParams = {
+        thingId: baseInfo?.id,
+        label: item.label,
+        componentType: item.componentType,
+        fieldKey: item.key,
+        validationRules: item.toJsonValidationRules(),
+        otherSet: JSON.stringify(item.componentOption),
+        groupId: item.groupId ?? "",
+        sort: index + 1,
+      };
+      return service.settingService.saveFormConfigItem(newParams);
+    });
+
+    try {
+      await Promise.all(reqList).then(() => {
+        if (mode === "add") {
+          setActiveTabs(["1", "2", "3"]);
+          setActiveKey("3");
+        } else {
+          notification.success({
+            message: "修改成功",
+            duration: 1.5,
+          });
+        }
+      });
+    } catch (error) {
+      message.error("保存失败");
+    }
+  };
 
   return (
     <div className={styles.container}>
@@ -93,8 +172,12 @@ const FormMatch = () => {
             <Popover
               placement="top"
               trigger={"click"}
-              content={<Menu />}
+              content={<Menu onClick={() => setPopoverOpen(false)} />}
               arrow={false}
+              open={popoverOpen}
+              onOpenChange={() => {
+                setPopoverOpen(!popoverOpen);
+              }}
             >
               <Button type="primary" icon={<PlusCircleOutlined />} ghost>
                 添加字段
@@ -102,8 +185,12 @@ const FormMatch = () => {
             </Popover>
           </div>
         </div>
-        <div className={styles.rightCard}>
-          <Flex justify="space-between" align="center">
+        <div className={styles.centerCard}>
+          <Flex
+            className={styles.titleWrapper}
+            justify="space-between"
+            align="center"
+          >
             <div className={styles.rightTitle}>字段设置</div>
             <div>控件类型：{name}</div>
           </Flex>
@@ -113,10 +200,8 @@ const FormMatch = () => {
                 form={form}
                 colon={false}
                 layout="vertical"
+                onFieldsChange={onFieldsChange}
                 wrapperCol={{ offset: 1, span: 22 }}
-                onFinish={(re) => {
-                  console.log(re);
-                }}
               >
                 {FormRender(actionObjMetadata?.properties)}
               </Form>
@@ -125,7 +210,26 @@ const FormMatch = () => {
             <div className={styles.rightEmpty}>请先点击左侧表格控件</div>
           )}
         </div>
+        <div className={styles.rightCard}>
+          <Flex
+            justify="space-between"
+            align="center"
+            className={styles.titleWrapper}
+          >
+            <div className={styles.rightTitle}>生成表单浏览</div>
+          </Flex>
+          <div className={styles.formWrapper}>
+            <FormView />
+          </div>
+        </div>
       </div>
+      <Button
+        type="primary"
+        onClick={submit}
+        style={{ float: "right", width: 150, height: 50, marginTop: 16 }}
+      >
+        确定
+      </Button>
     </div>
   );
 };
diff --git a/src/pages/Setting/FormMatch/menu.tsx b/src/pages/Setting/FormMatch/menu.tsx
index cf6834ef15fb55eca2b12e26f1e0cbb4f3ed51d5..f0afdb8ae51e187dfa0538324c3724cc8f5fdc55 100644
--- a/src/pages/Setting/FormMatch/menu.tsx
+++ b/src/pages/Setting/FormMatch/menu.tsx
@@ -7,20 +7,32 @@ import { useFormContext } from "..";
 /**
  * tools
  */
-const Menu = () => {
-  const menuList = Components.meta;
+const Menu = (props: { groupId?: string; onClick?: () => void }) => {
+  let menuList = Components.meta;
   const { formConfigList, setFormConfigList } = useFormContext();
+  const { groupId, onClick } = props;
+
   const clickHandler = (params: FormComponentRegistryInfo) => {
     const key = params.componentType;
     if (key) {
       const componentConstruct = Components.get(
         key
       ) as typeof BaseFormComponent;
-
       const newItem = new componentConstruct();
+      if (groupId) {
+        newItem.setValues({
+          groupId,
+        });
+      }
       setFormConfigList([...formConfigList, newItem]);
     } else throw new Error("key is undefined");
+    if (onClick) onClick();
   };
+
+  if (groupId) {
+    menuList = menuList.filter((v) => v.componentType !== "Branch");
+  }
+
   return (
     <div className={styles.container}>
       {menuList.map((item, index) => {
diff --git a/src/pages/Setting/basic.module.css b/src/pages/Setting/basic.module.css
index 937ec2815437e6a3e9cd3d4fc1cf084d5c4c8c1a..e748c2c8daaf6b6ad27835beb1087746c558cf61 100644
--- a/src/pages/Setting/basic.module.css
+++ b/src/pages/Setting/basic.module.css
@@ -8,5 +8,8 @@
 
 .itemWrapper {
   width: 48.5%;
+}
+
+.formItem {
   margin-bottom: 24px !important;
 }
diff --git a/src/pages/Setting/basic.tsx b/src/pages/Setting/basic.tsx
index 743202b58d0e315d3e4aa53e49ba809c416a3f5b..b04e8fb793962e2d1e16bbf31631200aceae3dd0 100644
--- a/src/pages/Setting/basic.tsx
+++ b/src/pages/Setting/basic.tsx
@@ -1,179 +1,308 @@
-import type { FormConfig, OnlyProperties } from "@/customForm/interfaces";
+import type { OnlyProperties } from "@/customForm/interfaces";
 import styles from "./basic.module.css";
-import { Button, Form } from "antd";
+import { Button, Form, notification } from "antd";
 import RenderComponent from "../../components/FormComponentRender/renderComponent";
 import BaseFormComponent from "@/customForm/entity/base";
+import { buildListByGroupId, generateUUID } from "@/customForm/utils";
+import { submitBaseSetting } from "@/service/settingController";
 
-const Basic = () => {
-  const [form] = Form.useForm();
-
-  const formConfig: OnlyProperties<BaseFormComponent>[] = [
-    {
-      label: "事项名称",
-      componentType: "TextInput",
-      key: "v1",
-      group: "",
-      componentOption: {
-        placeholder: "输入事项名称",
-      },
+import { useFormContext } from ".";
+import { useEffect } from "react";
+import { useUpdateEffect } from "ahooks";
+const formConfig: OnlyProperties<BaseFormComponent>[] = [
+  {
+    label: "事项名称",
+    componentType: "TextInput",
+    key: "thingName",
+    groupId: "1",
+    validationRules: [],
+    componentOption: {
+      require: true,
+      placeholder: "输入事项名称",
     },
-    {
-      label: "实施机构",
-      componentType: "TextInput",
-      key: "v2",
-      group: "",
-      componentOption: {
-        placeholder: "输入机构名称",
-      },
-    },
-    {
-      label: "事项类型",
-      componentType: "Radio",
-      key: "v3",
-      group: "",
-      componentOption: {
-        option: [
-          {
-            label: "行政权力",
-            value: "行政权力",
-          },
-          {
-            label: "行政许可",
-            value: "行政许可",
-          },
-        ],
-      },
+  },
+
+  {
+    label: "实施机构",
+    componentType: "TextInput",
+    key: "implementingAgency",
+    groupId: "2",
+    validationRules: [],
+    componentOption: {
+      require: true,
+
+      placeholder: "输入机构名称",
     },
-    {
-      label: "实施主体性质",
-      componentType: "Select",
-      key: "v4",
-      group: "",
-      componentOption: {
-        options: [
-          {
-            label: "行政权力",
-            value: "行政权力",
-          },
-          {
-            label: "行政许可",
-            value: "行政许可",
-          },
-        ],
-        style: {
-          width: "100%",
+  },
+  {
+    label: "事项类型",
+    componentType: "Radio",
+    key: "thingType",
+    groupId: "1",
+    validationRules: [],
+
+    componentOption: {
+      require: true,
+
+      option: [
+        {
+          label: "行政备案",
+          value: 0,
         },
-      },
+        {
+          label: "行政许可",
+          value: 1,
+        },
+      ],
     },
-    {
-      label: "行使层级",
-      componentType: "Select",
-      key: "v5",
-      group: "",
-      componentOption: {
-        options: [
-          {
-            label: "行政权力",
-            value: "行政权力",
-          },
-          {
-            label: "行政许可",
-            value: "行政许可",
-          },
-        ],
-        style: {
-          width: "100%",
+  },
+  {
+    label: "实施主体性质",
+    componentType: "Select",
+    key: "agencyType",
+    groupId: "2",
+    validationRules: [],
+
+    componentOption: {
+      options: [
+        {
+          label: "自然人",
+          value: "自然人",
+        },
+        {
+          label: "企业",
+          value: "企业",
         },
+        {
+          label: "个体工商户",
+          value: "个体工商户",
+        },
+      ],
+      require: true,
+
+      style: {
+        width: "100%",
       },
     },
-    {
-      label: "法定办结时限",
-      componentType: "TextInput",
-      key: "v6",
-      group: "",
-      componentOption: {
-        placeholder: "输入日期",
-        type: "number",
-
-        suffix: "个工作日",
-        style: {
-          width: "100%",
+  },
+  {
+    label: "行使层级",
+    componentType: "Select",
+    key: "thingLevel",
+    groupId: "1",
+    validationRules: [],
+
+    componentOption: {
+      require: true,
+
+      options: [
+        {
+          label: "国家级",
+          value: "国家级",
+        },
+        {
+          label: "省级",
+          value: "省级",
         },
+        {
+          label: "市级",
+          value: "市级",
+        },
+        {
+          label: "区级",
+          value: "区级",
+        },
+      ],
+      style: {
+        width: "100%",
       },
     },
-    {
-      label: "权限划分",
-      componentType: "TextInput",
-      key: "v7",
-      group: "",
-      componentOption: {
-        placeholder: "输入事项名称",
+  },
+  {
+    label: "法定办结时限",
+    componentType: "TextInput",
+    key: "statutoryCompletionDeadline",
+    groupId: "2",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入日期",
+      type: "number",
+      require: true,
+
+      suffix: "个工作日",
+      style: {
+        width: "100%",
       },
     },
-    {
-      label: "承诺办结时限",
-      componentType: "TextInput",
-      key: "v8",
-      group: "",
-      componentOption: {
-        placeholder: "输入日期",
-        type: "number",
-        suffix: "个工作日",
-        style: {
-          width: "100%",
-        },
-      },
+  },
+  {
+    label: "权限划分",
+    componentType: "TextInput",
+    key: "authorityDivision",
+    groupId: "1",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入权限划分",
+      require: true,
     },
-    {
-      label: "设定依据",
-      componentType: "TextAreaInput",
-      key: "v9",
-      group: "",
-      componentOption: {
-        placeholder: "输入事项设定依据",
-        rows: 5,
+  },
+  {
+    label: "承诺办结时限",
+    componentType: "TextInput",
+    key: "promisedCompletionDeadline",
+    groupId: "2",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入日期",
+      type: "number",
+      suffix: "个工作日",
+      require: true,
+      style: {
+        width: "100%",
       },
     },
-    {
-      label: "特别程序",
-      componentType: "TextInput",
-      key: "v10",
-      group: "",
-      componentOption: {
-        placeholder: "无",
-      },
+  },
+  {
+    label: "设定依据",
+    componentType: "TextAreaInput",
+    key: "legalBasis",
+    groupId: "1",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入事项设定依据",
+      rows: 5,
+      require: true,
     },
-    {
-      label: "受理条件",
-      componentType: "TextAreaInput",
-      key: "v11",
-      group: "",
-      componentOption: {
-        placeholder: "输入受理条件",
-        rows: 3,
-      },
+  },
+  {
+    label: "特别程序",
+    componentType: "TextInput",
+    key: "specialProcedure",
+    validationRules: [],
+
+    groupId: "2",
+    componentOption: {
+      placeholder: "无",
+      require: true,
     },
-    {
-      label: "行使内容",
-      componentType: "TextAreaInput",
-      key: "v12",
-      group: "",
-      componentOption: {
-        placeholder: "输入内容",
-        rows: 5,
-      },
+  },
+  {
+    label: "受理条件",
+    componentType: "TextAreaInput",
+    key: "acceptanceCriteria",
+    groupId: "2",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入受理条件",
+      rows: 3,
+      require: true,
     },
-    {
-      label: "申请材料",
-      componentType: "TextAreaInput",
-      key: "v13",
-      group: "",
-      componentOption: {
-        placeholder: "输入内容",
-        rows: 5,
-      },
+  },
+  {
+    label: "行使内容",
+    componentType: "TextAreaInput",
+    key: "actionsTaken",
+    groupId: "1",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入内容",
+      rows: 5,
+      require: true,
     },
-  ];
+  },
+  {
+    label: "申请材料",
+    componentType: "TextAreaInput",
+    key: "applicationMaterials",
+    groupId: "2",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入内容",
+      rows: 5,
+      require: true,
+    },
+  },
+  {
+    label: "分组名称",
+    componentType: "TextInput",
+    key: "groupName",
+    groupId: "1",
+    validationRules: [],
+
+    componentOption: {
+      placeholder: "输入分组名称",
+      require: false,
+    },
+  },
+  {
+    label: "分组描述",
+    componentType: "TextAreaInput",
+    key: "groupDesc",
+    groupId: "2",
+    validationRules: [],
+    componentOption: {
+      placeholder: "输入内容",
+      rows: 5,
+      require: false,
+    },
+  },
+];
+
+const groupIdConfig = buildListByGroupId(formConfig as BaseFormComponent[]);
+
+const Basic = () => {
+  const [form] = Form.useForm();
+
+  const { baseInfo, setBaseInfo, mode, setActiveKey, setActiveTabs } =
+    useFormContext();
+
+  useEffect(() => {
+    if (mode === "add") {
+      const temp = {
+        matterCode: generateUUID(),
+        processId: generateUUID(),
+      };
+      setBaseInfo(temp);
+    }
+  }, []);
+
+  useUpdateEffect(() => {
+    form.setFieldsValue(baseInfo);
+  }, [baseInfo]);
+
+  const onFinish = (values: any) => {
+    const params = {
+      ...baseInfo,
+      ...values,
+      groupName: values.groupName ?? values.thingName,
+    };
+
+    submitBaseSetting(params).then((res) => {
+      if (res.code === 200) {
+        setBaseInfo({
+          ...params,
+          id: res.data,
+        });
+        if (mode === "add") {
+          setActiveTabs(["1", "2"]);
+          setActiveKey("2");
+        } else {
+          notification.success({
+            message: "修改成功",
+            duration: 1.5,
+          });
+        }
+      }
+    });
+  };
+
   return (
     <div className={styles.container}>
       <Form
@@ -183,28 +312,44 @@ const Basic = () => {
         style={{ maxWidth: "none" }}
         labelCol={{ span: 6 }}
         wrapperCol={{ span: 18 }}
-        onFinish={(re) => {
-          console.log(re);
-        }}
+        onFinish={onFinish}
+        initialValues={baseInfo}
+        requiredMark={false}
       >
-        {formConfig.map((formItem) => {
+        {groupIdConfig.map((groupIdItem) => {
           return (
-            <Form.Item
-              label={formItem.label}
-              name={formItem.key}
-              className={styles.itemWrapper}
-            >
-              <RenderComponent
-                config={formItem.componentOption}
-                componentType={formItem.componentType}
-              ></RenderComponent>
-            </Form.Item>
+            <div className={styles.itemWrapper}>
+              {groupIdItem.list.map((formItem) => {
+                return (
+                  <Form.Item
+                    label={formItem.label}
+                    name={formItem.key}
+                    className={styles.formItem}
+                    rules={[
+                      {
+                        required: formItem.componentOption?.require,
+                        message: `请填写${formItem?.label}`,
+                      },
+                    ]}
+                  >
+                    <RenderComponent
+                      config={formItem.componentOption}
+                      componentType={formItem.componentType}
+                    ></RenderComponent>
+                  </Form.Item>
+                );
+              })}
+            </div>
           );
         })}
       </Form>
       <div style={{ float: "right" }}>
-        <Button type="primary" style={{ width: 150, height: 50, fontSize: 18 }}>
-          保存
+        <Button
+          type="primary"
+          onClick={form.submit}
+          style={{ width: 150, height: 50, fontSize: 18 }}
+        >
+          {mode === "add" ? "下一步" : "保存"}
         </Button>
       </div>
     </div>
diff --git a/src/pages/Setting/index.tsx b/src/pages/Setting/index.tsx
index 2029c6ab776f4010280fb3cbc5376ad69a245db9..c57a316d5f66900f49b7d030bb52c9639b106475 100644
--- a/src/pages/Setting/index.tsx
+++ b/src/pages/Setting/index.tsx
@@ -6,21 +6,29 @@ import Basic from "./basic";
 import FormMatch from "./FormMatch";
 import Flow from "./Flow";
 import BaseFormComponent from "@/customForm/entity/base";
-import React from "react";
-import { OnlyProperties } from "@/customForm/interfaces";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
 import { FlowChartNode } from "./interface";
+import { Components } from "@/customForm/registry";
+import service from "@/service";
+
+import { buildFlowList, deserializeFlowChart } from "./util";
+
 interface FormSettingContextProps {
   /** 表单配置列表 */
   formConfigList: BaseFormComponent[];
   setFormConfigList: React.Dispatch<React.SetStateAction<BaseFormComponent[]>>;
   /** 基础信息 */
-  baseInfo: OnlyProperties<BaseFormComponent>[];
-  setBaseInfo: React.Dispatch<
-    React.SetStateAction<OnlyProperties<BaseFormComponent>[]>
-  >;
+  baseInfo?: Record<string, any>;
+  setBaseInfo: React.Dispatch<React.SetStateAction<Record<string, any>>>;
   /** 流程图数据 */
   flowData: FlowChartNode[];
   setFlowData: React.Dispatch<React.SetStateAction<FlowChartNode[]>>;
+  setActiveKey: any;
+  setActiveTabs: React.Dispatch<React.SetStateAction<string[]>>;
+  mode: "edit" | "add";
+  initialValue: any;
+  flowMetaData: any;
 }
 
 const FormSettingContext = React.createContext<FormSettingContextProps>(
@@ -30,42 +38,106 @@ const FormSettingContext = React.createContext<FormSettingContextProps>(
 export const useFormContext = () => {
   return React.useContext(FormSettingContext);
 };
-const Setting = () => {
+
+interface SettingProp {
+  visible: boolean;
+  onClose(): void;
+  mode: "add" | "edit";
+  initialValue?: any;
+}
+const Setting = (props: SettingProp) => {
+  const { visible, onClose, mode = "add", initialValue } = props;
   const [formConfigList, setFormConfigList] = React.useState<
     BaseFormComponent[]
   >([]);
-  const [baseInfo, setBaseInfo] = React.useState<
-    OnlyProperties<BaseFormComponent>[]
-  >([]);
+  const [activeTabs, setActiveTabs] = useState<string[]>(["1"]);
+  const [activeKey, setActiveKey] = useState<string>("1");
+
+  const [baseInfo, setBaseInfo] = React.useState<Record<string, any>>();
   /** 流程图数据 */
   const [flowData, setFlowData] = React.useState<FlowChartNode[]>([]);
-  const TABS = [
-    {
-      label: "基础设置",
-      key: "1",
-      children: <Basic></Basic>,
-    },
-    {
-      label: "申请内容",
-      key: "2",
-      children: <FormMatch></FormMatch>,
-    },
-    {
-      label: "审批流程",
-      key: "3",
-      children: <Flow></Flow>,
-    },
-  ];
+
+  const flowMetaData = useRef();
+  /** 反序列化 */
+  useEffect(() => {
+    if (initialValue && mode == "edit") {
+      setActiveTabs(["1", "2", "3"]);
+      const {
+        matterContentList,
+        updateAt,
+        createAt,
+        deleted,
+        flowProcessId,
+        ...baseFomValue
+      } = initialValue;
+
+      setBaseInfo(baseFomValue);
+
+      if (matterContentList) {
+        const newFormConfig = (matterContentList as any[])
+          .sort((pre, cur) => pre.sort - cur.sort)
+          .map((item: any) => {
+            console.log(item);
+            const componentType = item.componentType;
+
+            const component = Components.get(componentType);
+            //@ts-ignore
+            const newEntity = new component();
+            newEntity.setValues({
+              key: item.fieldKey,
+              label: item.label,
+              groupId: item.groupId,
+            });
+            newEntity.componentOption?.update(JSON.parse(item.otherSet));
+            return newEntity;
+          });
+        setFormConfigList(newFormConfig);
+      }
+      if (flowProcessId) {
+        service.settingService.getFlowChartConfig(flowProcessId).then((res) => {
+          if (res.code === 200) {
+            const flowChartConfig = { ...res.data };
+            const { elementParams, ...metaData } = flowChartConfig;
+            const originElementList = deserializeFlowChart(elementParams);
+            flowMetaData.current = metaData;
+            setFlowData(buildFlowList(originElementList));
+          }
+        });
+      }
+      // if()
+    }
+  }, [mode, initialValue]);
+  const TABS = useMemo(
+    () => [
+      {
+        label: "基础设置",
+        key: "1",
+        children: <Basic></Basic>,
+        disabled: !activeTabs.includes("1"),
+      },
+      {
+        label: "申请内容",
+        key: "2",
+        children: <FormMatch></FormMatch>,
+        disabled: !activeTabs.includes("2"),
+      },
+      {
+        label: "审批流程",
+        key: "3",
+        children: <Flow></Flow>,
+        disabled: !activeTabs.includes("3"),
+      },
+    ],
+    [activeTabs]
+  );
 
   return (
     <BasicModal
-      visible={true}
-      width={1399}
+      visible={visible}
+      width={1600}
       contentStyle={{ borderRadius: 10 }}
       height={1000}
-      onClose={function (): void {
-        throw new Error("Function not implemented.");
-      }}
+      onClose={onClose}
     >
       <div className={styles.container}>
         <div className={styles.header}>
@@ -80,6 +152,11 @@ const Setting = () => {
             setBaseInfo,
             flowData,
             setFlowData,
+            setActiveTabs,
+            mode,
+            initialValue,
+            flowMetaData,
+            setActiveKey,
           }}
         >
           <div className={styles.modalBody}>
@@ -92,7 +169,15 @@ const Setting = () => {
                 },
               }}
             >
-              <Tabs defaultActiveKey="1" type="card" items={TABS} />
+              <Tabs
+                type="card"
+                items={TABS}
+                activeKey={activeKey}
+                onTabClick={(key: string) => {
+                  // console.log(key);
+                  setActiveKey(key);
+                }}
+              />
             </ConfigProvider>
           </div>
         </FormSettingContext.Provider>
diff --git a/src/pages/Setting/interface.ts b/src/pages/Setting/interface.ts
index d54d2e14b7c153bf80cbb6abb782478c6c463670..7d843c568f63c6877ebeec92eb16820a2a4396dd 100644
--- a/src/pages/Setting/interface.ts
+++ b/src/pages/Setting/interface.ts
@@ -31,6 +31,14 @@ export interface UserNode extends BaseNode {
   approverType?: string;
   /** 人员列表 */
   approverList?: string;
+  /** 全部或者指定审查处理的表单key值 */
+  examineKeys?: "all" | string;
+  /** 申请的范围 */
+  scopeOfApplication?: string[] | string;
+  /** 正向操作逆向操作的名字 */
+  forwardAndReverseName?: string | string[];
+  /** 1 申请节点 2 办理节点 3 审批节点 4 结束节点 */
+  nodeType?: 1 | 2 | 3 | 4;
 }
 
 /** 流程图节点 */
diff --git a/src/pages/Setting/util.ts b/src/pages/Setting/util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..613d7ced4ede3dd8021b332f6327a58353ae075e
--- /dev/null
+++ b/src/pages/Setting/util.ts
@@ -0,0 +1,208 @@
+import { generateUUID } from "@/customForm/utils";
+
+//反编译保存的数据
+export function buildFlowList(data: any) {
+  return data.map((item: any) => {
+    if (item.elementId === "endEvent") {
+      return {
+        elementId: "endEvent",
+        elementName: "结束节点",
+        elementType: 4,
+        nodeType: 4,
+      };
+    }
+    if (item.nodeType.value === 1) {
+      return {
+        elementId: item.elementId,
+        elementName: item.elementName,
+        nodeType: 1,
+        /** 处理内容 */
+        examineKeys: item.examineKeys,
+        assigneeKey: "applicant",
+        elementType: 2,
+        scopeOfApplication: item.scopeOfApplication.split(","),
+        elementAlias: item.elementAlias,
+        signType: 3,
+      };
+    }
+    if (item.nodeType.value === 2) {
+      return {
+        elementId: item.elementId,
+        elementName: item.elementName,
+        approverList: item.approverList.split(","),
+        approverType: 1,
+        nodeType: 2,
+        /** 处理内容 */
+        examineKeys: item.examineKeys,
+        assigneeKey: "_approver_",
+        elementType: 2,
+        elementAlias: item.elementAlias,
+        signType: 3,
+      };
+    }
+    if (item.nodeType.value === 3) {
+      return {
+        elementId: item.elementId,
+        elementName: item.elementName,
+        approverList: item.approverList.split(","),
+        approverType: 1,
+        nodeType: 3,
+        /** 处理内容 */
+        examineKeys: item.examineKeys,
+        assigneeKey: "_approver_",
+        elementType: 2,
+        forwardAndReverseName: item.forwardAndReverseName.split(","),
+        elementAlias: item.elementAlias,
+        signType: 3,
+      };
+    }
+  });
+}
+
+/** 反编译流程图 */
+export function deserializeFlowChart(data: any[]) {
+  const lineMap = new Map();
+  data.forEach((item) => {
+    if (item.from) {
+      lineMap.set(item.from, item);
+    }
+  });
+  const nodeMap = new Map();
+  data.forEach((item) => {
+    nodeMap.set(item.elementId, item);
+  });
+  /** 找到开始节点 */
+  const startNode = data.find((item) => item.elementId === "startEvent");
+  const sortNodeList = [] as any[];
+  const findNextNode = (node: any) => {
+    const lineNode = lineMap.get(node.elementId);
+    if (lineNode) {
+      const to = lineNode.to;
+      const nextNode = nodeMap.get(to);
+      if (nextNode.elementType.value !== 3) {
+        sortNodeList.push(nextNode);
+      }
+      findNextNode(nextNode);
+    }
+  };
+  findNextNode(startNode);
+  return sortNodeList;
+}
+
+/** 构造线节点 */
+export function buildLineData(data: any) {
+  const lineData = data
+    .map((item: any, index: number) => {
+      const nextNode = data[index + 1];
+      if (nextNode) {
+        if (item.nodeType === 1) {
+          /** 处在申请节点时构造开始的以及下一步的连接线 */
+          return [
+            {
+              elementId: generateUUID(),
+              elementName: "连接线",
+              elementType: 3,
+              from: item.elementId,
+              to: data[index + 1].elementId,
+            },
+            {
+              elementId: generateUUID(),
+              elementName: "开始连接线",
+              elementType: 3,
+              from: "startEvent",
+              to: item.elementId,
+            },
+          ];
+        }
+        if (item.nodeType === 2) {
+          return {
+            elementId: generateUUID(),
+            elementName: "连接线",
+            elementType: 3,
+            from: item.elementId,
+            to: data[index + 1].elementId,
+          };
+        }
+        if (item.nodeType === 3) {
+          return [
+            {
+              approveResult: 2, //固定
+              conditionType: 2, //固定
+              elementId: generateUUID(), //随机生成
+              elementName: "同意连接线",
+              elementType: 3, //固定
+              from: item.elementId, //来源节点
+              to: nextNode.elementId, //目标节点
+            },
+            {
+              approveResult: 3, //固定
+              conditionType: 2, //固定
+              elementId: generateUUID(), //随机生成
+              elementName: "不同意连接线",
+              elementType: 3,
+              from: item.elementId, //来源节点
+              to: "endEvent", //目标节点
+            },
+          ];
+        }
+      }
+    })
+    .filter((v: any) => v)
+    .flat(1);
+
+  return lineData;
+}
+
+/** 新增节点 */
+export function getDefaultNodeByType(type?: 1 | 2 | 3 | 4) {
+  switch (type) {
+    case 1:
+      return {
+        elementId: generateUUID(),
+        elementName: "申请人",
+        nodeType: 1,
+        /** 处理内容 */
+        examineKeys: "all",
+        assigneeKey: "applicant",
+        elementType: 2,
+        scopeOfApplication: ["自然人"],
+        elementAlias: "申请人",
+        signType: 3,
+      };
+    case 2:
+      return {
+        elementId: generateUUID(),
+        elementName: "办理节点",
+        elementAlias: "办理节点",
+        approverList: [],
+        elementType: 2,
+        assigneeKey: "_approver_",
+        approverType: 1,
+        signType: 3,
+        examineKeys: "all",
+        nodeType: 2,
+      };
+
+    case 3:
+      return {
+        elementId: generateUUID(),
+        elementName: "审批节点",
+        elementAlias: "审批节点",
+        approverType: 1,
+        nodeType: 3,
+        signType: 3,
+        assigneeKey: "_approver_",
+        elementType: 2,
+        approverList: [],
+        forwardAndReverseName: ["同意", "驳回"],
+        examineKeys: "all",
+      };
+    default:
+      return {
+        elementId: "endEvent",
+        elementName: "结束节点",
+        elementType: 4,
+        nodeType: 4,
+      };
+  }
+}
diff --git a/src/pages/User/Main/index.module.css b/src/pages/User/Main/index.module.css
index ada388e6be9a39aeea6ef7e63bcb8b8e7c3f4414..0f72ccc455f415b1296c6d3b958bfac2563f6269 100644
--- a/src/pages/User/Main/index.module.css
+++ b/src/pages/User/Main/index.module.css
@@ -36,7 +36,7 @@
 
 .listItemWrapper {
   width: 1400px;
-  height: 261px;
+  /* height: 261px; */
   border-radius: 20px;
   background-color: rgba(255, 255, 255, 0.6);
   border: 1px solid #ffffff;
diff --git a/src/pages/User/Main/index.tsx b/src/pages/User/Main/index.tsx
index bf6aac93a5838f3d97082c6ec9da2e0766a64e9b..24c42cb91bf34a1f795fdf0c02025d2ecc644803 100644
--- a/src/pages/User/Main/index.tsx
+++ b/src/pages/User/Main/index.tsx
@@ -1,15 +1,15 @@
-import React, { createContext, useState } from "react";
+import React, { createContext, useEffect, useState } from "react";
 
 import ListItem from "./list-item";
-import Login from "../../Login";
+import Login from "../../Login/login";
 import SubExtend from "./subExtend";
 import styles from "./index.module.css";
 import SubmitApplication from "../SubmitApplication";
+import service from "@/service";
+import { buildTreeByGroupName } from "@/customForm/utils";
 
 interface ModalConfig {
   show: boolean;
-  /** @description 值等于subExtend时，弹出子节点弹窗，为apply时，弹出申请弹窗   */
-  showType?: "subExtend" | "apply";
   /** 原始数据 */
   metaData: any;
 }
@@ -17,6 +17,8 @@ interface ModalConfig {
 type ModalContextType = {
   modalOption: ModalConfig;
   setModalOption: React.Dispatch<React.SetStateAction<ModalConfig>>;
+  subExtendModalOption: ModalConfig;
+  setSubExtendModalOption: React.Dispatch<React.SetStateAction<ModalConfig>>;
 };
 const ModalContext = createContext<ModalContextType>({} as ModalContextType);
 
@@ -25,18 +27,34 @@ export function useModalConfigContext() {
 }
 
 const UserMain: React.FC = () => {
-  const demoLength = 10;
   /** 弹窗配置 */
   const [modalOption, setModalOption] = useState<ModalConfig>({
     show: false,
     metaData: {},
   });
+  const [subExtendModalOption, setSubExtendModalOption] = useState<ModalConfig>(
+    {
+      show: false,
+      metaData: {},
+    }
+  );
+  const [list, setList] = useState<Record<string, any>>({});
+
+  useEffect(() => {
+    service.applyService.getApplicationList().then((res) => {
+      if (res.code === 200) {
+        setList(buildTreeByGroupName(res.data.list));
+      }
+    });
+  }, []);
 
   return (
     <ModalContext.Provider
       value={{
         modalOption,
         setModalOption,
+        setSubExtendModalOption,
+        subExtendModalOption,
       }}
     >
       <div className={styles.container}>
@@ -46,8 +64,8 @@ const UserMain: React.FC = () => {
         <div className={styles.title}>审批通</div>
 
         <div className={styles.listContainer}>
-          {[...Array(demoLength)].map(() => (
-            <ListItem />
+          {Object.keys(list).map((item) => (
+            <ListItem data={list[item]} />
           ))}
         </div>
         <SubExtend></SubExtend>
diff --git a/src/pages/User/Main/list-item.tsx b/src/pages/User/Main/list-item.tsx
index 61daa0ff12ab54de3b7af67184e96441626abe1a..07d6a7110f08d9a784b906c722b50c6408c94ae1 100644
--- a/src/pages/User/Main/list-item.tsx
+++ b/src/pages/User/Main/list-item.tsx
@@ -1,34 +1,51 @@
-import { Button, Space } from "antd";
+import { Button, Space, message } from "antd";
 
 import ArrowTag from "@/components/ArrowTag";
 import React from "react";
 import icon1 from "@/assets/images/icon/icon1.png";
 import styles from "./index.module.css";
 import { useModalConfigContext } from ".";
+import useUserStore from "@/store/useUserStore";
 
-const ListItem: React.FC = () => {
-  const { modalOption, setModalOption } = useModalConfigContext();
+const ListItem: React.FC<{ data: any }> = ({ data }) => {
+  const { setModalOption, setSubExtendModalOption } = useModalConfigContext();
+  const { userInfo } = useUserStore();
+
+  const type = data?.child && data.child.length > 0 ? "group" : "item";
   /** 打开申请的弹窗 */
   const onApplyForClickHandler = () => {
-    setModalOption({
-      ...modalOption,
-      show: true,
-      showType: "subExtend",
-    });
+    if (userInfo?.id) {
+      if (type === "group") {
+        setSubExtendModalOption({
+          show: true,
+          metaData: data,
+        });
+        return;
+      }
+      setModalOption({
+        show: true,
+        metaData: data,
+      });
+    } else {
+      message.warning("请先登录");
+    }
   };
+
   return (
     <div className={styles.listItemWrapper}>
       <div className={styles.itemHeader}>
         <img src={icon1} alt="" style={{ width: 86, height: 86 }} />
         <div>
-          <div className={styles.itemTitle}>工程建设涉及城市绿地、树木审批</div>
+          <div className={styles.itemTitle}>
+            {type === "group" ? data?.groupName : data?.thingName}
+          </div>
           <Space>
             <ArrowTag
-              text="行政许可"
+              text={data?.thingType ? "行政许可" : "行政备案"}
               style={{ color: "rgba(0, 119, 255, 1)" }}
             ></ArrowTag>
             <ArrowTag
-              text="面向用户"
+              text={data?.implementingAgency}
               color="#FFE0B7"
               style={{
                 color: "rgba(255, 128, 3, 1)",
@@ -38,29 +55,23 @@ const ListItem: React.FC = () => {
               color="#D2D7E8"
               style={{ color: "rgba(109, 114, 132, 1)" }}
             >
-              办理时长：<span style={{ color: "red" }}>2&nbsp;</span>个工作日
+              办理时长：
+              <span style={{ color: "red" }}>
+                {data?.promisedCompletionDeadline}&nbsp;
+              </span>
+              个工作日
             </ArrowTag>
           </Space>
         </div>
 
         <Space align="start">
-          <Button
-            style={{
-              backgroundColor: "#DCE6FF",
-              border: "1px solid #2E6CFF",
-              color: "rgba(46, 108, 255, 1)",
-            }}
-          >
-            办事指南
-          </Button>
           <Button type="primary" onClick={onApplyForClickHandler}>
             立即申请
           </Button>
         </Space>
       </div>
       <div className={styles.text}>
-        《城市市容和环境卫生管理条例》（国务院令第 101
-        号）第十四条：任何单位和个人都不得在街道两侧和公共场地堆放物料，搭建建筑物、构筑物或者其他设施。因建设等特殊需要，在街道两侧和公共场地临时堆放物料，搭建非永久性建筑物、构筑物或者其他设施的，必须征得城市人民政府市容环境卫生行政主管部门同意后，按照有关规定办理审批手续。
+        {type === "group" ? data?.groupDesc : data?.legalBasis}
       </div>
     </div>
   );
diff --git a/src/pages/User/Main/subExtend.tsx b/src/pages/User/Main/subExtend.tsx
index 5410f507e73651e384e7556cf48c2427149b5a79..773ae85b9a5f17ca886d33bad2eee8201bf2c5be 100644
--- a/src/pages/User/Main/subExtend.tsx
+++ b/src/pages/User/Main/subExtend.tsx
@@ -7,20 +7,27 @@ import styles from "./subExtend.module.css";
 import { useModalConfigContext } from ".";
 
 const SubExtend = () => {
-  const { modalOption, setModalOption } = useModalConfigContext();
+  const { subExtendModalOption, setModalOption } = useModalConfigContext();
 
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
-    if (modalOption.show && modalOption.showType === "subExtend") {
+    if (subExtendModalOption.show) {
       setVisible(true);
     }
-  }, [modalOption]);
+  }, [subExtendModalOption]);
 
   const closeHandler = () => {
     setVisible(false);
     setModalOption({ show: false, metaData: {} });
   };
+
+  const openSubmit = (data: any) => {
+    setModalOption({
+      show: true,
+      metaData: data,
+    });
+  };
   return (
     <BasicModal
       visible={visible}
@@ -35,36 +42,32 @@ const SubExtend = () => {
           <Flex align="center" gap={8}>
             <img src={icon1} alt="" style={{ width: 86, height: 86 }} />
             <div className={styles.itemTitle}>
-              工程建设涉及城市绿地、树木审批
+              {subExtendModalOption?.metaData.groupName}
             </div>
           </Flex>
         </div>
         <div className={styles.descCard}>
-          《城市市容和环境卫生管理条例》（国务院令第 101
-          号）第十四条：任何单位和个人都不得在街道两侧和公共场地堆放物料，搭建建筑物、构筑物或者其他设施。因建设等特殊需要，在街道两侧和公共场地临时堆放物料，搭建非永久性建筑物、构筑物或者其他设施的，必须征得城市人民政府市容环境卫生行政主管部门同意后，按照有关规定办理审批手续。《成都市市容和环境卫生管理条例》（2018
-          年 9 月 30
-          日四川省第十三届人民代表大会常务委员会第六次会议批准）第二十三条
-          除因公共利益等特殊需要并报经所在地区（市）县城市管理部门批准（影响交通安全的，还应当征得公安交通管理部门同意）的外，任何单位和个人不得擅自占用城市道路、广场、桥梁、下穿通（隧）道、街道游园及其他公共场地从事下列活动：（一）设置市场、摊点；（二）作业、搭建设施，堆（摆）放物品；（三）开展经营、宣传等活动。禁止占用城市道路开展棋牌等娱乐活动。《成都市市政工程设施管理条例》（2020
-          年 3 月 31
-          日四川省第十三届人民代表大会常务委员会第十七次会议批准）第二十一条：因特殊情况需要临时占用城市道路的，应当经市政工程设施主管部门和公安机关批准，方可按照规定占用，并按照规定缴纳城市道路占用费。
+          {subExtendModalOption?.metaData.groupDesc ?? "无"}
         </div>
         <div className={styles.menuWrapper}>
-          <div className={styles.menuCard}>
-            <Flex align="center" gap={8}>
-              <img src={icon1} alt="" style={{ width: 70, height: 70 }} />
-              <div className={styles.menuTitle}>经营、宣传活动占道</div>
-            </Flex>
-            <div className={styles.text}>
-              《城市市容和环境卫生管理条例》（国务院令第 101
-              号）第十四条：任何单位和个人都不得在街道两侧和公共场地堆放物料，搭建建筑物、构筑物或者其他设施。
-            </div>
-            <Button type="primary" size="large">
-              立即申请
-            </Button>
-          </div>
-          <div className={styles.menuCard}></div>
-
-          <div className={styles.menuCard}></div>
+          {subExtendModalOption?.metaData.child?.map((item: any) => {
+            return (
+              <div className={styles.menuCard} key={item.id}>
+                <Flex align="center" gap={8}>
+                  <img src={icon1} alt="" style={{ width: 70, height: 70 }} />
+                  <div className={styles.menuTitle}>{item.thingName}</div>
+                </Flex>
+                <div className={styles.text}>{item.legalBasis}</div>
+                <Button
+                  type="primary"
+                  size="large"
+                  onClick={openSubmit.bind(this, item)}
+                >
+                  立即申请
+                </Button>
+              </div>
+            );
+          })}
         </div>
       </div>
     </BasicModal>
diff --git a/src/pages/User/ReviewProcess/index.tsx b/src/pages/User/ReviewProcess/index.tsx
index 075a7a5706789ed7860f7e39ab668ebe0217b8cd..113ec8051dfca503190f87fcc04af1475a9842a5 100644
--- a/src/pages/User/ReviewProcess/index.tsx
+++ b/src/pages/User/ReviewProcess/index.tsx
@@ -7,23 +7,61 @@ import { useNavigate } from "react-router-dom";
 import ApplicationMaterial from "../../ApplicationMaterial";
 
 import { useBoolean } from "ahooks";
+import { useEffect, useState } from "react";
+import useUserStore from "@/store/useUserStore";
+import service from "@/service";
 const ReviewProcess = () => {
   const navigate = useNavigate();
 
   const [showDetail, { setFalse, setTrue }] = useBoolean(false);
+  const [progressRecord, setProgressRecord] = useState<any[]>();
+  const { userInfo } = useUserStore();
+  const [actionObj, setActionObj] = useState<any>();
+
+  useEffect(() => {
+    const mobile = userInfo?.mobile;
+
+    if (mobile) {
+      service.applyService
+        .getExamineProgress({
+          pageNum: 1,
+          pageSize: 100,
+          loginName: mobile,
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            setProgressRecord(res.data.list);
+          }
+        });
+    }
+  }, [userInfo]);
+
+  const clickDetail = (params: any) => {
+    const actionObj = {
+      examineKeys: "all",
+      thingId: params.thingId,
+      id: params.id,
+      metaData: params,
+      type: "check",
+    };
+    setActionObj(actionObj);
+    setTrue();
+  };
 
   return (
     <div className={styles.container}>
       <ApplicationMaterial
         visible={showDetail}
         onClose={setFalse}
+        mode="check"
+        actionObj={actionObj}
       ></ApplicationMaterial>
       <div className={styles.contentWrapper}>
         <div className={styles.header}>
           <Space
             className={styles.backBtn}
             onClick={() =>
-              navigate("/", {
+              navigate("/apply", {
                 replace: true,
               })
             }
@@ -37,63 +75,15 @@ const ReviewProcess = () => {
             <img src={applyIcon} alt="" style={{ width: 70, height: 70 }}></img>
             <div className={styles.title}>我的申请</div>
           </Space>
-
-          <ProgressItem
-            onClick={setTrue}
-            progressData={[
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-            ]}
-          ></ProgressItem>
-          <ProgressItem
-            onClick={setTrue}
-            progressData={[
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 1,
-                remark: "备注：经专业人员核查物证不符合标准，不通过",
-              },
-            ]}
-          ></ProgressItem>
-          <ProgressItem
-            onClick={setTrue}
-            progressData={[
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-              {
-                createTime: "2024.06.05 10:00:00",
-                status: 2,
-              },
-            ]}
-          ></ProgressItem>
+          {progressRecord?.map((v, i) => {
+            return (
+              <ProgressItem
+                onClick={clickDetail.bind(this, v)}
+                progressData={v}
+                key={v.id}
+              ></ProgressItem>
+            );
+          })}
         </div>
       </div>
     </div>
diff --git a/src/pages/User/ReviewProcess/progress-item.module.css b/src/pages/User/ReviewProcess/progress-item.module.css
index bcf14b3dd4303ba2d9e3b4e1be0e2771d30dd9b5..b44bd1df5cadcf397114a7f2dd590fab1290953f 100644
--- a/src/pages/User/ReviewProcess/progress-item.module.css
+++ b/src/pages/User/ReviewProcess/progress-item.module.css
@@ -26,54 +26,71 @@
 }
 
 .progressCardItem {
-  width: calc(20% + (192px / 5));
+  width: 294px;
   height: 88px;
   display: flex;
-  padding-left: 40px;
-  flex-grow: 1;
+
+  flex-grow: 0;
   flex-shrink: 0;
+  gap: 12px;
   flex-basis: auto;
   background-size: 100% 100%;
   box-sizing: border-box;
   align-items: center;
+  justify-content: center;
 }
 
 .progressBar {
   margin-top: 24px;
   display: flex;
   position: relative;
+  overflow-x: auto;
 
   > div {
     position: relative;
   }
+}
 
-  > :nth-child(1) {
-    z-index: 25;
-  }
-
-  > :nth-child(2) {
-    z-index: 20;
-    left: -48px;
-  }
+.remark {
+  font-size: 16px;
+  color: rgba(255, 62, 80, 1);
+  margin-top: 12px;
+}
 
-  > :nth-child(3) {
-    z-index: 15;
-    left: -96px;
-  }
+.curActive {
+  background-image: url("@/assets/images/applyRecord/curStatus.png");
+  color: #fff;
+}
 
-  > :nth-child(4) {
-    z-index: 10;
-    left: -144px;
-  }
+.passStatus {
+  background-image: url("@/assets/images/applyRecord/passStatus.png");
+  color: rgba(46, 108, 255, 1);
+}
 
-  > :nth-child(5) {
-    z-index: 5;
-    left: -192px;
-  }
+.unPassStatus {
+  background-image: url("@/assets/images/applyRecord/unPassStatus.png");
+  color: rgba(89, 101, 118, 1);
 }
 
-.remark {
+.nodeTitle {
+  font-family: Adobe Heiti Std;
+
+  font-weight: bold;
+  /* 受理 */
   font-size: 16px;
-  color: rgba(255, 62, 80, 1);
-  margin-top: 12px;
+}
+
+.okIcon {
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: #2e6cff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fail {
+  background-image: url("@/assets/images/applyRecord/jujue.png");
+  color: #fff;
 }
diff --git a/src/pages/User/ReviewProcess/progress-item.tsx b/src/pages/User/ReviewProcess/progress-item.tsx
index 0ab4fb606d5636d942b5288f097710ff5f0a5dd4..05a09e6feef7afb6f8b95374e9b86ddb5aeceed7 100644
--- a/src/pages/User/ReviewProcess/progress-item.tsx
+++ b/src/pages/User/ReviewProcess/progress-item.tsx
@@ -2,92 +2,69 @@ import { Button, Flex, Space } from "antd";
 
 import icon1 from "@/assets/images/applyRecord/shengpi.png";
 import styles from "./progress-item.module.css";
-import passStatus from "@/assets/images/applyRecord/passStatus.png";
-import failStatus from "@/assets/images/applyRecord/jujue.png";
-import unPassStatus from "@/assets/images/applyRecord/unPassStatus.png";
-import curStatus from "@/assets/images/applyRecord/curStatus.png";
-import shenqing from "@/assets/images/applyRecord/shenqing.png";
-import shenqingA from "@/assets/images/applyRecord/shenqing_a.png";
 
-const statusMapping = [unPassStatus, passStatus, curStatus, failStatus];
-
-const flowConfig = [
-  {
-    name: "申请",
-    icon: shenqing,
-    iconActive: shenqingA,
-  },
-  {
-    name: "受理",
-    icon: shenqing,
-    iconActive: shenqingA,
-  },
-  {
-    name: "审查",
-    icon: shenqing,
-    iconActive: shenqingA,
-  },
-  {
-    name: "物证",
-    icon: shenqing,
-    iconActive: shenqingA,
-  },
-  {
-    name: "通过",
-    icon: shenqing,
-    iconActive: shenqingA,
-  },
-];
+import {
+  CheckOutlined,
+  HourglassOutlined,
+  SnippetsOutlined,
+  StopOutlined,
+} from "@ant-design/icons";
+import classNames from "classnames";
 
 interface ProgressItemProps {
-  progressData: Array<{
-    /** 该条记录完成时间 */
-    createTime: string;
-    /** 1未通过，2已通过 */
-    status: 1 | 2;
-    /** 审核意见 */
-    remark?: string;
-  }>;
-
+  progressData: any;
   onClick: () => void;
 }
 
 const ProgressItem: React.FC<ProgressItemProps> = (props) => {
-  const { progressData = [], onClick } = props;
-
-  const getImg = (index: number) => {
-    const length = progressData.length;
+  const { progressData = {}, onClick } = props;
+  const approveHistories = progressData?.approveHistories ?? [];
 
-    if (index < length - 1) {
-      return statusMapping[1];
+  // const failMessage = progressData.find((v) => v?.status === 1)?.remark;
+  const getCurClass = (params: any) => {
+    if (params.approveStatus !== undefined && !params.approveStatus) {
+      return styles.fail;
     }
-    if (index === length - 1) {
-      if (progressData[index]?.status === 1) {
-        return statusMapping[3];
-      }
-      return statusMapping[1];
+    if (params.current) {
+      return styles.curActive;
     }
-
-    if (index === length) {
-      if (progressData[index - 1]?.status === 1) {
-        return statusMapping[0];
-      } else return statusMapping[2];
+    if (params.approveTime) {
+      return styles.passStatus;
     }
-
-    return statusMapping[0];
+    return styles.unPassStatus;
   };
 
-  const failMessage = progressData.find((v) => v?.status === 1)?.remark;
+  const getCurIcon = (params: any) => {
+    if (params.approveStatus !== undefined && !params.approveStatus) {
+      return <StopOutlined style={{ fontSize: 18 }} />;
+    }
+    if (params.current) {
+      return <HourglassOutlined style={{ fontSize: 18 }} />;
+    }
+    if (params.approveTime) {
+      return (
+        <div className={styles.okIcon}>
+          <CheckOutlined style={{ color: "#fff" }} />
+        </div>
+      );
+    }
+    return <SnippetsOutlined style={{ fontSize: 18 }} />;
+  };
 
+  const failMessage = approveHistories.find((item: any) => {
+    return item?.approveStatus !== undefined && !item?.approveStatus;
+  })?.approveComment;
   return (
     <div className={styles.container}>
       <Flex align="center" justify="space-between">
         <Flex gap={12}>
           <div className={styles.tag}>
             <img alt="" src={icon1} style={{ width: 15, height: 15 }}></img>
-            <div>审批中</div>
+            <div>{progressData?.caseStatus.name}</div>
+          </div>
+          <div className={styles.title}>
+            {progressData.createAt}申请的{progressData?.name}
           </div>
-          <div className={styles.title}>2024年6月6日申请的占道审批</div>
         </Flex>
         <Button type="primary" shape="round" onClick={onClick}>
           查看
@@ -95,27 +72,24 @@ const ProgressItem: React.FC<ProgressItemProps> = (props) => {
       </Flex>
 
       <div className={styles.progressBar}>
-        {flowConfig.map((item, i) => {
+        {approveHistories.map((item: any, i: number) => {
           return (
             <div
-              className={styles.progressCardItem}
-              style={{ backgroundImage: `url(${getImg(i)})` }}
+              key={item.nodeCode}
+              className={classNames(styles.progressCardItem, getCurClass(item))}
+              style={{ zIndex: 100 - i, transform: `translateX(${-48 * i}px)` }}
             >
-              <img
-                src={item.icon}
-                alt=""
-                style={{ width: 14, height: 14 }}
-              ></img>
+              {getCurIcon(item)}
               <div>
-                <div>{item.name}</div>
-                <div>{progressData[i]?.createTime}</div>
+                <div className={styles.nodeTitle}>{item.nodeName}</div>
+                <div>{item?.approveTime}</div>
               </div>
             </div>
           );
         })}
       </div>
 
-      {failMessage && <div className={styles.remark}>{failMessage}</div>}
+      {failMessage && <div className={styles.remark}>备注：{failMessage}</div>}
     </div>
   );
 };
diff --git a/src/pages/User/SubmitApplication/index.tsx b/src/pages/User/SubmitApplication/index.tsx
index 117cc50c111f78fd5d7afd408c60d9f29b9c54aa..411bc30543233b6da66769b2dada7ed120553f25 100644
--- a/src/pages/User/SubmitApplication/index.tsx
+++ b/src/pages/User/SubmitApplication/index.tsx
@@ -1,107 +1,183 @@
 import BasicModal from "@/components/BasicModal";
 import styles from "./index.module.css";
 import applyIcon from "@/assets/images/form/apply.png";
-import { Button, Form } from "antd";
+import { Button, Form, message } from "antd";
 import GroupCard from "./components/groupCard";
-import { buildListByGroup } from "@/customForm/utils";
+import {
+  buildListByGroupId,
+  inversionSerializationRule,
+} from "@/customForm/utils";
 import RenderComponent from "../../../components/FormComponentRender/renderComponent";
 import BaseFormComponent from "@/customForm/entity/base";
 import { OnlyProperties } from "@/customForm/interfaces";
-
-const config: OnlyProperties<BaseFormComponent>[] = [
-  {
-    group: "group1",
-    label: "title1",
-    componentType: "TextInput",
-    key: "title1",
-    componentOption: {
-      placeholder: "请输入",
-      require: true,
-    },
-    validationRules: [],
-  },
-  {
-    group: "",
-    label: "title12",
-    componentType: "TextAreaInput",
-    key: "title12",
-    componentOption: {
-      placeholder: "请输入",
-      require: true,
-    },
-  },
-  {
-    group: "",
-    label: "title2",
-    componentType: "Radio",
-    key: "title2",
-    componentOption: {
-      option: [{ label: "墙面式", value: "墙面式" }],
-      require: true,
-    },
-  },
-  {
-    group: "",
-    label: "title12323",
-    componentType: "DatePicker",
-    key: "title215215",
-    componentOption: {
-      //   option: [{ label: "墙面式", value: "墙面式" }],
-    },
-  },
-  {
-    group: "测试",
-    label: "titlasdsae12323",
-    componentType: "Select",
-    key: "titlasdsae12323",
-    componentOption: {
-      options: [{ label: "墙面式", value: "墙面式" }],
-    },
-  },
-  {
-    group: "测试",
-    label: "fsakgjska",
-    componentType: "FileUpload",
-    key: "fsasajgksa",
-    componentOption: {
-      //   options: [{ label: "墙面式", value: "墙面式" }],
-    },
-  },
-  {
-    group: "测试",
-    label: "fsakgjskasgnkasg",
-    componentType: "ImgUpload",
-    key: "fsasajgksajgkjasjg",
-    componentOption: {
-      //   options: [{ label: "墙面式", value: "墙面式" }],
-    },
-  },
-];
+import { useEffect, useMemo, useState } from "react";
+import { useModalConfigContext } from "../Main";
+import service from "@/service";
+import useUserStore from "@/store/useUserStore";
 
 const SubmitApplication = () => {
   const [form] = Form.useForm();
+  const { modalOption, setModalOption } = useModalConfigContext();
+  const [visible, setVisible] = useState(false);
+  const [dataSource, setDataSource] = useState<any>({});
+  const { userInfo } = useUserStore();
+  const [applicationConfig, setApplicationConfig] = useState<any>();
+  const config = useMemo(() => {
+    const matterContentList = dataSource?.matterContentList;
+    let groupList = [] as any;
+    let configList = [] as any;
+    if (matterContentList && applicationConfig?.examineKeys) {
+      let temp = matterContentList
+        .sort((pre: any, cur: any) => pre.sort - cur.sort)
+        .map((item: any) => {
+          return {
+            ...item,
+            componentOption: item.otherSet ? JSON.parse(item.otherSet) : {},
+            key: item.fieldKey,
+            validationRules: inversionSerializationRule(item.validationRules),
+          };
+        });
+      /** 过滤需要处理的内容 */
+      if (applicationConfig?.examineKeys !== "all") {
+        const keys = applicationConfig?.examineKeys?.split(",") ?? [];
+        temp = temp.filter((item: any) => keys.includes(item.fieldKey));
+      }
+      temp.forEach((item: OnlyProperties<BaseFormComponent>) => {
+        if (item.componentType === "Branch") {
+          groupList.push(item);
+        } else {
+          configList.push(item);
+        }
+      });
+      return {
+        groupList: groupList,
+        configList: buildListByGroupId(configList),
+      };
+    }
+    return {
+      groupList: [],
+      configList: [],
+    };
+  }, [dataSource, applicationConfig]);
+
+  const getGroupName = (key: string) => {
+    return config.groupList.find((v: any) => v.key === key)?.label ?? "";
+  };
 
-  const newConfig = buildListByGroup(config as BaseFormComponent[]);
+  useEffect(() => {
+    if (modalOption.show) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [modalOption]);
+
+  useEffect(() => {
+    const id = modalOption.metaData?.id;
+    if (id) {
+      service.settingService.getTemplateConfig(id).then((res) => {
+        if (res.code === 200) {
+          setDataSource(res.data);
+          service.applyService
+            .getApplicationNodeConfig(res.data.flowProcessId)
+            .then((res1) => {
+              if (res1.code === 200) {
+                setApplicationConfig(res1.data);
+              }
+            });
+        }
+      });
+    }
+  }, [modalOption.metaData]);
 
   const onSubmit = () => {
-    console.log(form);
     form.submit();
   };
 
+  const closeHandler = () => {
+    setVisible(false);
+    setModalOption({ show: false, metaData: {} });
+  };
+  const onFinish = async (data: any) => {
+    const metaData = {
+      thingId: modalOption.metaData.id,
+      name: modalOption.metaData.thingName,
+      loginName: userInfo.username,
+      applicantType: "自然人",
+      remake: "",
+    };
+    let forms = [];
+    const matterContentList = dataSource?.matterContentList;
+
+    for (const key in data) {
+      const itemConfig = matterContentList.find((v: any) => v.fieldKey === key);
+      if (itemConfig) {
+        forms.push({
+          reportName: userInfo.mobile,
+          contentId: key,
+          content: data[key],
+          downFlag:
+            itemConfig.componentType === "FileUpload" ||
+            itemConfig.componentType === "ImgUpload"
+              ? true
+              : false,
+        });
+      }
+    }
+    try {
+      const { data: formId, code } = await service.applyService.saveApplyItem({
+        ...metaData,
+        reportContents: forms,
+      });
+      if (code !== 200) {
+        throw new Error();
+      }
+      const params = new FormData();
+      params.append("businessId", formId);
+      params.append("applicant", userInfo.id);
+      params.append("processId", modalOption.metaData.processId);
+
+      const { data: taskId, code: code2 } =
+        await service.applyService.startExamine(params);
+      if (code2 !== 200) {
+        throw new Error();
+      }
+
+      const params2 = new FormData();
+      params2.append("taskId", taskId);
+      params2.append("user", userInfo.id);
+      params2.append("approveComment", "已发起");
+
+      const { code: code3 } = await service.applyService.completeNoAuthExamine(
+        params2
+      );
+      if (code3 !== 200) {
+        throw new Error();
+      }
+
+      message.success("提交成功");
+      setModalOption({
+        show: false,
+        metaData: {},
+      });
+    } catch {
+      message.error("提交失败");
+    }
+  };
   return (
     <BasicModal
-      visible={true}
+      visible={visible}
       width={1056}
       height={792}
-      onClose={function (): void {
-        throw new Error("Function not implemented.");
-      }}
+      onClose={closeHandler}
       contentStyle={{ borderRadius: 10 }}
     >
       <div className={styles.container}>
         <div className={styles.header}>
           <img src={applyIcon} style={{ width: 46, height: 46 }} alt=""></img>
-          <div className={styles.headerTitle}>申请·装修备案</div>
+          <div className={styles.headerTitle}>
+            申请·{modalOption.metaData.thingName}
+          </div>
         </div>
         <div className={styles.modalBody}>
           <div className={styles.cardWrapper}>
@@ -110,16 +186,24 @@ const SubmitApplication = () => {
               colon={false}
               labelCol={{ span: 4 }}
               wrapperCol={{ span: 14 }}
-              onFinish={(re) => {
-                console.log(re);
-              }}
+              onFinish={onFinish}
             >
-              {newConfig.map((item) => {
+              {config.configList.map((item: any) => {
                 return (
-                  <GroupCard title={item.title}>
-                    {item.list.map((formItem) => {
+                  <GroupCard title={getGroupName(item.title)}>
+                    {item.list.map((formItem: any) => {
                       return (
-                        <Form.Item label={formItem.label} name={formItem.key}>
+                        <Form.Item
+                          label={formItem.label}
+                          name={formItem.key}
+                          rules={[
+                            {
+                              required: formItem.componentOption?.require,
+                              message: `请填写${formItem?.label}`,
+                            },
+                            ...formItem.validationRules,
+                          ]}
+                        >
                           <RenderComponent
                             config={formItem.componentOption}
                             componentType={formItem.componentType}
diff --git a/src/router/index.tsx b/src/router/index.tsx
index ac8e06287c486817e5dd4daa0215c0af39752982..6a2bd8fd4f9851f0e087ee41bf5bed2cc530a472 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -3,23 +3,32 @@ import UserMain from "../pages/User/Main";
 import { createBrowserRouter } from "react-router-dom";
 import ManagementMain from "@/pages/Management/Main";
 import PendingReviewList from "@/pages/Management/PendingReviewList";
+import Root from "./root";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <UserMain />,
-  },
-  {
-    path: "/apply-record",
-    element: <ReviewProcess />,
-  },
-  {
-    path: "/management",
-    element: <ManagementMain />,
-  },
-  {
-    path: "/management/pending-review",
-    element: <PendingReviewList />,
+    element: <Root></Root>,
+
+    children: [
+      {
+        path: "/apply",
+
+        element: <UserMain />,
+      },
+      {
+        path: "/apply-record",
+        element: <ReviewProcess />,
+      },
+      {
+        path: "/management",
+        element: <ManagementMain />,
+      },
+      {
+        path: "/management/:thingId",
+        element: <PendingReviewList />,
+      },
+    ],
   },
 ]);
 
diff --git a/src/router/root.tsx b/src/router/root.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec359c80affb1fb67c48f761f0f131b30a124ba5
--- /dev/null
+++ b/src/router/root.tsx
@@ -0,0 +1,39 @@
+import service from "@/service";
+import useUserStore from "@/store/useUserStore";
+import autofit from "autofit.js";
+import { useEffect } from "react";
+import { Navigate, Outlet } from "react-router-dom";
+
+const Root = () => {
+  autofit.init({
+    dh: 1080,
+    dw: 1920,
+    el: "body",
+    resize: true,
+  });
+  const { updateAdminInfo, adminInfo, updateUserInfo } = useUserStore();
+
+  const adminToken = localStorage.getItem("admin_token");
+
+  /** 获取用户信息 */
+  useEffect(() => {
+    if (!adminInfo && adminToken && location.pathname.includes("management")) {
+      service.loginService.getUserInfo().then((res) => {
+        if (res.code === 200) {
+          updateAdminInfo(res.data);
+        }
+      });
+    }
+    const applyUserInfo = localStorage.getItem("applyUserInfo") as string;
+    updateUserInfo(JSON.parse(applyUserInfo));
+  }, []);
+
+  return (
+    <>
+      {location.pathname === "/" && <Navigate replace to="/apply" />}
+      <Outlet></Outlet>
+    </>
+  );
+};
+
+export default Root;
diff --git a/src/service/applyController.ts b/src/service/applyController.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95a406f9ec8b118cf5c9fbc09076b017e59876ff
--- /dev/null
+++ b/src/service/applyController.ts
@@ -0,0 +1,47 @@
+import request from "./core/request";
+
+export function getApplicationList() {
+  return request.post("/hncy/matterInfo/listByUser");
+}
+
+export function saveApplyItem(data: any) {
+  return request.post("/hncy/record/createApplicantRecord", {
+    data: data,
+  });
+}
+
+export function startExamine(data: any) {
+  return request.post("/hncy/flow/start", {
+    data,
+  });
+}
+
+export function completeExamine(data: any) {
+  return request.post("/hncy/flow/complete", {
+    data,
+  });
+}
+
+export function completeNoAuthExamine(data: any) {
+  return request.post("/hncy/flow/complete-no-auth", {
+    data,
+  });
+}
+
+export function getExamineProgress(data: any) {
+  return request.post("/hncy/record/listByClientUser", {
+    params: data,
+  });
+}
+
+export function getApplicationFormDetail(data: any) {
+  return request.post("/hncy/record/getUserClientDetails", {
+    params: { id: data },
+  });
+}
+
+export function getApplicationNodeConfig(data: any) {
+  return request.get("/hncy/flow/apply-element-info", {
+    params: { id: data },
+  });
+}
diff --git a/src/service/commonController.ts b/src/service/commonController.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4445a9ad71fbc556405ea85096c4841906e26d9e
--- /dev/null
+++ b/src/service/commonController.ts
@@ -0,0 +1,25 @@
+import { RespListResult } from "./core/interface";
+import request from "./core/request";
+
+/** 上传文件 */
+export function upload(formData: FormData) {
+  return request.post("/oss/upload", {
+    params: {
+      bucketName: "cgtf",
+    },
+    body: formData,
+    requestType: "form",
+  });
+}
+
+/** 获取全部用户 */
+export function getAllUser() {
+  return request.post<RespListResult<API.StaffInfo>>(
+    "/hncy/others/queryAllUser",
+    {
+      params: {
+        allFlag: true,
+      },
+    }
+  );
+}
diff --git a/src/service/core/request.ts b/src/service/core/request.ts
index 50b066009eeb5f6b446bf527b93c868964fad82f..9d6cd02454d0032d0f968fefa2abd86a93a7dd37 100644
--- a/src/service/core/request.ts
+++ b/src/service/core/request.ts
@@ -1,17 +1,19 @@
-import { message } from "antd";
+import { message, notification } from "antd";
 import { ResponseError, extend } from "umi-request";
 const errorHandler = function (error: ResponseError<any>) {
   const codeMap = {
-    "021": "发生错误啦",
-    "022": "发生大大大大错误啦",
+    500: "服务器发生错误",
     // ....
-  };
+  } as Record<number, string>;
   if (error.response) {
     // 请求已发送但服务端返回状态码非 2xx 的响应
-    console.log(error.response.status);
-    console.log(error.response.headers);
-    console.log(error.data);
-    console.log(error.request);
+    if (codeMap[error.response.status]) {
+      if (error.data.message) {
+        message.error(error.data.message);
+      } else {
+        message.error(codeMap[error.response.status]);
+      }
+    }
     // console.log(codeMap[error.data.status]);
   } else {
     // 请求初始化时出错或者没有响应返回的异常
@@ -19,27 +21,32 @@ const errorHandler = function (error: ResponseError<any>) {
   }
 
   throw error; // 如果throw. 错误将继续抛出.
-
-  // 如果return, 则将值作为返回. 'return;' 相当于return undefined, 在处理结果时判断response是否有值即可.
-  // return {some: 'data'};
 };
 
 const request = extend({
   /** 所有接口添加代理用的前缀 */
-  prefix: "/apis/",
+  prefix: "/apis",
   timeout: 10000,
-  headers: {
-    "Content-Type": "multipart/form-data",
-  },
   errorHandler,
 });
 
 /** 请求拦截器 */
 request.interceptors.request.use(
   (url, options) => {
+    let token = "";
+    const pathname = location.pathname;
+    if (pathname.includes("management")) {
+      token = localStorage.getItem("admin_token") as any;
+    }
+
     return {
       url,
-      options,
+      options: {
+        ...options,
+        headers: {
+          Authorization: token ? `Bearer ${token}` : "",
+        },
+      },
     };
   },
   { global: true }
@@ -48,12 +55,20 @@ request.interceptors.request.use(
 // 提前对响应做异常处理
 request.interceptors.response.use((response) => {
   const codeMaps = {
-    502: "网关错误。",
-    503: "服务不可用，服务器暂时过载或维护。",
-    504: "网关超时。",
+    1: "请先登录",
   } as Record<number, string>;
+  const responseClone = response.clone();
+  /** 消费全局code */
+  responseClone.json().then((resValue) => {
+    if (codeMaps[resValue.code]) {
+      notification.open({
+        type: "error",
+        message: codeMaps[resValue.code],
+        duration: 1.5,
+      });
+    }
+  });
 
-  message.error(codeMaps[response.status]);
   return response;
 });
 
diff --git a/src/service/index.ts b/src/service/index.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..3990a6bb93f4fdc6345b54a840d99c4bae877076 100644
--- a/src/service/index.ts
+++ b/src/service/index.ts
@@ -0,0 +1,13 @@
+import * as login from "./loginController";
+import * as setting from "./settingController";
+import * as common from "./commonController";
+import * as management from "./managementController";
+import * as apply from "./applyController";
+
+export default {
+  loginService: login,
+  settingService: setting,
+  commonService: common,
+  managementService: management,
+  applyService: apply,
+};
diff --git a/src/service/loginController.ts b/src/service/loginController.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a72446bb4e532329f03bcc42fbb2eae5ad847e1
--- /dev/null
+++ b/src/service/loginController.ts
@@ -0,0 +1,37 @@
+import type { RespResult } from "./core/interface";
+import request from "./core/request";
+
+/**
+ * 获取token
+ * @param
+ * @returns
+ */
+export function getToken(params: { username: string; password: string }) {
+  return request.post<RespResult<API.UserInfo>>("/login/auth/oauth/token", {
+    /** 去掉前缀 */
+    prefix: "",
+    params: {
+      ...params,
+      grant_type: "password",
+      client_id: "cgtf",
+      client_secret: "cgtf",
+    },
+  });
+}
+
+export function getUserInfo() {
+  return request.post<RespResult<API.UserInfo>>("/hncy/others/queryUserInfo");
+}
+
+/** 用户注册  */
+export function register(params: any) {
+  return request.post("/client-user/register", {
+    params,
+  });
+}
+
+export function onLogin(params: any) {
+  return request.post("/client-user/login", {
+    params,
+  });
+}
diff --git a/src/service/managementController.ts b/src/service/managementController.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dc5b56da224c96d006da75220f49ca406f2ac35d
--- /dev/null
+++ b/src/service/managementController.ts
@@ -0,0 +1,50 @@
+import request from "./core/request";
+
+/** 获取全部项 */
+export function getAllApplication(id?: string) {
+  return request.post("/hncy/matterInfo/list", {
+    params: {
+      id,
+    },
+  });
+}
+
+/** 获取事项记录  */
+
+export function getApplicationRecordById(params: {
+  pageNum: number;
+  pageSize: number;
+  thingId: string;
+  elementId?: string;
+  name: string;
+}) {
+  return request.post("/hncy/record/list", {
+    params,
+  });
+}
+
+export function getApplicationFormDetail(id: string) {
+  return request.post("/hncy/record/getDetails", {
+    params: { id },
+  });
+}
+
+export function getExamineHistory(id: string) {
+  return request.get("/hncy/flow/approve-history-list", {
+    params: {
+      businessId: id,
+    },
+  });
+}
+
+export function completeExamine(data: any) {
+  return request.post("/hncy/flow/complete", {
+    data,
+  });
+}
+
+export function removeAllConfigById(id: string) {
+  return request.post("/hncy/content/removeByThingId", {
+    params: { thingId: id },
+  });
+}
diff --git a/src/service/settingController.ts b/src/service/settingController.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db72208a8a9983017913342fe68634b9b03ccce3
--- /dev/null
+++ b/src/service/settingController.ts
@@ -0,0 +1,53 @@
+import { FlowChartNode } from "@/pages/Setting/interface";
+import request from "./core/request";
+
+/**
+ * 提交基础设置
+ * @param data 表单值
+ * @returns
+ */
+export function submitBaseSetting(data: Record<string, any>) {
+  return request.post("/hncy/matterInfo/saveThing", {
+    params: data,
+  });
+}
+
+/** 保存表单 */
+export function saveFormConfigItem(param: {
+  thingId: string;
+  groupId: string;
+  label: string;
+  componentType: string;
+  fieldKey: string;
+  validationRules: string;
+  otherSet: string;
+}) {
+  return request.post("/hncy/content/saveMatterTemplate", {
+    params: param,
+  });
+}
+
+export function saveFlowConfig(params: {
+  processId: any;
+  processName: any;
+  description: string;
+  elementParams: FlowChartNode[];
+}) {
+  return request.post("/hncy/flow/make-flow", {
+    data: params,
+  });
+}
+
+export function getTemplateConfig(id: string) {
+  return request.post("/hncy/matterInfo/getInfo", {
+    params: {
+      id,
+    },
+  });
+}
+/** 获取流程图配置 */
+export function getFlowChartConfig(id: string) {
+  return request.get("/hncy/flow/process-info", {
+    params: { id },
+  });
+}
diff --git a/src/service/type.d.ts b/src/service/type.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6cfbc38694f28514bf764b8300af11e7396d6bfb
--- /dev/null
+++ b/src/service/type.d.ts
@@ -0,0 +1,117 @@
+const a = {
+  accountNonLocked: true,
+  authorities: [
+    {
+      authority: "cgtf",
+    },
+    {
+      authority: "cgtf/app",
+    },
+    {
+      authority: "cgtf/app/disposer",
+    },
+    {
+      authority: "cgtf/app/disposer/home",
+    },
+    {
+      authority: "cgtf/app/disposer/home/history",
+    },
+    {
+      authority: "cgtf/app/disposer/home/range",
+    },
+    {
+      authority: "history",
+    },
+  ],
+  roles: [
+    {
+      role: "CG24_APP_Disposer",
+      roleName: "处置人员",
+      permissions: [
+        {
+          name: "诚管24APP处置人员",
+          permission: "CG24_APP_Disposer",
+          resource: [
+            {
+              name: "历史处置",
+              path: "cgtf/app/disposer/home/history",
+              authCode: "history",
+            },
+            {
+              name: "诚管24资源",
+              path: "cgtf",
+              authCode: "",
+            },
+            {
+              name: "诚管24资源app-处置",
+              path: "cgtf/app/disposer",
+              authCode: "",
+            },
+            {
+              name: "责任范围",
+              path: "cgtf/app/disposer/home/range",
+              authCode: "",
+            },
+            {
+              name: "诚管24资源app",
+              path: "cgtf/app",
+              authCode: "",
+            },
+            {
+              name: "处置首页",
+              path: "cgtf/app/disposer/home",
+              authCode: "",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  loginAccount: "12400000106",
+  loginPassword: "emhyY0AxMjM=",
+  telPhone: "12400000106",
+};
+
+declare namespace API {
+  interface UserInfo {
+    access_token: string;
+    id: string;
+    username: string;
+    orgId: string;
+    orgName: string;
+    phone: string;
+    nickname: string;
+    email: string;
+    type: string;
+    password: string;
+    enabled: boolean;
+    accountNonExpired: boolean;
+    credentialsNonExpired: boolean;
+    accountNonLocked: boolean;
+    authorities: {
+      authority: string;
+    }[];
+    roles: {
+      role: string;
+      roleName: string;
+      permissions: {
+        name: string;
+        permission: string;
+        resource: {
+          name: string;
+          path: string;
+          authCode: string;
+        }[];
+      }[];
+    }[];
+    loginAccount: string;
+    loginPassword: string;
+    telPhone: string;
+  }
+
+  interface StaffInfo {
+    id: string;
+    isAccountLocked: boolean;
+    nickName: string;
+  }
+}
diff --git a/src/store/useUserStore.ts b/src/store/useUserStore.ts
new file mode 100644
index 0000000000000000000000000000000000000000..53cf2b47c2f8f0b7292fd4e5921bff70ace58a0f
--- /dev/null
+++ b/src/store/useUserStore.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+
+interface UserState {
+  userInfo?: any;
+  adminInfo?: API.UserInfo;
+  updateUserInfo: (userInfo: any) => void;
+  updateAdminInfo: (adminInfo?: API.UserInfo) => void;
+}
+
+/** 用户信息的全局状态管理 */
+const useUserStore = create<UserState>()((set) => ({
+  userInfo: undefined,
+  adminInfo: undefined,
+  /** 更新 */
+  updateUserInfo: (userInfo: API.UserInfo) => {
+    set({ userInfo });
+  },
+
+  updateAdminInfo: (adminInfo?: API.UserInfo) => {
+    set({ adminInfo });
+  },
+}));
+
+export default useUserStore;
diff --git a/vite.config.ts b/vite.config.ts
index ea7651604882f62edd3bfc5b5f8cf3fd08da2598..68c7598e9bc24f5167496a28b82ddc3a34ef04ff 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,8 +13,15 @@ export default defineConfig({
     port: 3688,
     open: true,
     proxy: {
+      "/login": {
+        target: "http://192.168.2.21:21590",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/login/, ""),
+      },
       "/apis": {
-        target: "http://192.168.31.111:21570",
+        //yanghuangling
+        target: "http://192.168.31.213:21570",
+        // target: "http://192.168.31.172:21570",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/apis/, ""),
       },
diff --git a/yarn.lock b/yarn.lock
index f886b2d6a6fbc7164dc072b0c62df3e5bf9780be..1378002c8a5cca9ea3c97d284927e49dad6ef29b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2581,6 +2581,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 uuid@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
@@ -2628,3 +2633,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.4.tgz#63abdd81edfb190bc61e0bbae045cc4d52158a05"
+  integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==
+  dependencies:
+    use-sync-external-store "1.2.0"