更改表字段界面样式

src/pages/platformCenter/filedConfig/changeAdd.jsx

+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
+import {
+
+} from '@/services/platform/bs'
+import styles from './index.less'
+import Sortable from 'sortablejs';
+const CheckboxGroup = Checkbox.Group;
+const AddModal = props => {
+  const { callBackSubmit = () => { }, isType, formObj, visible, filed, characterValue, newCheckedList } = props;
+  const [loading, setLoading] = useState(false);
+  const [value, setValue] = useState('');
+  const [checkValue, setCheckValue] = useState([]);
+  const [form] = Form.useForm();
+  const [title, setTitle] = useState([])
+  const { Item } = Form;
+  const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
+  const [indeterminate, setIndeterminate] = useState([]);
+  const [checkAll, setCheckAll] = useState([]);
+  const [selectData, setSelectData] = useState([])
+  let objArr = []
+  const onChangeList = (list, index) => {
+    const checkedListArr = [...checkedList]
+    checkedListArr[index] = list
+    setCheckedList(checkedListArr);
+  };
+
+  const onCheckAllChange = e => {
+    const indeterminateArr = [...indeterminate]
+    const checkAllArr = [...checkAll]
+    const checkedListArr = [...checkedList]
+    checkAllArr[e.target.index] = e.target.checked
+    indeterminateArr[e.target.index] = false
+    e.target.checked ? checkedListArr[e.target.index] = e.target.checkvalue : checkedListArr[e.target.index] = []
+    setCheckedList(checkedListArr);
+    setIndeterminate(indeterminateArr);
+    setCheckAll(checkAllArr);
+  };
+  //监听用户选择的字段名
+  useEffect(() => {
+    selectAll()
+  }, [checkedList]);
+
+  const selectAll = () => {
+    objArr = []
+    checkedList.map(item => {
+      objArr = objArr.concat(item)
+    })
+    setSelectData(objArr)
+  }
+
+  const onSubmit = () => {
+    isType === 'rule' ? callBackSubmit(`${value === '无' || value === '' ? '' : value + ','}${checkValue.join(',')}`) : callBackSubmit({ checkedList, str: selectData.join(",") });
+  };
+
+  useEffect(() => {
+    if (isType != '' && isType === 'rule') {
+      setValue(formObj.numerical)
+      setCheckValue(formObj.rule)
+    }
+    else if (isType === 'characteristics') {
+      let arr = Object.keys(filed)
+      setTitle(arr)
+      console.log('arr', arr);
+      let indeterminateArr = []
+      let checkAllArr = []
+      arr.map((item, index) => {
+        indeterminateArr.push(true)
+        checkAllArr.push(false)
+      })
+      setCheckedList(newCheckedList)
+      setIndeterminate(indeterminateArr)
+      setCheckAll(checkAllArr)
+      let newArr = characterValue.length? characterValue.split(","):[]
+      setSelectData(newArr)
+      draftSort()
+    }
+
+  }, [visible]);
+  //单选框变化时触发的事件
+  const handleChange = (e) => {
+    setValue(e.target.value)
+    if (e.target.value === '无') {
+      setCheckValue([])
+    }
+  }
+  //复选框变化时触发的事件
+  const onChange = (e) => {
+    setCheckValue(e)
+    if (e.length && value == '无') {
+      setValue('')
+    }
+  }
+  //拖拽初始化及逻辑
+  const draftSort = () => {
+    let el = document.getElementById('doctor-drag-items');
+    if (el) {
+      let sortable = Sortable.create(el, {
+        animation: 100, //动画参数
+        onEnd: function (evt) { //拖拽完毕之后发生，只需关注该事件
+          let arr = [];
+          let len = evt.from.children.length;
+          for (let i = 0; i < len; i++) {
+            arr.push(evt.from.children[i].getAttribute('drag-id'))
+          }
+          setSelectData(arr)
+        }
+      });
+    }
+
+  }
+
+  return (
+    <Modal
+      title={isType === 'rule' ? '选择验证规则' : '字段集选择'}
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: '10px' }}
+      width="700px"
+      destroyOnClose
+      centered ={true}
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+      forceRender={true}
+      getContainer={false}
+    >
+      {visible && isType === 'rule' && (
+        <>
+          <Radio.Group onChange={handleChange} value={value}>
+            <Space direction="vertical">
+              <Radio value='无'>无(清空选中)</Radio>
+              <Radio value='number'>数值(number)</Radio>
+              <Radio value='digits'>整数(digits)</Radio>
+              <Radio value='email'>邮箱(email)</Radio>
+              <Radio value='identity'>身份证号(identity)</Radio>
+              <Radio value='mobile'>手机号(mobile)</Radio>
+              <Radio value='bankAccount'>银行卡号(bankAccount)</Radio>
+              <Radio value='timeControl'>时间控制(timeControl)</Radio>
+            </Space>
+          </Radio.Group>
+          <Checkbox.Group style={{ width: '100%', marginTop: '1rem' }} onChange={onChange} value={checkValue}>
+            <Space direction="vertical">
+              <Checkbox value="required">必填(required)</Checkbox>
+              <Checkbox value="emphasis">强调(emphasis)</Checkbox>
+              <Checkbox value="sensitive">敏感(sensitive)</Checkbox>
+            </Space>
+          </Checkbox.Group>
+        </>
+      )}
+      {visible && isType === 'characteristics' && (
+        <div className={styles.listCard}>
+          <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
+            <Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}>待选字段列表</Divider>
+            <div className={styles.cardContent}>
+              {title.map((item, index) => {
+                return <div className={styles.cardItemData} key={index}>
+                  <Divider orientation="left" style={{ margin: '0 0 10px 0', color: '#15428b', borderTopColor: '#99bbe8' }}>{item} <Checkbox indeterminate={indeterminate[index]} onChange={onCheckAllChange} index={index} checkvalue={filed[item]} checked={checkAll[index]}> </Checkbox></Divider>
+                  <CheckboxGroup options={filed[item]} value={checkedList[index]} onChange={(e) => onChangeList(e, index)} /></div>
+              })}
+            </div>
+          </div>
+          <div className={styles.cardItem}>
+            <Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}>已选字段列表</Divider>
+            <div className={styles.cardContent}>
+              <div className={styles.doctorTable}>
+                <table>
+                  <thead>
+                    <tr>
+                      <td>字段名</td>
+                    </tr>
+                  </thead>
+                  <tbody id='doctor-drag-items'>
+                    {selectData && selectData.length > 0 ?
+                      selectData.map((item, index) => {
+                        return <tr drag-id={item} key={index} style={{ cursor: 'move' }}>
+                          <td><span title={item}>{item}</span></td>
+                        </tr>
+                      })
+                      : <tr><td colSpan='10' style={{ textAlign: 'center' }}>暂无数据</td></tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      )
+
+      }
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/platformCenter/filedConfig/filedConfig.jsx

