fix: 优化添加门店

优化地图选择

src/components/BaiduMap/index.jsx

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

src/pages/chainStoreManage/components/storeModal.jsx

-import React, { useState, useEffect } from 'react';
+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,
@@ -12,33 +13,31 @@ import {
   notification,
 } from 'antd';
 import { apiAddrArea, apiCreatStore } from '../services';
-import { weekOptions, weekDefault } from '../data';
+import { weekOptions, weekDefault, layout } from '../data';
 import MapModal from '@/components/BaiduMap';
+import style from './style.less';
 
 const FormItem = Form.Item;
-const { RangePicker } = DatePicker;
 
 const StoreModal = props => {
   const {
     visible,
     onCancel,
-    form: { getFieldDecorator, getFieldValue, validateFields, resetFields },
-    // formData,
+    form: { getFieldDecorator, getFieldValue, setFieldsValue, validateFields, resetFields },
+    formData,
   } = props;
   const [areaAddr, setAreaAddr] = useState([]);
-  const [formData, setFormData] = useState({});
   const [visibleMap, setVisibleMap] = useState(false);
+  const [times, setTimes] = useState([{ name: 'time0' }]);
 
-  const weekD = formData.weekDefault ? formData.weekDefault : weekDefault;
+  const divDom = useRef();
 
   const handleCancel = isSuccess => {
     resetFields();
     onCancel(isSuccess);
   };
-  const handleOk = () => {
-    console.log('111 :>> ', 111);
+  const onSubmit = () => {
     validateFields(async (error, fieldsValue) => {
-      console.log('222 :>> ', 222);
       if (!error) {
         const params = Object.assign({}, fieldsValue);
         const areaArr = ['provinceId', 'cityId', 'countyId', 'townId'];
@@ -54,25 +53,29 @@ const StoreModal = props => {
             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: [
-            {
-              begin: moment(params.time[0]).format('HH:mm'),
-              end: moment(params.time[1]).format('HH:mm'),
-            },
-          ],
+          hoursItems,
         };
-        console.log('params :>> ', params);
         const res = await apiCreatStore(params);
         if (res === '0000') {
-          notification.success({ message: '创建成功' });
+          notification.success({ message: '保存成功' });
           handleCancel(true);
         }
       }
     });
   };
 
+  // 显示地图
   const openMap = v => setVisibleMap(v);
 
   // 获取地址省
@@ -90,18 +93,10 @@ const StoreModal = props => {
     }
   };
 
-  useEffect(() => {
-    if (props.visible) {
-      getAreaAddr();
-    }
-  }, [visible]);
-
   // 获取市区街道
   const loadData = async selectedOptions => {
-    console.log('2222 :>> ', 2222);
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;
-    console.log('targetOption.value :>> ', targetOption.value);
     const res = await apiAddrArea({
       parentId: targetOption.value,
     });
@@ -117,28 +112,44 @@ const StoreModal = props => {
         targetOption.children = children;
       } else {
         targetOption.isLeaf = true;
+        if (selectedOptions.length === 3) {
+          divDom.current.blur();
+        }
       }
       setAreaAddr([...areaAddr]);
     }
   };
 
-  const onSetPoint = e => {
-    console.log('e :>> ', e);
-    const form = { ...formData };
-    form.lnglat = e;
-    setFormData(form);
+  const onTimePlus = () => {
+    times.push({
+      name: `time${times.length}`,
+    });
+    setTimes([...times]);
+  };
+  const onTimeMinus = i => {
+    times.splice(i, 1);
+    setTimes([...times]);
   };
 
-  const layout = {
-    labelCol: { span: 6 },
-    wrapperCol: { span: 16 },
+  const onSetPoint = e => {
+    setFieldsValue({
+      lnglat: e,
+    });
   };
+
+  useEffect(() => {
+    if (props.visible) {
+      resetFields();
+      getAreaAddr();
+    }
+  }, [visible]);
+
   return (
     <Modal
       title="门店信息"
       visible={visible}
       width="800px"
-      onOk={() => handleOk()}
+      onOk={() => onSubmit()}
       onCancel={() => handleCancel()}
     >
       <Form {...layout} name="formData">
@@ -154,27 +165,42 @@ const StoreModal = props => {
             initialValue: formData.phone,
           })(<Input placeholder="请输入门店电话" maxLength={20} />)}
         </FormItem>
-        <FormItem label="营业时间">
-          {getFieldDecorator('time', {
-            rules: [{ required: true, message: '请选择营业时间!' }],
-            initialValue: formData.time,
-          })(
+        <FormItem label="营业时间" required>
+          {times &&
+            times.map((item, i) => (
+              <div className={style.timerWrapper}>
                 <div>
-              <TimePicker.RangePicker format="HH:mm" />,<TimePicker.RangePicker format="HH:mm" />
-            </div>,
+                  <FormItem name={item.name}>
+                    {getFieldDecorator(item.name, {
+                      rules: [{ required: true, message: '请选择营业时间!' }],
+                    })(<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=" ">
+        <FormItem label="营业日">
           {getFieldDecorator('week', {
             rules: [{ required: true, message: '请选择营业日!' }],
-            initialValue: formData.week,
-          })(<Checkbox.Group options={weekOptions} defaultValue={weekD} />)}
+            initialValue: formData.week || weekDefault,
+          })(<Checkbox.Group options={weekOptions} />)}
         </FormItem>
         <FormItem label="店铺区域">
           {getFieldDecorator('addr', {
             rules: [{ required: true, type: 'array', message: '请选择店铺区域!' }],
             initialValue: formData.addr,
-          })(<Cascader options={areaAddr} loadData={e => loadData(e)} changeOnSelect />)}
+          })(
+            <Cascader ref={divDom} options={areaAddr} loadData={e => loadData(e)} changeOnSelect />,
+          )}
         </FormItem>
         <FormItem label="详细地址">
           {getFieldDecorator('address', {
@@ -186,14 +212,7 @@ const StoreModal = props => {
           {getFieldDecorator('lnglat', {
             rules: [{ required: true, message: '请选择经纬度!' }],
             initialValue: formData.lnglat,
-          })(
-            <Input
-              placeholder="请选择经纬度"
-              onClick={() => openMap(true)}
-              readOnly
-              maxLength={100}
-            />,
-          )}
+          })(<Input placeholder="请选择经纬度" onClick={() => openMap(true)} maxLength={100} />)}
         </FormItem>
         <FormItem label="是否启用">
           {getFieldDecorator('state', {

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

@@ -15,3 +15,8 @@ export const weekOptions = [
 ];
 
 export const weekDefault = [1, 2, 3, 4, 5, 6, 7];
+
+export const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 16 },
+};

src/pages/chainStoreManage/index.jsx

@@ -128,7 +128,7 @@ export default () => {
         }}
         bordered
         actionRef={table}
-        scroll={{ x: '100%', y: 400 }}
+        scroll={{ x: '100%' }}
         search={{
           collapsed: false,
           collapseRender: () => null,

src/pages/chainStoreManage/services.js

@@ -55,7 +55,7 @@ export async function apiAddrArea(params) {
 export async function apiCreatStore(params) {
   const data = await request.post('/shop/create', {
     prefix: kdspApi,
-    data: _.omitBy(params, v => !v),
+    data: params,
     // headers: {
     //   'Content-Type': 'application/x-www-form-urlencoded',
     // },