feat: 内容管理
This commit is contained in:
0
src/pages/prod/list/components/extend-rule.tsx
Normal file
0
src/pages/prod/list/components/extend-rule.tsx
Normal file
151
src/pages/prod/list/components/prod-info.tsx
Normal file
151
src/pages/prod/list/components/prod-info.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import {
|
||||
ProForm,
|
||||
ProFormGroup,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Divider } from 'antd';
|
||||
import React from 'react';
|
||||
import TagEditor from '@/components/TagEditor';
|
||||
import TinymceEditor from '@/components/Tinymce';
|
||||
import UploadImages from '@/components/Upload/UploadImages';
|
||||
import UploadVideo from '@/components/Upload/UploadVideo';
|
||||
import type { Prod } from '@/services/prod/prod-manager';
|
||||
|
||||
interface ProdInfoProps<T> {
|
||||
onRefresh?: (type?: string) => void;
|
||||
data?: T;
|
||||
}
|
||||
|
||||
const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
|
||||
console.log(props, 'ProdInfo');
|
||||
return (
|
||||
<>
|
||||
<ProFormGroup title="一、基础信息">
|
||||
<ProFormText
|
||||
name="prodName"
|
||||
label="商品名字"
|
||||
rules={[{ required: true }]}
|
||||
width="xl"
|
||||
/>
|
||||
<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"
|
||||
required={false}
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<TagEditor
|
||||
placeholder="输入标签名称"
|
||||
maxCount={10}
|
||||
tagProps={{
|
||||
color: 'blue',
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
</ProFormGroup>
|
||||
<ProFormGroup title="二、内容展示">
|
||||
<ProForm.Item
|
||||
style={{ width: '100%' }}
|
||||
name="pic"
|
||||
label="主图"
|
||||
width="xl"
|
||||
extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
|
||||
// rules={[{ required: true }]}
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<UploadImages />
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
style={{ width: '100%' }}
|
||||
name="imgs"
|
||||
label="轮播图"
|
||||
layout="horizontal"
|
||||
width="xl"
|
||||
extra="仅支持.jpg .png 格式，建议图片比例1:1，限7张"
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<UploadImages />
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
style={{ width: '100%' }}
|
||||
name="whiteImg"
|
||||
label="白底图"
|
||||
width="xl"
|
||||
extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<UploadImages />
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
name="video"
|
||||
label="主视频"
|
||||
width="xl"
|
||||
extra="仅支持.MP4 .MOV 格式，建议比例1:1、16:9，限1个"
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<UploadVideo />
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
name="content"
|
||||
label="图文介绍"
|
||||
rules={[{ required: true }]}
|
||||
width="xl"
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<TinymceEditor />
|
||||
</ProForm.Item>
|
||||
</ProFormGroup>
|
||||
<ProFormGroup title="三、营销与传播">
|
||||
<ProFormText
|
||||
name="seoShortName"
|
||||
label="短标题"
|
||||
colProps={{
|
||||
span: 20,
|
||||
}}
|
||||
/>
|
||||
<ProFormText name="seoSearch" label="SEO标题" width={'xl'} />
|
||||
<ProFormTextArea name="keyword" label="商品关键词" width={'xl'} />
|
||||
<Divider />
|
||||
|
||||
<ProForm.Item
|
||||
style={{ width: '100%' }}
|
||||
name="shareImage"
|
||||
label="分享图"
|
||||
width="xl"
|
||||
extra="仅支持.jpg .png 格式，限1张"
|
||||
>
|
||||
<UploadImages />
|
||||
</ProForm.Item>
|
||||
<ProFormTextArea
|
||||
name="shareContent"
|
||||
label="分享话术"
|
||||
placeholder={'请输入分享话术'}
|
||||
width={'xl'}
|
||||
/>
|
||||
</ProFormGroup>
|
||||
<ProFormGroup>
|
||||
<ProFormSelect name="status" label="商品状态" readonly />
|
||||
<ProFormText name="prodId" label="商品ID" readonly />
|
||||
<ProFormText name="createTime" label="创建时间" readonly />
|
||||
<ProFormText name="creator" label="创建人" readonly />
|
||||
<ProFormText name="updateTime" label="更新时间" readonly />
|
||||
<ProFormText name="updater" label="更新人" readonly />
|
||||
<ProFormText name="version" label="版本号" readonly />
|
||||
</ProFormGroup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ProdInfo) as <_T extends Record<string, any>>(
|
||||
props: ProdInfoProps<Prod>,
|
||||
) => React.ReactElement;
|
||||
69
src/pages/prod/list/components/service-rule/index.tsx
Normal file
69
src/pages/prod/list/components/service-rule/index.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { ProForm, ProFormText } from '@ant-design/pro-components';
|
||||
|
||||
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.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>
|
||||
</ProForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceRule;
|
||||
31
src/pages/prod/list/components/sku/index.tsx
Normal file
31
src/pages/prod/list/components/sku/index.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { ProForm } from '@ant-design/pro-components';
|
||||
import React from 'react';
|
||||
import SkuConfig from './sku-confiig';
|
||||
import SkuList from './sku-list';
|
||||
|
||||
const Sku: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<ProForm.Item
|
||||
style={{ width: '100%' }}
|
||||
name="prodPropSaveReqVO"
|
||||
layout="horizontal"
|
||||
width="xl"
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<SkuConfig />
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
style={{ width: '100%' }}
|
||||
name="skuList"
|
||||
layout="horizontal"
|
||||
width="xl"
|
||||
// getValueFromEvent={(e) => e.fileList}
|
||||
>
|
||||
<SkuList />
|
||||
</ProForm.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(Sku);
|
||||
23
src/pages/prod/list/components/sku/sku-confiig.tsx
Normal file
23
src/pages/prod/list/components/sku/sku-confiig.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import DraggableTagList from '@/components/Draggable/DraggableTagList';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const SkuConfig: React.FC<{
|
||||
value?: API.ProdPropSaveReqVO;
|
||||
onChange?: (value: API.ProdPropSaveReqVO) => void;
|
||||
}> = () => {
|
||||
// const { value, onChange } = props;
|
||||
return (
|
||||
<>
|
||||
<Title level={4}>规格设置</Title>
|
||||
<Text type="secondary">
|
||||
你想区分商品的哪些属性？第一次使用？<a>点此查看详情</a>
|
||||
学习。商品创建成功后，规格属性不可增减，如需变更规格逻辑定义，请创建新的商品。
|
||||
</Text>
|
||||
<DraggableTagList />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SkuConfig);
|
||||
22
src/pages/prod/list/components/sku/sku-list.tsx
Normal file
22
src/pages/prod/list/components/sku/sku-list.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import type { SkuConfig } from '@/services/prod/prod-manager';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const SkuList: React.FC<{
|
||||
value?: SkuConfig;
|
||||
onChange?: (value: SkuConfig) => void;
|
||||
}> = (props) => {
|
||||
const { value } = props;
|
||||
console.log('value', value);
|
||||
return (
|
||||
<>
|
||||
<Title level={4}>SKU 列表</Title>
|
||||
<Text type="secondary">
|
||||
请填写SKU价格与可售数量，高级设置可自定义更多内容。
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SkuList);
|
||||
90
src/pages/prod/list/config.tsx
Normal file
90
src/pages/prod/list/config.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import type { ProColumns } from '@ant-design/pro-components';
|
||||
import { Badge, Button, Image, Space, Typography } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import type { Prod } from '@/services/prod/prod-manager';
|
||||
|
||||
const { Text } = Typography;
|
||||
export const baseTenantColumns: ProColumns<Prod>[] = [
|
||||
{
|
||||
title: '商品',
|
||||
dataIndex: 'prodName',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Image width={64} height={64} src={record.pic} />
|
||||
<div>
|
||||
<div>
|
||||
<Text>{record.categoryName}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text type="secondary">ID：{record.categoryName}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text type="secondary">类目：{record.categoryName}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '服务信息',
|
||||
dataIndex: 'categoryId',
|
||||
render: () => (
|
||||
<Space direction="vertical">
|
||||
<div>
|
||||
<Text type="secondary">服务区域：</Text>
|
||||
<Text></Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text type="secondary">服务区域：</Text>
|
||||
<Text></Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text type="secondary">紧急服务：</Text>
|
||||
<Text></Text>
|
||||
</div>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'switch',
|
||||
width: 300,
|
||||
hideInSearch: true,
|
||||
render: () => (
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Badge status="success" text="出售中" />
|
||||
<Badge status="default" text="已置灰" />
|
||||
<Badge status="warning" text="待审核" />
|
||||
<Badge status="default" text="仓库中" />
|
||||
</Space>
|
||||
<Button size="small" type="dashed">
|
||||
状态控制
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '时间信息',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
render: (_, record) => (
|
||||
<Space direction="vertical">
|
||||
<div>
|
||||
<Image></Image> 某某某某有限公司
|
||||
</div>
|
||||
<div>
|
||||
<Text type="secondary">创建时间：</Text>
|
||||
{dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</div>
|
||||
<div>
|
||||
<Text type="secondary">更新时间：</Text>
|
||||
{dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</div>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
84
src/pages/prod/list/detail.tsx
Normal file
84
src/pages/prod/list/detail.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import type { FormInstance } from '@ant-design/pro-components';
|
||||
import { ProCard, ProForm, StepsForm } from '@ant-design/pro-components';
|
||||
import { message } from 'antd';
|
||||
import { useEffect } from 'react';
|
||||
import ProdInfo from '@/pages/prod/list/components/prod-info';
|
||||
import Sku from '@/pages/prod/list/components/sku';
|
||||
import type { Prod, ProdDetail, SkuConfig } from '@/services/prod/prod-manager';
|
||||
|
||||
const waitTime = (time: number = 100) => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, time);
|
||||
});
|
||||
};
|
||||
|
||||
const ProdDetailPage: React.FC<{
|
||||
data?: Prod;
|
||||
formRef?: React.RefObject<FormInstance<any>>;
|
||||
}> = (props) => {
|
||||
const { data, formRef } = props;
|
||||
console.log(data, 'ProdDetailPage');
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
formRef?.current?.setFieldsValue(data);
|
||||
}
|
||||
}, [data]);
|
||||
return (
|
||||
<ProCard>
|
||||
{data?.prodId ? (
|
||||
<ProForm
|
||||
formRef={formRef}
|
||||
layout="horizontal"
|
||||
grid={true}
|
||||
submitter={false}
|
||||
>
|
||||
<ProdInfo />
|
||||
</ProForm>
|
||||
) : (
|
||||
<StepsForm<ProdDetail>
|
||||
current={0}
|
||||
formRef={formRef}
|
||||
submitter={false}
|
||||
onFinish={async () => {
|
||||
await waitTime(1000);
|
||||
message.success('提交成功');
|
||||
}}
|
||||
formProps={{
|
||||
validateMessages: {
|
||||
required: '此项为必填项',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<StepsForm.StepForm<ProdDetail>
|
||||
grid={true}
|
||||
layout="horizontal"
|
||||
name="info"
|
||||
title="填写商品信息"
|
||||
onFinish={async () => {
|
||||
try {
|
||||
await formRef?.current?.validateFields();
|
||||
console.log(formRef?.current?.getFieldsValue());
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
message.error(error.msg);
|
||||
}
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<ProdInfo data={data} />
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm<SkuConfig> name="sku" title="设置商品规格">
|
||||
<Sku />
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm<ProdDetail> name="prod" title="发布商品">
|
||||
提交
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
)}
|
||||
</ProCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProdDetailPage;
|
||||
@@ -1,5 +1,250 @@
|
||||
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import type { MenuProps, TabsProps } from 'antd';
|
||||
import { Button, Dropdown, Space, Tabs } from 'antd';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import ProdDetail from '@/pages/prod/list/detail';
|
||||
import {
|
||||
createProd,
|
||||
getProdDetail,
|
||||
getProdPage,
|
||||
type Prod,
|
||||
type ProdReq,
|
||||
updateProd,
|
||||
} from '@/services/prod/prod-manager';
|
||||
import { baseTenantColumns } from './config';
|
||||
|
||||
const ProdList = () => {
|
||||
return <div>ProdList</div>;
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||
const [status, setStatus] = useState<number>();
|
||||
const detailRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
// const editRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [id, setId] = useState<number>(0);
|
||||
const onChange = useCallback(
|
||||
(key: string) => {
|
||||
setStatus(Number(key));
|
||||
},
|
||||
[status],
|
||||
);
|
||||
|
||||
const onFetch = async (params: ProdReq) => {
|
||||
const data = await getProdPage({
|
||||
...params,
|
||||
status: status ? status : undefined,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
detailRef.current?.open({});
|
||||
};
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const handleEdit = async (row: Prod) => {
|
||||
setType('update');
|
||||
const res = await getProdDetail({ id: row.prodId as number });
|
||||
setId(row.prodId as number);
|
||||
detailRef.current?.open(res);
|
||||
};
|
||||
// 商品更新
|
||||
// const _handleEditSubmit = async (values: Prod) => {
|
||||
// await updateProd(values);
|
||||
// tableRef.current?.reload();
|
||||
// message.success("编辑成功");
|
||||
// return true;
|
||||
// };
|
||||
const handleSubmit = useCallback(
|
||||
async (values: Prod) => {
|
||||
if (type === 'create') {
|
||||
await createProd(values);
|
||||
} else {
|
||||
await updateProd({
|
||||
...values,
|
||||
categoryId: id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
|
||||
[id, type],
|
||||
);
|
||||
|
||||
// const renderDetailFooter = () => {
|
||||
// if (type === "update") {
|
||||
// return (
|
||||
// <Space>
|
||||
// <Button onClick={() => detailRef.current?.close()}>取消</Button>
|
||||
// <Button type="primary" onClick={handleEditSubmit}>
|
||||
// 确定
|
||||
// </Button>
|
||||
// </Space>
|
||||
// );
|
||||
// } else {
|
||||
// return (
|
||||
// <Button type="primary" onClick={() => detailRef.current?.close()}>
|
||||
// 确定
|
||||
// </Button>
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
const itemsMenu = (row: Prod): MenuProps['items'] => [
|
||||
{
|
||||
key: 'edit',
|
||||
label: (
|
||||
<Button type="link" onClick={() => handleEdit(row)}>
|
||||
商品编辑
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'sku',
|
||||
label: <Button type="link">SKU管理</Button>,
|
||||
},
|
||||
{
|
||||
key: 'rules-service',
|
||||
label: <Button type="link">服务规则编辑</Button>,
|
||||
},
|
||||
{
|
||||
key: 'extend-service',
|
||||
label: <Button type="link">扩展服务管理</Button>,
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: <Button type="link">状态控制</Button>,
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: (
|
||||
<Button color="danger" variant="link">
|
||||
删除商品
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
const actionColumns: ProColumns<Prod> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
|
||||
width: 200,
|
||||
render: (_text: React.ReactNode, record: Prod, _: number) => [
|
||||
<Space style={{ width: '100%' }} wrap size={0} key={record.prodId}>
|
||||
<Space.Compact direction="vertical" block key="1">
|
||||
<Button type="link" onClick={() => handleEdit(record)}>
|
||||
商品编辑
|
||||
</Button>
|
||||
<Button type="link">SKU管理</Button>
|
||||
</Space.Compact>
|
||||
<Space.Compact direction="vertical" block key="2">
|
||||
<Button type="link">服务规则</Button>
|
||||
<Button type="link">扩展服务</Button>
|
||||
</Space.Compact>
|
||||
<Space.Compact direction="vertical" block key="3">
|
||||
<Dropdown menu={{ items: itemsMenu(record) }} placement="bottomLeft">
|
||||
<Button type="link">
|
||||
<EllipsisOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Space.Compact>
|
||||
</Space>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
const renderChildren = () => {
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<Prod>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="短信渠道"
|
||||
showIndex={false}
|
||||
rowKey="prodId"
|
||||
showSelection={false}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={detailRef}
|
||||
onSubmit={handleSubmit}
|
||||
// footer={renderDetailFooter()}
|
||||
title={formStatusType[type]}
|
||||
width={'80vw'}
|
||||
bodyStyle={{
|
||||
background: '#f5f5f5',
|
||||
paddingTop: 8,
|
||||
}}
|
||||
>
|
||||
<ProdDetail />
|
||||
</ConfigurableDrawerForm>
|
||||
{/* <ConfigurableDrawerForm
|
||||
ref={editRef}
|
||||
onSubmit={handleEditSubmit}
|
||||
footer={renderDetailFooter()}
|
||||
width={"80vw"}
|
||||
bodyStyle={{
|
||||
background: "#f5f5f5",
|
||||
paddingTop: 8,
|
||||
}}
|
||||
>
|
||||
<ProdDetail />
|
||||
</ConfigurableDrawerForm> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: '',
|
||||
label: '全部商品',
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: '出售中的商品',
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '0',
|
||||
label: '仓库中的商品',
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '待审核的商品',
|
||||
children: renderChildren(),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Tabs
|
||||
defaultActiveKey={status as unknown as string}
|
||||
items={items}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProdList;
|
||||
|
||||
Reference in New Issue
Block a user