+import React, { useState, useEffect } from 'react';
+import {
+    Form,
+    Modal,
+    Space,
+    Table,
+    Button,
+    Popconfirm,
+    Spin,
+    notification,
+} from 'antd';
+
+import { reloadTableFields, removeFields } from '@/services/platform/bs';
+import FieldEditor from './fieldEditor';
+import { useHistory } from 'react-router-dom';
+import styles from './index.less'
+const AddModal = props => {
+    const history = useHistory();
+    const [tableData, setTableData] = useState([]);
+    const { callBackSubmit = () => { }, type, visible } = props;
+    const [loading, setLoading] = useState(false);
+    const [treeLoading, setTreeLoading] = useState(false);
+    const [formObj, setFormObj] = useState('');
+    const [form] = Form.useForm();
+    const [flag, setFlag] = useState(0); // 弹窗类型
+    const [isVisible, setIsVisible] = useState(false); // 弹窗
+    const [isType, setIsType] = useState(''); // 弹窗类型
+    const [itemData, setItemData] = useState({});
+    const { Item } = Form;
+    // 提交
+    const onSubmit = () => {
+        form.validateFields().then(validate => {
+            if (validate) {
+                setLoading(true);
+                let obj = form.getFieldsValue();
+            }
+        });
+    };
+    const columns = [
+        {
+            title: '字段名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 150,
+            render: text => <a>{text}</a>,
+        },
+        {
+            title: '别名',
+            dataIndex: 'alias',
+            key: 'alias',
+            align: 'center',
+        },
+        {
+            title: '字段类型',
+            dataIndex: 'storeType',
+            key: 'storeType',
+            align: 'center',
+        },
+        {
+            title: '形态',
+            dataIndex: 'shape',
+            key: 'shape',
+            align: 'center',
+        },
+        {
+            title: '配置',
+            dataIndex: 'config',
+            key: 'config',
+            align: 'center',
+        },
+
+        {
+            title: '只读',
+            dataIndex: 'readOnly',
+            key: 'readOnly',
+            align: 'center',
+        },
+        {
+            title: '同步',
+            dataIndex: 'syncEvent',
+            key: 'syncEvent',
+            align: 'center',
+        },
+        {
+            title: '操作',
+            width: 250,
+            ellipsis: true,
+            align: 'center',
+            render: (text, record) => (
+                <Space>
+                    <Button
+                        type="primary"
+                        size="small"
+                        onClick={() => {
+                            editor(record);
+                        }}
+                    >
+                        编辑
+                    </Button>
+                    <div onClick={e => e.stopPropagation()}>
+                        <Popconfirm
+                            title="是否删除该字段？"
+                            okText="确认"
+                            cancelText="取消"
+                            onConfirm={() => {
+                                deleteChart(record);
+                            }}
+                        >
+                            <Button size="small" danger>
+                                删除
+                            </Button>
+                        </Popconfirm>
+                    </div>
+                </Space>
+            ),
+        },
+    ];
+    const editor = record => {
+        setIsType('edit');
+        setIsVisible(true);
+        setItemData(record);
+    };
+    const Submit = prop => {
+        setIsVisible(false);
+        setFlag(flag + 1);
+    };
+    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') {
+                    setTableData(res.data.root);
+               
+                    console.log(formateArrDataA(res.data.root,'groupName'));
+                }
+            });
+        }
+    }, [flag]);
+    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 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 = () => {
+        history.push('/platformCenter/bsmanger/tablemanger')
+    }
+    return (
+        <div style={{ width: '100vm', height: 'calc(100vh - 100px) ', background: '#ffffff' }}>
+            <Spin tip="loading..." spinning={treeLoading}>
+            <div className={styles.config}><div className={styles.title}>{formObj}(字段配置)</div> <Button type="primary"  onClick={back}>返回</Button></div>  
+                <Table
+                    columns={columns}
+                    dataSource={tableData}
+                    // pagination={{ pageSize: 10 }}
+                    scroll={{ x: 'max-content', y: '45rem' }}
+                    size="small"
+                    rowKey={(record, index) => `complete${record.tableID}${index}`}
+                    pagination={{
+                        showTotal: (total, range) =>
+                            `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                        pageSizeOptions: [10, 20, 50, 100],
+                        defaultPageSize: 20,
+                        showQuickJumper: true,
+                        showSizeChanger: true,
+                    }}
+                />
+            </Spin>
+            <FieldEditor
+                isVisible={isVisible}
+                isType={isType}
+                itemData={itemData}
+                formObj1={formObj}
+                onCancel={() => setIsVisible(false)}
+                callBackSubmit={Submit}
+            />
+        </div>
+    );
+};
+export default AddModal;

src/pages/platformCenter/filedConfig/index.less

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

src/routes/config.js

@@ -44,6 +44,7 @@ import DimensionsConfig from '@/pages/platformCenter/dimensionsConfig/dimensions
 import TaskScheduling from '@/pages/artificial/taskScheduling/taskScheduling';
 import PoliciesIssued from '@/pages/artificial/policiesIssued/policiesIssued';
 import TableManager from '@/pages/platformCenter/bsmanager/tablemanager'
+import FiledConfig from '@/pages/platformCenter/filedConfig/filedConfig'
 import AuthControl from '@/pages/authcontrol'
 // import ColConen from '@/components/Colophon/colContent';
 
@@ -261,6 +262,12 @@ export default {
                   name: '表/字段',
                   component: TableManager,
                 },
+                {
+                  path: '/platformCenter/bsmanger/filedConfig/:id',
+                  name: '字段配置',
+                  component: FiledConfig,
+                  hideMenu: true
+                },
                 // {
                 //   path: '/platformCenter/bsmanger/standbookmanager',
                 //   name: '台账配置',