feat: 添加店铺列表

config/config.js

@@ -206,6 +206,12 @@ export default {
               icon: 'smile',
               component: './password',
             },
+            {
+              path: '/chainStoreManage',
+              name: 'chainStoreManage',
+              icon: 'smile',
+              component: './chainStoreManage',
+            },
             // {
             //   path: '/GoodsManage-new',
             //   name: 'GoodsManageNew',

config/env.config.js

@@ -2,16 +2,16 @@ const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
 
 const envAPi = {
-  api: '//backstms-yxm.liangkebang.net',
-  kdspOpApi: 'https://kdsp-operation-yxm.liangkebang.net',
-  kdspApi: 'https://sc-op-api-yxm.liangkebang.net',
-  goodsApi: 'https://sc-op-api-yxm.liangkebang.net',
-  querysApi: 'https://sc-settlement-api-yxm.liangkebang.net',
+  api: 'https://backstms-xyqb.liangkebang.net',
+  kdspOpApi: 'https://kdsp-operation-xyqb.liangkebang.net',
+  kdspApi: 'https://sc-op-api-xyqb.liangkebang.net',
+  goodsApi: 'https://sc-op-api-xyqb.liangkebang.net',
+  querysApi: 'https://sc-settlement-api-xyqb.liangkebang.net',
   // goodsApi: '//192.168.188.111:7000',
-  prologueDomain: 'https://mall-yxm.liangkebang.net',
+  prologueDomain: 'https://mall-xyqb.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 = {

src/pages/chainStoreManage/components/storeModal.jsx

+import React, { useRef, useState } from 'react';
+import { Form } from '@ant-design/compatible';
+import { BaiduMap } from 'react-baidu-map';
+import '@ant-design/compatible/assets/index.css';
+import {
+  Modal,
+  Input,
+  DatePicker,
+  Checkbox,
+  Cascader,
+  Radio,
+  notification,
+  InputNumber,
+} from 'antd';
+import { apiAddrArea } from '../services';
+import { weekOptions, weekDefault } from '../data';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+const { RangePicker } = DatePicker;
+const StoreModal = props => {
+  const {
+    visible,
+    onCancel,
+    form: { getFieldDecorator, getFieldValue, validateFields, resetFields },
+    formData = {},
+  } = props;
+
+  const location = useRef();
+  const [areaAddr, setAreaAddr] = useState([]);
+
+  const weekD = formData.weekDefault ? formData.weekDefault : weekDefault;
+
+  const handleCancel = isSuccess => {
+    resetFields();
+    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);
+    //     }
+    //   }
+    // });
+  };
+
+  // 获取地址省
+  (async () => {
+    const [res] = await apiAddrArea();
+    if (res) {
+      const arr = res.map(item => ({
+        isLeaf: false,
+        loading: false,
+        label: item.addrName,
+        value: item.addrId,
+      }));
+      setAreaAddr(arr);
+    }
+  })();
+
+  // 获取市区街道
+  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;
+      }
+      setAreaAddr([...areaAddr]);
+    }
+  };
+
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 16 },
+  };
+  return (
+    <Modal
+      title="门店信息"
+      visible={visible}
+      width="800px"
+      onOk={() => handleOk()}
+      onCancel={() => handleCancel()}
+    >
+      <Form {...layout} name="formData">
+        <FormItem label="门店名称">
+          {getFieldDecorator('name', {
+            rules: [{ required: true, message: '请输入门店名称!' }],
+            initialValue: formData.name,
+          })(<Input placeholder="请输入门店名称" maxLength={50} />)}
+        </FormItem>
+        <FormItem label="门店电话">
+          {getFieldDecorator('phone', {
+            rules: [{ required: true, message: '请输入门店电话!' }],
+            initialValue: formData.phone,
+          })(<Input placeholder="请输入门店电话" maxLength={20} />)}
+        </FormItem>
+        <FormItem label="营业时间">
+          {getFieldDecorator('time', {
+            rules: [{ required: true, message: '请选择营业时间!' }],
+            initialValue: formData.phone,
+          })(<RangePicker />)}
+        </FormItem>
+        <FormItem label=" ">
+          {getFieldDecorator('week', {
+            rules: [{ required: true, message: '请选择营业日!' }],
+            initialValue: formData.week,
+          })(<Checkbox.Group options={weekOptions} defaultValue={weekD} />)}
+        </FormItem>
+        <FormItem label="店铺区域">
+          {getFieldDecorator('addr', {
+            rules: [{ required: true, type: 'array', message: '请选择店铺区域!' }],
+            initialValue: formData.addr,
+          })(<Cascader options={areaAddr} loadData={e => loadData(e)} changeOnSelect />)}
+        </FormItem>
+        <FormItem label="详细地址">
+          {getFieldDecorator('address', {
+            rules: [{ required: true, message: '请输入详细地址!' }],
+            initialValue: formData.address,
+          })(<Input placeholder="请输入详细地址" maxLength={100} />)}
+        </FormItem>
+        <FormItem label="经纬度">
+          {getFieldDecorator('lnglat', {
+            rules: [{ required: true, message: '请选择经纬度!' }],
+            initialValue: formData.lnglat,
+          })(<Input placeholder="请选择经纬度" readOnly maxLength={100} />)}
+        </FormItem>
+        <FormItem label="是否启用">
+          {getFieldDecorator('enable', {
+            rules: [{ required: true, message: '请选择是否启用!' }],
+            initialValue: formData.enable,
+          })(
+            <Radio.Group>
+              <Radio value={1}>是</Radio>
+              <Radio value={2}>否</Radio>
+            </Radio.Group>,
+          )}
+        </FormItem>
+      </Form>
+      <BaiduMap id="location" ref={location} style={{ height: 300 }} />
+    </Modal>
+  );
+};
+
+export default Form.create()(StoreModal);

