Joe
/
xie_fang_tong_admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

up

Browse Source
master
Joe 1 year ago
parent 61815bef45
commit ffb3a7ce7b
2 changed files with 231 additions and 88 deletions
Show Stats Download Patch File Download Diff File

14
src/constants.ts
Unescape Escape View File

@ -70,6 +70,20 @@ const Constants = {
status: 'Error'
},
},
/**
* 上下架状态
*/
pbcState: {
1: '上架',
2: '下架'
},
/**
* 可见范围
*/
pbcProductType: {
PUBLIC: '全员可见',
PRIVATE: '仅会员可见'
},
/**
* 商户类别
*/

305
src/pages/ProductList/add.tsx
Unescape Escape View File

@ -1,11 +1,15 @@
import Constants from '@/constants';
import { getPbcBusinessListUsingPost } from '@/services/pop-b2b2c/pbcBusinessController';
import { listAdminTreeUsingGet } from '@/services/pop-b2b2c/pbcCategoryController';
import { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController';
import { getCities } from '@/utils/cities';
import {
ProCard,
ProForm,
ProFormCascader,
ProFormDigit,
ProFormInstance,
ProFormList,
ProFormSelect,
ProFormText,
ProFormTextArea,
@ -14,7 +18,6 @@ import {
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, message, Row } from 'antd';
import Upload, { RcFile } from 'antd/es/upload';
import moment from 'moment';
import React, { useRef, useState } from 'react';
const Detail: React.FC<any> = () => {
@ -24,24 +27,64 @@ const Detail: React.FC<any> = () => {
const onSave = () => {
formRef.current?.submit()
const values = formRef.current?.getFieldsValue()
console.log(values.colorItems)
console.log(values.specItems)
}
const handleCategoryChange = (value: any[], items: API.PbcCategory[]) => {
const [c1, c2, c3] = items
formRef.current?.setFieldsValue({
pbcProductTopCategoryName: c1?.pbcCategoryName,
pbcProductParentCategoryName: c2?.pbcCategoryName,
pbcProductCategoryName: c3?.pbcCategoryName,
})
}
const onSubmit = async (values: any) => {
const [pbcBusinessProvince, pbcBusinessCity, pbcBusinessArea] = values.pbcZone;
let pbcProductOriginalProvince = undefined, pbcProductOriginalCity = undefined;
if (values?.pbcZone?.length) {
([pbcProductOriginalProvince, pbcProductOriginalCity] = values.pbcZone);
}
const [pbcProductTopCategoryId, pbcProductParentCategoryId, pbcProductCategoryId] = values.pbcProductCategoryIdList
console.log(values.colorItems)
console.log(values.specItems)
const commonDataList: API.PbcProductCommonData[] = []
if (values.colorItems && values.colorItems.length > 0) {
for (let i = 0; i < values.colorItems.length; i++) {
const element = values.colorItems[i];
commonDataList.push({
pbcSystemName: '颜色',
pbcSystemInputType: 'text',
pbcCommonDataSystem: element.name,
pbcColorImageUrl: element.value.length > 0 ? element.value[0].response.data : ''
})
}
}
if (values.specItems && values.specItems.length > 0) {
for (let i = 0; i < values.specItems.length; i++) {
const element = values.specItems[i];
commonDataList.push({
pbcSystemName: element.name,
pbcSystemInputType: 'text',
pbcCommonDataSystem: element.value
})
}
}
const params: API.PbcProductDTO = {
...values,
pbcState: values.pbcState ? 1 : 0,
pbcBusinessProvince,
pbcBusinessCity,
pbcBusinessArea,
pbcBusinessStartDate: moment(values.pbcBusinessStartDate, 'YYYY-MM-DD'),
pbcBusinessLogo: values.pbcBusinessLogo.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcBusinessImage: values.pbcBusinessImage.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcBusinessPosterUrl: values.pbcBusinessPosterUrl.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcBusinessHeadUserNoBackUrl: values.pbcBusinessHeadUserNoBackUrl.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcBusinessHeadUserNoFrontUrl: values.pbcBusinessHeadUserNoFrontUrl.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcBusinessLicenseUrl: values.pbcBusinessLicenseUrl.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcZone: undefined
pbcProductOriginalProvince,
pbcProductOriginalCity,
pbcProductTopCategoryId,
pbcProductParentCategoryId,
pbcProductCategoryId,
productCommonDataList: commonDataList,
pbcProductImages: values.pbcProductImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcProductDetailImages: values.pbcProductDetailImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcZone: undefined,
colorItems: undefined,
specItems: undefined,
pbcProductCategoryIdList: undefined,
}
const msg = await addOrUpdateProductForAdminUsingPost(params)
if (msg.retcode) {
@ -74,71 +117,149 @@ const Detail: React.FC<any> = () => {
]}
>
<ProForm layout="horizontal" labelAlign="left" formRef={formRef} onFinish={onSubmit} submitter={false}>
<ProFormText name="pbcProductTopCategoryName" hidden />
<ProFormText name="pbcProductParentCategoryName" hidden />
<ProFormText name="pbcProductCategoryName" hidden />
<ProCard title="基本信息" style={{ marginBottom: 12 }}>
<Row gutter={20}>
<Col span={8}>
<ProFormText label="名称" name="pbcProductTitle" rules={[
{ required: true, message: '请输入商品名称' },
]} />
<ProFormSelect
label="所属商户"
name="pbcBusinessId"
rules={[
{ required: true, message: '请选择所属商户' }
]}
request={ async () => {
const msg = await getPbcBusinessListUsingPost();
if (msg.retcode && msg.data) {
return msg.data;
}
return [];
}}
fieldProps={{
showSearch: true,
fieldNames: { label: 'pbcBusinessName', value: 'pbcId' }
}}
/>
</Col>
<Col span={8}>
<ProFormSelect label="商户类别" name="pbcBusinessType" valueEnum={Constants.pbcBusinessType} rules={[
{ required: true, message: '请选择商户类别' },
<ProFormText label="编号" name="pbcProductCode" rules={[
{ required: true, message: '请输入商品编号' },
]} />
</Col>
{/* <Col span={8}>
<ProFormSwitch label="商户状态" name="pbcState" fieldProps={{ checkedChildren: '启用', unCheckedChildren: '禁用' }} />
</Col> */}
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormText label="联系人" name="pbcBusinessContact" rules={[
{ required: true, message: '请输入联系人' },
<ProFormText label="名称" name="pbcProductTitle" rules={[
{ required: true, message: '请输入商品名称' },
]} />
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormText label="手机号" name="pbcBusinessContactMobile" rules={[
{ required: true, message: '请输入手机号' },
{ pattern: Constants.PHONE_PATTERN, message: '请输入正确的手机号' },
]} />
<ProFormCascader label="产地" name="pbcZone" fieldProps={{ options: cities }} />
</Col>
<Col span={8}>
<ProFormSelect label="商户等级" name="pbcBusinessLevel" options={['1级', '2级', '3级', '4级', '5级']} />
<ProFormDigit label="价格" name="pbcProductPrice" rules={[
{ required: true, message: '请输入商品价格' },
]} fieldProps={{ prefix: '￥' }} />
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormText label="邮箱" name="pbcBusinessEmail" rules={[
{ required: true, message: '请输入邮箱' },
{ pattern: Constants.EMAIL_PATTERN, message: '请输入正确的邮箱' },
]} />
</Col>
<Col span={16}>
<ProFormTextArea label="商户简介" name="pbcBusinessIntroduction" rules={[
{ required: true, message: '请输入简介' },
<ProFormDigit label="库存" name="pbcProductStock" min={0} fieldProps={{ precision: 0 }} rules={[
{ required: true, message: '请输入商品库存' },
]} />
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormCascader label="省市区" name="pbcZone" fieldProps={{ options: cities }} rules={[
{ required: true, message: '请选择省市区' },
<ProFormText label="货架号" name="pbcProductShelfNumber" rules={[
{ required: true, message: '请输入货架号' }
]} />
</Col>
<Col span={8}>
<ProFormTextArea label="详细地址" name="pbcBusinessAddress" rules={[
{ required: true, message: '请输入详细地址' },
]} />
</Col>
<Col span={8}>
<ProFormText label="门牌号" name="pbcBusinessDoorLabel" />
<ProFormCascader label="类目" name="pbcProductCategoryIdList"
request={ async () => {
const msg = await listAdminTreeUsingGet({ type: 2 });
if (msg.retcode && msg.data) {
return msg.data;
}
return [];
}}
fieldProps={{fieldNames: { label: 'pbcCategoryName', value: 'pbcId', children: 'children' }, onChange: handleCategoryChange}}
rules={[
{ required: true, message: '请选择类目' },
]} />
</Col>
</Row>
<ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
<ProFormList
name="colorItems"
creatorButtonProps={{
creatorButtonText: '新增',
icon: false,
type: 'link',
style: { width: 'unset' },
}}
copyIconProps={false}
deleteIconProps={{ tooltipText: '删除' }}
itemRender={({ listDom, action }) => (
<div
style={{
display: 'inline-flex',
marginInlineEnd: 25,
}}
>
{listDom}
{action}
</div>
)}
>
<Row align="middle" gutter={20}>
<Col span={12}>
<ProFormText width="sm" name={['name']} placeholder="请输入颜色名" rules={[
{ required: true, message: '请输入颜色名' }
]} />
</Col>
<Col span={12}>
<ProFormUploadButton
name={['value']}
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || Upload.LIST_IGNORE;
},
onPreview: async (file) => {
if (file.uid === '-1') {
window.open(file.url);
}
if (file.response && file.response.retcode) {
window.open(file.response.data);
}
},
listType: 'picture-card',
}}
rules={[
{ required: true, message: '请上传颜色图片' },
]}
max={1}
/>
</Col>
</Row>
</ProFormList>
</ProForm.Item>
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="商户LOGO"
name="pbcBusinessLogo"
label="相册图"
name="pbcProductImages"
fieldProps={{
name: 'file',
accept: 'image/*',
@ -165,17 +286,16 @@ const Detail: React.FC<any> = () => {
listType: 'picture-card',
}}
rules={[
{ required: true, message: '请上传商户LOGO' },
{ required: true, message: '请上传相册图' },
]}
max={1}
/>
</Col>
</Row>
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="商户图片"
name="pbcBusinessImage"
label="详情图"
name="pbcProductDetailImages"
fieldProps={{
name: 'file',
accept: 'image/*',
@ -202,45 +322,54 @@ const Detail: React.FC<any> = () => {
listType: 'picture-card',
}}
rules={[
{ required: true, message: '请上传商户图片' },
{ required: true, message: '请上传详情图' },
]}
/>
</Col>
</Row>
<ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="规格" required>
<ProFormList
name="specItems"
creatorButtonProps={{
creatorButtonText: '新增',
icon: false,
type: 'link',
style: { width: 'unset' },
}}
copyIconProps={false}
deleteIconProps={{ tooltipText: '删除' }}
>
<Row align="middle" gutter={20}>
<Col span={12}>
<ProFormText width="sm" name={['name']} placeholder="请输入规格名称" rules={[
{ required: true, message: '请输入规格名称' }
]} />
</Col>
<Col span={12}>
<ProFormText width="sm" name={['value']} placeholder="请输入规格描述" rules={[
{ required: true, message: '请输入规格描述' }
]} />
</Col>
</Row>
</ProFormList>
</ProForm.Item>
<Row gutter={20}>
<Col span={24}>
<ProFormUploadButton
label="商户海报"
name="pbcBusinessPosterUrl"
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || Upload.LIST_IGNORE;
},
onPreview: async (file) => {
if (file.uid === '-1') {
window.open(file.url);
}
if (file.response && file.response.retcode) {
window.open(file.response.data);
}
},
listType: 'picture-card',
}}
rules={[
{ required: true, message: '请上传商户海报' },
]}
/>
<ProFormTextArea label="详情描述" name="pbcProductDetail" rules={[
{ required: true, message: '请输入详情描述' },
]} />
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormSelect label="可见范围" name="pbcProductType" valueEnum={Constants.pbcProductType} rules={[
{ required: true, message: '请选择可见范围' },
]} />
</Col>
<Col span={8}>
<ProFormSelect label="状态" name="pbcState" valueEnum={Constants.pbcState} rules={[
{ required: true, message: '请选择上下架状态' },
]} />
</Col>
</Row>
</ProCard>

Write Preview
Loading…
Cancel
Save