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,13 +114,19 @@ 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');
+    // 不切换树
+    if (valueData.length == 0) {
+      console.log(pramData);
       form.validateFields().then(validate => {
         if (validate) {
           setLoading(true);
@@ -119,8 +144,8 @@ const AddModal = props => {
               EditableLater: pramData.EditableLater || false,
               ExceptionValue: pramData.ExceptionValue || '',
               Preset: pramData.Preset || '',
-            ID: Number(itemData.ID),
-            Order: Number(itemData.order),
+              ID: pramData.ID,
+              Order: pramData.Order,
               Name: obj.Name,
               Alias: obj.Alias,
               SyncEvent: obj.SyncEvent,
@@ -164,9 +189,18 @@ const AddModal = props => {
           });
         }
       });
+    } 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,26 +447,280 @@ 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>
         }
       >
+        <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: '请输入表名' }]}>
+                  <Item
+                    label="字段名"
+                    name="Name"
+                    rules={[{ required: true, message: '请输入表名' }]}
+                  >
                     <Input placeholder="请输入别名" disabled style={{ width: '93%' }} />
                   </Item>
                   <Item label="别名" name="Alias">
@@ -439,7 +728,10 @@ const AddModal = props => {
                   </Item>
                   <Item name="ReadOnly" label="属性">
                     <div>
-                <Checkbox checked={pramData.ReadOnly} onChange={e => onChangeReady(e, 'ReadOnly')}>
+                      <Checkbox
+                        checked={pramData.ReadOnly}
+                        onChange={e => onChangeReady(e, 'ReadOnly')}
+                      >
                         只读
                       </Checkbox>
                       <Checkbox
@@ -498,6 +790,7 @@ const AddModal = props => {
                           allowClear
                           value={pramData.RowSpan}
                           onChange={e => handleInput(e, 'RowSpan')}
+                          onkeyup="value=value.replace(/[^\d]/g,'')"
                         />
                       </div>
                     </div>
@@ -567,7 +860,10 @@ const AddModal = props => {
                               >
                                 允许从相册选取
                               </Checkbox>
-                        <Checkbox checked={pramData.must} onChange={e => onChangeReady(e, 'must')}>
+                              <Checkbox
+                                checked={pramData.must}
+                                onChange={e => onChangeReady(e, 'must')}
+                              >
                                 必填字段
                               </Checkbox>
                             </div>
@@ -734,6 +1030,13 @@ const AddModal = props => {
                 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%;
+.field {
+  width: 100%;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   max-height: 20rem;
   overflow-y: scroll;
-    .ant-card{
+  .ant-card {
     width: 80%;
     margin-left: 4rem;
   }
-    .ant-card-head-title{
+  .ant-card-head-title {
     flex: none;
   }
-    .ant-card-extra{
+  .ant-card-extra {
     margin-left: 0.2rem;
   }
-    .ant-card-body{
+  .ant-card-body {
     // padding: 0 ;
     height: 15rem;
     overflow-y: scroll;
   }
-   
+  .ant-drawer-body {
+    overflow: hidden;
+  }
 }
 .containerBox {
   width: 100vm;
-    height: calc(100vh - 90px) ;
+  height: calc(100vh - 90px);
   background: #ffffff;
-    .ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
+  .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{
+  .ant-table.ant-table-bordered > .ant-table-container {
     border: none;
   }
-    .clickRowStyle{
+  .clickRowStyle {
     background: #cfe7fd;
   }
-    .ant-table-thead tr th{
+  .ant-table-thead tr th {
     font-weight: 600;
-        color:rgba(0,0,0,0.85);
+    color: rgba(0, 0, 0, 0.85);
   }
 }
 
-.paneTitle{
+.paneTitle {
   font-weight: bold;
   font-size: 18px;
   margin: 0 0 0.5rem 4rem;
 }
-.listEvent{
+.listEvent {
   display: flex;
-
 }
-.cardList{
-    .ant-card-body{
-        overflow-y:none  !important;
+.cardList {
+  .ant-card-body {
+    overflow-y: none !important;
   }
 }
-.unit{
+.unit {
   display: flex;
   margin-left: 1.1rem;
   align-items: center;
-
 }
-.listCard{
+.listCard {
   display: flex;
-    .cardItem{
+  .cardItem {
     width: 50%;
     padding: 0.5rem;
   }
-    .cardContent{
+  .cardContent {
     height: 25rem;
     overflow-y: scroll;
     width: 19.5rem;
   }
-    .cardItemData{
+  .cardItemData {
     padding: 1rem;
     border: 1px solid #b5b8c8;
     margin-bottom: 1rem;
@@ -80,9 +80,9 @@
 }
 .sortable-ghost {
   border-bottom: 2px dashed #1890ff;
-  }
+}
 
-  .doctorTable {
+.doctorTable {
   margin-bottom: 16px;
   table {
     width: 100%;
@@ -93,33 +93,33 @@
     thead {
       tr {
         font-weight: 600;
-          background: #FAFAFA;
-        }
+        background: #fafafa;
       }
-      tbody{
-          tr:hover{
-              background-color:#ededed ;
     }
+    tbody {
+      tr:hover {
+        background-color: #ededed;
       }
     }
   }
-  .config{
+}
+.config {
   display: flex;
   padding: 1rem 0 0.5rem 0.5rem;
   justify-content: space-between;
   width: calc(100% - 10px);
-      .title{
+  .title {
     font-size: 18px;
     color: rgba(0, 114, 255, 1);
     font-weight: bold;
   }
-      .btn{
+  .btn {
     display: flex;
     justify-content: space-around;
     width: 20rem;
   }
-      .ant-btn{
+  .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('请选择码流类型');
                                   }