Skip to content

A
admin-ci-test
提交 b26c4e6b 作者: 龚洪江
操作

功能：租赁联调（60%）

上级 14d147dd
正在显示 包含 459 行增加 和 588 行删除
src/api/interface/rentManageType.ts
......@@ -40,3 +40,43 @@ export type rentModeListType = InterItemFunction<
{ brandInfoId?: number; productTypeId?: number },
{ modeName: string; id: number; brandInfoId: number; productTypeId: number; tag: string }[]
>;
//租赁-商品-新增
export type addRentGoodsType = InterFunction<
{
brandInfoId: number;
deviceModeId: number;
leasePartsList: { name: string; number: number; price: number }[];
level: number;
logisticsCompany: number;
maxLeaseTerm: number;
minLeaseTerm: number;
modeOfDelivery: number;
priceStock: {
cashPledge: number;
maxDaysRental: number;
ninetyDaysRental: number;
productSpec: string;
sevenDaysRental: number;
showPrice: number;
skuImage: string;
stock: number;
stockOut: number;
thirtyDaysRental: number;
threeDaysRental: number;
}[];
productDetails: string;
productParam: string;
productTypeId: number;
resourcesList: { type: number; url: string }[];
returnAddress: number;
sellingPoint: string;
shelfStatus: number;
shipAddress: number;
tradeName: string;
specAttrList: { specName: string; specValuesList: { specName: string }[] }[];
},
any
>;
//租赁-商品-租期信息
export type leaseTermInfoType = InterFunction<any, { id: number; leaseDate: string }[]>;
src/api/modules/rentManageAPI.ts
import {
addRentGoodsType,
addRentModeType,
addType,
editBrandInfoType,
getTypeListType,
leaseTermInfoType,
listBrandInfoType,
rentMakeAddType,
rentModeListType,
......@@ -37,4 +39,11 @@ export class RentManageAPI {
static addRentMode: addRentModeType = (data) => axios.post('/pms/brand/addMode', data);
// 租赁-型号-列表
static getRentModeList: rentModeListType = (data) => axios.post('/pms/brand/modeList', data);
// 租赁-商品-新增
static addRentGoods: addRentGoodsType = (data) =>
axios.post('/pms/lease/goods/addLeaseGoods', data);
// 租赁-商品-租期信息
static getLeaseTermInfo: leaseTermInfoType = () =>
axios.post('/pms/lease/goods/getLeaseTermInfo');
}
src/components/goods/commonAddOrEdit/baseInfo/index.scss deleted 100644 → 0
.base-info {
&-title {
font-size: 15px;
font-weight: bold;
margin-bottom: 20px;
&::before {
content: '*';
color: red;
}
}
.goods-video-wrap{
position: relative;
width: 200px;
img{
position: absolute;
right: 0;
top: 0;
transform: translate(50%,-25%);
}
}
}
src/components/goods/commonAddOrEdit/configurePriceModal/index.tsx deleted 100644 → 0
import React, { useEffect, useState } from 'react';
import { Modal, Form, Select, Input, message, Button, ModalProps } from 'antd';
import { InterDataType } from '~/api/interface';
import { cooperationTagType } from '~/api/interface/produceManageType';
import { customizeEntity } from '~/api/interface/goodsType';
import { filterObjAttr } from '~/utils';
//加盟标签返回类型
type cooperationTagResponseType = InterDataType<cooperationTagType>;
interface selfProps {
handleOk: (specPrice: any, leaseTerm: number) => void;
handleCancel: () => void;
customRowData: Partial<customizeEntity>;
tagInfoList: cooperationTagResponseType;
goodsType: number;
}
const ConfigurePriceModal: React.FC<ModalProps & selfProps> = ({
open,
handleOk,
handleCancel,
customRowData,
tagInfoList,
goodsType,
}) => {
// 选择的列表
const [selectList, setSelectList] = useState<number[]>([]);
// 配置价格Form
const [cfgPriceForm] = Form.useForm<any>();
const deselectEvent = (id: number) => {
const obj: any = {};
obj[id] = undefined;
cfgPriceForm.setFieldsValue(obj);
const numArr: number[] = selectList.filter((i: number) => i !== id);
setSelectList([...numArr]);
};
const levelSelectEvent = (id: number) => {
selectList.push(id);
setSelectList([...selectList]);
};
// 将val转换为label
const transValtoLabel = (id: number) => {
const item = tagInfoList.find((i) => i.id === id);
return item ? item.tagName : id;
};
// 表单验证
const handleSubmit = async () => {
cfgPriceForm
.validateFields()
.then(async (values) => {
const specPrice = Object.keys(filterObjAttr(values, ['leaseTerm'])).reduce(
(pre: any, cur: string) => {
if (Object.keys(customRowData.productSpecCPQVO).length != 0) {
const priceItem: any = customRowData.productSpecCPQVO.specPrice.find(
(i: any) => i.cooperationTag === Number(cur),
);
pre.push({
id: priceItem?.id,
price: values[cur],
cooperationTag: cur,
});
} else {
pre.push({ price: values[cur], cooperationTag: cur });
}
return pre;
},
[],
);
handleOk([...specPrice], values.leaseTerm);
})
.catch((err) => {
message.warning(err.errorFields[0].errors[0]).then();
});
};
const handleCancelEvent = () => {
cfgPriceForm.resetFields();
handleCancel();
};
// 价格正则
const priceValidator = (_rule: any, value: any) => {
const regExp = /^[1-9]\d{0,7}(\.\d{1,2})?$|^0(\.\d{1,2})?$/;
const bol: boolean = regExp.test(value);
if (!value) {
return Promise.reject(new Error('请输入定价金额'));
}
if (!bol) {
return Promise.reject(
new Error('金额应为数字,小数最多两位,整数最多八位,不能输入0开头的整数'),
);
}
return Promise.resolve();
};
useEffect(() => {
// 新增规格则清空表单数据
if (Object.keys(customRowData.productSpecCPQVO).length === 0) {
cfgPriceForm.resetFields();
setSelectList([]);
} else {
cfgPriceForm.setFieldValue('leaseTerm', customRowData.productSpecCPQVO.leaseTerm);
const ids: number[] = [];
customRowData.productSpecCPQVO.specPrice.map((item: any) => {
cfgPriceForm.setFieldValue(Number(item.cooperationTag), item.price);
if (item.cooperationTag != '0') {
ids.push(Number(item.cooperationTag));
}
setSelectList(ids);
});
}
}, [customRowData]);
return (
<Modal
title='配置价格'
open={open}
onCancel={handleCancelEvent}
zIndex={1009}
footer={[
<Button key={1} type='default' onClick={handleCancelEvent}>
取消
</Button>,
<Button key={2} type='primary' onClick={handleSubmit}>
确认
</Button>,
]}
>
<Form
labelCol={{ span: 7 }}
wrapperCol={{ span: 14 }}
form={cfgPriceForm}
initialValues={{ leaseTerm: 0 }}
>
{goodsType === 1 && (
<Form.Item
label='租期'
name='leaseTerm'
rules={[{ required: true, message: '请选择租期' }]}
>
<Select>
<Select.Option value={0}>1-7天</Select.Option>
<Select.Option value={1}>8-15天</Select.Option>
<Select.Option value={2}>16-30天</Select.Option>
<Select.Option value={3}>31天以上</Select.Option>
</Select>
</Form.Item>
)}
<Form.Item label='渠道等级'>
<Select
placeholder='请选择渠道等级'
mode='multiple'
filterOption={(input, option) =>
(option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
}
onDeselect={deselectEvent}
onSelect={levelSelectEvent}
value={selectList}
>
{tagInfoList.map((item) => (
<Select.Option key={item.id} value={item.id}>
{item.tagName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label='市场单价'
name={0}
rules={[{ required: true, validator: priceValidator }]}
>
<Input placeholder='请输入市场单价' maxLength={11} />
</Form.Item>
{selectList.map((item: number) => (
<Form.Item
label={transValtoLabel(item)}
key={item}
name={item}
rules={[{ required: true, validator: priceValidator }]}
>
<Input placeholder='请输入定价金额' maxLength={11} />
</Form.Item>
))}
</Form>
</Modal>
);
};
export default ConfigurePriceModal;
src/components/goods/commonAddOrEdit/goodsIntroduce/index.scss deleted 100644 → 0
.goods-introduce {
&-title {
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content {
margin-left: 50px;
}
}
.ql-container {
height: 400px;
}
src/components/goods/commonAddOrEdit/goodsIntroduce/index.tsx deleted 100644 → 0
import './index.scss';
import RichText from '~/components/richText';
import { FC } from 'react';
import { InterDataType } from '~/api/interface';
import { detailGoodsType } from '~/api/interface/goodsType';
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
interface selfProps {
getRichText: (html?: string) => void;
goodsDetail: goodsDetailType | undefined;
isDetail: boolean;
}
const GoodsIntroduce: FC<selfProps> = ({ getRichText, goodsDetail, isDetail }) => {
const richTextChange = (html?: string) => {
getRichText(html);
};
return (
<div className='goods-introduce'>
<div className='goods-introduce-title'>产品介绍图</div>
<div className='goods-introduce-content'>
<RichText
richTextContent={goodsDetail?.goodsDetail.content}
onChange={richTextChange}
isDetail={isDetail}
/>
</div>
</div>
);
};
export default GoodsIntroduce;
src/components/goods/commonAddOrEdit/otherInfo/index.scss deleted 100644 → 0
.other-info {
&-title {
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-form {
margin-left: 50px;
}
}
src/components/goods/commonAddOrEdit/otherInfo/index.tsx deleted 100644 → 0
import React, { useEffect, useState } from 'react';
import { Checkbox, Form } from 'antd';
import './index.scss';
import GoodsAPI from '~/api/modules/goodsAPI';
import { detailGoodsType, otherServiceType } from '~/api/interface/goodsType';
import { InterDataType } from '~/api/interface';
//商品返回类型
type goodsDetailType = InterDataType<detailGoodsType>;
interface selfProps {
otherServiceSelect: (id: number[]) => void;
goodsDetail: goodsDetailType | undefined;
isDetail: boolean;
}
//其它服务返回类型
type otherServiceListType = InterDataType<otherServiceType>;
const OtherInfo: React.FC<selfProps> = ({ otherServiceSelect, goodsDetail, isDetail }) => {
const [otherInfoForm] = Form.useForm();
//其它服务
const [otherServiceList, setOtherServiceList] = useState<otherServiceListType>([]);
const otherServiceRadioChange = (e: any) => {
otherServiceSelect(e);
};
//获取其它服务
const getOtherServiceList = () => {
GoodsAPI.getOtherServiceList().then(({ result }) => {
setOtherServiceList(result);
});
};
useEffect(() => {
getOtherServiceList();
}, []);
useEffect(() => {
if (goodsDetail) {
otherInfoForm.setFieldsValue({
otherService: goodsDetail.otherService.map((v) => v.saleServiceId),
});
}
}, [goodsDetail]);
return (
<div className='other-info'>
<div className='other-info-title'>其它信息</div>
<div className='other-info-form'>
<Form form={otherInfoForm} disabled={isDetail}>
<Form.Item label='搭配服务' name='otherService'>
<Checkbox.Group onChange={otherServiceRadioChange}>
{otherServiceList.map((item: any, index: number) => (
<Checkbox value={item.id} key={index}>
{item.saleServiceName}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
</Form>
</div>
</div>
);
};
export default OtherInfo;
src/components/goods/commonAddOrEdit/stockSku/index.scss deleted 100644 → 0
.stock-sku {
&-title {
font-size: 15px;
font-weight: bold;
margin: 20px 0;
}
&-content {
margin-left: 50px;
}
&-operate {
margin-bottom: 10px;
}
}
src/components/goods/commonAddOrEdit/stockSku/index.tsx deleted 100644 → 0
import React from 'react';
import { Table, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './index.scss';
import { ColumnsType } from 'antd/es/table';
import { customizeEntity, skuUnitType, specEntity } from '~/api/interface/goodsType';
import { InterDataType } from '~/api/interface';
//产品-规格单位返回类型
type unitType = InterDataType<skuUnitType>;
interface selfProps {
addOrEditSku: (record?: specEntity) => void;
specData: specEntity[];
skuUnitList: unitType;
deleteSku: (record: specEntity) => void;
isDetail: boolean;
}
//机构列表
const StockSku: React.FC<selfProps> = ({
addOrEditSku,
specData,
skuUnitList,
deleteSku,
isDetail,
}) => {
const columns: ColumnsType<specEntity> = [
{
title: '序号',
align: 'center',
render: (_text: string, _record: specEntity, index: number) => index + 1,
},
{
title: '规格名称',
align: 'center',
dataIndex: 'goodsSpecName',
},
{
title: `方案`,
align: 'center',
dataIndex: 'skuName',
},
{
title: '选项来源',
align: 'center',
dataIndex: 'specIds',
render: (_text: string, record) => (
<div>
{record.flag !== 1
? record.specIds.map((i: any, j: number) => (
<div key={j}>
{i.specName}
{i.partNo && `(${i.partNo})`}
</div>
))
: record.customizeInfo &&
record.customizeInfo.map((i, index: number) => (
<div key={index}>{getSelfSpecName(i)}</div>
))}
</div>
),
},
{
title: '选择方式',
align: 'center',
dataIndex: 'chooseType',
render: (text: number) => <div>{text === 0 ? '单选' : '多选'}</div>,
},
{
title: '是否必选',
align: 'center',
dataIndex: 'must',
render: (text: number) => <div>{text ? '必选' : '非必选'}</div>,
},
{
title: '规格单位',
align: 'center',
dataIndex: 'skuUnitId',
render: (text: number) => {
return <div>{getSkuUnitName(text)}</div>;
},
},
{
title: '操作',
align: 'center',
width: '20%',
render: (_text: any, record) => {
return (
<div>
<Button
type='link'
style={{ marginRight: '10px' }}
onClick={() => addOrEditSkuClick(record)}
>
编辑
</Button>
<Button type='link' onClick={() => deleteSkuClick(record)}>
删除
</Button>
</div>
);
},
},
];
//添加、编辑规格操作
const addOrEditSkuClick = (record?: specEntity) => {
addOrEditSku(record);
};
//删除规格操作
const deleteSkuClick = (record: specEntity) => {
deleteSku(record);
};
// 自定义选项来源名称
const getSelfSpecName = (obj: customizeEntity) => {
return `${obj.specName}(${obj.partNo || ''})`;
};
// 单位名称
const getSkuUnitName = (id: number) => {
const unitObj = skuUnitList.find((i) => i.id === id);
return unitObj?.unitName;
};
return (
<div className='stock-sku'>
<div className='stock-sku-title'>库存规格</div>
<div className='stock-sku-content'>
{!isDetail && (
<div className='stock-sku-operate'>
<Button icon={<PlusOutlined />} type='primary' onClick={() => addOrEditSkuClick()}>
添加规格
</Button>
</div>
)}
<Table
size='small'
bordered
dataSource={specData}
rowKey='id'
pagination={false}
columns={isDetail ? columns.filter((v) => v.title !== '操作') : columns}
/>
</div>
</div>
);
};
export default StockSku;
src/components/uploader/index.tsx
......@@ -54,7 +54,6 @@ export const Uploader: React.FC<PropsType> = (props) => {
listType,
fileList,
beforeUpload: (res) => {
console.log('文件类型-->', res);
const isType = fileType?.includes(res.type);
const isSize = res.size / 1024 / 1024 < (fileSize || 2);
if (!isType) {
......
src/pages/rentManage/rentGoods/rentAddOrEdit/components/goodsInfo/index.tsx
import { Form, Input, Radio } from 'antd';
import './index.scss';
type goodsInfoForm = {
tradeName: string;
sellingPoint: string;
level: number;
shelfStatus: number;
};
const GoodsInfo = () => {
const qualityList = [
{
......@@ -24,18 +31,32 @@ const GoodsInfo = () => {
value: 4,
},
];
const [form] = Form.useForm<goodsInfoForm>();
return (
<div className='goods-info'>
<div className='goods-info-title'>商品信息</div>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
<Form.Item label='商品标题'>
<Input placeholder='请输入商品标题' />
<Form
labelCol={{ span: 2 }}
wrapperCol={{ span: 10 }}
initialValues={{ level: 0 }}
form={form}
>
<Form.Item
label='商品标题'
name='tradeName'
rules={[{ required: true, message: '请输入商品标题' }]}
>
<Input placeholder='请输入商品标题' maxLength={30} />
</Form.Item>
<Form.Item label='商品卖点'>
<Input placeholder='请输入商品卖点' />
<Form.Item
label='商品卖点'
name='sellingPoint'
rules={[{ required: true, message: '请输入商品卖点' }]}
>
<Input placeholder='请输入商品卖点' maxLength={30} />
</Form.Item>
<Form.Item label='商品成新'>
<Form.Item label='商品成新' name='level'>
<Radio.Group>
{qualityList.map((v, index) => (
<Radio value={v.value} key={index}>
......@@ -44,7 +65,7 @@ const GoodsInfo = () => {
))}
</Radio.Group>
</Form.Item>
<Form.Item label='商品状态'>
<Form.Item label='商品状态' name='shelfStatus'>
<Radio.Group>
<Radio value={1}>上架</Radio>
<Radio value={0}>下架</Radio>
......
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentAttr/index.tsx
import './index.scss';
import { Button, Cascader, Form, Radio, Table } from 'antd';
import { Button, Form, Select, Table } from 'antd';
import EditableCell from '~/components/EditableCell';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { MinusOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import RichText from '~/components/richText';
import { RentManageAPI } from '../../../../../../api';
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
type RentAttrFormType = {
productTypeId: number;
brandInfoId: number;
deviceModeId: number;
goodsImage: string[];
goodsVideo: string;
productDetails: string;
};
//商品参数表格类型
type productParamType = {
id: number;
productParamName: string;
productParamValue: string;
};
const RentAttr = () => {
const typeList = [
{
label: '航拍无人机',
value: 1,
},
{
label: '行业无人机',
value: 2,
},
{
label: '挂载',
value: 3,
},
{
label: '配件',
value: 4,
},
];
//商品属性表单
const [rentAttrForm] = Form.useForm<RentAttrFormType>();
//商品参数表单
const [productParamForm] = Form.useForm<{ [key: string]: string }>();
const attrTableColumns: (ColumnTypes[number] & {
editable?: boolean;
......@@ -37,13 +39,13 @@ const RentAttr = () => {
})[] = [
{
title: '参数名称',
dataIndex: '',
dataIndex: 'productParamName',
editable: true,
align: 'center',
},
{
title: '参数值',
dataIndex: '',
dataIndex: 'productParamValue',
editable: true,
align: 'center',
},
......@@ -66,7 +68,7 @@ const RentAttr = () => {
<Button
type='primary'
icon={<MinusOutlined />}
onClick={deleteParameterDataEvent}
onClick={() => deleteParameterDataEvent(index)}
></Button>
) : (
''
......@@ -91,33 +93,176 @@ const RentAttr = () => {
}),
};
});
const [parameterTableData, setParameterTableData] = useState<any>([{ id: 1 }]);
const [parameterTableData, setParameterTableData] = useState<productParamType[]>([
{ id: Math.random(), productParamName: '', productParamValue: '' },
]);
//类型下拉列表
const [rentTypeList, setTypeList] = useState<{ label: string; value: number }[]>([]);
//品牌下拉列表
const [brandInfoList, setBrandInfoList] = useState<{ label: string; value: number }[]>([]);
//型号下拉列表
const [modeTypeList, setModeTypeList] = useState<{ label: string; value: number }[]>([]);
//商品图片文件列表
const [imgFileList, setImgFileList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
//商品视频文件列表
const [videoFileList, setVideoFileList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
//商品参数新增
const addParameterDataEvent = () => {
setParameterTableData([...parameterTableData, { id: parameterTableData.length + 1 }]);
setParameterTableData([
...parameterTableData,
{ id: Math.random(), productParamName: '', productParamValue: '' },
]);
};
//商品参数删除
const deleteParameterDataEvent = () => {};
const deleteParameterDataEvent = (index: number) => {
parameterTableData.splice(index, 1);
setParameterTableData(parameterTableData);
};
//类型列表
const getRentTypeList = () => {
RentManageAPI.getTypeList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
if (result.list) {
const optionList = result.list.map((v) => ({ label: v.name, value: v.id }));
setTypeList(optionList);
}
});
};
//品牌列表
const getRentMakeList = () => {
RentManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
if (result.list) {
const optionList = result.list.map((v) => ({ label: v.brandName, value: v.id }));
setBrandInfoList(optionList);
}
});
};
//型号列表
const getRentModelList = (brandInfoId?: number, productTypeId?: number) => {
RentManageAPI.getRentModeList({ pageNo: 1, pageSize: 99999, brandInfoId, productTypeId }).then(
({ result }) => {
if (result.list) {
const optionList = result.list.map((v) => ({ label: v.modeName, value: v.id }));
setModeTypeList(optionList);
}
},
);
};
//类型选中
const rentTypeOnSelect = (value: number) => {
getRentModelList(rentAttrForm.getFieldValue('brandInfoId') || undefined, value);
};
//品牌选中
const brandInfoOnSelect = (value: number) => {
getRentModelList(value, rentAttrForm.getFieldValue('productTypeId') || undefined);
};
//商品图片上传成功
const imgUploadSuccess = (
value: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
rentAttrForm.setFieldValue(
'goodsImage',
value.map((v) => v.url),
);
setImgFileList(value);
};
//商品视频上传成功
const videoUploadSuccess = (
value: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
rentAttrForm.setFieldValue('goodsVideo', value[0].url);
setVideoFileList(value);
};
//商品参数表单验证
const productParamFormSubmit = () => {
return new Promise((resolve, reject) => {
productParamForm
.validateFields()
.then((values) => {
const productParamList = parameterTableData.reduce(
(pre: { [key: string]: string }[], cur) => {
const Obj = Object.create(null);
Obj[values['productParamName' + cur.id]] = values['productParamValue' + cur.id];
pre.push(Obj);
return pre;
},
[],
);
resolve(productParamList);
})
.catch((err) => {
reject(err);
});
});
};
useEffect(() => {
getRentTypeList();
getRentMakeList();
}, []);
return (
<div className='rent-attr'>
<div className='rent-attr-title'>商品属性</div>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
<Form.Item label='商品类型'>
<Radio.Group>
{typeList.map((v) => (
<Radio key={v.value} value={v.value}>
{v.label}
</Radio>
))}
</Radio.Group>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }} form={rentAttrForm}>
<Form.Item
label='商品类型'
name='productTypeId'
rules={[{ required: true, message: '请选择商品类型' }]}
>
<Select
placeholder='请选择商品类型'
options={rentTypeList}
onSelect={rentTypeOnSelect}
></Select>
</Form.Item>
<Form.Item
label='商品品牌'
name='brandInfoId'
rules={[{ required: true, message: '请选择商品品牌' }]}
>
<Select
placeholder='请选择商品品牌'
options={brandInfoList}
onSelect={brandInfoOnSelect}
></Select>
</Form.Item>
<Form.Item label='商品型号'>
<Cascader placeholder='请选择商品型号' />
<Form.Item
label='商品型号'
name='deviceModeId'
rules={[{ required: true, message: '请选择商品型号' }]}
>
<Select placeholder='请选择商品型号' options={modeTypeList}></Select>
</Form.Item>
<Form.Item label='商品参数'>
<Form>
<Form form={productParamForm}>
<Table
columns={columns as ColumnTypes}
components={{
......@@ -132,17 +277,39 @@ const RentAttr = () => {
></Table>
</Form>
</Form.Item>
<Form.Item label='商品图片'>
<Uploader fileUpload listType='picture-card'>
<Form.Item
label='商品图片'
name='goodsImage'
rules={[{ required: true, message: '请选择商品图片' }]}
>
<Uploader
fileUpload
listType='picture-card'
onChange={imgUploadSuccess}
defaultFileList={imgFileList}
fileSize={3}
fileLength={5}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='商品视频'>
<Uploader fileUpload listType='picture-card'>
<Form.Item label='商品视频' name='goodsVideo'>
<Uploader
fileUpload
listType='picture-card'
onChange={videoUploadSuccess}
defaultFileList={videoFileList}
fileSize={30}
fileLength={1}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='商品详情页'>
<Form.Item
label='商品详情页'
name='productDetails'
rules={[{ required: true, message: '请输入商品详情页' }]}
>
<RichText richTextContent='' />
</Form.Item>
</Form>
......
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentInfo/index.scss deleted 100644 → 0
.rent-info{
&-title{
font-size: 15px;
font-weight: bold;
line-height: 40px;
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentInfo/index.tsx deleted 100644 → 0
import { Form, Select } from 'antd';
import './index.scss';
const RentInfo = () => {
return (
<div className='rent-info'>
<div className='rent-info-title'>租赁信息</div>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
<Form.Item label='最低租期'>
<Select placeholder='请选择租期'>
<Select.Option>11</Select.Option>
</Select>
</Form.Item>
<Form.Item label='最高租期'>
<Select placeholder='请选择租期'>
<Select.Option>11</Select.Option>
</Select>
</Form.Item>
</Form>
</div>
);
};
export default RentInfo;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/skuInfo/index.tsx
import './index.scss';
import { Button, Col, Row, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table/InternalTable';
const SkuInfo = () => {
const skuTableColumns: ColumnsType<any> = [
import { Col, Form, Row, Select, Table } from 'antd';
import CommonSkuInfo from '~/components/goods/commonSkuInfo';
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { RentManageAPI } from '~/api';
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
interface selfProps {
ref: any;
}
const SkuInfo = forwardRef<any, selfProps>((_props, ref) => {
const [form] = Form.useForm<{ minLeaseTerm: number; maxLeaseTerm: number }>();
const commonSkuInfoRef = useRef<any>();
const [defaultColumns, setDefaultColumns] = useState<
(ColumnTypes[number] & {
editable?: boolean;
dataIndex?: string;
inputType?: string;
radioOption?: { name: string; id: number }[];
rules?: any;
maxLength?: number;
children?: any;
placeholder?: string;
})[]
>([
{
title: '版本',
align: 'center',
},
{
title: '是否缺货',
title: '商品规格',
align: 'center',
children: [],
},
{
title: '押金',
align: 'center',
editable: true,
dataIndex: 'skuImage',
},
];
]);
const [tableData, setTableData] = useState<any>([]);
//全部租期下拉
const [allLeaseTermInfoList, setAllLeaseTermInfoList] = useState<
{
label: string;
value: number;
}[]
>([]);
// 低租期下拉
const [lowLeaseTermInfoList, setLowLeaseTermInfoList] = useState<
{
label: string;
value: number;
}[]
>([]);
//高租期下拉
const [upLeaseTermInfoList, setUpLeaseTermInfoList] = useState<
{
label: string;
value: number;
}[]
>([]);
useImperativeHandle(ref, () => ({
getForm: () => form,
}));
const updateTableData = (tableData: any) => {
setTableData([...tableData]);
};
const updateDefaultColumns = (columns: any) => {
setDefaultColumns([...columns]);
};
//租赁-商品-租期信息
const getLeaseTermInfo = () => {
RentManageAPI.getLeaseTermInfo().then(({ result }) => {
if (result) {
const optionList = result.map((v) => ({ label: v.leaseDate, value: v.id }));
setLowLeaseTermInfoList(optionList);
setUpLeaseTermInfoList(optionList);
setAllLeaseTermInfoList(optionList);
}
});
};
//最低租期选择
const lowLeaseTermInfoOnSelect = (value: number) => {
const upLeaseTermInfoIndex = allLeaseTermInfoList.findIndex((v) => v.value === value);
if (upLeaseTermInfoIndex !== -1) {
setUpLeaseTermInfoList(
allLeaseTermInfoList.slice(upLeaseTermInfoIndex, allLeaseTermInfoList.length),
);
}
if (form.getFieldValue('maxLeaseTerm')) {
const index = allLeaseTermInfoList.findIndex(
(v) => v.value === form.getFieldValue('maxLeaseTerm'),
);
if (index !== -1) {
const filterLeaseTermInfo = allLeaseTermInfoList.slice(upLeaseTermInfoIndex, index + 1);
setDefaultColumns(
defaultColumns.concat(
filterLeaseTermInfo.map((v) => ({
title: v.label,
align: 'center',
editable: true,
dataIndex: v.label,
})),
),
);
}
}
};
// 最高租期选择
const upLeaseTermInfoOnSelect = (value: number) => {
const lowLeaseTermInfoIndex = allLeaseTermInfoList.findIndex((v) => v.value === value);
if (lowLeaseTermInfoIndex !== -1) {
setLowLeaseTermInfoList(allLeaseTermInfoList.slice(0, lowLeaseTermInfoIndex + 1));
}
if (form.getFieldValue('minLeaseTerm')) {
const index = allLeaseTermInfoList.findIndex(
(v) => v.value === form.getFieldValue('minLeaseTerm'),
);
if (index !== -1) {
const filterLeaseTermInfo = allLeaseTermInfoList.slice(index, lowLeaseTermInfoIndex + 1);
setDefaultColumns(
defaultColumns.concat(
filterLeaseTermInfo.map((v) => ({
title: v.label,
align: 'center',
editable: true,
dataIndex: v.label,
})),
),
);
}
}
};
useEffect(() => {
getLeaseTermInfo();
}, []);
return (
<div className='sku-info'>
<div className='sku-info-title'>价格库存信息</div>
<Row>
<Col span={1}></Col>
<Col span={7}>
<Form wrapperCol={{ span: 18 }} labelCol={{ span: 5 }} form={form}>
<Form.Item
label='最低租期'
name='minLeaseTerm'
rules={[{ required: true, message: '请选择最低租期' }]}
>
<Select
placeholder='请选择最低租期'
options={lowLeaseTermInfoList}
onSelect={lowLeaseTermInfoOnSelect}
></Select>
</Form.Item>
<Form.Item
label='最高租期'
name='maxLeaseTerm'
rules={[{ required: true, message: '请选择最高租期' }]}
>
<Select
placeholder='请选择最高租期'
options={upLeaseTermInfoList}
onSelect={upLeaseTermInfoOnSelect}
></Select>
</Form.Item>
</Form>
</Col>
</Row>
<Row>
<Col span={1}></Col>
<Col span={22}>
<div>
<Button type='primary' icon={<PlusOutlined />} style={{ marginBottom: '10px' }}>
新增规格
</Button>
<Table bordered columns={skuTableColumns} />
</div>
<CommonSkuInfo
tableData={tableData}
updateTableData={updateTableData}
defaultColumns={defaultColumns}
updateDefaultColumns={updateDefaultColumns}
ref={commonSkuInfoRef}
/>
</Col>
</Row>
</div>
);
};
});
export default SkuInfo;
src/pages/rentManage/rentGoods/rentAddOrEdit/index.tsx
import GoodsInfo from './components/goodsInfo';
import RentAttr from './components/rentAttr';
import RentInfo from './components/rentInfo';
import SkuInfo from './components/skuInfo';
import AddressInfo from './components/addressInfo';
const RentAddOrEdit = () => {
......@@ -10,8 +9,6 @@ const RentAddOrEdit = () => {
<GoodsInfo />
{/*商品属性*/}
<RentAttr />
<RentInfo />
{/*价格库存信息*/}
<SkuInfo />
{/*物流信息*/}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论