Merge branch 'master' of git.quantgroup.cn:ui/merchant-manage-ui into feature/ue-upgrade

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'max-len': ['error', { code: 200 }],
     'no-param-reassign': 0,
     'no-console': 0,
+    'no-plusplus': ['off'],
     '@typescript-eslint/camelcase': ['off'],
     '@typescript-eslint/no-unused-vars': ['off'],
   },

config/config.js

@@ -206,11 +206,23 @@ export default {
               icon: 'smile',
               component: './password',
             },
+            {
+              path: '/chainStoreManage',
+              name: 'chainStoreManage',
+              icon: 'smile',
+              component: './chainStoreManage',
+            },
             // {
             //   path: '/GoodsManage-new',
             //   name: 'GoodsManageNew',
             //   component: './GoodsManage-new',
             // },
+            {
+              title: '服务商品改造-商品模块',
+              path: '/ServiceGoods/:id',
+              name: 'ServiceGoods',
+              component: './ServiceGoods/index',
+            },
             {
               component: './404',
             },

config/env.config.js

@@ -11,7 +11,7 @@ const envAPi = {
   prologueDomain: 'https://mall-yxm.liangkebang.net',
   // qiniuHost: 'https://appsync.lkbang.net',
   qiniuHost: 'https://kdspstatic.q-gp.com/',
-  opapiHost: 'https://opapi-yxm.liangkebang.net',
+  opapiHost: 'https://opapi-xyqb.liangkebang.net',
 };
 
 const prodApi = {

package.json

@@ -67,9 +67,11 @@
 		"path-to-regexp": "^3.1.0",
 		"qs": "^6.9.0",
 		"react": "^16.8.6",
+		"react-bmapgl": "^0.2.7",
 		"react-copy-to-clipboard": "^5.0.1",
 		"react-dom": "^16.8.6",
 		"react-helmet": "^5.2.1",
+		"react-router-dom": "^5.1.2",
 		"react-sortablejs": "^6.0.0",
 		"slash2": "^2.0.0",
 		"sortablejs": "^1.13.0",
@@ -125,4 +127,4 @@
 		"scripts/**/*.js"
 	],
 	"author": "congmin.hao"
-}
+}
\ No newline at end of file

src/components/BaiduMap/index.jsx

+import React, { useState } from 'react';
+import { Map, Marker, ZoomControl, CityListControl } from 'react-bmapgl';
+import { Modal, Input } from 'antd';
+
+export default props => {
+  const { visible, onSetPoint, onCancel, lngLat } = props;
+  let defaultLnglat = { lng: 116.404449, lat: 39.914889 };
+  if (lngLat) {
+    defaultLnglat = lngLat;
+  }
+
+  const [lnglat, setLnglat] = useState(defaultLnglat);
+  const [lnglatText, setLnglatText] = useState(`${defaultLnglat.lng},${defaultLnglat.lat}`);
+
+  const handleOk = () => {
+    onSetPoint(lnglatText);
+    onCancel(true);
+  };
+
+  const handleCancle = () => onCancel(true);
+
+  const onGetPoint = e => {
+    setLnglat({
+      lng: e.latlng.lng,
+      lat: e.latlng.lat,
+    });
+    setLnglatText(`${e.latlng.lng},${e.latlng.lat}`);
+  };
+
+  return (
+    <Modal
+      title="门店信息"
+      visible={visible}
+      width="800px"
+      onOk={() => handleOk()}
+      onCancel={() => handleCancle()}
+    >
+      <div style={{ marginBottom: '20px' }}>
+        <Input value={lnglatText} placeholder="点击地图选择经纬度" />
+      </div>
+      <div style={{ width: '100%', height: '360px' }}>
+        <Map
+          center={lnglat}
+          enableScrollWheelZoom
+          enableDoubleClickZoom
+          coordType="gcj02"
+          onClick={e => onGetPoint(e)}
+          zoom={15}
+        >
+          <Marker
+            position={lnglat}
+            Icon
+            coordType="gcj02"
+            autoViewport
+            viewportOptions={{
+              zoomFactor: -12,
+            }}
+          />
+          <CityListControl />
+          <ZoomControl />
+        </Map>
+      </div>
+    </Modal>
+  );
+};

src/pages/GoodsManage/SearchForm/index.jsx

