From e822f7f875f50dc4af33637fbd2e44ab0644715a Mon Sep 17 00:00:00 2001
From: krysent <10075251+krysent@user.noreply.gitee.com>
Date: Thu, 27 Jul 2023 17:44:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewInitForm/EditTable/index.jsx           |  173 ++
 src/components/NewInitForm/FormItems.jsx      | 1545 +++++++++++++++++
 src/components/NewInitForm/index.css          |   28 +
 src/components/NewInitForm/index.jsx          |  150 ++
 src/components/NewInitForm/index.less         |   28 +
 src/pages/Printer/fields.js                   |   89 +-
 src/pages/Printer/index.jsx                   |   17 +-
 7 files changed, 1965 insertions(+), 65 deletions(-)
 create mode 100644 src/components/NewInitForm/EditTable/index.jsx
 create mode 100644 src/components/NewInitForm/FormItems.jsx
 create mode 100644 src/components/NewInitForm/index.css
 create mode 100644 src/components/NewInitForm/index.jsx
 create mode 100644 src/components/NewInitForm/index.less

diff --git a/src/components/NewInitForm/EditTable/index.jsx b/src/components/NewInitForm/EditTable/index.jsx
new file mode 100644
index 0000000..910d1fc
--- /dev/null
+++ b/src/components/NewInitForm/EditTable/index.jsx
@@ -0,0 +1,173 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState, memo, useMemo } from 'react';
+import { EditableProTable } from '@ant-design/pro-components';
+import { Tooltip } from 'antd';
+import { doFetch } from '@/utils/doFetch';
+
+const EditTable = (props) => {
+  const {
+    actionRef, //表格动作
+    formRef, //表单Ref
+    rowKey, // key
+    columns = [], //columns
+    style, //style
+    path, //接口地址
+    extraparams, //额外参数
+    pageSize, //修改默认pageSize
+    pagination, //分页设置
+    x, //横向滚动
+    refreshDep, //依赖刷新 (已废弃)
+    getDefaultSelected, //存在默认选中向上返回选中值
+    dataSource,
+  } = props;
+
+  const actionRefs = actionRef ?? useRef(),
+    formRefs = formRef ?? useRef(),
+    ifspagination = pagination == 'false' || pagination === false,
+    [size, setsize] = useState('small');
+
+  //调用接口
+  const request = async (params, sort, filter) => {
+    if (!path)
+      return {
+        data: dataSource ?? [],
+        success: true,
+        total: dataSource?.length ?? 0,
+      };
+    let newparams = {
+      ...params,
+      ...extraparams, //父组件传参
+      pageIndex: params.current,
+      pageSize: params.pageSize || pageSize,
+    };
+    delete newparams.current;
+    if (ifspagination) {
+      delete newparams.pageIndex;
+      delete newparams.pageSize;
+    }
+    const result = await doFetch({ url: path, params: newparams });
+    //分页结果
+    let data = result?.data?.page?.list,
+      success = true,
+      total = result?.data?.page?.total;
+    //不带分页获取结果
+    if (ifspagination || !data) {
+      data = result?.data?.dataList;
+      total = result?.data?.dataList?.length;
+    }
+    //存在默认选中向上返回选中值
+    getDefaultSelected && getDefaultSelected(result?.data);
+    return {
+      data,
+      success,
+      total,
+    };
+  };
+
+  let columncs = useMemo(() => {
+    return columns.map((item, index) => {
+      let it = { ...item };
+      let itemwidth = it.width ? it.width : 'auto';
+      let options = {};
+      if (it.valueType == 'select' || it.valueType == 'checkbox') {
+        if (Array.isArray(it.options)) {
+          options = {
+            fieldProps: {
+              ...it?.fieldProps,
+              options: [...it.options],
+            },
+          };
+        } else if (it.options) {
+          options = {
+            request: async (params) => {
+              let list = await doFetch({ url: it?.options?.path, params: it?.options?.params });
+              return list.data.dataList;
+            },
+          };
+        }
+      }
+      if (it.valueType == 'option') {
+        options = {
+          key: 'option',
+          dataIndex: 'option',
+          fixed: 'right',
+        };
+      }
+      if (!it.render) {
+        options = {
+          ...options,
+          render: (text, row) => {
+            return (
+              <Tooltip title={row[it.dataIndex]} placement="topLeft">
+                <span className="table-cell">{row[it.dataIndex] ?? '-'}</span>
+              </Tooltip>
+            );
+          },
+        };
+      }
+
+      options = {
+        ...options,
+        width: itemwidth,
+      };
+
+      delete it.formItemProps;
+      return {
+        ...it,
+        ...options,
+      };
+    });
+  }, [columns]);
+
+  return (
+    <EditableProTable
+      {...props}
+      recordCreatorProps={false}
+      size={size}
+      onSubmit={(params) => {
+        //console.log(params, 'onSubmit');
+      }}
+      onSizeChange={(size) => {
+        localStorage.setItem('size', size); //设置全局表格规格缓存
+        setsize(size);
+      }}
+      columns={columncs ?? []}
+      style={style || {}}
+      actionRef={actionRefs}
+      formRef={formRefs}
+      rowKey={rowKey ?? 'id'} //表格每行数据的key
+      dateFormatter="string"
+      request={request}
+      scroll={
+        x
+          ? {
+            x: x,
+          }
+          : {}
+      }
+      pagination={
+        ifspagination
+          ? false
+          : {
+            showTotal: (total, range) => <span>共{total}条</span>,
+            showQuickJumper: true,
+            showSizeChanger: true,
+            pageSizeOptions: [5, 10, 15, 30, 50, 100, 200],
+            defaultPageSize: pageSize || 15,
+          }
+      }
+      editable={{
+        type: 'multiple',
+        editableKeys: props?.rowSelection?.selectedRowKeys ?? [],
+        ...props?.editable,
+      }}
+      search={{
+        filterType: 'light', //轻量模式
+        placement: 'bottomLeft'
+      }}
+    />
+  );
+};
+
+export default memo(EditTable);
diff --git a/src/components/NewInitForm/FormItems.jsx b/src/components/NewInitForm/FormItems.jsx
new file mode 100644
index 0000000..4a5c3c4
--- /dev/null
+++ b/src/components/NewInitForm/FormItems.jsx
@@ -0,0 +1,1545 @@
+import React, { useState, useRef, memo, createElement, useEffect } from "react";
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormSelect,
+  ProFormText,
+  ProFormMoney,
+  ProFormTextArea,
+  ProFormDigit,
+  ProFormDigitRange,
+  ProFormDatePicker,
+  ProFormDateTimePicker,
+  ProFormDateRangePicker,
+  ProFormDateTimeRangePicker,
+  ProFormTimePicker,
+  ProFormTreeSelect,
+  ProFormCheckbox,
+  ProFormRadio,
+  ProFormCascader,
+  ProFormSwitch,
+  ProFormRate,
+  ProFormSlider,
+  ProFormUploadDragger,
+  ProFormUploadButton,
+  ProFormList,
+} from "@ant-design/pro-components";
+import { doFetch } from "@/utils/doFetch";
+import * as Antd from "antd";
+import {
+  PlusOutlined,
+  DownOutlined,
+  RedoOutlined,
+  CloseOutlined,
+} from "@ant-design/icons";
+import EditTable from "./EditTable";
+const { Image, Form, Upload, Col, Tabs, Dropdown, Menu, Empty } = Antd;
+
+const FormItems = {
+  Input,
+  Password,
+  Money,
+  Textarea,
+  Digit,
+  DigitRange,
+  Date,
+  Time,
+  DateTime,
+  DateMonth,
+  DateYear,
+  DateRange,
+  TimeRange,
+  DateTimeRange,
+  Select,
+  TreeSelect,
+  Checkbox,
+  Radio,
+  Switch,
+  Cascader,
+  Rate,
+  Slider,
+  UploadBtn,
+  UploadImage,
+  UploadDragger,
+  FormSelectList,
+  FormList,
+  CheckboxItem,
+  RadioItem,
+};
+
+function upperCase(str) {
+  const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
+  return newStr;
+}
+
+let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => {
+  const value = action.getCurrentRowData();
+  return (
+    <>
+      {fields
+        .filter((it) => it.hideInForm !== true)
+        .map((item) => {
+          let key = item?.valueType ? upperCase(item?.valueType) : "Input";
+          let { hideInForm, editable } = item;
+          if (hideInForm && Object.keys(hideInForm)) {
+            return (
+              <ProFormDependency name={Object.keys(hideInForm)}>
+                {(params) => {
+                  let ifs = true;
+                  let res = Object.keys(hideInForm).map((its) => {
+                    let val =
+                      JSON.stringify(params[its]) === "[]" ? "[]" : params[its];
+                    if (Array.isArray(hideInForm[its])) {
+                      return !hideInForm[its].includes(val);
+                    } else {
+                      let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
+                      return vals.indexOf(val) != -1;
+                    }
+                  });
+                  ifs = res.includes(false);
+                  if (ifs) {
+                    return (
+                      <Col {...item.colProps}>
+                        {curindex == 0 ? (
+                          <p>
+                            <label htmlFor="">{item.title}</label>
+                            <p style={{ padding: "6px 0 0 0", margin: 0 }}>
+                              <b style={{ color: "red" }}>!</b>{" "}
+                              需满足条件才可以填写{item.title}
+                            </p>
+                          </p>
+                        ) : (
+                          <p style={{ padding: "4px 0 0 0", margin: 0 }}>
+                            <b style={{ color: "red" }}>!</b>{" "}
+                            需满足条件才可以填写{item.title}
+                          </p>
+                        )}
+                      </Col>
+                    );
+                  } else {
+                    return (
+                      <>
+                        {createElement(FormItems[key], {
+                          item: item,
+                          colProps: item.colProps,
+                          key: item.dataIndex,
+                          name: name,
+                          formRef,
+                          curindex,
+                        })}
+                      </>
+                    );
+                  }
+                }}
+              </ProFormDependency>
+            );
+          } else if (editable === false) {
+            return curindex === 0 ? (
+              <Col {...item.colProps} style={{ height: 68 }}>
+                <p>
+                  <label htmlFor="">{item.title}</label>
+                  <p style={{ padding: "6px 0 0 0", margin: 0 }}>
+                    {value[item?.key ?? item?.dataIndex] ?? "-"}
+                  </p>
+                </p>
+              </Col>
+            ) : (
+              <Col {...item.colProps} style={{ height: 68 }}>
+                <p>
+                  <label htmlFor=""> &nbsp;</label>
+                  <p style={{ padding: "6px 0 0 0", margin: 0 }}>
+                    {value[item?.key ?? item?.dataIndex] ?? "-"}
+                  </p>
+                </p>
+              </Col>
+            );
+          } else {
+            return (
+              <>
+                {createElement(FormItems[key], {
+                  item: item,
+                  colProps: item.colProps,
+                  key: item.dataIndex,
+                  name: name,
+                  formRef,
+                  curindex,
+                })}
+              </>
+            );
+          }
+        })}
+    </>
+  );
+});
+
+// colProps 默认删格
+function Input({ item, colProps }) {
+  let keys = item.key ?? item.dataIndex ?? "";
+  keys = keys ?? "";
+  const defaultrule =
+    keys.indexOf("dianhuas") != -1
+      ? {
+          pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/,
+          message: item.title + "格式不正确",
+        }
+      : keys.indexOf("mail") != -1
+      ? {
+          pattern:
+            /^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$/,
+          message: "邮箱格式不正确",
+        }
+      : {};
+
+  return (
+    <>
+      <ProFormText
+        fieldProps={item?.fieldProps}
+        formItemProps={{
+          ...item.formItemProps,
+          rules: [defaultrule, ...(item?.formItemProps?.rules ?? [])],
+        }} //手机号邮箱自带验证
+        name={keys}
+        colProps={item.colProps ?? colProps}
+        label={item.title}
+        placeholder={`请输入${item.title}`}
+      />
+    </>
+  );
+}
+//pwd
+function Password({ item, colProps }) {
+  return (
+    <ProFormText.Password
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请输入${item.title}`}
+    />
+  );
+}
+//money
+function Money({ item, colProps }) {
+  return (
+    <ProFormMoney
+      locale="zh-CN"
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请输入${item.title}`}
+      min={item.min}
+      max={item.max}
+    />
+  );
+}
+
+//textarea
+function Textarea({ item }) {
+  return (
+    <ProFormTextArea
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? { span: 24 }}
+      label={item.title}
+      placeholder={`请输入${item.title}`}
+    />
+  );
+}
+
+//digit
+function Digit({ item, colProps }) {
+  return (
+    <ProFormDigit
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请输入${item.title}`}
+      min={item.min}
+      max={item.max}
+      fieldProps={{
+        precision: item.precision ?? 0,
+        ...(item?.fieldProps ?? {}),
+      }}
+    />
+  );
+}
+
+//digitrange
+function DigitRange({ item, colProps }) {
+  return (
+    <ProFormDigitRange
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={["请输入最小值", "请输入最大值"]}
+      min={item.min}
+      max={item.max}
+      fieldProps={{
+        precision: item.precision ?? 0,
+        ...(item?.fieldProps ?? {}),
+      }}
+    />
+  );
+}
+
+//Date
+function Date({ item, colProps }) {
+  return (
+    <ProFormDatePicker
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      width="100%"
+    />
+  );
+}
+
+//DateMonth
+function DateMonth({ item, colProps }) {
+  return (
+    <ProFormDatePicker
+      fieldProps={{ ...item?.fieldProps, picker: "month", format: "YYYY-MM" }}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      width="100%"
+    />
+  );
+}
+//DateYear
+function DateYear({ item, colProps }) {
+  return (
+    <ProFormDatePicker
+      fieldProps={{ ...item?.fieldProps, picker: "year", format: "YYYY" }}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      width="100%"
+    />
+  );
+}
+
+//dateTime
+function DateTime({ item, colProps }) {
+  return (
+    <ProFormDateTimePicker
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      width="100%"
+    />
+  );
+}
+//DateRange
+function DateRange({ item, colProps }) {
+  return (
+    <ProFormDateRangePicker
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={["请选择开始日期", "请选择结束日期"]}
+      width="100%"
+    />
+  );
+}
+//dateTimeRange
+function DateTimeRange({ item, colProps }) {
+  return (
+    <ProFormDateTimeRangePicker
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={["请选择开始时间", "请选择结束时间"]}
+      width="100%"
+    />
+  );
+}
+//Time
+function Time({ item, colProps }) {
+  return (
+    <ProFormTimePicker
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      width="100%"
+    />
+  );
+}
+//TimeRange
+function TimeRange({ item, colProps }) {
+  return (
+    <ProFormTimePicker.RangePicker
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={["请选择开始时间", "请选择结束时间"]}
+      width="100%"
+    />
+  );
+}
+
+function LinkSelect({ item, colProps, formRef, name, curindex }) {
+  let curoption = item.options ?? null,
+    curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
+  return (
+    <ProFormDependency name={Object.keys(curlinkparams)}>
+      {(params) => {
+        const curkey = item.key ?? item.dataIndex;
+        return (
+          <ProFormSelect
+            convertValue={(value) => {
+              return item?.fieldProps?.mode == "multiple"
+                ? !value
+                  ? []
+                  : null
+                : null;
+            }}
+            fieldProps={item?.fieldProps}
+            formItemProps={item.formItemProps}
+            name={curkey}
+            colProps={item.colProps ?? colProps}
+            label={item.title}
+            placeholder={`请选择${item.title}`}
+            params={params}
+            mode={item?.mode}
+            request={async (parse) => {
+              let result = {};
+              for (let key in curlinkparams) {
+                let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
+                result[reversekey] = parse[key];
+              }
+              let res = await doFetch({
+                url: curoption?.path,
+                params: { ...result, ...(curoption?.extraparams ?? {}) },
+              });
+              if (name) {
+                let curvals = formRef?.current?.getFieldValue(name);
+                curvals = curvals.map((it, i) => {
+                  if (i == curindex) {
+                    it[curkey] = null;
+                  }
+                  return it;
+                });
+                formRef?.current?.setFieldsValue({ [name]: curvals });
+              } else {
+                let curval = formRef?.current?.getFieldValue(curkey),
+                  ifclean;
+                if (Array.isArray(curval)) {
+                  ifclean = res?.data?.dataList
+                    ?.map((it) => it.value)
+                    .filter?.((it) => {
+                      return curval?.includes(it);
+                    });
+                } else {
+                  ifclean = res?.data?.dataList.filter(
+                    (it) => it.value == curval
+                  )?.[0]?.value;
+                }
+                formRef?.current?.setFieldsValue({ [curkey]: ifclean });
+              }
+              return res?.data?.dataList ?? [];
+            }}
+            showSearch
+          />
+        );
+      }}
+    </ProFormDependency>
+  );
+}
+
+function NolinkSelect({ item, colProps }) {
+  let options = {
+      options: [],
+    },
+    curoption = item.options ?? null;
+
+  if (Array.isArray(curoption)) {
+    options = {
+      options: [...curoption],
+    };
+  } else if (curoption) {
+    options = {
+      request: async () => {
+        let list = await doFetch({
+          url: curoption?.path,
+          params: curoption?.params,
+        });
+        return list.data.dataList;
+      },
+    };
+  }
+
+  return (
+    <ProFormSelect
+      fieldProps={item.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      showSearch
+      mode={item?.mode}
+      {...options}
+    />
+  );
+}
+
+//Select 高阶组建
+function Select(props) {
+  let ifs = props?.item?.options?.linkParams;
+  if (ifs) {
+    return <LinkSelect {...props} />;
+  } else {
+    return <NolinkSelect {...props} />;
+  }
+}
+
+function LinkTreeSelect({ item, colProps, formRef, name, curindex }) {
+  let prevparse = useRef();
+  let curoption = item.options ?? null,
+    curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
+  return (
+    <ProFormDependency name={Object.keys(curlinkparams)}>
+      {(params) => {
+        const curkey = item.key ?? item.dataIndex;
+        return (
+          <ProFormTreeSelect
+            fieldProps={{
+              ...item?.fieldProps,
+              fieldNames: {
+                label: "title",
+                value: "key",
+                children: "children",
+              },
+              showSearch: false,
+              multiple: item?.mode === "multiple",
+            }}
+            formItemProps={item.formItemProps}
+            name={curkey}
+            colProps={item.colProps ?? colProps}
+            label={item.title}
+            placeholder={`请选择${item.title}`}
+            params={params}
+            request={async (parse) => {
+              delete parse.keyWords;
+              let result = {};
+              for (let key in curlinkparams) {
+                let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
+                result[reversekey] = parse[key];
+              }
+              let res = await doFetch({ url: curoption?.path, params: result });
+
+              if (prevparse.current !== JSON.stringify(parse)) {
+                if (name) {
+                  let curvals = formRef?.current?.getFieldValue(name);
+                  curvals = curvals.map((it, i) => {
+                    if (i == curindex) {
+                      it[curkey] = null;
+                    }
+                    return it;
+                  });
+                  formRef?.current?.setFieldsValue({ [name]: curvals });
+                } else {
+                  let curval = formRef?.current?.getFieldValue(curkey),
+                    ifclean;
+                  if (Array.isArray(curval)) {
+                    ifclean = res?.data?.dataList
+                      ?.map((it) => it.value)
+                      .filter?.((it) => {
+                        return curval?.includes(it);
+                      });
+                  } else {
+                    ifclean = res?.data?.dataList.filter(
+                      (it) => it.value == curval
+                    )?.[0]?.value;
+                  }
+                  formRef?.current?.setFieldsValue({ [curkey]: ifclean });
+                }
+              }
+              prevparse.current = JSON.stringify(parse);
+              return res?.data?.dataList ?? [];
+            }}
+          />
+        );
+      }}
+    </ProFormDependency>
+  );
+}
+
+function NolinkTreeSelect({ item, colProps }) {
+  let options = {
+      options: [],
+    },
+    curoption = item.options ?? null;
+
+  if (Array.isArray(curoption)) {
+    options = {
+      options: [...curoption],
+    };
+  } else if (curoption) {
+    options = {
+      request: async () => {
+        let list = await doFetch({
+          url: curoption?.path,
+          params: curoption?.params,
+        });
+        return list.data.dataList;
+      },
+    };
+  }
+
+  return (
+    <ProFormTreeSelect
+      fieldProps={{
+        ...item?.fieldProps,
+        fieldNames: { label: "title", value: "key", children: "children" },
+        showSearch: true,
+        multiple: item?.mode === "multiple",
+      }}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      multiple
+      {...options}
+    />
+  );
+}
+
+//TreeSelect 高阶组建
+function TreeSelect(props) {
+  let ifs = props?.item?.options?.linkParams;
+  if (ifs) {
+    return <LinkTreeSelect {...props} />;
+  } else {
+    return <NolinkTreeSelect {...props} />;
+  }
+}
+
+function CheckboxItem({ item, colProps }) {
+  return (
+    <ProFormCheckbox
+      fieldProps={item.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+    />
+  );
+}
+
+function LinkCheckbox({ item, colProps, formRef, name, curindex }) {
+  let curoption = item.options ?? null,
+    curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
+  return (
+    <ProFormDependency name={Object.keys(curlinkparams)}>
+      {(params) => {
+        const curkey = item.key ?? item.dataIndex;
+        return (
+          <ProFormCheckbox.Group
+            fieldProps={item?.fieldProps}
+            formItemProps={item.formItemProps}
+            name={curkey}
+            colProps={item.colProps ?? colProps}
+            label={item.title}
+            placeholder={`请选择${item.title}`}
+            params={params}
+            request={async (parse) => {
+              let result = {};
+              for (let key in curlinkparams) {
+                let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
+                result[reversekey] = parse[key];
+              }
+              let res = await doFetch({ url: curoption?.path, params: result });
+              if (name) {
+                let curvals = formRef?.current?.getFieldValue(name);
+                curvals = curvals.map((it, i) => {
+                  if (i == curindex) {
+                    it[curkey] = null;
+                  }
+                  return it;
+                });
+                formRef?.current?.setFieldsValue({ [name]: curvals });
+              } else {
+                let curval = formRef?.current?.getFieldValue(curkey),
+                  ifclean;
+                if (Array.isArray(curval)) {
+                  ifclean = res?.data?.dataList
+                    ?.map((it) => it.value)
+                    .filter?.((it) => {
+                      return curval?.includes(it);
+                    });
+                } else {
+                  ifclean = res?.data?.dataList.filter(
+                    (it) => it.value == curval
+                  )?.[0]?.value;
+                }
+                formRef?.current?.setFieldsValue({ [curkey]: ifclean });
+              }
+              return res?.data?.dataList ?? [];
+            }}
+          />
+        );
+      }}
+    </ProFormDependency>
+  );
+}
+
+function NolinkCheckbox({ item, colProps }) {
+  let options = {
+      options: [],
+    },
+    curoption = item.options ?? null;
+
+  if (Array.isArray(curoption)) {
+    options = {
+      options: [...curoption],
+    };
+  } else if (curoption) {
+    options = {
+      request: async () => {
+        let list = await doFetch({
+          url: curoption?.path,
+          params: curoption?.params,
+        });
+        return list.data.dataList;
+      },
+    };
+  }
+
+  return (
+    <ProFormCheckbox.Group
+      fieldProps={item.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      {...options}
+    />
+  );
+}
+
+//Checkbox 高阶组建
+function Checkbox(props) {
+  let ifs = props?.item?.options?.linkParams;
+  if (ifs) {
+    return <LinkCheckbox {...props} />;
+  } else {
+    return <NolinkCheckbox {...props} />;
+  }
+}
+
+function RadioItem({ item, colProps }) {
+  return (
+    <ProFormRadio
+      fieldProps={item.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+    />
+  );
+}
+
+function LinkRadio({ item, colProps, formRef, name, curindex }) {
+  let curoption = item.options ?? null,
+    curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
+  return (
+    <ProFormDependency name={Object.keys(curlinkparams)}>
+      {(params) => {
+        const curkey = item.key ?? item.dataIndex;
+        return (
+          <ProFormRadio.Group
+            fieldProps={item?.fieldProps}
+            formItemProps={item.formItemProps}
+            name={curkey}
+            colProps={item.colProps ?? colProps}
+            label={item.title}
+            placeholder={`请选择${item.title}`}
+            params={params}
+            request={async (parse) => {
+              let result = {};
+              for (let key in curlinkparams) {
+                let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
+                result[reversekey] = parse[key];
+              }
+              let res = await doFetch({ url: curoption?.path, params: result });
+              if (name) {
+                let curvals = formRef?.current?.getFieldValue(name);
+                curvals = curvals.map((it, i) => {
+                  if (i == curindex) {
+                    it[curkey] = null;
+                  }
+                  return it;
+                });
+                formRef?.current?.setFieldsValue({ [name]: curvals });
+              } else {
+                let curval = formRef?.current?.getFieldValue(curkey),
+                  ifclean;
+                if (Array.isArray(curval)) {
+                  ifclean = res?.data?.dataList
+                    ?.map((it) => it.value)
+                    .filter?.((it) => {
+                      return curval?.includes(it);
+                    });
+                } else {
+                  ifclean = res?.data?.dataList.filter(
+                    (it) => it.value == curval
+                  )?.[0]?.value;
+                }
+                formRef?.current?.setFieldsValue({ [curkey]: ifclean });
+              }
+              return res?.data?.dataList ?? [];
+            }}
+          />
+        );
+      }}
+    </ProFormDependency>
+  );
+}
+
+function NolinkRadio({ item, colProps }) {
+  let options = {
+      options: [],
+    },
+    curoption = item.options ?? null;
+
+  if (Array.isArray(curoption)) {
+    options = {
+      options: [...curoption],
+    };
+  } else if (curoption) {
+    options = {
+      request: async () => {
+        let list = await doFetch({
+          url: curoption?.path,
+          params: curoption?.params,
+        });
+        return list.data.dataList;
+      },
+    };
+  }
+
+  return (
+    <ProFormRadio.Group
+      fieldProps={item.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      {...options}
+    />
+  );
+}
+
+//Radio 高阶组建
+function Radio(props) {
+  let ifs = props?.item?.options?.linkParams;
+  if (ifs) {
+    return <LinkRadio {...props} />;
+  } else {
+    return <NolinkRadio {...props} />;
+  }
+}
+
+function LinkCascader({ item, colProps, formRef, name, curindex }) {
+  let prevparse = useRef();
+  let curoption = item.options ?? null,
+    curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
+  return (
+    <ProFormDependency name={Object.keys(curlinkparams)}>
+      {(params) => {
+        const curkey = item.key ?? item.dataIndex;
+        return (
+          <ProFormCascader
+            fieldProps={{
+              ...item?.fieldProps,
+              fieldNames: {
+                label: "title",
+                value: "key",
+                children: "children",
+              },
+              showSearch: true,
+              multiple: item?.mode === "multiple",
+            }}
+            formItemProps={item.formItemProps}
+            name={curkey}
+            colProps={item.colProps ?? colProps}
+            label={item.title}
+            placeholder={`请选择${item.title}`}
+            params={params}
+            request={async (parse) => {
+              delete parse.keyWords;
+              let result = {};
+              for (let key in curlinkparams) {
+                let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
+                result[reversekey] = parse[key];
+              }
+              let res = await doFetch({ url: curoption?.path, params: result });
+              if (prevparse.current !== JSON.stringify(parse)) {
+                if (name) {
+                  let curvals = formRef?.current?.getFieldValue(name);
+                  curvals = curvals.map((it, i) => {
+                    if (i == curindex) {
+                      it[curkey] = null;
+                    }
+                    return it;
+                  });
+                  formRef?.current?.setFieldsValue({ [name]: curvals });
+                } else {
+                  let curval = formRef?.current?.getFieldValue(curkey),
+                    ifclean;
+                  if (Array.isArray(curval)) {
+                    ifclean = res?.data?.dataList
+                      ?.map((it) => it.value)
+                      .filter?.((it) => {
+                        return curval?.includes(it);
+                      });
+                  } else {
+                    ifclean = res?.data?.dataList.filter(
+                      (it) => it.value == curval
+                    )?.[0]?.value;
+                  }
+                  formRef?.current?.setFieldsValue({ [curkey]: ifclean });
+                }
+              }
+              prevparse.current = JSON.stringify(parse);
+              return res?.data?.dataList ?? [];
+            }}
+          />
+        );
+      }}
+    </ProFormDependency>
+  );
+}
+
+function NolinkCascader({ item, colProps }) {
+  let options = {
+      options: [],
+    },
+    curoption = item.options ?? null;
+
+  if (Array.isArray(curoption)) {
+    options = {
+      options: [...curoption],
+    };
+  } else if (curoption) {
+    options = {
+      request: async () => {
+        let list = await doFetch({
+          url: curoption?.path,
+          params: curoption?.params,
+        });
+        return list.data.dataList;
+      },
+    };
+  }
+
+  return (
+    <ProFormCascader
+      fieldProps={{
+        ...item?.fieldProps,
+        fieldNames: { label: "title", value: "key", children: "children" },
+        showSearch: true,
+        multiple: item?.mode === "multiple",
+      }}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请选择${item.title}`}
+      {...options}
+    />
+  );
+}
+
+//Cascader 高阶组建
+function Cascader(props) {
+  let ifs = props?.item?.options?.linkParams;
+  if (ifs) {
+    return <LinkCascader {...props} />;
+  } else {
+    return <NolinkCascader {...props} />;
+  }
+}
+
+//switch
+function Switch({ item, colProps }) {
+  return (
+    <ProFormSwitch
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      placeholder={`请输入${item.title}`}
+    />
+  );
+}
+
+//Rate
+function Rate({ item, colProps }) {
+  return (
+    <ProFormRate
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+    />
+  );
+}
+
+//Slider
+function Slider({ item, colProps }) {
+  return (
+    <ProFormSlider
+      {...item?.fieldProps}
+      fieldProps={item?.fieldProps}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+    />
+  );
+}
+
+//uploadbtn
+function UploadBtn({ item, colProps }) {
+  return (
+    <ProFormUploadButton
+      fieldProps={{
+        ...item?.fieldProps,
+        action: REACT_APP_URL + "/hjjc/comAttach/uploadFile",
+        onPreview: (file) => {
+          let url = "";
+          if (file.response) {
+            url = file.response.data.dataList[0].url;
+          } else if (file.url) {
+            url = file.url;
+          } else {
+            url = file.thumbUrl;
+          }
+          window.open(url);
+        },
+      }}
+      transform={(value) => {
+        const key = item.key ?? item.dataIndex;
+        const transvalue = value?.map((it) => {
+          if (it.response) {
+            return it?.response?.data?.dataList[0];
+          } else {
+            return it;
+          }
+        });
+        return {
+          [key]: transvalue,
+        };
+      }}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+      title={`上传${item.title}`}
+    />
+  );
+}
+
+function UploadImg({ value, onChange, fieldProps }) {
+  const [image, setImage] = useState({});
+  let token = localStorage.getItem("TOKENSTRING");
+
+  function beforeUpload(file) {
+    const isJpgOrPng =
+      file.type === "image/jpg" ||
+      file.type === "image/jpeg" ||
+      file.type === "image/png";
+    if (!isJpgOrPng) {
+      message.error("只能上传.jpg/.jpeg/.png图片!");
+      return;
+    }
+    return true;
+  }
+
+  // maxCount 最大数量
+  const defaultconfig = {
+    name: "file",
+    action: REACT_APP_URL + "/hjjc/comAttach/uploadFile",
+    accept: ".jpg,.png,.jpeg",
+    listType: "picture-card",
+    beforeUpload: beforeUpload,
+    defaultFileList: value,
+    headers: { token },
+    onChange(info) {
+      let {
+        file: { status },
+        fileList,
+      } = info;
+      if (status == "error") {
+        message.error(`${info.file.name} 上传失败`);
+      } else if (status === "done") {
+        const transfile = fileList.map((it) => {
+          return it?.response ? it?.response?.data?.dataList[0] : it;
+        });
+        onChange(transfile);
+      }
+    },
+    onRemove(file) {
+      let uid = file?.response?.data?.dataList[0]?.uid ?? file?.uid;
+      let newvalue = value?.filter((it) => it?.uid != uid);
+      onChange(newvalue);
+    },
+    onPreview(file) {
+      let url = "";
+      if (file.response) {
+        url = file.response.data.dataList[0].url;
+      } else if (file.url) {
+        url = file.url;
+      } else {
+        url = file.thumbUrl;
+      }
+      setImage({
+        url,
+        visible: true,
+      });
+    },
+  };
+
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>上传图片</div>
+    </div>
+  );
+  return (
+    <>
+      <Image
+        src={image.url}
+        width={0}
+        height={0}
+        preview={{
+          visible: image?.visible,
+          onVisibleChange: () => {
+            if (image?.visible) {
+              setImage((s) => ({
+                ...s,
+                visible: false,
+              }));
+            }
+          },
+        }}
+      />
+      <Upload {...defaultconfig}>
+        {!value
+          ? uploadButton
+          : value?.length < fieldProps.limit
+          ? uploadButton
+          : null}
+      </Upload>
+    </>
+  );
+}
+
+//upload Image
+function UploadImage({ item, colProps }) {
+  let col = item.colProps ?? colProps;
+  return (
+    <Col {...col}>
+      <Form.Item
+        name={item.key ?? item.dataIndex}
+        label={item.title}
+        {...item.formItemProps}
+      >
+        <UploadImg fieldProps={{ ...item?.fieldProps }} />
+      </Form.Item>
+    </Col>
+  );
+}
+
+// uploadDragger
+function UploadDragger({ item, colProps }) {
+  return (
+    <ProFormUploadDragger
+      fieldProps={{
+        ...item?.fieldProps,
+        action: REACT_APP_URL + "/hjjc/comAttach/uploadFile",
+        onPreview: (file) => {
+          let url = "";
+          if (file.response) {
+            url = file.response.data.dataList[0].url;
+          } else if (file.url) {
+            url = file.url;
+          } else {
+            url = file.thumbUrl;
+          }
+          window.open(url);
+        },
+      }}
+      transform={(value) => {
+        const key = item.key ?? item.dataIndex;
+        const transvalue = value?.map((it) => {
+          if (it.response) {
+            return it?.response?.data?.dataList[0];
+          } else {
+            return it;
+          }
+        });
+        return {
+          [key]: transvalue,
+        };
+      }}
+      formItemProps={item.formItemProps}
+      name={item.key ?? item.dataIndex}
+      colProps={item.colProps ?? colProps}
+      label={item.title}
+    />
+  );
+}
+
+function FormList(props) {
+  const [isEmpty, cie] = useState(false);
+  let { item, colProps, formRef } = props;
+  let col = item.colProps ?? colProps;
+  let fields = item.columns ?? [];
+
+  useEffect(() => {
+    let value = props.formRef.current.getFieldValue(
+      item?.key ?? item?.dataIndex
+    );
+    if (value?.length == 0) {
+      cie(true);
+    }
+  }, [props]);
+
+  return (
+    <Col {...col}>
+      <div className="formList" >
+        {!isEmpty ? (
+          <ProFormList
+            name={item.key ?? item.dataIndex}
+            label={item.title}
+            min={item.min ?? 1}
+            max={item.max ?? 100}
+            itemContainerRender={(doms) => {
+              return <ProForm.Group>{doms}</ProForm.Group>;
+            }}
+            alwaysShowItemLabel={false}
+            copyIconProps={item?.copyIconProps}
+            deleteIconProps={item?.deleteIconProps}
+            creatorButtonProps={item?.creatorButtonProps}
+          >
+            {(f, index, action) => {
+              return (
+                <FormRender
+                  fields={fields}
+                  action={action}
+                  curindex={index}
+                  formRef={formRef}
+                  name={item.key ?? item.dataIndex}
+                />
+              );
+            }}
+          </ProFormList>
+        ) : (
+          <div>
+            <div>{item.title}</div>
+            <Empty
+              image={"./empty.svg"}
+              imageStyle={{
+                height: 60,
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </Col>
+  );
+}
+
+function TableSelect({ item, value, onChange, params = {} }) {
+  const rowKey = item?.rowKey ?? "id";
+  const [chooses, setchooses] = useState([]); //mark 标记
+  const [activetab, setactivetab] = useState(1);
+  const actionRef = useRef();
+
+  const menu = (selectedRows) => (
+    <Menu
+      style={{ width: 160 }}
+      items={
+        selectedRows.length > 0
+          ? selectedRows.map((it) => ({
+              key: it[rowKey],
+              label: (
+                <div
+                  className="spread"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    let key = it[rowKey];
+                    setchooses((s) => {
+                      let news = [...s];
+                      if (s.includes(key)) {
+                        news = news.filter((it) => {
+                          return it != key;
+                        });
+                      } else {
+                        news.push(key);
+                      }
+                      return news;
+                    });
+                  }}
+                >
+                  <span
+                    style={{
+                      color: chooses.includes(it[rowKey])
+                        ? "#1890ff"
+                        : "#333333",
+                      transition: "all 0.4s",
+                      userSelect: "none",
+                    }}
+                  >
+                    {it[item.rowName]}
+                  </span>
+                  <CloseOutlined
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      let newvalue = value.filter(
+                        (its) => its[rowKey] != it[rowKey]
+                      );
+                      onChange(newvalue);
+                      setchooses((s) => {
+                        let news = [...s];
+                        news = news.filter((its) => {
+                          return its != it[rowKey];
+                        });
+                        return news;
+                      });
+                    }}
+                  />
+                </div>
+              ),
+            }))
+          : [
+              {
+                key: -1,
+                label: "请先选择",
+              },
+            ]
+      }
+    />
+  );
+  const Todo = (
+    <EditTable
+      actionRef={actionRef}
+      defaultValue={value} //调用接口合并初始值
+      path={item.path}
+      extraparams={params ?? {}}
+      rowKey={rowKey}
+      columns={item.columns}
+      resizeable={false}
+      alwaysShowAlert={false}
+      tableAlertRender={false}
+      tableAlertOptionRender={false}
+      rowClassName={(record, index) => {
+        if (chooses.includes(record[rowKey])) {
+          return "lightblue";
+        } else {
+          return "";
+        }
+      }}
+      rowSelection={{
+        ...item.rowSelection,
+        columnWidth: 44,
+        preserveSelectedRowKeys: true,
+        selectedRowKeys: value && value?.map((it) => it[rowKey]),
+        onChange: (selectedKeys, selectedRows) => {
+          const rowkeylist = value ? value?.map((it) => it[rowKey]) : [];
+          const newValue = selectedRows?.map((its) => {
+            if (rowkeylist.includes(its[rowKey])) {
+              return value.filter((it) => it[rowKey] == its[rowKey])[0];
+            } else {
+              return its;
+            }
+          });
+          onChange(newValue);
+        },
+      }}
+      editable={{
+        onValuesChange: (record, recordList) => {
+          const newValue = value?.map((its) => {
+            if (its[rowKey] == record[rowKey]) {
+              return record;
+            } else {
+              return its;
+            }
+          });
+          onChange(newValue);
+        },
+      }}
+    />
+  );
+
+  const Done = (
+    <EditTable
+      value={value}
+      rowKey={rowKey}
+      columns={item.columns}
+      resizeable={false}
+      alwaysShowAlert={false}
+      tableAlertRender={false}
+      tableAlertOptionRender={false}
+      rowClassName={(record, index) => {
+        if (chooses.includes(record[rowKey])) {
+          return "lightblue";
+        } else {
+          return "";
+        }
+      }}
+      rowSelection={{
+        ...item.rowSelection,
+        columnWidth: 44,
+        preserveSelectedRowKeys: true,
+        selectedRowKeys: value && value?.map((it) => it[rowKey]),
+        onChange: (selectedKeys, selectedRows) => {
+          const rowkeylist = value ? value?.map((it) => it[rowKey]) : [];
+          const newValue = selectedRows?.map((its) => {
+            if (rowkeylist.includes(its[rowKey])) {
+              return value.filter((it) => it[rowKey] == its[rowKey])[0];
+            } else {
+              return its;
+            }
+          });
+          onChange(newValue);
+        },
+      }}
+      editable={{
+        onValuesChange: (record, recordList) => {
+          const newValue = value?.map((its) => {
+            if (its[rowKey] == record[rowKey]) {
+              return record;
+            } else {
+              return its;
+            }
+          });
+          onChange(newValue);
+        },
+      }}
+    />
+  );
+
+  return (
+    <div className="selecttable">
+      <Tabs
+        tabBarExtraContent={
+          <div className="center">
+            <Dropdown overlay={menu(value ?? [])}>
+              <a>
+                已选择{value?.length ?? 0}项 <DownOutlined />
+              </a>
+            </Dropdown>
+            <div
+              className="center"
+              style={{
+                color: "red",
+                cursor: "pointer",
+                margin: "0 6px 0 16px",
+              }}
+              onClick={() => {
+                onChange([]);
+                setchooses([]);
+              }}
+            >
+              <RedoOutlined rotate={-90} />
+              清空
+            </div>
+          </div>
+        }
+        onChange={setactivetab}
+        items={[
+          { label: "数据选择", key: 1, children: activetab == 1 && Todo },
+          {
+            label: `选择结果${value?.length ?? 0}项`,
+            key: 2,
+            children: activetab == 2 && Done,
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+function LinkSelectList({ item, colProps, formRef, name, curindex }) {
+  let col = item.colProps ?? colProps;
+  let curlinkparams = item?.linkParams ?? {}; //获取linkParams下声明的key
+  return (
+    <Col {...col}>
+      <ProFormDependency name={Object.keys(curlinkparams)}>
+        {(params) => {
+          const curkey = item.key ?? item.dataIndex;
+          let result = {};
+          for (let key in curlinkparams) {
+            let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
+            result[reversekey] = params[key];
+          }
+          return (
+            <Form.Item name={curkey} label={item.title} {...item.formItemProps}>
+              <TableSelect item={item} params={result} />
+            </Form.Item>
+          );
+        }}
+      </ProFormDependency>
+    </Col>
+  );
+}
+
+function NolinkSelectList({ item, colProps, formRef }) {
+  let col = item.colProps ?? colProps;
+  let curkey = item.key ?? item.dataIndex; //获取key
+  return (
+    <Col {...col}>
+      <Form.Item name={curkey} label={item.title} {...item.formItemProps}>
+        <TableSelect item={item} params={item.params} />
+      </Form.Item>
+    </Col>
+  );
+}
+
+function FormSelectList(props) {
+  let ifs = props?.item?.linkParams;
+  if (ifs) {
+    return <LinkSelectList {...props} />;
+  } else {
+    return <NolinkSelectList {...props} />;
+  }
+}
+
+export default FormItems;
diff --git a/src/components/NewInitForm/index.css b/src/components/NewInitForm/index.css
new file mode 100644
index 0000000..41ec07a
--- /dev/null
+++ b/src/components/NewInitForm/index.css
@@ -0,0 +1,28 @@
+.title {
+  position: relative;
+  width: 100%;
+  margin-bottom: 8px;
+  padding-left: 16px;
+  font-weight: bolder;
+  font-size: 16px;
+}
+.title::before {
+  position: absolute;
+  top: 4px;
+  left: 7px;
+  width: 3px;
+  height: 16px;
+  background-color: #3d8ad7;
+  border-radius: 4px;
+  content: '';
+}
+.title::after {
+  position: absolute;
+  top: 14px;
+  right: 0px;
+  width: calc(100% - 160px);
+  height: 1px;
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  content: '';
+}
diff --git a/src/components/NewInitForm/index.jsx b/src/components/NewInitForm/index.jsx
new file mode 100644
index 0000000..d78c9da
--- /dev/null
+++ b/src/components/NewInitForm/index.jsx
@@ -0,0 +1,150 @@
+import React, { createElement, memo, useRef, useState } from "react";
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormSelect,
+  ProFormText,
+  ProFormGroup,
+  ProFormList,
+  ProCard,
+} from "@ant-design/pro-components";
+import { doFetch } from "@/utils/doFetch";
+import styles from "./index.less";
+import FormItems from "./FormItems";
+
+function upperCase(str) {
+  const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
+  return newStr;
+}
+
+let FormRender = memo(({ fields = [], colProps, proformRef }) => {
+  return (
+    <>
+      {fields
+        .filter((it) => it.hideInForm !== true)
+        .map((item, index) => {
+          let key = item?.valueType ? upperCase(item?.valueType) : "Input";
+          let { hideInForm } = item;
+          item.formItemProps = item.formItemProps ?? { rules: [] };
+          if (item.valueType == "split") {
+            return (
+              <div
+                className={styles.title}
+                style={{ borderWidth: index == 0 ? 0 : 1 }}
+              >
+                {item.title}
+              </div>
+            );
+          }
+          if (hideInForm && Object.keys(hideInForm)) {
+            return (
+              <ProFormDependency name={Object.keys(hideInForm)}>
+                {(params) => {
+                  let ifs = true;
+                  let res = Object.keys(hideInForm).map((its) => {
+                    let val =
+                      JSON.stringify(params[its]) === "[]" ? "[]" : params[its];
+                    if (Array.isArray(hideInForm[its])) {
+                      return !hideInForm[its].includes(val);
+                    } else {
+                      let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
+                      return vals.indexOf(val) != -1;
+                    }
+                  });
+                  ifs = res.includes(false);
+                  if (ifs) {
+                    return;
+                  } else {
+                    return (
+                      <>
+                        {createElement(FormItems[key], {
+                          item: item,
+                          colProps: colProps,
+                          key: item.dataIndex,
+                          formRef: proformRef,
+                        })}
+                      </>
+                    );
+                  }
+                }}
+              </ProFormDependency>
+            );
+          } else {
+            return (
+              <>
+                {createElement(FormItems[key], {
+                  item: item,
+                  colProps: colProps,
+                  key: item.dataIndex,
+                  formRef: proformRef,
+                })}
+              </>
+            );
+          }
+        })}
+    </>
+  );
+});
+
+function InitForm({
+  formRef,
+  onFinish = (vals) => {
+    // console.log(vals);
+  },
+  formKey,
+  params = {},
+  detailpath = "",
+  defaultFormValue = {},
+  submitter,
+  fields,
+  colProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
+  onValuesChange = (changedValues, allValues) => {
+    // console.log(changedValues, allValues);
+  },
+  ptree = false,
+  children,
+}) {
+  let proformRef = useRef();
+  proformRef = formRef ?? proformRef;
+
+  return (
+    <ProForm
+      style={{ overflow: "hidden" }}
+      formRef={proformRef}
+      onFinish={onFinish}
+      formKey={formKey ?? parseInt(Math.random() * 1000000)}
+      params={params}
+      submitter={submitter ?? true}
+      grid={true}
+      rowProps={{
+        gutter: 12,
+      }}
+      request={async (params) => {
+        if (detailpath) {
+          let res = await doFetch({ url: detailpath, params });
+          return {
+            ...(res?.data?.data ?? {}),
+            ...defaultFormValue,
+          };
+        } else {
+          return {
+            ...defaultFormValue,
+          };
+        }
+      }}
+      autoFocusFirstInput
+      onValuesChange={(changedValues, allValues) => {
+        onValuesChange?.(changedValues, allValues);
+      }}
+    >
+      <FormRender
+        fields={fields?.filter((it) => it?.valueType != "option")}
+        colProps={colProps}
+        proformRef={proformRef}
+      />
+      {ptree && children}
+    </ProForm>
+  );
+}
+
+export default InitForm;
diff --git a/src/components/NewInitForm/index.less b/src/components/NewInitForm/index.less
new file mode 100644
index 0000000..e0ec9f1
--- /dev/null
+++ b/src/components/NewInitForm/index.less
@@ -0,0 +1,28 @@
+.title {
+  position: relative;
+  width: 100%;
+  margin-bottom: 8px;
+  padding-left: 16px;
+  font-weight: bolder;
+  font-size: 16px;
+  &::before {
+    position: absolute;
+    top: 4px;
+    left: 7px;
+    width: 3px;
+    height: 16px;
+    background-color: #3d8ad7;
+    border-radius: 4px;
+    content: '';
+  }
+  &::after {
+    position: absolute;
+    top: 14px;
+    right: 0px;
+    width: calc(100% - 160px);
+    height: 1px;
+    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    content: '';
+  }
+}
diff --git a/src/pages/Printer/fields.js b/src/pages/Printer/fields.js
index 17290cc..0a5cdf0 100644
--- a/src/pages/Printer/fields.js
+++ b/src/pages/Printer/fields.js
@@ -1,60 +1,39 @@
-import {
-  factorySelect,
-  shopSelectByFactory,
-  productionLineSelectByShop,
-  sectionSelectByShop,
-} from "@/services/system";
-export default {
-  stationNo: {
-    value: null,
-    type: "input",
-    title: "工位编号",
-    name: ["stationNo"],
-    required: true,
+export default [
+  {
+    title: "物料(名称+编码)",
+    key: "wlid",
+    dataIndex: "wlid",
   },
-  stationName: {
-    value: null,
-    type: "input",
-    title: "工位名称",
-    name: ["stationName"],
-    required: true,
+  {
+    title: "规格型号",
+    key: "specificationModel",
+    dataIndex: "specificationModel",
   },
-  factoryId: {
-    value: null,
-    type: "select",
-    title: "所属工厂",
-    name: ["factoryId"],
-    required: true,
-    options: {
-      database: factorySelect,
-      params: {},
-    },
-    linked: true,
+  {
+    title: "牌号",
+    key: "shopSign",
+    dataIndex: "shopSign",
   },
-  status: {
-    value: null,
-    type: "select",
-    title: "启用状态",
-    name: ["status"],
-    required: true,
-    options: [
-      {
-        label: "启用",
-        value: 1,
-      },
-      {
-        label: "禁用",
-        value: 0,
-      },
-    ],
+  {
+    title: "铁损",
+    key: "ironLoss",
+    dataIndex: "ironLoss",
   },
-  remark: {
-    value: null,
-    type: "textarea",
-    title: "描述",
-    name: ["remark"],
-    required: false,
-
-    col: { span: 24 },
+  {
+    title: "片厚",
+    key: "sheetThickness",
+    dataIndex: "sheetThickness",
   },
-};
+  {
+    title: "其他信息",
+    key: "split",
+    dataIndex: "split",
+    valueType:'split'
+  },
+  {
+    title: "供应商",
+    key: "supplierId",
+    dataIndex: "supplierId",
+  },
+  
+];
diff --git a/src/pages/Printer/index.jsx b/src/pages/Printer/index.jsx
index a0a800a..82c4879 100644
--- a/src/pages/Printer/index.jsx
+++ b/src/pages/Printer/index.jsx
@@ -10,11 +10,10 @@ import {
   message,
 } from "antd";
 import AutoTable from "@/components/AutoTable";
-import getPrem from "@/utils/getPrem"; //权限判断fn
 import { useRequest } from "umi";
-import defaultFields from "./fields";
+import defaultFields from "./fields.js";
 import { doFetch } from "@/utils/doFetch";
-import InitForm from "@/components/InitForm";
+import InitForm from "@/components/NewInitForm";
 import { start } from "@/utils/printHandle.js";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 const { confirm } = Modal;
@@ -174,9 +173,9 @@ const Station = (props) => {
       console.log(selectedRowKeys, selectedRows);
       setselectIds(selectedRowKeys);
     },
-    preserveSelectedRowKeys:true
+    preserveSelectedRowKeys: true,
   };
-
+  console.log(defaultFields);
   return (
     <div>
       <AutoTable
@@ -193,7 +192,7 @@ const Station = (props) => {
       ></AutoTable>
       <Drawer
         title={drawer?.title}
-        visible={drawer?.visible}
+        open={drawer?.visible}
         onClose={() => setDrawer((v) => ({ ...v, visible: false }))}
         footer={false}
         destroyOnClose={true}
@@ -208,20 +207,18 @@ const Station = (props) => {
           actions={() => {
             return null;
           }}
+          submitter={false}
         ></InitForm>
         <Button
-          style={{ width: "100%" }}
           type="primary"
-          size="large"
           //   loading={loading || !vs}
+          style={{ marginRight: 16 }}
           onClick={() => saveData()}
         >
           保存
         </Button>
         <Button
-          style={{ width: "100%" }}
           type="primary"
-          size="large"
           //   loading={loading || !vs}
           onClick={() => saveData()}
         >
-- 
2.21.0