项目管理：项目列表页新增“项目类型”筛选项

src/pages/A1Project/index.module.scss

@@ -20,7 +20,17 @@
       .A1Search2 {
         width: 1267px;
         position: relative;
-
+        .projectTypeFilterButton {
+          display: inline-flex;
+          align-items: center;
+          >span:first-of-type {
+            display: inline-block;
+            max-width: 400px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
         .A1SearchBtn {
           position: absolute;
           right: 8px;
@@ -48,6 +58,17 @@
     }
 
   }
+}
 
-
+.projectTypePopOver {
+  >.row {
+    .title {
+      display: inline-block;
+      width: 5em;
+      font-weight: bold;
+    }
+    .selectAll {
+      font-weight: bold;
+    }
+  }
 }

src/pages/A1Project/index.tsx

@@ -6,7 +6,8 @@ import React, {
   useState,
 } from "react";
 import styles from "./index.module.scss";
-import { Button, Input, Popconfirm, Select, Table, Tooltip } from "antd";
+import { Button, Input, Popconfirm, Select, Table, Tooltip, Popover, Radio, Checkbox } from "antd";
+import { DownOutlined } from '@ant-design/icons';
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/store";
 import { A1TableType } from "@/types";
@@ -19,6 +20,10 @@ import { hasAuditStatusArr } from "./data";
 import { MessageFu } from "@/utils/message";
 import AuthCom from "@/components/AuthCom";
 
+import type { CheckboxProps, GetProp } from 'antd';
+
+type CheckboxValueType = GetProp<typeof Checkbox.Group, 'value'>[number];
+
 function A1Project() {
   const dispatch = useDispatch();
 
@@ -46,6 +51,9 @@ function A1Project() {
     pageNum: 1,
     pageSize: 10,
     type: "inside",
+    dictProjectBusinessIds: '', // 业务类型id
+    dictProjectScopeIds: '', // 项目范围id
+    dictProjectAppIds: '', // 客户端id
   });
 
   // 封装发送请求的函数
@@ -91,6 +99,9 @@ function A1Project() {
       pageNum: 1,
       pageSize: 10,
       type: "inside",
+      dictProjectBusinessIds: '', // 业务类型id
+      dictProjectScopeIds: '', // 项目范围id
+      dictProjectAppIds: '', // 客户端id
     });
   }, []);
 
