|
@@ -1,57 +1,43 @@
|
|
|
/*
|
|
|
- * @Author: your name
|
|
|
- * @Date: 2022-01-19 14:53:37
|
|
|
- * @LastEditTime: 2024-01-19 14:45:27
|
|
|
+ * @Author: code4eat awesomedema@gmail.com
|
|
|
+ * @Date: 2024-04-09 18:07:35
|
|
|
* @LastEditors: code4eat awesomedema@gmail.com
|
|
|
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
+ * @LastEditTime: 2024-09-04 16:57:33
|
|
|
* @FilePath: /KC-MiddlePlatform/src/pages/platform/components/usersEditer/index.tsx
|
|
|
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
*/
|
|
|
-
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
-import KCTable from '@/components/kcTable';
|
|
|
import { Input, Transfer } from 'antd';
|
|
|
-import { getUsers } from '@/service/user';
|
|
|
import type { EditUsersDataType } from '@/service/user';
|
|
|
-import { ProColumns } from '@ant-design/pro-table';
|
|
|
-import { TableRequestParamsType } from '@/typings';
|
|
|
-import './style.less';
|
|
|
-
|
|
|
import type { TransferDirection } from 'antd/es/transfer';
|
|
|
|
|
|
export interface UserEditerType {
|
|
|
- value?: React.Key[] | React.Key[];
|
|
|
- onChange?: (selectedRowKeys: React.Key[]) => {};
|
|
|
+ value?: React.Key[]; // 修复类型声明
|
|
|
+ onChange?: (selectedRowKeys: React.Key[]) => void; // 修复类型声明
|
|
|
noAction?: boolean;
|
|
|
- total?: [];
|
|
|
+ total?: EditUsersDataType[]; // 修复类型声明
|
|
|
}
|
|
|
|
|
|
const UserEditer: React.FC<UserEditerType> = ({ value = [], onChange, noAction = false, total = [] }) => {
|
|
|
- const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
|
|
+ const [selectedKeys, setSelectedKeys] = useState<React.Key[]>(value); // 初始状态为 value
|
|
|
const [keyword, setKeyword] = useState('');
|
|
|
+ const [data, setData] = useState<EditUsersDataType[]>(total); // 初始状态为 total
|
|
|
+ const [targetKeys, setTargetKeys] = useState<React.Key[]>(value); // 初始状态为 value
|
|
|
|
|
|
- const [data, setData] = useState<EditUsersDataType[]>([]);
|
|
|
- const [targetKeys, setTargetKeys] = useState<React.Key[]>([]);
|
|
|
-
|
|
|
- //record: T, selected: boolean, selectedRows: T[], nativeEvent: Event
|
|
|
- const onSelectHandle = (record: EditUsersDataType, selected: boolean, selectedRows: EditUsersDataType[], nativeEvent: Event) => {
|
|
|
- // console.log({record,selected,selectedRows,nativeEvent});
|
|
|
+ const onSelectHandle = (record: EditUsersDataType, selected: boolean) => {
|
|
|
if (selected) {
|
|
|
- //保证每次选择能够保留之前选中的
|
|
|
setSelectedKeys([...selectedKeys, record.id]);
|
|
|
} else {
|
|
|
- const _selectedKeys = selectedKeys.filter((t) => t != record.id);
|
|
|
- setSelectedKeys([..._selectedKeys]);
|
|
|
+ setSelectedKeys(selectedKeys.filter((t) => t !== record.id));
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- const onChangeHandle = (selectedRowKeys: React.Key[], selectedRows: any[]) => {
|
|
|
- if (selectedRows.length == 0) {
|
|
|
- //取消选择时
|
|
|
- setSelectedKeys([]);
|
|
|
- }
|
|
|
+ const onChangeHandle = (selectedRowKeys: React.Key[]) => {
|
|
|
+ setSelectedKeys(selectedRowKeys);
|
|
|
+ if (onChange) onChange(selectedRowKeys);
|
|
|
};
|
|
|
|
|
|
- const onSearchHandle = (e: React.ChangeEvent & { target: { value: string } }) => {
|
|
|
+ const onSearchHandle = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
setKeyword(e.target.value);
|
|
|
};
|
|
|
|
|
@@ -59,19 +45,19 @@ const UserEditer: React.FC<UserEditerType> = ({ value = [], onChange, noAction =
|
|
|
|
|
|
const handleChange = (newTargetKeys: string[]) => {
|
|
|
setTargetKeys(newTargetKeys);
|
|
|
- onChange && onChange(newTargetKeys);
|
|
|
+ if (onChange) onChange(newTargetKeys);
|
|
|
};
|
|
|
|
|
|
- const handleSearch = (dir: TransferDirection, value: string) => {};
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- onChange && onChange(selectedKeys);
|
|
|
- }, [selectedKeys]);
|
|
|
+ const handleSearch = (dir: TransferDirection, value: string) => {
|
|
|
+
|
|
|
+ };
|
|
|
|
|
|
+ // 同步外部 value 到组件内部状态
|
|
|
useEffect(() => {
|
|
|
setTargetKeys(value);
|
|
|
- setData(total);
|
|
|
- }, []);
|
|
|
+ setSelectedKeys(value);
|
|
|
+ setData(total); // 这里是关键,确保数据也同步
|
|
|
+ }, [value, total]); // 依赖于 value 和 total 的变化
|
|
|
|
|
|
return (
|
|
|
<div className="UserEditer">
|
|
@@ -87,30 +73,6 @@ const UserEditer: React.FC<UserEditerType> = ({ value = [], onChange, noAction =
|
|
|
onSearch={handleSearch}
|
|
|
render={(item) => (item.name ? `${item.name}(${item.account})` : '')}
|
|
|
/>
|
|
|
-
|
|
|
- {/* <div className="search">
|
|
|
- <span className="label">搜索人员:</span>
|
|
|
- <Input
|
|
|
- className="valueArea"
|
|
|
- onChange={onSearchHandle}
|
|
|
- allowClear={true}
|
|
|
- placeholder="请输入姓名、工号"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <KCTable
|
|
|
- rowKey="id"
|
|
|
- columns={columns.filter((t) => (noAction ? t.title != '操作' : t))}
|
|
|
- request={getData}
|
|
|
- params={{ keyword: keyword }}
|
|
|
- options={false}
|
|
|
- search={false}
|
|
|
- rowSelection={{
|
|
|
- checkStrictly: false,
|
|
|
- selectedRowKeys: selectedKeys,
|
|
|
- onChange: onChangeHandle,
|
|
|
- onSelect: onSelectHandle,
|
|
|
- }}
|
|
|
- /> */}
|
|
|
</div>
|
|
|
);
|
|
|
};
|