forked from wangziqi/gongxue-base
409 lines
12 KiB
TypeScript
409 lines
12 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react';
|
|
import { Alert, Empty, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag } from 'antd';
|
|
import { BankOutlined, InboxOutlined, PlusOutlined, UndoOutlined } from '@ant-design/icons';
|
|
import api from '../../api';
|
|
import PermissionButton from '../../components/PermissionButton';
|
|
import EditableCell from '../../components/EditableCell';
|
|
import { message } from '../../ui/app-message';
|
|
|
|
const PRESET_COLORS = [
|
|
'#ff7875',
|
|
'#ffa940',
|
|
'#ffc53d',
|
|
'#73d13d',
|
|
'#36cfc9',
|
|
'#40a9ff',
|
|
'#597ef7',
|
|
'#9254de',
|
|
'#f759ab',
|
|
'#8c8c8c',
|
|
];
|
|
|
|
interface OrganizationItem {
|
|
id: number;
|
|
code: string;
|
|
name: string;
|
|
isHost: boolean;
|
|
contactName?: string;
|
|
phone?: string;
|
|
color?: string;
|
|
notes?: string;
|
|
status: 'active' | 'archived';
|
|
}
|
|
|
|
const OrganizationsPage: React.FC = () => {
|
|
const [data, setData] = useState<OrganizationItem[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [editing, setEditing] = useState<OrganizationItem | null>(null);
|
|
const [form] = Form.useForm();
|
|
const [saving, setSaving] = useState(false);
|
|
const [searchText, setSearchText] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState<string>();
|
|
|
|
const filteredData = useMemo(() => {
|
|
const keyword = searchText.trim().toLowerCase();
|
|
return data.filter((item) => {
|
|
const matchesKeyword =
|
|
!keyword ||
|
|
item.name.toLowerCase().includes(keyword) ||
|
|
item.code.toLowerCase().includes(keyword) ||
|
|
item.contactName?.toLowerCase().includes(keyword);
|
|
return matchesKeyword && (!filterStatus || item.status === filterStatus);
|
|
});
|
|
}, [data, searchText, filterStatus]);
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
setData(
|
|
await api.get<OrganizationItem[]>('/organizations', { params: { includeArchived: true } }),
|
|
);
|
|
} catch (error: any) {
|
|
message.error(error?.message || '机构数据加载失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
void fetchData();
|
|
}, []);
|
|
|
|
const openEditor = (record?: OrganizationItem) => {
|
|
setEditing(record ?? null);
|
|
form.resetFields();
|
|
if (record) form.setFieldsValue(record);
|
|
else form.setFieldsValue({ color: PRESET_COLORS[data.length % PRESET_COLORS.length] });
|
|
setModalOpen(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
const values = await form.validateFields();
|
|
setSaving(true);
|
|
try {
|
|
if (editing) await api.put(`/organizations/${editing.id}`, values);
|
|
else await api.post('/organizations', values);
|
|
message.success(editing ? '机构已更新' : '机构已创建');
|
|
setModalOpen(false);
|
|
await fetchData();
|
|
} catch (error: any) {
|
|
message.error(error?.message || '保存失败');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const saveCell = async (record: OrganizationItem, field: string, value: unknown) => {
|
|
await api.put(`/organizations/${record.id}`, { [field]: value });
|
|
message.success('已保存');
|
|
await fetchData();
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
title: '机构',
|
|
dataIndex: 'name',
|
|
width: 220,
|
|
render: (name: string, record: OrganizationItem) => (
|
|
<EditableCell
|
|
value={name}
|
|
required
|
|
permission="organization:edit"
|
|
disabled={record.status === 'archived'}
|
|
onSave={(next) => saveCell(record, 'name', next)}
|
|
>
|
|
<Space>
|
|
<span
|
|
style={{
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: '50%',
|
|
background: record.color || '#8c8c8c',
|
|
}}
|
|
/>
|
|
<strong>{name}</strong>
|
|
{record.isHost ? (
|
|
<Tag color="blue" icon={<BankOutlined />}>
|
|
本机构
|
|
</Tag>
|
|
) : (
|
|
<Tag>外部机构</Tag>
|
|
)}
|
|
</Space>
|
|
</EditableCell>
|
|
),
|
|
},
|
|
{
|
|
title: '机构编码',
|
|
dataIndex: 'code',
|
|
width: 130,
|
|
render: (value: string, record: OrganizationItem) => (
|
|
<EditableCell
|
|
value={value}
|
|
required
|
|
permission="organization:edit"
|
|
disabled={record.status === 'archived'}
|
|
onSave={(next) => saveCell(record, 'code', next)}
|
|
>
|
|
<code>{value}</code>
|
|
</EditableCell>
|
|
),
|
|
},
|
|
{
|
|
title: '联系人',
|
|
dataIndex: 'contactName',
|
|
width: 120,
|
|
render: (value: string | undefined, record: OrganizationItem) => (
|
|
<EditableCell
|
|
value={value}
|
|
permission="organization:edit"
|
|
disabled={record.status === 'archived'}
|
|
onSave={(next) => saveCell(record, 'contactName', next)}
|
|
>
|
|
{value || '-'}
|
|
</EditableCell>
|
|
),
|
|
},
|
|
{
|
|
title: '电话',
|
|
dataIndex: 'phone',
|
|
width: 140,
|
|
render: (value: string | undefined, record: OrganizationItem) => (
|
|
<EditableCell
|
|
value={value}
|
|
permission="organization:edit"
|
|
disabled={record.status === 'archived'}
|
|
onSave={(next) => saveCell(record, 'phone', next)}
|
|
>
|
|
{value || '-'}
|
|
</EditableCell>
|
|
),
|
|
},
|
|
{
|
|
title: '备注',
|
|
dataIndex: 'notes',
|
|
ellipsis: true,
|
|
render: (value: string | undefined, record: OrganizationItem) => (
|
|
<EditableCell
|
|
value={value}
|
|
editor="textarea"
|
|
permission="organization:edit"
|
|
disabled={record.status === 'archived'}
|
|
onSave={(next) => saveCell(record, 'notes', next)}
|
|
>
|
|
{value || '-'}
|
|
</EditableCell>
|
|
),
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
width: 90,
|
|
render: (status: string) => (
|
|
<Tag color={status === 'active' ? 'green' : 'default'}>
|
|
{status === 'active' ? '正常' : '已归档'}
|
|
</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: 160,
|
|
render: (_: unknown, record: OrganizationItem) => (
|
|
<Space>
|
|
{record.status === 'archived' ? (
|
|
<Popconfirm
|
|
title="确定恢复此机构？"
|
|
onConfirm={async () => {
|
|
try {
|
|
await api.put(`/organizations/${record.id}`, { status: 'active' });
|
|
message.success('机构已恢复');
|
|
await fetchData();
|
|
} catch (error: any) {
|
|
message.error(error?.message || '恢复失败');
|
|
}
|
|
}}
|
|
>
|
|
<PermissionButton
|
|
permission="organization:edit"
|
|
size="small"
|
|
type="link"
|
|
icon={<UndoOutlined />}
|
|
>
|
|
恢复
|
|
</PermissionButton>
|
|
</Popconfirm>
|
|
) : (
|
|
<>
|
|
<PermissionButton
|
|
permission="organization:edit"
|
|
size="small"
|
|
onClick={() => openEditor(record)}
|
|
>
|
|
编辑
|
|
</PermissionButton>
|
|
{!record.isHost ? (
|
|
<Popconfirm
|
|
title="归档后仍保留历史学生、入住和租赁记录"
|
|
onConfirm={async () => {
|
|
try {
|
|
await api.delete(`/organizations/${record.id}`);
|
|
message.success('机构已归档');
|
|
await fetchData();
|
|
} catch (error: any) {
|
|
message.error(error?.message || '归档失败');
|
|
}
|
|
}}
|
|
>
|
|
<PermissionButton
|
|
permission="organization:delete"
|
|
size="small"
|
|
icon={<InboxOutlined />}
|
|
>
|
|
归档
|
|
</PermissionButton>
|
|
</Popconfirm>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Alert
|
|
type="info"
|
|
showIcon
|
|
message="统一机构管理"
|
|
description="本机构与外部机构使用同一套资料。学生明确归属机构；教室租赁则单独记录出租机构和承租机构。"
|
|
style={{ marginBottom: 16 }}
|
|
/>
|
|
<div
|
|
style={{
|
|
marginBottom: 16,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
flexWrap: 'wrap',
|
|
gap: 8,
|
|
}}
|
|
>
|
|
<Space wrap>
|
|
<Input.Search
|
|
placeholder="搜索名称、编码或联系人"
|
|
allowClear
|
|
style={{ width: 260 }}
|
|
onChange={(event) => setSearchText(event.target.value)}
|
|
/>
|
|
<Select
|
|
placeholder="全部状态"
|
|
allowClear
|
|
style={{ width: 120 }}
|
|
value={filterStatus}
|
|
onChange={setFilterStatus}
|
|
options={[
|
|
{ value: 'active', label: '正常' },
|
|
{ value: 'archived', label: '已归档' },
|
|
]}
|
|
/>
|
|
</Space>
|
|
<PermissionButton
|
|
permission="organization:create"
|
|
type="primary"
|
|
icon={<PlusOutlined />}
|
|
onClick={() => openEditor()}
|
|
>
|
|
添加机构
|
|
</PermissionButton>
|
|
</div>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={filteredData}
|
|
rowKey="id"
|
|
loading={loading}
|
|
locale={{ emptyText: <Empty description="暂无机构" /> }}
|
|
scroll={{ x: 1100 }}
|
|
pagination={{
|
|
defaultPageSize: 20,
|
|
showSizeChanger: true,
|
|
pageSizeOptions: [20, 50, 100],
|
|
showTotal: (total) => `共 ${total} 个机构`,
|
|
}}
|
|
/>
|
|
<Modal
|
|
title={editing ? `编辑机构 · ${editing.name}` : '添加外部机构'}
|
|
open={modalOpen}
|
|
onOk={handleSave}
|
|
onCancel={() => setModalOpen(false)}
|
|
confirmLoading={saving}
|
|
okText="保存"
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
{editing?.isHost ? (
|
|
<Alert
|
|
type="warning"
|
|
showIcon
|
|
message="这是系统本机构，不可归档，也不能改为外部机构。"
|
|
style={{ marginBottom: 16 }}
|
|
/>
|
|
) : null}
|
|
<Form.Item
|
|
name="name"
|
|
label="机构名称"
|
|
rules={[{ required: true, message: '请输入机构名称' }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="code"
|
|
label="机构编码"
|
|
tooltip="用于导入和系统识别，建议使用大写英文、数字、下划线或短横线"
|
|
rules={[
|
|
{ required: true },
|
|
{ pattern: /^[A-Z0-9_-]+$/, message: '仅支持大写英文、数字、下划线和短横线' },
|
|
]}
|
|
>
|
|
<Input
|
|
disabled={editing?.isHost}
|
|
placeholder="如 PARTNER_A"
|
|
onChange={(event) => form.setFieldValue('code', event.target.value.toUpperCase())}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item name="contactName" label="联系人">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="phone" label="电话">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="color" label="识别颜色">
|
|
<Space wrap>
|
|
{PRESET_COLORS.map((color) => (
|
|
<button
|
|
type="button"
|
|
key={color}
|
|
aria-label={`选择 ${color}`}
|
|
onClick={() => form.setFieldValue('color', color)}
|
|
style={{
|
|
width: 30,
|
|
height: 30,
|
|
borderRadius: 6,
|
|
border: '1px solid #d9d9d9',
|
|
background: color,
|
|
cursor: 'pointer',
|
|
}}
|
|
/>
|
|
))}
|
|
</Space>
|
|
</Form.Item>
|
|
<Form.Item name="notes" label="备注">
|
|
<Input.TextArea rows={3} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OrganizationsPage;
|