Files
xin-procurement/web/pages/customer/level.tsx
T
2026-07-23 20:41:25 +08:00

94 lines
2.3 KiB
TypeScript

import React from 'react';
import { Tag, Typography } from 'antd';
import XinTable from '@/components/XinTable';
import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings.ts';
import type ICustomerLevel from '@/domain/iCustomerLevel.ts';
import { CUSTOMER_LEVEL_STATUS_MAP } from '@/domain/iCustomerLevel.ts';
const { Title, Text } = Typography;
/**
* 客户等级管理
*/
const CustomerLevelPage: React.FC = () => {
const columns: XinTableColumn<ICustomerLevel>[] = [
{
title: 'ID',
dataIndex: 'id',
hideInForm: true,
hideInSearch: true,
width: 70,
align: 'center',
},
{
title: '等级名称',
dataIndex: 'name',
valueType: 'text',
required: true,
rules: [{ required: true, message: '请输入等级名称' }],
},
{
title: '排序',
dataIndex: 'sort',
valueType: 'digit',
hideInSearch: true,
fieldProps: { min: 0 },
},
{
title: '状态',
dataIndex: 'status',
valueType: 'radioButton',
initialValue: 1,
fieldProps: {
options: [
{ value: 1, label: '正常' },
{ value: 0, label: '停用' },
],
},
render: (_, record) => {
const item = CUSTOMER_LEVEL_STATUS_MAP[record.status ?? 1];
return <Tag color={item?.color}>{item?.text}</Tag>;
},
},
{
title: '备注',
dataIndex: 'remark',
valueType: 'textarea',
hideInSearch: true,
fieldProps: { rows: 2 },
},
{
title: '创建时间',
dataIndex: 'created_at',
hideInForm: true,
hideInSearch: true,
align: 'center',
},
];
const tableProps: XinTableProps<ICustomerLevel> = {
api: '/customer/level',
columns,
rowKey: 'id',
accessName: 'customer.level',
formProps: {
grid: true,
colProps: { span: 12 },
layout: 'vertical',
},
modalProps: { width: 640 },
};
return (
<>
<div className="mb-5">
<Title level={3}>客户等级</Title>
<Text type="secondary">同一商品按客户等级显示不同单价,门店绑定等级后小程序端按对应价格展示。</Text>
</div>
<XinTable<ICustomerLevel> {...tableProps} />
</>
);
};
export default CustomerLevelPage;