台账管理界面攥写

src/pages/platformCenter/filedConfig/changeAdd.jsx

@@ -59,6 +59,10 @@ const AddModal = props => {
       setCheckValue(formObj.rule)
     }
     else if (isType === 'characteristics') {
+      console.log(filed,'122');
+      console.log('newCheckedList',newCheckedList);
+      console.log('characterValue',characterValue);
+
       let arr = Object.keys(filed)
       setTitle(arr)
       console.log('arr', arr);

src/pages/platformCenter/filedConfig/fieldEditor.jsx

@@ -87,10 +87,12 @@ const AddModal = props => {
                     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
@@ -109,6 +111,8 @@ const AddModal = props => {
 
                     }
                     setPramData({ ...res[0].data.root, coordinates, must, picture })
+                    let index = res[2].data.root.find(item => { return item.Name == res[0].data.root.ExceptionEvent })
+                    getFieldData(index.TableName)
                 }
             })
         }
@@ -178,6 +182,7 @@ const AddModal = props => {
             setIsShow(false)
             setFiled({})
             setCharacterValue('')
+            setCheckedList([])
         }
     }
     const getFieldData = (value) => {
@@ -312,7 +317,7 @@ const AddModal = props => {
                 width="700px"
                 destroyOnClose
                 maskClosable={false}
-                centered ={true}
+                centered={true}
                 cancelText="取消"
                 okText="确认"
                 {...props}
@@ -329,7 +334,7 @@ const AddModal = props => {
                             name="Name"
                             rules={[{ required: true, message: '请输入表名' }]}
                         >
-                            <Input placeholder="请输入别名"   disabled/>
+                            <Input placeholder="请输入别名" disabled />
                         </Item>
                         <Item
                             label="别名"

src/pages/platformCenter/standingBook/changeAdd.jsx

+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
+
+import styles from './standingBook.less'
+import Sortable from 'sortablejs';
+const CheckboxGroup = Checkbox.Group;
+const AddModal = props => {
+  const { callBackSubmit = () => { }, isType, pickItem, 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, title) => {
+    const checkedListArr = [...checkedList]
+    checkedListArr[index] = list
+    setCheckedList(checkedListArr);
+    const indeterminateArr = [...indeterminate]
+    const checkAllArr = [...checkAll]
+    indeterminateArr[index] = !!list.length && list.length < filed[title].length
+    checkAllArr[index] = list.length === filed[title].length
+    setIndeterminate(indeterminateArr)
+    setCheckAll(checkAllArr);
+  };
+
+  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(","), pickItem });
+  };
+
+  useEffect(() => {
+    if (isType != '') {
+      let arr = Object.keys(filed)
+      setTitle(arr)
+      let checkArr = []
+      let indeterminateArr = []
+      let checkAllArr = []
+      arr.map((item, index) => {
+        checkArr[index] = []
+        newCheckedList.map(checkItem => {
+          if (filed[item].includes(checkItem)) {
+            checkArr[index].push(checkItem)
+          }
+        })
+        indeterminateArr.push(!!checkArr[index].length && checkArr[index].length < filed[item].length)
+        checkAllArr.push(checkArr[index].length === filed[item].length)
+      })
+      setCheckedList(checkArr)
+      setIndeterminate(indeterminateArr)
+      setCheckAll(checkAllArr)
+      let newArr = characterValue.length ? characterValue.split(",") : []
+      setSelectData(newArr)
+      draftSort()
+    }
+
+  }, [visible]);
+
+
+  //拖拽初始化及逻辑
+  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 && (
+        <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, item)} /></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/standingBook/editorModal.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, Tooltip, Button, notification, Image } from 'antd';
+import {
+    PlusOutlined,
+    InfoCircleOutlined
+} from '@ant-design/icons';
+import {
+    LoadEventFields
+} from '@/services/platform/bs'
+import add from '@/assets/images/thumbnail/add.jpg';
+import editor from '@/assets/images/thumbnail/editor.jpg';
+import hand from '@/assets/images/thumbnail/hand.png';
+import search from '@/assets/images/thumbnail/search.jpg';
+import taizhang from '@/assets/images/thumbnail/taizhang.jpg';
+import web from '@/assets/images/thumbnail/web.jpg';
+import {
+    GetCM_Ledger_LoadLedgerTable, GetCMLedger_QueryLedgers, GetCMLedger_OperateLedger
+} from '@/services/standingBook/api';
+import styles from './standingBook.less';
+import ChangeAdd from './changeAdd'
+import { orderBy } from 'lodash';
+const { Option } = Select;
+const { TextArea } = Input;
+const AddModal = props => {
+    const { callBackSubmit = () => { }, type, formObj, visible, tableData, maxLength } = props;
+    const [standingTable, setStandingTable] = useState([]);
+    const [inputValue, setInputVaule] = useState({ Fields: '', EditFields: '', AddFields: '', MobileFields: '', SearchFields: '', WebFields: '' });
+    const [isVisible, setIsVisible] = useState(false); // 弹窗
+    const [loading, setLoading] = useState(false);
+    const [pickItem, setPickItem] = useState('')
+    const [filed, setFiled] = useState({}); // 传给子组件列表数据
+    const [types, setTypes] = useState(''); // 弹窗类型
+    const [Order, setOrder] = useState(''); // 弹窗类型
+    const [checkedList, setCheckedList] = useState([])
+    const [characterValue, setCharacterValue] = useState('')
+    const [standingType, setStandingType] = useState(['台账', '反馈', '设备']);
+    const [form] = Form.useForm();
+    const { Item } = Form;
+    // 提交
+    const onSubmit = () => {
+        form.validateFields().then(validate => {
+            if (validate) {
+                setLoading(true);
+                let obj = form.getFieldsValue();
+                let data = type == 'add' ? { ...obj, ...inputValue, Order: maxLength } : { ...obj, Order,ID:formObj.ID  }
+                GetCMLedger_OperateLedger(data)
+                    .then(res => {
+                        setLoading(false);
+                        if (res.msg === '') {
+                            form.resetFields();
+                            callBackSubmit();
+                            notification.success({
+                                message: '提示',
+                                duration: 3,
+                                description: type == 'add' ? '新增成功' : '编辑成功',
+                            });
+                        } else {
+                            notification.error({
+                                message: '提示',
+                                duration: 3,
+                                description: res.msg,
+                            });
+                        }
+                    })
+                    .catch(err => {
+                        notification.error({
+                            message: '提示',
+                            duration: 3,
+                            description: '新增失败',
+                        });
+                        setLoading(false);
+                    });
+
+            }
+        });
+    };
+
+
+
+    const onFinish = value => { };
+    useEffect(() => {
+        getTableData()
+        if (type === 'edit') {
+            GetCMLedger_QueryLedgers({ ledgerId: formObj.ID }).then(res => {
+                res.data.root && form.setFieldsValue({ ...res.data.root });
+                setInputVaule({ ...res.data.root })
+                setOrder(res.data.root.Order)
+                changTable(res.data.root.TableName)
+            })
+        }
+        else if (type === 'add') {
+            setInputVaule({ Fields: '', EditFields: '', AddFields: '', MobileFields: '', SearchFields: '', WebFields: '' })
+            setFiled({})
+            form.resetFields();
+            form.setFieldsValue({ AccountType: '台账' });
+        }
+
+    }, [visible]);
+
+
+
+
+    const layout = {
+        layout: 'horizontal',
+        labelCol: {
+            span: 5,
+        },
+        wrapperCol: {
+            span: 19,
+        },
+    };
+    const getTableData = () => {
+        GetCM_Ledger_LoadLedgerTable().then(res => {
+            if (res.msg === 'Ok') {
+                setStandingTable(res.data.root)
+            }
+        })
+    }
+    const changTable = (value) => {
+        LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
+            if (res.data.root && res.data.root.length) {
+                setFiled(formateArrDataA(res.data.root, 'group'))
+            }
+
+        })
+    }
+
+    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 onOK = prop => {
+        setIsVisible(false)
+        let inputText = { ...inputValue }
+        inputText[prop.pickItem] = prop.str
+        setCheckedList(prop.checkedList)
+        setInputVaule(inputText)
+
+    }
+    const pickFiled = (fileds) => {
+        setTypes('add')
+        setCharacterValue(inputValue[fileds])
+        setCheckedList(inputValue[fileds].split(','))
+        setPickItem(fileds)
+        setIsVisible(true)
+    }
+    const changeText = (e, type) => {
+        let inputText = { ...inputValue }
+        inputText[type] = e.target.value
+        setInputVaule(inputText)
+    }
+    return (
+        <Modal
+            title={`${type === 'add' ? '台账配置' : '台账编辑'}`}
+            bodyStyle={{ width: '100%', minHeight: '100px' }}
+            style={{ top: '80px' }}
+            width="700px"
+            destroyOnClose
+            maskClosable={false}
+            cancelText="取消"
+            okText="确认"
+            {...props}
+            onOk={() => onSubmit()}
+            confirmLoading={loading}
+            forceRender={true}
+            getContainer={false}
+        >
+            {visible && (
+                <div className={styles.formData}>
+                    <Form form={form} {...layout} onFinish={onFinish}>
+                        <Item
+                            label="分组"
+                            name="Type"
+                        >
+                            <Select
+                                placeholder="选择分组"
+                                optionFilterProp="children"
+                            >
+                                {tableData.length ? tableData.map((item, index) => { return <Option key={index} value={item.type}>{item.type}</Option> }) : ''}
+                            </Select>
+                        </Item>
+                        <Item
+                            label="台账类型"
+                            name="AccountType"
+                        >
+                            <Select
+                                placeholder="选择台账类型"
+
+                            >
+                                {standingType.length ? standingType.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
+                            </Select>
+                        </Item>
+                        <Item
+                            label="台账名称"
+                            name="Name"
+                            rules={[{ required: true, message: '请输入台账名称' }]}
+                        >
+                            <Input placeholder="台账名称不可重复" allowClear />
+                        </Item>
+
+                        <Item
+                            label="台账表"
+                            name="TableName"
+                            rules={[{ required: true, message: '请选择台账表' }]}
+                        >
+                            <Select
+                                placeholder=""
+                                optionFilterProp="children"
+                                onChange={changTable}
+                            >
+                                {standingTable.length ? standingTable.map((item, index) => { return <Option key={index} value={item.value}>{item.text}</Option> }) : ''}
+                            </Select>
+
+                        </Item>
+                        <Item
+                            label={<div className={styles.formData_label}> 
+                            <Tooltip title={<Image
+                                width={200}
+                                src={taizhang}
+                            />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>台账字段</span> </div>}
+                            name="Fields"
+                        >
+
+                            <div className={styles.filed_listItem} >
+                                <TextArea placeholder="前端详情查看字段" onChange={(e) => changeText(e, 'Fields')} value={inputValue.Fields} allowClear />
+                                <Button type="dashed" onClick={() => pickFiled('Fields')} icon={<PlusOutlined />} style={{ marginLeft: '0.5rem', height: '100%', width: '3.5rem' }} />
+                            </div>
+
+                        </Item>
+                        <Item
+                            label={<div className={styles.formData_label}> <Tooltip title={<Image
+                                width={200}
+                                src={search}
+                            />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>检索字段</span> </div>}
+                            name="SearchFields"
+                        >
+
+                            <div className={styles.filed_listItem} >
+                                <TextArea placeholder="前端列表检索字段" onChange={(e) => changeText(e, 'SearchFields')} value={inputValue.SearchFields} allowClear />
+                                <Button type="dashed" onClick={() => pickFiled('SearchFields')} icon={<PlusOutlined />} style={{ marginLeft: '0.5rem', height: '100%', width: '3.5rem' }} />
+                            </div>
+                        </Item>
+                        <Item
+                            label={<div className={styles.formData_label}> <Tooltip title={<Image
+                                width={200}
+                                src={add}
+                            />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>添加字段</span> </div>}
+                            name="AddFields"
+
+                        >
+
+                            <div className={styles.filed_listItem} >
+                                <TextArea placeholder="前端数据添加字段" onChange={(e) => changeText(e, 'AddFields')} value={inputValue.AddFields} allowClear />
+                                <Button type="dashed" onClick={() => pickFiled('AddFields')} icon={<PlusOutlined />} style={{ marginLeft: '0.5rem', height: '100%', width: '3.5rem' }} />
+                            </div>
+                        </Item>
+
+                        <Item
+                            label={<div className={styles.formData_label}> 
+                            <Tooltip
+                             title={<Image
+                                width={200}
+                                src={editor}
+                            />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>编辑字段</span> </div>}
+                            name="EditFields"
+                        >
+
+                            <div className={styles.filed_listItem} >
+                                <TextArea placeholder="前端可编辑字段" onChange={(e) => changeText(e, 'EditFields')} value={inputValue.EditFields} allowClear />
+                                <Button type="dashed" onClick={() => pickFiled('EditFields')} icon={<PlusOutlined />} style={{ marginLeft: '0.5rem', height: '100%', width: '3.5rem' }} />
+                            </div>
+                        </Item>
+                        <Item
+                            label={<div className={styles.formData_label}> 
+                            <Tooltip title={<Image
+                                width={200}
+                                src={web}
+                            />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>前端字段</span> </div>}
+                            name="WebFields"
+                        >
+
+                            <div className={styles.filed_listItem} >
+                                <TextArea placeholder="前端列表展示字段" onChange={(e) => changeText(e, 'WebFields')} value={inputValue.WebFields} allowClear />
+                                <Button type="dashed" onClick={() => pickFiled('WebFields')} icon={<PlusOutlined />} style={{ marginLeft: '0.5rem', height: '100%', width: '3.5rem' }} />
+                            </div>
+                        </Item>
+                        <Item
+                            label={<div className={styles.formData_label}> 
+                            <Tooltip title={<Image
+                                width={100}
+                                src={hand}
+                            />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>手持字段</span> </div>}
+                            name="MobileFields"
+                        >
+
+                            <div className={styles.filed_listItem} >
+                                <TextArea placeholder="手持展示字段" onChange={(e) => changeText(e, 'MobileFields')} value={inputValue.MobileFields} allowClear />
+                                <Button type="dashed" onClick={() => pickFiled('MobileFields')} icon={<PlusOutlined />} style={{ marginLeft: '0.5rem', height: '100%', width: '3.5rem' }} />
+                            </div>
+                        </Item>
+                        <Item
+                            label='接口配置'
+                            name="Interface"
+                        >
+
+                            <div className={styles.filed_listItem} >
+                                <TextArea placeholder="服务项目dll库" allowClear />
+                            </div>
+                        </Item>
+                    </Form>
+                    <ChangeAdd
+                        visible={isVisible}
+                        onCancel={() => setIsVisible(false)}
+                        callBackSubmit={onOK}
+                        newCheckedList={checkedList}
+                        isType={types}
+                        filed={filed}
+                        pickItem={pickItem}
+                        characterValue={characterValue}
+                        formObj={formObj} />
+                </div>
+
+            )
+            }
+        </Modal >
+    );
+};
+export default AddModal;

src/pages/platformCenter/standingBook/standingBook.jsx

@@ -4,188 +4,168 @@ import {
     Card,
     Space,
     Table,
-    Button,
     Popconfirm,
     Spin,
     Tooltip,
     notification,
 } from 'antd';
+
 import {
-  UserOutlined,
-  UserAddOutlined,
-  UsergroupAddOutlined,
-  EditOutlined,
-  EditTwoTone,
-  DeleteOutlined,
-  IdcardOutlined,
-  UnlockOutlined,
-  ApartmentOutlined,
-  StopOutlined,
-  DoubleLeftOutlined,
-  DoubleRightOutlined,
-  DownOutlined,
-  BorderlessTableOutlined,
-  LockOutlined,
-  PlusSquareFilled,
-  EllipsisOutlined,
-  PlusOutlined,
-  SyncOutlined,
+    DoubleLeftOutlined,
+    DoubleRightOutlined,
+    PlusSquareFilled,
+    RightOutlined,
+    EditTwoTone,
+    DeleteOutlined
 } from '@ant-design/icons';
 import classnames from 'classnames';
 import PageContainer from '@/components/BasePageContainer';
-import { GetCM_Ledger_LoadLedgers,reloadTableFields, removeFields } from '@/services/standingBook/api';
+import { GetCM_Ledger_LoadLedgers, removeFields,CM_Ledger_RmoveLedger } from '@/services/standingBook/api';
+import AddModal from './editorModal'
 import styles from './standingBook.less';
-const AddModal = props => {
+const standingBook = props => {
     const [allData, setAllData] = useState([]);
-    const [tableData, setTableData] =useState([]);
+    const [tableData, setTableData] = useState([]);
     const [treeLoading, setTreeLoading] = useState(false);
-    const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
+    const [maxLength, setMaxLength] = useState(0);
+    const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
     const [formObj, setFormObj] = useState('');
     const [flag, setFlag] = useState(0); // 弹窗类型
     const [isVisible, setIsVisible] = useState(false); // 弹窗
     const [isType, setIsType] = useState(''); // 弹窗类型
-    const [itemData, setItemData] = useState({});
+    const [pickItem, setPickItem] = useState('');
     const { Item } = Form;
 
     const editor = record => {
+        setFormObj(record);
         setIsType('edit');
         setIsVisible(true);
-        setItemData(record);
+     
     };
     const Submit = prop => {
         setIsVisible(false);
         setFlag(flag + 1);
     };
 
-    const expandedRowRender = (item) => {
-        const columns = [
-            {
-                title: '台账类型',
-                dataIndex: 'type',
-                key: 'type',
-                width: 100,
-            },
-            {
-                title: '台账名称',
-                dataIndex: 'name',
-                key: 'name',
-                align: 'center',
-                width: 200,
-            },
-       
-            {
-                title: '台账表名',
-                dataIndex: 'tableName',
-                key: 'tableName',
-                align: 'center',
-                width: 200,
-            },
-            {
-                title: '台账字段',
-                dataIndex: 'fields',
-                key: 'fields',
-                align: 'center',
-                width: 150,
-            },
-            {
-                title: '检索字段',
-                dataIndex: 'searchFields',
-                key: 'searchFields',
-                align: 'center',
-                width: 150,
-            },
-            {
-                title: '添加字段',
-                dataIndex: 'addFields',
-                key: 'addFields',
-                align: 'center',
-                width: 150,
-            },
-    
-            {
-                title: '编辑字段',
-                dataIndex: 'editFields',
-                key: 'editFields',
-                align: 'center',
-                width: 150,
-            },
-            {
-                title: '前端字段',
-                dataIndex: 'webFields',
-                key: 'webFields',
-                align: 'center',
-                width: 150,
-            },
-            {
-                title: '手持字段',
-                dataIndex: 'mobileFields',
-                key: 'mobileFields',
-                align: 'center',
-                width: 150,
-            },
-            {
-                title: '操作',
-                width: 200,
-                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 columns = [
+        {
+            title: '台账类型',
+            dataIndex: 'type',
+            key: 'type',
+            width: 100,
+        },
+        {
+            title: '台账名称',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+            width: 200,
+        },
 
-        return <Table columns={columns} dataSource={allData[item.type]} pagination={false} />;
-    };
+        {
+            title: '台账表名',
+            dataIndex: 'tableName',
+            key: 'tableName',
+            align: 'center',
+            width: 300,
+        },
+        {
+            title: '台账字段',
+            dataIndex: 'fields',
+            key: 'fields',
+            align: 'center',
+            width: 100,
+        },
+        {
+            title: '检索字段',
+            dataIndex: 'searchFields',
+            key: 'searchFields',
+            align: 'center',
+            width: 100,
+        },
+        {
+            title: '添加字段',
+            dataIndex: 'addFields',
+            key: 'addFields',
+            align: 'center',
+            width: 100,
+        },
 
-    const columns = [
         {
-            title: '类型', dataIndex: 'type', key: 'type',
-            render: text => {
-                return (<div style={{ color: '#3764a0' }}>{text}(共{allData[text].length}条)</div>)
-            }
+            title: '编辑字段',
+            dataIndex: 'editFields',
+            key: 'editFields',
+            align: 'center',
+            width: 100,
+        },
+        {
+            title: '前端字段',
+            dataIndex: 'webFields',
+            key: 'webFields',
+            align: 'center',
+            width: 100,
         },
+        {
+            title: '手持字段',
+            dataIndex: 'mobileFields',
+            key: 'mobileFields',
+            align: 'center',
+            width: 100,
+        },
+        {
+            title: '操作',
+            ellipsis: true,
+            align: 'center',
+            render: (text, record) => (
+                <Space>
+                    <Tooltip title="编辑此表">
+                        <EditTwoTone
+                            onClick={() => editor(record)}
+                            style={{ fontSize: '16px' }}
+                        />
+                    </Tooltip>
+
+
+                    <Tooltip title="删除此表">
+                        <Popconfirm
+                            placement="bottomRight"
+                            title={
+                                <p>
+                                    是否删除此表
+                                </p>
+                            }
+                            // title={`确认删除用户${currentUser}`}
+                            okText="确认"
+                            cancelText="取消"
+                            onConfirm={() => deleteChart(record)}
+                        >
+                            <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
+                        </Popconfirm>
+                    </Tooltip>
 
+                </Space>
+            ),
+        },
     ];
+
+
     useEffect(() => {
-            setTreeLoading(true);
-            GetCM_Ledger_LoadLedgers().then(res => {
-                console.log('res',res);
-                setTreeLoading(false);
-                if (res.msg === 'Ok') {
-                    let arr =formateArrDataA(res.data.root,'type')
-                    let newArr = []
-                    Object.keys(arr).map((item, index) => {
-                        newArr.push({ type: item, key: index })
-                    })
-                    setAllData(arr);
-                    setTableData(newArr);
-                }
-            });
-        
+        setTreeLoading(true);
+        GetCM_Ledger_LoadLedgers().then(res => {
+            setTreeLoading(false);
+            if (res.msg === 'Ok' && res.data.root) {
+                setMaxLength(res.data.root.length+1)
+                let arr = formateArrDataA(res.data.root, 'type')
+                let newArr = []
+                Object.keys(arr).map((item, index) => {
+                    newArr.push({ type: item, key: index })
+                })
+                setAllData(arr);
+                setPickItem(newArr[0].type)
+                setTableData(newArr);
+            }
+        });
+
     }, [flag]);
     const formateArrDataA = (initialArr, name) => {
         // 判定传参是否符合规则
@@ -216,7 +196,7 @@ const AddModal = props => {
         }
         for (let keys in tempObj) {
             let arr = []
-            tempObj[keys].map((item,index) => {
+            tempObj[keys].map((item, index) => {
                 tempObj[keys] = arr;
                 item.key = index
                 arr.push(item)
@@ -226,7 +206,7 @@ const AddModal = props => {
     }
     // 删除表字段
     const deleteChart = record => {
-        removeFields({ fieldIDs: record.ID }).then(res => {
+        CM_Ledger_RmoveLedger({ ledgerId: record.ID }).then(res => {
             if (res.msg === 'Ok' || res.msg === '') {
                 notification.success({
                     message: '提示',
@@ -243,54 +223,103 @@ const AddModal = props => {
             }
         });
     };
-
+    //显示弹框
+    const showPopup = () => {
+        setIsVisible(true)
+        setIsType('add')
+    }
+    const onSubmit = () => {
+        setIsVisible(false);
+        setFlag(flag + 1)
+    };
     return (
         <PageContainer className={styles.userManageContainer}>
-        <div className={styles.contentContainer}></div>
-        <Card
-        className={classnames({
-          [styles.orgContainer]: true,
-          [styles.orgContainerHide]: !treeVisible,
-        })}
-      >
-        <div>
-          <span
-            style={{
-              fontSize: '15px ',
-              fontWeight: 'bold',
-            }}
-          >
-            机构列表
-          </span>
-          <Tooltip title="添加顶级机构">
-            <PlusSquareFilled
-             
-              style={{
-                color: '#1890FF',
-                fontSize: '25px',
-                verticalAlign: 'middle',
-                float:'right'
-              }}
-            />
-          </Tooltip>
-          <hr style={{ width: '100%', color: '#eeecec' }} />
-        
-        </div>
-        <div className={styles.switcher}>
-          {treeVisible && (
-            <Tooltip title="隐藏机构列表">
-              <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
-            </Tooltip>
-          )}
-          {!treeVisible && (
-            <Tooltip title="显示机构列表">
-              <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
-            </Tooltip>
-          )}
-        </div>
-      </Card>
+            <div className={styles.contentContainers}>
+                <Spin spinning={treeLoading} tip="loading...">
+
+                    <Card
+                        className={classnames({
+                            [styles.orgContainer]: true,
+                            [styles.orgContainerHide]: !treeVisible,
+                        })}
+                    >
+                        <div>
+                            <span
+                                style={{
+                                    fontSize: '15px ',
+                                    fontWeight: 'bold',
+                                    color: '#333E51',
+                                    paddingLeft: '14px'
+                                }}
+                            >
+                                台账列表
+                            </span>
+                            <Tooltip title="添加台账表">
+                                <PlusSquareFilled
+                                    style={{
+                                        color: '#1890FF',
+                                        fontSize: '25px',
+                                        verticalAlign: 'middle',
+                                        float: 'right',
+                                        paddingRight: '14px'
+                                    }}
+                                    onClick={e => showPopup()}
+                                />
+                            </Tooltip>
+                            <hr style={{ width: '100%', color: '#eeecec' }} />
+                            {
+                                tableData && (tableData.map((item) => {
+                                    return <div className={classnames({
+                                        [styles.listItem]: true,
+                                        [styles.pickItem]: item.type === pickItem,
+                                    })} onClick={e => setPickItem(item.type)} key={item.key}>{item.type}({allData[item.type].length}条) {item.type === pickItem ? <RightOutlined /> : ''} </div>
+                                })
+                                )}
+                        </div>
+                        <div className={styles.switcher}>
+                            {treeVisible && (
+                                <Tooltip title="隐藏台账列表">
+                                    <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
+                                </Tooltip>
+                            )}
+                            {!treeVisible && (
+                                <Tooltip title="显示台账列表">
+                                    <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
+                                </Tooltip>
+                            )}
+                        </div>
+                    </Card>
+                </Spin>
+                <div
+                    className={classnames({
+                        [styles.userContainer]: true,
+                        [styles.userContainerHide]: !treeVisible,
+                    })}
+                >
+                    <Table
+                        size="small"
+                        rowKey='ID'
+                        bordered
+                        columns={columns}
+                        dataSource={allData[pickItem]}
+                        // loading={tableLoading}
+                        scroll={{  y: 'calc(100vh - 150px)' }}
+                        // scroll={{ x: 'max-content' }}
+                        pagination={{
+                            showTotal: (total, range) =>
+                                `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                            pageSizeOptions: [10, 20, 50, 100],
+                            defaultPageSize: 20,
+                            showQuickJumper: true,
+                            showSizeChanger: true,
+                        }}
+                    />
+                </div>
+                <AddModal visible={isVisible} type={isType} formObj={formObj} maxLength={maxLength} callBackSubmit={onSubmit}   onCancel={() => setIsVisible(false)} tableData={tableData}/>
+            </div>
+          
         </PageContainer>
-   
+
     );
 };
-export default AddModal;
+export default standingBook;

src/pages/platformCenter/standingBook/standingBook.less

-.orgContainerHide{
-    // transform: translateX(-230px);
-    left: 0px;
-    top: 0;
-    width: 26px;
-}
\ No newline at end of file
+
+.redText{
+    color: red;
+    cursor: pointer;
+}
+.ant-layout{
+    overflow: auto;
+    .ant-layout-content{
+        margin:12px !important;
+    }
+}
+.ant-btn > .anticon + span, .ant-btn > span + .anticon {
+    margin-left: 8px;
+    vertical-align: middle;
+}
+.siteTitle{
+    font-size: 16px;
+    margin: 0 0 6px 0;
+    user-select: none;
+    padding: 3px;
+    border-bottom: 1px solid #ccc;
+}
+.userManageContainer{
+    .ant-card-body{
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .listItem{
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        font-weight: 400;
+        color: #414E65;
+        cursor: pointer;
+        line-height: 28px;
+        align-items: center;
+        padding: 8px 14px;
+
+    }
+    .pickItem{
+        background-color: #F5F6F9;
+    }
+    .ant-form-item {
+        vertical-align: top;
+    }
+    .ant-form-item-label > label {
+        align-items:middle;
+    }
+    .ant-modal-body{
+        padding-bottom:0px;
+        padding-right:40px;
+        padding-left:40px;
+        .ant-form{
+            width: 90%;
+        }
+    }
+    .anticon svg {
+        margin-top: -3px;
+    }
+    .ant-popover-message {
+        position: relative;
+        padding: 0px 0 0px;
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 14px;
+    }
+    .ant-tree-treenode{
+        width: 100% !important;
+        .ant-tree-node-content-wrapper{
+            display: inline-block;
+            width: 100%;
+        }
+
+        .iconWraper1{
+            float: right;
+            span{
+                display: none;   
+            }
+        }
+    }
+    .ant-tree-treenode:hover{
+        .iconWraper1>span{
+            margin-left: 12px;
+            font-size: 18px;
+            display: inline-block;   
+        }
+    }
+    .ant-radio-group {
+         margin: 0px !important; 
+    }
+    .contentContainers{
+        display: flex;
+        width: 100%;
+        position: relative;
+        .ant-table.ant-table-bordered > .ant-table-container {
+            min-width: calc(100vw - 582px);
+            height: calc(100vh - 120px);
+            overflow-x: hidden;
+        }
+        .orgContainer{
+            height: calc(100vh - 74px);
+            width: 340px;
+            left: 0;
+            top: 0;
+            overflow-x: hidden;
+            margin-right: 10px;
+            position: relative;
+            transition-property:width,left;
+            transition-duration: 0.5s;
+            white-space: nowrap;
+            .ant-tree{
+                padding-top: 6px;
+                .ant-tree-switcher{
+                    line-height: 1;
+                    margin-right: 0px !important;
+                    color:#1890FF;
+                    .ant-tree-switcher-line-icon{
+                        margin-left: 5px;
+                    }
+                }
+            }
+            .switcher{
+                display: block;
+                position: absolute;
+                font-size: 18px;
+                color: #1890FF!important;
+                top: 50%;
+                right: 2px;
+                transform: translate(0%,-50%);
+                z-index: 1;
+            }
+        }
+        
+        .orgContainerHide{
+            // transform: translateX(-230px);
+            left: 0px;
+            top: 0;
+            width: 26px;
+        }
+        .ant-popover-message-title {
+            padding-left: 20px;
+        }
+        .userContainer{
+            height: calc(100vh - 74px) !important;
+            z-index: 999;
+            min-width: 800px;
+            background: white;
+            width: 100%;
+            position: relative;
+            transition: width 0.5s;
+            .title{
+                margin: 16px 0 10px 16px;
+                display: inline-block;
+                width: 270px;
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow:ellipsis;
+                white-space: nowrap;
+            }
+            .ant-table-pagination{
+                padding-right: 12px;
+                background: white;
+                margin: 1px 0;
+                padding: 8px;
+                padding-right: 20px;
+            }
+            .ant-btn{
+                margin: 0px 10px;
+                .ant-btn-primary{
+                    background: #50aefc;
+                }
+            }
+            .ant-input-search-button{
+                margin-left: 0px !important;
+            }
+            .ant-table-thead tr th{
+                font-weight: 600;
+                color:rgba(0,0,0,0.85);
+            }
+            .ant-table-cell{
+                text-align:center;
+                overflow: hidden;
+                // text-overflow:ellipsis;
+                white-space: nowrap;
+            }
+            .ant-table-body{
+                height:calc(100vh - 210px);
+                border-right: white;
+                overflow: auto !important;
+            }
+            .clickRowStyle{
+                background: #cfe7fd;
+            }
+            .ant-pagination{
+                z-index: 999;
+                border-top: 1px solid #f0eded;
+            }
+        }
+    }
+}
+.ant-modal-root{
+    .ant-tree-switcher{
+        line-height: 1;
+        color:#1890FF;
+        margin-right: 0px !important;
+    }
+    .ant-checkbox-group .ant-checkbox-group-item {
+        margin-right: 0px !important;
+        min-width: 270px !important;
+    }
+    .ant-tree-list-holder{
+        overflow: auto;
+        overflow-x:hidden;
+        height: 40vh;
+    }
+    .ant-tabs-content-holder{
+        overflow: auto;
+        height: 50vh;
+    }
+}
+
+.ant-modal-content{
+    border-radius: 5px;
+}  
+.ant-modal-header{
+    border-radius: 5px 5px 0 0;
+    padding: 28px 40px;
+}
+.ant-modal-close{
+    top:14px;
+    right:20px;
+}
+.ant-modal-footer{
+    border:none;
+    padding: 28px 40px;
+}
+.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+    margin-bottom: 0;
+    margin-left: 15px;
+}
+// .ant-form-horizontal .ant-form-item-control {
+//     margin-left: 10px;
+// }
+.title{
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  .tip{
+    display: none;
+  }
+  .fs{
+    font-size: 18px;
+    margin-left: 10px;
+  }
+  .title:hover{
+    .tip{
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 100%;
+    }
+  }
+  .titleText{
+    width: 12rem;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+  }
+  .ant-popover-inner {
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.788);
+    
+  }
+  .ant-popover-inner-content {
+    padding: 10px 10px;
+}
+
+
+.ant-popover-message > .anticon { 
+    top: 7.0005px
+}
+.listCard{
+    display: flex;
+    .cardItem{
+        padding: 0.5rem;
+    }
+    .cardContent{
+        height: 30rem;
+        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 ;
+          }
+      }
+    }
+  }
+.formData{
+    height: 26rem;
+    overflow-y: scroll;
+    .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before{
+        display: none;
+    }
+    .formData_label{
+        display: flex;
+        align-items: center;
+    }
+    .filed_listItem{
+        display: flex;
+        height: 3.6rem;
+        .ant-btn-icon-only {
+            width: 32px;
+            height: 32px;
+            /* padding: 2.4px 0; */
+            font-size: 16px;
+            border-radius: 2px;
+            vertical-align: -1px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}

src/services/standingBook/api.js

@@ -2,4 +2,21 @@ import { CITY_SERVICE, get, PUBLISH_SERVICE, post, postForm } from '../index';
 
 // 加载台账
 export const GetCM_Ledger_LoadLedgers = query =>
-  get(`${PUBLISH_SERVICE}/WorkOrderCenter/GetCM_Ledger_LoadLedgers`, query);
\ No newline at end of file
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/GetCM_Ledger_LoadLedgers`, query);
+
+  
+// 加载台账表
+export const GetCM_Ledger_LoadLedgerTable = query =>
+get(`${PUBLISH_SERVICE}/WorkOrderCenter/GetCM_Ledger_LoadLedgerTable`, query);
+
+// 查看对应台账
+export const GetCMLedger_QueryLedgers = query =>
+get(`${PUBLISH_SERVICE}/WorkOrderCenter/GetCMLedger_QueryLedgers`, query);
+
+// 编辑或新增台账
+export const GetCMLedger_OperateLedger = data =>
+post(`${PUBLISH_SERVICE}/WorkOrderCenter/GetCMLedger_OperateLedger`, data);
+
+// 删除台账
+export const CM_Ledger_RmoveLedger = query =>
+get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Ledger_RmoveLedger`, query);
\ No newline at end of file