tashow/tashow-manager
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new page

Browse Source
This commit is contained in:
wuxichen
2026-01-21 15:07:11 +08:00
parent 607b292f36
commit 502c236b0d
31 changed files with 2730 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/pages/prod/list/components/prod-info.tsx
View File

@@ -27,20 +27,60 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
name="prodName"
label="商品名字"
rules={[{ required: true }]}
width="xl"
colProps={{
span: 24,
}}
/>
<ProFormText
name="abbreviation"
label="商品简称"
colProps={{
span: 24,
}}
/>
<ProFormText
name="brief"
label="商品概述"
colProps={{
span: 24,
}}
/>
<ProFormText
name="prodNumber"
label="商品编码"
colProps={{
span: 24,
}}
/>
<ProFormText
name="brand"
label="品牌"
colProps={{
span: 24,
}}
/>
<ProFormText
name="shopId"
label="商品所有权"
colProps={{
span: 24,
}}
/>
<ProFormText
name="categoryName"
label="关联类目"
colProps={{
span: 24,
}}
/>
<ProFormText name="abbreviation" label="商品简称" width="xl" />
<ProFormText name="brief" label="商品概述" width="xl" />
<ProFormText name="prodNumber" label="商品编码" width="xl" />
<ProFormText name="brand" label="品牌" width="xl" />
<ProFormText name="shopId" label="商品所有权" width="xl" />
<ProFormText name="categoryName" label="关联类目" width="xl" />
<ProForm.Item
name="tag"
label="商品标签"
tooltip="设置卖点标签，单标签限xx字符，最多x个标签"
layout="horizontal"
width="xl"
colProps={{
span: 24,
}}
required={false}
// getValueFromEvent={(e) => e.fileList}
>
@@ -58,7 +98,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
style={{ width: '100%' }}
name="pic"
label="主图"
width="xl"
colProps={{
span: 24,
}}
extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
// rules={[{ required: true }]}
// getValueFromEvent={(e) => e.fileList}
@@ -70,7 +112,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
name="imgs"
label="轮播图"
layout="horizontal"
width="xl"
colProps={{
span: 24,
}}
extra="仅支持.jpg .png 格式，建议图片比例1:1，限7张"
// getValueFromEvent={(e) => e.fileList}
>
@@ -80,16 +124,21 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
style={{ width: '100%' }}
name="whiteImg"
label="白底图"
width="xl"
colProps={{
span: 24,
}}
extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
// getValueFromEvent={(e) => e.fileList}
>
<UploadImages />
</ProForm.Item>
<ProForm.Item
style={{ width: '100%' }}
name="video"
label="主视频"
width="xl"
colProps={{
span: 24,
}}
extra="仅支持.MP4 .MOV 格式，建议比例1:1、16:9，限1个"
// getValueFromEvent={(e) => e.fileList}
>
@@ -99,7 +148,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
name="content"
label="图文介绍"
rules={[{ required: true }]}
width="xl"
colProps={{
span: 24,
}}
// getValueFromEvent={(e) => e.fileList}
>
<TinymceEditor />
@@ -110,7 +161,7 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
name="seoShortName"
label="短标题"
colProps={{
span: 20,
span: 24,
}}
/>
<ProFormText name="seoSearch" label="SEO标题" width={'xl'} />
@@ -118,7 +169,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
<Divider />
<ProForm.Item
style={{ width: '100%' }}
colProps={{
span: 24,
}}
name="shareImage"
label="分享图"
width="xl"
@@ -130,7 +183,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
name="shareContent"
label="分享话术"
placeholder={'请输入分享话术'}
width={'xl'}
colProps={{
span: 24,
}}
/>
</ProFormGroup>
<ProFormGroup>

136
src/pages/prod/list/components/service-rule/index.tsx
View File

