feat：网点管理新增网点

note.md

 /staff/view
 查询和某管理员同一个网点的 客服经理
 
+新增网点
+

src/components/HeaderSelect3/const.ts

+export const fooList = [
+  {
+    label: '所属一级分行',
+    placeholder: '请选择一级分行',
+    options: [] as { ID: number; Name: string }[],
+    disable: false,
+    value: undefined as number | undefined,
+    propName: 'firstBranch',
+  },
+  {
+    label: '所属二级分行',
+    placeholder: '请选择二级分行',
+    options: [] as { ID: number; Name: string }[],
+    disable: false,
+    value: undefined as number | undefined,
+    propName: 'secondBranch',
+  },
+  {
+    label: '所属一级支行',
+    placeholder: '请选择一级支行',
+    options: [] as { ID: number; Name: string }[],
+    disable: false,
+    value: undefined as number | undefined,
+    propName: 'firstSubBranch',
+  },
+]

src/components/HeaderSelect3/index.vue

+<template>
+  <div class="header-select">
+    <FormModelItem
+      v-for="(item, index) in fooList"
+      :prop="item.propName"
+      class="base_form_item my-2"
+      style="position: relative"
+      :key="index"
+      :label="item.label"
+    >
+      <a-select
+        class="header-select-item my-2"
+        @change="(value) => handleSelectChange(value, index)"
+        :placeholder="item.placeholder"
+        :value="item.value"
+        :disabled="index + 1 <= userLevel ? true : item.disable"
+      >
+        <a-select-option
+          :value="option.ID"
+          :key="option.ID"
+          v-for="option in item.options"
+          >{{ option.Name }}</a-select-option
+        >
+      </a-select>
+    </FormModelItem>
+  </div>
+</template>
+
+<script lang="ts">
+import { eLevel } from "@/types/level";
+import { message } from "ant-design-vue";
+import StaffService from "@/service/StaffService";
+import { fooList } from "./const";
+import Vue, { PropType } from "vue";
+import { iOutLet } from "@/service/StaffService/types";
+import { FormModel } from "ant-design-vue";
+import { getSelfOutLet } from "@/utils/outlet";
+import { getUserMsg } from "@/utils/userMsg/userMsg";
+import { eNewRoleRelatedToBackEnd } from "@/types/role";
+
+const FormModelItem = FormModel.Item;
+
+export default Vue.extend({
+  components: {
+    FormModelItem,
+    FormModel,
+  },
+  props: {
+    fooList: {
+      type: Array as PropType<typeof fooList>,
+    },
+    setFooList: Function,
+    level: Number,
+    userLevel: Number,
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    handleSelectChange(value: number, index: number) {
+      const baseList = [...this.fooList];
+      baseList[index].value = value;
+      const newList = baseList.map((i, idx) => {
+        // idx > index && console.log(i);
+        return {
+          ...i,
+          options: idx > index ? [] : i.options,
+          value: idx > index ? undefined : i.value,
+        };
+      });
+      this.changeFooList([...newList]);
+      index + 1 !== 3 && this.fetchOptions(index + 1);
+    },
+    async fetchOptions(index: number) {
+      const ret = await StaffService.getInstance().getBranch({
+        level: index + 1,
+        page_size: 10000,
+        parent_id: this.fooList[index - 1].value,
+      });
+      if (ret.code === 200) {
+        const baseList = [...this.fooList];
+        baseList[index].options = ret.data.item;
+        this.changeFooList(baseList);
+      }
+    },
+    changeFooList(v: any[]) {
+      let lastIndexhasValue = true;
+      const newList = v.map((item, index) => {
+        if (index >= this.level) {
+          const shouldDisable = !lastIndexhasValue;
+          lastIndexhasValue = item.value !== undefined;
+          return {
+            ...item,
+            disable: shouldDisable,
+            options: shouldDisable ? [] : item.options,
+          };
+        } else {
+          return {
+            ...item,
+          };
+        }
+      });
+
+      this.setFooList(newList);
+    },
+    resetList() {
+      const list = this.fooList.map((i) => {
+        return {
+          ...i,
+          disable: false,
+          value: undefined,
+          options: [],
+        };
+      });
+      this.setFooList([...list]);
+    },
+    async init() {
+      const selfOutLet = await getSelfOutLet();
+      const role = getUserMsg()?.newRole;
+      this.resetList();
+      this.$nextTick(() => {
+        if (role === eNewRoleRelatedToBackEnd.BackAdmin) {
+          this.initBackAdmin(selfOutLet);
+        }
+      });
+    },
+    async initBackAdmin(selfOutLet: iOutLet) {
+      const ret = await StaffService.getInstance().getBranch({
+        level: eLevel.firstLevel_branch,
+      });
+      if (ret.code === 200) {
+        const options = ret.data.item;
+        const baseList = [...this.fooList];
+        baseList[0].options = options;
+        const newList = baseList.map((item, i) => {
+          return {
+            ...item,
+            disable: i >= 1,
+          };
+        });
+        this.setFooList(newList);
+      }
+    },
+    init_firstLevel(selfOutLet: iOutLet) {
+      const list = this.initFooListBasicValues(
+        selfOutLet,
+        eLevel.firstLevel_branch
+      );
+      this.setFooList(list);
+    },
+    async init_secondLevel(selfOutLet: iOutLet) {
+      const { fid, first_branch, sid, second_branch } = selfOutLet;
+      const list = this.initFooListBasicValues(
+        selfOutLet,
+        eLevel.secondary_branch
+      );
+      this.setFooList(list);
+      const ret = await StaffService.getInstance().getBranch({
+        level: eLevel.firstLevel_sub_branch,
+        page_size: 10000,
+        parent_id: sid,
+      });
+      const baseList = [...this.fooList];
+      if (ret.code === 200) {
+        baseList[2].options = ret.data.item;
+      }
+      this.setFooList(baseList);
+    },
+    async init_first_sub_Level(selfOutLet: iOutLet) {
+      const baseList = [...this.fooList];
+      const { fid, first_branch, sid, second_branch, fs_id, first_sub_branch } =
+        selfOutLet;
+      const list = this.initFooListBasicValues(
+        selfOutLet,
+        eLevel.firstLevel_sub_branch
+      );
+      this.setFooList(list);
+      const ret = await StaffService.getInstance().getBranch({
+        level: eLevel.secondary_sub_branch,
+        page_size: 1000,
+        parent_id: fs_id,
+      });
+      if (ret.code === 200) {
+        baseList[3].options = ret.data.item;
+      }
+      this.setFooList(baseList);
+    },
+    init_second_sub_Level(selfOutLet: iOutLet) {
+      this.initFooListBasicValues(selfOutLet, eLevel.secondary_sub_branch);
+    },
+    initFooListBasicValues(selfOutLet: iOutLet, level: eLevel) {
+      let list = this.fooList;
+      const {
+        fid,
+        first_branch,
+        sid,
+        second_branch,
+        fs_id,
+        first_sub_branch,
+        ss_id,
+        second_sub_branch,
+      } = selfOutLet;
+      if (
+        [
+          eLevel.firstLevel_branch,
+          eLevel.secondary_branch,
+          eLevel.firstLevel_sub_branch,
+          eLevel.secondary_sub_branch,
+        ].includes(level)
+      ) {
+        list[0].value = fid;
+        list[0].options = [{ ID: fid, Name: first_branch }];
+        list[0].disable = true;
+      }
+      if (
+        [
+          eLevel.secondary_branch,
+          eLevel.firstLevel_sub_branch,
+          eLevel.secondary_sub_branch,
+        ].includes(level)
+      ) {
+        list[1].value = sid;
+        list[1].options = [{ ID: sid, Name: second_branch }];
+        list[1].disable = true;
+      }
+
+      if (
+        [eLevel.firstLevel_sub_branch, eLevel.secondary_sub_branch].includes(
+          level
+        )
+      ) {
+        list[2].value = fs_id;
+        list[2].options = [{ ID: fs_id, Name: first_sub_branch }];
+        list[2].disable = true;
+      }
+      if ([eLevel.secondary_sub_branch].includes(level)) {
+        list[3].value = ss_id;
+        list[3].options = [{ ID: ss_id, Name: second_sub_branch }];
+        list[3].disable = true;
+      }
+      return list;
+    },
+    popupScroll1(e: Event) {
+      let h = e.target as HTMLElement;
+      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
+        message.info("臣妾做不到啊");
+      }
+    },
+    popupScroll2(e: Event) {
+      let h = e.target as HTMLElement;
+      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
+        message.info("臣妾做不到啊");
+      }
+    },
+    popupScroll3(e: Event) {
+      let h = e.target as HTMLElement;
+      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
+        message.info("臣妾做不到啊");
+      }
+    },
+    popupScroll4(e: Event) {
+      let h = e.target as HTMLElement;
+      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
+        message.info("臣妾做不到啊");
+      }
+    },
+  },
+});
+</script>
+<style scoped lang="less">
+.header-select {
+  .header-select-item {
+    width: 200px;
+  }
+}
+</style>
\ No newline at end of file

