From ffb3a7ce7b67313e6d6ed0c8c846e2a98632a231 Mon Sep 17 00:00:00 2001
From: Joe <joe_96@163.com>
Date: Sun, 7 Jul 2024 15:27:19 +0800
Subject: [PATCH] up

---
 src/constants.ts              |  14 ++
 src/pages/ProductList/add.tsx | 305 ++++++++++++++++++++++++----------
 2 files changed, 231 insertions(+), 88 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index c10c18b..4967f3c 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -70,6 +70,20 @@ const Constants = {
       status: 'Error'
     },
   },
+  /**
+   * 上下架状态
+   */
+  pbcState: {
+    1: '上架',
+    2: '下架'
+  },
+  /**
+   * 可见范围
+   */
+  pbcProductType: {
+    PUBLIC: '全员可见',
+    PRIVATE: '仅会员可见'
+  },
   /**
    * 商户类别
    */
diff --git a/src/pages/ProductList/add.tsx b/src/pages/ProductList/add.tsx
index 2569120..3591cd2 100644
--- a/src/pages/ProductList/add.tsx
+++ b/src/pages/ProductList/add.tsx
@@ -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>