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' status: 'Error'
}, },
}, },
/**
* 上下架状态
*/
pbcState: {
1: '上架',
2: '下架'
},
/**
* 可见范围
*/
pbcProductType: {
PUBLIC: '全员可见',
PRIVATE: '仅会员可见'
},
/** /**
* 商户类别 * 商户类别
*/ */

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

@ -1,11 +1,15 @@
import Constants from '@/constants'; 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 { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController';
import { getCities } from '@/utils/cities'; import { getCities } from '@/utils/cities';
import { import {
ProCard, ProCard,
ProForm, ProForm,
ProFormCascader, ProFormCascader,
ProFormDigit,
ProFormInstance, ProFormInstance,
ProFormList,
ProFormSelect, ProFormSelect,
ProFormText, ProFormText,
ProFormTextArea, ProFormTextArea,
@ -14,7 +18,6 @@ import {
import { PageContainer } from '@ant-design/pro-layout'; import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, message, Row } from 'antd'; import { Button, Col, message, Row } from 'antd';
import Upload, { RcFile } from 'antd/es/upload'; import Upload, { RcFile } from 'antd/es/upload';
import moment from 'moment';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
const Detail: React.FC<any> = () => { const Detail: React.FC<any> = () => {
@ -24,24 +27,64 @@ const Detail: React.FC<any> = () => {
const onSave = () => { const onSave = () => {
formRef.current?.submit() 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 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 = { const params: API.PbcProductDTO = {
...values, ...values,
pbcState: values.pbcState ? 1 : 0, pbcProductOriginalProvince,
pbcBusinessProvince, pbcProductOriginalCity,
pbcBusinessCity, pbcProductTopCategoryId,
pbcBusinessArea, pbcProductParentCategoryId,
pbcBusinessStartDate: moment(values.pbcBusinessStartDate, 'YYYY-MM-DD'), pbcProductCategoryId,
pbcBusinessLogo: values.pbcBusinessLogo.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','), productCommonDataList: commonDataList,
pbcBusinessImage: values.pbcBusinessImage.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','), pbcProductImages: values.pbcProductImages.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(','), pbcProductDetailImages: values.pbcProductDetailImages.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(','), pbcZone: undefined,
pbcBusinessHeadUserNoFrontUrl: values.pbcBusinessHeadUserNoFrontUrl.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','), colorItems: undefined,
pbcBusinessLicenseUrl: values.pbcBusinessLicenseUrl.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','), specItems: undefined,
pbcZone: undefined pbcProductCategoryIdList: undefined,
} }
const msg = await addOrUpdateProductForAdminUsingPost(params) const msg = await addOrUpdateProductForAdminUsingPost(params)
if (msg.retcode) { if (msg.retcode) {
@ -74,71 +117,110 @@ const Detail: React.FC<any> = () => {
]} ]}
> >
<ProForm layout="horizontal" labelAlign="left" formRef={formRef} onFinish={onSubmit} submitter={false}> <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 }}> <ProCard title="基本信息" style={{ marginBottom: 12 }}>
<Row gutter={20}> <Row gutter={20}>
<Col span={8}> <Col span={8}>
<ProFormText label="名称" name="pbcProductTitle" rules={[ <ProFormSelect
{ required: true, message: '请输入商品名称' }, 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>
<Col span={8}> <Col span={8}>
<ProFormSelect label="商户类别" name="pbcBusinessType" valueEnum={Constants.pbcBusinessType} rules={[ <ProFormText label="编号" name="pbcProductCode" rules={[
{ required: true, message: '请选择商户类别' }, { required: true, message: '请输入商品编号' },
]} /> ]} />
</Col> </Col>
{/* <Col span={8}>
<ProFormSwitch label="商户状态" name="pbcState" fieldProps={{ checkedChildren: '启用', unCheckedChildren: '禁用' }} />
</Col> */}
</Row>
<Row gutter={20}>
<Col span={8}> <Col span={8}>
<ProFormText label="联系人" name="pbcBusinessContact" rules={[ <ProFormText label="名称" name="pbcProductTitle" rules={[
{ required: true, message: '请输入联系人' }, { required: true, message: '请输入商品名称' },
]} /> ]} />
</Col> </Col>
</Row>
<Row gutter={20}>
<Col span={8}> <Col span={8}>
<ProFormText label="手机号" name="pbcBusinessContactMobile" rules={[ <ProFormCascader label="产地" name="pbcZone" fieldProps={{ options: cities }} />
{ required: true, message: '请输入手机号' },
{ pattern: Constants.PHONE_PATTERN, message: '请输入正确的手机号' },
]} />
</Col> </Col>
<Col span={8}> <Col span={8}>
<ProFormSelect label="商户等级" name="pbcBusinessLevel" options={['1级', '2级', '3级', '4级', '5级']} /> <ProFormDigit label="价格" name="pbcProductPrice" rules={[
{ required: true, message: '请输入商品价格' },
]} fieldProps={{ prefix: '￥' }} />
</Col> </Col>
</Row>
<Row gutter={20}>
<Col span={8}> <Col span={8}>
<ProFormText label="邮箱" name="pbcBusinessEmail" rules={[ <ProFormDigit label="库存" name="pbcProductStock" min={0} fieldProps={{ precision: 0 }} rules={[
{ required: true, message: '请输入邮箱' }, { required: true, message: '请输入商品库存' },
{ pattern: Constants.EMAIL_PATTERN, message: '请输入正确的邮箱' },
]} />
</Col>
<Col span={16}>
<ProFormTextArea label="商户简介" name="pbcBusinessIntroduction" rules={[
{ required: true, message: '请输入简介' },
]} /> ]} />
</Col> </Col>
</Row> </Row>
<Row gutter={20}> <Row gutter={20}>
<Col span={8}> <Col span={8}>
<ProFormCascader label="省市区" name="pbcZone" fieldProps={{ options: cities }} rules={[ <ProFormText label="货架号" name="pbcProductShelfNumber" rules={[
{ required: true, message: '请选择省市区' }, { required: true, message: '请输入货架号' }
]} /> ]} />
</Col> </Col>
<Col span={8}> <Col span={8}>
<ProFormTextArea label="详细地址" name="pbcBusinessAddress" rules={[ <ProFormCascader label="类目" name="pbcProductCategoryIdList"
{ required: true, message: '请输入详细地址' }, 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> </Col>
<Col span={8}>
<ProFormText label="门牌号" name="pbcBusinessDoorLabel" />
</Col>
</Row> </Row>
<Row gutter={20}> <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
<Col span={24}> <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 <ProFormUploadButton
label="商户LOGO" name={['value']}
name="pbcBusinessLogo"
fieldProps={{ fieldProps={{
name: 'file', name: 'file',
accept: 'image/*', accept: 'image/*',
@ -165,17 +247,19 @@ const Detail: React.FC<any> = () => {
listType: 'picture-card', listType: 'picture-card',
}} }}
rules={[ rules={[
{ required: true, message: '请上传商户LOGO' }, { required: true, message: '请上传颜色图片' },
]} ]}
max={1} max={1}
/> />
</Col> </Col>
</Row> </Row>
</ProFormList>
</ProForm.Item>
<Row gutter={20}> <Row gutter={20}>
<Col span={24}> <Col span={24}>
<ProFormUploadButton <ProFormUploadButton
label="商户图片" label="相册图"
name="pbcBusinessImage" name="pbcProductImages"
fieldProps={{ fieldProps={{
name: 'file', name: 'file',
accept: 'image/*', accept: 'image/*',
@ -202,7 +286,7 @@ const Detail: React.FC<any> = () => {
listType: 'picture-card', listType: 'picture-card',
}} }}
rules={[ rules={[
{ required: true, message: '请上传商户图片' }, { required: true, message: '请上传相册图' },
]} ]}
/> />
</Col> </Col>
@ -210,8 +294,8 @@ const Detail: React.FC<any> = () => {
<Row gutter={20}> <Row gutter={20}>
<Col span={24}> <Col span={24}>
<ProFormUploadButton <ProFormUploadButton
label="商户海报" label="详情图"
name="pbcBusinessPosterUrl" name="pbcProductDetailImages"
fieldProps={{ fieldProps={{
name: 'file', name: 'file',
accept: 'image/*', accept: 'image/*',
@ -238,11 +322,56 @@ const Detail: React.FC<any> = () => {
listType: 'picture-card', listType: 'picture-card',
}} }}
rules={[ rules={[
{ required: true, message: '请上传商户海报' }, { required: true, message: '请上传详情图' },
]} ]}
/> />
</Col> </Col>
</Row> </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}>
<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> </ProCard>
</ProForm> </ProForm>
</PageContainer> </PageContainer>

Write Preview
Loading…
Cancel
Save