@@ -195,6 +195,13 @@ class goodsManage extends Component {
             <InputNumber style={iptNumWidth} placeholder="请输入" onChange={this.valueMin} />
           </FormItem>
         </FormItem>
+        <FormItem label="商品类型" name="productType">
+          <Select style={selectW} placeholder="请选择商品类型">
+            <Option value={1}>实体商品</Option>
+            <Option value={2}>虚拟商品</Option>
+            <Option value={4}>服务类商品</Option>
+          </Select>
+        </FormItem>
         <FormItem name="thirdSkuNo" label="第三方SKU编码">
           <Input placeholder="请输入第三方SKU编码" allowClear style={selectW} />
         </FormItem>

src/pages/GoodsManage/createModal/index.jsx

@@ -710,7 +710,7 @@ class goodsManage extends Component {
                 </Col>
                 {specListData.length
                   ? specListData.map((item, index) => (
-                      <Col span={24}>
+                      <Col key={item.specId} span={24}>
                         <FormItem label={item.specName} labelCol={{ span: 2 }}>
                           {getFieldDecorator(`${item.specId}`, {
                             initialValue: initData[item.specId],

src/pages/GoodsManage/index.jsx

@@ -22,9 +22,10 @@ import {
 } from './service';
 import LogModal from './LogModal';
 import CreateModal from './createModal';
-import { column, JDSHOPID } from './staticdata';
+import { column, JDSHOPID, ProcessEditData } from './staticdata';
 import SearchForm from './SearchForm';
 import TempleatModal from './TempleatModal';
+import ServiceGoods from '../ServiceGoods';
 
 @connect(({ goodsManage }) => ({
   goodsManage,
@@ -50,6 +51,9 @@ class goodsManage extends Component {
     templateList: [],
     stockSkuIds: [],
     isType: '',
+
+    serviceVisble: false,
+    serviceData: {},
   };
 
   currentLog = null;
@@ -117,7 +121,7 @@ class goodsManage extends Component {
     this.setState({
       createloading: true,
     });
-    const { data, msg } = await spuDetail({ id: spuId });
+    const { data, msg } = await spuDetail({ id: spuId }); // spuId
     if (data) {
       data.state = state;
       data.pageProductType = productType;
@@ -320,6 +324,43 @@ class goodsManage extends Component {
     });
   };
 
+  serviceVisbleChange = async row => {
+    const { state, spuId, productType } = row;
+    this.setState({ createloading: true });
+    const { data, msg } = await spuDetail({ id: spuId }); // spuId
+    if (data) {
+      const SourceData = ProcessEditData(data, row);
+      console.log('index.js=============>', SourceData);
+      this.setState({
+        serviceData: SourceData,
+        serviceVisble: true,
+        createloading: false,
+      });
+    } else {
+      this.setState({
+        createloading: false,
+      });
+      notification.warning({
+        message: msg,
+      });
+    }
+  };
+
+  serviceVisbleOpen = () => {
+    console.log('============>open');
+    this.serviceVisbleClose(true);
+  };
+
+  serviceVisbleClose = (flag, refresh) => {
+    this.setState({
+      serviceVisble: flag,
+      serviceData: {},
+    });
+    if (refresh) {
+      this.handleSearch();
+    }
+  };
+
   render() {
     const {
       goodsManage: { tableData = {} },
@@ -353,6 +394,7 @@ class goodsManage extends Component {
               // addSpu={() => this.setState({ createVisible: true, initData: {} })}
               selectNum={selectedRowKeys.length}
               setArea={(isALL, type) => this.setArea(isALL, type)}
+              serviceVisbleOpen={this.serviceVisbleOpen}
             />
           </Card>
           <Spin spinning={this.state.loading}>
@@ -438,6 +480,16 @@ class goodsManage extends Component {
             isType={this.state.isType}
             templateList={this.state.templateList}
           />
+          {/* '894048258062' */}
+          <ServiceGoods
+            visible={this.state.serviceVisble}
+            onChange={this.serviceVisbleClose}
+            SourceData={this.state.serviceData}
+            shopList={this.shopList}
+            categoryList={this.state.treeData}
+            virtualCategoryList={this.state.virtualTreeData}
+            specListData={this.state.specListData}
+          />
         </Spin>
       </PageHeaderWrapper>
     );

src/pages/GoodsManage/staticdata.js

 import React from 'react';
 import { Button, Badge } from 'antd';
 import styles from './style.less';
+import { resetTime } from '../../utils/utils';
 
 export const productType = [
   {
@@ -37,7 +38,7 @@ export function column() {
       width: 125,
       align: 'center',
       render: (_, row) => {
-        if (row.type !== 1) {
+        if (row.type === 2) {
           return (
             <Badge
               count={
@@ -160,7 +161,13 @@ export function column() {
               type="primary"
               size="small"
               className={styles.button}
-              onClick={() => this.onUpdateInfo(row)}
+              onClick={() => {
+                if (row.type === 4) {
+                  this.serviceVisbleChange(row);
+                } else {
+                  this.onUpdateInfo(row);
+                }
+              }}
             >
               修改
             </Button>
@@ -203,3 +210,138 @@ export const productTypeList = [
 ];
 
 export const JDSHOPID = [3, 5, 6];
+
+/** ********************************************************************************* */
+/** ********************************************************************************* */
+/** ********************************************************************************* */
+// 编辑回显示时只获取用到的数据
+const filterItem = skuItem => {
+  const { serviceItem, ...argsItem } = skuItem;
+  argsItem.disabled = true;
+  return argsItem;
+};
+
+const filterSpecData = skuList =>
+  skuList.reduce(
+    (orgin, skuItem) => {
+      const item = filterItem(skuItem);
+      const { firstSpecValue, secondSpecValue, id } = item;
+      if (firstSpecValue && !orgin.firstDuplicate.includes(firstSpecValue)) {
+        orgin.firstSpecValue.push(item);
+        orgin.firstDuplicate.push(firstSpecValue);
+      }
+      if (secondSpecValue && !orgin.secondDuplicate.includes(secondSpecValue)) {
+        orgin.secondSpecValue.push(item);
+        orgin.secondDuplicate.push(secondSpecValue);
+      }
+      // origin.skuItemResultList.push(item);
+      return orgin;
+    },
+    {
+      firstSpecValue: [],
+      secondSpecValue: [],
+      firstDuplicate: [],
+      secondDuplicate: [],
+      skuItemResultList: [],
+    },
+  );
+
+const filterCarouseList = (carouseList = []) =>
+  carouseList.reduce((origin, itemImg) => {
+    if (itemImg.skuSpecImageList.length) {
+      origin[itemImg.specValue || 'NOT'] = itemImg.skuSpecImageList || [];
+    }
+    return origin;
+  }, {});
+
+const filterServiceItem = (type, serviceItem) => {
+  if (type !== 4) {
+    return {};
+  }
+  console.log(serviceItem);
+  return {
+    serviceItem: {
+      useTime: [resetTime(serviceItem.useStartTime), resetTime(serviceItem.useEndTime)],
+      purchaseTime: [
+        resetTime(serviceItem.purchaseStartTime),
+        resetTime(serviceItem.purchaseEndTime),
+      ], // 购买开始时间
+      shopIds: serviceItem.shopIds || [], // 适用门店列表
+      unavailableDate: serviceItem.unavailableDate, // 不可用日期
+      useTimeDescription: serviceItem.useTimeDescription, // 使用时间
+      useMethod: serviceItem.useMethod, // 使用方法
+      ruleDescription: serviceItem.ruleDescription, // 规则说明
+      applyScope: serviceItem.applyScope, // 适用范围
+      tips: serviceItem.tips, // 温馨提示
+    },
+    settlementItem: {
+      settlementMethod: 1,
+      limitPurchase: Boolean(serviceItem.limitPurchase), // 是否限购1:限购/0:不限购
+      limitPurchaseType: serviceItem.limitPurchaseType, // 限购类型，如果限购必填1:长期限购/2:周期限购
+      limitPurchaseCycle: serviceItem.limitPurchaseCycle, // 限购周期1：每天/7：7天/30：30天
+      limitPurchaseQuantity: serviceItem.limitPurchaseQuantity, // 限购数量
+      packageContent: serviceItem.packageContent,
+      appointment: serviceItem.appointment, // 预约
+      receptionVolume: serviceItem.receptionVolume, // 接待数量
+    },
+  };
+};
+
+export const ProcessEditData = (data, row) => {
+  const [oneItem = {}] = data.skuList;
+  const serviceItem = oneItem.serviceItem || {};
+  const orginSpecItem = filterSpecData(data.skuList);
+  const imageList = filterCarouseList(data.carouseList);
+  const servesItemParams = filterServiceItem(data.productType, serviceItem);
+
+  const specsParams = data.specs.reduce((origin, item) => {
+    origin[item.specId] = item.specValues.map(child => child.value);
+    return origin;
+  }, {});
+
+  let commonImageList = data.commonImageList || [];
+  let cardImageList = [];
+  if (data.productType === 4) {
+    const [firstImg, ...towAfterImgList] = oneItem.imageList || [];
+    cardImageList = towAfterImgList || [];
+    commonImageList = [firstImg];
+  }
+  const SourceData = {
+    state: row.state,
+    id: data.id,
+    productType: data.productType,
+    pageProductType: row.productType,
+    infoMation: {
+      ...specsParams,
+      brandId: data.brandId,
+      supplierId: data.supplierId,
+      character: data.character,
+      name: data.name,
+      categoryId: [data.firstCategoryId, data.secondCategoryId, data.thirdCategoryId],
+      description: serviceItem.description || null,
+      afterAddressId: data.afterAddressId || null,
+    },
+    infoSpecData: {
+      firstSpec: oneItem.firstSpec,
+      firstSpecId: oneItem.firstSpecId,
+      firstSpecValue: orginSpecItem.firstSpecValue,
+      secondSpec: oneItem.secondSpec,
+      secondSpecId: oneItem.secondSpecId,
+      secondSpecValue: orginSpecItem.secondSpecValue,
+    },
+    infoImageData: {
+      imageList,
+      cardImageList,
+      commonImageList,
+      detailImageList: data.detailImageList,
+    },
+    skuList: data.skuList,
+    ...servesItemParams,
+  };
+  console.log('SourceData===============>', SourceData);
+  return SourceData;
+};
+
+/** ********************************************************************************* */
+/** ********************************************************************************* */
+/** ********************************************************************************* */

src/pages/ServiceGoods/common.less

+.header {
+  :global {
+    .ant-pro-page-header-wrap-children-content {
+      margin: 0;
+    }
+  }
+}
+
+.container {
+  padding: 0 10px;
+  background-color: #fff;
+}
+
+.title {
+  position: relative;
+  height: 44px;
+  margin-bottom: 10px;
+  padding-left: 30px;
+  line-height: 44px;
+  background-color: #f8f8f8;
+  &::before {
+    position: absolute;
+    top: 12px;
+    left: 15px;
+    width: 4px;
+    height: 20px;
+    background-color: #319bfe;
+    content: '';
+  }
+}
+
+.prodcutContent {
+  display: flex;
+  padding-bottom: 10px;
+}
+
+.productCard {
+  margin-bottom: 0;
+  margin-left: 20px;
+  padding: 10px 20px 5px 20px;
+  text-align: center;
+  border: solid #ccc 1px;
+  border-radius: 5px;
+  cursor: pointer;
+  :global {
+    .prodcut-name {
+      font-weight: bold;
+    }
+    .prodcut-desc {
+      color: #bbb;
+    }
+  }
+}
+.activeCard {
+  position: relative;
+  overflow: hidden;
+  border-color: #165cd3;
+  &::after {
+    position: absolute;
+    right: -15px;
+    bottom: -15px;
+    width: 30px;
+    height: 30px;
+    background-color: #165cd3;
+    transform: rotate(45deg);
+    content: '';
+  }
+  :global {
+    .prodcut-name {
+      color: #165cd3;
+      font-weight: bold;
+    }
+  }
+}
+
+.pictureWrapper {
+  position: relative;
+}
+.pullImage {
+  position: absolute;
+  top: 30px;
+  right: 40px;
+}

src/pages/ServiceGoods/components/CommonTemplate.jsx

+import React, { useState } from 'react';
+import { Select, Form, InputNumber, Input, Button, Popover } from 'antd';
+import commonStyle from '../common.less';
+
+export const WrapperContainer = props => (
+  <div className={commonStyle.container}>{props.children}</div>
+);
+
+/**
+ * title 组件
+ * value 可以传入多种类型的值
+ * onChange只会回调 number|undefined 类型
+ * 当isNaN(Number(value)) 为true的时候，代表选择默认类型
+ * 当选择默认类型的时候，onChange会回调undefined
+ * @param props
+ */
+
+export const Title = props => (
+  <div className={commonStyle.title}>
+    <h3>{props.title}</h3>
+  </div>
+);
+
+export const SelectTemplate = props => {
+  const {
+    value,
+    onChange,
+    formName,
+    noSty,
+    defaultOptionName,
+    dataList,
+    fieldNames,
+    ...resetProps
+  } = props;
+  if (!dataList.length) {
+    return null;
+  }
+  const selectTemp = (
+    <Select allowClear {...resetProps}>
+      {defaultOptionName ? (
+        <Select.Option key="default" value={0}>
+          {defaultOptionName}
+        </Select.Option>
+      ) : null}
+      {dataList.map((item, index) => {
+        const val = fieldNames ? item[fieldNames.value] : item;
+        const lab = fieldNames ? item[fieldNames.label] : item;
+        return (
+          <Select.Option key={val} value={val}>
+            {lab}
+          </Select.Option>
+        );
+      })}
+    </Select>
+  );
+
+  return formName ? (
+    <Form.Item noStyle={noSty} name={formName} key={formName}>
+      {selectTemp}
+    </Form.Item>
+  ) : (
+    selectTemp
+  );
+};
+
+export const CreateFormInput = props => {
+  const {
+    batchRole,
+    rowIndex,
+    dataIndex,
+    onBlurEvent,
+    onClickEvent,
+    record,
+    role,
+    roleProps,
+    title,
+    type,
+    batchProps,
+    disabeldRender,
+    ...options
+  } = props;
+
+  if (type === 'input') {
+    return (
+      <Input
+        {...roleProps}
+        {...options}
+        style={{ width: '100%' }}
+        placeholder={`请输入${title}`}
+        onBlur={e => onBlurEvent(e.target.value, dataIndex, rowIndex)}
+      />
+    );
+  }
+
+  if (type === 'btnText') {
+    return (
+      <Popover content={record.name} trigger="hover">
+        <Button type="text">查看名称</Button>
+      </Popover>
+    );
+  }
+
+  if (type === 'text') {
+    return <span className="ant-form-text">{record[dataIndex]}</span>;
+  }
+
+  if (type === 'option') {
+    return (
+      <>
+        {record.skuLink && (
+          <Button type="primary" size="small" onClick={() => onClickEvent('cloneImg', record)}>
+            拉图片
+          </Button>
+        )}
+        {roleProps.isJDGoods && (
+          <Button
+            type="primary"
+            size="small"
+            onClick={() => onClickEvent('updateName', { ...record, dataIndex, rowIndex })}
+            disabled={props.disabled}
+          >
+            修改sku名称
+          </Button>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <InputNumber
+      {...roleProps}
+      {...options}
+      style={{ width: '100%' }}
+      placeholder={`请输入${title}`}
+      onBlur={e => {
+        onBlurEvent(e.target.value, dataIndex, rowIndex);
+      }}
+    />
+  );
+};

src/pages/ServiceGoods/components/EditFormTable.jsx

+import { Input, Modal, Button, Form, Table, InputNumber } from 'antd';
+import React, {
+  useContext,
+  createContext,
+  useEffect,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import { ServiceContext } from '../context';
+import { CreateFormInput } from './CommonTemplate';
+import UUID from '../../../utils/uuid';
+
+const UpdateSkuName = ({ skuVisble, value, confirmEvent, cancelEvent }) => {
+  const [skuForm] = Form.useForm();
+
+  const handleCancel = () => {
+    skuForm.resetFields();
+    cancelEvent();
+  };
+  const handleSaveEvent = async () => {
+    try {
+      const result = await skuForm.validateFields();
+      confirmEvent({ skuName: result.skuName, rowIndex: value.rowIndex });
+      handleCancel();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <Modal title="修改SKU名称" visible={skuVisble} onOk={handleSaveEvent} onCancel={handleCancel}>
+      <Form form={skuForm} name="skuRegister">
+        <Form.Item
+          label="sku名称"
+          key="skuName"
+          name="skuName"
+          initialValue={value.skuName}
+          rules={[{ required: true, message: '请输入sku名称！' }]}
+        >
+          <Input.TextArea autoSize={{ minRows: 2, maxRows: 6 }} allowClear />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+const EditableContext = createContext(null);
+const EditFormTable = forwardRef((props, ref) => {
+  const { initData, defaultColumns, setTableData, mergeTable } = props;
+  const customer = useContext(ServiceContext);
+  const [dataSource, setDataSource] = useState([]);
+  const [skuVisble, setSkuVisble] = useState(false);
+  const [skuNameItem, setSkuNameItem] = useState({
+    skuName: '',
+    rowIndex: null,
+  });
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.setFieldsValue({
+      tableList: initData,
+    });
+    setDataSource([...initData]);
+  }, [initData]);
+
+  // const handleSave = row => {
+  //   form.setFieldsValue({
+  //     tableList: [...row],
+  //   });
+  //   const dataList = [...dataSource];
+  //   dataList[rowIndex][dataIndex] = value;
+  //   setDataSource([...dataList]);
+  // };
+
+  const handleSave = (value, dataIndex, rowIndex) => {
+    // form.setFieldsValue({
+    //   [`tableList[${rowIndex}][${dataIndex}]`]: value,
+    // });
+    const dataList = [...dataSource];
+    dataList[rowIndex][dataIndex] = value;
+    setDataSource([...dataList]);
+  };
+
+  const onCheck = async () => {
+    try {
+      await form.validateFields();
+      const newTableList = [...dataSource].map(item => {
+        const { rowSpanCount, option, ...childItem } = item;
+        return childItem;
+      });
+      console.log('===============>newTableList', newTableList);
+      return newTableList;
+    } catch (errorInfo) {
+      console.log(errorInfo);
+      return null;
+    }
+  };
+
+  const rowOnClickEvent = row => {
+    setSkuVisble(true);
+    setSkuNameItem({
+      skuName: row.name,
+      rowIndex: row.rowIndex,
+    });
+  };
+
+  const cancelEvent = () => {
+    setSkuVisble(false);
+  };
+
+  const confirmEvent = skuItem => {
+    const newDataSource = [...dataSource];
+    newDataSource[skuItem.rowIndex].name = skuItem.skuName;
+    setDataSource(newDataSource);
+    form.setFieldsValue({
+      tableList: newDataSource,
+    });
+  };
+  const onClickEvent = () => {};
+
+  useImperativeHandle(ref, () => ({
+    onCheck,
+    form,
+  }));
+  // 根据这里做判断渲染表格
+  const columns = defaultColumns
+    .filter(item => !item.role || item.role.includes(customer.productType))
+    .map((col, colIndex) => ({
+      ...col,
+      align: 'center',
+      render(text, record, rowIndex) {
+        const {
+          dataIndex,
+          title,
+          editable,
+          roleRules = {},
+          roleProps = {},
+          inputType,
+          ...otherParams
+        } = col;
+        const disabled = Boolean(col.disabeldRender ? col.disabeldRender(record) : false);
+        const childrenElement = (
+          <Form.Item
+            style={{ margin: 0 }}
+            key={`${dataIndex}_${rowIndex}`}
+            name={['tableList', rowIndex, dataIndex]}
+            initialValue={record[dataIndex] || null}
+            rules={[{ required: roleRules.required, message: `请输入${title}.` }]}
+          >
+            <CreateFormInput
+              {...otherParams}
+              title={title}
+              type={inputType}
+              record={record}
+              rowIndex={rowIndex}
+              roleProps={roleProps}
+              dataIndex={dataIndex}
+              disabled={disabled}
+              onBlurEvent={handleSave}
+              onClickEvent={onClickEvent}
+            />
+          </Form.Item>
+        );
+        const rowProps = { children: childrenElement, props: {} };
+        if (dataIndex === 'firstSpecValue' && mergeTable) {
+          const rowSpan = record.rowSpanCount;
+          rowProps.props.rowSpan = rowSpan || 0;
+        }
+        return rowProps;
+      },
+    }));
+
+  return (
+    <>
+      <Form form={form} scrollToFirstError component={false}>
+        {/* <Button onClick={onCheck}>测试</Button> */}
+        <EditableContext.Provider value={form}>
+          <Table
+            scroll={{ y: 300, x: 1000 }}
+            height={300}
+            pagination={false}
+            size="small"
+            bordered
+            dataSource={dataSource}
+            columns={columns}
+          />
+        </EditableContext.Provider>
+      </Form>
+      <Button onClick={() => {}}></Button>
+      <UpdateSkuName
+        skuVisble={skuVisble}
+        form={form}
+        value={skuNameItem}
+        confirmEvent={confirmEvent}
+        cancelEvent={cancelEvent}
+      />
+    </>
+  );
+});
+
+export default EditFormTable;

src/pages/ServiceGoods/components/FormInformationBasic.jsx

+import React, { useState, useContext, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Cascader, Form, Input, Select, Popover, Button, Checkbox } from 'antd';
+import { formItemLayout } from '../config';
+import { ServiceContext } from '../context';
+
+const CreateSelectOption = optionList =>
+  optionList.map(brandItem => (
+    <Select.Option key={brandItem.id} value={brandItem.id}>
+      {brandItem.name}
+    </Select.Option>
+  ));
+
+const fileterBrandOptions = (input, options) => options.children.includes(input);
+
+const filterCategoryOptions = (inputValue, path) =>
+  path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+
+const FormInformationBasic = forwardRef((props, ref) => {
+  const {
+    editData,
+    newCategoryList,
+    categoryList,
+    virtualCategoryList,
+    brandList,
+    shopList,
+    afterAddressList,
+    specListData,
+  } = props;
+  const [form] = Form.useForm();
+  const [noreBrandList, setNoreBrandList] = useState([]);
+  const customer = useContext(ServiceContext);
+
+  const onCheck = async () => {
+    try {
+      const values = await form.validateFields();
+      const specs = [];
+      // 非服务类商品过滤specs数据
+      if (!customer.isCard) {
+        specListData.forEach(item => {
+          const specValues = values[item.specId];
+          // 判断是否包含改参数
+          if (specValues) {
+            specs.push({ specId: item.specId, specValues });
+          }
+          delete values[item.specId];
+        });
+      }
+      values.specs = specs;
+      values.temp = 'infoMation';
+      return values;
+    } catch (errorInfo) {
+      return null;
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    onCheck,
+    reset: form.resetFields,
+  }));
+
+  useEffect(() => {
+    const noreList = (brandList || []).filter(item => item.name === '虚拟商品');
+    setNoreBrandList(noreList);
+  }, [brandList]);
+
+  useEffect(() => {
+    if (customer.isEdit) {
+      if (!editData) return;
+      form.setFieldsValue(editData);
+    }
+  }, [customer.isEdit, editData]);
+
+  return (
+    <Form
+      {...formItemLayout}
+      form={form}
+      name="register"
+      initialValues={{
+        brandId: null,
+        name: '',
+        categoryId: [],
+        description: '',
+      }}
+      scrollToFirstError
+    >
+      {/* <Button type="primary" onClick={onCheck}>
+        测试
+      </Button> */}
+      <Form.Item
+        name="categoryId"
+        label="商品类目"
+        rules={[{ type: 'array', required: true, message: '请输入商品类目!' }]}
+      >
+        <Cascader
+          disabled={customer.isService}
+          placeholder="请选择商品类目！"
+          showSearch={{ filter: filterCategoryOptions }}
+          fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+          options={newCategoryList[customer.productType]}
+        />
+      </Form.Item>
+      {!customer.isCard && (
+        <Form.Item
+          name="brandId"
+          label="商品品牌"
+          rules={[{ required: true, message: '请选择商品品牌!' }]}
+          extra="若需新增品牌请联系业务员"
+        >
+          <Select
+            disabled={customer.isService}
+            showSearch
+            placeholder="请选择商品品牌"
+            filterOption={fileterBrandOptions}
+          >
+            {customer.productType === 2
+              ? CreateSelectOption(noreBrandList)
+              : CreateSelectOption(brandList)}
+          </Select>
+        </Form.Item>
+      )}
+      <Popover content={form.getFieldValue('name')} trigger="hover">
+        <Form.Item
+          key="name"
+          name="name"
+          label="商品名称"
+          rules={[
+            { required: true, min: 2, message: '请输入最少两个字符的商品名称!', whitespace: true },
+          ]}
+        >
+          <Input disabled={customer.isService} placeholder="请输入商品名称" />
+        </Form.Item>
+      </Popover>
+      {customer.isJDGoods && (
+        <Button key="jdMsg" danger type="text">
+          *本列表的商品名称仅供搜索使用，不在前端作展示。若要修改APP端展示的商品名称，请在商品信息中修改。
+        </Button>
+      )}
+      {!customer.isCard && (
+        <Form.Item
+          name="character"
+          label="商品卖点"
+          rules={[{ required: true, message: '请输入商品卖点!', whitespace: true }]}
+        >
+          <Input
+            maxLength={50}
+            placeholder="卖点最优可填写3个词,12个字。前后用空格加竖杠分隔,例: 莹莹剔透 | 粒粒优选 | 易煮易熟"
+          />
+        </Form.Item>
+      )}
+
+      {!customer.isCard && (
+        <Form.Item
+          name="afterAddressId"
+          label="售后地址"
+          rules={[{ required: true, message: '请选择售后地址!' }]}
+        >
+          <Select showSearch placeholder="请选择售后地址" filterOption={fileterBrandOptions}>
+            {(afterAddressList || []).map(item => (
+              <Select.Option key={item.id} value={item.id}>
+                {item.addressName}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      )}
+
+      {!customer.isCard &&
+        specListData.map((item, index) => (
+          <Form.Item name={item.specId} key={item.specId} label={item.specName}>
+            <Checkbox.Group options={item.specValues} />
+          </Form.Item>
+        ))}
+
+      {/* <Form.Item
+        name="brandId"
+        label="供应商名称"
+        rules={[{ required: true, message: '请选择供应商名称!' }]}
+      >
+        <Select showSearch placeholder="请选择供应商名称" filterOption={fileterBrandOptions}>
+          {CreateSelectOption(brandList)}
+        </Select>
+      </Form.Item> */}
+
+      {customer.isCard ? (
+        <Form.Item
+          key="description"
+          name="description"
+          label="描述"
+          rules={[{ required: true, message: '请输入描述,100字以内！' }]}
+        >
+          <Input.TextArea showCount maxLength={100} placeholder="请输入描述, 100字以内！" />
+        </Form.Item>
+      ) : null}
+    </Form>
+  );
+});
+
+export default FormInformationBasic;

src/pages/ServiceGoods/components/FormRuleSetting.jsx

+import { Form, Input, Select, Checkbox, DatePicker } from 'antd';
+import React, { useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
+import { WeeksList, formItemLayout } from '../config';
+import { ServiceContext } from '../context';
+import { formatTime } from '../../../utils/utils';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+const WeekCheckBox = () =>
+  WeeksList.map(item => (
+    <Checkbox key={item.value} value={item.value} style={{ lineHeight: '32px' }}>
+      {item.name}
+    </Checkbox>
+  ));
+
+const rangeConfig = {
+  rules: [{ type: 'array', required: true, message: '请选择时间!' }],
+};
+
+const FormRuleSetting = forwardRef((props, ref) => {
+  const { editData, supplierIdList } = props;
+  const [form] = Form.useForm();
+  const customer = useContext(ServiceContext);
+
+  useEffect(() => {
+    if (customer.isEdit) {
+      if (!editData) return;
+      form.setFieldsValue(editData);
+    }
+  }, [customer.isEdit, editData]);
+
+  const onCheck = async () => {
+    try {
+      const { useTime, purchaseTime, ...values } = await form.validateFields();
+      return {
+        useStartTime: formatTime(useTime[0]),
+        useEndTime: formatTime(useTime[1]),
+
+        purchaseStartTime: formatTime(purchaseTime[0]),
+        purchaseEndTime: formatTime(purchaseTime[1]),
+        temp: 'serviceItem',
+        ...values,
+      };
+    } catch (errorInfo) {
+      return null;
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    onCheck,
+    reset: form.resetFields,
+  }));
+  return (
+    <>
+      <Form
+        {...formItemLayout}
+        form={form}
+        name="register"
+        initialValues={{
+          useTime: [], // 使用开始时间
+          // useEndTime: '', // 使用结束时间
+          purchaseTime: [], // 购买开始时间
+          // purchaseEndTime: '2022-07-27 06', // 购买结束时间
+          shopIds: [], // 适用门店列表
+          unavailableDate: [], // 不可用日期
+          useTimeDescription: '', // 使用时间
+          useMethod: '', // 使用方法
+          ruleDescription: '', // 规则说明
+          applyScope: '', // 适用范围
+          tips: '', // 温馨提示
+        }}
+        scrollToFirstError
+      >
+        <Form.Item name="purchaseTime" label="购买时间" {...rangeConfig}>
+          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+        </Form.Item>
+        <Form.Item name="useTime" label="有效期" {...rangeConfig}>
+          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+        </Form.Item>
+        <Form.Item
+          name="shopIds"
+          label="适用门店"
+          rules={[{ required: true, message: '请选择适用门店!', type: 'array' }]}
+        >
+          <Select mode="multiple" placeholder="请选择适用门店">
+            {(supplierIdList || []).map(item => (
+              <Option value={+item.id} key={item.id}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          name="unavailableDate"
+          label="不可用日期"
+          rules={[{ required: false, message: '请选择不可用日期!', type: 'array' }]}
+        >
+          <Checkbox.Group>{WeekCheckBox()}</Checkbox.Group>
+        </Form.Item>
+        <Form.Item
+          name="useTimeDescription"
+          label="使用时间"
+          rules={[{ required: false, message: '请输入描述！' }]}
+        >
+          <Input.TextArea
+            showCount
+            maxLength={100}
+            placeholder="例如：11:00-12:00;14:00-17:00可用，其他时间不可用"
+          />
+        </Form.Item>
+        <Form.Item
+          name="useMethod"
+          label="使用方法"
+          rules={[{ required: true, message: '请输使用方法，200字以内！' }]}
+        >
+          <Input.TextArea showCount maxLength={200} placeholder="请输使用方法，200字以内！" />
+        </Form.Item>
+        <Form.Item
+          name="ruleDescription"
+          label="规则说明"
+          rules={[{ required: true, message: '请输规则说明，200字以内！' }]}
+        >
+          <Input.TextArea showCount maxLength={200} placeholder="请输规则说明，200字以内！" />
+        </Form.Item>
+        <Form.Item
+          name="applyScope"
+          label="适用范围"
+          rules={[{ required: false, message: '请输入适用范围' }]}
+        >
+          <Input.TextArea
+            showCount
+            maxLength={50}
+            placeholder="请输入适用范围，50字以内 例如：全场通用"
+          />
+        </Form.Item>
+        <Form.Item
+          name="tips"
+          label="温馨提示"
+          rules={[{ required: false, message: '请输入温馨提示' }]}
+        >
+          <Input.TextArea
+            showCount
+            maxLength={200}
+            placeholder="请输入温馨提示，200字以内 例如：全场通用例如：\n不兑零"
+          />
+        </Form.Item>
+      </Form>
+    </>
+  );
+});
+
+export default FormRuleSetting;

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

+import React, { useState, useEffect, useContext, forwardRef, useImperativeHandle } from 'react';
+import { Form, Button } from 'antd';
+import { ServiceContext } from '../context';
+import { TaskList, formItemLayout } from '../config';
+import UploadImage from './UploadImage';
+import commonStyle from '../common.less';
+
+const FormRuleVPictures = forwardRef((props, ref) => {
+  const { editData, specKeyItem } = props;
+  const [imageList, setImageList] = useState({});
+  const [commonImageList, setCommonImageList] = useState([]);
+  const [detailImageList, setDetailImageList] = useState([]);
+  const [cardImageList, setCardImageList] = useState([]);
+
+  const [form] = Form.useForm();
+
+  const customer = useContext(ServiceContext);
+  useEffect(() => {
+    if (customer.isEdit) {
+      if (editData) {
+        setImageList(editData.imageList);
+        setCardImageList(editData.cardImageList);
+        setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图
+        setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图
+        const editParams = {
+          commonImageList: editData.commonImageList,
+          detailImageList: editData.detailImageList,
+        };
+        if (customer.isCard) {
+          editParams.cardImageList = editData.cardImageList;
+        } else {
+          editParams.imageList = editData.imageList;
+        }
+        const timer = setTimeout(() => {
+          form.setFieldsValue(editParams);
+          clearTimeout(timer);
+        });
+      }
+    }
+  }, [customer.isEdit, editData]);
+
+  useEffect(() => {
+    if (customer.isCard) return;
+    if (specKeyItem.length) {
+      const newImageList = specKeyItem.reduce((origin, item) => {
+        const showItem = imageList[item] || [];
+        origin[item] = showItem;
+        return origin;
+      }, {});
+      setImageList(newImageList);
+    }
+  }, [specKeyItem]);
+
+  const onCheck = async () => {
+    try {
+      const values = await form.validateFields();
+      values.temp = 'infoImageData';
+      return values;
+    } catch (errorInfo) {
+      console.log(errorInfo);
+      return null;
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    onCheck,
+    setFieldsValue: form.setFieldsValue,
+    getFieldsValue: form.getFieldsValue,
+    reset: () => {
+      form.resetFields();
+      setImageList({});
+      setCardImageList([]);
+      setCommonImageList([]);
+      setDetailImageList([]);
+    },
+  }));
+
+  const onPictureSuccessEvent = (imgList, key) => {
+    const newImgList = { ...imageList, [key]: imgList };
+    setImageList(newImgList);
+    form.setFieldsValue({
+      imageList: newImgList,
+    });
+  };
+
+  const onCommonSuccessEvent = imgList => {
+    setCommonImageList(imgList);
+    form.setFieldsValue({
+      commonImageList: imgList,
+    });
+  };
+
+  const onCardSuccessImageList = imgList => {
+    setCardImageList(imgList);
+    form.setFieldsValue({
+      cardImageList: imgList,
+    });
+  };
+
+  const onDetailSuccessImageList = imgList => {
+    setDetailImageList(imgList);
+    form.setFieldsValue({
+      detailImageList: imgList,
+    });
+  };
+
+  const [{ imgConfig }] = TaskList.filter(item => item.type === customer.productType);
+  return (
+    <Form
+      form={form}
+      {...formItemLayout}
+      initialValues={{
+        commonImageList: [],
+        cardImageList: [],
+        imageList: {},
+        detailImageList: [],
+      }}
+    >
+      <Form.Item
+        name="commonImageList"
+        label={imgConfig.commonImageList.title}
+        extra={imgConfig.commonImageList.renderExtra(commonImageList.length)}
+        rules={[
+          {
+            required: imgConfig.commonImageList.rule,
+            type: 'array',
+            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 || value.length ? callback() : callback('请上传封面图片');
+            },
+          },
+        ]}
+      >
+        <UploadImage
+          disabled={customer.isService}
+          name="commonImageList"
+          limit={imgConfig.commonImageList.limit}
+          pictures={commonImageList}
+          setPictureList={list => onCommonSuccessEvent(list)}
+        />
+      </Form.Item>
+      {customer.isCard && (
+        <Form.Item
+          name="cardImageList"
+          label={imgConfig.cardImageList.title}
+          extra={imgConfig.cardImageList.renderExtra(cardImageList.length)}
+          rules={[
+            {
+              required: imgConfig.cardImageList.rule,
+              type: 'array',
+              message: `请上传${imgConfig.cardImageList.title}！`,
+            },
+          ]}
+        >
+          <UploadImage
+            disabled={customer.isService}
+            name="cardImageList"
+            limit={imgConfig.cardImageList.limit}
+            pictures={cardImageList}
+            setPictureList={list => onCardSuccessImageList(list)}
+          />
+        </Form.Item>
+      )}
+      {!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: '请上传图片！' },
+              ]}
+              extra={imgConfig.imageList.renderExtra()}
+            >
+              <UploadImage
+                disabled={customer.isService}
+                name={key}
+                limit={11}
+                pictures={imageList[key]}
+                setPictureList={list => onPictureSuccessEvent(list, key)}
+              />
+            </Form.Item>
+            <Button className={commonStyle.pullImage} type="primary">
+              拉取公共图
+            </Button>
+          </div>
+        ))}
+      <Form.Item
+        name="detailImageList"
+        label={imgConfig.detailImageList.title}
+        rules={[
+          {
+            type: 'array',
+            required: imgConfig.detailImageList.rule,
+            message: `请上传${imgConfig.detailImageList.title}！`,
+          },
+        ]}
+        extra={imgConfig.detailImageList.renderExtra()}
+      >
+        <UploadImage
+          disabled={customer.isService}
+          limit={imgConfig.detailImageList.limit}
+          name="detailImageList"
+          pictures={detailImageList}
+          setPictureList={list => onDetailSuccessImageList(list)}
+        />
+      </Form.Item>
+    </Form>
+  );
+});
+
+export default FormRuleVPictures;

src/pages/ServiceGoods/components/FormSettlementOthers.jsx

+import React, { useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Checkbox, Radio, Space, InputNumber } from 'antd';
+import { Title } from './CommonTemplate';
+import { formItemLayout } from '../config';
+import { ServiceContext } from '../context';
+
+const createInitValues = () => ({
+  settlementMethod: 1,
+  limitPurchase: null, // 是否限购1:限购/0:不限购
+  limitPurchaseType: null, // 限购类型，如果限购必填1:长期限购/2:周期限购
+  limitPurchaseCycle: null, // 限购周期1：每天/7：7天/30：30天
+  limitPurchaseQuantity: null, // 限购数量
+  packageContent: '',
+
+  appointment: null, // 预约
+  receptionVolume: null,
+});
+
+const FormSettlementOthers = forwardRef((props, ref) => {
+  const { editData } = props;
+  const [form] = Form.useForm();
+  const [initValue, setInitValue] = useState(createInitValues());
+  const customer = useContext(ServiceContext);
+
+  const onCheck = async () => {
+    try {
+      const values = await form.validateFields();
+      return {
+        ...values,
+        temp: 'settlementItem',
+        limitPurchase: values.limitPurchase ? 1 : 0,
+      };
+    } catch (errorInfo) {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (customer.isEdit) {
+      if (!editData) return;
+      form.setFieldsValue(editData);
+      setInitValue({ ...editData });
+    }
+  }, [customer.isEdit, editData]);
+
+  useImperativeHandle(ref, () => ({
+    onCheck,
+    reset: () => {
+      setInitValue(createInitValues());
+      form.resetFields();
+    },
+  }));
+
+  const radioChangeEvent = key => {
+    const value = form.getFieldValue(key);
+    setInitValue({
+      ...initValue,
+      [key]: value,
+    });
+  };
+
+  const AuditLimitPurchaseType = () => {
+    const limitPurchaseType = form.getFieldValue('limitPurchaseType');
+    if (limitPurchaseType === 1) {
+      return null;
+    }
+    return (
+      <Form.Item name="limitPurchaseCycle" rules={[{ required: true, message: '请选择限购周期' }]}>
+        <Select placeholder="请选择限购周期" style={{ width: 150 }}>
+          <Select.Option value={1}>每天</Select.Option>
+          <Select.Option value={7}>7天</Select.Option>
+          <Select.Option value={30}>30天</Select.Option>
+        </Select>
+      </Form.Item>
+    );
+  };
+
+  const AuditLimitPurchaseTemplate = () => {
+    if (!initValue.limitPurchase) {
+      return null;
+    }
+
+    const PurchaseTemplate =
+      initValue.limitPurchaseType !== null ? (
+        <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
+          <Space>
+            {AuditLimitPurchaseType()}
+            <Form.Item
+              name="limitPurchaseQuantity"
+              rules={[{ required: initValue.limitPurchase, message: '请输入限购数量' }]}
+            >
+              <InputNumber placeholder="请输入限购数量" style={{ width: 150 }} />
+            </Form.Item>
+          </Space>
+        </Form.Item>
+      ) : null;
+
+    return (
+      <>
+        <Form.Item
+          name="limitPurchaseType"
+          wrapperCol={{ offset: 3, span: 16 }}
+          rules={[{ required: true, message: '请选择限购类型' }]}
+        >
+          <Radio.Group onChange={() => radioChangeEvent('limitPurchaseType')}>
+            <Space direction="vertical">
+              <Radio value={1}>每ID限购</Radio>
+              <Radio value={2}>按周期限购</Radio>
+            </Space>
+          </Radio.Group>
+        </Form.Item>
+        {PurchaseTemplate}
+      </>
+    );
+  };
+  return (
+    <Form
+      {...formItemLayout}
+      form={form}
+      name="register"
+      initialValues={initValue}
+      scrollToFirstError
+    >
+      <Form.Item
+        name="appointment"
+        label="预约"
+        rules={[{ required: true, message: '请选择是否预约！' }]}
+      >
+        <Radio.Group>
+          <Radio value={1}>是</Radio>
+          <Radio value={0}>否</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item
+        name="receptionVolume"
+        label="每日最低接待量"
+        rules={[{ required: true, message: '每日最低接待量' }]}
+      >
+        <InputNumber min={0} style={{ width: 200 }} placeholder="请输入每日最低接待量" />
+      </Form.Item>
+      <Title title="结算信息" />
+      <Form.Item
+        name="packageContent"
+        label="套餐内容"
+        rules={[{ required: true, message: '请输入套餐内容, 1000字以内！！' }]}
+      >
+        <Input.TextArea showCount maxLength={1000} placeholder="请输入套餐内容, 1000字以内！！" />
+      </Form.Item>
+      <Form.Item
+        name="settlementMethod"
+        label="结算方式"
+        rules={[{ required: true, message: '请输入套餐内容！' }]}
+        extra="自动分账: 合同期内订单结算款实时分账到甲方指定账号。"
+      >
+        <span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>(默认)</span>
+      </Form.Item>
+
+      <Title title="其他设置" />
+      <Form.Item label="限购" name="limitPurchase" valuePropName="checked">
+        <Checkbox onChange={() => radioChangeEvent('limitPurchase')}>
+          <b style={{ marginLeft: 10 }}>启用限购</b>
+          <span style={{ marginLeft: 10 }} className="ant-form-text">
+            限制每人可购买数量
+          </span>
+        </Checkbox>
+      </Form.Item>
+      {AuditLimitPurchaseTemplate()}
+    </Form>
+  );
+});
+
+export default FormSettlementOthers;

src/pages/ServiceGoods/components/TaskTypeSelect.jsx

+import React, { useContext } from 'react';
+import { TaskList } from '../config';
+import { ServiceContext } from '../context';
+import commonStyle from '../common.less';
+
+export const TaskTypeSelect = props => {
+  const customer = useContext(ServiceContext);
+  const selectTabs = task => {
+    if (!customer.isEdit) {
+      props.onChange(task);
+    }
+  };
+
+  return (
+    <div className={commonStyle.prodcutContent}>
+      {TaskList.map(task => {
+        const activeClassName = props.productType === task.type ? commonStyle.activeCard : '';
+        if (task.hide) return null;
+        return (
+          <dl
+            key={task.type}
+            onClick={() => selectTabs(task)}
+            className={`${commonStyle.productCard} ${activeClassName}`}
+          >
+            <dd className="prodcut-name">{task.name}</dd>
+            <dd className="prodcut-desc">({task.desc})</dd>
+          </dl>
+        );
+      })}
+    </div>
+  );
+};

src/pages/ServiceGoods/components/UploadImage.jsx

+import { PlusOutlined } from '@ant-design/icons';
+import { Modal, Upload, notification, Spin, Button } from 'antd';
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import lodash from 'lodash';
+import { merchantUpload } from '../service';
+
+const MAX_FILE_SIZE = 5;
+const UNIT = 1024 * 1024;
+
+// const getBase64 = (file: RcFile): Promise<string> =>
+//   new Promise((resolve, reject) => {
+//     const reader = new FileReader();
+//     reader.readAsDataURL(file);
+//     reader.onload = () => resolve(reader.result.toString());
+//     reader.onerror = error => reject(error);
+//   });
+
+const UploadButton = (
+  <div>
+    <PlusOutlined />
+    <div style={{ marginTop: 8 }}>上传图片</div>
+  </div>
+);
+
+const UploadImage = forwardRef((props, ref) => {
+  const {
+    name = `${Date.now()}`,
+    limit = null,
+    multiple = true,
+    disabled,
+    uploadParams,
+    pictures = [],
+    setPictureList = () => {},
+    ...imgOptions
+  } = props;
+  const [uploadLoading, setUploadLoading] = useState(false);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+  const [previewTitle, setPreviewTitle] = useState('');
+  const [fileList, setFileList] = useState([]);
+  const fileListRef = useRef([]);
+
+  useEffect(() => {
+    const newPictures = pictures.map((url, ind) => ({
+      url,
+      name: url,
+      uid: `${ind}`,
+    }));
+    fileListRef.current = [...newPictures];
+    setFileList([...newPictures]);
+  }, [pictures]);
+
+  const handleCancel = () => setPreviewVisible(false);
+
+  const handlePreview = async file => {
+    setPreviewImage(file.url);
+    setPreviewVisible(true);
+    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
+  };
+
+  const bundleChange = imgFile => {
+    // setFileList(imgFile);
+    const imgList = imgFile.map(item => item.url);
+    setPictureList(imgList);
+    props.onChange(imgList);
+  };
+
+  const handleRemove = file => {
+    const freshFiles = fileList?.filter(ele => ele.uid !== file.uid);
+    bundleChange(freshFiles);
+  };
+  const checkFile = file =>
+    new Promise(resolve => {
+      const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
+      const fileType = ['jpg', 'jpeg', 'png'];
+      if (!fileType.includes(curType)) {
+        notification.open({
+          message: file.name,
+          description: '图片格式须为jpg、jpeg、png！',
+        });
+        return resolve(null);
+      }
+      if (file.size > MAX_FILE_SIZE * UNIT) {
+        notification.open({
+          message: file.name,
+          description: `单个图片大小不能超过${MAX_FILE_SIZE}M！`,
+        });
+        return resolve(null);
+      }
+      return resolve(file);
+    });
+
+  const imageLoading = (file, ret) =>
+    new Promise(resolve => {
+      const reader = new FileReader();
+      // 监听图片转换完成
+      reader.addEventListener(
+        'load',
+        () => {
+          const temFile = { uid: file.uid, status: 'done', name: file.name, url: ret };
+          resolve(temFile);
+        },
+        false,
+      );
+      reader.readAsDataURL(file);
+    });
+
+  const defaultBeforeUpload = lodash.debounce(
+    (file, fileArray) =>
+      // 文件显示
+      new Promise(async () => {
+        if (limit && fileListRef.current.length + fileArray.length > limit) {
+          Modal.warning({
+            maskClosable: true,
+            title: '超出上传个数',
+          });
+          return Upload.LIST_IGNORE;
+        }
+        const fileAll = fileArray.map(item => checkFile(item));
+        const checkFiles = (await Promise.all(fileAll)).filter(item => item !== null);
+        try {
+          if (checkFiles.length) {
+            setUploadLoading(true);
+            const res = await merchantUpload(checkFiles);
+            if (res.data) {
+              const proFiles = (res.data || []).map((urlItem, urlIndex) =>
+                imageLoading(checkFiles[urlIndex], urlItem),
+              );
+              const imagList = await Promise.all(proFiles);
+              const newFiles = [...fileListRef.current, ...imagList];
+              bundleChange(newFiles);
+            } else {
+              notification.warning({
+                message: '警告',
+                description: res.msg,
+              });
+            }
+            setUploadLoading(false);
+          }
+        } catch (error) {
+          console.log(error);
+          setUploadLoading(false);
+          Modal.warning({
+            maskClosable: true,
+            title: '上传失败，请重新尝试！',
+          });
+        }
+        return null;
+      }),
+  );
+
+  return (
+    <Spin tip="正在上传..." spinning={uploadLoading} delay={100}>
+      <Upload
+        {...uploadParams}
+        disabled={Boolean(disabled)}
+        multiple={multiple}
+        name={name}
+        customRequest={() => {}}
+        listType="picture-card"
+        beforeUpload={defaultBeforeUpload}
+        fileList={fileList}
+        onPreview={handlePreview}
+        onRemove={handleRemove}
+      >
+        {limit !== null && fileList.length >= limit ? null : UploadButton}
+      </Upload>
+      <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
+    </Spin>
+  );
+});
+
+export default UploadImage;

src/pages/ServiceGoods/config.js

+export const formItemLayout = {
+  labelCol: {
+    sm: { span: 3 },
+  },
+  wrapperCol: {
+    sm: { span: 16 },
+  },
+};
+
+export const TaskList = [
+  {
+    name: '实体商品',
+    type: 1,
+    desc: '物流发货',
+    hide: true,
+    imgConfig: {
+      commonImageList: {
+        title: '公共滑动图',
+        rule: false,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
+      },
+      imageList: {
+        rule: false,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
+      },
+      detailImageList: {
+        title: '详情图',
+        rule: true,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
+      },
+    },
+  },
+  {
+    name: '虚拟商品',
+    type: 2,
+    desc: '无需物流',
+    hide: true,
+    imgConfig: {
+      commonImageList: {
+        title: '公共滑动图',
+        rule: false,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
+      },
+      imageList: {
+        rule: false,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
+      },
+      detailImageList: {
+        title: '详情图',
+        rule: true,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
+      },
+    },
+  },
+  // {
+  //   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: {
+      commonImageList: {
+        title: '封面图片',
+        rule: true,
+        limit: 1,
+        renderExtra(leng) {
+          return `建议尺寸: ##宽##高 (${leng} / 1) 封面图第一张 `;
+        },
+      },
+      cardImageList: {
+        title: '商品图片',
+        rule: true,
+        limit: 11,
+        renderExtra(leng) {
+          return `建议尺寸: ##宽##高,sku商品轮播图(${leng} / 11)`;
+        },
+      },
+      detailImageList: {
+        title: '商品详情图',
+        rule: true,
+        limit: 30,
+        renderExtra() {
+          return '最多上传30张';
+        },
+      },
+    },
+  },
+];
+
+export const WeeksList = [
+  {
+    name: '法定节假日',
+    value: 8,
+  },
+  {
+    name: '周一',
+    value: 1,
+  },
+  {
+    name: '周二',
+    value: 2,
+  },
+  {
+    name: '周三',
+    value: 3,
+  },
+  {
+    name: '周四',
+    value: 4,
+  },
+  {
+    name: '周五',
+    value: 5,
+  },
+  {
+    name: '周六',
+    value: 6,
+  },
+  {
+    name: '周日',
+    value: 7,
+  },
+];
+
+export const StaticColumns = customer => [
+  {
+    title: '供货价',
+    dataIndex: 'supplyPrice',
+    editable: true,
+    batchRole: [1, 2, 3, 4],
+    roleProps: {
+      precision: 2,
+      min: 0,
+    },
+    roleRules: { required: true },
+    disabeldRender: () => customer.isJDGoods || customer.isService,
+  },
+  {
+    title: '佣金费率',
+    dataIndex: 'commissionRate',
+    editable: true,
+    role: [4],
+    roleRules: { required: false },
+    roleProps: {
+      min: 0,
+      // max: 100,
+    },
+  },
+  {
+    title: '市场价',
+    dataIndex: 'marketPrice',
+    editable: true,
+    batchRole: [1, 2, 3, 4],
+    roleProps: {
+      precision: 2,
+      min: 0,
+    },
+    roleRules: { required: true },
+    disabeldRender: () => customer.isService,
+  },
+  {
+    title: '销售价',
+    dataIndex: 'salePrice',
+    editable: true,
+    batchRole: [4],
+    role: [4],
+    roleRules: { required: true },
+    roleProps: {
+      precision: 2,
+      min: 0,
+    },
+  },
+  {
+    title: '重量(kg)',
+    dataIndex: 'weight',
+    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: '库存',
+    dataIndex: 'productStock',
+    editable: true,
+    role: [1, 2, 4],
+    batchRole: [1, 2, 4],
+    batchProps: {
+      precision: 0,
+      step: 1,
+      min: 0,
+    },
+    roleProps: {
+      min: 0,
+    },
+    roleRules: { required: true },
+    disabeldRender: () => customer.isService,
+  },
+  {
+    title: '库存预警',
+    dataIndex: 'productStockWarning',
+    editable: true,
+    batchRole: [1],
+    role: [1, 4],
+    roleRules: { required: true },
+    roleProps: {
+      min: 0,
+      precision: 0,
+      maxLength: 5,
+    },
+    disabeldRender: () => customer.isService,
+  },
+  {
+    title: '商品自编码',
+    dataIndex: 'thirdSkuNo',
+    editable: true,
+    role: [1, 2],
+    inputType: 'input',
+    roleRules: { required: true },
+    disabeldRender: () => customer.isService,
+  },
+  {
+    title: '京东链接',
+    dataIndex: 'skuLink',
+    editable: true,
+    role: [1, 2],
+    inputType: 'input',
+    roleRules: { required: false },
+    disabeldRender: () => customer.isService,
+  },
+  {
+    title: 'sku名称',
+    dataIndex: 'name',
+    editable: true,
+    role: customer.isEdit && customer.isJDGoods ? [1, 2] : [],
+    inputType: 'btnText',
+    roleRules: { required: false },
+  },
+  {
+    title: '操作',
+    editable: true,
+    dataIndex: 'option',
+    role: [1, 2],
+    inputType: 'option',
+    roleProps: {
+      isJDGoods: customer.isJDGoods,
+      min: 0,
+    },
+    roleRules: { required: false },
+  },
+];

src/pages/ServiceGoods/context.js

+import React from 'react';
+
+export const ServiceContext = React.createContext(null);

src/pages/ServiceGoods/index.jsx

+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Spin, Button, Modal, message, notification } from 'antd';
+import { ConsoleSqlOutlined } from '@ant-design/icons';
+import { Title, WrapperContainer } from './components/CommonTemplate';
+import { TaskTypeSelect } from './components/TaskTypeSelect';
+import FormInformationBasic from './components/FormInformationBasic';
+import FormPriceOrStock from './components/FormPriceOrStock';
+import FormRuleSetting from './components/FormRuleSetting';
+import FormRuleVPictures from './components/FormRuleVPictures';
+import FormSettlementOthers from './components/FormSettlementOthers';
+import {
+  merchantBrandList,
+  merchantSpecList,
+  afterSalesAddrsPage,
+  merchantgetJdPicList,
+  supplierListQuery,
+  shopGetBySupplierId,
+  merchantProductAdd,
+  merchantProductEdit,
+  getByProductType,
+} from './service';
+import { isUrl, filterSendData, clearCurrent } from './utils';
+import { ServiceContext } from './context';
+
+/**
+ * 服务商品改造-商品模块
+ * @param {*} router options
+ * @returns ReactDOM
+ */
+const ServiceGoods = options => {
+  const { SourceData, categoryList, virtualCategoryList, specListData } = options;
+
+  const basicRef = useRef(null);
+  const stockRef = useRef(null);
+  const settingRef = useRef(null);
+  const picturesRef = useRef(null);
+  const settleOtrRef = useRef(null);
+
+  const [pageId, setPageId] = useState(null);
+  const [isEdit, setIsEdit] = useState(false); // 是否是编辑状态
+  const [productType, setProductType] = useState(4); // 商品状态
+  const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
+  const [afterAddressList, setAfterAddressList] = useState([]); // 售后地址
+  const [supplierIdList, setSupplierIdList] = useState([]); // 适用们店列表
+
+  const [brandList, setBrandList] = useState([]); // 获取商品牌
+  const [specList, setSpecList] = useState([]); // 规格列表
+  const [editData, setEditData] = useState({}); // 编辑保存数据
+  const [newCategoryList, setNewCategoryList] = useState({});
+  // const [shopList, setShopList] = useState([]); // 供应商列表
+  const [checkFormList] = useState([basicRef, stockRef, settingRef, settleOtrRef, picturesRef]);
+
+  const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
+
+  const resetForm = () => clearCurrent(checkFormList).forEach(({ current }) => current.reset());
+
+  const productChange = task => {
+    setProductType(task.type);
+    const timer = setTimeout(() => {
+      resetForm();
+      clearTimeout(timer);
+    }, 1000);
+  };
+
+  const handleCancel = refresh => {
+    setPageId(null);
+    setIsEdit(false);
+    setProductType(4); // 默认写死服务类商品
+    setEditData({});
+    setSpecKeyList([]);
+    resetForm();
+    options.onChange(false, refresh);
+  };
+
+  // 获取商品牌数据
+  const getMerchantBrandList = async () => {
+    if (!brandList.length) {
+      const result = await merchantBrandList();
+      setBrandList(result.data || []);
+    }
+  };
+  // 获取规格列表
+  const getMerchantSpecList = async () => {
+    if (!specList.length) {
+      const result = await merchantSpecList();
+      setSpecList(result.data || []);
+    }
+  };
+
+  const getAfterSalesAddrsPage = async () => {
+    if (!afterAddressList.length) {
+      const result = await afterSalesAddrsPage();
+      setAfterAddressList(result.data.records);
+    }
+  };
+
+  // const getSupplierListResponse = async () => {
+  //   if (!shopList.length) {
+  //     const result = await supplierListQuery();
+  //     console.log('=================>result', result);
+  //     setShopList(result.data);
+  //   }
+  // };
+  const sendMerchantProductHttpRequest = async sendData => {
+    try {
+      setPageLoading(true);
+      const sendAsyncHttpRequest = isEdit ? merchantProductEdit : merchantProductAdd;
+      const addResponse = await sendAsyncHttpRequest(sendData);
+      if (addResponse.data) {
+        message.success(`${isEdit ? '修改' : '添加'}成功!`);
+        handleCancel(true);
+      }
+      setPageLoading(false);
+    } catch (error) {
+      console.log(error);
+      setPageLoading(false);
+    }
+  };
+
+  const shopGetBySupplierIdResponse = async () => {
+    if (!supplierIdList.length) {
+      const result = await shopGetBySupplierId();
+      setSupplierIdList(result.data);
+    }
+  };
+
+  const shopGetByProductType = async type => {
+    console.log(newCategoryList[type]);
+    if (!newCategoryList[type]?.length) {
+      const result = await getByProductType(type);
+      setNewCategoryList({
+        ...newCategoryList,
+        [type]: result.data || [],
+      });
+    }
+    // console.log(result);
+  };
+
+  const submitEvent = async () => {
+    const checkPromiseList = clearCurrent(checkFormList).map(({ current }) => current.onCheck());
+    const resuslt = await Promise.all(checkPromiseList);
+    if (!resuslt.includes(null)) {
+      const params = resuslt.reduce((origin, item) => {
+        const { temp, ...other } = item;
+        origin[temp] = other;
+        return origin;
+      }, {});
+      const sendData = filterSendData(productType, params);
+      if (isEdit) {
+        sendData.id = pageId;
+      }
+      sendMerchantProductHttpRequest(sendData);
+    }
+  };
+
+  const getMerchantgetJdPicList = async params => {
+    const result = await merchantgetJdPicList(params);
+    if (result) {
+      const { detailImageList, imageList } = picturesRef.current.getFieldsValue();
+      const detailList = result.detailList || [];
+      const newImageList = imageList[result.firstSpecValue];
+      const carouseList = result.carouseList || [];
+      imageList[result.firstSpecValue] = newImageList
+        ? [...newImageList, ...carouseList]
+        : carouseList;
+      picturesRef.current.setFieldsValue({
+        // [`imageList[${data.firstSpecValue}]`]: this.state.colorImg[data.firstSpecValue],
+        imageList,
+        detailImageList: [...detailImageList, ...detailList],
+      });
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      if (!options.visible) {
+        return;
+      }
+      setPageLoading(true);
+      await shopGetBySupplierIdResponse();
+      // await getSupplierListResponse();
+      await getMerchantBrandList();
+      await getAfterSalesAddrsPage();
+      await getMerchantSpecList();
+      if (Object.keys(SourceData).length) {
+        setEditData(SourceData);
+        setPageId(SourceData.id);
+        setProductType(SourceData.productType);
+        // changeCheckList(SourceData.productType);
+        setIsEdit(true);
+      }
+      setPageLoading(false);
+    })();
+  }, [SourceData]);
+
+  useEffect(() => {
+    if (options.visible) {
+      shopGetByProductType(productType);
+    }
+  }, [productType, options.visible]);
+
+  const onSpecCommonImgEvent = useCallback(
+    keys => {
+      setSpecKeyList(keys);
+    },
+    [specKeyList],
+  );
+
+  const onEventBus = (event, params) => {
+    if (event === 'cloneImg') {
+      if (!isUrl(params.skuLink)) {
+        notification.open({
+          message: '提示',
+          description: '请输入正确的URL！',
+        });
+        return;
+      }
+      getMerchantgetJdPicList({
+        firstSpecId: params.firstSpecId,
+        firstSpecValue: params.firstSpecValue,
+        secondSpecId: params.secondSpecId,
+        secondSpecValue: params.secondSpecValue,
+        skuLink: params.skuLink,
+        jdSkuInfoUrl: params.skuLink,
+      });
+    }
+  };
+
+  const providerValue = {
+    pageId,
+    isEdit,
+    productType,
+    isCard: productType === 4,
+    isService: SourceData.state && SourceData.state !== 4,
+    isJDGoods: isEdit && SourceData.pageProductType && +SourceData.pageProductType !== 1,
+    onEventBus,
+  };
+
+  return (
+    <Modal
+      title={isEdit ? '修改商品' : '新增商品'}
+      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>,
+      ]}
+    >
+      <Spin tip="正在加载..." spinning={pageLoading} delay={100}>
+        <WrapperContainer>
+          <ServiceContext.Provider value={providerValue}>
+            <Title title="商品类型" />
+            <TaskTypeSelect productType={productType} onChange={productChange} />
+
+            <Title title="商品基本信息编辑" />
+            <FormInformationBasic
+              ref={basicRef}
+              editData={editData.infoMation}
+              newCategoryList={newCategoryList}
+              categoryList={categoryList}
+              virtualCategoryList={virtualCategoryList}
+              brandList={brandList}
+              afterAddressList={afterAddressList}
+              specListData={specListData}
+            />
+
+            <Title title="价格与库存" />
+            <FormPriceOrStock
+              ref={stockRef}
+              specList={specList}
+              onSpecChange={onSpecCommonImgEvent}
+              editData={editData.infoSpecData}
+              skuList={editData.skuList}
+            />
+
+            <Title title="规则设置" />
+            {productType === 4 && (
+              <FormRuleSetting
+                ref={settingRef}
+                editData={editData.serviceItem}
+                supplierIdList={supplierIdList}
+              />
+            )}
+
+            <FormRuleVPictures
+              ref={picturesRef}
+              specKeyItem={specKeyList}
+              editData={editData.infoImageData}
+            />
+            {productType === 4 && (
+              <FormSettlementOthers ref={settleOtrRef} editData={editData.settlementItem} />
+            )}
+          </ServiceContext.Provider>
+        </WrapperContainer>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default ServiceGoods;

src/pages/ServiceGoods/service.js

+import request from '@/utils/request';
+import config from '../../../config/env.config';
+import { stringify } from 'qs';
+import _ from 'lodash';
+
+const { goodsApi, kdspApi } = config;
+const headers = {
+  'Content-Type': 'application/x-www-form-urlencoded',
+};
+
+export const merchantUpload = async files => {
+  const params = new FormData();
+  files.forEach(file => params.append('file', file));
+  const data = await request.post('/image/api/merchant/upload', {
+    prefix: goodsApi,
+    data: params,
+  });
+  return data;
+};
+
+export const getProductDetail = id =>
+  request.post('/product/api/merchant/detail', {
+    prefix: goodsApi,
+    params: { id },
+    headers,
+  });
+
+export const merchantCategoryGetAll = () =>
+  request.post('/product/category/api/merchant/getAll', {
+    prefix: goodsApi,
+  });
+
+// 获取商品品牌
+export const merchantBrandList = () =>
+  request.post('/product/brand/api/merchant/list', {
+    prefix: goodsApi,
+  });
+
+// 获取规格列表
+export const merchantSpecList = () =>
+  request.post('/product/spec/api/merchant/list', {
+    prefix: goodsApi,
+  });
+
+// 查询供应商售后地址
+export const afterSalesAddrsPage = () => {
+  const params = {
+    pageSize: 100,
+    pageNo: 1,
+  };
+  const data = request.post('/api/kdsp/supplier/after-sales-addrs-page', {
+    prefix: kdspApi,
+    data: stringify(_.omitBy(params, v => !v)),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+  return data;
+};
+
+export const merchantgetJdPicList = async params => {
+  const { data } = await request.post('/product/api/merchant/item/getJdPicList', {
+    data: stringify(params),
+    prefix: goodsApi,
+    headers,
+  });
+  return data;
+};
+
+export const merchantProductAdd = data =>
+  request.post('/product/api/merchant/add', {
+    prefix: goodsApi,
+    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,
+    headers,
+  });
+
+// supplierId: 供应商id(优先使用token中的supplierId,这里可以传任意值，建议传0)
+// state: 状态:-1-全部，1-启用，0-禁用
+export const shopGetBySupplierId = (state = 1, supplierId = 0) =>
+  request.get(`/shop/getBySupplierId/${supplierId}/${state}`, {
+    prefix: goodsApi,
+    headers,
+  });
+export const getByProductType = type =>
+  request.get(`/product/category/getByProductType/${type}`, {
+    prefix: goodsApi,
+    headers,
+  });

src/pages/ServiceGoods/utils.js

+import { sortBy } from 'lodash';
+import UUID from '../../utils/uuid';
+
+export const clearCurrent = currentList => currentList.filter(item => item.current);
+
+export const filterSpecId = (input, option) =>
+  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+
+export const cleanArray = actual => {
+  const newArray = [];
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i]);
+    }
+  }
+  return newArray;
+};
+
+export const filterCoverItemList = (list, key) => (list || []).map(item => ({ [key]: item[key] }));
+
+const createInitProduct = (skuItem, isCreate) => {
+  if (isCreate && Object.keys(skuItem).length > 5) {
+    return skuItem;
+  }
+  return {
+    weight: null,
+    productStockWarning: null,
+    marketPrice: null,
+    supplyPrice: null,
+    stock: null,
+    thirdSkuNo: null,
+    skuLink: null,
+    name: null,
+    uuid: UUID.createUUID(),
+  };
+};
+
+export const isUrl = path => {
+  // eslint-disable-next-line no-useless-escape
+  const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+  return reg.test(path);
+};
+
+export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFirst }) => {
+  const batchItemKey = Object.keys(batchItem);
+  return tableData.map((item, index) => {
+    if (!bacthFirst && !bacthSecon) {
+      batchItemKey.forEach(key => {
+        item[key] = batchItem[key] || null;
+      });
+    }
+    if (bacthFirst && !bacthSecon) {
+      batchItemKey.forEach(key => {
+        if (item.firstSpecValue === bacthFirst) {
+          item[key] = batchItem[key] || null;
+        }
+      });
+    }
+    if (!bacthFirst && bacthSecon) {
+      batchItemKey.forEach(key => {
+        if (item.secondSpecValue === bacthSecon) {
+          item[key] = batchItem[key] || null;
+        }
+      });
+    }
+    if (bacthFirst && bacthSecon) {
+      batchItemKey.forEach(key => {
+        if (item.firstSpecValue === bacthFirst && item.secondSpecValue === bacthSecon) {
+          item[key] = batchItem[key] || null;
+        }
+      });
+    }
+    return item;
+  });
+};
+
+const filterItems = (type, props) => {
+  const { infoSpecData, serviceItem, infoImageData, infoMation, settlementItem } = props;
+  const { imageList = {}, commonImageList, cardImageList } = infoImageData;
+  return infoSpecData.items.map(item => {
+    if (type === 4) {
+      // 如果为服务类商品，默认取cardImageList，cardImageList为必选项目
+      item.imageList = [...commonImageList, ...cardImageList];
+    } else {
+      // 如果为虚拟或实体商品，默认取自己{}中对应的的，没有则取公共图
+      const imgList = imageList[item.firstSpecValue] || [];
+      item.imageList = imgList.length ? imgList : commonImageList;
+    }
+    item.firstSpecId = infoSpecData.firstSpecId;
+    item.secondSpecId = infoSpecData.secondSpecId || null;
+    if (type === 4) {
+      item.serviceItem = {
+        ...serviceItem,
+        ...settlementItem,
+        description: infoMation.description || '',
+      };
+    }
+    return item;
+  });
+};
+
+export const filterSendData = (type, params) => {
+  console.log('===============>生成数据', params);
+  const { infoMation, infoImageData } = params;
+  const items = filterItems(type, params);
+  const commonImageList = type === 4 ? [] : infoImageData.commonImageList;
+  return {
+    type,
+    items,
+    name: infoMation.name,
+    specs: infoMation.specs || [],
+    supplierId: infoMation.supplierId,
+    brandId: infoMation.brandId || null,
+    character: infoMation.character,
+    categoryId: infoMation.categoryId[2],
+    afterAddressId: infoMation.afterAddressId,
+    detailImageList: infoImageData.detailImageList,
+    commonImageList,
+  };
+};
+
+export const fliterSkuListSortData = list => {
+  if (!list || !list.length) return;
+
+  const fristSkuList = sortBy(list, item => item.firstSpecValue).reduce((origin, item) => {
+    if (!origin[item.firstSpecValue]) {
+      origin[item.firstSpecValue] = [item];
+    } else {
+      origin[item.firstSpecValue].push(item);
+    }
+    return origin;
+  }, {});
+  let finialList = [];
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const skuKey in fristSkuList) {
+    const skuFirst = fristSkuList[skuKey];
+    skuFirst.forEach((sku, ind) => {
+      if (!ind) {
+        sku.rowSpanCount = skuFirst.length;
+      }
+    });
+    finialList = [...finialList, ...skuFirst];
+  }
+  // eslint-disable-next-line consistent-return
+  return finialList;
+};
+
+export const filterSkuNotIdList = list =>
+  (list || []).reduce(
+    (origin, item) => {
+      if (item.id) {
+        origin.inIdList.push(item);
+      } else {
+        origin.noIdList.push(item);
+      }
+      return origin;
+    },
+    {
+      inIdList: [],
+      noIdList: [],
+    },
+  );
+
+const createInitSkuItems = () => ({
+  weight: null,
+  productStockWarning: null,
+  marketPrice: null,
+  supplyPrice: null,
+  stock: null,
+  thirdSkuNo: null,
+  skuLink: null,
+  name: null,
+});
+
+export const createSkuListData = (first, second, firstSpecId, secondSpecId) => {
+  const list = [];
+  const skuItem = createInitSkuItems();
+
+  console.log(first, second, firstSpecId, secondSpecId);
+
+  if (first && first.length) {
+    // 一级规格有值时，生成的编辑表格
+    first.forEach(fir => {
+      const copy = { ...skuItem };
+      copy.firstSpecId = firstSpecId;
+      copy.firstSpecValue = fir.firstSpecValue;
+      // console.log(copy);
+      if (second.length) {
+        second.forEach(sec => {
+          const copySec = { ...copy };
+          copySec.secondSpecId = secondSpecId;
+          copySec.secondSpecValue = sec.secondSpecValue;
+          list.push(copySec);
+        });
+        return;
+      }
+
+      list.push(copy);
+    });
+  } else if (second && second.length) {
+    // 缺少一级规格值，只有二级规格值时，生成的编辑表格
+    second.forEach(sec => {
+      const copy = { ...skuItem };
+      copy.secondSpecId = secondSpecId;
+      copy.secondSpecValue = sec.secondSpecValue;
+      list.push(copy);
+    });
+  } else {
+    // 缺少一级和二级规格时生成的编辑表格
+    list.push(skuItem);
+  }
+  return list;
+};
+
+export const createProductData = (props, isEdit) => {
+  const {
+    firstSpecId,
+    secondSpecId,
+    fisrtNoIdList,
+    secndNoIdList,
+    fisrtInIdList,
+    secndInIdList,
+  } = props;
+  const newFirstList = fisrtNoIdList.concat(fisrtInIdList || []);
+  let list = [];
+  // if (!isFirstSame && !isSecondSame) {
+  if (!isEdit) {
+    list = createSkuListData(fisrtNoIdList, secndNoIdList, firstSpecId, secondSpecId);
+  } else {
+    const list1 = fisrtNoIdList.length
+      ? createSkuListData(fisrtNoIdList, secndInIdList, firstSpecId, secondSpecId)
+      : [];
+    const list2 = secndNoIdList.length
+      ? createSkuListData(newFirstList, secndNoIdList, firstSpecId, secondSpecId)
+      : [];
+    list = [...list1, ...list2];
+  }
+  // }
+  return list;
+};

src/pages/chainStoreManage/components/storeModal.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import { Form } from '@ant-design/compatible';
+import moment from 'moment';
+import { PlusSquareFilled, MinusSquareFilled } from '@ant-design/icons';
+import {
+  Modal,
+  Input,
+  DatePicker,
+  TimePicker,
+  Checkbox,
+  Cascader,
+  Radio,
+  notification,
+} from 'antd';
+import { apiAddrArea, apiCreatStore, apiEditStore } from '../services';
+import { weekOptions, weekDefault, layout } from '../data';
+import MapModal from '@/components/BaiduMap';
+import style from './style.less';
+import { isCheckNumberLine } from '@/utils/validator';
+
+const FormItem = Form.Item;
+
+const StoreModal = props => {
+  const {
+    visible,
+    onCancel,
+    form: { getFieldDecorator, setFieldsValue, validateFields, resetFields },
+    formInfo,
+  } = props;
+  const [areaAddr, setAreaAddr] = useState([]);
+  const [visibleMap, setVisibleMap] = useState(false);
+  const [times, setTimes] = useState([{ name: 'time0' }]);
+  const [formData, setFormData] = useState({});
+
+  const divDom = useRef();
+
+  const handleCancel = isSuccess => {
+    resetFields();
+    onCancel(isSuccess);
+  };
+  const onSubmit = () => {
+    validateFields(async (error, fieldsValue) => {
+      if (!error) {
+        const params = Object.assign({}, formInfo, fieldsValue);
+        const areaArr = ['provinceId', 'cityId', 'countyId', 'townId'];
+        if (params.addr && params.addr.forEach) {
+          params.addr.forEach((item, i) => {
+            params[areaArr[i]] = item;
+          });
+        }
+        if (params.lnglat) {
+          const arr = params.lnglat.split(',');
+          if (arr.length === 2) {
+            params.longitude = arr[0] || '';
+            params.latitude = arr[1] || '';
+          }
+        }
+        const hoursItems = [];
+        if (times && times.length && times.forEach) {
+          times.forEach(item => {
+            hoursItems.push({
+              begin: moment(params[item.name][0]).format('HH:mm'),
+              end: moment(params[item.name][1]).format('HH:mm'),
+            });
+          });
+        }
+        params.businessHours = {
+          weeks: params.week,
+          hoursItems,
+        };
+        let api = apiCreatStore;
+        if (params.id) {
+          api = apiEditStore;
+        }
+        const res = await api(params);
+        if (res === '0000') {
+          notification.success({ message: '保存成功' });
+          handleCancel(true);
+        }
+      }
+    });
+  };
+
+  // 显示地图
+  const openMap = v => setVisibleMap(v);
+
+  // 获取地址省
+  const getAreaAddr = async id => {
+    const params = {};
+    if (id) {
+      params.parentId = id;
+    }
+    const res = await apiAddrArea(params);
+    if (res) {
+      const arr = res.map(item => ({
+        isLeaf: false,
+        loading: false,
+        label: item.addrName,
+        value: item.addrId,
+      }));
+      setAreaAddr(arr);
+      return arr;
+    }
+    return [];
+  };
+
+  // 获取市区街道
+  const loadData = async selectedOptions => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    targetOption.loading = true;
+    const res = await apiAddrArea({
+      parentId: targetOption.value,
+    });
+    if (res) {
+      const children = res.map(item => ({
+        isLeaf: +item.addrLevel === 4,
+        loading: false,
+        label: item.addrName,
+        value: item.addrId,
+      }));
+      targetOption.loading = false;
+      if (children.length > 0) {
+        targetOption.children = children;
+      } else {
+        targetOption.isLeaf = true;
+        if (selectedOptions.length === 3) {
+          divDom.current.blur();
+        }
+      }
+      setAreaAddr([...areaAddr]);
+    }
+  };
+
+  const onTimePlus = () => {
+    times.push({
+      name: `time${times.length}`,
+    });
+    setTimes([...times]);
+  };
+  const onTimeMinus = i => {
+    times.splice(i, 1);
+    setTimes([...times]);
+  };
+
+  const onSetPoint = e => {
+    setFieldsValue({
+      lnglat: e,
+    });
+  };
+
+  const getLazyAddr = async info => {
+    const arr = await getAreaAddr();
+    const parr = arr.filter(item => +item.value === +info.provinceId);
+    parr[0].children = await getAreaAddr(parr[0].value);
+    const carr = parr[0].children.filter(item => +item.value === +info.cityId);
+    carr[0].children = await getAreaAddr(carr[0].value);
+    if (info.townId) {
+      const aarr = carr[0].children.filter(item => +item.value === +info.countyId);
+      aarr[0].children = await getAreaAddr(aarr[0].value);
+    }
+    setAreaAddr([...arr]);
+  };
+
+  useEffect(() => {
+    if (props.visible) {
+      resetFields();
+      const info = Object.assign({}, formInfo);
+      if (info && info.id) {
+        info.week = info.businessHours.weeks;
+        const hours = info.businessHours.hoursItems;
+        const harr = [];
+        if (hours && hours.length) {
+          hours.forEach((item, i) => {
+            info[`time${i}`] = [moment(item.begin, 'HH:mm'), moment(item.end, 'HH:mm')];
+            harr.push({
+              name: `time${i}`,
+            });
+          });
+        }
+        info.lnglat = `${info.longitude},${info.latitude}`;
+        info.addr = [info.provinceId, info.cityId, info.countyId];
+        if (info.townId) {
+          info.addr.push(info.townId);
+        }
+        setTimes(harr);
+        setFormData(info);
+        getLazyAddr(info);
+      } else {
+        getAreaAddr(0);
+        setFormData({});
+      }
+    }
+  }, [visible]);
+
+  return (
+    <Modal
+      title="门店信息"
+      visible={visible}
+      width="800px"
+      onOk={() => onSubmit()}
+      onCancel={() => handleCancel()}
+    >
+      <Form {...layout} name="formData">
+        <FormItem label="门店名称" name="name">
+          {getFieldDecorator('name', {
+            rules: [{ required: true, message: '请输入门店名称!' }],
+            initialValue: formData.name,
+          })(<Input placeholder="请输入门店名称" allowClear maxLength={20} />)}
+        </FormItem>
+        <FormItem label="门店电话" name="phone">
+          {getFieldDecorator('phone', {
+            rules: [
+              { required: true, message: '请输入门店电话!' },
+              { validator: isCheckNumberLine, message: '请输入正确的门店电话!' },
+            ],
+            initialValue: formData.phone,
+          })(<Input placeholder="请输入门店电话" allowClear maxLength={20} />)}
+        </FormItem>
+        <FormItem label="营业时间" required>
+          {times &&
+            times.map((item, i) => (
+              <div className={style.timerWrapper} key={item.name}>
+                <div>
+                  <FormItem name={item.name}>
+                    {getFieldDecorator(item.name, {
+                      rules: [{ required: true, message: '请选择营业时间!' }],
+                      initialValue: formData[item.name],
+                    })(<TimePicker.RangePicker format="HH:mm" />)}
+                  </FormItem>
+                </div>
+                {i > 0 ? (
+                  <div className={style.timerWrapperRight} onClick={() => onTimeMinus(i)}>
+                    <MinusSquareFilled style={{ color: '#ff4d4f', fontSize: '30px' }} />
+                  </div>
+                ) : (
+                  <div className={style.timerWrapperRight} onClick={() => onTimePlus()}>
+                    <PlusSquareFilled style={{ color: '#1890ff', fontSize: '30px' }} />
+                  </div>
+                )}
+              </div>
+            ))}
+        </FormItem>
+        <FormItem label="营业日">
+          {getFieldDecorator('week', {
+            rules: [{ required: true, message: '请选择营业日!' }],
+            initialValue: formData.week || weekDefault,
+          })(<Checkbox.Group options={weekOptions} />)}
+        </FormItem>
+        <FormItem label="店铺区域">
+          {getFieldDecorator('addr', {
+            rules: [{ required: true, type: 'array', message: '请选择店铺区域!' }],
+            initialValue: formData.addr,
+          })(
+            <Cascader
+              ref={divDom}
+              options={areaAddr}
+              placeholder="请选择店铺区域"
+              loadData={e => loadData(e)}
+              changeOnSelect
+            />,
+          )}
+        </FormItem>
+        <FormItem label="详细地址">
+          {getFieldDecorator('address', {
+            rules: [{ required: true, message: '请输入详细地址!' }],
+            initialValue: formData.address,
+          })(<Input placeholder="请输入详细地址" allowClear maxLength={100} />)}
+        </FormItem>
+        <FormItem label="经纬度">
+          {getFieldDecorator('lnglat', {
+            rules: [{ required: true, message: '请选择经纬度!' }],
+            initialValue: formData.lnglat,
+          })(
+            <Input
+              placeholder="请选择经纬度"
+              readOnly
+              onClick={() => openMap(true)}
+              maxLength={100}
+            />,
+          )}
+        </FormItem>
+        <FormItem label="是否启用">
+          {getFieldDecorator('state', {
+            rules: [{ required: true, message: '请选择是否启用!' }],
+            initialValue: formData.state,
+          })(
+            <Radio.Group>
+              <Radio value={1}>是</Radio>
+              <Radio value={0}>否</Radio>
+            </Radio.Group>,
+          )}
+        </FormItem>
+      </Form>
+      <MapModal
+        visible={visibleMap}
+        onCancel={() => openMap(false)}
+        onSetPoint={e => onSetPoint(e)}
+      ></MapModal>
+    </Modal>
+  );
+};
+
+export default Form.create()(StoreModal);

src/pages/chainStoreManage/components/style.less

+.timerWrapper {
+  display: flex;
+}
+.timerWrapperRight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding-left: 10px;
+  cursor: pointer;
+}

src/pages/chainStoreManage/data.js

+export const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+export const stateDesc = { 1: '启用', 0: '禁用' };
+
+export const weekOptions = [
+  { label: '周一', value: 1 },
+  { label: '周二', value: 2 },
+  { label: '周三', value: 3 },
+  { label: '周四', value: 4 },
+  { label: '周五', value: 5 },
+  { label: '周六', value: 6 },
+  { label: '周日', value: 7 },
+];
+
+export const weekDefault = [1, 2, 3, 4, 5, 6, 7];
+
+export const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 16 },
+};

src/pages/chainStoreManage/index.jsx

+import React, { useState, useRef, useEffect } from 'react';
+import { notification, Button, Form, Input, Cascader, Col, Row, Table, Pagination } from 'antd';
+import _ from 'lodash';
+import { searchList, apiEnableStore, apiAddrArea } from './services';
+import { stateDesc, weeks, layout } from './data';
+import StoreModal from './components/storeModal';
+import style from './style.less';
+
+export default () => {
+  const [visible, setVisible] = useState(false);
+  const [storeInfo, setStoreInfo] = useState({});
+  const [areaAddr, setAreaAddr] = useState([]);
+  const [dataList, setDataList] = useState([]);
+  const [pageNo, setPageNo] = useState(1);
+  const [totalNum, setTotalNum] = useState(0);
+  const [pageSize, setPageSize] = useState(20);
+  const table = useRef();
+  const refSearch = useRef();
+  const divDom = useRef();
+  const onEnableState = async ({ id, state }) => {
+    const enable = +state === 1 ? 0 : 1;
+    const res = await apiEnableStore({ id, state: enable });
+    if (res === '0000') {
+      notification.success({ message: `已${state ? '禁用' : '启用'}` });
+      // eslint-disable-next-line no-unused-expressions
+      table.current?.reload?.();
+    }
+  };
+  const onCreate = () => {
+    setStoreInfo({});
+    setVisible(true);
+  };
+  const onShowInfo = info => {
+    setStoreInfo(info);
+    setVisible(true);
+  };
+  const closeModal = isReload => {
+    if (isReload === true) {
+      // eslint-disable-next-line no-unused-expressions
+      table.current?.reload?.();
+    }
+    setVisible(false);
+  };
+
+  // 获取市区街道
+  const loadData = async selectedOptions => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    targetOption.loading = true;
+    const res = await apiAddrArea({
+      parentId: targetOption.value,
+    });
+    if (res) {
+      const children = res.map(item => ({
+        isLeaf: +item.addrLevel === 4,
+        loading: false,
+        label: item.addrName,
+        value: item.addrId,
+      }));
+      targetOption.loading = false;
+      if (children.length > 0) {
+        targetOption.children = children;
+      } else {
+        targetOption.isLeaf = true;
+        if (selectedOptions.length === 3) {
+          divDom.current.blur();
+        }
+      }
+      setAreaAddr([...areaAddr]);
+    }
+  };
+  const getAreaAddr = async id => {
+    const params = {};
+    if (id) {
+      params.parentId = id;
+    }
+    const res = await apiAddrArea(params);
+    if (res) {
+      const arr = res.map(item => ({
+        isLeaf: false,
+        loading: false,
+        label: item.addrName,
+        value: item.addrId,
+      }));
+      setAreaAddr(arr);
+      return arr;
+    }
+    return [];
+  };
+
+  const getList = async (params = {}) => {
+    const res = await searchList(Object.assign({ current: pageNo, pageSize }, params));
+    if (res && res.data && res.data.length) {
+      setDataList(res.data);
+    } else {
+      setDataList([]);
+    }
+    setTotalNum(res.total);
+  };
+
+  // 搜索
+  const onSearch = async val => {
+    const params = {};
+    if (val.name) {
+      params.name = val.name;
+    }
+    if (val.addr && val.addr.length) {
+      const ids = ['provinceId', 'cityId', 'countyId', 'townId'];
+      val.addr.forEach((item, i) => {
+        params[ids[i]] = item;
+      });
+    }
+    getList(params);
+  };
+
+  const onReset = () => {
+    if (refSearch.current && refSearch.current.resetFields) {
+      refSearch.current.resetFields();
+    }
+  };
+
+  const onPageChange = (e, size) => {
+    setPageNo(e);
+    setPageSize(size);
+  };
+
+  useEffect(() => {
+    getList();
+    getAreaAddr();
+  }, []);
+
+  const getWeekSlots = weekArr => {
+    const htmlArr = [];
+    if (weekArr && weekArr.length) {
+      const arr = [];
+      let brr = [];
+      weekArr.reduce((prev, cur) => {
+        if (prev + 1 === cur) {
+          brr.push(cur);
+        } else {
+          arr.push(brr);
+          brr = [cur];
+        }
+        return cur;
+      }, 0);
+      arr.push(brr);
+      if (arr.length) {
+        arr.forEach(item => {
+          if (htmlArr.length) {
+            htmlArr.push(',');
+          }
+          if (item.length > 1) {
+            htmlArr.push(
+              <span key={item[0]}>
+                {weeks[item[0]]} ~ {weeks[item[item.length - 1]]}
+              </span>,
+            );
+          } else {
+            htmlArr.push(<span key={item[0]}>{weeks[item[0]]}</span>);
+          }
+        });
+      }
+    }
+    return htmlArr;
+  };
+
+  const columns = [
+    {
+      title: '门店名称',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '门店电话',
+      dataIndex: 'phone',
+      hideInSearch: true,
+      width: 120,
+    },
+    {
+      title: '营业时间',
+      dataIndex: 'businessHours',
+      hideInSearch: true,
+      width: 150,
+      render: businessHours => (
+        <div>
+          <div>{getWeekSlots(businessHours.weeks)}</div>
+          <div>
+            {businessHours.hoursItems.map(item => (
+              <div key={item.begin}>
+                <span>{item.begin}</span>-<span>{item.end}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '地区',
+      dataIndex: 'addr',
+      width: 200,
+      hideInSearch: true,
+      render: (addr, r) => (
+        <span>{`${r.provinceName}${r.cityName}${r.countyName}${r.townName || ''}`}</span>
+      ),
+    },
+    {
+      title: '详细地址',
+      dataIndex: 'address',
+      hideInSearch: true,
+      width: 150,
+    },
+    {
+      title: '经纬度',
+      dataIndex: 'latlng',
+      hideInSearch: true,
+      width: 120,
+      render: (latlng, r) => <span>{`${r.longitude},${r.latitude}`}</span>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      hideInSearch: true,
+      width: 120,
+      render: v => <span>{`${stateDesc[v]}`}</span>,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      hideInSearch: true,
+      width: 120,
+    },
+    {
+      title: '操作',
+      hideInSearch: true,
+      dataIndex: 'action',
+      width: 170,
+      fixed: 'right',
+      render: (val, r) => [
+        <Button key="enable1" onClick={() => onEnableState(r)} type="primary">
+          {+r.state ? '禁用' : '启用'}
+        </Button>,
+        <Button key="seek" style={{ marginLeft: '10px' }} onClick={() => onShowInfo(r)}>
+          查看
+        </Button>,
+      ],
+    },
+  ];
+  return (
+    <div>
+      <div className={style.serachForm}>
+        <Form {...layout} ref={refSearch} onFinish={e => onSearch(e)} name="formData">
+          <Row gutter={24}>
+            <Col span={8}>
+              <Form.Item label="门店名称" name="name">
+                <Input placeholder="请输入门店名称" allowClear maxLength={20} />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item label="地区" name="addr">
+                <Cascader
+                  ref={divDom}
+                  options={areaAddr}
+                  loadData={e => loadData(e)}
+                  changeOnSelect
+                />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Button type="primary" htmlType="submit" size="middle">
+                搜索
+              </Button>
+              <Button size="middle" className={style.searchBtn} onClick={() => onReset()}>
+                重置
+              </Button>
+              <Button type="primary" size="middle" onClick={() => onCreate()}>
+                新建
+              </Button>
+            </Col>
+          </Row>
+        </Form>
+      </div>
+      <Table
+        dataSource={dataList}
+        bordered
+        columns={columns}
+        rowKey={record => record.id}
+        pagination={false}
+        // className={styles.tabletop}
+        scroll={{ x: '100%' }}
+        // rowSelection={rowSelection}
+      />
+      {dataList && dataList.length && (
+        <div className={style.pageBox}>
+          <Pagination
+            style={{ marginBottom: 10 }}
+            onChange={onPageChange}
+            total={totalNum}
+            showTotal={total => `共${total}条`}
+            current={pageNo}
+            pageSize={pageSize}
+            showSizeChanger
+            onShowSizeChange={onPageChange}
+          />
+        </div>
+      )}
+      <StoreModal visible={visible} onCancel={closeModal} formInfo={storeInfo} />
+    </div>
+  );
+};

src/pages/chainStoreManage/services.js

+import request from '@/utils/request';
+import config from '../../../config/env.config';
+import { stringify } from 'qs';
+import _ from 'lodash';
+
+const { kdspApi } = config;
+
+// 分页查询所有数据
+export async function searchList(params) {
+  const param = {
+    ...params,
+    pageNo: params.current,
+    pageSize: params.pageSize || 20,
+  };
+  const data = await request.post('/shop/pageQuery', {
+    prefix: kdspApi,
+    data: _.omitBy(param, v => !v),
+    // headers: {
+    //   'Content-Type': 'application/x-www-form-urlencoded',
+    // },
+  });
+  if (data.data) {
+    return {
+      total: data.data.total,
+      data: data.data.records,
+    };
+  }
+  return {
+    total: 0,
+    data: [],
+  };
+}
+
+// 停启用门店
+export async function apiEnableStore({ id, state }) {
+  const data = await request.get(`/shop/updateState/${id}/${state}`, {
+    prefix: kdspApi,
+  });
+  return data.businessCode;
+}
+
+// 获取地址
+export async function apiAddrArea(params) {
+  const data = await request.post('/api/kdsp/area/addr/query', {
+    prefix: kdspApi,
+    data: stringify(_.omitBy(params, v => !v)),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+  return data.data || [];
+}
+
+// 创建门店
+export async function apiCreatStore(params) {
+  const data = await request.post('/shop/create', {
+    prefix: kdspApi,
+    data: params,
+    // headers: {
+    //   'Content-Type': 'application/x-www-form-urlencoded',
+    // },
+  });
+  return data.businessCode;
+}
+
+// 更新门店
+export async function apiEditStore(params) {
+  const data = await request.post('/shop/update', {
+    prefix: kdspApi,
+    data: params,
+    // headers: {
+    //   'Content-Type': 'application/x-www-form-urlencoded',
+    // },
+  });
+  return data.businessCode;
+}

src/pages/chainStoreManage/style.less

+.serachForm {
+  margin-bottom: 20px;
+  padding: 20px 50px 0 10px;
+  background-color: #fff;
+}
+.searchBtn {
+  margin: 0 10px;
+}
+.pageBox {
+  padding: 20px 20px 15px;
+  text-align: right;
+  background-color: #fff;
+  border: 1px solid #f0f0f0;
+  border-top: 0;
+}

src/utils/utils.js

 import { parse } from 'querystring';
 import pathRegexp from 'path-to-regexp';
+import moment from 'moment';
 /* eslint no-useless-escape:0 import/prefer-default-export:0 */
 
 const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
@@ -52,3 +53,6 @@ export function toThousands(data, num) {
   }
   return result;
 }
+
+export const formatTime = (time, crm = 'YYYY-MM-DD HH:mm:ss') => time.format(crm);
+export const resetTime = (time, crm = 'YYYY-MM-DD HH:mm:ss') => moment(time, crm);

src/utils/uuid.js

+/**
+ * [UUID 生成UUID]
+ */
+class UUID {
+  constructor() {
+    this.id = this.createUUID();
+  }
+
+  /**
+   * [valueOf 重写 valueOf 方法]
+   * @return {String} [description]
+   */
+  valueOf() {
+    return this.id;
+  }
+
+  /**
+   * [valueOf 重写 toString 方法]
+   * @return {String} [description]
+   */
+  toString() {
+    return this.id;
+  }
+
+  /**
+   * [createUUID 创建UUID]
+   * @return {String} [description]
+   */
+  createUUID() {
+    const dg = new Date(1582, 10, 15, 0, 0, 0, 0);
+    const dc = new Date();
+    const t = dc.getTime() - dg.getTime();
+    const h = '';
+    const tl = this.getIntegerBits(t, 0, 31);
+    const tm = this.getIntegerBits(t, 32, 47);
+    const thv = `${this.getIntegerBits(t, 48, 59)}1`; // version 1, security version is 2
+    const csar = this.getIntegerBits(this.rand(4095), 0, 7);
+    const csl = this.getIntegerBits(this.rand(4095), 0, 7);
+    const n =
+      this.getIntegerBits(this.rand(8191), 0, 7) +
+      this.getIntegerBits(this.rand(8191), 8, 15) +
+      this.getIntegerBits(this.rand(8191), 0, 7) +
+      this.getIntegerBits(this.rand(8191), 8, 15) +
+      this.getIntegerBits(this.rand(8191), 0, 15); // this last number is two octets long
+    return tl + h + tm + h + thv + h + csar + csl + h + n;
+  }
+
+  /**
+   * [getIntegerBits description]
+   * @param  {[type]} val   [description]
+   * @param  {[type]} start [description]
+   * @param  {[type]} end   [description]
+   * @return {[type]}       [description]
+   */
+  getIntegerBits(val, start, end) {
+    const base16 = this.returnBase(val, 16);
+    const quadArray = [];
+    let quadString = '';
+    let i = 0;
+    for (i = 0; i < base16.length; i++) {
+      quadArray.push(base16.substring(i, i + 1));
+    }
+    for (i = Math.floor(start / 4); i <= Math.floor(end / 4); i++) {
+      if (!quadArray[i] || quadArray[i] === '') {
+        quadString += '0';
+      } else {
+        quadString += quadArray[i];
+      }
+    }
+    return quadString;
+  }
+
+  /**
+   * [returnBase description]
+   * @param  {[type]} number [description]
+   * @param  {[type]} base   [description]
+   * @return {[type]}        [description]
+   */
+  returnBase(number, base) {
+    const convert = [
+      '0',
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      'A',
+      'B',
+      'C',
+      'D',
+      'E',
+      'F',
+      'G',
+      'H',
+      'I',
+      'J',
+      'K',
+      'L',
+      'M',
+      'N',
+      'O',
+      'P',
+      'Q',
+      'R',
+      'S',
+      'T',
+      'U',
+      'V',
+      'W',
+      'X',
+      'Y',
+      'Z',
+    ];
+    let output;
+    if (number < base) {
+      output = convert[number];
+    } else {
+      const MSD = `${Math.floor(number / base)}`;
+      const LSD = number - MSD * base;
+      if (MSD >= base) {
+        output = this.returnBase(MSD, base) + convert[LSD];
+      } else {
+        output = convert[MSD] + convert[LSD];
+      }
+    }
+    return output;
+  }
+
+  /**
+   * [rand description]
+   * @param  {[type]} max [description]
+   * @return {[type]}     [description]
+   */
+  // eslint-disable-next-line class-methods-use-this
+  rand(max) {
+    return Math.floor(Math.random() * max);
+  }
+}
+
+export default new UUID();