台账管理界面攥写

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/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