@@ -1,67 +1,85 @@
import { ProForm, ProFormText } from '@ant-design/pro-components';
import { Anchor, Col, Form, Row } from 'antd';
import ProdReservationConfig from './prodReservationConfig';
import ProdServiceAreasInfo from './prodServiceAreasInfo';
import ProdWeightConfig from './prodWeightConfig';
const ServiceRule: React.FC = () => {
return (
<ProForm<{
name: string;
company: string;
}>
grid
onFinish={async (values) => {
// await waitTime(2000);
console.log(values);
// message.success('提交成功');
}}
initialValues={{
name: '蚂蚁设计有限公司',
useMode: 'chapter',
}}
<ProForm
onFinish={async (value) => console.log(value)}
layout="horizontal"
style={{ width: '100%' }}
labelCol={{ span: '100px' }}
>
<ProForm.Group>
<ProFormText
width="md"
name="name"
label="签约客户名称"
tooltip="最长为 24 位"
placeholder="请输入名称"
/>
<ProFormText
width="md"
name="company"
label="我方公司名称"
placeholder="请输入名称"
/>
</ProForm.Group>
<ProFormText width="sm" name="id" label="主合同编号" />
<ProForm.Item
label="数组数据"
name="dataSource"
// initialValue={defaultData}
trigger="onValuesChange"
>
{/* <EditableProTable<DataSourceType>
rowKey="id"
toolBarRender={false}
columns={columns}
recordCreatorProps={{
newRecordType: 'dataSource',
position: 'top',
record: () => ({
id: Date.now(),
addonBefore: 'ccccccc',
decs: 'testdesc',
}),
}}
editable={{
type: 'multiple',
editableKeys,
onChange: setEditableRowKeys,
actionRender: (row, _, dom) => {
return [dom.delete];
},
}} */}
{/* /> */}
</ProForm.Item>
<Row gutter={24}>
<Col span={18}>
<div id="prodServiceAreasInfo">
<ProdServiceAreasInfo />
</div>
<div id="prodReservationConfig">
<ProForm.Group>
<ProdReservationConfig />
</ProForm.Group>
</div>
<div id="prodEmergencyInfoVO">
<ProForm.Group></ProForm.Group>
</div>
<div id="productOrderLimitVO">
<ProForm.Group title="周期接单上限"></ProForm.Group>
</div>
<div id="prodAdditionalFeeDatesList">
<ProForm.Group title="特殊时段规则"></ProForm.Group>
</div>
<div id="prodAdditionalFeePeriodsList">
<ProForm.Group title="特殊日期规则"></ProForm.Group>
</div>
<div id="prodWeightConfig">
<ProdWeightConfig />
</div>
</Col>
<Col span="400px">
<Anchor
items={[
{
key: 'prodServiceAreasInfo',
href: '#prodServiceAreasInfo',
title: '可服务区域',
},
{
key: 'prodReservationConfig',
href: '#prodReservationConfig',
title: '可预约时段',
},
{
key: 'prodEmergencyInfoVO',
href: '#prodEmergencyInfoVO',
title: '紧急响应服务',
},
{
key: 'productOrderLimitVO',
href: '#productOrderLimitVO',
title: '周期接单上限',
},
{
key: 'prodAdditionalFeeDatesList',
href: '#prodAdditionalFeeDatesList',
title: '特殊时段规则',
},
{
key: 'prodAdditionalFeePeriodsList',
href: '#prodAdditionalFeePeriodsList',
title: '特殊日期规则',
},
{
key: 'prodWeightConfig',
href: '#prodWeightConfig',
title: '体重/体型选项',
},
]}
/>
</Col>
</Row>
</ProForm>
);
};

139
src/pages/prod/list/components/service-rule/prodReservationConfig.tsx Normal file
View File

@@ -0,0 +1,139 @@
import {
ProFormCheckbox,
ProFormDigit,
ProFormRadio,
ProFormSelect,
ProFormSwitch,
ProFormText,
} from '@ant-design/pro-components';
import { Divider, Space, Typography } from 'antd';
import React from 'react';
import type { ProdReservationInfoVO } from '@/services/prod/prod-manager/rule';
const { Text, Title } = Typography;
type ValueConfig = {
reservationSwitch?: number;
prodReservationConfig?: ProdReservationInfoVO;
};
interface ProdReservationConfigProps {
value?: ValueConfig;
onChange?: (value?: ValueConfig) => void;
}
const ProdReservationConfig: React.FC<ProdReservationConfigProps> = (props) => {
return (
<>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: 12,
}}
>
<div>
<Title level={4}>服务区域配置</Title>
<Text type="secondary">
默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
</Text>
</div>
<ProFormSwitch
name="reservationSwitch"
label="应用配置"
labelCol={{ span: 13 }}
fieldProps={{
onChange: (checked) => {
props.onChange?.({
reservationSwitch: checked ? 1 : 0,
});
},
checkedChildren: '开启',
unCheckedChildren: '关闭',
}}
/>
</div>
<Divider />
<ProFormDigit
name="advanceHours"
label="预约时间约定"
wrapperCol={{ span: 11 }}
rules={[
{
required: true,
message: '请输入提前预约时间',
},
]}
fieldProps={{
placeholder: '请输入提前预约时间',
min: 0,
max: 24,
addonBefore: '提前',
addonAfter: '小时',
}}
/>
<ProFormRadio.Group
name="reservationDateRange"
label="预约日期范围"
options={[
{ label: '7天', value: 7 },
{ label: '10天', value: 10 },
{ label: '15天', value: 15 },
{ label: '30天', value: 30 },
]}
rules={[
{
required: true,
message: '请选择预约日期范围',
},
]}
/>
<ProFormRadio.Group
name="allowChange"
label="更改预约时间"
options={[
{ label: '允许更改预约时间', value: 1 },
{ label: '禁止更改预约时间', value: 0 },
]}
rules={[
{
required: true,
message: '请选择更改预约时间',
},
]}
/>
<ProFormRadio.Group
name="changeTimeRule"
label="时间更改规则"
options={[
{ label: '服务开始前 1小时 可更改预约时间', value: 1 },
{ label: '服务开始前 2小时 可更改预约时间', value: 2 },
{ label: '服务开始前 3小时 可更改预约时间', value: 3 },
]}
rules={[
{
required: true,
message: '请选择时间更改规则',
},
]}
/>
<ProFormRadio.Group
name="maxChangeTimes"
label="更改次数规则"
options={[
{ label: '允许修改 1 次', value: 1 },
{ label: '允许修改 2 次', value: 2 },
{ label: '允许修改 3 次', value: 3 },
]}
rules={[
{
required: true,
message: '请选择时间更改规则',
},
]}
/>
</>
);
};
export default React.memo(ProdReservationConfig);

