324 lines
9.6 KiB
TypeScript
324 lines
9.6 KiB
TypeScript
|
import {
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
Drawer,
|
|||
|
|
Form,
|
|||
|
|
Input,
|
|||
|
|
message,
|
|||
|
|
Popconfirm,
|
|||
|
|
Space,
|
|||
|
|
Table,
|
|||
|
|
Tag,
|
|||
|
|
Typography,
|
|||
|
|
DatePicker,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
Select
|
|||
|
|
} from "antd";
|
|||
|
|
import { useEffect, useState, useMemo } from "react";
|
|||
|
|
import { createTenant, deleteTenant, listTenants, updateTenant } from "../api";
|
|||
|
|
import { usePermission } from "../hooks/usePermission";
|
|||
|
|
import {
|
|||
|
|
PlusOutlined,
|
|||
|
|
EditOutlined,
|
|||
|
|
DeleteOutlined,
|
|||
|
|
SearchOutlined,
|
|||
|
|
ReloadOutlined,
|
|||
|
|
ShopOutlined,
|
|||
|
|
CalendarOutlined,
|
|||
|
|
PhoneOutlined,
|
|||
|
|
UserOutlined
|
|||
|
|
} from "@ant-design/icons";
|
|||
|
|
import type { SysTenant } from "../types";
|
|||
|
|
import dayjs from "dayjs";
|
|||
|
|
|
|||
|
|
const { Title, Text } = Typography;
|
|||
|
|
|
|||
|
|
export default function Tenants() {
|
|||
|
|
const { can } = usePermission();
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [saving, setSaving] = useState(false);
|
|||
|
|
const [data, setData] = useState<SysTenant[]>([]);
|
|||
|
|
const [total, setTotal] = useState(0);
|
|||
|
|
const [params, setParams] = useState({
|
|||
|
|
current: 1,
|
|||
|
|
size: 10,
|
|||
|
|
name: "",
|
|||
|
|
code: ""
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|||
|
|
const [editing, setEditing] = useState<SysTenant | null>(null);
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
|
|||
|
|
const loadData = async (currentParams = params) => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const result = await listTenants(currentParams);
|
|||
|
|
setData(result.records || []);
|
|||
|
|
setTotal(result.total || 0);
|
|||
|
|
} catch (e) {
|
|||
|
|
message.error("加载租户列表失败");
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadData();
|
|||
|
|
}, [params.current, params.size]);
|
|||
|
|
|
|||
|
|
const handleSearch = () => {
|
|||
|
|
setParams({ ...params, current: 1 });
|
|||
|
|
loadData({ ...params, current: 1 });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleReset = () => {
|
|||
|
|
const resetParams = {
|
|||
|
|
current: 1,
|
|||
|
|
size: 10,
|
|||
|
|
name: "",
|
|||
|
|
code: ""
|
|||
|
|
};
|
|||
|
|
setParams(resetParams);
|
|||
|
|
loadData(resetParams);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const openCreate = () => {
|
|||
|
|
setEditing(null);
|
|||
|
|
form.resetFields();
|
|||
|
|
form.setFieldsValue({ status: 1 });
|
|||
|
|
setDrawerOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const openEdit = (record: SysTenant) => {
|
|||
|
|
setEditing(record);
|
|||
|
|
form.setFieldsValue({
|
|||
|
|
...record,
|
|||
|
|
expireTime: record.expireTime ? dayjs(record.expireTime) : null
|
|||
|
|
});
|
|||
|
|
setDrawerOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDelete = async (id: number) => {
|
|||
|
|
try {
|
|||
|
|
await deleteTenant(id);
|
|||
|
|
message.success("租户已删除");
|
|||
|
|
loadData();
|
|||
|
|
} catch (e) {
|
|||
|
|
message.error("删除失败");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const submit = async () => {
|
|||
|
|
try {
|
|||
|
|
const values = await form.validateFields();
|
|||
|
|
setSaving(true);
|
|||
|
|
const payload = {
|
|||
|
|
...values,
|
|||
|
|
expireTime: values.expireTime ? values.expireTime.format("YYYY-MM-DD HH:mm:ss") : null
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (editing) {
|
|||
|
|
await updateTenant(editing.id, payload);
|
|||
|
|
message.success("租户信息已更新");
|
|||
|
|
} else {
|
|||
|
|
await createTenant(payload);
|
|||
|
|
message.success("租户已成功创建");
|
|||
|
|
}
|
|||
|
|
setDrawerOpen(false);
|
|||
|
|
loadData();
|
|||
|
|
} catch (e) {
|
|||
|
|
if (e instanceof Error && e.message) message.error(e.message);
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const columns = [
|
|||
|
|
{
|
|||
|
|
title: "租户信息",
|
|||
|
|
key: "tenant",
|
|||
|
|
render: (_: any, record: SysTenant) => (
|
|||
|
|
<Space>
|
|||
|
|
<div style={{ width: 40, height: 40, background: '#f0f5ff', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1890ff', fontSize: 20 }}>
|
|||
|
|
<ShopOutlined aria-hidden="true" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style={{ fontWeight: 600, color: '#262626' }}>{record.tenantName}</div>
|
|||
|
|
<div style={{ fontSize: 12, color: '#8c8c8c' }} className="tabular-nums">{record.tenantCode}</div>
|
|||
|
|
</div>
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "联系人",
|
|||
|
|
key: "contact",
|
|||
|
|
render: (_: any, record: SysTenant) => (
|
|||
|
|
<div>
|
|||
|
|
<div><UserOutlined style={{ marginRight: 4, color: '#8c8c8c' }} />{record.contactName || "-"}</div>
|
|||
|
|
<div style={{ fontSize: 12, color: '#8c8c8c' }} className="tabular-nums"><PhoneOutlined style={{ marginRight: 4 }} />{record.contactPhone || "-"}</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "状态",
|
|||
|
|
dataIndex: "status",
|
|||
|
|
width: 100,
|
|||
|
|
render: (status: number) => (
|
|||
|
|
<Tag color={status === 1 ? "green" : "red"}>
|
|||
|
|
{status === 1 ? "正常" : "禁用"}
|
|||
|
|
</Tag>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "过期时间",
|
|||
|
|
dataIndex: "expireTime",
|
|||
|
|
width: 180,
|
|||
|
|
render: (text: string) => (
|
|||
|
|
<Space>
|
|||
|
|
<CalendarOutlined style={{ color: '#8c8c8c' }} />
|
|||
|
|
<Text className="tabular-nums">{text ? text.substring(0, 10) : "永久有效"}</Text>
|
|||
|
|
</Space>
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "操作",
|
|||
|
|
key: "action",
|
|||
|
|
width: 120,
|
|||
|
|
fixed: "right" as const,
|
|||
|
|
render: (_: any, record: SysTenant) => (
|
|||
|
|
<Space>
|
|||
|
|
{can("sys_tenant:update") && (
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
icon={<EditOutlined aria-hidden="true" />}
|
|||
|
|
onClick={() => openEdit(record)}
|
|||
|
|
aria-label={`编辑租户 ${record.tenantName}`}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{can("sys_tenant:delete") && (
|
|||
|
|
<Popconfirm title={`确定删除租户 "${record.tenantName}" 吗？`} onConfirm={() => handleDelete(record.id)}>
|
|||
|
|
<Button type="text" danger icon={<DeleteOutlined aria-hidden="true" />} aria-label={`删除租户 ${record.tenantName}`} />
|
|||
|
|
</Popconfirm>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="p-6">
|
|||
|
|
<div className="mb-6 flex justify-between items-end">
|
|||
|
|
<div>
|
|||
|
|
<Title level={4} className="mb-1">租户管理</Title>
|
|||
|
|
<Text type="secondary">管理系统多租户基础信息、授权状态及过期时间</Text>
|
|||
|
|
</div>
|
|||
|
|
{can("sys_tenant:create") && (
|
|||
|
|
<Button type="primary" icon={<PlusOutlined aria-hidden="true" />} onClick={openCreate}>
|
|||
|
|
新增租户
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Card className="shadow-sm mb-4">
|
|||
|
|
<Space wrap size="middle">
|
|||
|
|
<Input
|
|||
|
|
placeholder="租户名称…"
|
|||
|
|
prefix={<SearchOutlined aria-hidden="true" className="text-gray-400" />}
|
|||
|
|
style={{ width: 200 }}
|
|||
|
|
value={params.name}
|
|||
|
|
onChange={e => setParams({ ...params, name: e.target.value })}
|
|||
|
|
allowClear
|
|||
|
|
/>
|
|||
|
|
<Input
|
|||
|
|
placeholder="租户编码…"
|
|||
|
|
style={{ width: 180 }}
|
|||
|
|
value={params.code}
|
|||
|
|
onChange={e => setParams({ ...params, code: e.target.value })}
|
|||
|
|
allowClear
|
|||
|
|
/>
|
|||
|
|
<Button type="primary" icon={<SearchOutlined aria-hidden="true" />} onClick={handleSearch}>查询</Button>
|
|||
|
|
<Button icon={<ReloadOutlined aria-hidden="true" />} onClick={handleReset}>重置</Button>
|
|||
|
|
</Space>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="shadow-sm" styles={{ body: { padding: 0 } }}>
|
|||
|
|
<Table
|
|||
|
|
rowKey="id"
|
|||
|
|
columns={columns}
|
|||
|
|
dataSource={data}
|
|||
|
|
loading={loading}
|
|||
|
|
pagination={{
|
|||
|
|
current: params.current,
|
|||
|
|
pageSize: params.size,
|
|||
|
|
total: total,
|
|||
|
|
showSizeChanger: true,
|
|||
|
|
onChange: (page, size) => setParams({ ...params, current: page, size }),
|
|||
|
|
showTotal: (total) => `共 ${total} 条数据`
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Drawer
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<ShopOutlined aria-hidden="true" />
|
|||
|
|
<span>{editing ? "编辑租户信息" : "创建新租户"}</span>
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
open={drawerOpen}
|
|||
|
|
onClose={() => setDrawerOpen(false)}
|
|||
|
|
width={480}
|
|||
|
|
destroyOnClose
|
|||
|
|
footer={
|
|||
|
|
<div className="flex justify-end gap-2 p-2">
|
|||
|
|
<Button onClick={() => setDrawerOpen(false)}>取消</Button>
|
|||
|
|
<Button type="primary" loading={saving} onClick={submit}>确认提交</Button>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Form form={form} layout="vertical">
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<Form.Item label="租户名称" name="tenantName" rules={[{ required: true, message: "请输入租户名称" }]}>
|
|||
|
|
<Input placeholder="例如：云合智慧" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<Form.Item label="租户编码" name="tenantCode" rules={[{ required: true, message: "请输入租户编码" }]}>
|
|||
|
|
<Input placeholder="例如：UNIS" disabled={!!editing} className="tabular-nums" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<Form.Item label="联系人姓名" name="contactName">
|
|||
|
|
<Input placeholder="姓名" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<Form.Item label="联系电话" name="contactPhone">
|
|||
|
|
<Input placeholder="手机或座机" className="tabular-nums" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Form.Item label="过期时间" name="expireTime">
|
|||
|
|
<DatePicker style={{ width: "100%" }} placeholder="留空为永久有效" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item label="租户状态" name="status" initialValue={1}>
|
|||
|
|
<Select options={[{ label: "正常启用", value: 1 }, { label: "禁止访问", value: 0 }]} />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item label="备注说明" name="remark">
|
|||
|
|
<Input.TextArea rows={3} placeholder="选填，租户详细背景说明…" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Drawer>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|