feat: 商品库服务类商品

config/env.config.js

@@ -3,13 +3,14 @@ const isPre = process.env.PRE_ENV === 'pre';
 
 const envAPi = {
   api: 'https://backstms-xyqb.liangkebang.net',
-  kdspOpApi: 'https://kdsp-operation-xyqb.liangkebang.net',
-  kdspApi: 'https://sc-op-api-xyqb.liangkebang.net',
-  goodsApi: 'https://sc-op-api-xyqb.liangkebang.net',
+  kdspOpApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
+  kdspApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
+  goodsApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
+  // kdspOpApi: 'https://kdsp-operation-xyqb.liangkebang.net',
+  // kdspApi: 'https://sc-op-api-xyqb.liangkebang.net',
+  // goodsApi: 'https://sc-op-api-xyqb.liangkebang.net',
   querysApi: 'https://sc-settlement-api-xyqb.liangkebang.net',
-  // goodsApi: '//192.168.188.111:7000',
   prologueDomain: 'https://mall-xyqb.liangkebang.net',
-  // qiniuHost: 'https://appsync.lkbang.net',
   qiniuHost: 'https://kdspstatic.q-gp.com/',
   opapiHost: 'https://opapi-xyqb.liangkebang.net',
 };

src/pages/GoodsManage/SearchForm/index.jsx