115
src/pages/prod/list/components/service-rule/prodServiceAreasInfo.tsx Normal file
View File

@@ -0,0 +1,115 @@
import {
ProFormCheckbox,
ProFormDigit,
ProFormRadio,
ProFormSelect,
ProFormSwitch,
ProFormText,
} from '@ant-design/pro-components';
import { Divider, Space, Typography } from 'antd';
import React from 'react';
import type { ProdServiceAreasInfoVO } from '@/services/prod/prod-manager/rule';
const { Text, Title } = Typography;
type ValueConfig = {
regionSwitch?: number;
prodServiceAreasInfo?: ProdServiceAreasInfoVO;
};
interface ProdServiceAreasInfoProps {
value?: ValueConfig;
onChange?: (value?: ValueConfig) => void;
}
const ProdServiceAreasInfo: React.FC<ProdServiceAreasInfoProps> = (props) => {
return (
<>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: 12,
}}
>
<div>
<Title level={4}>服务区域配置</Title>
<Text type="secondary">
默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
</Text>
</div>
<ProFormSwitch
name="regionSwitch"
label="应用配置"
labelCol={{ span: 13 }}
fieldProps={{
onChange: (checked) => {
props.onChange?.({
regionSwitch: checked ? 1 : 0,
});
},
checkedChildren: '开启',
unCheckedChildren: '关闭',
}}
/>
</div>
<Divider />
<ProFormSelect
name="areaNameList"
label="服务区域"
options={[
'鼓楼区',
'台江区',
'晋安区',
'马尾区',
'闽侯县',
'福清市（县级市）',
'长乐区',
'罗源县',
'永泰县',
'平潭县',
]}
fieldProps={{
mode: 'multiple',
}}
placeholder="请选择服务区域"
rules={[
{
required: true,
message: '请选择服务区域',
type: 'array',
},
]}
/>
<ProFormRadio.Group
name="ruleType"
label="超区规则"
options={[
{ label: '拒单', value: 0 },
{ label: '接单-收超区费', value: 2 },
{ label: '接单-收超区费-收超区费', value: 3 },
]}
rules={[
{
required: true,
message: '请选择服务区域',
},
]}
/>
<ProFormDigit
rules={[
{
required: true,
message: '请设置费用',
},
]}
label="设置费用"
name="fee"
/>
</>
);
};
export default React.memo(ProdServiceAreasInfo);

278
src/pages/prod/list/components/service-rule/prodWeightConfig.tsx Normal file
View File