@@ -116,6 +127,163 @@ function A1Project() {
   const tableInfo = useSelector(
     (state: RootState) => state.A1Project.tableInfo
   );
+
+  /**
+   * 业务类型 相关逻辑
+   */
+  // 从仓库 获取 业务类型 数据
+  const projectBusinessArr = useSelector(
+    (state: RootState) => state.A2Dict.A2Tab1_1Obj.projectBusiness
+  );
+  const projectBusinessArrForCheckbox = projectBusinessArr.map((v) => {
+    return {
+      label: v.name,
+      value: v.id,
+    }
+  });
+  // 选中的选项
+  const [checkedProjectBusinessArr, setCheckedProjectBusinessArr] = useState<CheckboxValueType[]>([]);
+  // 是否已全选
+  const isProjectBusinessAllChecked = projectBusinessArr.length === checkedProjectBusinessArr.length;
+  // 是否选了一部分
+  const isProjectBusinessPartiallyChecked = checkedProjectBusinessArr.length > 0 && checkedProjectBusinessArr.length < projectBusinessArr.length;
+  // 全选项 选中状态变化
+  const onProjectBusinessCheckAllChange: CheckboxProps['onChange'] = (e) => {
+    setCheckedProjectBusinessArr(e.target.checked ? projectBusinessArr.map((i) => {return i.id}) : []);
+  };
+  // 普通选项 选中状态变化
+  const onProjectBusinessNormalCheckboxChange = (list: CheckboxValueType[]) => {
+    setCheckedProjectBusinessArr(list);
+  };
+  useEffect(() => {
+    setFromData(currentFromData => ({
+      ...currentFromData,
+      dictProjectBusinessIds: checkedProjectBusinessArr.join(','),
+      pageNum: 1
+    }));
+  }, [checkedProjectBusinessArr]);
+  /**
+   * end of 业务类型 相关逻辑
+   */
+
+  /**
+   * 项目范围 相关逻辑
+   */
+  // 从仓库 获取 项目范围 数据
+  const projectScopeArr = useSelector(
+    (state: RootState) => state.A2Dict.A2Tab1_1Obj.projectScope
+  );
+  const projectScopeArrForCheckbox = projectScopeArr.map((v) => {
+    return {
+      label: v.name,
+      value: v.id,
+    }
+  });
+  // 选中的选项
+  const [checkedProjectScopeArr, setCheckedProjectScopeArr] = useState<CheckboxValueType[]>([]);
+  // 是否已全选
+  const isProjectScopeAllChecked = projectScopeArrForCheckbox.length === checkedProjectScopeArr.length;
+  // 是否选了一部分
+  const isProjectScopePartiallyChecked = checkedProjectScopeArr.length > 0 && checkedProjectScopeArr.length < projectScopeArr.length;
+  // 全选项 选中状态变化
+  const onProjectScopeCheckAllChange: CheckboxProps['onChange'] = (e) => {
+    setCheckedProjectScopeArr(e.target.checked ? projectScopeArrForCheckbox.map((i) => {return i.value}) : []);
+  };
+  // 普通选项 选中状态变化
+  const onProjectScopeNormalCheckboxChange = (list: CheckboxValueType[]) => {
+    setCheckedProjectScopeArr(list);
+  };
+  useEffect(() => {
+    setFromData(currentFromData => ({
+      ...currentFromData,
+      dictProjectScopeIds: checkedProjectScopeArr.join(','),
+      pageNum: 1
+    }));
+  }, [checkedProjectScopeArr]);
+  
+  /**
+   * end of 项目范围 相关逻辑
+   */
+
+  /**
+   * 客户端 相关逻辑
+   */
+  // 从仓库 获取 客户端 数据
+  const projectAppArr = useSelector(
+    (state: RootState) => state.A2Dict.A2Tab1_1Obj.projectApp
+  );
+  const projectAppArrForCheckbox = projectAppArr.map((v) => {
+    return {
+      label: v.name,
+      value: v.id,
+    }
+  });
+  // 选中的选项
+  const [checkedProjectAppArr, setCheckedProjectAppArr] = useState<CheckboxValueType[]>([]);
+  // 是否已全选
+  const isProjectAppAllChecked = projectAppArrForCheckbox.length === checkedProjectAppArr.length;
+  // 是否选了一部分
+  const isProjectAppPartiallyChecked = checkedProjectAppArr.length > 0 && checkedProjectAppArr.length < projectAppArr.length;
+  // 全选项 选中状态变化
+  const onProjectAppCheckAllChange: CheckboxProps['onChange'] = (e) => {
+    setCheckedProjectAppArr(e.target.checked ? projectAppArrForCheckbox.map((i) => {return i.value}) : []);
+  };
+  // 普通选项 选中状态变化
+  const onProjectAppNormalCheckboxChange = (list: CheckboxValueType[]) => {
+    setCheckedProjectAppArr(list);
+  };
+  useEffect(() => {
+    setFromData(currentFromData => ({
+      ...currentFromData,
+      dictProjectAppIds: checkedProjectAppArr.join(','),
+      pageNum: 1
+    }));
+  }, [checkedProjectAppArr]);
+  /**
+   * end of 客户端 相关逻辑
+   */
+  
+  /**
+   * 项目类型筛选按钮显示的文字
+   */
+  const [projectTypeCurrentText, setProjectTypeCurrentText] = useState('全部类型')
+  useEffect(() => {
+    setProjectTypeCurrentText(v => {
+      if (
+        (checkedProjectBusinessArr.length === 0 && checkedProjectScopeArr.length === 0 && checkedProjectAppArr.length === 0) ||
+        (checkedProjectBusinessArr.length === projectBusinessArr.length && checkedProjectScopeArr.length === projectScopeArr.length && checkedProjectAppArr.length === projectAppArr.length)
+      ) {
+        return '全部类型'
+      } else {
+        // 把checkedProjectBusinessArr各元素对应的name存入一个数组
+        const checkedProjectBusinessArrName = checkedProjectBusinessArr.map(v => {
+          const item = projectBusinessArr.find(i => i.id === v)
+          return item ? item.name : ''
+        })
+        // 把checkedProjectScopeArr各元素对应的name存入一个数组
+        const checkedProjectScopeArrName = checkedProjectScopeArr.map(v => {
+          const item = projectScopeArr.find(i => i.id === v)
+          return item ? item.name : ''
+        })
+        // 把checkedProjectAppArr各元素对应的name存入一个数组
+        const checkedProjectAppArrName = checkedProjectAppArr.map(v => {
+          const item = projectAppArr.find(i => i.id === v)
+          return item ? item.name : ''
+        })
+        // 把3个数组合并成一个数组，再转成字符串
+        return checkedProjectBusinessArrName.concat(checkedProjectScopeArrName, checkedProjectAppArrName).join('，')
+      }
+    })
+  }, [
+    checkedProjectBusinessArr,
+    checkedProjectScopeArr,
+    checkedProjectAppArr,
+    projectBusinessArr,
+    projectScopeArr,
+    projectAppArr
+  ])
+  
+  
   // 页码变化
   const paginationChange = useCallback(
     () => (pageNum: number, pageSize: number) => {
@@ -416,6 +584,73 @@ function A1Project() {
             />
           </div>
 
+          <div className="A1SearchRow">
+            <span>项目类型：</span>
+            <Popover
+              trigger="click"
+              placement="bottomLeft"
+              content={
+                <div className={styles.projectTypePopOver}>
+                  <div className={styles.row}>
+                    <span className={styles.title} title="甲方的业务类型">业务类型：</span>
+                    <Checkbox
+                      indeterminate={isProjectBusinessPartiallyChecked}
+                      onChange={onProjectBusinessCheckAllChange}
+                      checked={isProjectBusinessAllChecked}
+                      className={styles.selectAll}
+                    >
+                      全选
+                    </Checkbox>
+                    <Checkbox.Group
+                      options={projectBusinessArrForCheckbox}
+                      value={checkedProjectBusinessArr}
+                      onChange={onProjectBusinessNormalCheckboxChange}
+                    />
+                  </div>
+
+                  <div className={styles.row}>
+                    <span className={styles.title} title="项目的建设范围">项目范围：</span>
+                    <Checkbox
+                      indeterminate={isProjectScopePartiallyChecked}
+                      onChange={onProjectScopeCheckAllChange}
+                      checked={isProjectScopeAllChecked}
+                      className={styles.selectAll}
+                    >
+                      全选
+                    </Checkbox>
+                    <Checkbox.Group
+                      options={projectScopeArrForCheckbox}
+                      value={checkedProjectScopeArr}
+                      onChange={onProjectScopeNormalCheckboxChange}
+                    />
+                  </div>
+
+                  <div className={styles.row}>
+                    <span className={styles.title} title="项目成果的呈现载体">客户端：</span>
+                    <Checkbox
+                      indeterminate={isProjectAppPartiallyChecked}
+                      onChange={onProjectAppCheckAllChange}
+                      checked={isProjectAppAllChecked}
+                      className={styles.selectAll}
+                    >
+                      全选
+                    </Checkbox>
+                    <Checkbox.Group
+                      options={projectAppArrForCheckbox}
+                      value={checkedProjectAppArr}
+                      onChange={onProjectAppNormalCheckboxChange}
+                    />
+                  </div>
+                </div>
+              }
+            >
+              <Button className="projectTypeFilterButton">
+                {projectTypeCurrentText}
+                <DownOutlined />
+              </Button>
+            </Popover>
+          </div>
+
           {/* 通过顶部状态 动态渲染 这3个下拉框 */}
           {topType === "outer" ? null : (
             <>