src/service/AddressService/index.ts

 import baseAxios from '../index'
-import { iOutLetDetail } from './types'
+import { iOutLetDetail, iOutletMsg } from './types'
 
 export default class AddressService {
   private prefix: string
@@ -57,11 +57,17 @@ export default class AddressService {
     }
   }
 
-  getOutlet(data: { outlet_name: string }) {
+  getOutlet(data: { outlet_name?: string; id?: number }) {
+    let theData = {} as any
+    if (data.outlet_name) {
+      theData.name = data.outlet_name
+    } else if (data.id !== undefined) {
+      theData.id = data.id
+    }
     return baseAxios<iOutLetDetail>({
       url: '/address/getOutlet',
       method: 'post',
-      data,
+      data: theData,
     })
   }
 
@@ -82,6 +88,7 @@ export default class AddressService {
     location: string
     note: string
     opening_hours: string
+    name: string
     weekend_status: number
   }) {
     return baseAxios({
@@ -90,4 +97,20 @@ export default class AddressService {
       data,
     })
   }
+
+  delete(data: { id: number }) {
+    return baseAxios({
+      url: '/address/delete',
+      method: 'post',
+      data,
+    })
+  }
+
+  add(data: iOutletMsg) {
+    return baseAxios({
+      url: '/address/add',
+      method: 'post',
+      data,
+    })
+  }
 }

