first version
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
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;
|
||||
@@ -0,0 +1,294 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
message,
|
||||
Modal,
|
||||
Popconfirm,
|
||||
Radio,
|
||||
Select,
|
||||
Space,
|
||||
Tag,
|
||||
Typography,
|
||||
} from 'antd';
|
||||
import XinTable from '@/components/XinTable';
|
||||
import type {
|
||||
XinTableColumn,
|
||||
XinTableInstance,
|
||||
XinTableProps,
|
||||
} from '@/components/XinTable/typings.ts';
|
||||
import type IMiniUser from '@/domain/iMiniUser.ts';
|
||||
import { MINI_USER_STATUS_MAP, MINI_USER_TYPE_MAP } from '@/domain/iMiniUser.ts';
|
||||
import type IStore from '@/domain/iStore.ts';
|
||||
import type ISupplier from '@/domain/iSupplier.ts';
|
||||
import { getStoreOptions } from '@/api/customer/store.ts';
|
||||
import { getSupplierOptions } from '@/api/customer/supplier.ts';
|
||||
import { bindMiniUser, toggleMiniUserStatus } from '@/api/customer/miniUser.ts';
|
||||
import AuthButton from '@/components/AuthButton';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface BindFormValues {
|
||||
type: number;
|
||||
store_id?: number;
|
||||
supplier_id?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 小程序用户管理（用户由小程序登录自动生成，后台只做绑定与状态管理）
|
||||
*/
|
||||
const MiniUserPage: React.FC = () => {
|
||||
const tableRef = useRef<XinTableInstance<IMiniUser>>(null);
|
||||
const [stores, setStores] = useState<IStore[]>([]);
|
||||
const [suppliers, setSuppliers] = useState<ISupplier[]>([]);
|
||||
|
||||
// 绑定弹窗
|
||||
const [bindOpen, setBindOpen] = useState(false);
|
||||
const [bindTarget, setBindTarget] = useState<IMiniUser | null>(null);
|
||||
const [bindLoading, setBindLoading] = useState(false);
|
||||
const [bindForm] = Form.useForm<BindFormValues>();
|
||||
|
||||
useEffect(() => {
|
||||
getStoreOptions().then((res) => setStores(res.data.data ?? []));
|
||||
getSupplierOptions().then((res) => setSuppliers(res.data.data ?? []));
|
||||
}, []);
|
||||
|
||||
const openBind = (record: IMiniUser) => {
|
||||
setBindTarget(record);
|
||||
bindForm.setFieldsValue({
|
||||
type: record.type && record.type > 0 ? record.type : undefined,
|
||||
store_id: record.store_id || undefined,
|
||||
supplier_id: record.supplier_id || undefined,
|
||||
});
|
||||
setBindOpen(true);
|
||||
};
|
||||
|
||||
const handleBind = async (values: BindFormValues) => {
|
||||
if (!bindTarget?.id) {
|
||||
return;
|
||||
}
|
||||
setBindLoading(true);
|
||||
try {
|
||||
await bindMiniUser(bindTarget.id, {
|
||||
type: values.type,
|
||||
store_id: values.type === 1 ? values.store_id : undefined,
|
||||
supplier_id: values.type === 2 ? values.supplier_id : undefined,
|
||||
});
|
||||
message.success('绑定成功');
|
||||
setBindOpen(false);
|
||||
await tableRef.current?.reload();
|
||||
} finally {
|
||||
setBindLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleStatus = async (record: IMiniUser) => {
|
||||
await toggleMiniUserStatus(record.id!, record.status === 1 ? 0 : 1);
|
||||
message.success(record.status === 1 ? '已停用' : '已启用');
|
||||
await tableRef.current?.reload();
|
||||
};
|
||||
|
||||
const columns: XinTableColumn<IMiniUser>[] = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
hideInSearch: true,
|
||||
width: 70,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'nickname',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
render: (_, record) => (
|
||||
<Space size={8}>
|
||||
{record.avatar ? (
|
||||
<img src={record.avatar} alt="" className="h-6 w-6 rounded-full" />
|
||||
) : null}
|
||||
<span>{record.nickname || '-'}</span>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
render: (_, record) => record.phone || <Text type="secondary">未绑定</Text>,
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ value: 0, label: '待绑定' },
|
||||
{ value: 1, label: '门店' },
|
||||
{ value: 2, label: '供应商' },
|
||||
],
|
||||
},
|
||||
render: (_, record) => {
|
||||
const item = MINI_USER_TYPE_MAP[record.type ?? 0];
|
||||
return <Tag color={item?.color}>{item?.text}</Tag>;
|
||||
},
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '绑定主体',
|
||||
dataIndex: 'bound_name',
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
if (record.type === 1) {
|
||||
return <Tag color="blue">{record.store?.name ?? `门店#${record.store_id}`}</Tag>;
|
||||
}
|
||||
if (record.type === 2) {
|
||||
return (
|
||||
<Tag color="purple">{record.supplier?.name ?? `供应商#${record.supplier_id}`}</Tag>
|
||||
);
|
||||
}
|
||||
return <Text type="secondary">待后台绑定</Text>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ value: 1, label: '正常' },
|
||||
{ value: 0, label: '停用' },
|
||||
],
|
||||
},
|
||||
render: (_, record) => {
|
||||
const item = MINI_USER_STATUS_MAP[record.status ?? 1];
|
||||
return <Tag color={item?.color}>{item?.text}</Tag>;
|
||||
},
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '最后登录',
|
||||
dataIndex: 'last_login_at',
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
render: (_, record) => record.last_login_at ?? <Text type="secondary">从未登录</Text>,
|
||||
},
|
||||
];
|
||||
|
||||
const operateRender: XinTableProps<IMiniUser>['operateRender'] = (record) => [
|
||||
<AuthButton key="bind" auth="customer.miniUser.bind">
|
||||
<Button size="small" color="blue" variant="outlined" onClick={() => openBind(record)}>
|
||||
绑定
|
||||
</Button>
|
||||
</AuthButton>,
|
||||
<AuthButton key="status" auth="customer.miniUser.update">
|
||||
<Popconfirm
|
||||
title={record.status === 1 ? '确定停用该账号？' : '确定启用该账号？'}
|
||||
description={record.status === 1 ? '停用后该用户将无法登录小程序' : undefined}
|
||||
onConfirm={() => handleToggleStatus(record)}
|
||||
>
|
||||
<Button size="small" danger={record.status === 1}>
|
||||
{record.status === 1 ? '停用' : '启用'}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</AuthButton>,
|
||||
];
|
||||
|
||||
const tableProps: XinTableProps<IMiniUser> = {
|
||||
api: '/customer/miniUser',
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
accessName: 'customer.miniUser',
|
||||
tableRef,
|
||||
operateRender,
|
||||
// 无新增/编辑表单
|
||||
formProps: false,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<Title level={3}>小程序用户</Title>
|
||||
<Text type="secondary">
|
||||
用户由微信小程序登录自动创建；手机号授权后按手机号自动匹配门店/供应商，未命中的需在此人工绑定。
|
||||
</Text>
|
||||
</div>
|
||||
<XinTable<IMiniUser> {...tableProps} />
|
||||
|
||||
<Modal
|
||||
title={`绑定主体 · ${bindTarget?.nickname || ''}`}
|
||||
open={bindOpen}
|
||||
onCancel={() => setBindOpen(false)}
|
||||
onOk={() => bindForm.submit()}
|
||||
confirmLoading={bindLoading}
|
||||
okText="确认绑定"
|
||||
destroyOnHidden
|
||||
>
|
||||
<Form<BindFormValues>
|
||||
form={bindForm}
|
||||
layout="vertical"
|
||||
onFinish={handleBind}
|
||||
className="mt-4"
|
||||
>
|
||||
<Form.Item
|
||||
label="用户类型"
|
||||
name="type"
|
||||
rules={[{ required: true, message: '请选择用户类型' }]}
|
||||
>
|
||||
<Radio.Group
|
||||
options={[
|
||||
{ label: '门店', value: 1 },
|
||||
{ label: '供应商', value: 2 },
|
||||
]}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item noStyle shouldUpdate={(prev, cur) => prev.type !== cur.type}>
|
||||
{({ getFieldValue }) => {
|
||||
const type = getFieldValue('type');
|
||||
if (type === 1) {
|
||||
return (
|
||||
<Form.Item
|
||||
label="绑定门店"
|
||||
name="store_id"
|
||||
rules={[{ required: true, message: '请选择门店' }]}
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
placeholder="选择门店"
|
||||
options={stores.map((s) => ({
|
||||
label: `${s.name}（${s.code}）`,
|
||||
value: s.id,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
if (type === 2) {
|
||||
return (
|
||||
<Form.Item
|
||||
label="绑定供应商"
|
||||
name="supplier_id"
|
||||
rules={[{ required: true, message: '请选择供应商' }]}
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
placeholder="选择供应商"
|
||||
options={suppliers.map((s) => ({ label: s.name, value: s.id }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MiniUserPage;
|
||||
@@ -0,0 +1,130 @@
|
||||
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 INotice from '@/domain/iNotice.ts';
|
||||
import { NOTICE_READ_MAP, NOTICE_TYPE_MAP } from '@/domain/iNotice.ts';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
/**
|
||||
* 通知管理（user_id=0 为全员广播）
|
||||
*/
|
||||
const NoticePage: React.FC = () => {
|
||||
const columns: XinTableColumn<INotice>[] = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
hideInForm: true,
|
||||
hideInSearch: true,
|
||||
width: 70,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title',
|
||||
valueType: 'text',
|
||||
required: true,
|
||||
rules: [{ required: true, message: '请输入通知标题' }],
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'select',
|
||||
initialValue: 'system',
|
||||
required: true,
|
||||
rules: [{ required: true, message: '请选择通知类型' }],
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ value: 'system', label: '系统' },
|
||||
{ value: 'order', label: '订单' },
|
||||
{ value: 'price', label: '价格' },
|
||||
],
|
||||
},
|
||||
render: (_, record) => {
|
||||
const item = NOTICE_TYPE_MAP[record.type ?? 'system'];
|
||||
return <Tag color={item?.color}>{item?.text}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '接收对象',
|
||||
dataIndex: 'user_id',
|
||||
valueType: 'digit',
|
||||
hideInTable: false,
|
||||
hideInSearch: true,
|
||||
fieldProps: {
|
||||
min: 0,
|
||||
precision: 0,
|
||||
placeholder: '留空或 0 = 全员广播',
|
||||
},
|
||||
align: 'center',
|
||||
render: (_, record) =>
|
||||
record.user_id === 0 ? (
|
||||
<Tag color="gold">全员广播</Tag>
|
||||
) : (
|
||||
<Tag>{`用户 #${record.user_id}`}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'content',
|
||||
valueType: 'textarea',
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
fieldProps: { rows: 3 },
|
||||
},
|
||||
{
|
||||
title: '阅读状态',
|
||||
dataIndex: 'is_read',
|
||||
valueType: 'select',
|
||||
hideInForm: true,
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ value: 0, label: '未读' },
|
||||
{ value: 1, label: '已读' },
|
||||
],
|
||||
},
|
||||
render: (_, record) => {
|
||||
const item = NOTICE_READ_MAP[record.is_read ?? 0];
|
||||
return <Tag color={item?.color}>{item?.text}</Tag>;
|
||||
},
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
hideInForm: true,
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps: XinTableProps<INotice> = {
|
||||
api: '/customer/notice',
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
accessName: 'customer.notice',
|
||||
// 通知只有新增与删除，无编辑
|
||||
editShow: () => false,
|
||||
formProps: {
|
||||
grid: true,
|
||||
colProps: { span: 12 },
|
||||
layout: 'vertical',
|
||||
},
|
||||
modalProps: { width: 640 },
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<Title level={3}>通知管理</Title>
|
||||
<Text type="secondary">
|
||||
向小程序用户发送消息；接收对象留空或填 0 为全员广播，价格调整通知由批量调价自动生成。
|
||||
</Text>
|
||||
</div>
|
||||
<XinTable<INotice> {...tableProps} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoticePage;
|
||||
@@ -0,0 +1,140 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Tag, Typography } from 'antd';
|
||||
import XinTable from '@/components/XinTable';
|
||||
import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings.ts';
|
||||
import type IStore from '@/domain/iStore.ts';
|
||||
import { STORE_STATUS_MAP } from '@/domain/iStore.ts';
|
||||
import type ICustomerLevel from '@/domain/iCustomerLevel.ts';
|
||||
import { getLevelOptions } from '@/api/customer/level.ts';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
/**
|
||||
* 门店管理
|
||||
*/
|
||||
const StorePage: React.FC = () => {
|
||||
const [levels, setLevels] = useState<ICustomerLevel[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getLevelOptions().then((res) => setLevels(res.data.data ?? []));
|
||||
}, []);
|
||||
|
||||
const levelOptions = levels.map((l) => ({ label: l.name, value: l.id }));
|
||||
|
||||
const columns: XinTableColumn<IStore>[] = [
|
||||
{
|
||||
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: 'code',
|
||||
valueType: 'text',
|
||||
required: true,
|
||||
rules: [{ required: true, message: '请输入门店编码' }],
|
||||
},
|
||||
{
|
||||
title: '客户等级',
|
||||
dataIndex: 'level_id',
|
||||
valueType: 'select',
|
||||
required: true,
|
||||
rules: [{ required: true, message: '请选择客户等级' }],
|
||||
fieldProps: {
|
||||
options: levelOptions,
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
},
|
||||
render: (_, record) =>
|
||||
record.level ? <Tag color="blue">{record.level.name}</Tag> : <Tag>未设置</Tag>,
|
||||
},
|
||||
{
|
||||
title: '联系人',
|
||||
dataIndex: 'contact',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '回款周期(天)',
|
||||
dataIndex: 'payment_cycle_days',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
initialValue: 0,
|
||||
fieldProps: { min: 0, precision: 0 },
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'radioButton',
|
||||
initialValue: 1,
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ value: 1, label: '正常' },
|
||||
{ value: 0, label: '停用' },
|
||||
],
|
||||
},
|
||||
render: (_, record) => {
|
||||
const item = STORE_STATUS_MAP[record.status ?? 1];
|
||||
return <Tag color={item?.color}>{item?.text}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '门店地址',
|
||||
dataIndex: 'address',
|
||||
valueType: 'textarea',
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
fieldProps: { rows: 2 },
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
valueType: 'textarea',
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
fieldProps: { rows: 2 },
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps: XinTableProps<IStore> = {
|
||||
api: '/customer/store',
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
accessName: 'customer.store',
|
||||
formProps: {
|
||||
grid: true,
|
||||
colProps: { span: 12 },
|
||||
layout: 'vertical',
|
||||
},
|
||||
modalProps: { width: 720 },
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<Title level={3}>门店管理</Title>
|
||||
<Text type="secondary">门店即客户，小程序下单主体；客户等级决定商品价格，回款周期影响对账单应结算日期。</Text>
|
||||
</div>
|
||||
<XinTable<IStore> {...tableProps} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StorePage;
|
||||
@@ -0,0 +1,114 @@
|
||||
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 ISupplier from '@/domain/iSupplier.ts';
|
||||
import { SUPPLIER_STATUS_MAP } from '@/domain/iSupplier.ts';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
/**
|
||||
* 供应商管理
|
||||
*/
|
||||
const SupplierPage: React.FC = () => {
|
||||
const columns: XinTableColumn<ISupplier>[] = [
|
||||
{
|
||||
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: 'contact',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '主营品类',
|
||||
dataIndex: 'main_products',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
render: (_, record) =>
|
||||
record.main_products
|
||||
? record.main_products.split('/').map((item) => (
|
||||
<Tag key={item} color="green">
|
||||
{item}
|
||||
</Tag>
|
||||
))
|
||||
: '-',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'radioButton',
|
||||
initialValue: 1,
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ value: 1, label: '正常' },
|
||||
{ value: 0, label: '停用' },
|
||||
],
|
||||
},
|
||||
render: (_, record) => {
|
||||
const item = SUPPLIER_STATUS_MAP[record.status ?? 1];
|
||||
return <Tag color={item?.color}>{item?.text}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
dataIndex: 'address',
|
||||
valueType: 'textarea',
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
fieldProps: { rows: 2 },
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
valueType: 'textarea',
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
fieldProps: { rows: 2 },
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps: XinTableProps<ISupplier> = {
|
||||
api: '/customer/supplier',
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
accessName: 'customer.supplier',
|
||||
formProps: {
|
||||
grid: true,
|
||||
colProps: { span: 12 },
|
||||
layout: 'vertical',
|
||||
},
|
||||
modalProps: { width: 720 },
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<Title level={3}>供应商管理</Title>
|
||||
<Text type="secondary">采购单接收方，供应商小程序端接收并确认采购单。</Text>
|
||||
</div>
|
||||
<XinTable<ISupplier> {...tableProps} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierPage;
|
||||
Reference in New Issue
Block a user