fix: '台账配置重写'

src/pages/bsmanager/base/standingBook/BookConfigNew.jsx

+/* eslint-disable no-lonely-if */
+/* eslint-disable no-else-return */
+/* eslint-disable prefer-promise-reject-errors */
+/* eslint-disable camelcase */
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Form,
+  Input,
+  Select,
+  Tooltip,
+  Button,
+  notification,
+  Drawer,
+  Space,
+  Modal,
+  Row,
+  Col,
+  Switch,
+} from 'antd';
+import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { LoadEventFields } from '@/services/tablemanager/tablemanager';
+import {
+  GetCM_Ledger_LoadLedgerTable,
+  GetCMLedger_QueryLedgers,
+  Ledger_ReloadLedgerFields,
+  Ledger_QueryLedger,
+  Ledger_SaveLedger,
+} from '@/services/standingBook/api';
+import ChangeAdd from './changeAdd';
+import EditTable from './EditTable';
+import styles from './BookConfigNew.less';
+import { getFieldInfo } from 'panda-xform';
+
+const { Option } = Select;
+const { TextArea } = Input;
+const BookConfigNew = props => {
+  const {
+    callBackSubmit,
+    type,
+    formObj,
+    visible,
+    tableData,
+    pickItem1,
+    onCancel,
+    data,
+    maxLength,
+    keepTableData,
+  } = props;
+  const [standingTable, setStandingTable] = useState([]);
+  const [isVisible, setIsVisible] = useState(false); // 弹窗
+  const [pickItem, setPickItem] = useState(''); // 选择的字段
+  const [Order, setOrder] = useState(''); // 当前编辑序号
+  const [filed, setFiled] = useState({}); // 传给子组件列表数据
+  const [checkedList, setCheckedList] = useState([]);
+  const [allFileds, setAllFileds] = useState([]); // 当前表所有的字段
+  const [tbData, setTbData] = useState([]); // 当前表所有的字段
+  const [tableShow, setTableShow] = useState(false); // 当前表所有的字段
+  const [allData, setAllData] = useState([]); // 当前表所有的字段
+  const [formJosn, setFormJosn] = useState([]); // 形态解析
+  const [form] = Form.useForm();
+  const tableRef = useRef();
+  const desabledArr = [
+    'FileUpload',
+    'Coordinate',
+    'DrawPath',
+    'DrawArea',
+    'Device',
+    'RelationForm',
+  ];
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 5,
+    },
+    wrapperCol: {
+      span: 19,
+    },
+  };
+  const formItemLayout = {
+    labelCol: {
+      span: 5,
+    },
+    wrapperCol: {
+      span: 19,
+    },
+  };
+  const switchLayout = {
+    labelCol: {
+      span: 10,
+    },
+    wrapperCol: {
+      span: 14,
+    },
+  };
+  const { Item } = Form;
+  // 提交
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      // return;
+      if (validate) {
+        let aa = form.getFieldsValue().Type;
+        if (aa == '全部') {
+          notification.warning({
+            message: '提示',
+            duration: 3,
+            description: '分组名称不能为全部',
+          });
+        } else {
+          let datas = JSON.parse(JSON.stringify(validate));
+          for (let key in datas) {
+            if (datas[key] === false) {
+              datas[key] = 0;
+            } else if (datas[key] === true) {
+              datas[key] = 1;
+            }
+          }
+          let obj =
+            type === 'add' ? { ...datas, Order: maxLength } : { ...datas, Order, ID: formObj.ID };
+          obj.LedgerFieids = tableRef.current.onFinish();
+          Ledger_SaveLedger(obj)
+            .then(res => {
+              if (res.code === 0) {
+                form.resetFields();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: type === 'add' ? '新增成功' : '编辑成功',
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg,
+                });
+              }
+            })
+            .catch(() => {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: '网络异常请稍后再试',
+              });
+            });
+        }
+      }
+    });
+  };
+  useEffect(() => {
+    console.log(pickItem1);
+    console.log(data[0]);
+    if (visible) {
+      // 获取台账表
+      getTableData();
+      if (type === 'edit') {
+        Ledger_QueryLedger({ ledgerId: formObj.ID }).then(res => {
+          if (res.code === 0) {
+            // setTableShow(true)
+            form.setFieldsValue(res.data);
+            setOrder(res.data.Order);
+            let editArr = res.data.LedgerFieids;
+            changTable(res.data.TableName, editArr);
+            // tableRef.current.setTableData(false, res.data.LedgerFieids);
+          }
+        });
+      } else {
+        if (!pickItem1 || pickItem1 == '全部') {
+          form.setFieldsValue({ Type: data[0] });
+        } else {
+          form.setFieldsValue({ Type: pickItem1 });
+        }
+        form.setFieldsValue({ EnableTimeFilter: true });
+        form.setFieldsValue({ EnableQuickSearch: true });
+        form.setFieldsValue({ EnableBatchOperation: true });
+        form.setFieldsValue({ EnableImportExport: true });
+      }
+    } else {
+      setFiled({});
+      form.resetFields();
+      form.setFieldsValue({ AccountType: '台账' });
+      setTbData([]);
+      setAllData([]);
+    }
+  }, [visible]);
+
+  // 获取台账表
+  const getTableData = () => {
+    GetCM_Ledger_LoadLedgerTable().then(res => {
+      if (res.code === 0) {
+        setStandingTable(res.data.root);
+        if (type !== 'edit') {
+          tableRef.current.setTableData(false, []);
+        }
+      }
+    });
+  };
+  // 切换表后数据处理为对应格式
+  const changTable = (value, editArr = []) => {
+    Ledger_ReloadLedgerFields({ tableName: value }).then(res => {
+      if (res.data.LedgerFieids) {
+        let fileMap = new Map();
+        let initList = [];
+        // 处理为子组件需要的格式
+        res.data.LedgerFieids.forEach(item => {
+          initList.push(item.FieldName);
+          if (fileMap.has(item.Group)) {
+            let list = [...fileMap.get(item.Group)];
+            list.push(item.FieldName);
+            fileMap.set(item.Group, list);
+          } else {
+            fileMap.set(item.Group, [item.FieldName]);
+          }
+        });
+
+        const FormJson = getFieldInfo(JSON.parse(res.data.FormJson));
+        let arr = res.data.LedgerFieids;
+        arr.forEach(item => {
+          item.Shape = FormJson[item.FieldName]?.name || item.Shape;
+          item.widget = FormJson[item.FieldName]?.widget || 'TextInput';
+          if (desabledArr.includes(item.widget)) {
+            item.IsSort = 0;
+            item.AccurateSearch = 0;
+            item.LikeSearch = 0;
+          }
+        });
+        if (editArr.length) {
+          editArr.forEach(item => {
+            item.Shape = FormJson[item.FieldName] ? FormJson[item.FieldName].name : item.Shape;
+            item.widget = FormJson[item.FieldName]?.widget || 'TextInput';
+            if (desabledArr.includes(item.widget)) {
+              item.IsSort = 0;
+              item.AccurateSearch = 0;
+              item.LikeSearch = 0;
+            }
+          });
+          tableRef.current.setTableData(false, editArr);
+        } else {
+          // Fields 切换表后清空台账字段和表数据
+          form.setFieldsValue({ Fields: [] });
+          tableRef.current.setTableData(false, []);
+        }
+        setFormJosn(FormJson);
+        setAllData(arr);
+        // FormJson
+        // 给Map格式转为对象
+        fileMap = Object.fromEntries(fileMap.entries());
+        // 处理外部字段
+        Object.keys(form.getFieldsValue()).forEach(key => {
+          saveOutFieldsLength(key, initList);
+        });
+        setAllFileds(initList);
+        setFiled(fileMap);
+      }
+    });
+  };
+  // 保存外部字段个数
+  const saveOutFieldsLength = (key, initList) => {
+    switch (key) {
+      case 'Fields':
+        form.setFieldsValue({ outListFileds: dealExternal(key, initList) });
+        break;
+      case 'SearchFields':
+        form.setFieldsValue({ outSearchFields: dealExternal(key, initList) });
+        break;
+      case 'AddFields':
+        form.setFieldsValue({ outAddFields: dealExternal(key, initList) });
+        break;
+      case 'EditFields':
+        form.setFieldsValue({ outEditFields: dealExternal(key, initList) });
+        break;
+      case 'WebFields':
+        form.setFieldsValue({ outWebFields: dealExternal(key, initList) });
+        break;
+      case 'MobileFields':
+        form.setFieldsValue({ outMobileFields: dealExternal(key, initList) });
+        break;
+      default:
+        break;
+    }
+  };
+  // 选择字段回调函数
+  const onOK = prop => {
+    setIsVisible(false);
+    let obj = {};
+    obj[prop.pickItem] = prop.str;
+    let showArr = prop.str.split(',');
+    let editArr = tableRef.current.onFinish().map(item => {
+      return item.FieldName;
+    });
+    showArr = showArr.filter(item => {
+      return !editArr.includes(item);
+    });
+    tableRef.current.setTableData(
+      false,
+      tableRef.current.onFinish().concat(
+        allData.filter(item => {
+          return showArr.includes(item.FieldName);
+        }),
+      ),
+    );
+    form.setFieldsValue(obj);
+    saveOutFieldsLength(prop.pickItem, allFileds);
+  };
+  // 处理外部字段
+  const dealExternal = (fileds, list) => {
+    let isExternal;
+    let externalLength = 0;
+    if (form.getFieldValue(fileds).length) {
+      form
+        .getFieldValue(fileds)
+        .split(',')
+        .forEach(item => {
+          isExternal = list.some(val => val === item);
+          if (!isExternal && item !== '') {
+            // eslint-disable-next-line no-plusplus
+            externalLength++;
+          }
+        });
+    }
+
+    return externalLength;
+  };
+  // 勾选字段
+  const pickFiled = fileds => {
+    if (!form.getFieldValue('TableName')) {
+      notification.error({ message: '提示', duration: 3, description: '请选择台账表' });
+      return;
+    }
+    // 添加外部字段
+    let fil = { ...filed };
+    fil['外部字段'] = [];
+    let isExternal;
+    let list = form.getFieldValue(fileds).length ? form.getFieldValue(fileds).split(',') : [];
+    list.forEach(item => {
+      isExternal = allFileds.some(val => val === item);
+      if (!isExternal && item !== '') {
+        fil['外部字段'].push(item);
+      }
+    });
+    if (fil['外部字段'].length === 0) {
+      delete fil['外部字段'];
+    }
+    setFiled(fil);
+    setCheckedList(list);
+    setPickItem(fileds);
+    setIsVisible(true);
+  };
+  // 搜索框监听
+  const onSearch = value => {
+    if (value) {
+      form.setFieldsValue({ Type: value });
+    }
+  };
+
+  const isObject = obj => typeof obj === 'object';
+
+  return (
+    <Modal
+      title={`${type === 'add' ? '台账配置' : '台账编辑'}`}
+      visible={visible}
+      destroyOnClose
+      onOk={onSubmit}
+      onCancel={onCancel}
+      centered
+      bodyStyle={{ width: '100%', height: '800px', overflowY: 'scorll' }}
+      width="1600px"
+      // style={{ top: '-20px' }}
+      getContainer={false}
+      // style={{
+      //   maxWidth: '100vw',
+      //   top: 0,
+      //   paddingBottom: 0,
+      // }}
+      // bodyStyle={{
+      //   height: 'calc(100vh - 55px - 53px)',
+      //   overflowY: 'auto',
+      // }}
+      // width="100vw"
+    >
+      <div className={styles.top}>
+        <Form form={form} {...layout}>
+          <Row>
+            <Col span={8}>
+              <Item
+                label="台账名称"
+                name="Name"
+                rules={[
+                  {
+                    required: true,
+                    validator: (rule, value) => {
+                      if (
+                        keepTableData.find(i => i.name == form.getFieldsValue().Name) &&
+                        form.getFieldsValue().Name != formObj.name
+                      ) {
+                        return Promise.reject('台账名称已存在');
+                      } else if (form.getFieldsValue().Name == '') {
+                        return Promise.reject('台账名称不能为空');
+                      }
+                      return Promise.resolve();
+                    },
+                  },
+                ]}
+              >
+                <Input placeholder="台账名称不可重复" allowClear />
+              </Item>
+            </Col>
+            <Col span={8}>
+              <Item
+                label="台账分组"
+                name="Type"
+                rules={[{ required: true, message: '请选择分组' }]}
+              >
+                <Select
+                  showSearch
+                  filterOption={false}
+                  onSearch={onSearch}
+                  placeholder="请输入分组名称"
+                  allowClear
+                >
+                  {data.map((item, index) => (
+                    <Option value={item} key={index}>
+                      {item}
+                    </Option>
+                  ))}
+                </Select>
+              </Item>
+            </Col>
+            <Col span={8}>
+              <Item
+                label="台账类型"
+                name="AccountType"
+                rules={[{ required: true, message: '请选择类型' }]}
+              >
+                <Select placeholder="请选择台账类型">
+                  <Option value="台账">台账</Option>
+                  <Option value="反馈">反馈</Option>
+                  <Option value="设备">设备</Option>
+                </Select>
+              </Item>
+            </Col>
+            <Col span={8}>
+              <Item
+                label="台账主表"
+                name="TableName"
+                rules={[{ required: true, message: '请选择台账表' }]}
+              >
+                <Select
+                  placeholder=""
+                  optionFilterProp="children"
+                  onChange={changTable}
+                  showSearch
+                  disabled={type !== 'add'}
+                >
+                  {standingTable.map((item, index) => (
+                    <Option key={index} value={item.value}>
+                      {item.text}
+                    </Option>
+                  ))}
+                </Select>
+              </Item>
+            </Col>
+            <Col span={8}>
+              <Item
+                {...formItemLayout}
+                label={
+                  <>
+                    {form.getFieldValue('outListFileds') > 0 ? (
+                      <Tooltip title={`外部字段${form.getFieldValue('outListFileds')}个`}>
+                        <InfoCircleOutlined style={{ color: 'red', margin: '2px 3px 0 3px' }} />
+                      </Tooltip>
+                    ) : (
+                      ''
+                    )}
+                    <span>台账字段</span>
+                  </>
+                }
+                name="Fields"
+                rules={[{ required: true, message: '请选择台账字段' }]}
+              >
+                <div style={{ display: 'flex' }}>
+                  <Form.Item name="Fields" style={{ marginBottom: 0, width: '100%' }}>
+                    <TextArea
+                      placeholder="前端详情查看字段"
+                      allowClear
+                      style={{ height: '32px' }}
+                    />
+                  </Form.Item>
+                  <Button
+                    type="dashed"
+                    style={{ width: '50px', marginLeft: '10px' }}
+                    icon={<PlusOutlined />}
+                    onClick={() => {
+                      pickFiled('Fields');
+                    }}
+                  />
+                </div>
+              </Item>
+            </Col>
+            <Col span={8}>
+              <Item label="接口配置" name="Interface">
+                <Input placeholder="服务项目dll库" allowClear />
+              </Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item
+                {...switchLayout}
+                valuePropName="checked"
+                // style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
+                label="时间筛选"
+                name="EnableTimeFilter"
+              >
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item
+                {...switchLayout}
+                valuePropName="checked"
+                // style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
+                label="快速检索"
+                name="EnableQuickSearch"
+              >
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item
+                {...switchLayout}
+                valuePropName="checked"
+                // style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
+                label="站点过滤"
+                name="EnableSiteFilter"
+              >
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item
+                {...switchLayout}
+                valuePropName="checked"
+                // style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
+                label="导入导出"
+                name="EnableImportExport"
+              >
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item
+                {...switchLayout}
+                valuePropName="checked"
+                // style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
+                label="批量操作"
+                name="EnableBatchOperation"
+              >
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item
+                {...switchLayout}
+                valuePropName="checked"
+                // style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
+                label="打印功能"
+                name="EnablePrint"
+              >
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+        <ChangeAdd
+          visible={isVisible}
+          onCancel={() => {
+            setIsVisible(false);
+            setCheckedList([]);
+          }}
+          callBackSubmit={onOK}
+          newCheckedList={checkedList}
+          filed={filed}
+          pickItem={pickItem}
+          formObj={formObj}
+        />
+      </div>
+      <div className={styles.bottom}>
+        <EditTable visible={tableShow} ref={tableRef} tbData={tbData} formObj={formObj} />
+      </div>
+    </Modal>
+  );
+};
+export default BookConfigNew;