src/service/AddressService/types.ts

@@ -8,4 +8,20 @@ export interface iOutLetDetail {
   opening_hours: string
   outlet_name: string
   region_name: string
+  weekend_status: number
+  province_name: string
+}
+
+export interface iOutletMsg {
+  city_id: number
+  is_normal_work: boolean
+  lat_lon: string
+  location: string
+  name: string
+  note: string
+  opening_hours: string
+  province_id: number
+  region_id: number
+  region_name: string
+  weekend_status?: number,
 }

src/views/Root/OutletManagement/index.vue

@@ -27,6 +27,12 @@
         <a-button type="primary" style="margin-right: 10px" @click="clickReset"
           >重置</a-button
         >
+        <a-button
+          type="primary"
+          style="margin-right: 10px"
+          @click="clickAddOutlet"
+          >新增</a-button
+        >
       </div>
     </div>
     <div v-else>
@@ -59,6 +65,7 @@
         <a-table
           rowKey="id"
           :columns="outletColumns"
+          :loading="tableLoading"
           bordered
           class="mt-5"
           :dataSource="dataSource"
@@ -80,19 +87,29 @@
           </template>
           <template #operate="text, record">
             <a href="javascript:;" @click="clickEdit(record)">编辑</a>
-            <!-- <a-divider type="vertical" /> -->
-            <!-- <a href="javascript:;" @click="clickDelete(record)">删除</a> -->
+            <a-divider type="vertical" />
+            <a href="javascript:;" @click="clickDelete(record)">删除</a>
           </template>
         </a-table>
       </div>
     </div>
-    <a-modal title="查看" v-model="showNote" :footer="null">
+    <a-modal
+      title="查看"
+      v-model="showNote"
+      :footer="null"
+      style="width: 800px"
+    >
       <spin :spinning="showNoteLoading">
         {{ noteContent }}
       </spin>
       <div class="h-5"></div>
     </a-modal>
-    <a-modal v-model="visible" width="750px" :footer="null">
+    <a-modal
+      v-model="visible"
+      :footer="null"
+      :afterClose="afterClose"
+      width="900px"
+    >
       <div
         class="text-center text-lg font-semibold"
         v-if="modalType === eModalType.edit"
@@ -105,14 +122,136 @@
       >
         新增网点
       </div>
+      <!-- 创建网点创建网点创建网点创建网点创建网点创建网点创建网点创建网点创建网点创建网点创建网点创建网点 -->
       <FormModel
         :model="formData"