@@ -157,7 +157,7 @@ class goodsManage extends Component {
           </FormItem>
         </FormItem>
         <FormItem label="商品类型" name="productType">
-          <Select style={iptNumWidth}>
+          <Select style={selectW} placeholder="请选择商品类型">
             <Option value={1}>实体商品</Option>
             <Option value={2}>虚拟商品</Option>
             <Option value={4}>服务类商品</Option>

src/pages/GoodsManage/staticdata.js

@@ -38,7 +38,7 @@ export function column() {
       width: 125,
       align: 'center',
       render: (_, row) => {
-        if (row.type !== 1) {
+        if (row.type === 2) {
           return (
             <Badge
               count={
@@ -153,26 +153,21 @@ export function column() {
       render: (_, row) => (
         <div className={styles.actionBtn}>
           {(row.state === 4 || (row.state >= 5 && row.updateState !== 1)) && (
-            <>
             <Button
               key="edit"
               type="primary"
               size="small"
               className={styles.button}
-                onClick={() => this.onUpdateInfo(row)}
-              >
-                修改
-              </Button>
-              <Button
-                key="222"
-                type="primary"
-                size="small"
-                className={styles.button}
-                onClick={() => this.serviceVisbleChange(row)}
+              onClick={() => {
+                if (row.type === 4) {
+                  this.serviceVisbleChange(row);
+                } else {
+                  this.onUpdateInfo(row);
+                }
+              }}
             >
               修改
             </Button>
-            </>
           )}
           <Button
             key="viewP"
@@ -302,6 +297,7 @@ export const ProcessEditData = (data, row) => {
   }, {});
 
   const SourceData = {
+    state: row.state,
     id: data.id,
     productType: data.productType,
     pageProductType: row.productType,
@@ -313,6 +309,7 @@ export const ProcessEditData = (data, row) => {
       name: data.name,
       categoryId: [data.firstCategoryId, data.secondCategoryId, data.thirdCategoryId],
       description: serviceItem.description || null,
+      afterAddressId: data.afterAddressId || null,
     },
     infoSpecData: {
       firstSpec: oneItem.firstSpec,

src/pages/ServiceGoods/common.less

@@ -73,8 +73,11 @@
   }
 }
 
+.pictureWrapper {
+  position: relative;
+}
 .pullImage {
   position: absolute;
   top: 30px;
-  right: -80px;
+  right: 40px;
 }

src/pages/ServiceGoods/components/CommonTemplate.tsx → src/pages/ServiceGoods/components/CommonTemplate.jsx

@@ -80,8 +80,6 @@ export const CreateFormInput = props => {
     ...options
   } = props;
 
-  console.log(dataIndex, roleProps);
-
   if (type === 'input') {
     return (
       <Input
@@ -135,7 +133,6 @@ export const CreateFormInput = props => {
       style={{ width: '100%' }}
       placeholder={`请输入${title}`}
       onBlur={e => {
-        console.log(e);
         onBlurEvent(e.target.value, dataIndex, rowIndex);
       }}
     />

src/pages/ServiceGoods/components/EditFormTable.jsx

@@ -59,7 +59,6 @@ const EditFormTable = forwardRef((props, ref) => {
     form.setFieldsValue({
       tableList: initData,
     });
-    console.log('==============>生成的表格数据', initData);
     setDataSource([...initData]);
   }, [initData]);
 
@@ -83,11 +82,8 @@ const EditFormTable = forwardRef((props, ref) => {
 
   const onCheck = async () => {
     try {
-      const { tableList } = await form.validateFields();
-      console.log('===============>编辑表格', tableList);
-      const newTableList = customer.isEdit
-        ? [...dataSource]
-        : [...tableList].map(item => {
+      await form.validateFields();
+      const newTableList = [...dataSource].map(item => {
         const { rowSpanCount, option, ...childItem } = item;
         return childItem;
       });
@@ -125,14 +121,6 @@ const EditFormTable = forwardRef((props, ref) => {
     onCheck,
     form,
   }));
-  const save = async () => {
-    try {
-      const tableList = form.getFieldValue('tableList');
-      handleSave(tableList);
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo);
-    }
-  };
   // 根据这里做判断渲染表格
   const columns = defaultColumns
     .filter(item => !item.role || item.role.includes(customer.productType))
@@ -184,9 +172,10 @@ const EditFormTable = forwardRef((props, ref) => {
   return (
     <>
       <Form form={form} scrollToFirstError component={false}>
-        <Button onClick={onCheck}>测试</Button>
+        {/* <Button onClick={onCheck}>测试</Button> */}
         <EditableContext.Provider value={form}>
           <Table
+            scroll={{ y: 300, x: 1000 }}
             height={300}
             pagination={false}
             size="small"

src/pages/ServiceGoods/components/FormInformationBasic.jsx

@@ -46,7 +46,6 @@ const FormInformationBasic = forwardRef((props, ref) => {
       }
       values.specs = specs;
       values.temp = 'infoMation';
-      console.log(values);
       return values;
     } catch (errorInfo) {
       return null;
@@ -70,16 +69,11 @@ const FormInformationBasic = forwardRef((props, ref) => {
     }
   }, [customer.isEdit, editData]);
 
-  const onFinish = values => {
-    console.log('Received values of form: ', values);
-  };
-
   return (
     <Form
       {...formItemLayout}
       form={form}
       name="register"
-      onFinish={onFinish}
       initialValues={{
         brandId: null,
         name: '',
@@ -88,9 +82,9 @@ const FormInformationBasic = forwardRef((props, ref) => {
       }}
       scrollToFirstError
     >
-      <Button type="primary" onClick={onCheck}>
+      {/* <Button type="primary" onClick={onCheck}>
         测试
-      </Button>
+      </Button> */}
       <Form.Item
         name="categoryId"
         label="商品类目"
@@ -160,7 +154,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
           rules={[{ required: true, message: '请选择售后地址!' }]}
         >
           <Select showSearch placeholder="请选择售后地址" filterOption={fileterBrandOptions}>
-            {([{ id: 9527, addressName: '测试地址' }] || afterAddressList).map(item => (
+            {(afterAddressList || []).map(item => (
               <Select.Option key={item.id} value={item.id}>
                 {item.addressName}
               </Select.Option>

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -226,7 +226,6 @@ const FormPriceOrStock = forwardRef((props, ref) => {
     try {
       const values = await form.validateFields();
       const items = await editRef.current.onCheck();
-      console.log('================>items', items);
       if (items) {
         return { ...values, items, temp: 'infoSpecData' };
       }
@@ -358,7 +357,6 @@ const FormPriceOrStock = forwardRef((props, ref) => {
   useEffect(() => {
     if (customer.isEdit) {
       if (!editData) return;
-      console.log('===============>设置参数', editData);
       form.setFieldsValue(editData); // 设置规格数据
       firstOnChangeEvent(); // 触发成底部动态表格数据
       setSpecInitValue(editData); // 缓存规格数据

src/pages/ServiceGoods/components/FormRuleSetting.jsx

@@ -85,7 +85,7 @@ const FormRuleSetting = forwardRef((props, ref) => {
         >
           <Select mode="multiple" placeholder="请选择适用门店">
             {(supplierIdList || []).map(item => (
-              <Option value={item.id} key={item.id}>
+              <Option value={+item.id} key={item.id}>
                 {item.name}
               </Option>
             ))}

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

@@ -112,6 +112,8 @@ const FormRuleVPictures = forwardRef((props, ref) => {
       initialValues={{
         commonImageList: [],
         cardImageList: [],
+        imageList: {},
+        detailImageList: [],
       }}
     >
       <Form.Item
@@ -122,16 +124,18 @@ const FormRuleVPictures = forwardRef((props, ref) => {
           {
             required: imgConfig.commonImageList.rule,
             type: 'array',
-            message: `请上传${imgConfig.commonImageList.title}！`,
+            message: '请上传图片！',
           },
           {
+            validateTrigger: 'submit',
             validator(rule, value, callback) {
               if (customer.productType !== 1) {
                 return callback();
               }
+              // 规格图不为必传，如未上传规格图时，公共图为必传图
               const checkImageList = form.getFieldValue('imageList');
-              const check = Object.keys(checkImageList).length;
-              return check > 0 ? callback() : callback('请上传封面图片');
+              const check = Object.keys(checkImageList || {}).length;
+              return check || value.length ? callback() : callback('请上传封面图片');
             },
           },
         ]}
@@ -168,11 +172,14 @@ const FormRuleVPictures = forwardRef((props, ref) => {
       )}
       {!customer.isCard &&
         Object.keys(imageList).map(key => (
+          <div key={key} className={commonStyle.pictureWrapper}>
             <Form.Item
               name={['imageList', key]}
               key={key}
               label={`商品图片(${key})`}
-            rules={[{ required: imgConfig.imageList.rule, type: 'array', message: '请上传图片！' }]}
+              rules={[
+                { required: imgConfig.imageList.rule, type: 'array', message: '请上传图片！' },
+              ]}
               extra={imgConfig.imageList.renderExtra()}
             >
               <UploadImage
@@ -182,10 +189,11 @@ const FormRuleVPictures = forwardRef((props, ref) => {
                 pictures={imageList[key]}
                 setPictureList={list => onPictureSuccessEvent(list, key)}
               />
+            </Form.Item>
             <Button className={commonStyle.pullImage} type="primary">
               拉取公共图
             </Button>
-          </Form.Item>
+          </div>
         ))}
       <Form.Item
         name="detailImageList"

src/pages/ServiceGoods/components/UploadImage.jsx

@@ -138,6 +138,7 @@ const UploadImage = forwardRef((props, ref) => {
             setUploadLoading(false);
           }
         } catch (error) {
+          console.log(error);
           setUploadLoading(false);
           Modal.warning({
             maskClosable: true,

src/pages/ServiceGoods/config.js

@@ -12,7 +12,7 @@ export const TaskList = [
     name: '实体商品',
     type: 1,
     desc: '物流发货',
-    // hide: true,
+    hide: true,
     imgConfig: {
       commonImageList: {
         title: '公共滑动图',
@@ -37,7 +37,7 @@ export const TaskList = [
     name: '虚拟商品',
     type: 2,
     desc: '无需物流',
-    // hide: true,
+    hide: true,
     imgConfig: {
       commonImageList: {
         title: '公共滑动图',
@@ -58,36 +58,36 @@ export const TaskList = [
       },
     },
   },
+  // {
+  //   name: '电子卡卷',
+  //   type: 3,
+  //   desc: '无需物流',
+  //   hide: true,
+  //   imgConfig: {
+  //     commonImageList: {
+  //       title: '封面图片',
+  //       rule: true,
+  //       limit: 11,
+  //       renderExtra(leng) {
+  //         return `建议尺寸: ##宽##高 (${leng} / 1) `;
+  //       },
+  //     },
+  //     imageList: {
+  //       rule: true,
+  //       limit: 1,
+  //     },
+  //     detailImageList: {
+  //       title: '商品图片',
+  //       rule: true,
+  //       limit: null,
+  //       renderExtra() {
+  //         return '请上传商品图！';
+  //       },
+  //     },
+  //   },
+  // },
   {
     name: '电子卡卷',
-    type: 3,
-    desc: '无需物流',
-    hide: true,
-    imgConfig: {
-      commonImageList: {
-        title: '封面图片',
-        rule: true,
-        limit: 11,
-        renderExtra(leng) {
-          return `建议尺寸: ##宽##高 (${leng} / 1) `;
-        },
-      },
-      imageList: {
-        rule: true,
-        limit: 1,
-      },
-      detailImageList: {
-        title: '商品图片',
-        rule: true,
-        limit: null,
-        renderExtra() {
-          return '请上传商品图！';
-        },
-      },
-    },
-  },
-  {
-    name: '服务类商品',
     type: 4,
     desc: '无需物流',
     imgConfig: {
@@ -165,7 +165,7 @@ export const StaticColumns = customer => [
       min: 0,
     },
     roleRules: { required: true },
-    disabeldRender: () => customer.isJDGoods,
+    disabeldRender: () => customer.isJDGoods || customer.isService,
   },
   {
     title: '佣金费率',
@@ -175,7 +175,7 @@ export const StaticColumns = customer => [
     roleRules: { required: true },
     roleProps: {
       min: 0,
-      max: 100,
+      // max: 100,
     },
   },
   {
@@ -188,6 +188,7 @@ export const StaticColumns = customer => [
       min: 0,
     },
     roleRules: { required: true },
+    disabeldRender: () => customer.isService,
   },
   {
     title: '销售价',
@@ -207,15 +208,18 @@ export const StaticColumns = customer => [
     editable: true,
     batchRole: [1],
     batchProps: {
+      min: 0,
       precision: 3,
       max: 999999.999,
     },
     role: [1],
     roleRules: { required: true },
     roleProps: {
+      min: 0,
       precision: 3,
       max: 999999.999,
     },
+    disabeldRender: () => customer.isService,
   },
   {
     title: '库存',
@@ -226,17 +230,16 @@ export const StaticColumns = customer => [
     batchProps: {
       precision: 0,
       step: 1,
-      // eslint-disable-next-line radix
-      formatter: val => parseInt(val, '10') || '',
+      min: 0,
     },
     roleProps: {
       min: 0,
     },
     roleRules: { required: true },
-    disabeldRender: record => customer.isEdit && record.id,
+    disabeldRender: () => customer.isService,
   },
   {
-    title: '库存预警阈值',
+    title: '库存预警',
     dataIndex: 'productStockWarning',
     editable: true,
     batchRole: [1],
@@ -244,7 +247,10 @@ export const StaticColumns = customer => [
     roleRules: { required: true },
     roleProps: {
       min: 0,
+      precision: 0,
+      maxLength: 5,
     },
+    disabeldRender: () => customer.isService,
   },
   {
     title: '商品自编码',
@@ -253,6 +259,7 @@ export const StaticColumns = customer => [
     role: [1, 2],
     inputType: 'input',
     roleRules: { required: true },
+    disabeldRender: () => customer.isService,
   },
   {
     title: '京东链接',
@@ -261,6 +268,7 @@ export const StaticColumns = customer => [
     role: [1, 2],
     inputType: 'input',
     roleRules: { required: false },
+    disabeldRender: () => customer.isService,
   },
   {
     title: 'sku名称',

src/pages/ServiceGoods/index.jsx

@@ -9,18 +9,16 @@ import FormRuleSetting from './components/FormRuleSetting';
 import FormRuleVPictures from './components/FormRuleVPictures';
 import FormSettlementOthers from './components/FormSettlementOthers';
 import {
-  getProductDetail,
-  merchantCategoryGetAll,
   merchantBrandList,
   merchantSpecList,
   afterSalesAddrsPage,
   merchantgetJdPicList,
-  merchantProductAdd,
-  // getSupplierList,
   supplierListQuery,
   shopGetBySupplierId,
+  merchantProductAdd,
+  merchantProductEdit,
 } from './service';
-import { isUrl, filterSendData } from './utils';
+import { isUrl, filterSendData, clearCurrent } from './utils';
 import { ServiceContext } from './context';
 
 /**
@@ -41,70 +39,37 @@ const ServiceGoods = options => {
   const [isEdit, setIsEdit] = useState(false); // 是否是编辑状态
   const [productType, setProductType] = useState(4); // 商品状态
   const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
-  // const [categoryList, setCategoryList] = useState([]); // 获取三级类目
-  const [afterAddressList, setAfterAddressList] = useState([]);
-  const [supplierIdList, setSupplierIdList] = useState([]);
+  const [afterAddressList, setAfterAddressList] = useState([]); // 售后地址
+  const [supplierIdList, setSupplierIdList] = useState([]); // 适用们店列表
 
-  // const [shopList, setShopList] = useState([]);
   const [brandList, setBrandList] = useState([]); // 获取商品牌
   const [specList, setSpecList] = useState([]); // 规格列表
   const [editData, setEditData] = useState({}); // 编辑保存数据
-  const baseCheckList = [basicRef, stockRef, settingRef, settleOtrRef, picturesRef]; // 卡卷默认5个，到时改版为实体对应3个
-  const [checkFormList, setCheckFormList] = useState(baseCheckList);
+  // const [shopList, setShopList] = useState([]); // 供应商列表
+  const [checkFormList] = useState([basicRef, stockRef, settingRef, settleOtrRef, picturesRef]);
 
   const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
 
-  const changeCheckList = proType => {
-    const newBaseCheckList =
-      proType === 4 ? [...baseCheckList, settingRef, settleOtrRef] : baseCheckList;
-    setCheckFormList(newBaseCheckList);
-  };
-
-  const resetForm = () => {
-    checkFormList.forEach(({ current }) => {
-      if (current) {
-        current.reset();
-      }
-    });
-  };
+  const resetForm = () => clearCurrent(checkFormList).forEach(({ current }) => current.reset());
 
   const productChange = task => {
     setProductType(task.type);
-    changeCheckList(task.type);
     const timer = setTimeout(() => {
       resetForm();
       clearTimeout(timer);
     }, 1000);
   };
 
-  const handleCancel = () => {
+  const handleCancel = refresh => {
     setPageId(null);
     setIsEdit(false);
     setProductType(4); // 默认写死服务类商品
     setEditData({});
     setSpecKeyList([]);
     resetForm();
-    options.onChange(false);
-  };
-
-  // 编辑回显详情数据
-  const getProductDetailResponse = async id => {
-    try {
-      const res = await getProductDetail(id);
-      if (res && res.data) {
-        setProductType(res.data.type);
-        setEditData(res.data);
-      }
-    } catch (err) {
-      console.log('接口调用失败！');
-    }
+    options.onChange(false, refresh);
   };
 
-  // 获取三级类目分类数据
-  // const getMerchantCategory = async () => {
-  //   const result = await merchantCategoryGetAll();
-  //   // setCategoryList(result.data || []);
-  // };
   // 获取商品牌数据
   const getMerchantBrandList = async () => {
     if (!brandList.length) {
@@ -134,15 +99,20 @@ const ServiceGoods = options => {
   //     setShopList(result.data);
   //   }
   // };
-
-  const sendMerchantProductAdd = async sendData => {
+  const sendMerchantProductHttpRequest = async sendData => {
+    try {
       setPageLoading(true);
-    const addResponse = await merchantProductAdd(sendData);
+      const sendAsyncHttpRequest = isEdit ? merchantProductEdit : merchantProductAdd;
+      const addResponse = await sendAsyncHttpRequest(sendData);
       if (addResponse.data) {
-      message.success('添加成功!');
-      handleCancel();
+        message.success(`${isEdit ? '修改' : '添加'}成功!`);
+        handleCancel(true);
       }
       setPageLoading(false);
+    } catch (error) {
+      console.log(error);
+      setPageLoading(false);
+    }
   };
 
   const shopGetBySupplierIdResponse = async () => {
@@ -153,7 +123,7 @@ const ServiceGoods = options => {
   };
 
   const submitEvent = async () => {
-    const checkPromiseList = checkFormList.map(({ current }) => current.onCheck());
+    const checkPromiseList = clearCurrent(checkFormList).map(({ current }) => current.onCheck());
     const resuslt = await Promise.all(checkPromiseList);
     if (!resuslt.includes(null)) {
       const params = resuslt.reduce((origin, item) => {
@@ -161,9 +131,11 @@ const ServiceGoods = options => {
         origin[temp] = other;
         return origin;
       }, {});
-
       const sendData = filterSendData(productType, params);
-      sendMerchantProductAdd(sendData);
+      if (isEdit) {
+        sendData.id = pageId;
+      }
+      sendMerchantProductHttpRequest(sendData);
     }
   };
 
@@ -197,11 +169,10 @@ const ServiceGoods = options => {
       await getAfterSalesAddrsPage();
       await getMerchantSpecList();
       if (Object.keys(SourceData).length) {
-        // const isService = initData.state && initData.state !== 4;
         setEditData(SourceData);
-        setPageId(options.id);
+        setPageId(SourceData.id);
         setProductType(SourceData.productType);
-        changeCheckList(SourceData.productType);
+        // changeCheckList(SourceData.productType);
         setIsEdit(true);
       }
       setPageLoading(false);
@@ -233,8 +204,6 @@ const ServiceGoods = options => {
         jdSkuInfoUrl: params.skuLink,
       });
     }
-
-    console.log(event, params);
   };
 
   const providerValue = {
@@ -253,11 +222,13 @@ const ServiceGoods = options => {
       visible={options.visible}
       onCancel={() => handleCancel()}
       width={1000}
+      maskClosable={false}
+      keyboard={false}
       footer={[
         <Button key="submit" type="primary" loading={pageLoading} onClick={submitEvent}>
           提交
         </Button>,
-        <Button key="back" onClick={handleCancel}>
+        <Button key="back" onClick={() => handleCancel()}>
           返回
         </Button>,
       ]}

src/pages/ServiceGoods/service.js

@@ -73,6 +73,12 @@ export const merchantProductAdd = data =>
     data,
   });
 
+export const merchantProductEdit = data =>
+  request.post('/product/api/merchant/edit', {
+    prefix: goodsApi,
+    data,
+  });
+
 export const supplierListQuery = () =>
   request.get('/api/kdsp/supplier/supplier-list-query', {
     prefix: config.kdspApi,

src/pages/ServiceGoods/type.ts

-import { Button, Form, Input, Popconfirm, Table } from 'antd';
-
-export interface Task {
-  name: string;
-  type: number;
-  desc: string;
-}
-
-interface EditableRowProps {
-  index: number;
-}
-
-export type EditableTableProps = Parameters<typeof Table>[0];
-
-export type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;

src/pages/ServiceGoods/utils.js

@@ -77,9 +77,6 @@ export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFi
 
 const filterItems = (type, props) => {
   const { infoSpecData, serviceItem, infoImageData, infoMation, settlementItem } = props;
-
-  console.log('===========>infoSpecData', infoSpecData);
-
   const { imageList = {}, commonImageList, cardImageList } = infoImageData;
   return infoSpecData.items.map(item => {
     if (type === 4) {