feat: 修改门店信息

src/pages/chainStoreManage/components/storeModal.jsx

@@ -12,10 +12,11 @@ import {
   Radio,
   notification,
 } from 'antd';
-import { apiAddrArea, apiCreatStore } from '../services';
+import { apiAddrArea, apiCreatStore, apiEditStore } from '../services';
 import { weekOptions, weekDefault, layout } from '../data';
 import MapModal from '@/components/BaiduMap';
 import style from './style.less';
+// import { await } from '@umijs/deps/compiled/signale';
 
 const FormItem = Form.Item;
 
@@ -23,12 +24,13 @@ const StoreModal = props => {
   const {
     visible,
     onCancel,
-    form: { getFieldDecorator, getFieldValue, setFieldsValue, validateFields, resetFields },
-    formData,
+    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();
 
@@ -39,7 +41,7 @@ const StoreModal = props => {
   const onSubmit = () => {
     validateFields(async (error, fieldsValue) => {
       if (!error) {
-        const params = Object.assign({}, fieldsValue);
+        const params = Object.assign({}, formInfo, fieldsValue);
         const areaArr = ['provinceId', 'cityId', 'countyId', 'townId'];
         if (params.addr && params.addr.forEach) {
           params.addr.forEach((item, i) => {
@@ -66,7 +68,11 @@ const StoreModal = props => {
           weeks: params.week,
           hoursItems,
         };
-        const res = await apiCreatStore(params);
+        let api = apiCreatStore;
+        if (params.id) {
+          api = apiEditStore;
+        }
+        const res = await api(params);
         if (res === '0000') {
           notification.success({ message: '保存成功' });
           handleCancel(true);
@@ -79,9 +85,12 @@ const StoreModal = props => {
   const openMap = v => setVisibleMap(v);
 
   // 获取地址省
-  const getAreaAddr = async () => {
-    const res = await apiAddrArea();
-    console.log('res :>> ', res);
+  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,
@@ -90,7 +99,9 @@ const StoreModal = props => {
         value: item.addrId,
       }));
       setAreaAddr(arr);
+      return arr;
     }
+    return [];
   };
 
   // 获取市区街道
@@ -137,10 +148,46 @@ const StoreModal = props => {
     });
   };
 
+  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();
-      getAreaAddr();
+      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);
+      }
     }
   }, [visible]);
 
@@ -157,13 +204,13 @@ const StoreModal = props => {
           {getFieldDecorator('name', {
             rules: [{ required: true, message: '请输入门店名称!' }],
             initialValue: formData.name,
-          })(<Input placeholder="请输入门店名称" maxLength={50} />)}
+          })(<Input placeholder="请输入门店名称" allowClear maxLength={50} />)}
         </FormItem>
         <FormItem label="门店电话" name="phone">
           {getFieldDecorator('phone', {
             rules: [{ required: true, message: '请输入门店电话!' }],
             initialValue: formData.phone,
-          })(<Input placeholder="请输入门店电话" maxLength={20} />)}
+          })(<Input placeholder="请输入门店电话" allowClear maxLength={20} />)}
         </FormItem>
         <FormItem label="营业时间" required>
           {times &&
@@ -173,6 +220,7 @@ const StoreModal = props => {
                   <FormItem name={item.name}>
                     {getFieldDecorator(item.name, {
                       rules: [{ required: true, message: '请选择营业时间!' }],
+                      initialValue: formData[item.name],
                     })(<TimePicker.RangePicker format="HH:mm" />)}
                   </FormItem>
                 </div>
@@ -206,13 +254,20 @@ const StoreModal = props => {
           {getFieldDecorator('address', {
             rules: [{ required: true, message: '请输入详细地址!' }],
             initialValue: formData.address,
-          })(<Input placeholder="请输入详细地址" maxLength={100} />)}
+          })(<Input placeholder="请输入详细地址" allowClear maxLength={100} />)}
         </FormItem>
         <FormItem label="经纬度">
           {getFieldDecorator('lnglat', {
             rules: [{ required: true, message: '请选择经纬度!' }],
             initialValue: formData.lnglat,
-          })(<Input placeholder="请选择经纬度" onClick={() => openMap(true)} maxLength={100} />)}
+          })(
+            <Input
+              placeholder="请选择经纬度"
+              readOnly
+              onClick={() => openMap(true)}
+              maxLength={100}
+            />,
+          )}
         </FormItem>
         <FormItem label="是否启用">
           {getFieldDecorator('state', {

src/pages/chainStoreManage/index.jsx

@@ -20,6 +20,11 @@ export default () => {
     }
   };
   const onCreate = () => {
+    setStoreInfo({});
+    setVisible(true);
+  };
+  const onShowInfo = info => {
+    setStoreInfo(info);
     setVisible(true);
   };
   const closeModal = isReload => {
@@ -96,7 +101,6 @@ export default () => {
       valueEnum: stateDesc,
       hideInSearch: true,
       width: 120,
-      // render: state => <span>{`${stateDesc[state]}`}</span>,
     },
     {
       title: '创建时间',
@@ -108,12 +112,15 @@ export default () => {
       title: '操作',
       hideInSearch: true,
       dataIndex: 'action',
-      width: 100,
+      width: 170,
       fixed: 'right',
       render: (val, r) => [
         <Button onClick={() => onEnableState(r)} type="primary">
           {+r.state ? '禁用' : '启用'}
         </Button>,
+        <Button style={{ marginLeft: '10px' }} onClick={() => onShowInfo(r)}>
+          查看
+        </Button>,
       ],
     },
   ];
@@ -140,7 +147,7 @@ export default () => {
           </Button>,
         ]}
       />
-      <StoreModal visible={visible} onCancel={closeModal} formData={storeInfo} />
+      <StoreModal visible={visible} onCancel={closeModal} formInfo={storeInfo} />
     </div>
   );
 };

src/pages/chainStoreManage/services.js

@@ -62,3 +62,15 @@ export async function apiCreatStore(params) {
   });
   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;
+}