src/pages/bsmanager/base/standingBook/BookConfigNew.less

+.top {
+  height: 22%;
+  overflow: auto;
+}
+.bottom {
+  height: 78%;
+  overflow: hidden;
+}
+:global {
+  .ant-modal-body {
+    .ant-form {
+      width: 100%!important;
+    }
+    .ant-col-12 {
+      // text-align: left;
+      // padding-left: 16px;
+    }
+    .ant-form-item-label {
+      // text-align: left;
+      // padding-left: 10px;
+    }
+    .ant-form-item-control {
+      // padding-left: 10px;
+    }
+  }
+  .panda-pro-pages-bsmanager-base-standing-book-standing-book-userManageContainer .ant-modal-body {
+    padding: 15px;
+  }
+}
\ No newline at end of file

src/pages/bsmanager/base/standingBook/EditTable.jsx

+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useContext,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import {
+  CreateTablePost,
+  getTableInfo,
+  updateTablePost,
+  GetDefaultTableFields,
+  reloadTableFields,
+  removeFields,
+} from '@/services/tablemanager/tablemanager';
+import {
+  Form,
+  Modal,
+  Button,
+  Input,
+  Select,
+  Checkbox,
+  Table,
+  notification,
+  InputNumber,
+  Tooltip,
+  Switch,
+  Spin,
+  Empty,
+} from 'antd';
+import {
+  DeleteOutlined,
+  PlusOutlined,
+  MinusOutlined,
+  DeleteFilled,
+  KeyOutlined,
+} from '@ant-design/icons';
+import styles from './TableView.less';
+import primaryKey from '../../../../assets/images/icons/主键.svg';
+// import index from '../../../../assets/images/icons/索引.svg';
+import clearImg from '@/assets/font/omsfont/clear.svg';
+// import { defaultFields } from './defaultFields';
+const EditableContext = React.createContext(null);
+
+const tableMap = {
+  事件表: '事件',
+  事件工单表: '事件',
+  工单表: '工单',
+  台账表: '台账',
+  设备表: '设备',
+  反馈表: '反馈',
+};
+const desabledArr = ['FileUpload', 'Coordinate', 'DrawPath', 'DrawArea', 'Device', 'RelationForm'];
+const EditableRow = ({ index, ...props }) => {
+  const [form] = Form.useForm();
+  return (
+    <Form form={form} component={false}>
+      <EditableContext.Provider value={form}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  );
+};
+const EditableCell = ({
+  index,
+  title,
+  editable,
+  children,
+  dataIndex,
+  record,
+  handleSave,
+  ellipsis,
+  width,
+  dataSource,
+  tableDataCount,
+  defaultData,
+  setDefaultData,
+  ...restProps
+}) => {
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef(null);
+  const form = useContext(EditableContext);
+
+  // 复选框回显
+  useEffect(() => {
+    const arr = [
+      'WebDisplay',
+      'IsSort',
+      'AccurateSearch',
+      'LikeSearch',
+      'IsAdd',
+      'IsEdit',
+      'MobileDisplay',
+    ];
+    if (record && arr.includes(dataIndex)) {
+      form.setFieldsValue({
+        [dataIndex]: record[dataIndex],
+      });
+    }
+  }, [dataSource]);
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [editing]);
+
+  const toggleEdit = () => {
+    setEditing(!editing);
+    form.setFieldsValue({
+      [dataIndex]: record[dataIndex],
+    });
+  };
+
+  const save = async () => {
+    try {
+      const values = await form.validateFields();
+      toggleEdit();
+      handleSave({ ...record, [dataIndex]: values[dataIndex], index, errors: [] }, dataIndex);
+    } catch (errInfo) {
+      toggleEdit();
+      handleSave({ ...record, index, errors: errInfo.errorFields[0].errors }, dataIndex);
+      console.log('Save failed:', errInfo);
+    }
+  };
+  const saveCheckBox = async key => {
+    let values = await form.validateFields();
+    values[key] = values[key] ? 1 : 0;
+    form.setFieldsValue({
+      [dataIndex]: values[key],
+    });
+    handleSave({ ...record, ...values, index });
+  };
+  const saveSwitch = async key => {
+    let values = await form.validateFields();
+    values[key] = values[key] ? 1 : 0;
+    form.setFieldsValue({
+      [dataIndex]: values[key],
+    });
+    handleSave({ ...record, ...values, index });
+  };
+
+  const saveAddCheckBox = async e => {
+    const values = await form.validateFields();
+    form.setFieldsValue({
+      [dataIndex]: values.IsAddFieldConfig,
+    });
+    handleSave({ ...record, ...values, index });
+    let defaultArr = JSON.parse(JSON.stringify(defaultData));
+    defaultArr.forEach(item => {
+      if (item.Name === record.Name) {
+        item.IsAddFieldConfig = values.IsAddFieldConfig;
+      }
+    });
+    setDefaultData(defaultArr);
+  };
+
+  const rendeFrom = val => {
+    let lengthMin = 0;
+    let lengthMax = 0;
+    let decimalPlaceMin = 0;
+    let decimalPlaceMax = 0;
+    // 字段类型为精确数值型（decimal），字段长度1-38小数点位数0-38
+    if (record.FieldType === 8) {
+      lengthMin = 1;
+      lengthMax = 38;
+      decimalPlaceMin = 0;
+      decimalPlaceMax = 38;
+    }
+    // 字段类型为字符串型（nvarchar）、二进制（varbinary），字段长度为0-4000
+    if (record.FieldType === 2 || record.FieldType === 10) {
+      lengthMin = 1;
+      lengthMax = 4000;
+    }
+    // 字段类型为字符串型（varchar）、，字段长度为0-8000
+    if (record.FieldType === 0 || record.FieldType === 1) {
+      lengthMin = 1;
+      lengthMax = 8000;
+    }
+    if (val === '字段名称') {
+      return <Input ref={inputRef} onPressEnter={save} onBlur={save} />;
+    }
+    if (val === '列表对齐') {
+      return (
+        <Select ref={inputRef} onPressEnter={save} onBlur={save} showSearch>
+          <Select.Option value="左">左</Select.Option>
+          <Select.Option value="中">中</Select.Option>
+          <Select.Option value="右">右</Select.Option>
+        </Select>
+      );
+    }
+    if (val === '字段长度') {
+      return (
+        <InputNumber
+          ref={inputRef}
+          min={lengthMin}
+          max={lengthMax}
+          onPressEnter={save}
+          onBlur={save}
+        />
+      );
+    }
+    if (val === '小数点位') {
+      return (
+        <InputNumber
+          ref={inputRef}
+          min={decimalPlaceMin}
+          max={decimalPlaceMax}
+          onPressEnter={save}
+          onBlur={save}
+        />
+      );
+    }
+
+    return <Input ref={inputRef} onPressEnter={save} onBlur={save} />;
+  };
+
+  let childNode = children;
+
+  if (editable) {
+    // 字段类型为 字符串型（varchar）、二进制（varbinary）、字符型（nchar）、字符串型（nvarchar）、精确数值型（decimal）让修改
+    if (
+      title === '字段长度' &&
+      (record.FieldType !== 0 &&
+        record.FieldType !== 10 &&
+        record.FieldType !== 1 &&
+        record.FieldType !== 2 &&
+        record.FieldType !== 8)
+    ) {
+      return <td {...restProps}>--</td>;
+    }
+    // 字段类型为 精确数值型（decimal）让修改
+    if (title === '小数点位' && record.FieldType !== 8) {
+      return <td {...restProps}>--</td>;
+    }
+    // 只读
+    if (record.ReadOnly && title !== '允许空值' && title !== '是否附加') {
+      return <td {...restProps}>{childNode}</td>;
+    }
+    // 表单规则
+    let rules = [];
+    if (title === '字段名称') {
+      rules = [
+        {
+          required: true,
+          message: '字段名称不能为空',
+        },
+        {
+          validator: (rule, value) => {
+            let list = JSON.parse(JSON.stringify(dataSource));
+            // 合并内置字段
+            if (
+              value &&
+              [...defaultData, ...list].some(
+                (item, i) => item.Name === value && item.keyIndex !== record.keyIndex,
+              )
+            ) {
+              return Promise.reject(new Error('字段名称重复，请重新输入'));
+            }
+            return Promise.resolve();
+          },
+        },
+        {
+          pattern: /^(?!(\d+)$)[\u4e00-\u9fffa-zA-Z0-9_]+$/,
+          message: '不能输入特殊符号或者纯数字',
+        },
+      ];
+    }
+    childNode = editing ? (
+      <Form.Item
+        style={{
+          width: `${width - 20}px`,
+          height: '32px',
+          margin: 0,
+          marginLeft: '50%',
+          transform: 'translateX(-50%)',
+        }}
+        rules={rules}
+        name={dataIndex}
+      >
+        {rendeFrom(title)}
+      </Form.Item>
+    ) : (
+      <div
+        className="editable-cell-value-wrap"
+        // title={children[1]}
+        style={{
+          width: `${width - 20}px`,
+          height: '32px',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          margin: 'auto',
+        }}
+        onClick={toggleEdit}
+      >
+        {children}
+      </div>
+    );
+    const checkArr = ['列表显示', '表单可添加', '表单可编辑', '手持可用'];
+    const switchArr = ['是否排序', '表头检索', '模糊检索'];
+    if (checkArr.includes(title)) {
+      childNode = (
+        <Form.Item
+          style={{
+            margin: 0,
+          }}
+          name={dataIndex}
+          valuePropName="checked"
+        >
+          <Checkbox
+            onChange={() => saveCheckBox(dataIndex)}
+            disabled={record.ReadOnly || tableDataCount}
+          />
+        </Form.Item>
+      );
+    }
+    if (switchArr.includes(title)) {
+      childNode = (
+        <Form.Item
+          style={{
+            margin: 0,
+          }}
+          name={dataIndex}
+          valuePropName="checked"
+        >
+          <Switch
+            checkedChildren="是"
+            unCheckedChildren="否"
+            onChange={() => saveSwitch(dataIndex)}
+            disabled={desabledArr.includes(record.widget)}
+          />
+        </Form.Item>
+      );
+    }
+  }
+
+  return <td {...restProps}>{childNode}</td>;
+};
+const TableView = forwardRef((props, ref) => {
+  const { callBackSubmit, onCancel, visible, tableType, defaultFieldsList, tbData } = props;
+  const [dataSource, setDataSource] = useState([]);
+  const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(!visible);
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [tableMsg, setTableMsg] = useState({});
+  const [tableDataCount, setTableDataCount] = useState(false);
+  const [defaultData, setDefaultData] = useState([]);
+  const [showDefault, setShowDefault] = useState(true);
+  const [exceptionArr, setExceptionArr] = useState([]);
+  const [form] = Form.useForm();
+
+  useImperativeHandle(ref, () => ({
+    onFinish,
+    setTableData,
+  }));
+
+  const formObj = {
+    IsCanUpgrade: false,
+    TableDataCount: false,
+    TableFields: null,
+    exceptionEvents: '(无)',
+    exceptionFields: '(无)',
+    extraFieldCount: '10',
+    fieldCount: '12',
+    fieldRatio: '12/22',
+    groupCount: '3',
+    groupName: '事件工单表',
+    groupOrder: 0,
+    interfaceText: '',
+    key: 19,
+    labelStyle: '',
+    missingFieldCount: '(无)',
+    missingFieldCountHtml: '1',
+    officeTmpl: '无',
+    officeTmplHtml: '2',
+    order: 0,
+    repeatFieldCount: '(无)',
+    repeatFieldCountHtml: '1',
+    tableAlias: '资产采购',
+    tableID: 165,
+    tableName: '事件_资产_采购申请表',
+    tableStyle: '一行三列/左右布局',
+  };
+  const type = 'tableEdit';
+  useEffect(() => {
+    if (visible) {
+      if (type === 'tableEdit') {
+        setCount(tbData.length);
+        setDataSource(tbData);
+        // form.setFieldsValue({
+        //   tableName: formObj.tableName,
+        //   alias: formObj.tableAlias,
+        // });
+        // getTableInfo({ tableName: formObj.tableName, isIncludeField: true })
+        //   .then(res => {
+        //     setLoading(false);
+        //     if (res.code === 0) {
+        //       setTableDataCount(res.data.root[0].TableDataCount);
+        //       setTableMsg({
+        //         tableStyle: res.data.root[0].tableStyle ? res.data.root[0].tableStyle : '大',
+        //         officeTmpl: res.data.root[0].officeTmpl,
+        //         interfaceName: res.data.root[0].interfaceText,
+        //         tableID: res.data.root[0].tableID,
+        //       });
+        //       const defaultList = [];
+        //       const fieldList = res.data.root[0].TableFields.map((item, index) => {
+        //         item.groupName = formObj.groupName;
+        //         const obj = {
+        //           ...item,
+        //           keyIndex: index,
+        //         };
+        //         if (item.ReadOnly) {
+        //           defaultList.push(obj);
+        //         }
+        //         return obj;
+        //       });
+        //       setDefaultData(defaultList);
+        //       setCount(fieldList.length);
+
+        //       setShowDefault(false);
+        //       let list = JSON.parse(JSON.stringify(fieldList));
+        //       list = list.filter(item => !item.ReadOnly);
+        //       setDataSource(list);
+        //     } else {
+        //       notification.error({ message: '提示', duration: 3, description: res.msg });
+        //     }
+        //   })
+        //   .catch(() => {
+        //     setLoading(false);
+        //     notification.error({ message: '提示', duration: 3, description: '网络异常' });
+        //   });
+      } else {
+        let list = defaultFieldsList
+          .find(item => item.value === tableType)
+          .list.map((item, i) => ({ ...item, keyIndex: i }));
+        console.log(list);
+        setDefaultData(list);
+        setCount(list.length);
+        setShowDefault(false);
+        let listitem = JSON.parse(JSON.stringify(list));
+        listitem = listitem.filter(item => !item.ReadOnly);
+        setDataSource(listitem);
+      }
+      reloadTableFieldsArr();
+    } else {
+      setShowDefault(false);
+      setDataSource([]);
+      setDefaultData([]);
+      setSelectedRowKeys([]);
+      setExceptionArr([]);
+      form.resetFields();
+    }
+  }, [visible]);
+
+  const removeMissingFields = () => {
+    let ids = exceptionArr.map(item => item.ID).join(',');
+    removeFields({
+      fieldIDs: ids,
+    }).then(res => {
+      if (res.code === 0) {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '清除成功',
+        });
+        reloadTableFieldsArr();
+      }
+    });
+  };
+  const reloadTableFieldsArr = () => {
+    reloadTableFields({
+      tableName: formObj.tableName,
+    }).then(res => {
+      if (res.msg === 'Ok') {
+        setExceptionArr(res.data.root.filter(item => item.group === '(缺少字段)'));
+      }
+    });
+  };
+
+  // 设置loading与表格数据
+  const setTableData = (flag, data) => {
+    setLoading(flag);
+    setDataSource(data);
+  };
+
+  // 提交表单
+  const onFinish = () => {
+    // 校验提示
+    let checkMsg = '';
+    let TableFields = JSON.parse(JSON.stringify(dataSource));
+
+    // console.log(TableFields,'TableFieldsTableFields');
+    return TableFields;
+  };
+  // 添加字段
+  const handleAdd = () => {
+    const newData = {
+      keyIndex: count,
+      Name: '',
+      FieldType: 0,
+      FieldLength: 255,
+      DecimalPlace: 0,
+      IsNullable: true,
+      IsAddFieldConfig: true,
+    };
+    setDataSource([...dataSource, newData]);
+    setCount(count + 1);
+    setTimeout(() => {
+      let tableEl = document.querySelector(`.${styles.content} .ant-table-body`);
+      tableEl.scrollTop = tableEl.scrollHeight;
+    }, 10);
+  };
+
+  // 批量删除字段
+  const deleteFilleds = () => {
+    if (selectedRowKeys.length === 0) {
+      notification.error({ message: '提示', duration: 3, description: '请选择字段' });
+      return;
+    }
+    const list = [];
+    dataSource.forEach(item => {
+      const isDelete = selectedRowKeys.some(value => value === item.keyIndex);
+      if (!isDelete) {
+        list.push(item);
+      }
+    });
+    setDataSource(list);
+  };
+  // 删除字段
+  const handleDelete = (record, keyIndex) => {
+    if (record.ReadOnly) {
+      notification.error({ message: '提示', duration: 3, description: '内置字段不允许删除' });
+      return;
+    }
+    const newData = dataSource.filter((item, index) => index !== keyIndex);
+    setDataSource(newData);
+  };
+  const addArr = useMemo(() => {
+    let arr = JSON.parse(JSON.stringify(dataSource));
+    if (showDefault) {
+      return arr;
+    }
+    return [...defaultData, ...arr];
+  }, [showDefault, defaultData, dataSource]);
+  // 修改后存值
+  const handleSave = (row, key) => {
+    if (key === 'FieldType') {
+      if (row.FieldType === 0 || row.FieldType === 2) {
+        row.FieldLength = 255;
+        row.DecimalPlace = 0;
+      } else if (row.FieldType === 10) {
+        row.FieldLength = 50;
+        row.DecimalPlace = 0;
+      } else if (row.FieldType === 1) {
+        row.FieldLength = 10;
+        row.DecimalPlace = 0;
+      } else if (row.FieldType === 8) {
+        row.FieldLength = 18;
+        row.DecimalPlace = 3;
+      } else {
+        row.FieldLength = 0;
+        row.DecimalPlace = 0;
+      }
+    }
+    const { index } = row;
+    const newData = [...dataSource];
+    const item = newData[index];
+    newData.splice(index, 1, { ...item, ...row });
+    // 内置字段同步更改
+    // if (index < defaultData.length) {
+    //   const newDefaultData = [...defaultData];
+    //   newDefaultData.splice(index, 1, { ...item, ...row });
+    //   setDefaultData(newDefaultData);
+    // }
+    setDataSource(newData);
+  };
+  // 是否显示默认字段
+  const showDefaultFields = e => {
+    setShowDefault(e);
+    let list = JSON.parse(JSON.stringify(dataSource));
+    if (e) {
+      // 显示内置字段
+      list = [...defaultData, ...list];
+    } else {
+      list = list.filter(item => !item.ReadOnly);
+    }
+    setDataSource(list);
+  };
+  const deleteAddField = (row, index) => {
+    let arr = JSON.parse(JSON.stringify(dataSource));
+    arr.forEach(item => {
+      if (item.Name === row.Name) {
+        item.IsAddFieldConfig = false;
+      }
+    });
+    if (!showDefault) {
+      let defaultArr = JSON.parse(JSON.stringify(defaultData));
+      defaultArr.forEach(item => {
+        if (item.Name === row.Name) {
+          item.IsAddFieldConfig = false;
+        }
+      });
+      setDefaultData(defaultArr);
+    }
+    setDataSource(arr);
+    // }
+  };
+  // 表格设置
+  const components = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell,
+    },
+  };
+  const defaultColumns = [
+    {
+      title: '序号',
+      align: 'center',
+      width: 50,
+      render: (text, record, index) => <span>{index + 1}</span>,
+      fixed: 'left',
+    },
+    {
+      title: '字段名称',
+      dataIndex: 'FieldName',
+      width: 200,
+      // ellipsis: true,
+      // editable: true,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      title: '字段别名',
+      dataIndex: 'AliasName',
+      width: 200,
+      // ellipsis: true,
+      // editable: true,
+      align: 'center',
+    },
+    {
+      title: '字段形态',
+      dataIndex: 'Shape',
+      width: 200,
+      ellipsis: true,
+      // editable: true,
+      align: 'center',
+      // render: text => {
+      //   switch (text) {
+      //     case 0:
+      //       return '字符串型（varchar）';
+      //     case 1:
+      //       return '字符型（nchar）';
+      //     case 2:
+      //       return '字符串型（nvarchar）';
+      //     case 3:
+      //       return '字符串型（nvarchar(max)）';
+      //     case 4:
+      //       return '布尔型（bit）';
+      //     case 5:
+      //       return '整数型（int）';
+      //     case 6:
+      //       return '浮点型（float）';
+      //     case 7:
+      //       return '长整型（bigint）';
+      //     case 8:
+      //       return '精确数值型（decimal）';
+      //     case 9:
+      //       return '时间（datetime）';
+      //     case 10:
+      //       return '二进制（varbinary）';
+      //     case 11:
+      //       return '二进制（varbinary(max)）';
+      //     case 12:
+      //       return '字符串型（varchar(max)）';
+
+      //     default:
+      //       return null;
+      //   }
+      // },
+    },
+    {
+      title: '列表显示',
+      dataIndex: 'WebDisplay',
+      width: 100,
+      ellipsis: true,
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '列表对齐',
+      dataIndex: 'Alignment',
+      width: 100,
+      ellipsis: true,
+      editable: true,
+      align: 'center',
+    },
+    // {
+    //   title: '允许空值',
+    //   dataIndex: 'IsNullable',
+    //   width: 100,
+    //   editable: true,
+    //   align: 'center',
+    // },
+    {
+      title: '是否排序',
+      dataIndex: 'IsSort',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '表头检索',
+      dataIndex: 'AccurateSearch',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '模糊检索',
+      dataIndex: 'LikeSearch',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '表单可添加',
+      dataIndex: 'IsAdd',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '表单可编辑',
+      dataIndex: 'IsEdit',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '手持可用',
+      dataIndex: 'MobileDisplay',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
+    // {
+    //   title: '操作',
+    //   width: 50,
+    //   align: 'center',
+    //   render: (_, record, index) =>
+    //     dataSource.length >= 1 ? (
+    //       <Tooltip title="删除">
+    //         <Button
+    //           style={{ border: 'none', padding: '4px 5px', background: 'none' }}
+    //           onClick={() => handleDelete(record, index)}
+    //           disabled={record.ReadOnly}
+    //         >
+    //           <DeleteOutlined
+    //             style={{ fontSize: '16px', color: `${record.ReadOnly ? '#ccc' : '#e86060'}` }}
+    //             disabled={record.ReadOnly}
+    //           />
+    //         </Button>
+    //       </Tooltip>
+    //     ) : null,
+    // },
+  ];
+  const columns = defaultColumns.map(col => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: (record, index) => ({
+        index,
+        record,
+        editable: col.editable,
+        dataIndex: col.dataIndex,
+        width: col.width,
+        title: col.title,
+        ellipsis: col.ellipsis,
+        align: col.align,
+        dataSource,
+        tableDataCount,
+        defaultData,
+        setDefaultData,
+        handleSave,
+      }),
+    };
+  });
+  // 表格复选框
+  const onSelectChange = newSelectedRowKeys => {
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+    getCheckboxProps: record => ({
+      disabled: record.ReadOnly,
+    }),
+  };
+  return (
+    // <Modal
+    //   title={type === 'add' ? `建表【${tableType}】` : `表编辑`}
+    //   visible={visible}
+    //   width="1300px"
+    //   onOk={onFinish}
+    //   onCancel={onCancel}
+    //   maskClosable={false}
+    //   destroyOnClose
+    //   centered
+    // >
+    <div className={styles.content}>
+      <div>
+        <Spin spinning={loading}>
+          <Table
+            rowKey="keyIndex"
+            // rowSelection={rowSelection}
+            size="small"
+            style={{ marginTop: '10PX' }}
+            components={components}
+            rowClassName={() => 'editable-row'}
+            bordered
+            dataSource={dataSource}
+            columns={columns}
+            scroll={{ y: '540px' }}
+            pagination={false}
+            id="box"
+          />
+          <div id="page-bottom" />
+        </Spin>
+      </div>
+    </div>
+    // </Modal>
+  );
+});
+export default TableView;

