fix: '数据库升级交互重写'

src/pages/database/ManagementDataBase/ManagementDataBase.jsx

@@ -45,6 +45,11 @@ const ManagementDataBase = () => {
   const [list, setlist] = useState(['表', '字段', '主外键', '主键', '索引', '复合索引']);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 保存已选自动升级表键值
   const [keepCheckList, setKeepChecklist] = useState([]); // 保存已选自动升级表值
+  const [keepData, setKeepData] = useState([]); // 保存分类数组
+  const [allchecked, setAllChecked] = useState(true);
+  const [indeterminateAll, setIndeterminateAll] = useState(false);
+  const [typeFilters, setTypeFilters] = useState([]); // type列筛选
+  const [filteredValue, setFilteredValue] = useState([]);
   // 检查数据库表
   useEffect(() => {
     setCheckLoading(true);
@@ -78,7 +83,6 @@ const ManagementDataBase = () => {
     tableCheckNew()
       .then(resnew => {
         setCheckLoading(false);
-        console.log(resnew);
         if (resnew.code == 0) {
           let res = resnew.data;
           const { Autolist, ManualList } = res;
@@ -92,31 +96,57 @@ const ManagementDataBase = () => {
             item.key = index;
             return item;
           });
-          console.log(list);
-          console.log(res.RepairTypeList);
           let data = [];
           list.map(i => {
-            console.log(i);
             if (res.RepairTypeList.indexOf(i) != -1) {
               data.push(i);
             }
           });
-          console.log(data);
-          console.log(arr);
+          console.log(arr); // 所有数据
+          let qq = arr.map(item => item.Type);
+          qq = qq.filter((value, index) => qq.indexOf(value) === index);
+          console.log(qq);
+          console.log(qq.map(item => ({ text: item, value: item })));
+          setTypeFilters(qq.map(item => ({ text: item, value: item })));
           let datalist = [];
           if (arr.length > 0) {
             arr.map(i => {
               datalist.push(i.key);
             });
           }
-          console.log(datalist);
+          console.log(datalist); // 所有数据的key
+          setKeepData(data);
           setSelectedRowKeys(datalist);
           setKeepChecklist(arr);
           setKeepValue(res.RepairTypeList);
-          setRepairTypeList(data);
+          console.log(data); // 分类数组
+          let aa = [];
+          if (data.length > 0) {
+            data.map(i => {
+              let vv = [];
+              let ff = []; // key
+              arr.map(j => {
+                if (j.Type == i) {
+                  vv.push(j);
+                  ff.push(j.key);
+                }
+              });
+              let a = {};
+              a.name = i;
+              a.checked = true;
+              a.indeterminate = false;
+              a.value = vv;
+              a.key = ff;
+              aa.push(a);
+            });
+          }
+          console.log(aa);
+          setRepairTypeList(aa);
           setAutoCheck(arr);
           setAutoCheckList(arr);
           setCheckList(arr2);
+          setAllChecked(true);
+          setIndeterminateAll(false);
         }
       })
       .catch(err => {
@@ -167,13 +197,14 @@ const ManagementDataBase = () => {
   // 检查功能
   const handleCheck = () => {
     setCheckFlag(checkFlag + 1);
+    setFilteredValue([]);
   };
   // 升级功能
   const handleUpdate = () => {
     console.log(keepCheckList);
     console.log(selectedRowKeys);
     if (repairTypeList.length > 0) {
-      if (keepValue.length > 0 && keepCheckList.length > 0) {
+      if (keepCheckList.length > 0) {
         setCheckLoading(true);
         newUpdateDateBase(keepCheckList)
           .then(res => {
@@ -181,6 +212,7 @@ const ManagementDataBase = () => {
             setCheckFlag(checkFlag + 1);
             setUpFlag(upFlag + 1);
             if (res.code === 0) {
+              setFilteredValue([]);
               notification.success({
                 message: '通知',
                 duration: 3,
@@ -213,6 +245,7 @@ const ManagementDataBase = () => {
           setCheckFlag(checkFlag + 1);
           setUpFlag(upFlag + 1);
           if (res.code === 0) {
+            setFilteredValue([]);
             notification.success({
               message: '通知',
               duration: 3,
@@ -282,6 +315,9 @@ const ManagementDataBase = () => {
       key: 'Type',
       width: 180,
       ellipsis: true,
+      filters: typeFilters,
+      onFilter: (value, record) => record.Type === value,
+      filteredValue,
     },
     {
       title: '差异比较',
@@ -427,62 +463,159 @@ const ManagementDataBase = () => {
     setCheckSql(e);
   };
 
-  const onChange = e => {
-    let aa = [...autoCheck];
-    let data = [];
-    let name = [];
-    aa.map(i => {
-      if (e.indexOf(i.Type) != -1) {
-        data.push(i);
+  // 复选框
+  const rowSelection = {
+    selectedRowKeys,
+    columnTitle: ' ',
+    hideDefaultSelections: true,
+    onChange: (RowKeys, Rows) => {
+      // 找到勾选/取消勾选项的Type
+      let aa = [];
+      // 取消
+      if (keepCheckList.length > Rows.length) {
+        keepCheckList.map(i => {
+          if (Rows.indexOf(i) == -1) {
+            aa.push(i.Type);
+          }
+        });
       }
-    });
-    setAutoCheckList(data);
-
-    let a = [...keepCheckList];
-    let b = [...selectedRowKeys];
-    if (e.length > keepValue.length) {
-      e.map(k => {
-        if (keepValue.indexOf(k) == -1) {
-          aa.map(j => {
-            if (j.Type == k) {
-              a.push(j);
-              b.push(j.key);
-            }
-          });
+      // 勾选
+      if (keepCheckList.length < Rows.length) {
+        Rows.map(i => {
+          if (keepCheckList.indexOf(i) == -1) {
+            aa.push(i.Type);
+          }
+        });
+      }
+      // 找到勾选/取消勾选项的下标
+      let index = [];
+      repairTypeList.map((j, k) => {
+        if (j.name == aa[0]) {
+          index.push(k);
         }
       });
-      setKeepChecklist(a);
-      setSelectedRowKeys(b);
+      // 全部勾选数据按照type分类存储
+      let list11 = [];
+      if (keepData.length > 0) {
+        keepData.map(i => {
+          let vv = [];
+          Rows.map(j => {
+            if (j.Type == i) {
+              vv.push(j);
+            }
+          });
+          list11.push(vv);
+        });
+      }
+      // 控制分组全选
+      if (
+        list11[index[0]].length < repairTypeList[index[0]].value.length &&
+        list11[index[0]].length !== 0
+      ) {
+        repairTypeList[index[0]].indeterminate = true;
+        repairTypeList[index[0]].checked = false;
+      } else if (list11[index[0]].length === 0) {
+        repairTypeList[index[0]].indeterminate = false;
+        repairTypeList[index[0]].checked = false;
+      } else if (list11[index[0]].length === repairTypeList[index[0]].value.length) {
+        repairTypeList[index[0]].indeterminate = false;
+        repairTypeList[index[0]].checked = true;
+      }
+      // 控制全选
+      if (RowKeys.length < autoCheckList.length && RowKeys.length !== 0) {
+        setAllChecked(false);
+        setIndeterminateAll(true);
+      } else if (RowKeys.length === 0) {
+        setAllChecked(false);
+        setIndeterminateAll(false);
+      } else if (RowKeys.length === autoCheckList.length) {
+        setAllChecked(true);
+        setIndeterminateAll(false);
+      }
+      setSelectedRowKeys(RowKeys);
+      setKeepChecklist(Rows);
+    },
+  };
+
+  // 分类全选
+  const onChangeAll = (e, j) => {
+    let data1 = [...repairTypeList];
+    data1[j].checked = e.target.checked;
+    data1[j].indeterminate = false;
+    setRepairTypeList(data1);
+    if (e.target.checked) {
+      let aa = [...keepCheckList];
+      let bb = [...selectedRowKeys];
+      let data = [...new Set(aa.concat(data1[j].value))];
+      let data2 = [...new Set(bb.concat(data1[j].key))];
+      // 控制全选
+      if (data.length < autoCheckList.length && data.length !== 0) {
+        setAllChecked(false);
+        setIndeterminateAll(true);
+      } else if (data.length === 0) {
+        setAllChecked(false);
+        setIndeterminateAll(false);
+      } else if (data.length === autoCheckList.length) {
+        setAllChecked(true);
+        setIndeterminateAll(false);
+      }
+      setKeepChecklist(data);
+      setSelectedRowKeys(data2);
     } else {
-      let listaa = [];
-      let listbb = [];
-      a.map(i => {
-        if (data.indexOf(i) != -1) {
-          listaa.push(i);
-          listbb.push(i.key);
+      let aa = []; // 全部已选数据
+      let bb = []; // 全部已选数据key
+      keepCheckList.map(i => {
+        if (data1[j].value.indexOf(i) == -1) {
+          aa.push(i);
+          bb.push(i.key);
         }
       });
-      setKeepChecklist(listaa);
-      setSelectedRowKeys(listbb);
+      // 控制全选
+      if (aa.length < autoCheckList.length && aa.length !== 0) {
+        setAllChecked(false);
+        setIndeterminateAll(true);
+      } else if (aa.length === 0) {
+        setAllChecked(false);
+        setIndeterminateAll(false);
+      } else if (aa.length === autoCheckList.length) {
+        setAllChecked(true);
+        setIndeterminateAll(false);
+      }
+      setKeepChecklist(aa);
+      setSelectedRowKeys(bb);
     }
-    setKeepValue(e);
   };
 
-  // 复选框
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: (RowKeys, Rows) => {
-      console.log(RowKeys);
-      console.log(Rows);
-      setSelectedRowKeys(RowKeys);
-      setKeepChecklist(Rows);
-      let aa = [];
-      Rows.map(i => {
-        aa.push(i.Type);
+  // 全选
+  const onChange1 = e => {
+    setAllChecked(e.target.checked);
+    setIndeterminateAll(false);
+    if (e.target.checked) {
+      let aa = [...repairTypeList];
+      aa.map(i => {
+        i.checked = true;
+        i.indeterminate = false;
       });
-      let data = [...new Set(aa)];
-      // setKeepValue(data);
-    },
+      setKeepChecklist(autoCheckList);
+      let bb = [];
+      autoCheckList.map(i => {
+        bb.push(i.key);
+      });
+      setSelectedRowKeys(bb);
+    } else {
+      let aa = [...repairTypeList];
+      aa.map(i => {
+        i.checked = false;
+        i.indeterminate = false;
+      });
+      setKeepChecklist([]);
+      setSelectedRowKeys([]);
+    }
+  };
+
+  const onChangeInput = filters => {
+    console.log('filters', filters);
+    setFilteredValue(filters.Type);
   };
 
   return (
@@ -494,13 +627,23 @@ const ManagementDataBase = () => {
               <span style={{ marginRight: '100px' }}>升级详情</span>
               {repairTypeList.length > 0 && (
                 <>
-                  <span>类型筛选：</span>
-                  <div style={{ display: 'inline-block' }}>
-                    <Checkbox.Group
-                      options={repairTypeList}
-                      value={keepValue}
-                      onChange={onChange}
-                    />
+                  <Checkbox
+                    checked={allchecked}
+                    onChange={onChange1}
+                    indeterminate={indeterminateAll}
+                  >
+                    全选
+                  </Checkbox>
+                  <div style={{ display: 'inline-block', marginLeft: '10px' }}>
+                    {repairTypeList.map((i, j) => (
+                      <Checkbox
+                        checked={i.checked}
+                        onChange={e => onChangeAll(e, j)}
+                        indeterminate={i.indeterminate}
+                      >
+                        {i.name}
+                      </Checkbox>
+                    ))}
                   </div>
                 </>
               )}
@@ -521,6 +664,7 @@ const ManagementDataBase = () => {
               }}
               className={styles.mgTop20}
               columns={autoCheckColumns}
+              hideSelectAll
               dataSource={autoCheckList}
               bordered
               size="small"
@@ -534,6 +678,7 @@ const ManagementDataBase = () => {
                 showQuickJumper: true,
                 showSizeChanger: true,
               }}
+              onChange={onChangeInput}
             />
             <div className={styles.btnBox}>
               <Space>
@@ -541,8 +686,14 @@ const ManagementDataBase = () => {
                   检查
                 </Button>
                 <Popconfirm
-                  title="
-                是否根据已选数据，升级当前连接数据库?"
+                  title={
+                    <span>
+                      已选
+                      <span style={{ color: 'rgb(24, 144, 255)' }}>{keepCheckList.length}</span>/
+                      {autoCheckList.length}
+                      条数据，是否根据已选数据，升级当前连接数据库?
+                    </span>
+                  }
                   okText="确认"
                   cancelText="取消"
                   onConfirm={() => {