攥写编辑字段弹框及逻辑

src/pages/platformCenter/bsmanager/tablemanager/components/Field/changeAdd.jsx

-import React, { useState, useEffect } from 'react';
-import { Form, Modal, Space, Divider, Radio, notification, Checkbox } from 'antd';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
 import {
-  LoadEventType, LoadEventFields
+
 } from '@/services/platform/bs'
 import styles from './index.less'
+import Sortable from 'sortablejs';
+const CheckboxGroup = Checkbox.Group;
 const AddModal = props => {
-  const { callBackSubmit = () => { }, type, formObj, visible } = 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 onSubmit = () => {
-    type ==='rule'? callBackSubmit(`${value === '无' ||value === ''  ? '' : value + ','}${checkValue.join(',')}`):callBackSubmit();
+  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 (type != '' && type ==='rule') {
+    if (isType != '' && isType === 'rule') {
       setValue(formObj.numerical)
       setCheckValue(formObj.rule)
-      // getTableInfo({ tableName: formObj.tableName }).then(res => {
-      //   res.data.root && res.data.root.length && form.setFieldsValue({ ...res.data.root[0]})
-      //   setTableID(res.data.root[0].tableID)
-      // })
     }
-    else{
-      LoadEventType().then(res=>{
-        console.log('res',res);
+    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 layout = {
-    layout: 'horizontal',
-    labelCol: {
-      span: 4,
-    },
-    wrapperCol: {
-      span: 16,
-    },
-  };
-
+  //单选框变化时触发的事件
   const handleChange = (e) => {
     setValue(e.target.value)
     if (e.target.value === '无') {
       setCheckValue([])
     }
   }
+  //复选框变化时触发的事件
   const onChange = (e) => {
     setCheckValue(e)
-    if(e.length&& value=='无'){
+    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={type ==='rule'?'选择验证规则':'字段集选择'}
+      title={isType === 'rule' ? '选择验证规则' : '字段集选择'}
       bodyStyle={{ width: '100%', minHeight: '100px' }}
-      style={{ top: '250px' }}
+      style={{ top: '160px' }}
       width="700px"
       destroyOnClose
       maskClosable={false}
@@ -73,7 +126,7 @@ const AddModal = props => {
       forceRender={true}
       getContainer={false}
     >
-      {visible && type ==='rule'&& (
+      {visible && isType === 'rule' && (
         <>
           <Radio.Group onChange={handleChange} value={value}>
             <Space direction="vertical">
@@ -96,15 +149,42 @@ const AddModal = props => {
           </Checkbox.Group>
         </>
       )}
-      {visible && type ==='characteristics'&&(
+      {visible && isType === 'characteristics' && (
         <div className={styles.listCard}>
-          <div className={styles.cardItem}>
-            <Divider orientation="left">待选字段列表</Divider>
-            <div className={styles.cardContent}></div>
+          <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">已选字段列表</Divider>
-            <div className={styles.cardContent}></div>
+            <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>
       )

src/pages/platformCenter/bsmanager/tablemanager/components/Field/editor.jsx

@@ -16,7 +16,6 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
-
         updateTable({
           interfaceName :obj.interfaceText,
           tableID,

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

@@ -38,7 +38,33 @@
         padding: 0.5rem;
     }
     .cardContent{
-        height: 18rem;
-        border: 1px solid #99bbe8;
+        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;
+        }
+      }
+    }
+  }

src/pages/platformCenter/schemeConfig/VectorData/VectorData.jsx

@@ -143,7 +143,6 @@ const VectorData = props => {
             solution: solutionNames
         }
         deleteVectorService(query).then(res => {
-            console.log('res',res);
             if (res.success) {
                 setFlag(flag + 1)
                 notification.success({

src/services/platform/bs.jsx

@@ -56,8 +56,11 @@ get(`${PUBLISH_SERVICE}/CaseManage/RemoveFields`, param);
 export const LoadEventType = (param) =>
 get(`${PUBLISH_SERVICE}/CaseManage/LoadEventType`, param);
 
-
+//15.根据触发事件加载字段
 export const LoadEventFields = (param) =>
 get(`${PUBLISH_SERVICE}/CaseManage/LoadEventFields`, param);
 
+//16.更改字段信息
+export const UpdateFields = (data) =>
+post(`${PUBLISH_SERVICE}/CaseManage/UpdateFields`, data);