fix: 对运维平台进行优化，修改测试到的问题

src/pages/database/ManagementDataBase.jsx

@@ -9,6 +9,7 @@ import {
   notification,
   Spin,
 } from 'antd';
+import copy from 'copy-to-clipboard';
 import PageContainer from '@/components/BasePageContainer';
 import styles from './ManagementDataBase.less';
 import {
@@ -177,6 +178,22 @@ const ManagementDataBase = () => {
     // setContent(text);
     setContent(arr);
   };
+  // 复制SQL
+  const copySql = text => {
+    if (copy(text)) {
+      notification.success({
+        message: '提示',
+        duration: 3,
+        description: '复制成功',
+      });
+    } else {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '复制失败',
+      });
+    }
+  };
   const autoCheckColumns = [
     {
       title: '表名称',
@@ -212,6 +229,16 @@ const ManagementDataBase = () => {
       key: 'Message',
       ellipsis: true,
     },
+    {
+      title: 'SQL语句',
+      dataIndex: 'DiffSql',
+      key: 'DiffSql',
+      render: text => (
+        <Button size="small" type="primary" onClick={() => copySql(text)}>
+          复制SQL
+        </Button>
+      ),
+    },
   ];
   const logColumns = [
     {

src/pages/mobileConfig/menuconfig/miniMenu.jsx

@@ -431,7 +431,7 @@ const MiniMenu = props => {
 
     dragMenu({
       menuID: obj.id,
-      newParentID: obj.parentId || -1,
+      newParentID: obj.parentId.toString() || '-1',
       menuList: String(arrList) || '',
       _version: 9999,
       _dc: Date.now(),

src/pages/platformCenter/bsmanager/tablemanager/components/Field/index.less

@@ -6,7 +6,7 @@
     max-height: 20rem;
     overflow-y: scroll;
     .ant-card{
-        width: 80%;
+        width: 83%;
         margin-left: 4rem;
     }
     .ant-card-head-title{

src/pages/platformCenter/bsmanager/workFlow/flow.jsx

@@ -136,8 +136,9 @@ const Flow = () => {
       dataIndex: 'extendWebPage',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -145,8 +146,9 @@ const Flow = () => {
       dataIndex: 'extendMobilePage',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -155,8 +157,9 @@ const Flow = () => {
       align: 'center',
       width: 80,
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -164,8 +167,9 @@ const Flow = () => {
       dataIndex: 'flowEndBehavior',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(不做处理)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -179,8 +183,7 @@ const Flow = () => {
       dataIndex: 'errorNodes',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(无)' ? 'grey' : 'red' }}>{text}</span>
       ),
     },
     {
@@ -188,8 +191,9 @@ const Flow = () => {
       dataIndex: 'interfaceConfig',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {

src/pages/platformCenter/bsmanager/workFlow/flowComponents/Timelimit.jsx

@@ -82,45 +82,30 @@ const Timelimit = props => {
       title: '规则名称',
       dataIndex: 'Name',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '开始节点',
       dataIndex: 'StartNode',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '结束节点',
       dataIndex: 'EndNode',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '默认时限',
       dataIndex: 'TimeLimit',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '时限指派字段',
-      dataIndex: 'TimeLimitFieldHtml',
+      dataIndex: 'TimeLimitField',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(未配置)' ? 'grey' : '#0000009D' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -128,8 +113,9 @@ const Timelimit = props => {
       dataIndex: 'TimeoutField',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(未配置)' ? 'grey' : '#0000009D' }}>
+          {text}
+        </span>
       ),
     },
     {

src/pages/platformCenter/bsmanager/workFlow/flowComponents/timelimitComponents/AddModal.jsx

@@ -230,8 +230,7 @@ const AddModal = props => {
           <Select>
             {timeLimitFlowNodes.map(item => (
               <Option value={item.Name} key={item.ID}>
-                {/* eslint-disable-next-line react/no-danger */}
-                <span dangerouslySetInnerHTML={{ __html: item.Name }} />
+                <span>{item.Name}</span>
               </Option>
             ))}
           </Select>
@@ -244,8 +243,7 @@ const AddModal = props => {
           <Select>
             {timeLimitFlowNodes.map(item => (
               <Option value={item.Name} key={item.ID}>
-                {/* eslint-disable-next-line react/no-danger */}
-                <span dangerouslySetInnerHTML={{ __html: item.Name }} />
+                <span>{item.Name}</span>
               </Option>
             ))}
           </Select>

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.jsx

@@ -93,6 +93,17 @@ const FlowNode = () => {
     }
     setExpandedRowKeys(data);
   };
+  // 表格内文案样式
+  const textStyleOne = (text, record) => {
+    if (record.colorType === 2) {
+      return 'red';
+    }
+    if (text === '(未配置)') {
+      return 'grey';
+    }
+    return '000000D9';
+  };
+
   // 定义展开的表格
   const createUnfoldTable = itemTable => {
     const columns = [
@@ -101,12 +112,15 @@ const FlowNode = () => {
         dataIndex: 'name',
         width: 149,
         align: 'left',
-        render: text => (
+        render: (text, record) => (
           <div
-            style={{ paddingLeft: 60 }}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: text }}
-          />
+            style={{
+              paddingLeft: 60,
+              color: record.colorType === 2 ? 'red' : '#000000D9',
+            }}
+          >
+            {text}
+          </div>
         ),
       },
       {
@@ -114,19 +128,15 @@ const FlowNode = () => {
         dataIndex: 'aliasName',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
-        ),
+        render: text => <span>{text}</span>,
       },
       {
         title: '移交方式',
         dataIndex: 'extendHandover',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: textStyleOne(text, record) }}>{text}</span>
         ),
       },
       {
@@ -134,9 +144,8 @@ const FlowNode = () => {
         dataIndex: 'extendNodeType',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: textStyleOne(text, record) }}>{text}</span>
         ),
       },
       {
@@ -147,10 +156,9 @@ const FlowNode = () => {
         ellipsis: {
           showTitle: true,
         },
-        render: text => (
+        render: (text, record) => (
           <Tooltip placement="topLeft" title={text}>
-            {/* eslint-disable-next-line react/no-danger */}
-            <span dangerouslySetInnerHTML={{ __html: text }} />
+            <span style={{ color: textStyleOne(text, record) }}>{text}</span>
           </Tooltip>
         ),
       },
@@ -159,15 +167,21 @@ const FlowNode = () => {
         dataIndex: 'extendSeeFields',
         align: 'center',
         width: 80,
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
+        ),
       },
       {
         title: '字段',
         dataIndex: 'extendFields',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
 
@@ -176,9 +190,10 @@ const FlowNode = () => {
         dataIndex: 'extendEditableLater',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -186,9 +201,10 @@ const FlowNode = () => {
         dataIndex: 'extendRollbackable',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -196,9 +212,10 @@ const FlowNode = () => {
         dataIndex: 'extendRollbackNode',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -206,9 +223,10 @@ const FlowNode = () => {
         dataIndex: 'tranferable',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -216,9 +234,10 @@ const FlowNode = () => {
         dataIndex: 'eventInformation',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.less

@@ -28,8 +28,11 @@
 
 // 编辑节点表单
 .formData {
-  height: 32rem;
+  height: calc(100vh - 162px);
   overflow-y: scroll;
+  .ant-radio-wrapper {
+    min-width: 130px;
+  }
   .filedListItem {
     display: flex;
     flex-wrap: nowrap;

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/AuxiliaryView.jsx

@@ -85,55 +85,67 @@ const AuxiliaryView = props => {
       title: '前端便签',
       dataIndex: 'WebLabel',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '前端视图',
       dataIndex: 'WebPage',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '前端参数',
       dataIndex: 'WebParam',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '手持标签',
       dataIndex: 'MobileLabel',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '手持视图',
       dataIndex: 'MobilePage',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '手持参数',
       dataIndex: 'MobileParam',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '操作',

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/NodeEdit.jsx

@@ -10,7 +10,6 @@ import {
 
 import {
   Form,
-  Modal,
   Input,
   Radio,
   Select,
@@ -18,6 +17,8 @@ import {
   Checkbox,
   Button,
   message,
+  Drawer,
+  Space,
 } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import Fieldselection from './nodeEditComponents/Fieldselection';
@@ -99,58 +100,47 @@ const NodeEdit = props => {
     loadEventFields({ eventTableName: value.TableName }).then(res => {
       if (res.code === 0) {
         let defaultCheckedList = value[val] ? value[val].split(',') : [];
-        // 处理数据为树形结构
-        let keylist = new Set();
-        let list = new Map();
-        res.data.forEach(item => {
-          keylist.add(item.group);
-          if (keylist.has(item.group)) {
-            let listItem = list.get(item.group);
-            // 存入check得选项，是否全选，选中的选项'
-            if (listItem) {
-              list.set(item.group, {
-                plainOptions: [...listItem.plainOptions, item.fieldName],
-                defaultCheckedList: [],
-              });
-            } else {
-              list.set(item.group, {
-                plainOptions: [item.fieldName],
-                defaultCheckedList: [],
-              });
-            }
-          }
+        // 处理树形结构
+        let checkList = res.data.map(item => {
+          let plainOptions = [];
+          item.root.forEach(ele => {
+            plainOptions = [...plainOptions, ele.fieldName];
+          });
+          return {
+            groupName: item.groupName,
+            plainOptions,
+            defaultCheckedList: [],
+          };
         });
-        let checkList = [...list];
         defaultCheckedList.forEach(item => {
           checkList.forEach(element => {
             // 当前得模块是否有当前字段
-            let indeterminate = element[1].plainOptions.some(
+            let indeterminate = element.plainOptions.some(
               checkName => checkName === item,
             );
             // 处理已选中的字段
             if (indeterminate) {
-              element[1].defaultCheckedList.push(item);
+              element.defaultCheckedList.push(item);
             }
             if (
-              element[1].defaultCheckedList.length > 0 &&
-              element[1].defaultCheckedList.length <
-                element[1].plainOptions.length
+              element.defaultCheckedList.length > 0 &&
+              element.defaultCheckedList.length < element.plainOptions.length
             ) {
-              element[1].indeterminate = true;
+              element.indeterminate = true;
             } else {
-              element[1].indeterminate = false;
+              element.indeterminate = false;
             }
             // 处理是否全选字段
             if (
-              element[1].defaultCheckedList.length ===
-              element[1].plainOptions.length
+              element.defaultCheckedList.length === element.plainOptions.length
             ) {
-              element[1].checkAll = true;
+              element.checkAll = true;
             } else {
-              element[1].checkAll = false;
+              element.checkAll = false;
             }
           });
         });
+        console.log(checkList, 'checkList');
         setFieldList(checkList);
         setTimeout(() => {
           setShowField(true);
@@ -215,14 +205,19 @@ const NodeEdit = props => {
     }
   };
   return (
-    <Modal
+    <Drawer
       title="流程节点配置"
+      width="500px"
+      onClose={handleCancel}
       visible={visible}
-      onOk={onFinish}
-      width="800px"
-      onCancel={handleCancel}
-      maskClosable={false}
-      centered
+      footer={
+        <Space>
+          <Button onClick={handleCancel}>取消</Button>
+          <Button onClick={onFinish} type="primary">
+            确定
+          </Button>
+        </Space>
+      }
     >
       <Form
         form={form}
@@ -329,13 +324,13 @@ const NodeEdit = props => {
             />
           </div>
         </Form.Item>
-        <Form.Item label="查看字段（工程模型）">
+        <Form.Item label="查看字段">
           <div className={styles.filedListItem}>
             <Form.Item
               name="SeeFields"
               style={{ marginBottom: 0, width: '100%' }}
             >
-              <Input placeholder="请选择查看字段" allowClear />
+              <Input placeholder="请选择查看字段（工程模型）" allowClear />
             </Form.Item>
             <Button
               type="dashed"
@@ -379,7 +374,7 @@ const NodeEdit = props => {
         fieldList={fieldList}
         onSubumit={val => setFiled(val)}
       />
-    </Modal>
+    </Drawer>
   );
 };
 export default NodeEdit;

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection.jsx

@@ -19,7 +19,7 @@ const Fieldselection = props => {
       return;
     }
     checkList.forEach(element => {
-      arr = [...arr, ...element[1].defaultCheckedList];
+      arr = [...arr, ...element.defaultCheckedList];
     });
     setSelectList(arr);
     // 初始化拖拽
@@ -35,11 +35,11 @@ const Fieldselection = props => {
   const onChange = (list, index) => {
     setCheckList(value => {
       const chooseList = JSON.parse(JSON.stringify(value));
-      chooseList[index][1].defaultCheckedList = list;
-      chooseList[index][1].indeterminate =
-        !!list.length && list.length < chooseList[index][1].plainOptions.length;
-      chooseList[index][1].checkAll =
-        list.length === chooseList[index][1].plainOptions.length;
+      chooseList[index].defaultCheckedList = list;
+      chooseList[index].indeterminate =
+        !!list.length && list.length < chooseList[index].plainOptions.length;
+      chooseList[index].checkAll =
+        list.length === chooseList[index].plainOptions.length;
       return chooseList;
     });
   };
@@ -47,11 +47,11 @@ const Fieldselection = props => {
   const onCheckAllChange = (e, index) => {
     setCheckList(value => {
       const chooseList = JSON.parse(JSON.stringify(value));
-      chooseList[index][1].defaultCheckedList = e.target.checked
-        ? chooseList[index][1].plainOptions
+      chooseList[index].defaultCheckedList = e.target.checked
+        ? chooseList[index].plainOptions
         : [];
-      chooseList[index][1].indeterminate = false;
-      chooseList[index][1].checkAll = e.target.checked;
+      chooseList[index].indeterminate = false;
+      chooseList[index].checkAll = e.target.checked;
       return chooseList;
     });
   };
@@ -98,19 +98,21 @@ const Fieldselection = props => {
               <div className={styles.cardBox} key={index}>
                 <div className={styles.title}>
                   <Divider orientation="left" className={styles.cardDivider}>
-                    <span style={{ marginRight: '10px' }}>{item[0]}</span>
+                    <span style={{ marginRight: '10px' }}>
+                      {item.groupName}
+                    </span>
                     <Checkbox
-                      indeterminate={item[1].indeterminate}
+                      indeterminate={item.indeterminate}
                       onChange={e => onCheckAllChange(e, index)}
-                      checked={item[1].checkAll}
+                      checked={item.checkAll}
                     />
                   </Divider>
                 </div>
                 <div className={styles.filedList}>
                   <CheckboxGroup
                     key={index}
-                    options={item[1].plainOptions}
-                    value={item[1].defaultCheckedList}
+                    options={item.plainOptions}
+                    value={item.defaultCheckedList}
                     onChange={list => onChange(list, index)}
                   />
                 </div>

src/pages/platformCenter/filedConfig/fieldEditor.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Modal, Input, Select, Radio, Checkbox, notification, Tooltip } from 'antd';
+import {
+  Form,
+  Modal,
+  Input,
+  Select,
+  Radio,
+  Checkbox,
+  notification,
+  Tooltip,
+  Drawer,
+  Space,
+  Button,
+} from 'antd';
 
 import {
-    getField, loadTableFields, LoadEventFields, LoadEventType, UpdateFields
-} from '@/services/platform/bs'
-import styles from './index.less'
-import ChangeAdd from './changeAdd'
+  getField,
+  loadTableFields,
+  LoadEventFields,
+  LoadEventType,
+  UpdateFields,
+} from '@/services/platform/bs';
+import styles from './index.less';
+import ChangeAdd from './changeAdd';
 import { PlusSquareOutlined } from '@ant-design/icons';
 import { shape } from 'prop-types';
 const AddModal = props => {
-    const { callBackSubmit = () => { }, isType, itemData, isVisible, formObj1 } = props;
-    const [loading, setLoading] = useState(false);
-    const [fieldName, setFieldName] = useState([]); // 弹窗
-    const [eventList, setEventList] = useState([]); // 事件
-    const [filed, setFiled] = useState({}); // 事件
-    const [verification, setVerification] = useState([]);
-    const [Shape, setShape] = useState('文本')
-    const [characteristics, setCharacteristics] = useState(['文本', '数值', '唯一值文本', '多行文本', '编码', '地址', '本人部门', '本人姓名', '本人ID', '选择器', '搜索选择器', '值选择器', '值复选器', '业务选择器', '可编辑值选择器', '平铺值选择器', '站点选择器', '人员选择器', '人员选择器新', '城市选择器', '台账选择器', '附件', '可预览附件', '图片', '可预览图片', '录音', '视频', '日期时间', '日期', '日期月份', '日期年份', '日期周', '时分秒', '设备选择', '坐标控件', '区域控件', '路径控件', '智能抄表', '二维码识别', '设备二维码', '位置坐标'])
-    const [visible, setVisible] = useState(false); // 弹窗
-    const [isShow, setIsShow] = useState(false); // 弹窗
-    const [type, setType] = useState(''); // 弹窗类型
-    const [formObj, setFormObj] = useState({ rule: [], numerical: '' });
-    const [characterValue, setCharacterValue] = useState('')
-    const [pramData, setPramData] = useState({ Unit: '', ExceptionEvent: '', Group: '', RowSpan: 0, ColSpan: 0, ReadOnly: false, EditableLater: false, ExceptionValue: '', Preset: '', picture: false, must: false, coordinates: false })
-    const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
-    const { TextArea } = Input;
-    const [form] = Form.useForm();
-    const { Item } = Form;
-    // 提交
-    const onSubmit = () => {
-        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: 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), 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,
-                        });
-                    }
-                })
+  const {
+    callBackSubmit = () => {},
+    isType,
+    itemData,
+    isVisible,
+    formObj1,
+    onCancel,
+  } = props;
+  const [loading, setLoading] = useState(false);
+  const [fieldName, setFieldName] = useState([]); // 弹窗
+  const [eventList, setEventList] = useState([]); // 事件
+  const [filed, setFiled] = useState({}); // 事件
+  const [verification, setVerification] = useState([]);
+  const [Shape, setShape] = useState('文本');
+  const [characteristics, setCharacteristics] = useState([
+    '文本',
+    '数值',
+    '唯一值文本',
+    '多行文本',
+    '编码',
+    '地址',
+    '本人部门',
+    '本人姓名',
+    '本人ID',
+    '选择器',
+    '搜索选择器',
+    '值选择器',
+    '值复选器',
+    '业务选择器',
+    '可编辑值选择器',
+    '平铺值选择器',
+    '站点选择器',
+    '人员选择器',
+    '人员选择器新',
+    '城市选择器',
+    '台账选择器',
+    '附件',
+    '可预览附件',
+    '图片',
+    '可预览图片',
+    '录音',
+    '视频',
+    '日期时间',
+    '日期',
+    '日期月份',
+    '日期年份',
+    '日期周',
+    '时分秒',
+    '设备选择',
+    '坐标控件',
+    '区域控件',
+    '路径控件',
+    '智能抄表',
+    '二维码识别',
+    '设备二维码',
+    '位置坐标',
+  ]);
+  const [visible, setVisible] = useState(false); // 弹窗
+  const [isShow, setIsShow] = useState(false); // 弹窗
+  const [type, setType] = useState(''); // 弹窗类型
+  const [formObj, setFormObj] = useState({ rule: [], numerical: '' });
+  const [characterValue, setCharacterValue] = useState('');
+  const [pramData, setPramData] = useState({
+    Unit: '',
+    ExceptionEvent: '',
+    Group: '',
+    RowSpan: 0,
+    ColSpan: 0,
+    ReadOnly: false,
+    EditableLater: false,
+    ExceptionValue: '',
+    Preset: '',
+    picture: false,
+    must: false,
+    coordinates: false,
+  });
+  const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
+  const { TextArea } = Input;
+  const [form] = Form.useForm();
+  const { Item } = Form;
+  // 提交
+  const onSubmit = () => {
+    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: 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),
+            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,
+            });
+          }
         });
-    };
+      }
+    });
+  };
 
-
-    useEffect(() => {
-        if (isType != '') {
-            let req1 = getField({ fieldID: itemData.ID })
-            let req2 = loadTableFields({ tableName: formObj1 })
-            let req3 = LoadEventType({})
-            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)
-                }
-            })
+  useEffect(() => {
+    if (isType != '') {
+      let req1 = getField({ fieldID: itemData.ID });
+      let req2 = loadTableFields({ tableName: formObj1 });
+      let req3 = LoadEventType({});
+      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);
         }
-
-    }, [isVisible]);
-
-    const layout = {
-        layout: 'horizontal',
-        labelCol: {
-            span: 4,
-        },
-        wrapperCol: {
-            span: 17,
-        },
-    };
-
-    const handleChange = (value) => {
-        form.setFieldsValue({ schemename: value });
+      });
     }
+  }, [isVisible]);
 
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 3,
+    },
+    wrapperCol: {
+      span: 30,
+    },
+  };
 
-    const onOK = prop => {
-        setVisible(false);
-        if (type === 'rule') {
-            form.setFieldsValue({ ValidationRule: prop });
-        } else {
-            setCheckedList(prop.checkedList)
-            setCharacterValue(prop.str)
-        }
+  const handleChange = value => {
+    form.setFieldsValue({ schemename: value });
+  };
 
-    };
-    const add = (type) => {
-        let obj = form.getFieldsValue();
-        let data = { ...formObj }
-        if (obj.ValidationRule) {
-            let arr = obj.ValidationRule.split(",")
-            arr.map(item => {
-                switch (item) {
-                    case 'required':
-                        data.rule.push(item);
-                        break;
-                    case 'emphasis':
-                        data.rule.push(item);
-                        break;
-                    case 'sensitive':
-                        data.rule.push(item);
-                        break;
-                    default:
-                        data.numerical = item
-                }
-            })
-        } else {
-            data = { rule: [], numerical: '' }
-        }
-        setType(type);
-        setFormObj(data)
-        setVisible(true);
+  const onOK = prop => {
+    setVisible(false);
+    if (type === 'rule') {
+      form.setFieldsValue({ ValidationRule: prop });
+    } else {
+      setCheckedList(prop.checkedList);
+      setCharacterValue(prop.str);
     }
-
-    const handleEvent = (value, e) => {
-        let data = { ...pramData }
-        data.ExceptionEvent = e.name
-        if (e.tablename) {
-            getFieldData(e.tablename)
-            setPramData(data)
-        } else {
-            setIsShow(false)
-            setFiled({})
-            setCharacterValue('')
-            setCheckedList([])
+  };
+  const add = type => {
+    let obj = form.getFieldsValue();
+    let data = { ...formObj };
+    if (obj.ValidationRule) {
+      let arr = obj.ValidationRule.split(',');
+      arr.map(item => {
+        switch (item) {
+          case 'required':
+            data.rule.push(item);
+            break;
+          case 'emphasis':
+            data.rule.push(item);
+            break;
+          case 'sensitive':
+            data.rule.push(item);
+            break;
+          default:
+            data.numerical = item;
         }
+      });
+    } else {
+      data = { rule: [], numerical: '' };
     }
-    const getFieldData = (value) => {
-        LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
-            if (res.msg === 'Ok') {
-                setFiled(formateArrDataA(res.data.root, 'group'))
-                setIsShow(true)
-            }
+    setType(type);
+    setFormObj(data);
+    setVisible(true);
+  };
 
-        })
+  const handleEvent = (value, e) => {
+    let data = { ...pramData };
+    data.ExceptionEvent = e.name;
+    if (e.tablename) {
+      getFieldData(e.tablename);
+      setPramData(data);
+    } else {
+      setIsShow(false);
+      setFiled({});
+      setCharacterValue('');
+      setCheckedList([]);
     }
+  };
+  const getFieldData = value => {
+    LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
+      if (res.msg === 'Ok') {
+        setFiled(formateArrDataA(res.data.root, 'group'));
+        setIsShow(true);
+      }
+    });
+  };
 
-
-    const formateArrDataA = (initialArr, name) => {
-        // 判定传参是否符合规则
-        if (!(initialArr instanceof Array)) {
-            return '请传入正确格式的数组'
-        }
-        if (!name) {
-            return '请传入对象属性'
-        }
-        //先获取一下这个数组中有多少个"name"
-        let nameArr = []
-        for (let i in initialArr) {
-            if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
-                nameArr.push(initialArr[i][`${name}`])
-            }
-        }
-        //新建一个包含多个list的结果对象
-        let tempObj = {}
-        // 根据不同的"name"生成多个数组
-        for (let k in nameArr) {
-            for (let j in initialArr) {
-                if (initialArr[j][`${name}`] == nameArr[k]) {
-                    // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
-                    tempObj[nameArr[k]] = tempObj[nameArr[k]] || []
-                    tempObj[nameArr[k]].push(initialArr[j])
-                }
-            }
-        }
-        for (let key in tempObj) {
-            let arr = []
-            tempObj[key].map(item => {
-                tempObj[key] = arr;
-                arr.push(item.fieldName)
-            })
-        }
-        return tempObj
+  const formateArrDataA = (initialArr, name) => {
+    // 判定传参是否符合规则
+    if (!(initialArr instanceof Array)) {
+      return '请传入正确格式的数组';
     }
-    const handleCharacteristics = (value) => {
-        let data = { ...pramData }
-        setShape(value)
-        data.must = false
-        data.coordinates = false
-        data.picture = false
-        data.Preset = ''
-        setPramData(data)
-        form.setFieldsValue({ ValidationRule: '' });
-        if (value.indexOf("日期") != -1 || value === "时分秒") {
-            form.setFieldsValue({ Config: undefined });
-        }
-
+    if (!name) {
+      return '请传入对象属性';
     }
-    const onCharacterValue = (e) => {
-        setCharacterValue(e.target.value)
+    //先获取一下这个数组中有多少个"name"
+    let nameArr = [];
+    for (let i in initialArr) {
+      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
+        nameArr.push(initialArr[i][`${name}`]);
+      }
     }
-    const onChangeReady = (e, str) => {
-        let data = { ...pramData }
-        switch (str) {
-            case 'ReadOnly':
-                data.ReadOnly = e.target.checked;
-                break;
-            case 'EditableLater':
-                data.EditableLater = e.target.checked
-                break;
-            case 'must':
-                data.must = e.target.checked
-                break;
-            case 'picture':
-                data.picture = e.target.checked
-                break;
-            case 'coordinates':
-                data.coordinates = e.target.checked
-                break;
+    //新建一个包含多个list的结果对象
+    let tempObj = {};
+    // 根据不同的"name"生成多个数组
+    for (let k in nameArr) {
+      for (let j in initialArr) {
+        if (initialArr[j][`${name}`] == nameArr[k]) {
+          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
+          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
+          tempObj[nameArr[k]].push(initialArr[j]);
         }
-        setPramData(data)
+      }
     }
-    const handleInput = (e, str) => {
-        let data = { ...pramData }
-        switch (str) {
-            case 'Unit':
-                data.Unit = e.target.value;
-                break;
-            case 'RowSpan':
-                data.RowSpan = e.target.value;
-                break;
-            case 'Preset':
-                data.Preset = e.target.value;
-                break;
-            case 'ExceptionValue':
-                data.ExceptionValue = e.target.value;
-                break;
-            default:
-                break
-
-        }
-        setPramData(data)
+    for (let key in tempObj) {
+      let arr = [];
+      tempObj[key].map(item => {
+        tempObj[key] = arr;
+        arr.push(item.fieldName);
+      });
     }
-    const handleSeparator = (value) => {
-        let data = { ...pramData }
-        switch (value) {
-            case '6':
-                data.Preset = '是'
-                form.setFieldsValue({ Config: '是,否' });
-                break;
-            case '7':
-                data.Preset = '否'
-                form.setFieldsValue({ Config: '是,否' });
-                break;
-            case '8':
-                data.Preset = '否'
-                form.setFieldsValue({ Config: '否,是' });
-                break;
-        }
-        setPramData(data)
+    return tempObj;
+  };
+  const handleCharacteristics = value => {
+    let data = { ...pramData };
+    setShape(value);
+    data.must = false;
+    data.coordinates = false;
+    data.picture = false;
+    data.Preset = '';
+    setPramData(data);
+    form.setFieldsValue({ ValidationRule: '' });
+    if (value.indexOf('日期') != -1 || value === '时分秒') {
+      form.setFieldsValue({ Config: undefined });
+    }
+  };
+  const onCharacterValue = e => {
+    setCharacterValue(e.target.value);
+  };
+  const onChangeReady = (e, str) => {
+    let data = { ...pramData };
+    switch (str) {
+      case 'ReadOnly':
+        data.ReadOnly = e.target.checked;
+        break;
+      case 'EditableLater':
+        data.EditableLater = e.target.checked;
+        break;
+      case 'must':
+        data.must = e.target.checked;
+        break;
+      case 'picture':
+        data.picture = e.target.checked;
+        break;
+      case 'coordinates':
+        data.coordinates = e.target.checked;
+        break;
+    }
+    setPramData(data);
+  };
+  const handleInput = (e, str) => {
+    let data = { ...pramData };
+    switch (str) {
+      case 'Unit':
+        data.Unit = e.target.value;
+        break;
+      case 'RowSpan':
+        data.RowSpan = e.target.value;
+        break;
+      case 'Preset':
+        data.Preset = e.target.value;
+        break;
+      case 'ExceptionValue':
+        data.ExceptionValue = e.target.value;
+        break;
+      default:
+        break;
     }
-    return (
-        <>
-            <Modal
-                title='修改'
-                bodyStyle={{ width: '100%', minHeight: '100px' }}
-                width="700px"
-                destroyOnClose
-                maskClosable={false}
-                centered={true}
-                cancelText="取消"
-                okText="确认"
-                {...props}
-                visible={isVisible}
-                onOk={() => onSubmit()}
-                confirmLoading={loading}
-                forceRender={true}
-                getContainer={false}
+    setPramData(data);
+  };
+  const handleSeparator = value => {
+    let data = { ...pramData };
+    switch (value) {
+      case '6':
+        data.Preset = '是';
+        form.setFieldsValue({ Config: '是,否' });
+        break;
+      case '7':
+        data.Preset = '否';
+        form.setFieldsValue({ Config: '是,否' });
+        break;
+      case '8':
+        data.Preset = '否';
+        form.setFieldsValue({ Config: '否,是' });
+        break;
+    }
+    setPramData(data);
+  };
+  return (
+    <>
+      <Drawer
+        title="修改"
+        width="600px"
+        // {...props}
+        visible={isVisible}
+        onClose={onCancel}
+        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: '请输入表名' }]}
             >
-                {isVisible && (
-                    <Form form={form} {...layout} >
-                        <Item
-                            label="字段名"
-                            name="Name"
-                            rules={[{ required: true, message: '请输入表名' }]}
-                        >
-                            <Input placeholder="请输入别名" disabled />
-                        </Item>
-                        <Item
-                            label="别名"
-                            name="Alias"
-                        >
-                            <Input placeholder="请输入别名" allowClear />
-                        </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>
+              <Input placeholder="请输入别名" disabled />
+            </Item>
+            <Item label="别名" name="Alias">
+              <Input placeholder="请输入别名" allowClear />
+            </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="形态"
+            <Item label="形态">
+              <div className={styles.listEvent}>
+                <Select
+                  style={{ width: '42%' }}
+                  value={Shape}
+                  onChange={handleCharacteristics}
+                >
+                  {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: '4rem' }}
+                    placeholder=""
+                    allowClear
+                    value={pramData.RowSpan}
+                    onChange={e => handleInput(e, 'RowSpan')}
+                  />
+                </div>
+              </div>
+            </Item>
+            {(() => {
+              switch (Shape) {
+                case '编码':
+                  return (
+                    <>
+                      <Item label="前缀" name="prefix">
+                        <Input
+                          style={{ width: '95%' }}
+                          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 />
+                      </Item>
+                      <Item colon={false} label=" ">
+                        {' '}
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                          <span style={{ marginRight: '0.4rem' }}>
+                            以英文逗号为分隔符填写，或其他分隔符粘贴：
+                          </span>
+                          <Select
+                            onChange={handleSeparator}
+                            style={{ width: '30%' }}
+                          >
+                            <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')}
                         >
-                            <div className={styles.listEvent}>
-                                <Select style={{ width: '42%' }} value={Shape} onChange={handleCharacteristics}>
-                                    {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: '4rem' }} placeholder="" allowClear value={pramData.RowSpan} onChange={(e) => handleInput(e, 'RowSpan')} /></div>
-                            </div>
-                        </Item>
-                        {(() => {
-                            switch (Shape) {
-                                case '编码':
-                                    return <>
-                                        <Item
-                                            label="前缀"
-                                            name="prefix"
-                                        >
-                                            <Input style={{ width: '95%' }} 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 />
-                                    </Item>
-                                        <Item
-                                            colon={false}
-                                            label=" "
-                                        >  <div style={{ display: 'flex', alignItems: 'center' }}>
-                                                <span style={{ marginRight: '0.4rem' }}>以英文逗号为分隔符填写，或其他分隔符粘贴：</span>
-                                                <Select onChange={handleSeparator} style={{ width: '30%' }}>
-                                                    <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')}></Checkbox>锁定为当前位置坐标
-                                        </div>
-                                    </Item>
-                                default:
-                                    return <Item
-                                        label="配置"
-                                        name="Config"
-                                    >
-                                        <TextArea allowClear />
-                                    </Item>
-                            }
-                        }
-                        )()}
-                        {Shape === '图片' || Shape === '可预览图片' ? '' :
-                            <Item
-                                label="预设值"
-                            >
-                                <div className={styles.listEvent}>
-                                    <Input style={{ width: '40%', 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="异常值"
+                          允许从相册选取
+                        </Checkbox>
+                        <Checkbox
+                          checked={pramData.must}
+                          onChange={e => onChangeReady(e, 'must')}
                         >
-                            <div className={styles.listEvent}>
-                                <Input style={{ width: '40%', height: '1.8rem' }} value={pramData.ExceptionValue} onChange={(e) => handleInput(e, 'ExceptionValue')} placeholder="" allowClear />
-                                <Item
-                                    style={{ marginLeft: '1rem' }}
-                                    label="触发事件"
-                                    name="ExceptionEvent"
-                                    style={{ margin: '0 0 0 1rem' }}
-                                >
-                                    <Select style={{ width: '12rem' }} onChange={handleEvent}>
-                                        {eventList.length ? eventList.map((item, index) => { return <Select.Option key={index} tablename={item.TableName} name={item.Name} value={item.ID}>{item.Name}</Select.Option>; }) : ''}
-                                    </Select>
-                                </Item>
-                            </div>
-                        </Item>
-                        <Item
-                            label="字段集"
+                          必填字段
+                        </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' }}
                         >
-                            <div className={styles.listEvent}>
-                                <Input style={{ width: '93%' }} placeholder="" disabled={!isShow} onChange={onCharacterValue} allowClear value={characterValue} />
-                                <Tooltip title={!isShow ? '' : '字符集选择'}>
-                                    <PlusSquareOutlined
-                                        onClick={() => !isShow ? '' : add('characteristics')}
-                                        style={{ fontSize: '24px', color: !isShow ? 'gray' : '#1890FF', cursor: !isShow ? 'no-drop' : 'pointer', display: 'flex', alignItems: 'center', marginLeft: '0.5rem' }}
-                                    />
-                                </Tooltip>
-                            </div>
-                        </Item>
-                    </Form>
-                )}
-            </Modal>
-            <ChangeAdd
-                visible={visible}
-                onCancel={() => setVisible(false)}
-                callBackSubmit={onOK}
-                newCheckedList={checkedList}
-                isType={type}
-                filed={filed}
-                characterValue={characterValue}
-                formObj={formObj} />
-        </>
-    );
+                          默认为空
+                        </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 />
+                    </Item>
+                  );
+              }
+            })()}
+            {Shape === '图片' || Shape === '可预览图片' ? (
+              ''
+            ) : (
+              <Item label="预设值">
+                <div className={styles.listEvent}>
+                  <Input
+                    style={{ width: '40%', 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="异常值">
+              <div className={styles.listEvent}>
+                <Input
+                  style={{ width: '40%', height: '1.8rem' }}
+                  value={pramData.ExceptionValue}
+                  onChange={e => handleInput(e, 'ExceptionValue')}
+                  placeholder=""
+                  allowClear
+                />
+                <Item
+                  style={{ marginLeft: '1rem' }}
+                  label="触发事件"
+                  name="ExceptionEvent"
+                  style={{ margin: '0 0 0 1rem' }}
+                >
+                  <Select style={{ width: '12rem' }} onChange={handleEvent}>
+                    {eventList.length
+                      ? eventList.map((item, index) => {
+                          return (
+                            <Select.Option
+                              key={index}
+                              tablename={item.TableName}
+                              name={item.Name}
+                              value={item.ID}
+                            >
+                              {item.Name}
+                            </Select.Option>
+                          );
+                        })
+                      : ''}
+                  </Select>
+                </Item>
+              </div>
+            </Item>
+            <Item label="字段集">
+              <div className={styles.listEvent}>
+                <Input
+                  style={{ width: '93%' }}
+                  placeholder=""
+                  disabled={!isShow}
+                  onChange={onCharacterValue}
+                  allowClear
+                  value={characterValue}
+                />
+                <Tooltip title={!isShow ? '' : '字符集选择'}>
+                  <PlusSquareOutlined
+                    onClick={() => (!isShow ? '' : add('characteristics'))}
+                    style={{
+                      fontSize: '24px',
+                      color: !isShow ? 'gray' : '#1890FF',
+                      cursor: !isShow ? 'no-drop' : 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      marginLeft: '0.5rem',
+                    }}
+                  />
+                </Tooltip>
+              </div>
+            </Item>
+          </Form>
+        )}
+        <ChangeAdd
+          visible={visible}
+          onCancel={() => setVisible(false)}
+          callBackSubmit={onOK}
+          newCheckedList={checkedList}
+          isType={type}
+          filed={filed}
+          characterValue={characterValue}
+          formObj={formObj}
+        />
+      </Drawer>
+    </>
+  );
 };
 export default AddModal;

src/pages/platformCenter/filedConfig/filedConfig.jsx

 import React, { useState, useEffect } from 'react';
 import {
-    Form,
-    Modal,
-    Space,
-    Table,
-    Button,
-    Popconfirm,
-    Spin,
-    notification,
-    Tooltip
+  Form,
+  Modal,
+  Space,
+  Table,
+  Button,
+  Popconfirm,
+  Spin,
+  notification,
+  Tooltip,
 } from 'antd';
-import { EditOutlined, DeleteOutlined,SortDescendingOutlined,PlusSquareOutlined,RollbackOutlined  } from '@ant-design/icons';
-import { reloadTableFields, removeFields, loadUnattachedTables } from '@/services/platform/bs';
+import {
+  EditOutlined,
+  DeleteOutlined,
+  SortDescendingOutlined,
+  PlusSquareOutlined,
+  RollbackOutlined,
+} from '@ant-design/icons';
+import {
+  reloadTableFields,
+  removeFields,
+  loadUnattachedTables,
+} from '@/services/platform/bs';
 import FieldEditor from './fieldEditor';
 import { useHistory } from 'react-router-dom';
-import styles from './index.less'
-import AffiliateAdd from '../bsmanager/tablemanager/components/Field/affiliateAdd'
-import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroup'
+import styles from './index.less';
+import AffiliateAdd from '../bsmanager/tablemanager/components/Field/affiliateAdd';
+import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroup';
 const AddModal = props => {
-    const history = useHistory();
-    const [allData, setAllData] = useState([]);
-    const [tableList, setTableList] = useState([])
-    const [tableData, setTableData] = useState([]);
-    const [treeLoading, setTreeLoading] = useState(false);
-    const [formObj, setFormObj] = useState('');
-    const [flag, setFlag] = useState(0); // 弹窗类型
-    const [isVisible, setIsVisible] = useState(false); // 弹窗
-    const [isType, setIsType] = useState(''); // 弹窗类型
-    const [itemData, setItemData] = useState({});
-    const [select, setSelect] = useState([])
-    const [selectTableName, setSelectTableName] = useState({})
-    const [pramFormObj, setPramFormObj] = useState({});
-    const [visible, setVisible] = useState(false); // 弹窗
-    const [type, setType] = useState(''); // 弹窗类型
-    const editor = record => {
-        setIsType('edit');
-        setIsVisible(true);
-        setItemData(record);
-    };
-    const Submit = prop => {
-        setIsVisible(false);
-        setFlag(flag + 1);
-    };
-    const getField = () => {
-        loadUnattachedTables().then(res => {
-            if (res.data.root && res.data.root.length) {
-                setTableList(res.data.root)
-            }
-
-        })
+  const history = useHistory();
+  const [allData, setAllData] = useState([]);
+  const [tableList, setTableList] = useState([]);
+  const [tableData, setTableData] = useState([]);
+  const [treeLoading, setTreeLoading] = useState(false);
+  const [formObj, setFormObj] = useState('');
+  const [flag, setFlag] = useState(0); // 弹窗类型
+  const [isVisible, setIsVisible] = useState(false); // 弹窗
+  const [isType, setIsType] = useState(''); // 弹窗类型
+  const [itemData, setItemData] = useState({});
+  const [select, setSelect] = useState([]);
+  const [selectTableName, setSelectTableName] = useState({});
+  const [pramFormObj, setPramFormObj] = useState({});
+  const [visible, setVisible] = useState(false); // 弹窗
+  const [type, setType] = useState(''); // 弹窗类型
+  const editor = record => {
+    setIsType('edit');
+    setIsVisible(true);
+    setItemData(record);
+  };
+  const Submit = prop => {
+    setIsVisible(false);
+    setFlag(flag + 1);
+  };
+  const getField = () => {
+    loadUnattachedTables().then(res => {
+      if (res.data.root && res.data.root.length) {
+        setTableList(res.data.root);
+      }
+    });
+  };
+  // 处理表格特殊样式
+  const styleConfig = record => {
+    if (record.Type === 1) {
+      return 'red';
     }
-    const expandedRowRender = (item) => {
-        const columns = [
-            {
-                title: '字段名',
-                dataIndex: 'name',
-                key: 'name',
-                width: 190,
-                align: 'left',
-                render: text => <div style={{ paddingLeft: '2rem' }}>{text}</div>,
-            },
-            {
-                title: '别名',
-                dataIndex: 'alias',
-                key: 'alias',
-                align: 'center',
-                width: 200,
-            },
-            {
-                title: '字段类型',
-                dataIndex: 'storeType',
-                key: 'storeType',
-                align: 'center',
-                width: 200,
-            },
-            {
-                title: '形态',
-                dataIndex: 'shape',
-                key: 'shape',
-                align: 'center',
-                width: 200,
-            },
-            {
-                title: '配置',
-                dataIndex: 'config',
-                key: 'config',
-                align: 'center',
-                width: 200,
-            },
-
-            {
-                title: '只读',
-                dataIndex: 'readOnly',
-                key: 'readOnly',
-                align: 'center',
-                width: 200,
-            },
-            {
-                title: '同步',
-                dataIndex: 'syncEvent',
-                key: 'syncEvent',
-                align: 'center',
-                width: 200,
-            },
-            {
-                title: '操作',
-                width: 250,
-                ellipsis: true,
-                align: 'center',
-                render: (text, record) => (
-                    <Space>
-                        <Tooltip title="修改">
-                            <EditOutlined  style={{ fontSize: '16px', color: '#1890FF' }}
-                                onClick={() => {
-                                    editor(record);
-                                }}>
-                                编辑
-                            </EditOutlined>
-                        </Tooltip>
-                        <div onClick={e => e.stopPropagation()}>
-                            <Popconfirm
-                                title="是否删除该字段？"
-                                okText="确认"
-                                cancelText="取消"
-                                onConfirm={() => {
-                                    deleteChart(record);
-                                }}
-                            >
-                                <Tooltip title="删除">
-                                    <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }}>删除</DeleteOutlined>
-                                </Tooltip>
-                            </Popconfirm>
-                        </div>
-                    </Space>
-                ),
-            },
-        ];
-
-        return <Table columns={columns} onRow={record => {
-            return {
-                onDoubleClick: event => {
-                    event.stopPropagation()
-                    editor(record);
-                },
-                onClick: event => {
-                    event.stopPropagation()
-                    setSelectTableName(record)
-                }, // 点击行
-            }
-        }} bordered rowClassName={setRowClassName} showHeader={false} dataSource={allData[item.type]} pagination={false} />;
-    };
-    const setRowClassName = (record) =>
-        Object.entries(record).toString() === Object.entries(selectTableName).toString() ? styles.clickRowStyle : '';
+    if (record.Type === 2) {
+      return 'grey';
+    }
+    return '000000D9';
+  };
+  const expandedRowRender = item => {
     const columns = [
+      {
+        title: '字段名',
+        dataIndex: 'name',
+        key: 'name',
+        width: 190,
+        align: 'left',
+        render: (text, record) => (
+          <div style={{ paddingLeft: '2rem', color: styleConfig(record) }}>
+            {text}
+          </div>
+        ),
+      },
+      {
+        title: '别名',
+        dataIndex: 'alias',
+        key: 'alias',
+        align: 'center',
+        width: 200,
+        render: (text, record) => (
+          <span style={{ color: styleConfig(record) }}>{text} </span>
+        ),
+      },
+      {
+        title: '字段类型',
+        dataIndex: 'storeType',
+        key: 'storeType',
+        align: 'center',
+        width: 200,
+        render: (text, record) => (
+          <span style={{ color: styleConfig(record) }}>{text} </span>
+        ),
+      },
+      {
+        title: '形态',
+        dataIndex: 'shape',
+        key: 'shape',
+        align: 'center',
+        width: 200,
+        render: (text, record) => (
+          <span style={{ color: styleConfig(record) }}>{text} </span>
+        ),
+      },
+      {
+        title: '配置',
+        dataIndex: 'config',
+        key: 'config',
+        align: 'center',
+        width: 200,
+        render: (text, record) => (
+          <span style={{ color: styleConfig(record) }}>{text} </span>
+        ),
+      },
 
-        {
-            title: '字段名',
-            dataIndex: 'type',
-            key: 'type',
-            align: 'left',
-            width: 150,
-            render: text => {
-                return (<a >{text}(共{allData[text] ? allData[text].length : ''}条)</a>)
-            }
-
-        },
-        {
-            title: '别名',
-            dataIndex: 'alias',
-            key: 'alias',
-            align: 'center',
-            width: 200,
-        },
-        {
-            title: '字段类型',
-            dataIndex: 'storeType',
-            key: 'storeType',
-            align: 'center',
-            width: 200,
-        },
-        {
-            title: '形态',
-            dataIndex: 'shape',
-            key: 'shape',
-            align: 'center',
-            width: 200,
-        },
-        {
-            title: '配置',
-            dataIndex: 'config',
-            key: 'config',
-            align: 'center',
-            width: 200,
-        },
-
-        {
-            title: '只读',
-            dataIndex: 'readOnly',
-            key: 'readOnly',
-            align: 'center',
-            width: 200,
-        },
-        {
-            title: '同步',
-            dataIndex: 'syncEvent',
-            key: 'syncEvent',
-            align: 'center',
-            width: 200,
-        },
-        {
-            title: '操作',
-            width: 250,
-            ellipsis: true,
-            key: 'title',
-            align: 'center',
+      {
+        title: '只读',
+        dataIndex: 'readOnly',
+        key: 'readOnly',
+        align: 'center',
+        width: 200,
+        render: (text, record) => (
+          <span style={{ color: styleConfig(record) }}>{text} </span>
+        ),
+      },
+      {
+        title: '同步',
+        dataIndex: 'syncEvent',
+        key: 'syncEvent',
+        align: 'center',
+        width: 200,
+        render: (text, record) => (
+          <span style={{ color: styleConfig(record) }}>{text} </span>
+        ),
+      },
+      {
+        title: '操作',
+        width: 250,
+        ellipsis: true,
+        align: 'center',
+        render: (text, record) => (
+          <Space>
+            <Tooltip title="修改">
+              <EditOutlined
+                style={{ fontSize: '16px', color: '#1890FF' }}
+                onClick={() => {
+                  editor(record);
+                }}
+              >
+                编辑
+              </EditOutlined>
+            </Tooltip>
+            <div onClick={e => e.stopPropagation()}>
+              <Popconfirm
+                title="是否删除该字段？"
+                okText="确认"
+                cancelText="取消"
+                onConfirm={() => {
+                  deleteChart(record);
+                }}
+              >
+                <Tooltip title="删除">
+                  <DeleteOutlined
+                    style={{ fontSize: '16px', color: '#e86060' }}
+                  >
+                    删除
+                  </DeleteOutlined>
+                </Tooltip>
+              </Popconfirm>
+            </div>
+          </Space>
+        ),
+      },
+    ];
 
-        },
+    return (
+      <Table
+        columns={columns}
+        onRow={record => {
+          return {
+            onDoubleClick: event => {
+              event.stopPropagation();
+              editor(record);
+            },
+            onClick: event => {
+              event.stopPropagation();
+              setSelectTableName(record);
+            }, // 点击行
+          };
+        }}
+        bordered
+        rowClassName={setRowClassName}
+        showHeader={false}
+        dataSource={allData[item.type]}
+        pagination={false}
+      />
+    );
+  };
+  const setRowClassName = record =>
+    Object.entries(record).toString() ===
+    Object.entries(selectTableName).toString()
+      ? styles.clickRowStyle
+      : '';
+  const columns = [
+    {
+      title: '字段名',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'left',
+      width: 150,
+      render: text => {
+        return (
+          <a>
+            {text}(共{allData[text] ? allData[text].length : ''}条)
+          </a>
+        );
+      },
+    },
+    {
+      title: '别名',
+      dataIndex: 'alias',
+      key: 'alias',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: '字段类型',
+      dataIndex: 'storeType',
+      key: 'storeType',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: '形态',
+      dataIndex: 'shape',
+      key: 'shape',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: '配置',
+      dataIndex: 'config',
+      key: 'config',
+      align: 'center',
+      width: 200,
+    },
 
-    ];
-    useEffect(() => {
-        if (props.match.params.id) {
-            setFormObj(props.match.params.id)
-            setTreeLoading(true);
-            reloadTableFields({
-                tableName: props.match.params.id,
-            }).then(res => {
-                setTreeLoading(false);
-                if (res.msg === 'Ok') {
-                    let arr = formateArrDataA(res.data.root, 'group')
-                    let newArr = []
-                    Object.keys(arr).map((item, index) => {
-                        newArr.push({ type: item, key: index, id: index })
-                    })
-                    setAllData(arr);
-                    setTableData(newArr);
-                    setSelect(newArr)
-                }
-            });
-            getField()
-        }
-    }, [flag]);
-    const formateArrDataA = (initialArr, name) => {
-        // 判定传参是否符合规则
-        if (!(initialArr instanceof Array)) {
-            return '请传入正确格式的数组'
+    {
+      title: '只读',
+      dataIndex: 'readOnly',
+      key: 'readOnly',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: '同步',
+      dataIndex: 'syncEvent',
+      key: 'syncEvent',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: '操作',
+      width: 250,
+      ellipsis: true,
+      key: 'title',
+      align: 'center',
+    },
+  ];
+  useEffect(() => {
+    if (props.match.params.id) {
+      setFormObj(props.match.params.id);
+      setTreeLoading(true);
+      reloadTableFields({
+        tableName: props.match.params.id,
+      }).then(res => {
+        setTreeLoading(false);
+        if (res.msg === 'Ok') {
+          let arr = formateArrDataA(res.data.root, 'group');
+          let newArr = [];
+          Object.keys(arr).map((item, index) => {
+            newArr.push({ type: item, key: index, id: index });
+          });
+          setAllData(arr);
+          setTableData(newArr);
+          setSelect(newArr);
         }
-        if (!name) {
-            return '请传入对象属性'
-        }
-        //先获取一下这个数组中有多少个"name"
-        let nameArr = []
-        for (let i in initialArr) {
-            if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
-                nameArr.push(initialArr[i][`${name}`])
-            }
-        }
-        //新建一个包含多个list的结果对象
-        let tempObj = {}
-        // 根据不同的"name"生成多个数组
-        for (let k in nameArr) {
-            for (let j in initialArr) {
-                if (initialArr[j][`${name}`] == nameArr[k]) {
-                    // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
-                    tempObj[nameArr[k]] = tempObj[nameArr[k]] || []
-                    tempObj[nameArr[k]].push(initialArr[j])
-                }
-            }
-        }
-        for (let keys in tempObj) {
-            let arr = []
-            tempObj[keys].map((item, index) => {
-                tempObj[keys] = arr;
-                item.key = index
-                arr.push(item)
-            })
-        }
-        return tempObj
+      });
+      getField();
     }
-    // 删除表字段
-    const deleteChart = record => {
-        removeFields({ fieldIDs: record.ID }).then(res => {
-            if (res.msg === 'Ok' || res.msg === '') {
-                notification.success({
-                    message: '提示',
-                    duration: 3,
-                    description: '删除成功',
-                });
-                setFlag(flag + 1);
-            } else {
-                notification.error({
-                    message: '提示',
-                    duration: 3,
-                    description: res.msg,
-                });
-            }
-        });
-    };
-    // 返回上一级
-    const back = () => {
-        let template = props.history.location.state.template
-        history.push({ pathname: '/platformCenter/bsmanger/tablemanger', state: { template } })
+  }, [flag]);
+  const formateArrDataA = (initialArr, name) => {
+    // 判定传参是否符合规则
+    if (!(initialArr instanceof Array)) {
+      return '请传入正确格式的数组';
     }
-    const onUnfold = (expanded, record) => {
-        const data = [...select]
-        let index = data.indexOf(record)
-        if (expanded) {
-            data.push(record)
-        } else {
-            data.splice(index, 1)
+    if (!name) {
+      return '请传入对象属性';
+    }
+    //先获取一下这个数组中有多少个"name"
+    let nameArr = [];
+    for (let i in initialArr) {
+      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
+        nameArr.push(initialArr[i][`${name}`]);
+      }
+    }
+    //新建一个包含多个list的结果对象
+    let tempObj = {};
+    // 根据不同的"name"生成多个数组
+    for (let k in nameArr) {
+      for (let j in initialArr) {
+        if (initialArr[j][`${name}`] == nameArr[k]) {
+          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
+          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
+          tempObj[nameArr[k]].push(initialArr[j]);
         }
-        setSelect(data)
+      }
     }
-    //附加
-    const add = (record) => {
-        setPramFormObj(props.history.location.state.template);
-        setType('affiliateAdd');
-        setVisible(true);
+    for (let keys in tempObj) {
+      let arr = [];
+      tempObj[keys].map((item, index) => {
+        tempObj[keys] = arr;
+        item.key = index;
+        arr.push(item);
+      });
     }
-    //分组与排序
-    const sort = (record) => {
-        setPramFormObj(props.history.location.state.template);
-        setType('sort');
-        setVisible(true);
+    return tempObj;
+  };
+  // 删除表字段
+  const deleteChart = record => {
+    removeFields({ fieldIDs: record.ID }).then(res => {
+      if (res.msg === 'Ok' || res.msg === '') {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '删除成功',
+        });
+        setFlag(flag + 1);
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+  // 返回上一级
+  const back = () => {
+    let template = props.history.location.state.template;
+    history.push({
+      pathname: '/platformCenter/bsmanger/tablemanger',
+      state: { template },
+    });
+  };
+  const onUnfold = (expanded, record) => {
+    const data = [...select];
+    let index = data.indexOf(record);
+    if (expanded) {
+      data.push(record);
+    } else {
+      data.splice(index, 1);
     }
-    const onSubmit = prop => {
-        setVisible(false);
-        setFlag(flag + 1)
-    };
-    return (
-
-        <><Spin tip="loading..." spinning={treeLoading}>
-            <div className={styles.containerBox}>
-                <div className={styles.config}><div className={styles.title}>{formObj}(字段配置)</div>
-                    <div className={styles.btn}>
-                        <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>附加</Button>
-                        <Button type="primary" icon={<SortDescendingOutlined /> }onClick={sort}>分组排序</Button>
-                        <Button type="primary" icon={<RollbackOutlined />} onClick={back}>返回</Button></div>
-                </div>
-
-                <Table
-                    columns={columns}
-                    dataSource={tableData}
-                    expandable={{ expandedRowRender }}
-                    size="small"
-                    rowKey='id'
-                    expandedRowKeys={select.map(item => item.key)} //展开的行
-                    expandRowByClick={true}
-                    defaultExpandAllRows={true}
-                    pagination={false}
-                    scroll={{ y: 'calc(100vh - 186px)' }}
-                    size="small"
-                    onExpand={onUnfold} />
+    setSelect(data);
+  };
+  //附加
+  const add = record => {
+    setPramFormObj(props.history.location.state.template);
+    setType('affiliateAdd');
+    setVisible(true);
+  };
+  //分组与排序
+  const sort = record => {
+    setPramFormObj(props.history.location.state.template);
+    setType('sort');
+    setVisible(true);
+  };
+  const onSubmit = prop => {
+    setVisible(false);
+    setFlag(flag + 1);
+  };
+  return (
+    <>
+      <Spin tip="loading..." spinning={treeLoading}>
+        <div className={styles.containerBox}>
+          <div className={styles.config}>
+            <div className={styles.title}>{formObj}(字段配置)</div>
+            <div className={styles.btn}>
+              <Button
+                type="primary"
+                icon={<PlusSquareOutlined />}
+                onClick={add}
+              >
+                附加
+              </Button>
+              <Button
+                type="primary"
+                icon={<SortDescendingOutlined />}
+                onClick={sort}
+              >
+                分组排序
+              </Button>
+              <Button type="primary" icon={<RollbackOutlined />} onClick={back}>
+                返回
+              </Button>
             </div>
-        </Spin><FieldEditor
-                isVisible={isVisible}
-                isType={isType}
-                itemData={itemData}
-                formObj1={formObj}
-                onCancel={() => setIsVisible(false)}
-                callBackSubmit={Submit} />
-            {visible && type === 'affiliateAdd' && (
-                <AffiliateAdd
-                    visible={visible}
-                    tableList={tableList}
-                    type={type}
-                    onCancel={() => setVisible(false)}
-                    callBackSubmit={onSubmit}
-                    formObj={pramFormObj}
-                />
-            )}
+          </div>
 
-            {visible && type === 'sort' && (
-                <LoadGroup
-                    visible={visible}
-                    type={type}
-                    formObj={pramFormObj}
-                    onCancel={() => setVisible(false)}
-                    callBackSubmit={onSubmit}
-                />
-            )}</>
+          <Table
+            columns={columns}
+            dataSource={tableData}
+            expandable={{ expandedRowRender }}
+            size="small"
+            rowKey="id"
+            expandedRowKeys={select.map(item => item.key)} //展开的行
+            expandRowByClick={true}
+            defaultExpandAllRows={true}
+            pagination={false}
+            scroll={{ y: 'calc(100vh - 186px)' }}
+            size="small"
+            onExpand={onUnfold}
+          />
+        </div>
+      </Spin>
+      <FieldEditor
+        isVisible={isVisible}
+        isType={isType}
+        itemData={itemData}
+        formObj1={formObj}
+        onCancel={() => setIsVisible(false)}
+        callBackSubmit={Submit}
+      />
+      {visible && type === 'affiliateAdd' && (
+        <AffiliateAdd
+          visible={visible}
+          tableList={tableList}
+          type={type}
+          onCancel={() => setVisible(false)}
+          callBackSubmit={onSubmit}
+          formObj={pramFormObj}
+        />
+      )}
 
-    );
+      {visible && type === 'sort' && (
+        <LoadGroup
+          visible={visible}
+          type={type}
+          formObj={pramFormObj}
+          onCancel={() => setVisible(false)}
+          callBackSubmit={onSubmit}
+        />
+      )}
+    </>
+  );
 };
 export default AddModal;

src/pages/userCenter/userManage/UserManage.js

@@ -107,6 +107,7 @@ const UserManage = () => {
   const [searchWord, setSearchWord] = useState(''); // 关键字
   const [currentSelectOrg, setCurrentSelectOrg] = useState('-1'); // 左侧机构树-选中组织,字符串类型默认全部机构'-1'，注意用户表中的OUID是数字
   const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-原先选中组织
+  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
 
   /** ***Modal弹框,是否可视**** */
   const [userVisible, setUserVisible] = useState(false); // 添加用户
@@ -143,7 +144,7 @@ const UserManage = () => {
   const [currentOrgArea, setCurrentOrgArea] = useState('');
   const [currentOrgDistinct, setCurrentOrgDistinct] = useState('');
   const [saveExtentFlag, setSaveExtentFlag] = useState(0);
-  const [filteredValue,setFilteredValue] =useState([]);
+  const [filteredValue, setFilteredValue] = useState([]);
   const { Search } = Input;
   const setRowClassName = record =>
     record.userID === selectColor.userID ? styles.clickRowStyle : '';
@@ -155,30 +156,14 @@ const UserManage = () => {
       key: 'loginName',
       width: 150,
       // fixed: 'left',
-      render: item => (
-        <div
-          ref={r => {
-            if (r) {
-              r.innerHTML = item;
-            }
-          }}
-        />
-      ),
+      render: item => searchStyle(item),
     },
     {
       title: '用户姓名',
       dataIndex: 'userName',
       key: 'userName',
       width: 150,
-      render: item => (
-        <div
-          ref={r => {
-            if (r) {
-              r.innerHTML = item;
-            }
-          }}
-        />
-      ),
+      render: item => searchStyle(item),
     },
     {
       title: '所在机构',
@@ -196,17 +181,9 @@ const UserManage = () => {
       key: 'phone',
       width: 150,
       ellipsis: true,
-      render: record => {
-        if (record) {
-          return (
-            <div
-              ref={r => {
-                if (r) {
-                  r.innerHTML = record;
-                }
-              }}
-            />
-          );
+      render: text => {
+        if (text) {
+          return searchStyle(text);
         }
         return <span>未绑定</span>;
       },
@@ -338,10 +315,7 @@ const UserManage = () => {
                 <div style={{ width: '130px' }}>
                   <Form form={form}>
                     <Item>
-                      <Radio.Group
-                        value={selectValue}
-                        onChange={onTypeChange}
-                      >
+                      <Radio.Group value={selectValue} onChange={onTypeChange}>
                         <Space direction="vertical">
                           <Radio value={0}>访客</Radio>
                           <Radio value={1}>普通用户</Radio>
@@ -387,7 +361,19 @@ const UserManage = () => {
       ),
     },
   ];
-
+  // 模糊查询匹配的样式
+  const searchStyle = val => {
+    let n;
+    if (showSearchStyle) {
+      n = val.replace(
+        new RegExp(searchWord, 'g'),
+        `<span style='color:red'>${searchWord}</span>`,
+      );
+    } else {
+      n = val;
+    }
+    return <div dangerouslySetInnerHTML={{ __html: n }} />;
+  };
   // 获取搜索框的值
   const handleSearch = e => {
     setSearchWord(e.target.value);
@@ -419,7 +405,7 @@ const UserManage = () => {
           <span className={styles.titleText}>{org.text}</span>
           <span className={styles.tip}>
             <Tooltip title="" className={styles.fs}>
-              <Dropdown overlay={orgButtonMenu} disabled={currentOrgOperate} >
+              <Dropdown overlay={orgButtonMenu} disabled={currentOrgOperate}>
                 <PlusOutlined
                   style={{ marginLeft: 20 }}
                   onClick={e => e.stopPropagation()}
@@ -472,7 +458,7 @@ const UserManage = () => {
       .then(newres => {
         if (newres.code === 0) {
           let res = newres.data;
-          console.log(res)
+          console.log(res);
           setTreeLoading(false);
           setTreeData(res);
           setTreeDataCopy(res);
@@ -511,8 +497,8 @@ const UserManage = () => {
 
   // 点击树节点，获取当前机构下所有用户
   const onSelect = (props, e) => {
-    console.log(e)
-    console.log(props)
+    console.log(e);
+    console.log(props);
     setTableLoading(true);
     if (e) {
       setOrgTitle(e.node.title.props.children[0].props.children);
@@ -533,6 +519,7 @@ const UserManage = () => {
       groupID: props[0],
     }).then(res => {
       if (res.code === 0) {
+        console.log(res);
         setCurrentOrgArea(res.data.MapRange);
         setCurrentOrgDistinct(res.data.AreeName);
       }
@@ -562,6 +549,7 @@ const UserManage = () => {
               item.key = index;
               return item;
             });
+            setShowSearchStyle(false);
             setTableData(table);
           } else {
             setTableLoading(false);
@@ -773,12 +761,12 @@ const UserManage = () => {
   const onTypeChange = value => {
     setSelctValue(value.target.value);
   };
-  const authUser = (record) => {
+  const authUser = record => {
     setCurrentUser(record);
-    console.log(selectValue)
-    AddUserAuthSetting({ 
+    console.log(selectValue);
+    AddUserAuthSetting({
       userId: record.userID,
-      userLevel: selectValue 
+      userLevel: selectValue,
     }).then(res => {
       if (res.code === 0) {
         message.info('提交成功');
@@ -817,12 +805,14 @@ const UserManage = () => {
           setOrgTitle('全部机构搜索结果'); // 设置表头
           setCurrentSelectOrg('-1'); // 清空选中机构
           console.log(res.data);
+          setShowSearchStyle(true);
           setTableData(res.data);
           setTableLength(res.data.length);
         } else {
           notification.error({
-            message: '提交失败',
-            description: res.message,
+            message: '提示',
+            duration: 3,
+            description: res.msg,
           });
         }
       })
@@ -1137,7 +1127,7 @@ const UserManage = () => {
           let res = newres.data;
           setTreeLoading(false);
           setSearchWord('');
-          setFilteredValue([])
+          setFilteredValue([]);
           // 第一次加载，默认选择第一个组织
           onSelect([res[0].id], false);
         } else {
@@ -1154,9 +1144,9 @@ const UserManage = () => {
         message.error(err);
       });
   };
-  const onChangeInput = (filters) =>{
+  const onChangeInput = filters => {
     setFilteredValue(filters.OUName);
-  }
+  };
 
   // 更改机构范围
   const submitExtent = (extent, areaName) => {
@@ -1177,14 +1167,14 @@ const UserManage = () => {
     setEditOrgExtentVisible(false);
   };
 
-  const addChange =e=>{
-    console.log(e)
-    e.domEvent.stopPropagation()
-  }
+  const addChange = e => {
+    console.log(e);
+    e.domEvent.stopPropagation();
+  };
   /** ***操作按钮**** */
   // 机构操作
   const orgButtonMenu = (
-    <Menu onClick={e =>addChange(e)}>
+    <Menu onClick={e => addChange(e)}>
       <Menu.Item key="1" onClick={addUser} icon={<UserAddOutlined />}>
         添加用户
       </Menu.Item>
@@ -1194,7 +1184,7 @@ const UserManage = () => {
     </Menu>
   );
   const orgButtonMenu1 = (
-    <Menu onClick={e =>addChange(e)}>
+    <Menu onClick={e => addChange(e)}>
       <Menu.Item key="3" onClick={editOrg} icon={<EditOutlined />}>
         编辑当前机构
       </Menu.Item>
@@ -1231,7 +1221,7 @@ const UserManage = () => {
         {/* 左侧机构树 */}
         <Spin spinning={treeLoading} tip="loading...">
           <Card
-            style={{overflowY:'hidden'}}
+            style={{ overflowY: 'hidden' }}
             className={classnames({
               [styles.orgContainer]: true,
               [styles.orgContainerHide]: !treeVisible,
@@ -1242,7 +1232,7 @@ const UserManage = () => {
                 style={{
                   fontSize: '15px ',
                   fontWeight: 'bold',
-                  marginLeft: '15px'
+                  marginLeft: '15px',
                 }}
               >
                 机构列表
@@ -1254,11 +1244,13 @@ const UserManage = () => {
                     color: '#1890FF',
                     fontSize: '25px',
                     verticalAlign: 'middle',
-                    marginLeft: '67%'
+                    marginLeft: '67%',
                   }}
                 />
               </Tooltip>
-              <hr style={{ width: '95%', color: '#eeecec' ,marginLeft: '15px'}} />
+              <hr
+                style={{ width: '95%', color: '#eeecec', marginLeft: '15px' }}
+              />
               {treeData.length > 0 && (
                 <Tree
                   showIcon="true"
@@ -1271,7 +1263,7 @@ const UserManage = () => {
                   onSelect={onSelect}
                   height={
                     treeData.length && treeData.length > 30
-                      ? treeData.length * 18+50
+                      ? treeData.length * 18 + 50
                       : 1000
                   }
                   treeData={treeData.map(t => mapTree(t))}