1

src/components/UserManage/addNormalManagerModal.vue

 <template>
   <!-- 新增弹窗 -->
-  <a-modal v-model="show" title="新增" :centered="true" footer="" :level="level">
-    <a-form-model :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" ref="addForm" :rules="addrules">
+  <a-modal
+    v-model="show"
+    :title="title"
+    :centered="true"
+    footer=""
+    :level="level"
+  >
+    <a-form-model
+      :model="form"
+      :label-col="{ span: 8 }"
+      :wrapper-col="{ span: 14 }"
+      ref="addForm"
+      :rules="addrules"
+    >
       <a-form-model-item label="名称" :required="true" prop="name">
-        <a-input v-model="form.name" placeholder="请输入名称" style="width: 200px"/>
+        <a-input
+          v-model="form.name"
+          placeholder="请输入名称"
+          style="width: 200px"
+        />
       </a-form-model-item>
       <a-form-model-item label="手机号" prop="tel">
-        <a-input v-model="form.tel" placeholder="请输入手机号" style="width: 200px"/>
+        <a-input
+          v-model="form.tel"
+          placeholder="请输入手机号"
+          style="width: 200px"
+        />
       </a-form-model-item>
-      <a-form-model-item label="初始密码"  prop="password" >
-        <a-input v-model="form.password" style="width: 200px"/>
+      <a-form-model-item label="初始密码" prop="password">
+        <a-input v-model="form.password" style="width: 200px" />
       </a-form-model-item>
-      <a-form-model-item label="岗位角色" >
-        <span class=" text-sm text-black mr-2">sds</span>
-        <a-switch @change="onChange" />
-        <span class=" ml-2">可对同级管理员进行管理调配</span>
+      <a-form-model-item label="岗位角色">
+        <span class="text-sm text-black mr-2">{{ theRole }}</span>
+        <a-switch @change="onChange" v-if="isManager" />
+        <span class="ml-2" v-if="isManager">可对同级管理员进行管理调配</span>
       </a-form-model-item>
-      <a-form-model-item label="用户所在机构层级" >
-        <span class=" text-sm text-black">scs</span>
+      <a-form-model-item label="用户所在机构层级">
+        <span class="text-sm text-black">{{ searchLevel | filterLevel }}</span>
       </a-form-model-item>
       <!-- 不可选层级 -->
-      <a-form-model-item :label="'所属'+label[i-1]" v-for="i in level" :key="i.id" >
-        <span class=" text-sm text-black">fjhb</span>
-      </a-form-model-item>
+      <!-- <a-form-model-item
+        v-for="i in level"
+        :label="'所属' + label[i - 1]"
+        :key="i"
+      >
+        <span class="text-sm text-black">fjhb</span>
+      </a-form-model-item> -->
       <!-- 可选层级 -->
-      <a-form-model-item :label="'所属'+labelList[n-1]" v-for="n in level_org-level" :key="n.id">
-        <a-select :placeholder="'选择所属'+labelList[n-1]"  style="width: 200px; margin-right:10px;">
-          <a-select-option v-for="bank in bankList" :key="bank">{{bank}}</a-select-option>
+      <!--  <a-form-model-item
+        v-for="n in level_org - level"
+        :label="'所属' + labelList[n - 1]"
+        :key="n"
+      >
+        <a-select
+          :placeholder="'选择所属' + labelList[n - 1]"
+          style="width: 200px; margin-right: 10px"
+        >
+          <a-select-option v-for="bank in bankList" :key="bank">{{
+            bank
+          }}</a-select-option>
         </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="新地址" :required="true" prop="location" >
-        <a-input v-model="form.location" placeholder="请输入新地址" style="width: 200px"/>
+      </a-form-model-item> -->
+      <a-form-model-item label="新地址" :required="true" prop="location">
+        <a-input
+          v-model="form.location"
+          placeholder="请输入新地址"
+          style="width: 200px"
+        />
       </a-form-model-item>
     </a-form-model>
     <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
       <a-button type="primary" @click="onConfirm">发布</a-button>
