|
@@ -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();
|
|
|
|
|
@@ -32,8 +37,8 @@ function A1Project() {
|
|
|
(state: RootState) => state.A2Dict.A2Tab1_1Obj.status
|
|
|
);
|
|
|
|
|
|
- // 顶部的试图切换
|
|
|
- const [topType, setTopType] = useState<"outer" | "inner">("outer");
|
|
|
+ // 顶部的试图切换。item: 项目文件视图,inside: 内控文件视图
|
|
|
+ const [topType, setTopType] = useState<"item" | "inside">("item");
|
|
|
|
|
|
// 表单数据
|
|
|
const [fromData, setFromData] = useState({
|
|
@@ -45,7 +50,10 @@ function A1Project() {
|
|
|
projectRole: "",
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- type: "inside",
|
|
|
+ type: "item",
|
|
|
+ dictProjectBusinessIds: '', // 业务类型id
|
|
|
+ dictProjectScopeIds: '', // 项目范围id
|
|
|
+ dictProjectAppIds: '', // 客户端id
|
|
|
});
|
|
|
|
|
|
// 封装发送请求的函数
|
|
@@ -81,6 +89,9 @@ function A1Project() {
|
|
|
const resetSelectFu = useCallback(() => {
|
|
|
// 把2个输入框和时间选择器清空
|
|
|
setInputKey(Date.now());
|
|
|
+ setCheckedProjectBusinessArr([])
|
|
|
+ setCheckedProjectScopeArr([])
|
|
|
+ setCheckedProjectAppArr([])
|
|
|
setFromData({
|
|
|
searchKey: "",
|
|
|
pmName: "",
|
|
@@ -90,32 +101,196 @@ function A1Project() {
|
|
|
projectRole: "",
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- type: "inside",
|
|
|
+ type: topType,
|
|
|
+ dictProjectBusinessIds: '', // 业务类型id
|
|
|
+ dictProjectScopeIds: '', // 项目范围id
|
|
|
+ dictProjectAppIds: '', // 客户端id
|
|
|
});
|
|
|
- }, []);
|
|
|
+ }, [topType]);
|
|
|
|
|
|
// 点击顶部的切换视图 按钮
|
|
|
const topTypeFu = useCallback(
|
|
|
- (val: "outer" | "inner") => {
|
|
|
+ (val: "item" | "inside") => {
|
|
|
if (topType === val) return;
|
|
|
setTopType(val);
|
|
|
- resetSelectFu();
|
|
|
},
|
|
|
- [resetSelectFu, topType]
|
|
|
+ [topType]
|
|
|
);
|
|
|
|
|
|
+ // 当 topType 改变时,重置筛选条件
|
|
|
+ useEffect(() => {
|
|
|
+ resetSelectFu();
|
|
|
+ }, [topType, resetSelectFu]);
|
|
|
+
|
|
|
// 权限-------项目视图 和 内控文件视图
|
|
|
const authArr = useSelector((state: RootState) => state.A4Role.A4RoleAll);
|
|
|
|
|
|
useEffect(() => {
|
|
|
// 没有项目文件视图权限,一定有内控文件视图权限
|
|
|
- if (!authArr.includes("1010")) setTopType("inner");
|
|
|
+ if (!authArr.includes("1010")) setTopType("inside");
|
|
|
}, [authArr]);
|
|
|
|
|
|
// 从仓库获取表格数据
|
|
|
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) => {
|
|
@@ -206,7 +381,7 @@ function A1Project() {
|
|
|
},
|
|
|
];
|
|
|
|
|
|
- if (topType === "inner") {
|
|
|
+ if (topType === "inside") {
|
|
|
arr.push(
|
|
|
{
|
|
|
title: "收集文件类型",
|
|
@@ -259,7 +434,7 @@ function A1Project() {
|
|
|
>
|
|
|
查看
|
|
|
</Button>
|
|
|
- {topType === "inner" ? (
|
|
|
+ {topType === "inside" ? (
|
|
|
<>
|
|
|
<AuthCom aId="1104">
|
|
|
<Button
|
|
@@ -347,8 +522,8 @@ function A1Project() {
|
|
|
<div className="A1SearchRow" hidden={isOneTopType}>
|
|
|
<AuthCom aId="1010">
|
|
|
<Button
|
|
|
- onClick={() => topTypeFu("outer")}
|
|
|
- type={topType === "outer" ? "primary" : "default"}
|
|
|
+ onClick={() => topTypeFu("item")}
|
|
|
+ type={topType === "item" ? "primary" : "default"}
|
|
|
>
|
|
|
项目文件视图
|
|
|
</Button>
|
|
@@ -356,8 +531,8 @@ function A1Project() {
|
|
|
|
|
|
<AuthCom aId="1020">
|
|
|
<Button
|
|
|
- onClick={() => topTypeFu("inner")}
|
|
|
- type={topType === "inner" ? "primary" : "default"}
|
|
|
+ onClick={() => topTypeFu("inside")}
|
|
|
+ type={topType === "inside" ? "primary" : "default"}
|
|
|
>
|
|
|
内控文件视图
|
|
|
</Button>
|
|
@@ -416,8 +591,77 @@ function A1Project() {
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
+ {topType === "item" ? (
|
|
|
+ <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>
|
|
|
+ ) : null}
|
|
|
+
|
|
|
{/* 通过顶部状态 动态渲染 这3个下拉框 */}
|
|
|
- {topType === "outer" ? null : (
|
|
|
+ {topType === "item" ? null : (
|
|
|
<>
|
|
|
<div className="A1SearchRow">
|
|
|
<span>是否存在待审批文件:</span>
|