src/pages/bsmanager/base/standingBook/TableView.less

+.content {
+  height: 620px;
+  display: flex;
+
+  >div {
+    width: 100%;
+  }
+
+  .subContent {
+    width: 25%;
+    padding: 8px;
+    margin-left: 10px;
+    border-left: 3px solid gainsboro;
+
+    .subArea,
+    .exceptionArea {
+      height: 100%;
+
+      .subTitle {
+        background: #E6F3FF;
+        color: #2495FF;
+        padding: 4px 2px;
+        border-radius: 8px;
+        padding-left: 4px;
+        border: 1px solid #C0DFFC;
+      }
+
+      .subItems {
+        padding: 0 10px;
+        overflow-y: auto;
+        height: 95%;
+        padding: 5px 10px;
+
+        .subItem {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 5px;
+
+          // >span:last-child:hover {
+          //   cursor: pointer;
+          // }
+          .deleteItem {
+            &:hover {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+
+    .exceptionArea {
+      height: 20%;
+      margin-top: 20px;
+
+      .subTitle {
+        background: #FCE7E7;
+        color: #FF4C3E;
+        border: 1px solid #FDBBBB;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  :global {
+    .ant-table-row {
+      height: 49px;
+    }
+
+    .editable-cell {
+      position: relative;
+    }
+
+    .editable-cell-value-wrap {
+      padding: 5px 12px;
+      cursor: pointer;
+    }
+
+    .editable-row:hover .editable-cell-value-wrap {
+      padding: 4px 11px;
+      border: 1px solid #fff;
+      border-radius: 2px;
+    }
+
+    [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
+      border: 1px solid #434343;
+    }
+
+    .ant-table-cell-ellipsis {
+      overflow: visible;
+    }
+
+    .ant-table-cell {
+      overflow: visible;
+    }
+
+    .ant-form-item-explain {
+      position: absolute;
+      height: 35px;
+      // width: 180px;
+      padding: 0 5px;
+      background-color: #ff4d4f;
+      top: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 5px;
+    }
+
+    .ant-form-item-explain-error {
+      color: #fff;
+      line-height: 35px;
+    }
+
+    .ant-select-arrow .anticon {
+      margin-top: 8px;
+    }
+  }
+
+}
\ No newline at end of file

src/pages/bsmanager/base/standingBook/standingBook.jsx

@@ -37,6 +37,7 @@ import {
   ImportLedgerConfig,
 } from '@/services/standingBook/api';
 import AddModal from './BookConfig';
+import AddModalNew from './BookConfigNew';
 import styles from './standingBook.less';
 // import Search from 'antd/lib/transfer/search';
 const StandingBook = props => {
@@ -567,7 +568,19 @@ const StandingBook = props => {
             />
           </div>
         </div>
-        <AddModal
+        {/* <AddModal
+          visible={isVisible}
+          type={isType}
+          data={data}
+          pickItem1={pickItem}
+          formObj={formObj}
+          maxLength={maxLength}
+          callBackSubmit={onSubmit}
+          onCancel={() => setIsVisible(false)}
+          tableData={tableData}
+          keepTableData={keepTableData}
+        /> */}
+        <AddModalNew
           visible={isVisible}
           type={isType}
           data={data}