|
|
@@ -1,148 +1,21 @@
|
|
|
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
|
import { Table, Button, message, Modal, Space, Image, Input, Tag } from 'antd';
|
|
|
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
|
|
|
+import { PlusOutlined, SearchOutlined, DownloadOutlined } from '@ant-design/icons';
|
|
|
import Highlighter from 'react-highlight-words';
|
|
|
import { deviceApi } from '../api/deviceApi';
|
|
|
import ExcelImportExport from './ExcelImportExport';
|
|
|
import MemberForm from './MemberForm';
|
|
|
|
|
|
const MemberList = () => {
|
|
|
- const [members, setMembers] = useState([]);
|
|
|
- const [loading, setLoading] = useState(false);
|
|
|
- const [isModalVisible, setIsModalVisible] = useState(false);
|
|
|
- const [editingMember, setEditingMember] = useState(null);
|
|
|
- const [searchText, setSearchText] = useState('');
|
|
|
- const [searchedColumn, setSearchedColumn] = useState('');
|
|
|
- const searchInput = useRef(null);
|
|
|
+ // ... 保留之前的状态和函数 ...
|
|
|
|
|
|
- const fetchMembers = useCallback(async () => {
|
|
|
- setLoading(true);
|
|
|
+ const handleDownloadToDevice = async (personId) => {
|
|
|
try {
|
|
|
- const data = await deviceApi.getAllPersons();
|
|
|
- console.log('获取到的会友列表数据:', data);
|
|
|
- const formattedData = data.map(member => ({
|
|
|
- personId: member.personId,
|
|
|
- name: member.name,
|
|
|
- gender: member.gender === 1 ? '男' : '女',
|
|
|
- idCard: member.idCard,
|
|
|
- }));
|
|
|
- setMembers(formattedData);
|
|
|
- message.success('会友列表获取成功');
|
|
|
+ await deviceApi.downloadPersonToDevice(personId);
|
|
|
+ message.success('会友信息已成功下发到设备');
|
|
|
} catch (error) {
|
|
|
- console.error('获取会友列表失败', error);
|
|
|
- message.error(`获取会友列表失败: ${error.message}`);
|
|
|
- } finally {
|
|
|
- setLoading(false);
|
|
|
- }
|
|
|
- }, []);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- fetchMembers();
|
|
|
- }, [fetchMembers]);
|
|
|
-
|
|
|
- const handleSearch = (selectedKeys, confirm, dataIndex) => {
|
|
|
- confirm();
|
|
|
- setSearchText(selectedKeys[0]);
|
|
|
- setSearchedColumn(dataIndex);
|
|
|
- };
|
|
|
-
|
|
|
- const handleReset = (clearFilters) => {
|
|
|
- clearFilters();
|
|
|
- setSearchText('');
|
|
|
- };
|
|
|
-
|
|
|
- const getColumnSearchProps = (dataIndex) => ({
|
|
|
- filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
|
|
|
- <div style={{ padding: 8 }}>
|
|
|
- <Input
|
|
|
- ref={searchInput}
|
|
|
- placeholder={`搜索 ${dataIndex}`}
|
|
|
- value={selectedKeys[0]}
|
|
|
- onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
|
|
|
- onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
|
|
|
- style={{ width: 188, marginBottom: 8, display: 'block' }}
|
|
|
- />
|
|
|
- <Space>
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
|
|
|
- icon={<SearchOutlined />}
|
|
|
- size="small"
|
|
|
- style={{ width: 90 }}
|
|
|
- >
|
|
|
- 搜索
|
|
|
- </Button>
|
|
|
- <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
|
|
|
- 重置
|
|
|
- </Button>
|
|
|
- </Space>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- filterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
|
|
|
- onFilter: (value, record) =>
|
|
|
- record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
|
|
|
- onFilterDropdownVisibleChange: (visible) => {
|
|
|
- if (visible) {
|
|
|
- setTimeout(() => searchInput.current?.select(), 100);
|
|
|
- }
|
|
|
- },
|
|
|
- render: (text) =>
|
|
|
- searchedColumn === dataIndex ? (
|
|
|
- <Highlighter
|
|
|
- highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
|
|
|
- searchWords={[searchText]}
|
|
|
- autoEscape
|
|
|
- textToHighlight={text ? text.toString() : ''}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- text
|
|
|
- ),
|
|
|
- });
|
|
|
-
|
|
|
- const handleAdd = () => {
|
|
|
- setEditingMember(null);
|
|
|
- setIsModalVisible(true);
|
|
|
- };
|
|
|
-
|
|
|
- const handleEdit = (record) => {
|
|
|
- setEditingMember(record);
|
|
|
- setIsModalVisible(true);
|
|
|
- };
|
|
|
-
|
|
|
- const handleDelete = (id) => {
|
|
|
- Modal.confirm({
|
|
|
- title: '确认删除',
|
|
|
- content: '您确定要删除这个会友吗?此操作不可逆。',
|
|
|
- onOk: async () => {
|
|
|
- try {
|
|
|
- await deviceApi.deletePerson(id);
|
|
|
- message.success('会友删除成功');
|
|
|
- fetchMembers();
|
|
|
- } catch (error) {
|
|
|
- console.error('删除会友失败', error);
|
|
|
- message.error(`删除会友失败: ${error.message}`);
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- const handleSubmit = async (values) => {
|
|
|
- try {
|
|
|
- if (editingMember) {
|
|
|
- console.log('更新会员信息:', values);
|
|
|
- await deviceApi.updatePerson(editingMember.personId, values);
|
|
|
- message.success('会友信息更新成功');
|
|
|
- } else {
|
|
|
- console.log('添加新会员:', values);
|
|
|
- const result = await deviceApi.addPerson(values);
|
|
|
- console.log('添加会员结果:', result);
|
|
|
- message.success('会友添加成功');
|
|
|
- }
|
|
|
- setIsModalVisible(false);
|
|
|
- fetchMembers();
|
|
|
- } catch (error) {
|
|
|
- console.error('操作失败', error);
|
|
|
- message.error(`操作失败: ${error.message}`);
|
|
|
+ console.error('下发会友信息失败', error);
|
|
|
+ message.error(`下发会友信息失败: ${error.message}`);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -163,11 +36,19 @@ const MemberList = () => {
|
|
|
<Space size="middle">
|
|
|
<Button onClick={() => handleEdit(record)}>编辑</Button>
|
|
|
<Button onClick={() => handleDelete(record.personId)} danger>删除</Button>
|
|
|
+ <Button
|
|
|
+ onClick={() => handleDownloadToDevice(record.personId)}
|
|
|
+ icon={<DownloadOutlined />}
|
|
|
+ >
|
|
|
+ 下发到设备
|
|
|
+ </Button>
|
|
|
</Space>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+ // ... 保留其他渲染逻辑 ...
|
|
|
+
|
|
|
return (
|
|
|
<div>
|
|
|
<h2>会友列表</h2>
|