@@ -0,0 +1,278 @@
import {
DragSortTable,
EditableProTable,
type ProColumns,
ProFormCheckbox,
ProFormDigit,
ProFormRadio,
ProFormSelect,
ProFormSwitch,
ProFormText,
} from '@ant-design/pro-components';
import { Divider, Space, Typography } from 'antd';
import React from 'react';
import type {
ProdWeightRangePricesDO,
ProdWeightRangePricesSaveInfoVO,
} from '@/services/prod/prod-manager/rule';
const { Text, Title } = Typography;
type ValueConfig = {
weightSwitch?: number;
prodWeightConfig?: ProdWeightRangePricesSaveInfoVO;
};
interface ProdWeightConfigProps {
value?: ValueConfig;
onChange?: (value?: ValueConfig) => void;
}
const columns = [
{
title: '体型&体重',
dataIndex: 'name',
key: 'name',
width: '20%',
render: (text: string, record: any) => {
return <ProFormText name={record.key} label={text} />;
},
},
{
title: '价格',
dataIndex: 'price',
key: 'price',
width: '20%',
},
{
title: '操作',
dataIndex: 'price',
key: 'price',
width: '20%',
},
];
const prodWeightConfig: React.FC<ProdWeightConfigProps> = (props) => {
const { value } = props;
const columns: ProColumns<ProdWeightRangePricesDO>[] = [
{
title: '体型&体重 *',
dataIndex: 'weightRange',
width: '30%',
formItemProps: {
rules: [
{
required: true,
whitespace: true,
message: '此项是必填项',
},
],
},
},
{
title: '价格 *',
dataIndex: 'price',
width: '30%',
formItemProps: {
rules: [
{
required: true,
whitespace: true,
message: '此项是必填项',
},
],
},
},
{
title: '操作',
valueType: 'option',
width: 250,
render: () => {
return null;
},
},
];
return (
<>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: 12,
}}
>
<div>
<Title level={4}>服务区域配置</Title>
<Text type="secondary">
默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
</Text>
</div>
<ProFormSwitch
name="weightSwitch"
label="应用配置"
labelCol={{ span: 13 }}
fieldProps={{
onChange: (checked) => {
props.onChange?.({
weightSwitch: checked ? 1 : 0,
});
},
checkedChildren: '开启',
unCheckedChildren: '关闭',
}}
/>
</div>
<Divider />
<ProFormRadio.Group
name="isWeightCharge"
label="是否收费"
options={[
{
label: '是',
value: 0,
},
{
label: '否',
value: 1,
},
]}
rules={[
{
required: true,
message: '请选择是否收费',
},
]}
/>
{/* <EditableProTable<ProdWeightRangePricesDO>
rowKey="id"
headerTitle="可拖拽编辑表格"
maxLength={10}
recordCreatorProps={{
position: 'bottom',
record: () => ({ id: Date.now().toString(), weightRange: '', price: 0, }),
}}
columns={columns}
value={dataSource}
onChange={setDataSource}
editable={{
type: 'multiple',
editableKeys,
onSave: async (rowKey, data) => {
console.log('保存数据:', data);
},
onChange: setEditableRowKeys,
}}
// 拖拽排序配置
dragSortKey="sort"
onDragSortEnd={(newDataSource) => {
console.log('排序后:', newDataSource);
setDataSource(newDataSource as DataType[]);
}}
/> */}
</>
);
};
export default React.memo(prodWeightConfig);
// import { EditableProTable } from '@ant-design/pro-components';
// import type { ProColumns } from '@ant-design/pro-components';
// import { useState } from 'react';
// import { MenuOutlined } from '@ant-design/icons';
// interface DataType {
// id: string;
// name: string;
// age: number;
// email: string;
// }
// const DragEditableProTable: React.FC = () => {
// const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
// const [dataSource, setDataSource] = useState<DataType[]>([
// { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
// { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
// { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
// ]);
// const columns: ProColumns<DataType>[] = [
// {
// title: '排序',
// dataIndex: 'sort',
// width: 60,
// render: () => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />,
// },
// {
// title: '姓名',
// dataIndex: 'name',
// formItemProps: {
// rules: [{ required: true, message: '请输入姓名' }],
// },
// },
// {
// title: '年龄',
// dataIndex: 'age',
// valueType: 'digit',
// },
// {
// title: '邮箱',
// dataIndex: 'email',
// valueType: 'text',
// },
// {
// title: '操作',
// valueType: 'option',
// width: 200,
// render: (text, record, _, action) => [
// <a
// key="editable"
// onClick={() => {
// action?.startEditable?.(record.id);
// }}
// >
// 编辑
// </a>,
// <a
// key="delete"
// onClick={() => {
// setDataSource(dataSource.filter((item) => item.id !== record.id));
// }}
// >
// 删除
// </a>,
// ],
// },
// ];
// return (
// <EditableProTable<DataType>
// rowKey="id"
// headerTitle="可拖拽编辑表格"
// maxLength={10}
// recordCreatorProps={{
// position: 'bottom',
// record: () => ({ id: Date.now().toString(), name: '', age: 0, email: '' }),
// }}
// columns={columns}
// value={dataSource}
// onChange={setDataSource}
// editable={{
// type: 'multiple',
// editableKeys,
// onSave: async (rowKey, data) => {
// console.log('保存数据:', data);
// },
// onChange: setEditableRowKeys,
// }}
// // 拖拽排序配置
// dragSortKey="sort"
// onDragSortEnd={(newDataSource) => {
// console.log('排序后:', newDataSource);
// setDataSource(newDataSource as DataType[]);
// }}
// />
// );
// };
// export default DragEditableProTable;