feat: 添加门店管理

src/components/BaiduMap/index.jsx

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

src/pages/chainStoreManage/components/storeModal.jsx

-import React, { useRef, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Form } from '@ant-design/compatible';
-import { BaiduMap } from 'react-baidu-map';
-import '@ant-design/compatible/assets/index.css';
+import moment from 'moment';
 import {
   Modal,
   Input,
   DatePicker,
+  TimePicker,
   Checkbox,
   Cascader,
   Radio,
   notification,
-  InputNumber,
 } from 'antd';
-import { apiAddrArea } from '../services';
+import { apiAddrArea, apiCreatStore } from '../services';
 import { weekOptions, weekDefault } from '../data';
+import MapModal from '@/components/BaiduMap';
 
 const FormItem = Form.Item;
-const { TextArea } = Input;
 const { RangePicker } = DatePicker;
+
 const StoreModal = props => {
   const {
     visible,
     onCancel,
     form: { getFieldDecorator, getFieldValue, validateFields, resetFields },
-    formData = {},
+    // formData,
   } = props;
-
-  const location = useRef();
   const [areaAddr, setAreaAddr] = useState([]);
+  const [formData, setFormData] = useState({});
+  const [visibleMap, setVisibleMap] = useState(false);
 
   const weekD = formData.weekDefault ? formData.weekDefault : weekDefault;
 
@@ -36,26 +36,49 @@ const StoreModal = props => {
     onCancel(isSuccess);
   };
   const handleOk = () => {
-    // validateFields(async (error, fieldsValue) => {
-    //   if (!error) {
-    //     const { auditResult } = fieldsValue;
-    //     const data = await shopStore({
-    //       ...fieldsValue,
-    //       refuseCode: auditResult?.[1],
-    //       auditResult: auditResult?.[0],
-    //       serviceNo: formData?.serviceNo,
-    //     });
-    //     if (data.businessCode === '0000') {
-    //       notification.success({ message: '审核成功' });
-    //       handleCancel(true);
-    //     }
-    //   }
-    // });
+    console.log('111 :>> ', 111);
+    validateFields(async (error, fieldsValue) => {
+      console.log('222 :>> ', 222);
+      if (!error) {
+        const params = Object.assign({}, 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] || '';
+          }
+        }
+        params.businessHours = {
+          weeks: params.week,
+          hoursItems: [
+            {
+              begin: moment(params.time[0]).format('HH:mm'),
+              end: moment(params.time[1]).format('HH:mm'),
+            },
+          ],
+        };
+        console.log('params :>> ', params);
+        const res = await apiCreatStore(params);
+        if (res === '0000') {
+          notification.success({ message: '创建成功' });
+          handleCancel(true);
+        }
+      }
+    });
   };
 
+  const openMap = v => setVisibleMap(v);
+
   // 获取地址省
-  (async () => {
-    const [res] = await apiAddrArea();
+  const getAreaAddr = async () => {
+    const res = await apiAddrArea();
+    console.log('res :>> ', res);
     if (res) {
       const arr = res.map(item => ({
         isLeaf: false,
@@ -65,12 +88,20 @@ const StoreModal = props => {
       }));
       setAreaAddr(arr);
     }
-  })();
+  };
+
+  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,
     });
@@ -91,6 +122,13 @@ const StoreModal = props => {
     }
   };
 
+  const onSetPoint = e => {
+    console.log('e :>> ', e);
+    const form = { ...formData };
+    form.lnglat = e;
+    setFormData(form);
+  };
+
   const layout = {
     labelCol: { span: 6 },
     wrapperCol: { span: 16 },
@@ -104,13 +142,13 @@ const StoreModal = props => {
       onCancel={() => handleCancel()}
     >
       <Form {...layout} name="formData">
-        <FormItem label="门店名称">
+        <FormItem label="门店名称" name="name">
           {getFieldDecorator('name', {
             rules: [{ required: true, message: '请输入门店名称!' }],
             initialValue: formData.name,
           })(<Input placeholder="请输入门店名称" maxLength={50} />)}
         </FormItem>
-        <FormItem label="门店电话">
+        <FormItem label="门店电话" name="phone">
           {getFieldDecorator('phone', {
             rules: [{ required: true, message: '请输入门店电话!' }],
             initialValue: formData.phone,
@@ -119,8 +157,12 @@ const StoreModal = props => {
         <FormItem label="营业时间">
           {getFieldDecorator('time', {
             rules: [{ required: true, message: '请选择营业时间!' }],
-            initialValue: formData.phone,
-          })(<RangePicker />)}
+            initialValue: formData.time,
+          })(
+            <div>
+              <TimePicker.RangePicker format="HH:mm" />,<TimePicker.RangePicker format="HH:mm" />
+            </div>,
+          )}
         </FormItem>
         <FormItem label=" ">
           {getFieldDecorator('week', {
@@ -144,21 +186,32 @@ const StoreModal = props => {
           {getFieldDecorator('lnglat', {
             rules: [{ required: true, message: '请选择经纬度!' }],
             initialValue: formData.lnglat,
-          })(<Input placeholder="请选择经纬度" readOnly maxLength={100} />)}
+          })(
+            <Input
+              placeholder="请选择经纬度"
+              onClick={() => openMap(true)}
+              readOnly
+              maxLength={100}
+            />,
+          )}
         </FormItem>
         <FormItem label="是否启用">
-          {getFieldDecorator('enable', {
+          {getFieldDecorator('state', {
             rules: [{ required: true, message: '请选择是否启用!' }],
-            initialValue: formData.enable,
+            initialValue: formData.state,
           })(
             <Radio.Group>
               <Radio value={1}>是</Radio>
-              <Radio value={2}>否</Radio>
+              <Radio value={0}>否</Radio>
             </Radio.Group>,
           )}
         </FormItem>
       </Form>
-      <BaiduMap id="location" ref={location} style={{ height: 300 }} />
+      <MapModal
+        visible={visibleMap}
+        onCancel={() => openMap(false)}
+        onSetPoint={e => onSetPoint(e)}
+      ></MapModal>
     </Modal>
   );
 };

src/pages/chainStoreManage/index.jsx

@@ -11,9 +11,12 @@ export default () => {
   const [storeInfo, setStoreInfo] = useState({});
   const table = useRef();
   const onEnableState = async ({ id, state }) => {
-    const res = await apiEnableStore({ 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 = () => {

src/pages/chainStoreManage/services.js

@@ -42,8 +42,23 @@ export async function apiEnableStore({ id, state }) {
 // 获取地址
 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: _.omitBy(params, v => !v),
+    // headers: {
+    //   'Content-Type': 'application/x-www-form-urlencoded',
+    // },
   });
   return data.businessCode;
 }

src/pages/document.ejs

@@ -10,7 +10,7 @@
     <title>商户管理后台</title>
     <script
       type="text/javascript"
-      src="https://api.map.baidu.com/getscript?v=3.0&ak=5gZyih0oAhiNdbbdPKTc9ZGYOwel8bYN"
+      src="https://api.map.baidu.com/api?v=3.0&ak=5gZyih0oAhiNdbbdPKTc9ZGYOwel8bYN&type=webgl"
     ></script>
     <link rel="icon" href="/favicon.png" type="image/x-icon" />
   </head>