+        :rules="createOutlet_formRules"
+        v-if="modalType === eModalType.create"
+        layout="horizontal"
+        ref="createOutlet_form"
+        style="position: relative; left: 12rem"
+      >
+        <HeaderSelect3
+          ref="headerselect3"
+          :fooList="fooList_createOutlet"
+          :setFooList="setFooList_createOutlet"
+          :level="0"
+          :userLevel="0"
+        />
+        <FormModelItem
+          class="base_form_item my-2"
+          :label="'所属二级支行'"
+          prop="secondSubBranch"
+        >
+          <a-input
+            v-model="formData.secondSubBranch"
+            :placeholder="'请输入二级支行名称'"
+          />
+        </FormModelItem>
+        <FormModelItem
+          class="base_form_item my-2 ml-7"
+          :label="'详细地址'"
+          prop="location"
+        >
+          <a-input
+            v-model="formData.location"
+            :placeholder="'请输入详细地址'"
+          />
+        </FormModelItem>
+        <FormModelItem
+          class="base_form_item my-2 ml-10"
+          label="是否营业"
+          style="position: relative"
+        >
+          <a-switch
+            default-checked
+            v-model="formData.isOpen"
+            checked-children="是"
+            un-checked-children="否"
+          />
+        </FormModelItem>
+        <div class="flex" style="position: relative; left: 1.75rem">
+          <FormModelItem
+            class="base_form_item my-2 mr-2 ml-4"
+            label="经纬度"
+            prop="lo"
+          >
+            <a-input class="w-32" placeholder="经度" v-model="formData.lo" />
+          </FormModelItem>
+          <FormModelItem class="base_form_item my-2" prop="la">
+            <a-input
+              class="w-32 mr-2"
+              placeholder="纬度"
+              v-model="formData.la"
+            />
+            <a-button type="primary" @click="getLalo">自动获取</a-button>
+          </FormModelItem>
+        </div>
+        <div class="flex" style="position: relative; left: -12rem">
+          <div class="flex">
+            <FormModelItem class="base_form_item my-2" label="营业时间">
+              <CheckBoxGroup v-model="formData.openDays">
+                <Checkbox
+                  v-for="item in openDaysOptions"
+                  :disabled="item.disabled"
+                  :key="item.value"
+                  :value="item.value"
+                  >{{ item.label }}</Checkbox
+                >
+              </CheckBoxGroup>
+              <div class="flex">
+                <FormModelItem
+                  prop="startTime"
+                  class="flex justify-center mr-2"
+                >
+                  <TimePicker
+                    v-model="formData.startTime"
+                    format="HH:mm"
+                    placeholder="开始时间"
+                  ></TimePicker>
+                </FormModelItem>
+                <FormModelItem prop="endTime" class="flex justify-center">
+                  <TimePicker
+                    v-model="formData.endTime"
+                    format="HH:mm"
+                    placeholder="结束时间"
+                  ></TimePicker>
+                </FormModelItem>
+              </div>
+            </FormModelItem>
+          </div>
+          <FormModelItem class="base_form_item my-2" label="备注" prop="remark">
+            <TextArea
+              placeholder="请输入备注"
+              max="50"
+              v-model="formData.remark"
+            ></TextArea>
+          </FormModelItem>
+        </div>
+        <div
+          class="flex items-center justify-center"
+          style="position: relative; left: -12rem"
+        >
+          <a-button @click="handleClickCancel">取消</a-button>
+          <a-button type="primary" class="ml-10" @click="handleClickConfirm"
+            >确认</a-button
+          >
+        </div>
+      </FormModel>
+      <!--  编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点编辑网点 -->
+      <FormModel
+        v-if="modalType === eModalType.edit"
+        :model="formData"
         :rules="formRules"
         layout="horizontal"
         ref="form"
-        style="position: relative;left: 12rem;"
+        style="position: relative; left: 12rem"
+      >
+        <FormModelItem
+          class="base_form_item my-2"
+          label="所属一级分行"
+          v-if="modalType === eModalType.edit"
         >
-        <FormModelItem class="base_form_item my-2" label="所属一级分行">
           <Select
             :disabled="modalType === eModalType.edit"
             :value="formData.firstBranch"
@@ -127,7 +266,11 @@
             >
           </Select>
         </FormModelItem>
-        <FormModelItem class="base_form_item my-2" label="所属二级分行">
+        <FormModelItem
+          class="base_form_item my-2"
+          label="所属二级分行"
+          v-if="modalType === eModalType.edit"
+        >
           <Select
             :value="formData.secondBranch"
             :disabled="modalType === eModalType.edit"
