用户管理功能更新

src/const/columns/managerColumns.ts

+import { column } from "@/types/column"
+const columns:Array<column> = 
+[
+  {
+    title: '注册时间',
+    dataIndex: 'time',
+  },
+  {
+    title:'uid',
+    dataIndex:'key'
+  },
+  {
+    title:'姓名',
+    dataIndex: 'name'
+  },
+  {
+    title:'岗位角色',
+    dataIndex: 'role'
+  },
+  {
+    title: '手机号',
+    dataIndex: 'account',
+  },
+  {
+    title: '所在机构层级',
+    dataIndex: 'bank',
+  },
+  {
+    title: '所属二级支行',
+    dataIndex: 'secondary_sub_branch',
+  },
+  {
+    title: '所属一级支行',
+    dataIndex: 'firstLevel_sub_branch',
+  },
+  {
+    title: '所属二级分行',
+    dataIndex: 'secondary_branch',
+  },
+  {
+    title: '所属一级支行',
+    dataIndex: 'firstLevel_branch',
+  },
+  {
+    title:'客户名单',
+    scopedSlots: { customRender: 'clientList' },
+  },
+  {
+    title:'详细地址',
+    dataIndex: 'location',
+  },
+  {
+    title:'操作uid',
+    dataIndex: 'actionUid',
+  },
+  {
+    title:'状态',
+    dataIndex: 'state',
+  },
+  {
+    title:'操作',
+    scopedSlots: { customRender: 'action' },
+  },
+]
+
+export{
+  columns
+}

src/const/columns/userColumns.ts