-        <a-button style="margin-left: 10px;" @click="show=false">取消</a-button>
+      <a-button style="margin-left: 10px" @click="show = false">取消</a-button>
     </a-form-model-item>
   </a-modal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { PropType } from 'vue'
-import { FormModel,Switch } from 'ant-design-vue'
-import { eLevel } from '@/types/level'
-import { LEVE_ORG } from '@/views/Root/OutletManagement/const'
-Vue.use(Switch)
+import Vue from "vue";
+import { PropType } from "vue";
+import { FormModel, Switch } from "ant-design-vue";
+import { eLevel } from "@/types/level";
+import { LEVE_ORG } from "@/views/Root/OutletManagement/const";
+import { mapMutations, mapState } from "vuex";
+import {
+  eAddManagerModalMode,
+  eTypeOfOperatedObject,
+} from "@/store/UserManagement/types";
+import HeaderSelect from "@/views/Root/OutletManagement/components/HeaderSelect2/index.vue";
+
+Vue.use(Switch);
 
 export default Vue.extend({
-  computed:{
-    bankList():Array<string>{
-      return ['ada','ads','ds','dsa']
+  components: {
+    HeaderSelect,
   },
-    labelList():Array<String>{
-      return this.label.slice(this.level,this.label.length)
-    },
-    level_org():Number{
-      return LEVE_ORG
+  computed: {
+    title(): string | undefined {
+      if (this.modalMode === eAddManagerModalMode.create) {
+        return "新增";
+      } else if (this.modalMode === eAddManagerModalMode.edit) {
+        return "调配";
       }
     },
-  props:{
-    label:{
-      type:Array as PropType<String[]>,
-      default(){
-        return ['一级分行','二级分行','一级支行','二级支行']
+    theRole(): string | undefined {
+      if (this.typeOfOperatedObject === eTypeOfOperatedObject.manager) {
+        return "管理员";
+      } else if (
+        this.typeOfOperatedObject === eTypeOfOperatedObject.clientManager
+      ) {
+        return "客户经理";
       }
     },
-    level:{
-      type:Number as PropType<eLevel>,
-      default:0
-    }
+    isManager(): boolean {
+      return this.typeOfOperatedObject === eTypeOfOperatedObject.manager;
     },
-  data(){
-    const addrules={
-      name: [
-        { required: true, message: '请输入名称', trigger: 'blur' },
-      ],
-      tel: [
-        { required: true, message: '请输入手机号', trigger: 'blur' },
-      ],
+    show: {
+      set(v: boolean) {
+        this.setModal(v);
+      },
+      get(): boolean {
+        return this.modalShow;
+      },
+    },
+    bankList(): string[] {
+      return ["ada", "ads", "ds", "dsa"];
+    },
+    labelList(): string[] {
+      return this.label.slice(this.level, this.label.length);
+    },
+    level_org(): number {
+      return LEVE_ORG;
+    },
+    ...mapState("UserManagement", {
+      modalShow: "modalShow",
+      modalMode: "modalMode",
+      searchLevel: "searchLevel",
+      branchDetailMsg: "branchDetailMsg",
+      personalMsg: "personalMsg",
+      typeOfOperatedObject: "typeOfOperatedObject",
+    }),
+  },
+  props: {
+    label: {
+      type: Array as PropType<string[]>,
+      default() {
+        return ["一级分行", "二级分行", "一级支行", "二级支行"];
+      },
+    },
+    level: {
+      type: Number as PropType<eLevel>,
+      default: 0,
+    },
+  },
+  data() {
+    const addrules = {
+      name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
       location: [
-        { required: true, message: '请输入详细地址', trigger: 'blur' },
-      ]
-    }
-    return{
-      show:false,
+        { required: true, message: "请输入详细地址", trigger: "blur" },
+      ],
+    };
+    return {
       addrules,
-      form:{
-        name:'',
-        tel:'',
-        password:'abc123456',
-        location:'',
-        privilege:false
+      form: {
+        name: "",
+        tel: "",
+        password: "abc123456",
+        location: "",
+        privilege: false,
       },
-    }
+    };
   },
-  methods:{
-    showModal(){
-      this.show = true
+  methods: {
+    ...mapMutations("UserManagement", {
+      save: "save",
+    }),
+    showModal() {
+      this.setModal(true);
     },
-    onChange(checked:boolean){
-      this.form.privilege = checked
+    setModal(show: boolean) {
+      this.save({
+        modalShow: show,
+      });
     },
-    onConfirm(){
-      (this.$refs.addForm as FormModel).validate(valid => {
+    onChange(checked: boolean) {
+      this.form.privilege = checked;
+    },
+    onConfirm() {
+      (this.$refs.addForm as FormModel).validate((valid) => {
         if (valid) {
-          this.show = false
+          this.setModal(false);
         } else {
-          console.log('error submit!!');
           return false;
         }
-      })
+      });
     },
-  }
-})
+  },
+});
 </script>
 
 <style scoped>
-.ant-form-item{
-  margin-bottom:5px;
+.ant-form-item {
+  margin-bottom: 5px;
 }
 </style>
\ No newline at end of file

src/filter/index.ts

@@ -3,6 +3,7 @@ import { eUserStatus } from '@/types/user'
 import { editableProductStatus,eGuaranteeType,eProductType} from '@/types/loanProduct'
 import { activityStatus } from "@/service/ActivityService/type"
 import moment from 'moment'
+import { eLevel } from '@/types/level'
 
 export default {
   formatDate(timeStamp: number) {
@@ -106,7 +107,13 @@ export default {
     } else if(weekend_status === 3){
       return '周一至周日'
     }
-  }
+  },
+  filterLevel(level: eLevel) {
+    if (level === eLevel.firstLevel_branch) return '一级分行'
+    else if (level === eLevel.secondary_branch) return '二级分行'
+    if (level === eLevel.firstLevel_sub_branch) return '一级支行'
+    else if (level === eLevel.secondary_sub_branch) return '二级支行'
+  },
 } as {
   [key: string]: (...args: any) => any
 }

src/store/UserManagement/index.ts

+import { eLevel } from '@/types/level'
+import { Module } from 'vuex'
+import {
+  eAddManagerModalMode,
+  eTypeOfOperatedObject,
+  iUserManagementState,
+} from './types'
+
+export default <Module<iUserManagementState, {}>>{
+  namespaced: true,
+  state: {
+    modalShow: true,
+    modalMode: eAddManagerModalMode.create,
+    typeOfOperatedObject: eTypeOfOperatedObject.manager,
+    searchLevel: eLevel.firstLevel_branch,
+    branchDeatilMsg: {},
+    personalMsg: {
+      name: '',
+      uid: '',
+      phone: '',
+      branchDetailMsg: {},
+      address: '',
+    },
+    address: '',
+  },
+  mutations: {
+    save(state, payload) {
+      Object.assign(state, payload)
+    },
+  },
+  actions: {},
+}

src/store/UserManagement/types.ts

+import { eLevel } from '@/types/level'
+
+export enum eAddManagerModalMode {
+  edit,
+  create,
+}
+
+export enum eTypeOfOperatedObject {
+  manager,
+  clientManager,
+}
+
+export interface iBranchDetailMsg {
+  fb: string
+  sb: string
+  fsb: string
+  ssb: string
+
+  fb_id: number
+  sb_id: number
+  fsb_id: number
+  ssb_id: number
+}
+
+export interface iPersonalMsg {
+  name: string
+  uid: any
+  phone: string
+  branchDetailMsg: Partial<
+    Omit<iBranchDetailMsg, 'fb_id' | 'sb_id' | 'fsb_id' | 'ssb_id'>
+  >
+  address: string
+}
+
+export interface iUserManagementState {
+  modalShow: boolean
+  modalMode: eAddManagerModalMode
+  typeOfOperatedObject: eTypeOfOperatedObject | undefined
+  searchLevel: eLevel | undefined
+  branchDeatilMsg: Partial<iBranchDetailMsg>
+  personalMsg: iPersonalMsg
+  address: string
+}

src/store/index.ts

@@ -4,19 +4,22 @@ import platformUserManagement from './platformUserManagement/index'
 import { iPlatformModuleState } from './platformUserManagement/types'
 import loanProductManagement from './LoanProductManagement/index'
 import { iProductModuleState } from './LoanProductManagement/type'
+import UserManagement from './UserManagement/index'
 
 Vue.use(Vuex)
 
-const store = new Vuex.Store<{ platformUserManagement?: iPlatformModuleState,loanProductManagement?:iProductModuleState }>(
-  {
+const store = new Vuex.Store<{
+  platformUserManagement?: iPlatformModuleState
+  loanProductManagement?: iProductModuleState
+}>({
   state: {},
   mutations: {},
   actions: {},
   modules: {
     platformUserManagement,
     loanProductManagement,
+    UserManagement,
   },
-  },
-)
+})
 
 export default store

src/views/Root/OutletManagement/components/HeaderSelect2/const.ts

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

src/views/Root/OutletManagement/components/HeaderSelect2/index.vue

+<template>
+  <div class="header-select">
+    <FormModelItem v-for="(item, index) in fooList" :key="index" :label="item.label">
+      <a-select
+        class="header-select-item mx-3 my-2"
+        @change="(value) => handleSelectChange(value, index)"
+        :placeholder="item.placeholder"
+        :value="item.value"
+        :disabled="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 { eNewRoleRelatedToBackEnd } from "@/types/role";
+import { getSelfOutLet } from "@/utils/outlet";
+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";
+
+const FormModelItem = FormModel.Item;
+
+export default Vue.extend({
+  components: {
+    FormModelItem,
+    FormModel,
+  },
+  props: {
+    fooList: {
+      type: Array as PropType<typeof fooList>,
+    },
+    setFooList: Function,
+    level: Number,
+    role: String as PropType<eNewRoleRelatedToBackEnd>,
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    handleSelectChange(value: number, index: number) {
+      this.fooList[index].value = value;
+      const newList = this.fooList.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 !== 4 && 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) {
+        this.fooList[index].options = ret.data.item;
+        this.changeFooList(this.fooList);
+      }
+    },
+    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();
+      this.resetList();
+      this.$nextTick(() => {
+        if (this.role === eNewRoleRelatedToBackEnd.BackAdmin) {
+          this.initBackAdmin(selfOutLet);
+        } else if (this.level === eLevel.firstLevel_branch) {
+          this.init_firstLevel(selfOutLet);
+        } else if (this.level === eLevel.secondary_branch) {
+          this.init_secondLevel(selfOutLet);
+        } else if (this.level === eLevel.firstLevel_sub_branch) {
+          this.init_first_sub_Level(selfOutLet);
+        } else if (this.level === eLevel.secondary_sub_branch) {
+          this.init_second_sub_Level(selfOutLet);
+        }
+      });
+    },
+    async initBackAdmin(selfOutLet: iOutLet) {
+      const ret = await StaffService.getInstance().getBranch({
+        level: eLevel.firstLevel_branch,
+      });
+      if (ret.code === 200) {
+        const options = ret.data.item;
+        this.fooList[0].options = options;
+        const newList = this.fooList.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,
+      });
+      if (ret.code === 200) {
+        this.fooList[2].options = ret.data.item;
+      }
+      this.setFooList(this.fooList);
+    },
+    async init_first_sub_Level(selfOutLet: iOutLet) {
+      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) {
+        this.fooList[3].options = ret.data.item;
+      }
+      this.setFooList(this.fooList);
+    },
+    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