@@ -142,7 +285,11 @@
             >
           </Select>
         </FormModelItem>
-        <FormModelItem class="base_form_item my-2" label="所属一级支行">
+        <FormModelItem
+          class="base_form_item my-2"
+          label="所属一级支行"
+          v-if="modalType === eModalType.edit"
+        >
           <Select
             :disabled="modalType === eModalType.edit"
             :value="formData.firstSubBranch"
@@ -157,7 +304,11 @@
             >
           </Select>
         </FormModelItem>
-        <FormModelItem class="base_form_item my-2" label="原属二级支行">
+        <FormModelItem
+          class="base_form_item my-2"
+          label="原属二级支行"
+          v-if="modalType === eModalType.edit"
+        >
           <Select
             :disabled="modalType === eModalType.edit"
             :value="formData.secondSubBranch"
@@ -177,7 +328,7 @@
           label="现属二级支行"
           prop="newSecondSubBranch"
           v-if="modalType === eModalType.edit"
-          style="position: relative;left: -0.75rem;"
+          style="position: relative; left: -0.75rem"
         >
           <a-input
             v-model="formData.newSecondSubBranch"
@@ -186,12 +337,23 @@
         </FormModelItem>
         <FormModelItem
           class="base_form_item my-2"
-          label="现详细地址"
+          :label="modalType === eModalType.edit ? '现详细地址' : '详细地址'"
           prop="location"
         >
-          <a-input v-model="formData.location" placeholder="请输入现详细地址" />
+          <a-input
+            v-model="formData.location"
+            :placeholder="
+              modalType === eModalType.edit
+                ? '请输入现详细地址'
+                : '请输入详细地址'
+            "
+          />
         </FormModelItem>
-        <FormModelItem class="base_form_item my-2" label="是否营业" style="position: relative;left: 1.5rem;">
+        <FormModelItem
+          class="base_form_item my-2"
+          label="是否营业"
+          style="position: relative; left: 1.5rem"
+        >
           <a-switch
             default-checked
             v-model="formData.isOpen"
@@ -199,16 +361,24 @@
             un-checked-children="否"
           />
         </FormModelItem>
-        <div class="flex" style="position: relative;left: 1.75rem;">
-          <FormModelItem class="base_form_item my-2 mr-2" label="经纬度" prop="lo">
+        <div class="flex" style="position: relative; left: 1.75rem">
+          <FormModelItem
+            class="base_form_item my-2 mr-2"
+            label="经纬度"
+            prop="lo"
+          >
             <a-input class="w-32" placeholder="经度" v-model="formData.lo" />
           </FormModelItem>
-          <FormModelItem class="base_form_item my-2" prop="la" >
-            <a-input class="w-32 mr-2" placeholder="纬度" v-model="formData.la" />
+          <FormModelItem class="base_form_item my-2" prop="la">
+            <a-input
+              class="w-32 mr-2"
+              placeholder="纬度"
+              v-model="formData.la"
+            />
             <a-button type="primary" @click="getLalo">自动获取</a-button>
           </FormModelItem>
         </div>
-        <div class="flex" style="position: relative;left: -12rem;">
+        <div class="flex" style="position: relative; left: -12rem">
           <div class="flex">
             <FormModelItem class="base_form_item my-2" label="营业时间">
               <CheckBoxGroup v-model="formData.openDays">
@@ -221,7 +391,10 @@
                 >
               </CheckBoxGroup>
               <div class="flex">
-                <FormModelItem prop="startTime" class="flex justify-center mr-2">
+                <FormModelItem
+                  prop="startTime"
+                  class="flex justify-center mr-2"
+                >
                   <TimePicker
                     v-model="formData.startTime"
                     format="HH:mm"
@@ -237,7 +410,6 @@
                 </FormModelItem>
               </div>
             </FormModelItem>
-            
           </div>
           <FormModelItem class="base_form_item my-2" label="备注" prop="remark">
             <TextArea
@@ -247,7 +419,10 @@
             ></TextArea>
           </FormModelItem>
         </div>
-        <div class="flex items-center justify-center" style="position: relative;left: -12rem;">
+        <div
+          class="flex items-center justify-center"
+          style="position: relative; left: -12rem"
+        >
           <a-button @click="handleClickCancel">取消</a-button>
           <a-button type="primary" class="ml-10" @click="handleClickConfirm"
             >确认</a-button
