Skip to content

A
admin
提交 e7bede76 作者: 龚洪江
操作

页面：租赁商品、商城商品详情

上级 57150a74
正在显示 包含 943 行增加 和 218 行删除
.eslintrc
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
} }
], ],
"jsx-a11y/click-events-have-key-events": "off", "jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/no-static-element-interactions": "off" "jsx-a11y/no-static-element-interactions": "off",
"react/display-name": "off"
} }
} }
src/components/goods/commonGoodsList/index.tsx deleted 100644 → 0
import SearchBox, { searchColumns } from '~/components/search-box';
import { useState } from 'react';
import { Button, Card, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
DeleteOutlined,
PlusOutlined,
} from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
const GoodsList = () => {
const tabList = [
{
key: '1',
tab: '全部',
},
{
key: '2',
tab: '上架中',
},
{
key: '3',
tab: '仓库中',
},
];
const [activeTabKey, setActiveTabKey] = useState<string>('1');
const [searchColumns] = useState<searchColumns[]>([
{
label: '商品名称',
placeholder: '请输入商品名称',
name: '',
type: 'input',
},
{
label: '所属目录',
placeholder: '请选择所属目录',
name: '',
type: 'select',
options: [],
},
{
label: '创建时间',
placeholder: '请输入选择创建时间',
name: '',
type: 'rangePicker',
},
]);
const tableColumns: ColumnsType<any> = [
{ title: '序号', align: 'center' },
{ title: '图片', align: 'center' },
{ title: '商品名称', align: 'center' },
{ title: '所属目录', align: 'center' },
{ title: '创建时间', align: 'center' },
{ title: '状态', align: 'center' },
{
title: '操作',
align: 'center',
render: () => (
<>
<Button type='link'>编辑</Button>
<Button type='link'>详情</Button>
</>
),
},
];
const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
const onTabChange = (key: string) => {
setActiveTabKey(key);
};
return (
<div className='goods-list'>
<SearchBox
search={searchColumns}
child={
<Button type='primary' icon={<PlusOutlined />}>
新增商品
</Button>
}
/>
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
上架
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
下架
</Button>
<Button danger icon={<DeleteOutlined />}>
删除
</Button>
</div>
<Table columns={tableColumns} bordered dataSource={tableData} />
</Card>
</div>
);
};
export default GoodsList;
src/components/richText/index.tsx 0 → 100644
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { FC, useEffect, useRef } from 'react';
interface selfProps {
richTextHeight: number;
}
const RichText: FC<selfProps> = ({ richTextHeight }) => {
const quillRef = useRef<any>();
const modules = {
toolbar: {
container: [
[{ size: ['small', false, 'large', 'huge'] }], //字体设置
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //标题字号，不能设置单个字大小
['bold', 'italic', 'underline', 'strike'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link', 'image'], // a链接和图片的显示
[{ align: [] }],
[
{
background: [
'rgb( 0, 0, 0)',
'rgb(230, 0, 0)',
'rgb(255, 153, 0)',
'rgb(255, 255, 0)',
'rgb( 0, 138, 0)',
'rgb( 0, 102, 204)',
'rgb(153, 51, 255)',
'rgb(255, 255, 255)',
'rgb(250, 204, 204)',
'rgb(255, 235, 204)',
'rgb(255, 255, 204)',
'rgb(204, 232, 204)',
'rgb(204, 224, 245)',
'rgb(235, 214, 255)',
'rgb(187, 187, 187)',
'rgb(240, 102, 102)',
'rgb(255, 194, 102)',
'rgb(255, 255, 102)',
'rgb(102, 185, 102)',
'rgb(102, 163, 224)',
'rgb(194, 133, 255)',
'rgb(136, 136, 136)',
'rgb(161, 0, 0)',
'rgb(178, 107, 0)',
'rgb(178, 178, 0)',
'rgb( 0, 97, 0)',
'rgb( 0, 71, 178)',
'rgb(107, 36, 178)',
'rgb( 68, 68, 68)',
'rgb( 92, 0, 0)',
'rgb(102, 61, 0)',
'rgb(102, 102, 0)',
'rgb( 0, 55, 0)',
'rgb( 0, 41, 102)',
'rgb( 61, 20, 10)',
],
},
],
[
{
color: [
'rgb( 0, 0, 0)',
'rgb(230, 0, 0)',
'rgb(255, 153, 0)',
'rgb(255, 255, 0)',
'rgb( 0, 138, 0)',
'rgb( 0, 102, 204)',
'rgb(153, 51, 255)',
'rgb(255, 255, 255)',
'rgb(250, 204, 204)',
'rgb(255, 235, 204)',
'rgb(255, 255, 204)',
'rgb(204, 232, 204)',
'rgb(204, 224, 245)',
'rgb(235, 214, 255)',
'rgb(187, 187, 187)',
'rgb(240, 102, 102)',
'rgb(255, 194, 102)',
'rgb(255, 255, 102)',
'rgb(102, 185, 102)',
'rgb(102, 163, 224)',
'rgb(194, 133, 255)',
'rgb(136, 136, 136)',
'rgb(161, 0, 0)',
'rgb(178, 107, 0)',
'rgb(178, 178, 0)',
'rgb( 0, 97, 0)',
'rgb( 0, 71, 178)',
'rgb(107, 36, 178)',
'rgb( 68, 68, 68)',
'rgb( 92, 0, 0)',
'rgb(102, 61, 0)',
'rgb(102, 102, 0)',
'rgb( 0, 55, 0)',
'rgb( 0, 41, 102)',
'rgb( 61, 20, 10)',
],
},
],
['clean'], //清空
['emoji'], //emoji表情，设置了才能显示
['video2'], //我自定义的视频图标，和插件提供的不一样，所以设置为video2
],
// handlers: {
// image: this.imageHandler.bind(this), //点击图片标志会调用的方法
// video2: this.showVideoModal.bind(this),
// },
},
// ImageExtend: {
// loading: true,
// name: 'img',
// action: RES_URL + "connector?isRelativePath=true",
// response: res => FILE_URL + res.info.url
// },
// ImageDrop: true,
// 'emoji-toolbar': true, //是否展示出来
// 'emoji-textarea': false, //我不需要emoji展示在文本框所以设置为false
// 'emoji-shortname': true,
};
useEffect(() => {
quillRef.current.editor.container.style.height = richTextHeight + 'px';
});
return <ReactQuill modules={modules} ref={quillRef} />;
};
export default RichText;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.scss 0 → 100644
.base-info{
&-title{
font-size: 15px;
font-weight: bold;
margin-bottom: 20px;
&::before{
content: "*";
color: red;
}
}
}
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.tsx 0 → 100644
import React, { forwardRef } from 'react';
import { Button, Form, Upload, Input, Radio, Select, Cascader } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import './index.scss';
const BaseInfo: React.FC<any> = forwardRef(() => {
return (
<div className='base-info'>
<div className='base-info-title'>基本信息</div>
<div className='base-info-form'>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 16 }} initialValues={{ shelfStatus: 1 }}>
<Form.Item
name='mainFileList'
label='商品主图'
rules={[{ required: true, message: '请上传商品主图' }]}
>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品副图' name='subFileList'>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品视频'>
<Upload>
<Button icon={<UploadOutlined />}>上传视频</Button>
</Upload>
</Form.Item>
<Form.Item
name='goodsName'
label='商品名称'
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input placeholder='请输入商品名称' maxLength={50} style={{ width: '400px' }} />
</Form.Item>
<Form.Item
name='goodsDesc'
label='商品描述'
rules={[{ required: true, message: '请输入商品描述' }]}
>
<Input.TextArea
placeholder='请输入商品描述'
maxLength={70}
style={{ width: '400px' }}
rows={4}
showCount
/>
</Form.Item>
<Form.Item
name='sortTypeId'
label='所属目录'
rules={[{ required: true, message: '请选择所属目录' }]}
>
<Select placeholder='请选择所属目录' style={{ width: '400px' }}>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
<Form.Item
name='masterTypeId'
label='商品分类'
rules={[{ required: true, message: '请选择商品分类' }]}
>
<Cascader
style={{ width: '400px' }}
fieldNames={{
label: 'goodsMasterType',
value: 'goodsMasterTypeId',
children: 'goodsSlaveTypeDTO',
}}
placeholder='请选择商品分类'
allowClear
/>
</Form.Item>
<Form.Item label='商品标签'>
<Radio.Group>
<Radio value={false}>不加</Radio>
<Radio value>加</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name='tag'
label='标签名称'
rules={[{ required: true, message: '请输入标签名称' }]}
>
<Input placeholder='请输入标签名称' style={{ width: '400px' }} maxLength={5} />
</Form.Item>
<Form.Item
label='商品状态'
name='shelfStatus'
rules={[{ required: true, message: '请选择商品状态' }]}
>
<Select placeholder='请选择商品状态' style={{ width: '400px' }}>
<Select.Option value={1}>上架</Select.Option>
<Select.Option value={0}>下架</Select.Option>
</Select>
</Form.Item>
</Form>
</div>
</div>
);
});
export default BaseInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/goodsIntroduce/index.scss 0 → 100644
.goods-introduce{
&-title{
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content{
margin-left: 50px;
}
}
.ql-container {
height: 400px;
}
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/goodsIntroduce/index.tsx 0 → 100644
import './index.scss';
import RichText from '~/components/richText';
const GoodsIntroduce = () => {
return (
<div className='goods-introduce'>
<div className='goods-introduce-title'>产品介绍图</div>
<div className='goods-introduce-content'>
<RichText richTextHeight={300} />
</div>
</div>
);
};
export default GoodsIntroduce;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/otherInfo/index.scss 0 → 100644
.other-info{
&-title{
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-form{
margin-left: 50px;
}
}
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/otherInfo/index.tsx 0 → 100644
import React, { forwardRef } from 'react';
import { Checkbox, Form, Select, Row, Col } from 'antd';
import './index.scss';
const OtherInfo: React.FC<any> = forwardRef(() => {
return (
<div className='other-info'>
<div className='other-info-title'>其它信息</div>
<div className='other-info-form'>
<Form>
<Form.Item label='搭配服务' name='otherService'>
<Checkbox.Group>
<Checkbox>1</Checkbox>
</Checkbox.Group>
</Form.Item>
<Row>
<Col>
<span>用服务&gt;云享飞：</span>
</Col>
<Col span={8}>
<Form.Item name='shareFlyServiceId'>
<Select
allowClear
placeholder='请选择服务'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<span>&nbsp;&nbsp;&nbsp;&nbsp;我要租&gt;云仓：</span>
</Col>
<Col span={8}>
<Form.Item name='repoId'>
<Select
allowClear
placeholder='请选择商品'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</div>
);
});
export default OtherInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/stockSku/index.scss 0 → 100644
.stock-sku{
&-title{
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content{
margin-left: 50px;
}
&-operate{
margin-bottom: 10px;
}
}
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/stockSku/index.tsx 0 → 100644
import React from 'react';
import { Table, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './index.scss';
const StockSku: React.FC<any> = () => {
return (
<div className='stock-sku'>
<div className='stock-sku-title'>库存规格</div>
<div className='stock-sku-content'>
<div className='stock-sku-operate'>
<Button icon={<PlusOutlined />} type='primary'>
添加规格
</Button>
</div>
<Table size='small' bordered rowKey='id' pagination={false} />
</div>
</div>
);
};
export default StockSku;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.scss 0 → 100644
.goods-info{
&-operate{
margin-top: 50px;
display: flex;
justify-content: center;
button{
width: 100px;
height: 40px;
&:first-child{
margin-right: 50px;
}
}
}
}
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx 0 → 100644
import BaseInfo from './components/baseInfo';
import StockSku from './components/stockSku';
import OtherInfo from './components/otherInfo';
import GoodsIntroduce from './components/goodsIntroduce';
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import './index.scss';
const GoodsAddOrEditOrDetail = () => {
const navigate = useNavigate();
//返回
const backRoute = () => {
navigate(-1);
};
return (
<div className='goods-info'>
<BaseInfo />
<StockSku />
<OtherInfo />
<GoodsIntroduce />
<div className='goods-info-operate'>
<Button type='primary'>保存</Button>
<Button onClick={backRoute}>返回</Button>
</div>
</div>
);
};
export default GoodsAddOrEditOrDetail;
src/pages/mallManage/mallGoods/goodsList/index.tsx
import CommonGoodsList from '~/components/goods/commonGoodsList'; import SearchBox, { searchColumns } from '~/components/search-box';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Card, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
DeleteOutlined,
PlusOutlined,
} from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
const GoodsList = () => { const GoodsList = () => {
const navigate = useNavigate();
const tabList = [
{
key: '1',
tab: '全部',
},
{
key: '2',
tab: '上架中',
},
{
key: '3',
tab: '仓库中',
},
];
const [activeTabKey, setActiveTabKey] = useState<string>('1');
const [searchColumns] = useState<searchColumns[]>([
{
label: '商品名称',
placeholder: '请输入商品名称',
name: '',
type: 'input',
},
{
label: '所属目录',
placeholder: '请选择所属目录',
name: '',
type: 'select',
options: [],
},
{
label: '创建时间',
placeholder: '请输入选择创建时间',
name: '',
type: 'rangePicker',
},
]);
const tableColumns: ColumnsType<any> = [
{ title: '序号', align: 'center' },
{ title: '图片', align: 'center' },
{ title: '商品名称', align: 'center' },
{ title: '所属目录', align: 'center' },
{ title: '创建时间', align: 'center' },
{ title: '状态', align: 'center' },
{
title: '操作',
align: 'center',
render: () => (
<>
<Button type='link'>编辑</Button>
<Button type='link'>详情</Button>
</>
),
},
];
const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
const onTabChange = (key: string) => {
setActiveTabKey(key);
};
//新增商品
const toAddMallGoods = () => {
navigate({ pathname: '/mallManage/mallGoods/add' });
};
return ( return (
<div className='goods-list'> <div className='goods-list'>
<CommonGoodsList /> <SearchBox
search={searchColumns}
child={
<Button type='primary' icon={<PlusOutlined />} onClick={toAddMallGoods}>
新增商品
</Button>
}
/>
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
上架
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
下架
</Button>
<Button danger icon={<DeleteOutlined />}>
删除
</Button>
</div>
<Table columns={tableColumns} bordered dataSource={tableData} />
</Card>
</div> </div>
); );
}; };
......
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/baseInfo/index.scss 0 → 100644
.base-info{
&-title{
font-size: 15px;
font-weight: bold;
margin-bottom: 20px;
&::before{
content: "*";
color: red;
}
}
}
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/baseInfo/index.tsx 0 → 100644
import React, { forwardRef } from 'react';
import { Button, Form, Upload, Input, Radio, Select, Cascader } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import './index.scss';
const BaseInfo: React.FC<any> = forwardRef(() => {
return (
<div className='base-info'>
<div className='base-info-title'>基本信息</div>
<div className='base-info-form'>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 16 }} initialValues={{ shelfStatus: 1 }}>
<Form.Item
name='mainFileList'
label='商品主图'
rules={[{ required: true, message: '请上传商品主图' }]}
>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品副图' name='subFileList'>
<Uploader listType='picture-card'>
<div>上传</div>
</Uploader>
</Form.Item>
<Form.Item label='商品视频'>
<Upload>
<Button icon={<UploadOutlined />}>上传视频</Button>
</Upload>
</Form.Item>
<Form.Item
name='goodsName'
label='商品名称'
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input placeholder='请输入商品名称' maxLength={50} style={{ width: '400px' }} />
</Form.Item>
<Form.Item
name='goodsDesc'
label='商品描述'
rules={[{ required: true, message: '请输入商品描述' }]}
>
<Input.TextArea
placeholder='请输入商品描述'
maxLength={70}
style={{ width: '400px' }}
rows={4}
showCount
/>
</Form.Item>
<Form.Item
name='sortTypeId'
label='所属目录'
rules={[{ required: true, message: '请选择所属目录' }]}
>
<Select placeholder='请选择所属目录' style={{ width: '400px' }}>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
<Form.Item
name='masterTypeId'
label='商品分类'
rules={[{ required: true, message: '请选择商品分类' }]}
>
<Cascader
style={{ width: '400px' }}
fieldNames={{
label: 'goodsMasterType',
value: 'goodsMasterTypeId',
children: 'goodsSlaveTypeDTO',
}}
placeholder='请选择商品分类'
allowClear
/>
</Form.Item>
<Form.Item label='商品标签'>
<Radio.Group>
<Radio value={false}>不加</Radio>
<Radio value>加</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name='tag'
label='标签名称'
rules={[{ required: true, message: '请输入标签名称' }]}
>
<Input placeholder='请输入标签名称' style={{ width: '400px' }} maxLength={5} />
</Form.Item>
<Form.Item
label='商品状态'
name='shelfStatus'
rules={[{ required: true, message: '请选择商品状态' }]}
>
<Select placeholder='请选择商品状态' style={{ width: '400px' }}>
<Select.Option value={1}>上架</Select.Option>
<Select.Option value={0}>下架</Select.Option>
</Select>
</Form.Item>
</Form>
</div>
</div>
);
});
export default BaseInfo;
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/goodsIntroduce/index.scss 0 → 100644
.goods-introduce{
&-title{
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content{
margin-left: 50px;
}
}
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/goodsIntroduce/index.tsx 0 → 100644
import './index.scss';
import RichText from '~/components/richText';
const GoodsIntroduce = () => {
return (
<div className='goods-introduce'>
<div className='goods-introduce-title'>产品介绍图</div>
<div className='goods-introduce-content'>
<RichText richTextHeight={300} />
</div>
</div>
);
};
export default GoodsIntroduce;
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/otherInfo/index.scss 0 → 100644
.other-info{
&-title{
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-form{
margin-left: 50px;
}
}
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/otherInfo/index.tsx 0 → 100644
import React, { forwardRef } from 'react';
import { Checkbox, Form, Select, Row, Col } from 'antd';
import './index.scss';
const OtherInfo: React.FC<any> = forwardRef(() => {
return (
<div className='other-info'>
<div className='other-info-title'>其它信息</div>
<div className='other-info-form'>
<Form>
<Form.Item label='搭配服务' name='otherService'>
<Checkbox.Group>
<Checkbox>1</Checkbox>
</Checkbox.Group>
</Form.Item>
<Row>
<Col>
<span>用服务&gt;云享飞：</span>
</Col>
<Col span={8}>
<Form.Item name='shareFlyServiceId'>
<Select
allowClear
placeholder='请选择服务'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<span>&nbsp;&nbsp;&nbsp;&nbsp;我要租&gt;云仓：</span>
</Col>
<Col span={8}>
<Form.Item name='repoId'>
<Select
allowClear
placeholder='请选择商品'
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string)
.toLowerCase()
.includes(input.toLowerCase())
}
>
<Select.Option>1</Select.Option>
</Select>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</div>
);
});
export default OtherInfo;
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/stockSku/index.scss 0 → 100644
.stock-sku{
&-title{
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content{
margin-left: 50px;
}
&-operate{
margin-bottom: 10px;
}
}
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/components/stockSku/index.tsx 0 → 100644
import React from 'react';
import { Table, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './index.scss';
const StockSku: React.FC<any> = () => {
return (
<div className='stock-sku'>
<div className='stock-sku-title'>库存规格</div>
<div className='stock-sku-content'>
<div className='stock-sku-operate'>
<Button icon={<PlusOutlined />} type='primary'>
添加规格
</Button>
</div>
<Table size='small' bordered rowKey='id' pagination={false} />
</div>
</div>
);
};
export default StockSku;
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/index.scss 0 → 100644
.rent-info{
&-operate{
margin-top: 50px;
display: flex;
justify-content: center;
button{
width: 100px;
height: 40px;
&:first-child{
margin-right: 50px;
}
}
}
}
src/pages/mallManage/rentGoods/rentAddOrEditOrDetail/index.tsx 0 → 100644
import BaseInfo from './components/baseInfo';
import StockSku from './components/stockSku';
import OtherInfo from './components/otherInfo';
import GoodsIntroduce from './components/goodsIntroduce';
import { useNavigate } from 'react-router-dom';
import './index.scss';
import { Button } from 'antd';
const RentDetail = () => {
const navigate = useNavigate();
//返回
const backRoute = () => {
navigate(-1);
};
return (
<div className='rent-info'>
<BaseInfo />
<StockSku />
<OtherInfo />
<GoodsIntroduce />
<div className='rent-info-operate'>
<Button type='primary'>保存</Button>
<Button onClick={backRoute}>返回</Button>
</div>
</div>
);
};
export default RentDetail;
src/pages/mallManage/rentGoods/rentList/index.tsx
import CommonGoodsList from '~/components/goods/commonGoodsList'; import SearchBox, { searchColumns } from '~/components/search-box';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { Button, Card, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
DeleteOutlined,
PlusOutlined,
} from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
const RentList = () => { const RentList = () => {
const navigate = useNavigate();
const tabList = [
{
key: '1',
tab: '全部',
},
{
key: '2',
tab: '上架中',
},
{
key: '3',
tab: '仓库中',
},
];
const [activeTabKey, setActiveTabKey] = useState<string>('1');
const [searchColumns] = useState<searchColumns[]>([
{
label: '商品名称',
placeholder: '请输入商品名称',
name: '',
type: 'input',
},
{
label: '所属目录',
placeholder: '请选择所属目录',
name: '',
type: 'select',
options: [],
},
{
label: '创建时间',
placeholder: '请输入选择创建时间',
name: '',
type: 'rangePicker',
},
]);
const tableColumns: ColumnsType<any> = [
{ title: '序号', align: 'center' },
{ title: '图片', align: 'center' },
{ title: '商品名称', align: 'center' },
{ title: '所属目录', align: 'center' },
{ title: '创建时间', align: 'center' },
{ title: '状态', align: 'center' },
{
title: '操作',
align: 'center',
render: () => (
<>
<Button type='link'>编辑</Button>
<Button type='link'>详情</Button>
</>
),
},
];
const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
const onTabChange = (key: string) => {
setActiveTabKey(key);
};
//新增租赁商品
const toAddRentGoods = () => {
navigate({ pathname: '/mallManage/rentGoods/add' });
};
return ( return (
<div className='rent-list'> <div className='rent-list'>
<CommonGoodsList /> <SearchBox
search={searchColumns}
child={
<Button type='primary' icon={<PlusOutlined />} onClick={toAddRentGoods}>
新增商品
</Button>
}
/>
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
上架
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
下架
</Button>
<Button danger icon={<DeleteOutlined />}>
删除
</Button>
</div>
<Table columns={tableColumns} bordered dataSource={tableData} />
</Card>
</div> </div>
); );
}; };
......
src/pages/mallManage/serviceManage/serviceIntroduce/index.tsx
import { Button } from 'antd'; import { Button } from 'antd';
import ReactQuill from 'react-quill';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import 'react-quill/dist/quill.snow.css';
import './index.scss'; import './index.scss';
import RichText from '~/components/richText';
const ServiceIntroduce = () => { const ServiceIntroduce = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const modules = {
toolbar: {
container: [
[{ size: ['small', false, 'large', 'huge'] }], //字体设置
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //标题字号，不能设置单个字大小
['bold', 'italic', 'underline', 'strike'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link', 'image'], // a链接和图片的显示
[{ align: [] }],
[
{
background: [
'rgb( 0, 0, 0)',
'rgb(230, 0, 0)',
'rgb(255, 153, 0)',
'rgb(255, 255, 0)',
'rgb( 0, 138, 0)',
'rgb( 0, 102, 204)',
'rgb(153, 51, 255)',
'rgb(255, 255, 255)',
'rgb(250, 204, 204)',
'rgb(255, 235, 204)',
'rgb(255, 255, 204)',
'rgb(204, 232, 204)',
'rgb(204, 224, 245)',
'rgb(235, 214, 255)',
'rgb(187, 187, 187)',
'rgb(240, 102, 102)',
'rgb(255, 194, 102)',
'rgb(255, 255, 102)',
'rgb(102, 185, 102)',
'rgb(102, 163, 224)',
'rgb(194, 133, 255)',
'rgb(136, 136, 136)',
'rgb(161, 0, 0)',
'rgb(178, 107, 0)',
'rgb(178, 178, 0)',
'rgb( 0, 97, 0)',
'rgb( 0, 71, 178)',
'rgb(107, 36, 178)',
'rgb( 68, 68, 68)',
'rgb( 92, 0, 0)',
'rgb(102, 61, 0)',
'rgb(102, 102, 0)',
'rgb( 0, 55, 0)',
'rgb( 0, 41, 102)',
'rgb( 61, 20, 10)',
],
},
],
[
{
color: [
'rgb( 0, 0, 0)',
'rgb(230, 0, 0)',
'rgb(255, 153, 0)',
'rgb(255, 255, 0)',
'rgb( 0, 138, 0)',
'rgb( 0, 102, 204)',
'rgb(153, 51, 255)',
'rgb(255, 255, 255)',
'rgb(250, 204, 204)',
'rgb(255, 235, 204)',
'rgb(255, 255, 204)',
'rgb(204, 232, 204)',
'rgb(204, 224, 245)',
'rgb(235, 214, 255)',
'rgb(187, 187, 187)',
'rgb(240, 102, 102)',
'rgb(255, 194, 102)',
'rgb(255, 255, 102)',
'rgb(102, 185, 102)',
'rgb(102, 163, 224)',
'rgb(194, 133, 255)',
'rgb(136, 136, 136)',
'rgb(161, 0, 0)',
'rgb(178, 107, 0)',
'rgb(178, 178, 0)',
'rgb( 0, 97, 0)',
'rgb( 0, 71, 178)',
'rgb(107, 36, 178)',
'rgb( 68, 68, 68)',
'rgb( 92, 0, 0)',
'rgb(102, 61, 0)',
'rgb(102, 102, 0)',
'rgb( 0, 55, 0)',
'rgb( 0, 41, 102)',
'rgb( 61, 20, 10)',
],
},
],
['clean'], //清空
['emoji'], //emoji表情，设置了才能显示
['video2'], //我自定义的视频图标，和插件提供的不一样，所以设置为video2
],
// handlers: {
// image: this.imageHandler.bind(this), //点击图片标志会调用的方法
// video2: this.showVideoModal.bind(this),
// },
},
// ImageExtend: {
// loading: true,
// name: 'img',
// action: RES_URL + "connector?isRelativePath=true",
// response: res => FILE_URL + res.info.url
// },
// ImageDrop: true,
// 'emoji-toolbar': true, //是否展示出来
// 'emoji-textarea': false, //我不需要emoji展示在文本框所以设置为false
// 'emoji-shortname': true,
};
//返回 //返回
const backRoute = () => { const backRoute = () => {
navigate(-1); navigate(-1);
...@@ -132,7 +20,7 @@ const ServiceIntroduce = () => { ...@@ -132,7 +20,7 @@ const ServiceIntroduce = () => {
</div> </div>
<div className='service-introduce-title'></div> <div className='service-introduce-title'></div>
<div className='service-introduce-rich-text'> <div className='service-introduce-rich-text'>
<ReactQuill modules={modules} style={{ height: '500px' }} /> <RichText richTextHeight={500} />
</div> </div>
</div> </div>
); );
......
src/router/router.tsx
...@@ -51,7 +51,13 @@ const ServiceIntroduceView = React.lazy( ...@@ -51,7 +51,13 @@ const ServiceIntroduceView = React.lazy(
() => import('~/pages/mallManage/serviceManage/serviceIntroduce'), () => import('~/pages/mallManage/serviceManage/serviceIntroduce'),
); //服务介绍 ); //服务介绍
const RentListView = React.lazy(() => import('~/pages/mallManage/rentGoods/rentList')); //租赁列表 const RentListView = React.lazy(() => import('~/pages/mallManage/rentGoods/rentList')); //租赁列表
const RentAddOrEditOrDetailView = React.lazy(
() => import('~/pages/mallManage/rentGoods/rentAddOrEditOrDetail'),
); //租赁新增、编辑、详情
const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品 const MallGoodsView = React.lazy(() => import('~/pages/mallManage/mallGoods/goodsList')); //商城商品
const MallAddOrEditOrDetailView = React.lazy(
() => import('~/pages/mallManage/mallGoods/goodsAddOrEditOrDetail'),
); //商城商品新增、编辑、详情
const ProduceListView = React.lazy(() => import('~/pages/mallManage/produceManage/produceList')); //产品列表 const ProduceListView = React.lazy(() => import('~/pages/mallManage/produceManage/produceList')); //产品列表
const ProduceDetailView = React.lazy( const ProduceDetailView = React.lazy(
() => import('~/pages/mallManage/produceManage/produceDetail'), () => import('~/pages/mallManage/produceManage/produceDetail'),
...@@ -241,7 +247,7 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -241,7 +247,7 @@ export const routerList: Array<RouteObjectType> = [
}, },
}, },
{ {
path: '/mallManage/rentList', path: '/mallManage/rentGoods',
element: withLoadingComponent(<RentListView />), element: withLoadingComponent(<RentListView />),
meta: { meta: {
id: 10130, id: 10130,
...@@ -250,6 +256,16 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -250,6 +256,16 @@ export const routerList: Array<RouteObjectType> = [
}, },
}, },
{ {
path: '/mallManage/rentGoods/add',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
meta: {
id: 10135,
icon: <SmileOutlined />,
title: '租赁商品新增',
hidden: true,
},
},
{
path: '/mallManage/mallGoods', path: '/mallManage/mallGoods',
element: withLoadingComponent(<MallGoodsView />), element: withLoadingComponent(<MallGoodsView />),
meta: { meta: {
...@@ -259,6 +275,16 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -259,6 +275,16 @@ export const routerList: Array<RouteObjectType> = [
}, },
}, },
{ {
path: '/mallManage/mallGoods/add',
element: withLoadingComponent(<MallAddOrEditOrDetailView />),
meta: {
id: 10145,
icon: <SmileOutlined />,
title: '商城商品新增',
hidden: true,
},
},
{
path: '/mallManage/produceList', path: '/mallManage/produceList',
element: withLoadingComponent(<ProduceListView />), element: withLoadingComponent(<ProduceListView />),
meta: { meta: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论