@@ -6,7 +6,15 @@ const columns:Array<column> =
     dataIndex: 'time',
   },
   {
-    title: '注册账号',
+    title:'uid',
+    dataIndex:'key'
+  },
+  {
+    title:'姓名',
+    dataIndex: 'name'
+  },
+  {
+    title: '手机号',
     dataIndex: 'account',
   },
   {

src/mock/cascader.ts

+export const options = [
+  {
+    label: '浙江省分行',
+    value: '0-0',
+    children: [
+      {
+        value: '0-0-1',
+        label: '杭州市分行',
+        children:[
+          {
+            value: '0-0-0-1',
+            label: '杭州高新支行',
+            children:[
+              {
+                value: '0-0-0-0-1',
+                label: '杭州高新支行',
+              },
+              {
+                value: '0-0-0-0-2',
+                label: '杭州名仕支行',
+              },
+              {
+                value: '0-0-0-0-3',
+                label: '杭州申花路支行',
+              },              {
+                value: '0-0-0-0-4',
+                label: '杭州高新支行营业部',
+              }
+            ]
+          },
+          {
+            value: '0-0-0-2',
+            label: '杭州西湖支行',
+          },
+          {
+            value: '0-0-0-3',
+            label: '杭州富阳支行',
+          },
+          {
+            value: '0-0-0-4',
+            label: '杭州临安支行',
+          }
+        ]
+      },
+      {
+        label: '桐庐市分行',
+        value: '0-0-2',
+      },
+      {
+        label: '金华市分行',
+        value: '0-0-3',      
+      },
+      {
+        label: '丽水市分行',
+        value: '0-0-4',      
+      }
+    ],
+  },
+  {
+    label: '广东省分行',
+    value: '0-1',
+  },
+];
\ No newline at end of file

src/mock/firstLevelManager.ts

+import { staff,bank,state,role } from "@/types/staff"
+export const firstLevelManager:Array<staff>=[
+  {
+    key:'01',
+    time:'2021-09-01 9:00',
+    name:'王勤',
+    role:role[0],
+    account:'1811111111111',
+    bank:bank[0],
+    firstLevel_branch:'浙江省分行',
+    location:'浙江省杭州市西湖区文三路250号',
+    actionUid:'01',
+    state:state[0]
+  },
+  {
+    key:'02',
+    time:'2021-09-01 9:00',
+    name:'柯雄彬',
+    role:role[0],
+    account:'1811111111111',
+    bank:bank[0],
+    firstLevel_branch:'浙江省分行',
+    location:'浙江省杭州市西湖区申花路424号',
+    actionUid:'02',
+    state:state[2]
+  },
+  {
+    key:'03',
+    time:'2021-09-01 9:00',
+    name:'傅海华',
+    role:role[0],
+    account:'1811111111111',
+    bank:bank[0],
+    firstLevel_branch:'浙江省分行',
+    location:'浙江省杭州市拱墅区湖墅南路277号',
+    actionUid:'03',
+    state:state[1]
+  },
+  {
+    key:'01',
+    time:'2021-09-01 9:00',
+    name:'王勤',
+    role:role[0],
+    account:'1811111111111',
+    bank:bank[0],
+    firstLevel_branch:'浙江省分行',
+    location:'浙江省杭州市拱墅区湖墅南路277号',
+    actionUid:'04',
+    state:state[2]
+  },
+]
\ No newline at end of file

src/mock/index.ts

@@ -4,11 +4,15 @@ import { newsList } from '@/mock/news'
 import { msgList } from '@/mock/msg'
 import { chatList } from '@/mock/chat'
 import { activityList } from './activity'
+import { options } from './cascader'
+import { firstLevelManager } from './firstLevelManager'
 export{
   bannerList,
   userList,
   newsList,
   msgList,
   chatList,
-  activityList
+  activityList,
+  options,
+  firstLevelManager
 }
\ No newline at end of file

src/mock/user.ts

@@ -3,27 +3,31 @@ import {user} from '@/types/user'
 const userList:Array<user> =[
   {
     key: '1',
+    name:'王勤',
     time: '2021-09-01 9:00',
     account: '13101362773',
-    bank: '杭州高新支行营业部'
+    bank: '浙江省杭州市西湖区文三路250号'
   },
   {
     key: '2',
+    name:'柯雄彬',
     time: '2021-09-01 9:00',
     account: '13101362773',
-    bank: '杭州滨江支行营业部'
+    bank: '浙江省杭州市西湖区文三路250号'
   },
   {
     key: '3',
+    name:'傅海华',
     time: '2021-09-01 9:00',
     account: '13101362773',
-    bank: '杭州浦沿支行营业部'
+    bank: '浙江省杭州市西湖区文三路250号'
   },
   {
     key: '4',
+    name:'傅海华',
     time: '2021-09-01 9:00',
     account: '13101362773',
-    bank: '杭州浦沿支行营业部'
+    bank: '浙江省杭州市西湖区文三路250号'
   }      
 ]
 

src/types/staff.ts

+enum bank{
+  '一级分行',
+  '二级分行',
+  '一级支行',
+  '二级支行',
+}
+enum role{
+  '管理岗',
+  '客户经理'
+}
+
+enum state{
+  '启用中/在岗',
+  '启用中/不在岗',
+  '已禁用',
+}
+
+interface staff{
+  key:string,
+  time:string,
+  name:string,
+  role:string,
+  account:string,
+  bank:string,
+  firstLevel_branch:string,
+  secondary_branch?:string,
+  firstLevel_sub_branch?:string,
+  secondary_sub_branch?:string,
+  location:string,
+  actionUid:string,
+  state:string
+}
+
+export{
+  bank,
+  role,
+  staff,
+  state
+}
\ No newline at end of file

src/types/user.ts

 export interface user{
   key:string,
   time: string,
+  name:string
   account:string,
   bank:string
 }
\ No newline at end of file

src/views/Root/UserManage/client.vue → src/views/Root/User/client.vue

 <template>
   <div>
-    <p class=" text-2xl font-bold mb-5">用户管理</p>
+    <p class=" text-2xl font-bold mb-5">客户信息</p>
       <!-- timepicker -->
       <span class=" font-semibold">注册时间：</span>
       <a-range-picker @change="onChange" :placeholder="['起始日期', '结束日期']" v-model="value" style=" margin-right:10px;" />
+      <a-input placeholder="姓名模糊搜索" v-model="queryName" style=" width:150px; margin-right:10px;"/>
+      <a-input placeholder="手机号模糊搜索" v-model="queryTel" style=" width:150px; margin-right:10px;" />
       <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
       <a-button type="primary" @click="reset">重置</a-button>
       <!-- 客户信息列表 -->
@@ -12,10 +14,10 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import {DatePicker,Button} from 'ant-design-vue';
-import {userList} from '@/mock/index';
-import {user} from '@/types/user';
+import Vue from "vue"
+import { DatePicker,Button } from 'ant-design-vue'
+import { userList } from '@/mock/index'
+import { user } from '@/types/user'
 import { columns } from '@/const/columns/userColumns'
 Vue.use(DatePicker).use(Button);
 
@@ -31,7 +33,9 @@ export default Vue.extend({
   data() {
     return {
       value:[],
-    };
+      queryName:'',
+      queryTel:''
+    }
   },
   watch: {},
   methods:{
@@ -43,7 +47,8 @@ export default Vue.extend({
     },
     reset(){
       this.value = []
-      // console.log(this.value == []);
+      this.queryName = ''
+      this.queryTel = ''
     }
   }
 });

src/views/Root/User/index.vue

+<template>
+  <div>
+    <p class=" text-2xl font-bold mb-5">用户管理</p>
+    <div>
+      <!-- 级联选择 -->
+      <a-cascader :disabled="search.length == 0? false:true" 
+                  v-model="value" 
+                  :options="options" 
+                  change-on-select 
+                  placeholder="通过选择搜索" 
+                  style=" width:40%;margin-right:15px;"/>
+      <!-- 搜索框 -->
+      <a-input :disabled="value.length == 0? false:true" placeholder="通过输入详细地址搜索"  v-model="search" style="width: 20%; margin-right:15px;"/>
+      <!-- 操作 -->
+        <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
+        <a-button type="primary" style=" margin-right:10px;" @click="reset">重置</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Cascader} from 'ant-design-vue'
+import { options } from '@/mock/index'
+import { message } from 'ant-design-vue'
+Vue.use(Cascader)
+Vue.prototype.$message = message
+
+export default Vue.extend({
+  computed:{
+    options(){
+      return options
+    }
+  },
+  data(){
+    return{
+      search:'',
+      value:[],
+      casDisabled:false,
+      inputDisabled:false
+    }
+  },
+  methods:{
+    query(){
+     if( this.value.length==0 && this.search.length == 0 ){
+        this.$message.info('请通过选择或者输入详细地址搜索')
+     }else{
+        const search:string|Array<string> = this.value.length==0? this.search:this.value
+        console.log(search)
+      }
+    },
+    reset(){
+      this.value = []
+      this.search = ''
+    },
+  }
+})
+</script>
\ No newline at end of file