@@ -269,7 +444,6 @@ import {
   Modal,
   message,
   Spin,
-  Form,
 } from "ant-design-vue";
 import { LEVE_ORG } from "./const";
 import outletColumns from "@/const/columns/outletColumns";
@@ -290,7 +464,9 @@ import StaffService from "@/service/StaffService";
 import { iStaffItem } from "@/service/StaffService/types";
 import AddressService from "@/service/AddressService";
 import moment from "moment";
-import { FormItem } from "ant-design-vue/types/form/form-item";
+import HeaderSelect3 from "@/components/HeaderSelect3/index.vue";
+import { fooList as fooList_createOutlet } from "@/components/HeaderSelect3/const";
+import { iOutLetDetail } from "@/service/AddressService/types";
 
 const FormModelItem = FormModel.Item;
 const SelectOption = Select.Option;
@@ -304,7 +480,6 @@ enum eModalType {
 
 export default Vue.extend({
   components: {
-    "a-cascader": Cascader,
     "a-switch": Switch,
     FormModel,
     FormModelItem,
@@ -316,15 +491,69 @@ export default Vue.extend({
     TextArea,
     HeaderSelect,
     Spin,
+    HeaderSelect3,
   },
   data() {
     const that = this;
+
+    const rules = {
+      startTime: [{ required: true, message: "请选择开始时间" }],
+      endTime: [{ required: true, message: "请选择结束时间" }],
+      location: [
+        {
+          required: true,
+          message: "请输入现详细地址",
+        },
+      ],
+      la: [{ required: true, message: "请输入纬度" }],
+      lo: [{ required: true, message: "请输入经度" }],
+      remark: [
+        {
+          validator: (rule: any, value: any, cb: (...args: any) => any) => {
+            const isOpen = (that as any).formData.isOpen;
+            if (!isOpen && value.length === 0) {
+              cb(new Error("请输入不营业原因"));
+            } else {
+              cb();
+            }
+          },
+          trigger: "change",
+        },
+      ],
+    };
+
+    const editOutLetRules = {
+      ...rules,
+      newSecondSubBranch: [
+        {
+          required: true,
+          message: "请输入现属二级支行",
+        },
+      ],
+    };
+
+    const createOutLetRules = {
+      ...rules,
+      firstBranch: [
+        { required: true, message: "请选择一级分行", trigger: "blur" },
+      ],
+      secondBranch: [
+        { required: true, message: "请选择二级分行", trigger: "blur" },
+      ],
+      firstSubBranch: [
+        { required: true, message: "请选择一级支行", trigger: "blur" },
+      ],
+      secondSubBranch: [{ required: true, message: "请选择二级支行" }],
+    };
+
     return {
+      tableLoading: false,
       id: NaN,
       showNote: false,
       noteContent: "",
       showNoteLoading: false,
       fooList,
+      fooList_createOutlet: fooList_createOutlet,
       la: "",
       lo: "",
       cascaderValue: [] as any[],
@@ -352,37 +581,8 @@ export default Vue.extend({
         endTime: undefined as any,
         remark: "",
       },
-      formRules: {
-        startTime: [{ required: true, message: "请选择开始时间" }],
-        endTime: [{ required: true, message: "请选择结束时间" }],
-        newSecondSubBranch: [
-          {
-            required: true,
-            message: "请输入现属二级支行",
-          },
-        ],
-        location: [
-          {
-            required: true,
-            message: "请输入现详细地址",
-          },
-        ],
-        la: [{ required: true, message: "请输入纬度" }],
-        lo: [{ required: true, message: "请输入经度" }],
-        remark: [
-          {
-            validator: (rule: any, value: any, cb: (...args: any) => any) => {
-              const isOpen = (that as any).formData.isOpen;
-              if (!isOpen && value.length === 0) {
-                cb(new Error("请输入不营业原因"));
-              } else {
-                cb();
-              }
-            },
-            trigger: "change",
-          },
-        ],
-      },
+      createOutlet_formRules: createOutLetRules,
+      formRules: editOutLetRules,
       openDaysOptions: [
         { label: "星期一", value: "1", disabled: true },
         { label: "星期二", value: "2", disabled: true },
@@ -415,16 +615,19 @@ export default Vue.extend({
     },
     getLalo() {
       if ("geolocation" in window.navigator) {
-        window.navigator.geolocation.getCurrentPosition((position) => {
+        window.navigator.geolocation.getCurrentPosition(
+          (position) => {
             this.formData.la = position.coords.latitude.toString();
             this.formData.lo = position.coords.longitude.toString();
             const form = this.$refs.form as FormModel;
             form.validateField(["la", "lo"], (err) => {});
-        }, (error)=>{
-          message.error('获取失败')
-        });
-      }else{
-        message.error("浏览器不支持获取GPS")
+          },
+          (error) => {
+            message.error("获取失败");
+          }
+        );
+      } else {
+        message.error("浏览器不支持获取GPS");
       }
     },
     async clickViewNote(record: any) {
@@ -447,16 +650,19 @@ export default Vue.extend({
     setFooList(v: any[]) {
       this.fooList = [...v];
     },
-    async clickEdit(record: any) {
+    setFooList_createOutlet(v: any[]) {
+      this.fooList_createOutlet = [...v];
+    },
+    async clickEdit(record: iOutLetDetail) {
       this.id = record.id;
       this.modalType = eModalType.edit;
       const branchValues = this.$route.query.branchValues as string;
-      const arr = branchValues.split(",");
-      this.formData.firstBranch = arr[0];
-      this.formData.secondBranch = arr[1];
-      this.formData.firstSubBranch = arr[2];
-      this.formData.secondSubBranch = arr[3];
-      this.formData.newSecondSubBranch = arr[3];
+      // const arr = branchValues.split(",");
+      this.formData.firstBranch = record.province_name;
+      this.formData.secondBranch = record.city_name;
+      this.formData.firstSubBranch = record.region_name;
+      this.formData.secondSubBranch = record.outlet_name;
+      this.formData.newSecondSubBranch = record.outlet_name;
       this.formData.location = record.location;
       this.formData.isOpen = record.is_normal_work;
       this.formData.la = record.latitude;
@@ -483,26 +689,26 @@ export default Vue.extend({
 
       this.firstBranchOptions = [
         {
-          value: arr[0],
-          label: arr[0],
+          value: record.province_name,
+          label: record.province_name,
         },
       ];
       this.secondBranchOptions = [
         {
-          value: arr[1],
-          label: arr[1],
+          value: record.city_name,
+          label: record.city_name,
         },
       ];
       this.firstSubBranchOptions = [
         {
-          value: arr[2],
-          label: arr[2],
+          value: record.region_name,
+          label: record.region_name,
         },
       ];
       this.secondSubBranchOptions = [
         {
-          value: arr[3],
-          label: arr[3],
+          value: record.outlet_name,
+          label: record.outlet_name,
         },
       ];
       this.visible = true;
@@ -514,10 +720,13 @@ export default Vue.extend({
         okText: "确定",
         okType: "danger",
         cancelText: "取消",
-        onOk() {
-          return new Promise((r) => {
-            setTimeout(r, 1000);
+        onOk: async () => {
+          await AddressService.getInstance().delete({
+            id: record.id,
           });
+          // this.initTableDataSource();
+          message.success("删除成功");
+          this.$router.go(-1);
         },
         onCancel() {},
       });
@@ -525,26 +734,67 @@ export default Vue.extend({
     handleClickCancel() {
       this.visible = false;
     },
-    handleClickConfirm() {
+    createOutlet() {
+      const form = this.$refs.createOutlet_form as FormModel;
+      form.validate(async (isValid) => {
+        if (isValid) {
+          this.visible = false;
+          const ret = await AddressService.getInstance().add({
+            is_normal_work: this.formData.isOpen,
+            lat_lon: `${this.formData.la},${this.formData.lo}`,
+            location: this.formData.location,
+            note: this.formData.remark,
+            opening_hours: getOpeningHoursFromMoment(
+              this.formData.startTime,
+              this.formData.endTime
+            ),
+            province_id: this.formData.firstBranch as number,
+            city_id: this.formData.secondBranch as number,
+            region_id: this.formData.firstSubBranch as number,
+            region_name: this.fooList_createOutlet[2].options.find(
+              (i) => i.ID === this.formData.firstSubBranch
+            )?.Name as string,
+            name: this.formData.secondSubBranch,
+            weekend_status: getWeekendStatusFromArr(this.formData.openDays),
+          });
+          if (ret.code === 200) {
+            message.success("新增成功");
+          }
+        }
+      });
+    },
+    updateOutlet() {
       const form = this.$refs.form as FormModel;
       form.validate((isValid) => {
         if (isValid) {
-          AddressService.getInstance().update({
+          this.visible = false;
+          AddressService.getInstance()
+            .update({
               id: this.id,
               is_normal_work: this.formData.isOpen,
               lat_lon: `${this.formData.la},${this.formData.lo}`,
               location: this.formData.location,
+              name: this.formData.newSecondSubBranch,
               note: this.formData.remark,
               opening_hours: getOpeningHoursFromMoment(
                 this.formData.startTime,
                 this.formData.endTime
               ),
               weekend_status: getWeekendStatusFromArr(this.formData.openDays),
+            })
+            .then(() => {
+              this.initTableDataSource();
             });
-          this.visible = false;
         }
       });
     },
+    handleClickConfirm() {
+      if (this.modalType === eModalType.create) {
+        this.createOutlet();
+      } else {
+        this.updateOutlet();
+      }
+    },
     clickAddNewOnSearchPage() {
       this.visible = true;
       this.modalType = eModalType.create;
@@ -596,34 +846,49 @@ export default Vue.extend({
           })
           .toString();
 
+        const branchIds = this.fooList
+          .map((i) => {
+            return i.options.find((item) => item.ID === i.value)?.ID;
+          })
+          .toString();
+
         const outletName = this.fooList[3].options.find(
           (i) => i.ID === this.fooList[3].value
         )?.Name;
         this.$router.push({
           query: {
             branchValues,
+            branchIds,
           },
         });
         this.initTableDataSource();
       }
     },
+    afterClose() {
+      if (this.modalType === eModalType.edit) {
+        const form = this.$refs.form as FormModel;
+        form.resetFields();
+      } else {
+        const form = this.$refs.createOutlet_form as FormModel;
+
+        form.resetFields();
+      }
+    },
     async initTableDataSource() {
+      this.tableLoading = true;
       const branchValues = this.$route.query.branchValues as string;
-      const arr = branchValues.split(",");
-      const second_sub_branch = arr[3];
+      const branchIds = this.$route.query.branchIds as string;
+      const ids = branchIds.split(",");
 
-      this.dataSource = [
-        {
-          first_branch: arr[0],
-          second_branch: arr[1],
-          first_sub_branch: arr[2],
-          second_sub_branch: arr[3],
-        },
-      ];
       const ret = await AddressService.getInstance().getOutlet({
-        outlet_name: second_sub_branch,
+        id: Number(ids[3]),
       });
       if (ret.code === 200) {
+        this.dataSource = [{}];
+        this.dataSource[0].first_branch = ret.data.province_name;
+        this.dataSource[0].second_branch = ret.data.city_name;
+        this.dataSource[0].first_sub_branch = ret.data.region_name;
+        this.dataSource[0].second_sub_branch = ret.data.outlet_name;
         this.dataSource[0].location = ret.data.location;
         this.dataSource[0].is_normal_work = ret.data.is_normal_work;
         this.dataSource[0].opening_hours = ret.data.opening_hours;
@@ -636,6 +901,7 @@ export default Vue.extend({
         };
         this.dataSource = [...this.dataSource];
       }
+      this.tableLoading = false;
     },
     clickQueryOnSearchPage() {},
     clickReset() {
@@ -648,6 +914,11 @@ export default Vue.extend({
       this.searchPageReqParams.startTime = undefined;
       this.searchPageReqParams.endTime = undefined;
     },
+    clickAddOutlet() {
+      (this.$refs.headerselect3 as any)?.init();
+      this.visible = true;
+      this.modalType = eModalType.create;
+    },
   },
   computed: {
     showbranchFilter() {
@@ -675,13 +946,27 @@ export default Vue.extend({
       );
     },
   },
+  watch: {
+    fooList_createOutlet(
+      newV: typeof fooList_createOutlet,
+      oldV: typeof fooList_createOutlet
+    ): any {
+      // console.log(newV[0].value, "v");
+      // this.formData.firstBranch = 1
+      // this.formData.firstBranch = newV[0].value
+      // console.log(this.formData, 1);
+      newV.forEach((item, index) => {
+        console.log(item.propName, item.value);
+
+        (this.formData as any)[item.propName] = item.value;
+      });
+      // console.log(this.formData, 2);
+    },
+  },
 });
 </script>
 
-<style lang="less" scoped>
-.cascader {
-  width: 400px;
-}
+<style lang="less">
 .base_form_item {
   // justify-content: center;
   display: flex;