Skip to content

A
admin
提交 24da3ab0 作者: 龚洪江
操作

功能：商城改版

上级 807c35cb
正在显示 包含 295 行增加 和 23 行删除
src/components/EditableCell/index.tsx
import { Form, InputNumber, Input, Select } from 'antd';
import { Form, InputNumber, Input, Select, Radio } from 'antd';
import React from 'react';
import { Uploader } from '~/components/uploader';
import { UploadOutlined } from '@ant-design/icons';
......@@ -8,7 +8,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
inputType: 'number' | 'text' | 'select' | 'uploader';
inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio';
record: any;
index: number;
children: React.ReactNode;
......@@ -16,6 +16,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
const EditableCell: React.FC<
EditableCellProps & {
selectOption?: { name: string; id: number }[];
radioOption?: { name: string; id: number }[];
uploadSuccess?: (record: any, result: any) => void;
rules?: any;
}
......@@ -27,6 +28,7 @@ const EditableCell: React.FC<
record,
index,
selectOption,
radioOption,
uploadSuccess,
children,
rules,
......@@ -58,6 +60,16 @@ const EditableCell: React.FC<
<UploadOutlined />
</Uploader>
);
case 'radio':
return (
<Radio.Group>
{radioOption?.map((v) => (
<Radio value={v.id} key={v.id}>
{v.name}
</Radio>
))}
</Radio.Group>
);
default:
return <Input placeholder={`请输入${title}`} />;
}
......
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.tsx 0 → 100644
import { Button, Cascader, Form, Input, Radio, Select } from 'antd';
import { Uploader } from '~/components/uploader';
import { UploadOutlined } from '@ant-design/icons';
const BaseInfo = () => {
const [baseInfoForm] = Form.useForm();
return (
<div className='base-info'>
<Form labelCol={{ span: 1 }} wrapperCol={{ span: 8 }} form={baseInfoForm}>
<Form.Item label='商品名称'>
<Input placeholder='请输入商品名称' />
</Form.Item>
<Form.Item label='商品描述'>
<Input.TextArea rows={4} placeholder='请输入商品描述' />
</Form.Item>
<Form.Item label='商品主图'>
<Uploader fileUpload listType='picture-card'>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='商品副图'>
<Uploader fileUpload listType='picture-card'>
<UploadOutlined />
</Uploader>
</Form.Item>{' '}
<Form.Item label='商品视频'>
<Uploader fileUpload listType='text'>
<Button icon={<UploadOutlined />}>上传视频</Button>
</Uploader>
</Form.Item>
<Form.Item label='商品分类'>
<Cascader placeholder='请选择商品分类' />
</Form.Item>
<Form.Item label='商品状态'>
<Select placeholder='请选择商品状态'>
<Select.Option>上架</Select.Option>
<Select.Option>下架</Select.Option>
</Select>
</Form.Item>
<Form.Item label='商品标签'>
<Radio.Group>
<Radio value={1}>显示</Radio>
<Radio value={0}>不显示</Radio>
</Radio.Group>
</Form.Item>
</Form>
</div>
);
};
export default BaseInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/introduceInfo/index.tsx 0 → 100644
import RichText from '~/components/richText';
const IntroduceInfo = () => {
return (
<div className='introduce-info'>
<RichText richTextContent='' height={400} />
</div>
);
};
export default IntroduceInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuAddOrEditModal/index.tsx 0 → 100644
import { Button, Form, Input, Modal, ModalProps, Radio, Select, Table } from 'antd';
import { FC, useState } from 'react';
import EditableCell from '~/components/EditableCell';
import { PlusOutlined } from '@ant-design/icons';
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
interface selfProps {
onCancel: () => void;
}
const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
const [tableData] = useState<any>([{ id: 1 }]);
const defaultColumns: (ColumnTypes[number] & {
editable?: boolean;
dataIndex?: string;
inputType?: string;
radioOption?: { name: string; id: number }[];
})[] = [
{
title: '图片',
align: 'center',
editable: true,
dataIndex: '',
inputType: 'uploader',
},
{
title: '选项名称',
align: 'center',
editable: true,
dataIndex: '',
},
{
title: '料号',
align: 'center',
editable: true,
dataIndex: '',
},
{
title: '销售价',
align: 'center',
editable: true,
dataIndex: '',
},
{
title: '渠道价',
editable: true,
align: 'center',
dataIndex: '',
},
{
title: '库存',
editable: true,
align: 'center',
dataIndex: '',
},
{
title: '是否显示',
editable: true,
align: 'center',
dataIndex: '',
inputType: 'radio',
width: '20%',
radioOption: [
{ id: 1, name: '显示' },
{ id: 0, name: '不显示' },
],
},
{
title: '操作',
align: 'center',
width: '10%',
render: () => (
<>
<Button type='primary' icon={<PlusOutlined />}></Button>
</>
),
},
];
const columns = defaultColumns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: any) => ({
record,
dataIndex: col.dataIndex,
title: col.title,
editing: col.editable,
radioOption: col.radioOption,
inputType: col.inputType,
}),
};
});
const handleCancel = () => {
onCancel();
};
return (
<Modal open={open} title='添加规格' width={1000} onCancel={handleCancel}>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
<Form.Item label='规格名称'>
<Input placeholder='请输入规格名称' />
</Form.Item>
<Form.Item label='规格值'>
<Form component={false}>
<Table
rowKey='id'
columns={columns as ColumnTypes}
components={{
body: {
cell: EditableCell,
},
}}
bordered
dataSource={tableData}
></Table>
</Form>
</Form.Item>
<Form.Item label='选择方式'>
<Radio.Group>
<Radio>单选</Radio>
<Radio>多选</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='是否必选'>
<Radio.Group>
<Radio>非必选</Radio>
<Radio>必选</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='规格单位'>
<Select>
<Select.Option value={0}>件</Select.Option>
</Select>
</Form.Item>
</Form>
</Modal>
);
};
export default SkuAddOrEditModal;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/index.tsx 0 → 100644
import { Button, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import { FC } from 'react';
interface selfProps {
addOrEditSkuClick: () => void;
}
const SkuInfo: FC<selfProps> = ({ addOrEditSkuClick }) => {
const TableColumns: ColumnsType<any> = [
{
title: '序号',
align: 'center',
},
{
title: '规格名称',
align: 'center',
},
{
title: '选择方式',
align: 'center',
},
{
title: '是否必选',
align: 'center',
},
{
title: '规格单位',
align: 'center',
},
{
title: '操作',
align: 'center',
},
];
return (
<div className='sku-info'>
<div className='sku-info-operate' style={{ margin: ' 20px 0 ' }}>
<Button
type='primary'
icon={<PlusOutlined></PlusOutlined>}
onClick={() => addOrEditSkuClick()}
>
添加规格
</Button>
</div>
<Table bordered columns={TableColumns} />
</div>
);
};
export default SkuInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.scss
.goods-info {
&-operate {
margin-top: 50px;
display: flex;
justify-content: center;
button {
width: 100px;
height: 40px;
&:first-child {
margin-right: 50px;
.goods-operate-wrap{
position: relative;
.next-step{
margin: 20px 0 0 0px;
text-align: center;
button{
&:first-child{
margin-right: 20px;
}
width: 100px;
}
}
.back-btn{
position: absolute;
right: 0;
top: 0;
}
}
src/router/router.tsx
......@@ -467,16 +467,6 @@ export const routerList: Array<RouteObjectType> = [
},
children: [
{
path: '/mallManage/courseManage',
element: withLoadingComponent(<CourseManageView />),
errorElement: <ErrorPage />,
meta: {
id: 1010,
icon: <BookOutlined />,
title: '课程管理',
},
},
{
path: '/mallManage/serviceList',
element: withLoadingComponent(<ServiceListView />),
errorElement: <ErrorPage />,
......@@ -903,7 +893,7 @@ export const routerList: Array<RouteObjectType> = [
meta: {
id: 1600,
icon: <BankOutlined />,
title: '飞手培训',
title: '执照培训',
},
children: [
{
......@@ -938,6 +928,16 @@ export const routerList: Array<RouteObjectType> = [
hidden: true,
},
},
{
path: '/pilotTraining/courseManage',
element: withLoadingComponent(<CourseManageView />),
errorElement: <ErrorPage />,
meta: {
id: 1010,
icon: <BookOutlined />,
title: '课程管理',
},
},
],
},
{
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论