src/views/Root/User/staff.vue

+<template>
+  <div>
+    <p class=" text-2xl font-bold mb-5">员工信息</p>
+      <!-- timepicker -->
+      <span class=" font-semibold">创建时间：</span>
+      <a-range-picker @change="onChange" :placeholder="['起始日期', '结束日期']" v-model="value" style=" margin-right:10px;" />
+      <a-input placeholder="姓名模糊搜索" v-model="queryName" style=" width:150px; margin-right:10px;"/>
+      <a-input placeholder="手机号模糊搜索" v-model="queryTel" style=" width:150px; margin-right:10px;" />
+      <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
+      <a-button type="primary" @click="reset">重置</a-button>
+      <!-- 客户信息列表 -->
+      <a-table :columns="columns" :data-source="firstLevelManager" style=" text-align: center; margin-top:40px;" bordered >
+         <span v-if="record.secondary_sub_branch!=''" slot="secondary_sub_branch" slot-scope="text,record"></span>
+         <span slot="clientList" slot-scope="text,record"> <a @click="getClientList(record.key)">查看</a> </span>
+         <span slot="action" slot-scope="text,record" >
+           <a-popconfirm
+            v-if="record.state!='已禁用'"
+            title="确定调配吗?"
+            cancelText="取消"
+            okText="确定"
+            @confirm="() => deploy(record.key)"
+          >
+            <a href="javascript:;">调配</a>
+          </a-popconfirm>
+          <a-popconfirm
+            v-if="record.state=='已禁用'"
+            title="确定启用吗?"
+            cancelText="取消"
+            okText="确定"
+            @confirm="() => enable(record.key)"
+          >
+            <a>启用</a>
+          </a-popconfirm>
+          <a-popconfirm
+            v-else
+            title="确定禁用吗?"
+            cancelText="取消"
+            okText="确定"
+            @confirm="() => disable(record.key)"
+          >
+            <a-divider type="vertical" />
+            <a>禁用</a>
+          </a-popconfirm>
+          <a-popconfirm
+            v-if="record.state==('启用中/在岗')"
+            title="确定将该账户设为不在岗吗?"
+            cancelText="取消"
+            okText="确定"
+            @confirm="() => offJob(record.key)"
+          >
+            <a-divider type="vertical" />
+            <a href="javascript:;">不在岗</a>
+          </a-popconfirm>
+          <a-popconfirm
+            v-else-if="record.state==('启用中/不在岗')"
+            title="确定将该账户设为在岗吗?"
+            cancelText="取消"
+            okText="确定"
+            @confirm="() => inJob(record.key)"
+          >
+            <a-divider type="vertical" />
+            <a href="javascript:;">在岗</a>
+          </a-popconfirm>
+         </span>
+      </a-table>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue"
+import { DatePicker,Button } from 'ant-design-vue'
+import { firstLevelManager } from '@/mock/index'
+import { staff } from '@/types/staff'
+import { columns } from '@/const/columns/managerColumns'
+Vue.use(DatePicker).use(Button);
+
+export default Vue.extend({
+  computed: {
+    firstLevelManager():Array<staff>{
+      return firstLevelManager
+    },
+    columns(){
+      return columns
+    }
+  },
+  data() {
+    return {
+      value:[],
+      queryName:'',
+      queryTel:''
+    }
+  },
+  watch: {},
+  methods:{
+    onChange(){
+      console.log(this.value)
+    },
+    query(){
+      console.log(this.value)
+    },
+    reset(){
+      this.value = []
+      this.queryName = ''
+      this.queryTel = ''
+    },
+    enable(key:string){
+      console.log(key)
+    },
+    disable(key:string){
+      console.log(key) 
+    },
+    deploy(key:string){
+      console.log(key)
+    },
+    inJob(key:string){
+      console.log(key)
+    },
+    offJob(key:string){
+      console.log(key)
+    },
+    getClientList(key:string){
+      console.log(key)
+    }
+  }
+});
+</script>
\ No newline at end of file