src/pages/chainStoreManage/data.js

+// import { Tag, Badge } from 'antd';
+import React from 'react';
+
+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];

src/pages/chainStoreManage/index.jsx

+import React, { useState, useRef } from 'react';
+import { notification, Button, Modal, Statistic } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import _ from 'lodash';
+import { searchList, apiEnableStore } from './services';
+import { stateDesc, weeks } from './data';
+import StoreModal from './components/storeModal';
+
+export default () => {
+  const [visible, setVisible] = useState(false);
+  const [storeInfo, setStoreInfo] = useState({});
+  const table = useRef();
+  const onEnableState = async ({ id, state }) => {
+    const res = await apiEnableStore({ id, state });
+    if (res === '0000') {
+      notification.success({ message: `已${state ? '禁用' : '启用'}` });
+    }
+  };
+  const onCreate = () => {
+    setVisible(true);
+  };
+  const closeModal = isReload => {
+    if (isReload === true) {
+      // eslint-disable-next-line no-unused-expressions
+      table.current?.reload?.();
+    }
+    setVisible(false);
+  };
+  const columns = [
+    {
+      title: '门店ID',
+      dataIndex: 'id',
+      hideInSearch: true,
+      width: 80,
+    },
+    {
+      title: '门店名称',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '门店电话',
+      dataIndex: 'phone',
+      hideInSearch: true,
+      width: 120,
+    },
+    {
+      title: '营业时间',
+      dataIndex: 'businessHours',
+      hideInSearch: true,
+      width: 150,
+      render: businessHours => (
+        <div>
+          <div>
+            {businessHours.weeks.map(item => (
+              <span>{weeks[item]}</span>
+            ))}
+          </div>
+          <div>
+            {businessHours.hoursItems.map(item => (
+              <div>
+                <span>{item.begin}</span>-<span>{item.end}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '地区',
+      dataIndex: 'addr',
+      width: 200,
+      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',
+      valueEnum: stateDesc,
+      hideInSearch: true,
+      width: 120,
+      // render: state => <span>{`${stateDesc[state]}`}</span>,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      hideInSearch: true,
+      width: 120,
+    },
+    {
+      title: '操作',
+      hideInSearch: true,
+      dataIndex: 'action',
+      width: 100,
+      fixed: 'right',
+      render: (val, r) => [
+        <Button onClick={() => onEnableState(r)} type="primary">
+          {+r.state ? '禁用' : '启用'}
+        </Button>,
+      ],
+    },
+  ];
+  return (
+    <div>
+      <ProTable
+        columns={columns}
+        request={params => searchList(params, 1)}
+        rowKey={r => r.serviceNo}
+        pagination={{
+          pagesSize: 20,
+        }}
+        bordered
+        actionRef={table}
+        scroll={{ x: '100%', y: 400 }}
+        search={{
+          collapsed: false,
+          collapseRender: () => null,
+        }}
+        headerTitle="连锁门店管理"
+        toolBarRender={() => [
+          <Button key="button" type="primary" onClick={() => onCreate()}>
+            新建
+          </Button>,
+        ]}
+      />
+      <StoreModal visible={visible} onCancel={closeModal} formData={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: _.omitBy(params, v => !v),
+  });
+  return data.businessCode;
+}

src/pages/document.ejs

@@ -8,6 +8,10 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
     />
     <title>商户管理后台</title>
+    <script
+      type="text/javascript"
+      src="https://api.map.baidu.com/getscript?v=3.0&ak=5gZyih0oAhiNdbbdPKTc9ZGYOwel8bYN"
+    ></script>
     <link rel="icon" href="/favicon.png" type="image/x-icon" />
   </head>
   <body>