fix: '表字段字段配置大保存'

src/pages/bsmanager/base/tablemanager/filedConfig/fieldEditor.jsx

+/* eslint-disable prefer-destructuring */
+/* eslint-disable import/order */
+/* eslint-disable default-case */
+/* eslint-disable one-var */
+/* eslint-disable no-unused-expressions */
+/* eslint-disable no-case-declarations */
 import React, { useState, useEffect } from 'react';
 import {
   Form,
@@ -11,6 +17,7 @@ import {
   Drawer,
   Space,
   Button,
+  Empty,
 } from 'antd';
 
 import {
@@ -23,14 +30,25 @@ import {
 import styles from './index.less';
 import ChangeAdd from './changeAdd';
 import VerifyModal from './VerifyModal';
-import { PlusSquareOutlined } from '@ant-design/icons';
+import { PlusSquareOutlined, UnorderedListOutlined, FontColorsOutlined } from '@ant-design/icons';
+import Tree from '@/components/ExpendableTree';
 import { shape } from 'prop-types';
 const AddModal = props => {
-  const { callBackSubmit = () => {}, isType, itemData, isVisible, formObj1, onCancel } = props;
+  const {
+    callBackSubmit = () => {},
+    isType,
+    itemData,
+    isVisible,
+    formObj1,
+    onCancel,
+    treeData,
+    keepTreeFirst,
+  } = props;
   const [loading, setLoading] = useState(false);
   const [fieldName, setFieldName] = useState([]); // 弹窗
   const [eventList, setEventList] = useState([]); // 事件
   const [filed, setFiled] = useState({}); // 事件
+  const [treeValue, setTreeValue] = useState([]);
   const [verification, setVerification] = useState([]);
   const [Shape, setShape] = useState('文本');
   const [characteristics, setCharacteristics] = useState([
@@ -81,6 +99,7 @@ const AddModal = props => {
   const [type, setType] = useState(''); // 弹窗类型
   const [formObj, setFormObj] = useState({ rule: [], numerical: '' });
   const [characterValue, setCharacterValue] = useState('');
+  const [show, setShow] = useState('block');
   const [pramData, setPramData] = useState({
     Unit: '',
     ExceptionEvent: '',
@@ -95,78 +114,93 @@ const AddModal = props => {
     must: false,
     coordinates: false,
   });
-  const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
+  const [currentSelectOrg, setCurrentSelectOrg] = useState([]);
+  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
+  const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
+  const [valueData, setValueData] = useState([]); // 保存所有修改数据
+  const [keep, setKeep] = useState();
   const { TextArea } = Input;
   const [form] = Form.useForm();
   const { Item } = Form;
   // 提交
   const onSubmit = () => {
-    console.log(itemData, 'itemData');
-    form.validateFields().then(validate => {
-      if (validate) {
-        setLoading(true);
-        let obj = form.getFieldsValue();
-        let data = [
-          {
-            Unit: pramData.Unit || '',
-            StoreType: 'nvarchar(255)',
-            Group: pramData.Group || '',
-            Shape,
-            ExceptionEvent: pramData.ExceptionEvent || '',
-            RowSpan: Number(pramData.RowSpan) || 0,
-            ColSpan: pramData.ColSpan || 0,
-            ReadOnly: pramData.ReadOnly || false,
-            EditableLater: pramData.EditableLater || false,
-            ExceptionValue: pramData.ExceptionValue || '',
-            Preset: pramData.Preset || '',
-            ID: Number(itemData.ID),
-            Order: Number(itemData.order),
-            Name: obj.Name,
-            Alias: obj.Alias,
-            SyncEvent: obj.SyncEvent,
-            ValidationRule: obj.ValidationRule,
-            ExceptionEventFields: characterValue,
-          },
-        ];
+    // 不切换树
+    if (valueData.length == 0) {
+      console.log(pramData);
+      form.validateFields().then(validate => {
+        if (validate) {
+          setLoading(true);
+          let obj = form.getFieldsValue();
+          let data = [
+            {
+              Unit: pramData.Unit || '',
+              StoreType: 'nvarchar(255)',
+              Group: pramData.Group || '',
+              Shape,
+              ExceptionEvent: pramData.ExceptionEvent || '',
+              RowSpan: Number(pramData.RowSpan) || 0,
+              ColSpan: pramData.ColSpan || 0,
+              ReadOnly: pramData.ReadOnly || false,
+              EditableLater: pramData.EditableLater || false,
+              ExceptionValue: pramData.ExceptionValue || '',
+              Preset: pramData.Preset || '',
+              ID: pramData.ID,
+              Order: pramData.Order,
+              Name: obj.Name,
+              Alias: obj.Alias,
+              SyncEvent: obj.SyncEvent,
+              ValidationRule: obj.ValidationRule,
+              ExceptionEventFields: characterValue,
+            },
+          ];
 
-        switch (Shape) {
-          case '编码':
-            data[0].Config = `${obj.code}.${obj.prefix ? obj.prefix : ''}`;
-            break;
-          case '坐标控件':
-            pramData.coordinates ? (data[0].Config = '当前坐标') : (data[0].Config = '');
-            break;
-          case '图片':
-          case '可预览图片':
-            data[0].Preset = pramData.picture ? '拍照相册' : '';
-            data[0].ValidationRule = pramData.must ? 'required' : '';
-            break;
-          default:
-            data[0].Config = obj.Config;
-        }
-        UpdateFields(data).then(res => {
-          setLoading(false);
-          if (res.msg === 'Ok' || res.msg === '') {
-            form.resetFields();
-            callBackSubmit();
-            notification.success({
-              message: '提示',
-              duration: 3,
-              description: '修改成功',
-            });
-          } else {
-            notification.error({
-              message: '提示',
-              duration: 3,
-              description: res.msg,
-            });
+          switch (Shape) {
+            case '编码':
+              data[0].Config = `${obj.code}.${obj.prefix ? obj.prefix : ''}`;
+              break;
+            case '坐标控件':
+              pramData.coordinates ? (data[0].Config = '当前坐标') : (data[0].Config = '');
+              break;
+            case '图片':
+            case '可预览图片':
+              data[0].Preset = pramData.picture ? '拍照相册' : '';
+              data[0].ValidationRule = pramData.must ? 'required' : '';
+              break;
+            default:
+              data[0].Config = obj.Config;
           }
-        });
-      }
-    });
+          UpdateFields(data).then(res => {
+            setLoading(false);
+            if (res.msg === 'Ok' || res.msg === '') {
+              form.resetFields();
+              callBackSubmit();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '修改成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    } else {
+      onSelect(1.14, keep);
+    }
   };
 
   useEffect(() => {
+    setTreeValue(treeData);
+    setValueData([]);
+    setShow('block');
+    setExpendKey(itemData.ID);
+    setCurrentSelectOrg(itemData.ID);
+    console.log(treeData);
     if (isType != '') {
       let req1 = getField({ fieldID: itemData.ID });
       let req2 = loadTableFields({ tableName: formObj1 });
@@ -207,6 +241,7 @@ const AddModal = props => {
               break;
           }
           setPramData({ ...res[0].data.root, coordinates, must, picture });
+          console.log(pramData);
           let index = res[2].data.root.find(item => {
             return item.Name == res[0].data.root.ExceptionEvent;
           });
@@ -412,248 +447,509 @@ const AddModal = props => {
     }
     setPramData(data);
   };
+
+  const mapTree = org => {
+    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+    return {
+      title: (
+        <span className={styles.titleText}>
+          {org.children ? (
+            <UnorderedListOutlined style={{ color: '#1890FF' }} />
+          ) : (
+            <FontColorsOutlined style={{ color: '#1890FF' }} />
+          )}
+          <span style={{ marginLeft: '5px' }}>{org.name}</span>
+        </span>
+      ),
+      key: org.ID,
+      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
+      children: haveChildren ? org.children.map(i => mapTree(i)) : [],
+      org,
+    };
+  };
+  const onSelect = (i, e) => {
+    console.log(e);
+    setKeep(e);
+    if (e.node) {
+      setCurrentSelectOrg(e.node.org.ID);
+    } else {
+      setCurrentSelectOrg(e.ID);
+    }
+    if (e.node && keepTreeFirst.indexOf(e.node.org.name) != -1) {
+      setShow('none');
+    } else {
+      setShow('block');
+    }
+    if (isType != '') {
+      let req1 = getField({ fieldID: e.node.org.ID });
+      let req2 = loadTableFields({ tableName: formObj1 });
+      let req3 = LoadEventType({});
+      console.log(valueData);
+      let bb = [];
+      valueData.map(i => {
+        bb.push(i.ID.toString());
+      });
+      console.log(bb);
+      console.log(e.node.org.ID);
+      console.log(bb.indexOf(e.node.org.ID.toString()));
+      if (bb.indexOf(e.node.org.ID) != -1) {
+        console.log(34353535);
+        let aa = valueData.find(i => i.ID == e.node.org.ID);
+        console.log(aa);
+        Promise.all([req1, req2, req3]).then(res => {
+          res[1].msg === 'Ok' && setFieldName(res[1].data.root);
+          res[2].msg === 'Ok' && setEventList(res[2].data.root);
+          if (res[0].msg === 'Ok') {
+            form.setFieldsValue({ ...aa });
+            if (aa.ExceptionEventFields === '') {
+              setCharacterValue('');
+              setCheckedList([]);
+              setIsShow(false);
+            } else {
+              setIsShow(true);
+              setCharacterValue(aa.ExceptionEventFields);
+              setCheckedList(aa.ExceptionEventFields.split(','));
+            }
+            setShape(aa.Shape);
+            let coordinates = false,
+              picture = false,
+              must = false;
+            switch (aa.Shape) {
+              case '坐标控件':
+                aa.Config === '当前坐标' ? (coordinates = true) : (coordinates = false);
+                break;
+              case '图片':
+              case '可预览图片':
+                aa.Preset === '拍照相册' ? (picture = true) : (picture = false);
+                aa.ValidationRule === 'required' ? (must = true) : (must = false);
+                break;
+              case '编码':
+                let code = aa.Config.split('.');
+                form.setFieldsValue({
+                  code: code[0] || '',
+                  prefix: code[1] === 'undefined' ? '' : code[1],
+                });
+                break;
+            }
+            console.log(aa);
+            setPramData({ ...aa, coordinates, must, picture });
+            let index = res[2].data.root.find(item => {
+              return item.Name == aa.ExceptionEvent;
+            });
+            console.log('index', index);
+            getFieldData(index.TableName);
+          }
+        });
+      } else {
+        console.log(1212122);
+        Promise.all([req1, req2, req3]).then(res => {
+          res[1].msg === 'Ok' && setFieldName(res[1].data.root);
+          res[2].msg === 'Ok' && setEventList(res[2].data.root);
+          if (res[0].msg === 'Ok') {
+            form.setFieldsValue({ ...res[0].data.root });
+            if (res[0].data.root.ExceptionEventFields === '') {
+              setCharacterValue('');
+              setCheckedList([]);
+              setIsShow(false);
+            } else {
+              setIsShow(true);
+              setCharacterValue(res[0].data.root.ExceptionEventFields);
+              setCheckedList(res[0].data.root.ExceptionEventFields.split(','));
+            }
+            setShape(res[0].data.root.Shape);
+            let coordinates = false,
+              picture = false,
+              must = false;
+            switch (res[0].data.root.Shape) {
+              case '坐标控件':
+                res[0].data.root.Config === '当前坐标'
+                  ? (coordinates = true)
+                  : (coordinates = false);
+                break;
+              case '图片':
+              case '可预览图片':
+                res[0].data.root.Preset === '拍照相册' ? (picture = true) : (picture = false);
+                res[0].data.root.ValidationRule === 'required' ? (must = true) : (must = false);
+                break;
+              case '编码':
+                let code = res[0].data.root.Config.split('.');
+                form.setFieldsValue({
+                  code: code[0] || '',
+                  prefix: code[1] === 'undefined' ? '' : code[1],
+                });
+                break;
+            }
+            setPramData({ ...res[0].data.root, coordinates, must, picture });
+            let index = res[2].data.root.find(item => {
+              return item.Name == res[0].data.root.ExceptionEvent;
+            });
+            console.log('index', index);
+            getFieldData(index.TableName);
+          }
+        });
+      }
+    }
+    form.validateFields().then(validate => {
+      console.log(pramData);
+      if (validate) {
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        let data = [
+          {
+            Unit: pramData.Unit || '',
+            StoreType: 'nvarchar(255)',
+            Group: pramData.Group || '',
+            Shape,
+            ExceptionEvent: pramData.ExceptionEvent || '',
+            RowSpan: Number(pramData.RowSpan) || 0,
+            ColSpan: pramData.ColSpan || 0,
+            ReadOnly: pramData.ReadOnly || false,
+            EditableLater: pramData.EditableLater || false,
+            ExceptionValue: pramData.ExceptionValue || '',
+            Preset: pramData.Preset || '',
+            ID: pramData.ID,
+            Order: pramData.Order,
+            Name: obj.Name,
+            Alias: obj.Alias,
+            SyncEvent: obj.SyncEvent,
+            ValidationRule: obj.ValidationRule,
+            ExceptionEventFields: characterValue,
+          },
+        ];
+
+        switch (Shape) {
+          case '编码':
+            data[0].Config = `${obj.code}.${obj.prefix ? obj.prefix : ''}`;
+            break;
+          case '坐标控件':
+            pramData.coordinates ? (data[0].Config = '当前坐标') : (data[0].Config = '');
+            break;
+          case '图片':
+          case '可预览图片':
+            data[0].Preset = pramData.picture ? '拍照相册' : '';
+            data[0].ValidationRule = pramData.must ? 'required' : '';
+            break;
+          default:
+            data[0].Config = obj.Config;
+        }
+        console.log(data[0]);
+        if (keepTreeFirst.indexOf(e.node.org.name) == -1) {
+          if (valueData.length > 0) {
+            let aa = [];
+            valueData.map(i => {
+              aa.push(i.ID);
+            });
+            if (aa.indexOf(data[0].ID) != -1) {
+              valueData.map((i, j) => {
+                if (i.ID == data[0].ID) {
+                  valueData[j] = data[0];
+                }
+              });
+            } else {
+              valueData.push(data[0]);
+            }
+          } else {
+            valueData.push(data[0]);
+          }
+        }
+        if (i == 1.14) {
+          console.log(valueData);
+          UpdateFields(valueData).then(res => {
+            setLoading(false);
+            if (res.msg === 'Ok' || res.msg === '') {
+              form.resetFields();
+              callBackSubmit();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '修改成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          });
+        }
+      }
+    });
+  };
   return (
     <>
       <Drawer
         title="修改"
-        width="600px"
+        width="900px"
         // {...props}
         visible={isVisible}
         onClose={onCancel}
+        destroyOnClose
         footer={
           <Space>
-            <Button onClick={onCancel}>取消</Button>
             <Button onClick={onSubmit} type="primary">
-              确定
+              全部保存
             </Button>
           </Space>
         }
       >
-        {isVisible && (
-          <Form form={form} {...layout}>
-            <Item label="字段名" name="Name" rules={[{ required: true, message: '请输入表名' }]}>
-              <Input placeholder="请输入别名" disabled style={{ width: '93%' }} />
-            </Item>
-            <Item label="别名" name="Alias">
-              <Input placeholder="请输入别名" allowClear style={{ width: '93%' }} />
-            </Item>
-            <Item name="ReadOnly" label="属性">
-              <div>
-                <Checkbox checked={pramData.ReadOnly} onChange={e => onChangeReady(e, 'ReadOnly')}>
-                  只读
-                </Checkbox>
-                <Checkbox
-                  checked={pramData.EditableLater}
-                  onChange={e => onChangeReady(e, 'EditableLater')}
-                >
-                  允许补正(事后修改)
-                </Checkbox>
-              </div>
-            </Item>
-            <Item label="同步" name="SyncEvent">
-              <Radio.Group>
-                <Radio value={0} style={{ marginRight: '0.5rem' }}>
-                  不同步
-                </Radio>
-                <Radio value={1} style={{ marginRight: '0.5rem' }}>
-                  工单 → 事件
-                </Radio>
-                <Radio value={2}>事件（上报时） → 工单</Radio>
-              </Radio.Group>
-            </Item>
+        <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-start' }}>
+          <div
+            style={{
+              width: '300px',
+              overflowY: 'scroll',
+              height: 'calc(100vh - 160px)',
+              borderRight: '1px solid #f0eded',
+            }}
+          >
+            <Tree
+              showIcon="true"
+              blockNode
+              autoExpandParent
+              selectedKeys={[currentSelectOrg]}
+              onSelect={onSelect}
+              treeData={treeValue.map(t => mapTree(t))}
+              expandedKeys={expendKey}
+            />
+          </div>
+          {show == 'block' ? (
+            <div style={{ width: '600px', overflowY: 'scroll', height: 'calc(100vh - 160px)' }}>
+              {isVisible && (
+                <Form form={form} {...layout}>
+                  <Item
+                    label="字段名"
+                    name="Name"
+                    rules={[{ required: true, message: '请输入表名' }]}
+                  >
+                    <Input placeholder="请输入别名" disabled style={{ width: '93%' }} />
+                  </Item>
+                  <Item label="别名" name="Alias">
+                    <Input placeholder="请输入别名" allowClear style={{ width: '93%' }} />
+                  </Item>
+                  <Item name="ReadOnly" label="属性">
+                    <div>
+                      <Checkbox
+                        checked={pramData.ReadOnly}
+                        onChange={e => onChangeReady(e, 'ReadOnly')}
+                      >
+                        只读
+                      </Checkbox>
+                      <Checkbox
+                        checked={pramData.EditableLater}
+                        onChange={e => onChangeReady(e, 'EditableLater')}
+                      >
+                        允许补正(事后修改)
+                      </Checkbox>
+                    </div>
+                  </Item>
+                  <Item label="同步" name="SyncEvent">
+                    <Radio.Group>
+                      <Radio value={0} style={{ marginRight: '0.5rem' }}>
+                        不同步
+                      </Radio>
+                      <Radio value={1} style={{ marginRight: '0.5rem' }}>
+                        工单 → 事件
+                      </Radio>
+                      <Radio value={2}>事件（上报时） → 工单</Radio>
+                    </Radio.Group>
+                  </Item>
 
-            <Item label="形态">
-              <div className={styles.listEvent}>
-                <Select
-                  style={{ width: '42%' }}
-                  value={Shape}
-                  onChange={handleCharacteristics}
-                  showSearch
-                >
-                  {characteristics.length
-                    ? characteristics.map((item, index) => {
+                  <Item label="形态">
+                    <div className={styles.listEvent}>
+                      <Select
+                        style={{ width: '42%' }}
+                        value={Shape}
+                        onChange={handleCharacteristics}
+                        showSearch
+                      >
+                        {characteristics.length
+                          ? characteristics.map((item, index) => {
+                              return (
+                                <Select.Option key={index} value={item}>
+                                  {item}
+                                </Select.Option>
+                              );
+                            })
+                          : ''}
+                      </Select>
+                      <div className={styles.unit}>
+                        单位：
+                        <Input
+                          style={{ width: '5rem' }}
+                          placeholder=""
+                          allowClear
+                          value={pramData.Unit}
+                          onChange={e => handleInput(e, 'Unit')}
+                        />
+                      </div>
+                      <div className={styles.unit}>
+                        宽：
+                        <Input
+                          style={{ width: '3.8rem' }}
+                          placeholder=""
+                          allowClear
+                          value={pramData.RowSpan}
+                          onChange={e => handleInput(e, 'RowSpan')}
+                          onkeyup="value=value.replace(/[^\d]/g,'')"
+                        />
+                      </div>
+                    </div>
+                  </Item>
+                  {(() => {
+                    switch (Shape) {
+                      case '编码':
                         return (
-                          <Select.Option key={index} value={item}>
-                            {item}
-                          </Select.Option>
+                          <>
+                            <Item label="前缀" name="prefix">
+                              <Input style={{ width: '93%' }} placeholder="" allowClear />
+                            </Item>
+                            <Item label="编码方式" name="code">
+                              <Radio.Group>
+                                <Radio value="年份编码" style={{ marginRight: '0.5rem' }}>
+                                  XJ-2019-000001（前缀-年份-六位编码）
+                                </Radio>
+                                <Radio value="年月编码" style={{ marginRight: '0.5rem' }}>
+                                  XJ-201909-000001（前缀-年份月份-六位编码）
+                                </Radio>
+                                <Radio value="一般编码" defaultChecked>
+                                  XJ00000001（前缀 八位编码）
+                                </Radio>
+                              </Radio.Group>
+                            </Item>
+                          </>
                         );
-                      })
-                    : ''}
-                </Select>
-                <div className={styles.unit}>
-                  单位：
-                  <Input
-                    style={{ width: '5rem' }}
-                    placeholder=""
-                    allowClear
-                    value={pramData.Unit}
-                    onChange={e => handleInput(e, 'Unit')}
-                  />
-                </div>
-                <div className={styles.unit}>
-                  宽：
-                  <Input
-                    style={{ width: '3.8rem' }}
-                    placeholder=""
-                    allowClear
-                    value={pramData.RowSpan}
-                    onChange={e => handleInput(e, 'RowSpan')}
-                  />
-                </div>
-              </div>
-            </Item>
-            {(() => {
-              switch (Shape) {
-                case '编码':
-                  return (
-                    <>
-                      <Item label="前缀" name="prefix">
-                        <Input style={{ width: '93%' }} placeholder="" allowClear />
-                      </Item>
-                      <Item label="编码方式" name="code">
-                        <Radio.Group>
-                          <Radio value="年份编码" style={{ marginRight: '0.5rem' }}>
-                            XJ-2019-000001（前缀-年份-六位编码）
-                          </Radio>
-                          <Radio value="年月编码" style={{ marginRight: '0.5rem' }}>
-                            XJ-201909-000001（前缀-年份月份-六位编码）
-                          </Radio>
-                          <Radio value="一般编码" defaultChecked>
-                            XJ00000001（前缀 八位编码）
-                          </Radio>
-                        </Radio.Group>
-                      </Item>
-                    </>
-                  );
-                case '值选择器':
-                case '值复选器':
-                case '可编辑值选择器':
-                case '平铺值选择器':
-                  return (
-                    <>
-                      {' '}
-                      <Item label="可选值" name="Config">
-                        <TextArea allowClear style={{ width: '93%' }} />
-                      </Item>
-                      <Item colon={false} label=" ">
-                        {' '}
-                        <div style={{ display: 'flex', alignItems: 'center' }}>
-                          <span style={{ marginRight: '0.4rem' }}>
-                            以英文逗号为分隔符填写，或其他分隔符粘贴：
-                          </span>
-                          <Select onChange={handleSeparator} style={{ width: '30.8%' }}>
-                            <Select.Option value="0">以,分隔(英文逗号)</Select.Option>
-                            <Select.Option value="1">以/分隔(正斜杠)</Select.Option>
-                            <Select.Option value="2">以\\分隔(反斜杠)</Select.Option>
-                            <Select.Option value="3">以、分隔(中文顿号)</Select.Option>
-                            <Select.Option value="4">以;分隔(英文分号)</Select.Option>
-                            <Select.Option value="5">以；分隔(中文分号)</Select.Option>
-                            <Select.Option value="6">(是)/否</Select.Option>
-                            <Select.Option value="7">是/(否)</Select.Option>
-                            <Select.Option value="8">(否)/是</Select.Option>
-                          </Select>
-                        </div>
-                      </Item>
-                    </>
-                  );
-                case '图片':
-                case '可预览图片':
-                  return (
-                    <Item name="ReadOnly" label="选项">
-                      <div>
-                        <Checkbox
-                          checked={pramData.picture}
-                          onChange={e => onChangeReady(e, 'picture')}
-                        >
-                          允许从相册选取
-                        </Checkbox>
-                        <Checkbox checked={pramData.must} onChange={e => onChangeReady(e, 'must')}>
-                          必填字段
-                        </Checkbox>
-                      </div>
-                    </Item>
-                  );
-                case '日期时间':
-                case '日期':
-                case '日期月份':
-                case '日期年份':
-                case '日期周':
-                case '时分秒':
-                  return (
-                    <Item label="选项" name="Config">
-                      <Radio.Group style={{ marginTop: '0.3rem' }}>
-                        <Radio
-                          value="默认为空"
-                          defaultChecked
-                          style={{ width: '18rem', marginBottom: '0.5rem' }}
-                        >
-                          默认为空
-                        </Radio>
-                        <Radio value="">默认为当前时间</Radio>
-                        <Radio value="不可选择" style={{ width: '18rem' }}>
-                          锁定为当前时间(通过用户点击刷新)
-                        </Radio>
-                        <Radio value="不超过当前时间">不超过当前时间</Radio>
-                      </Radio.Group>
-                    </Item>
-                  );
-                case '坐标控件':
-                  return (
-                    <Item label="选项" name="Config">
-                      <div>
-                        <Checkbox
-                          value="当前坐标"
-                          style={{ marginRight: '0.2rem' }}
-                          checked={pramData.coordinates}
-                          onChange={e => onChangeReady(e, 'coordinates')}
+                      case '值选择器':
+                      case '值复选器':
+                      case '可编辑值选择器':
+                      case '平铺值选择器':
+                        return (
+                          <>
+                            {' '}
+                            <Item label="可选值" name="Config">
+                              <TextArea allowClear style={{ width: '93%' }} />
+                            </Item>
+                            <Item colon={false} label=" ">
+                              {' '}
+                              <div style={{ display: 'flex', alignItems: 'center' }}>
+                                <span style={{ marginRight: '0.4rem' }}>
+                                  以英文逗号为分隔符填写，或其他分隔符粘贴：
+                                </span>
+                                <Select onChange={handleSeparator} style={{ width: '30.8%' }}>
+                                  <Select.Option value="0">以,分隔(英文逗号)</Select.Option>
+                                  <Select.Option value="1">以/分隔(正斜杠)</Select.Option>
+                                  <Select.Option value="2">以\\分隔(反斜杠)</Select.Option>
+                                  <Select.Option value="3">以、分隔(中文顿号)</Select.Option>
+                                  <Select.Option value="4">以;分隔(英文分号)</Select.Option>
+                                  <Select.Option value="5">以；分隔(中文分号)</Select.Option>
+                                  <Select.Option value="6">(是)/否</Select.Option>
+                                  <Select.Option value="7">是/(否)</Select.Option>
+                                  <Select.Option value="8">(否)/是</Select.Option>
+                                </Select>
+                              </div>
+                            </Item>
+                          </>
+                        );
+                      case '图片':
+                      case '可预览图片':
+                        return (
+                          <Item name="ReadOnly" label="选项">
+                            <div>
+                              <Checkbox
+                                checked={pramData.picture}
+                                onChange={e => onChangeReady(e, 'picture')}
+                              >
+                                允许从相册选取
+                              </Checkbox>
+                              <Checkbox
+                                checked={pramData.must}
+                                onChange={e => onChangeReady(e, 'must')}
+                              >
+                                必填字段
+                              </Checkbox>
+                            </div>
+                          </Item>
+                        );
+                      case '日期时间':
+                      case '日期':
+                      case '日期月份':
+                      case '日期年份':
+                      case '日期周':
+                      case '时分秒':
+                        return (
+                          <Item label="选项" name="Config">
+                            <Radio.Group style={{ marginTop: '0.3rem' }}>
+                              <Radio
+                                value="默认为空"
+                                defaultChecked
+                                style={{ width: '18rem', marginBottom: '0.5rem' }}
+                              >
+                                默认为空
+                              </Radio>
+                              <Radio value="">默认为当前时间</Radio>
+                              <Radio value="不可选择" style={{ width: '18rem' }}>
+                                锁定为当前时间(通过用户点击刷新)
+                              </Radio>
+                              <Radio value="不超过当前时间">不超过当前时间</Radio>
+                            </Radio.Group>
+                          </Item>
+                        );
+                      case '坐标控件':
+                        return (
+                          <Item label="选项" name="Config">
+                            <div>
+                              <Checkbox
+                                value="当前坐标"
+                                style={{ marginRight: '0.2rem' }}
+                                checked={pramData.coordinates}
+                                onChange={e => onChangeReady(e, 'coordinates')}
+                              />
+                              锁定为当前位置坐标
+                            </div>
+                          </Item>
+                        );
+                      default:
+                        return (
+                          <Item label="配置" name="Config">
+                            <TextArea allowClear style={{ width: '93%' }} />
+                          </Item>
+                        );
+                    }
+                  })()}
+                  {Shape === '图片' || Shape === '可预览图片' ? (
+                    ''
+                  ) : (
+                    <Item label="预设值">
+                      <div className={styles.listEvent}>
+                        <Input
+                          style={{ width: '42%', height: '1.8rem' }}
+                          value={pramData.Preset}
+                          onChange={e => handleInput(e, 'Preset')}
+                          placeholder=""
+                          allowClear
                         />
-                        锁定为当前位置坐标
+                        <Item
+                          style={{ marginLeft: '1rem' }}
+                          label="验证"
+                          name="ValidationRule"
+                          style={{ margin: '0 0 0 1rem' }}
+                        >
+                          <Input style={{ width: '95%' }} placeholder="" allowClear />
+                        </Item>
+                        <Tooltip title="选择验证规则">
+                          <PlusSquareOutlined
+                            onClick={() => add('rule')}
+                            style={{
+                              fontSize: '24px',
+                              color: '#1890FF',
+                              display: 'flex',
+                              alignItems: 'center',
+                            }}
+                          />
+                        </Tooltip>
                       </div>
                     </Item>
-                  );
-                default:
-                  return (
-                    <Item label="配置" name="Config">
-                      <TextArea allowClear style={{ width: '93%' }} />
-                    </Item>
-                  );
-              }
-            })()}
-            {Shape === '图片' || Shape === '可预览图片' ? (
-              ''
-            ) : (
-              <Item label="预设值">
-                <div className={styles.listEvent}>
-                  <Input
-                    style={{ width: '42%', height: '1.8rem' }}
-                    value={pramData.Preset}
-                    onChange={e => handleInput(e, 'Preset')}
-                    placeholder=""
-                    allowClear
-                  />
-                  <Item
-                    style={{ marginLeft: '1rem' }}
-                    label="验证"
-                    name="ValidationRule"
-                    style={{ margin: '0 0 0 1rem' }}
-                  >
-                    <Input style={{ width: '95%' }} placeholder="" allowClear />
-                  </Item>
-                  <Tooltip title="选择验证规则">
-                    <PlusSquareOutlined
-                      onClick={() => add('rule')}
-                      style={{
-                        fontSize: '24px',
-                        color: '#1890FF',
-                        display: 'flex',
-                        alignItems: 'center',
-                      }}
-                    />
-                  </Tooltip>
-                </div>
-              </Item>
-            )}
-            {/* <Item label="异常值">
+                  )}
+                  {/* <Item label="异常值">
               <div className={styles.listEvent}>
                 <Input
                   style={{ width: '40%', height: '1.8rem' }}
@@ -712,9 +1008,9 @@ const AddModal = props => {
                 </Tooltip>
               </div>
             </Item> */}
-          </Form>
-        )}
-        {/* <ChangeAdd
+                </Form>
+              )}
+              {/* <ChangeAdd
           visible={visible}
           onCancel={() => setVisible(false)}
           callBackSubmit={onOK}
@@ -724,16 +1020,23 @@ const AddModal = props => {
           characterValue={characterValue}
           formObj={formObj}
         /> */}
-        <VerifyModal
-          visible={visible}
-          onCancel={() => setVisible(false)}
-          callBackSubmit={onOK}
-          newCheckedList={checkedList}
-          isType={type}
-          filed={filed}
-          characterValue={characterValue}
-          formObj={formObj}
-        />
+              <VerifyModal
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                callBackSubmit={onOK}
+                newCheckedList={checkedList}
+                isType={type}
+                filed={filed}
+                characterValue={characterValue}
+                formObj={formObj}
+              />
+            </div>
+          ) : (
+            <div style={{ margin: '0 auto' }}>
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中字段" />
+            </div>
+          )}
+        </div>
       </Drawer>
     </>
   );

src/pages/bsmanager/base/tablemanager/filedConfig/filedConfig.jsx

@@ -21,6 +21,8 @@ import LoadGroup from '../components/Field/loadGroupNew';
 const AddModal = props => {
   const history = useHistory();
   const [allData, setAllData] = useState([]);
+  const [treeData, setTreeData] = useState([]);
+  const [keepTreeFirst, setKeepTreeFirst] = useState([]);
   const [tableList, setTableList] = useState([]);
   const [tableData, setTableData] = useState([]);
   const [treeLoading, setTreeLoading] = useState(false);
@@ -265,8 +267,16 @@ const AddModal = props => {
             newArr.push({ type: item, key: index, id: index });
           });
           setAllData(arr);
+          console.log(arr);
+          let aa = [];
+          let bb = [];
+          Object.keys(arr).forEach((item, index) => {
+            aa.push({ name: item, key: index, ID: index, children: arr[item] });
+            bb.push(item);
+          });
+          setKeepTreeFirst(bb);
+          setTreeData(aa);
           setTableData(newArr);
-          console.log(newArr);
           setSelect(newArr);
         }
       });
@@ -382,7 +392,7 @@ const AddModal = props => {
       <Spin tip="loading..." spinning={treeLoading}>
         <div className={styles.containerBox}>
           <div className={styles.config}>
-            <div className={styles.title}>{formObj}(字段配置)</div>
+            <div className={styles.title}>{formObj}</div>
             <div className={styles.btn}>
               <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
                 附加
@@ -420,6 +430,8 @@ const AddModal = props => {
         itemData={itemData}
         formObj1={formObj}
         onCancel={() => setIsVisible(false)}
+        treeData={treeData}
+        keepTreeFirst={keepTreeFirst}
         callBackSubmit={Submit}
       />
       {visible && type === 'affiliateAdd' && (

src/pages/bsmanager/base/tablemanager/filedConfig/index.less

-.field{
-    width:100%;
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    max-height: 20rem;
+.field {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  max-height: 20rem;
+  overflow-y: scroll;
+  .ant-card {
+    width: 80%;
+    margin-left: 4rem;
+  }
+  .ant-card-head-title {
+    flex: none;
+  }
+  .ant-card-extra {
+    margin-left: 0.2rem;
+  }
+  .ant-card-body {
+    // padding: 0 ;
+    height: 15rem;
     overflow-y: scroll;
-    .ant-card{
-        width: 80%;
-        margin-left: 4rem;
-    }
-    .ant-card-head-title{
-        flex: none;
-    }
-    .ant-card-extra{
-        margin-left: 0.2rem;
-    }
-    .ant-card-body{
-        // padding: 0 ;
-        height: 15rem;
-        overflow-y: scroll;
-    }
-   
+  }
+  .ant-drawer-body {
+    overflow: hidden;
+  }
 }
 .containerBox {
-    width: 100vm;
-    height: calc(100vh - 90px) ;
-    background: #ffffff;
-    .ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
-        margin-left: 0;
-    }
-    .ant-table.ant-table-bordered > .ant-table-container{
-        border: none;
-    }
-    .clickRowStyle{
-        background: #cfe7fd;
-    }
-    .ant-table-thead tr th{
-        font-weight: 600;
-        color:rgba(0,0,0,0.85);
-    }
+  width: 100vm;
+  height: calc(100vh - 90px);
+  background: #ffffff;
+  .ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table {
+    margin-left: 0;
+  }
+  .ant-table.ant-table-bordered > .ant-table-container {
+    border: none;
+  }
+  .clickRowStyle {
+    background: #cfe7fd;
+  }
+  .ant-table-thead tr th {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+  }
 }
 
-.paneTitle{
-    font-weight: bold;
-    font-size: 18px;
-    margin: 0 0 0.5rem 4rem;
+.paneTitle {
+  font-weight: bold;
+  font-size: 18px;
+  margin: 0 0 0.5rem 4rem;
 }
-.listEvent{
-    display: flex;
-
+.listEvent {
+  display: flex;
 }
-.cardList{
-    .ant-card-body{
-        overflow-y:none  !important;
-    }
+.cardList {
+  .ant-card-body {
+    overflow-y: none !important;
+  }
 }
-.unit{
-    display: flex;
-    margin-left: 1.1rem;
-    align-items: center;
-
+.unit {
+  display: flex;
+  margin-left: 1.1rem;
+  align-items: center;
 }
-.listCard{
-    display: flex;
-    .cardItem{
-        width: 50%;
-        padding: 0.5rem;
-    }
-    .cardContent{
-        height: 25rem;
-        overflow-y: scroll;
-        width: 19.5rem;
-    }
-    .cardItemData{
-        padding: 1rem;
-        border: 1px solid #b5b8c8;
-        margin-bottom: 1rem;
-    }
+.listCard {
+  display: flex;
+  .cardItem {
+    width: 50%;
+    padding: 0.5rem;
+  }
+  .cardContent {
+    height: 25rem;
+    overflow-y: scroll;
+    width: 19.5rem;
+  }
+  .cardItemData {
+    padding: 1rem;
+    border: 1px solid #b5b8c8;
+    margin-bottom: 1rem;
+  }
 }
 .sortable-ghost {
-    border-bottom: 2px dashed #1890ff;
-  }
-  
-  .doctorTable {
-    margin-bottom: 16px;
-    table {
-      width: 100%;
-      td {
-        padding: 6px;
-        border: 1px solid #e8e8e8;
-      }
-      thead {
-        tr {
-          font-weight: 600;
-          background: #FAFAFA;
-        }
+  border-bottom: 2px dashed #1890ff;
+}
+
+.doctorTable {
+  margin-bottom: 16px;
+  table {
+    width: 100%;
+    td {
+      padding: 6px;
+      border: 1px solid #e8e8e8;
+    }
+    thead {
+      tr {
+        font-weight: 600;
+        background: #fafafa;
       }
-      tbody{
-          tr:hover{
-              background-color:#ededed ;
-          }
+    }
+    tbody {
+      tr:hover {
+        background-color: #ededed;
       }
     }
   }
-  .config{
-      display: flex;
-      padding: 1rem 0 0.5rem 0.5rem;
-      justify-content: space-between;
-      width: calc(100% - 10px);
-      .title{
-          font-size: 18px;
-          color: rgba(0, 114, 255, 1);
-          font-weight: bold;
-      }
-      .btn{
-          display: flex;
-          justify-content: space-around;
-          width: 20rem;
-      }
-      .ant-btn{
-          display: flex;
-          align-items: center;
-      }
+}
+.config {
+  display: flex;
+  padding: 1rem 0 0.5rem 0.5rem;
+  justify-content: space-between;
+  width: calc(100% - 10px);
+  .title {
+    font-size: 18px;
+    color: rgba(0, 114, 255, 1);
+    font-weight: bold;
   }
+  .btn {
+    display: flex;
+    justify-content: space-around;
+    width: 20rem;
+  }
+  .ant-btn {
+    display: flex;
+    align-items: center;
+  }
+}

src/pages/bsmanager/base/tablemanager/index.jsx

@@ -535,7 +535,7 @@ const TableManager = props => {
               expandRowByClick
               expandedRowKeys={chooseLine}
               dataSource={groupArr}
-              scroll={{ y: 'calc(100vh - 190px)' }}
+              scroll={{ y: 'calc(100vh - 170px)' }}
               size="small"
               pagination={false}
               onExpand={onUnfold}

src/pages/platformCenter/videoManager/AddModal.jsx

@@ -128,7 +128,7 @@ const AddModal = props => {
                   },
                 ]}
               >
-                <Input placeholder="请输入名称" />
+                <Input placeholder="请输入名称" maxlength="20px" />
               </Item>
             </Col>
             {(() => {
@@ -390,7 +390,7 @@ const AddModal = props => {
                   },
                 ]}
               >
-                <Input placeholder="账户登录名" />
+                <Input placeholder="账户登录名" maxlength="100px" />
               </Item>
             </Col>
             <Col span={12}>
@@ -542,7 +542,7 @@ const AddModal = props => {
                             name="PlayZeroChannel"
                             rules={[
                               {
-                                validator: (rule, value) => {
+                                validator: (__rule, value) => {
                                   if (form.getFieldsValue().PlayZeroChannel == '') {
                                     return Promise.reject('请输入设备端口');
                                   }
@@ -616,7 +616,7 @@ const AddModal = props => {
                             name="StreamType"
                             rules={[
                               {
-                                validator: (rule, value) => {
+                                validator: (_rule, value) => {
                                   if (form.getFieldsValue().StreamType == '') {
                                     return Promise.reject('请选择码流类型');
                                   }