src/views/Root/UserManage/index.vue

-<template>
-  <div>
-    <p class=" text-2xl font-bold mb-5">用户管理</p>
-    <a-tree-select
-      v-model="value"
-      show-search
-      style="width: 100%"
-      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-      placeholder="Please select"
-      allow-clear
-      tree-default-expand-all
-    >
-      <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
-        <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
-          <a-tree-select-node key="random" :selectable="false" value="leaf1" title="my leaf" />
-          <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
-        </a-tree-select-node>
-        <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
-          <a-tree-select-node key="random3" value="sss">
-            <b slot="title" style="color: #08c">sss</b>
-          </a-tree-select-node>
-        </a-tree-select-node>
-      </a-tree-select-node>
-    </a-tree-select>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import { TreeSelect} from 'ant-design-vue'
-Vue.use(TreeSelect)
-export default Vue.extend({
-  data(){
-    return{
-      treeExpandedKeys: [],
-      value: undefined,
-    }
-  }
-})
-</script>
\ No newline at end of file

src/views/Root/getMenuList.ts

@@ -60,8 +60,37 @@ export const menuList: iMenuConfigItem[] = [
     getName: () => '用户管理',
     onClick: (e: Event) => {},
     routeName: 'userManage',
-    path: '/backend/userManage',
-    component: () => import('@/views/Root/UserManage/index.vue'),
+    path: '/backend/user',
+    component: () => import('@/views/Root/User/index.vue'),
+    roles: [
+      eRole.superManager,
+      eRole.firstLevel_branch,
+      eRole.firstLevel_sub_branch,
+      eRole.secondary_branch,
+      eRole.secondary_sub_branch,
+    ],
+  },
+  {
+    getName: () => '客户名单',
+    onClick: (e: Event) => {},
+    routeName: 'client',
+    path: '/backend/user/client',
+    hiddeInMenu:true,
+    belongToMenuName:'userManage',
+    component: () => import('@/views/Root/User/client.vue'),
+    roles: [
+      eRole.superManager,
+      eRole.firstLevel_branch,
+    ],
+  },
+  {
+    getName: () => '员工名单',
+    onClick: (e: Event) => {},
+    routeName: 'staff',
+    path: '/backend/user/staff',
+    hiddeInMenu:true,
+    belongToMenuName:'userManage',
+    component: () => import('@/views/Root/User/staff.vue'),
     roles: [
       eRole.superManager,
       eRole.firstLevel_branch,
@@ -71,7 +100,7 @@ export const menuList: iMenuConfigItem[] = [
     getName: () => '资讯管理',
     routeName:'newsManage',
     onClick: (e: Event) => {},
-    path: '/backend/news',
+    path: '/backend/user/staff',
     component: () => import('@/views/Root/News/index.vue'),
     roles: [
       eRole.superManager,