'页面管理完成'

src/api/role.js

@@ -51,6 +51,15 @@ export function postUser (data) {
     })
 }
 
+// 新增人员时,查询手机号和工号是否已经存在,如果已经存在,则不能新加
+export function getPhoneOrjobnumber (params) {
+    return request({
+      url: `/config/user/check`,
+      method: 'GET',
+      params
+    })
+}
+
 // 筛选人员
 export function searchUser (params) {
     return request({
@@ -59,3 +68,97 @@ export function searchUser (params) {
       params
     })
 }
+
+// 查询人员详情
+export function searchUserDetail (id) {
+    return request({
+      url: `/config/user/${id}`,
+      method: 'GET'
+    })
+}
+
+/**
+ *
+ * @param {Array} data 需要停用或者启动的i的数组
+ * @param {*} type  1 停用  2 启用
+ */
+
+// 停用多个账号
+export function stopUser (data, type) {
+    return request({
+      url: type === '1' ? `/config/user/stop` : '/config/user/enable',
+      method: 'POST',
+      data
+    })
+}
+
+// 删除账户
+export function deleteUser (data) {
+    return request({
+      url: `/config/user`,
+      method: 'DELETE',
+      data
+    })
+}
+
+// 添加角色
+export function postRole (data) {
+    const { type } = data
+    return request({
+      url: `/config/role`,
+      method: type === 'add' ? 'POST' : 'PUT',
+      data
+    })
+}
+
+// 查询角色
+export function getRole (params) {
+    return request({
+      url: `/config/role`,
+      method: 'GET',
+      params
+    })
+}
+
+// 删除角色
+export function deleteRole (id) {
+    return request({
+      url: `/config/role/${id}`,
+      method: 'DELETE'
+    })
+}
+
+// 查询权限菜单
+export function getRoleMenu (params) {
+    return request({
+      url: `/config/authority/menu`,
+      method: 'GET',
+      params
+    })
+}
+
+/**
+ *
+ * @param {*} params  menuId  菜单id roleId 角色权限id
+ */
+// 查询权限按钮
+export function getRoleButton (params) {
+    return request({
+      url: `/config/authority/button`,
+      method: 'GET',
+      params
+    })
+}
+
+/**
+ *
+ * @param {*} params  menuId  菜单id roleId 角色权限id / buttonId  所有被选中按钮的id
+ */
+// 新增或者修改权限id
+export function editRoleAuth (data) {
+    return request({
+      url: `/config/authority`,
+      method: 'POST',
+      data
+    })
+}

src/main.js

@@ -13,7 +13,7 @@ import themePluginConfig from '../config/themePluginConfig'
 
 // mock
 // WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
-import './mock'
+// import './mock'
 
 import bootstrap from './core/bootstrap'
 import './core/lazy_use' // use lazy load components

src/utils/request.js

@@ -46,7 +46,7 @@ const errorHandler = (error) => {
 // request interceptor
 request.interceptors.request.use(config => {
   // const token = storage.get(ACCESS_TOKEN)
-  const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b3duSWQiOiIyMTMyMTIxMjMyNDVMIiwiZXhwIjoxNjA5MzE4MzI3LCJ1c2VySWQiOiI4NTUxMjU0NDE1NTRMIn0.89pzAikvF29pRiIl0iF4FhGL1HK-K8l13NzIWF1VkwA'
+  const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b3duSWQiOiIyMTMyMTIxMjMyNDVMIiwiZXhwIjoxNjA5Mzg2OTY4LCJ1c2VySWQiOiI4NTUxMjU0NDE1NTRMIn0.YaE2FsIF1YsolsZOShhJ78d5Z5qdTacAeDTnLInTN-g'
   // 如果 token 存在
   // 让每个请求携带自定义 token 请根据实际情况自行修改
   if (token) {

src/views/basics/class/index.vue

@@ -96,7 +96,7 @@ export default {
       tagId: '',
       pagination: {
         page: 1,
-        pageSize: 5,
+        pageSize: 10,
         total: 1
       },
       classList: [],

src/views/roleIng/role/index.vue

@@ -3,16 +3,13 @@
     <page-header-wrapper
       :title="false"
       content="用于角色与页面的权限配置"
-      :tab-list="tabList"
-      :tab-active-key="tabActiveKey"
-      @tabChange="handleTabChange"
     >
       <a-row :gutter="24">
         <a-col :md="24" :lg="5">
-          <role-admin />
+          <role-admin @changeRole="changeRole"/>
         </a-col>
         <a-col :md="24" :lg="19">
-          <role-setting />
+          <role-setting :roleId="roleId"/>
         </a-col>
       </a-row>
     </page-header-wrapper>
@@ -27,6 +24,16 @@ export default {
   components: {
     RoleAdmin,
     RoleSetting
+  },
+  data () {
+    return {
+      roleId: ''
+    }
+  },
+  methods: {
+    changeRole (id) {
+      this.roleId = id
+    }
   }
 }
 </script>

src/views/roleIng/role/roleAdmin.vue

@@ -6,19 +6,29 @@
       title="角色面板"
     >
       <template slot="extra">
-        <a-button type="primary" @click="visible = true ; modalType = 'add'">新增</a-button>
+        <a-button type="primary" @click="openModal({id: '', label: ''}, 0, 'add')">新增</a-button>
       </template>
       <div class="role-list">
         <div v-for="(item, index) in roleList" :key="item.id">
-          <div class="role-item" >
+          <div class="['role-item']" >
             <a-row>
-              <a-col :span="14">
-                {{ item.label }}
+              <a-col :span="14" @click="selectRole(item)">
+
+                <a-icon v-show="roleId === item.id" type="check-circle" theme="twoTone" two-tone-color="#52c41a" />
+                <span class="cp"> {{ item.label }}</span>
               </a-col>
               <a-col :span="10">
-                <a @click="openModal(item, index)">重命名</a>
+                <a @click="openModal(item, index, 'edit')">重命名</a>
                 <a-divider type="vertical" />
-                <a> 删除</a>
+                <a-popconfirm
+                  title="你确定要删除这个角色吗?"
+                  ok-text="Yes"
+                  cancel-text="No"
+                  @confirm="deleteRole(item)"
+                >
+                  <a> 删除</a>
+                </a-popconfirm>
+
               </a-col>
             </a-row>
           </div>
@@ -33,8 +43,8 @@
       :title="modalType | filtersModalType"
       :visible="visible"
       :confirm-loading="confirmLoading"
-      @ok="handleOk"
-      @cancel="visible = flase"
+      @ok="postRole"
+      @cancel="visible= false"
     >
       <a-input v-model="form.label" :placeholder="modalType | filtersModalType " ></a-input>
     </a-modal>
@@ -42,6 +52,7 @@
 </template>
 
 <script>
+import { postRole, getRole, deleteRole } from '@/api/role'
 const roleList = []
 
 for (let i = 0; i < 10; i++) {
@@ -62,19 +73,67 @@ export default {
           }
       }
   },
+  mounted () {
+    this.getRole()
+  },
+  watch: {
+    roleId () {
+       this.$emit('changeRole', this.roleId)
+    }
+  },
   data () {
       return {
-        modalType: 'edit', // 编辑 edit 或者 新增 add
+        modalType: 'add', // 编辑 edit 或者 新增 add
         visible: false,
         confirmLoading: false,
-        roleList,
+        roleList: [],
         form: {
             label: '', // 新增或者修改的字段
             id: ''
-        }
+        },
+        roleId: ''
       }
   },
   methods: {
+    // 选择一个角色
+    selectRole (records) {
+      this.roleId = records.id
+    },
+    // 删除角色
+    async deleteRole (records) {
+      const { code, data } = await deleteRole(records.id)
+      if (code === 0) {
+        console.log(data)
+        data ? this.$message.success('删除成功') : this.$message.error('删除失败')
+      }
+      this.getRole()
+    },
+    // 添加角色
+    async postRole () {
+      const $par = {
+        label: this.form.label,
+        id: this.form.id,
+        type: this.modalType
+      }
+      this.confirmLoadin = true
+      const { code, data } = await postRole($par)
+      this.confirmLoading = false
+      if (code === 0) {
+        console.log(data)
+      }
+      this.getRole()
+      this.visible = false
+    },
+    // 查询角色
+    async getRole () {
+      const { code, data } = await getRole({ curPage: 1 })
+      if (code === 0) {
+        const { records } = data
+        console.log(data)
+        this.roleList = records
+        this.roleId = this.roleList[0].id
+      }
+    },
     handleOk (e) {
       this.confirmLoading = true
       setTimeout(() => {
@@ -83,8 +142,8 @@ export default {
       }, 2000)
     },
        // 打开弹窗
-    openModal (record, index) {
-        this.modalType = 'edit'
+    openModal (record, index, type) {
+        this.modalType = type
         this.visible = true
         this.form.label = record.label
         this.form.id = record.id
@@ -93,10 +152,14 @@ export default {
 }
 </script>
 <style scoped lang="less">
+@import '~ant-design-vue/es/style/themes/default.less';
 // .role-admin {
 //     min-height: 100vh;
 // }
 .role-item {
-    margin-bottom: 30px;
+
 }
+.active {
+  // color: @primary-color;
+ }
 </style>

src/views/roleIng/role/roleSetting.vue

@@ -1,48 +1,70 @@
 <template>
   <div class="role-setting">
-    <a-card
-      :body-style="{padding: '24px 32px'}"
-      :bordered="false"
-      title="权限配置"
-    >
-      <a-row :gutter="[18]">
-        <a-col :span="8">
-          <a-card
-            :body-style="{padding: '24px 32px'}"
-            title="菜单权限"
-          >
-            <tree
-              checkable
-              :tree-data="treeData"
-              :default-expanded-keys="['0-0-0', '0-0-1']"
-              :default-selected-keys="['0-0-0', '0-0-1']"
-              :default-checked-keys="['0-0-0', '0-0-1']"
-              @select="onSelect"
-              @check="onCheck"
-            />
-          </a-card>
 
-        </a-col>
-        <!-- <a-col :span="1">
-          <a-divider type="vertical"/>
-        </a-col> -->
-        <a-col :span="12">
-          <a-card
-            :body-style="{padding: '24px 32px'}"
-            title="操作权限"
-          >
-            <template slot="extra">
-              <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
-                全选
-              </a-checkbox>
-            </template>
+    <a-spin :spinning="spinning">
+      <a-card
+        :body-style="{padding: '24px 32px'}"
+        :bordered="false"
+        title="权限配置"
+      >
+        <template slot="extra">
+          <a-button type="primary" :loading="loading" @click="editRoleAuth"> {{ loading? '分配权限中' : '确定分配' }} </a-button>
+        </template>
+        <a-row :gutter="[18]">
+          <a-col :span="8">
+            <a-card
+              :body-style="{padding: '24px 32px'}"
+              title="菜单权限"
+            >
+              <!--     :selected-keys="selectedKeys" -->
+              <tree
+                v-if="treeData && treeData.length > 0"
+                checkable
+                v-model="checkedKeys"
+                :tree-data="treeData"
+                :defaultExpandAll="true"
+                :replaceFields="replaceFields"
+                :default-checked-keys="defaultCheckedKey"
+                @select="onSelect"
+                @check="onCheck"
+              >
+                <span :slot="item.id" v-for="item in flatTreeData" :key="item.id">
+                  <div>
+                    <span @click="clickLabel(item)">{{ item.label }}</span>
+                    <a-icon
+                      v-if="currentClickNode === item.id"
+                      type="check-circle"
+                      theme="twoTone"
+                      two-tone-color="#52c41a"
+                    />
+                  </div>
+                </span>
+              </tree>
+            </a-card>
 
-            <br />
-            <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
-          </a-card>
-        </a-col>
-      </a-row>
-    </a-card>
+          </a-col>
+          <a-col :span="12">
+            <a-card
+              :body-style="{padding: '24px 32px'}"
+              title="操作权限"
+            >
+              <template slot="extra">
+                <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
+                  全选
+                </a-checkbox>
+              </template>
+
+              <br />
+              <a-checkbox-group
+                v-model="checkedList"
+                :options="tranferCheckboxList"
+                @change="onChange" />
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-card>
+
+    </a-spin>
 
     <!-- 重命名 -->
   </div>
@@ -50,62 +72,162 @@
 
 <script>
 import { Tree } from 'ant-design-vue'
-const treeData = [
-  {
-    title: '全校区1',
-    key: '0-0',
-    slots: { title: '0-0' },
-    children: [
-      {
-        title: '教练部',
-        key: '0-0-0',
-        slots: { title: '0-0-0' },
-        disabled: true,
-        children: [
-          { title: '销售一部', key: '0-0-0-0', slots: { title: '0-0-0-0' }, disableCheckbox: true },
-          { title: '销售二部', key: '0-0-0-1', slots: { title: '0-0-0-1' } }
-        ]
-      },
-      {
-        title: '市场部',
-        key: '0-0-1',
-        slots: { title: '0-0-1' },
-        children: [{ key: '0-0-1-0', title: '市场大王', slots: { title: '0-0-1-0' } }]
-      }
-    ]
-  }
-]
-const plainOptions = ['Apple', 'Pear', 'Orange', 'Apple', 'Pear', 'Orange', 'Apple', 'Pear', 'Orange']
-const defaultCheckedList = ['Apple', 'Orange']
+import { getRoleMenu, getRoleButton, editRoleAuth } from '@/api/role'
+
 export default {
   name: 'RoleSetting',
   components: {
       Tree
   },
+  props: {
+    roleId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    replaceFields () {
+      return { children: 'children', title: 'label', key: 'id', value: 'label' }
+    },
+    tranferCheckboxList () {
+      return this.checkboxList.map(item => {
+        return item.label
+      })
+    },
+    tranferCheckedListId () {
+      return this.checkboxList.filter(item => {
+        if (this.checkedList.includes(item.label)) {
+          return item
+        }
+      }).map(item => item.id)
+    }
+  },
+  watch: {
+    roleId () {
+      this.getRoleMenu()
+    },
+    currentClickNode () {
+      this.getRoleButton()
+    }
+  },
+  mounted () {
+  },
   data () {
       return {
-          treeData,
-          checkedList: defaultCheckedList,
+          loading: false,
           indeterminate: true,
-          checkAll: false,
-          plainOptions
+          spinning: false, // 加载loading
+          treeData: [],
+          checkedKeys: [], // 选择的父节点
+          defaultSelectedKey: [], // 默认选中的节点
+          defaultCheckedKey: [], // 默认已经勾选的节点
+          pageTreeKey: [], // 父页面, 这样的页面不允许点击
+          currentClickNode: '', // 当前点击的树节点
+          flatTreeData: [], // 拍平树状结构
+        // -----------------------------  页面按钮数据
+          checkboxList: [],
+          checkedList: [],
+          checkAll: false
       }
   },
   methods: {
+    // 点击标题
+    clickLabel () {
+      console.log('ccc')
+    },
+    // 编辑菜单权限 和 按钮权限
+    async editRoleAuth () {
+      const $par = {
+        buttonId: this.tranferCheckedListId,
+        menuId: this.checkedKeys,
+        roleId: this.roleId
+      }
+      this.loading = true
+      const { code, data } = await editRoleAuth($par)
+      this.loading = false
+      if (code === 0) {
+        console.log(data)
+        data ? this.$message.success('分配成功') : this.$message.error('分配失败')
+      }
+    },
+    // 查询权限按钮
+    async  getRoleButton () {
+      const $par = {
+        menuId: this.currentClickNode,
+        roleId: this.roleId
+      }
+
+      const { code, data } = await getRoleButton($par)
+
+       if (code === 0) {
+        console.log(data)
+        this.checkboxList = data
+        this.checkedList = data.map(item => {
+            if (item.check) {
+                return item.label
+            }
+        })
+      }
+    },
+    // 查询权限菜单
+    async getRoleMenu () {
+      this.spinning = true
+      const { code, data } = await getRoleMenu({ roleId: this.roleId })
+      this.spinning = false
+      if (code === 0) {
+        console.log(data)
+        this.treeData = data
+        this.flatTreeData = []
+        this.defaultCheckedKey = []
+        this.checkedKeys = []
+        this.currentClickNode = ''
+        this.recursionTreeData(this.treeData)
+      }
+    },
+    // 获取默认选中的树节点
+    recursionTreeData (treeData) {
+        treeData.forEach(item => {
+            if (Array.isArray(item.children) && item.children.length > 0) {
+                this.recursionTreeData(item.children)
+            }
+             if (item.check) {
+              console.log('我不执行??')
+              this.defaultCheckedKey.push(item.id)
+              this.checkedKeys.push(item.id)
+            }
+            // 自定义tree节点
+
+            // 将父级页面节点禁用
+            if (item.children !== null) {
+              //  item.disableCheckbox = true
+               this.pageTreeKey.push(item.id)
+            } else {
+              item.slots = { title: item.id }
+               this.flatTreeData.push(item)
+              if (this.currentClickNode) return
+              this.currentClickNode = item.id
+            }
+            console.log(item, 'item')
+        })
+    },
+    // 按钮单个变化
     onChange (checkedList) {
-      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length
-      this.checkAll = checkedList.length === plainOptions.length
+      this.indeterminate = !!checkedList.length && checkedList.length < this.checkboxList.length
+      this.checkAll = checkedList.length === this.checkboxList.length
     },
+    // 全选所有
     onCheckAllChange (e) {
+      console.log(e.target.checked, ' e.target.checked ')
       Object.assign(this, {
-        checkedList: e.target.checked ? plainOptions : [],
+        checkedList: e.target.checked ? this.tranferCheckboxList : [],
         indeterminate: false,
         checkAll: e.target.checked
       })
     },
     // 当前选中的树节点的key
     onSelect (selectedKeys, info) {
-      console.log('selected', selectedKeys, info)
+      console.log(selectedKeys)
+      if (this.pageTreeKey.includes(selectedKeys[0])) return // 这里是父页面就不允许点击
       this.currentClickNode = selectedKeys[0]
     },
     onCheck (checkedKeys, info) {
@@ -115,5 +237,16 @@ export default {
 }
 </script>
 <style scoped lang="less">
+::v-deep .anticon-check-circle {
+  margin-left: 10px;
+}
 
+::v-deep .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+  background-color: #fff;
+}
+.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.6;
+}
 </style>

src/views/roleIng/staff/edit.vue

@@ -6,20 +6,31 @@
     @submit="handleSubmit">
     <a-form-item label="员工姓名">
       <a-input
-        v-decorator="['label', { rules: [{ required: true, message: '请填写员工姓名' }] }]"
+        v-decorator="['label', { rules: [{ required: true, max: 11, message: '请填写员工姓名' }] }]"
       />
     </a-form-item>
-    <a-form-item label="员工手机">
+    <!--    v-decorator="[
+          'phone',
+          { rules: [{ required: true, message: '请填写员工姓名!' }] },
+        ]" -->
+    <!-- validate-status="false"
+    help="" -->
+    <a-form-item
+      label="员工手机"
+    >
       <a-input
+        id="error"
+        @blur="getPhoneOrjobnumber('phone')"
         v-decorator="[
           'phone',
-          { rules: [{ required: true, message: '请填写员工姓名!' }] },
+          { rules: [{ required: true, message: '请填写员工手机号!' }, {len: 11 , message: '不符合手机号格式'}] },
         ]"
       >
       </a-input>
     </a-form-item>
     <a-form-item label="员工工号">
       <a-input
+        @blur="getPhoneOrjobnumber('jobNumber')"
         v-model="formData.jobNumber"
       >
       </a-input>
@@ -31,11 +42,12 @@
       </a-input>
     </a-form-item>
     <a-form-item label="初始密码" >
-      <a-input
+      <a-input v-if="type === 'add'" v-model="formData.password" disabled>  </a-input>
+      <a-input-password
+        v-else
         v-model="formData.password"
         disabled
-      >
-      </a-input>
+      />
     </a-form-item>
     <a-form-item label="性别" >
       <a-radio-group name="radioGroup" :default-value="1" @change="e => formData.gender = e.target.value">
@@ -82,7 +94,7 @@
     </a-form-item>
     <a-form-item label="所属部门" >
       <a-tree-select
-        v-model="parentLabel"
+        v-model="formData.departmentLabel"
         @select="selectTreeNode"
         treeNodeFilterProp="title"
         show-search
@@ -101,15 +113,24 @@
 </template>
 <script>
 import { Tree } from 'ant-design-vue'
-import { getDepart } from '@/api/role'
+import { getDepart, getPhoneOrjobnumber } from '@/api/role'
 export default {
   name: 'Demo',
   components: {
     Tree
   },
+  props: {
+    type: {
+      type: String,
+      default: 'add' // add or edit
+    }
+  },
   computed: {
     replaceFields () {
       return { children: 'children', title: 'label', key: 'id', value: 'label' }
+    },
+    customVisable () {
+      return 'validate-status = error help = Should be combination of numbers & alphabets'
     }
   },
   created () {
@@ -125,29 +146,55 @@ export default {
         password: '123456',
         phone: '',
         roleId: '',
-        roleLabel: '',
+        roleLabel: '小王',
         departmentId: '',
         departmentLabel: '',
         email: '',
-        gender: '',
+        gender: 1,
         intro: '',
         dataAuthority: 0
       },
-      treeData: {},
-      parentLabel: '',
-      parentId: ''
+      treeData: [],
+      visablePhoneOrJobnumber: ''
+      // 自定义校验
+
     }
   },
   methods: {
+    // 检查手机号
+    async getPhoneOrjobnumber (type) {
+      console.log(this.formData, 'this.form')
+
+      let keyWord = ''
+      if (type === 'phone') {
+         this.form.validateFields((err, values) => {
+          if (!err) {}
+          const { phone } = values
+          keyWord = phone
+        })
+      } else {
+         keyWord = this.formData.jobNumber
+      }
+
+      const { code, data } = await getPhoneOrjobnumber({ keyWord })
+      if (code === 0) {
+        console.log(data)
+
+        this.visablePhoneOrJobnumber = data
+        if (!data) {
+          this.$message.error(type === 'phone' ? '手机号已经被注册' : '工号已经被注册')
+        }
+      }
+    },
     handleChange (id) {
       console.log(id)
-      this.roleId = id
+      this.formData.roleId = id
     },
     // 选择树节点
     selectTreeNode (value, node, extra) {
         console.log(value, node, extra)
         const { key } = extra.selectedNodes[0]
-        this.parentId = key
+        this.formData.departmentId = key
     },
     // 查询部门
     async getDepart () {
@@ -157,31 +204,26 @@ export default {
         this.treeData = data
       }
     },
+    // 编辑时反填form表单
 
+    backfillForm (records) {
+      console.log(records, 'backfillForm')
+      this.form.setFieldsValue(records)
+    },
+    // 提交
     handleSubmit (e) {
-      //  e.preventDefault()
-       this.form.validateFields((err, values) => {
-        if (!err) {
-          const { label, phone } = values
-          // Object.assign({}, this.formData, { label, phone })
-          return { label, phone }
-        }
-      })
-     },
-     getData () {
-       // 通过函数获取数据
-      this.$refs.KFB1.getData().then(res => {
-         // 获取数据成功
-        console.log(res)
-      }).catch(err => {
-           console.log(err, '校验失败')
-      })
-      this.$refs.KFB2.getData().then(res => {
-         // 获取数据成功
-        console.log(res)
-      }).catch(err => {
-           console.log(err, '校验失败')
-      })
+      return new Promise((resolve, reject) => {
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            const { label, phone } = values
+            // Object.assign({}, this.formData, { label, phone })
+            const $par = Object.assign({}, this.formData, { label, phone })
+            resolve($par)
+          } else {
+            resolve({ code: 500 })
+          }
+        })
+      }).catch(e => e)
      }
   }
 }

src/views/roleIng/staff/organiza.vue

@@ -9,7 +9,6 @@
         <a-button type="primary" @click="openModal">新增</a-button>
       </template>
       <tree
-        checkable
         :tree-data="treeData"
         defaultExpandAll
         :replaceFields="replaceFields"
@@ -110,6 +109,7 @@ export default {
   },
   async created () {
     await this.getDepart()
+    this.currentClickNode = this.treeData[0].id
   },
   watch: {
     currentClickNode () {

src/views/roleIng/staff/staffAdmin.vue

@@ -5,36 +5,56 @@
       :bordered="false"
       :tabList="operationTabList"
       :activeTabKey="operationActiveTabKey"
-      @tabChange="(key) => {this.operationActiveTabKey = key}"
+      @tabChange="(key) => {this.operationActiveTabKey = key; searchUser()}"
     >
       <div class="opraiont">
         <div class="left">
           <span>已选用&nbsp; {{ selectedRowKeys.length }} &nbsp;条数据</span>
-          <a-button size="small">
-            停用
-          </a-button>
-          <a-button size="small">
-            删除
+          <a-button size="small" @click="stopUser">
+            {{ operationActiveTabKey === '1' ? '停用' : '启用' }}
           </a-button>
+          <a-popconfirm
+            title="你确定要删除这些角色吗?"
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="deleteUser"
+          >
+            <a-button size="small">
+              删除
+            </a-button>
+          </a-popconfirm>
+
+          <span>
+            <a-input-search
+              style="width: 400px"
+              placeholder="支持手机号或者姓名搜索"
+              enter-button
+              @search="onSearch"
+            />
+          </span>
         </div>
         <div class="right">
-          <a-button type="primary" @click="visible = true">新增员工</a-button>
-          <a-button type="primary">筛选</a-button>
+          <a-button type="primary" @click="openModel({id: ''}, {id: '1'}, 'add')">新增员工</a-button>
         </div>
       </div>
       <a-table
+        :rowKey="record => record.id"
         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         :columns="columns"
-        :data-source="data"
+        :data-source="staffList"
         :loading="loading"
+        :pagination="pagination"
       >
-        <template slot="action" slot-scope="text, record">
-          <a @click="editRow(text, record)">编辑</a>
+        <template slot="dataAuthority" slot-scope="text">
+          <span>{{ text === 0 ? '全部' : '个人(团队)' }}</span>
+        </template>
+        <template slot="action" slot-scope="text, records">
+          <a @click="openModel(text,records, 'edit')">编辑</a>
         </template>
       </a-table>
     </a-card>
-    <a-modal v-model="visible" :width="700" style="height: 500px" title="新增员工" @ok="handleOk">
-      <edit ref="editForm"/>
+    <a-modal v-model="visible" :width="700" style="height: 500px" :title="type === 'add' ? '新增员工' : '编辑员工信息'" @ok="handleOk">
+      <edit ref="editForm" :type="type"/>
     </a-modal>
   </div>
 
@@ -42,19 +62,19 @@
 
 <script>
 import edit from './edit'
-import { searchUser } from '@/api/role'
+import { searchUser, postUser, searchUserDetail, stopUser, deleteUser } from '@/api/role'
 const columns = [
   {
     title: '员工编号',
-    dataIndex: 'code'
+    dataIndex: 'id'
   },
   {
     title: '姓名',
-    dataIndex: 'name'
+    dataIndex: 'label'
   },
   {
     title: '部门',
-    dataIndex: 'department'
+    dataIndex: 'departmentLabel'
   },
   {
     title: '手机号',
@@ -62,7 +82,7 @@ const columns = [
   },
   {
     title: '邮箱',
-    dataIndex: 'emall'
+    dataIndex: 'email'
   },
   {
     title: '微信绑定',
@@ -70,15 +90,12 @@ const columns = [
   },
   {
     title: '角色',
-    dataIndex: 'role'
+    dataIndex: 'roleLabel'
   },
   {
     title: '数据权限',
-    dataIndex: 'static'
-  },
-  {
-    title: '汇报对象',
-    dataIndex: 'object'
+    dataIndex: 'dataAuthority',
+    scopedSlots: { customRender: 'dataAuthority' }
   },
   {
     title: '操作',
@@ -87,24 +104,6 @@ const columns = [
     scopedSlots: { customRender: 'action' }
   }
 ]
-
-const data = []
-for (let i = 0; i < 46; i++) {
-  data.push({
-    key: i,
-    code: Math.random() * 100000000000000000,
-    name: `雷老师 ${i}`,
-    age: 32,
-    department: `销售${i}部`,
-    phone: 18811361102,
-    emall: '1549630250@qq.com',
-    wechat: '',
-    role: `老板${1}号`,
-    static: '全部',
-    object: '所有'
-  })
-}
-
 export default {
   name: 'StaffAdmin',
   components: {
@@ -121,35 +120,91 @@ export default {
       handler () {
         this.searchUser()
       }
+      // immediate: true
     }
+    // searchUserId () {
+
+    // }
   },
   data () {
       return {
         columns,
-        data,
         visible: false,
         operationTabList: [
             {
-            key: '0',
+            key: '1',
             tab: '使用中'
             },
             {
-            key: '1',
+            key: '0',
             tab: '已停用'
             }
         ],
-        operationActiveTabKey: '0',
+        operationActiveTabKey: '1',
         selectedRowKeys: [], // Check here to configure the default column
-        loading: false
+        loading: false,
+        pagination: {
+          page: 1,
+          pageSize: 10,
+          total: 1
+        },
+        staffList: [],
+        searchUserId: '',
+        searchText: '',
+        searchUserDetailData: {},
+        type: 'add' // 当前弹窗是增加还是编辑
       }
   },
   methods: {
+    // 删除多个
+    async deleteUser () {
+      const { code, data } = await deleteUser(this.selectedRowKeys)
+      this.selectedRowKeys = []
+      if (code === 0) {
+        console.log(data)
+        this.searchUser()
+      }
+    },
+    // 停用 或者 启用 多个账户
+    async stopUser () {
+      const { code, data } = await stopUser(this.selectedRowKeys, this.operationActiveTabKey)
+      this.selectedRowKeys = []
+      if (code === 0) {
+        console.log(data)
+        this.searchUser()
+      }
+    },
+    // 查询用户详情
+    async searchUserDetail () {
+     const { code, data } = await searchUserDetail(this.searchUserId)
+     if (code === 0) {
+       console.log(data)
+       this.searchUserDetailData = data || {}
+       this.$refs.editForm.formData = this.searchUserDetailData
+       this.$refs.editForm.backfillForm({ label: this.searchUserDetailData.label, phone: this.searchUserDetailData.phone })
+     }
+    },
+    // 打开编辑弹窗
+    openModel (text, records, type) {
+      // if (records.id === '') {
+      //   this.searchUserDetail = {}
+      // }
+      this.searchUserId = records.id
+      this.visible = true
+      this.type = type
+      this.searchUserDetail()
+    },
+    // 搜索框
+    onSearch (records) {
+      this.searchText = records
+      this.searchUser()
+    },
     // 搜索人员
     async searchUser () {
       const $par = {
         departmentId: this.departmentId,
-        keyWord: '',
-        state: '',
+        keyWord: this.searchText,
+        state: Number(this.operationActiveTabKey),
         curPage: 1
       }
       this.loading = true
@@ -157,11 +212,20 @@ export default {
       this.loading = false
       if (code === 0) {
         console.log(data)
+        const { records, total } = data
+        this.staffList = records
+        this.pagination.total = total
       }
     },
-    handleOk () {
-      const $par = this.$refs.editForm.handleSubmit()
-
+    // 编辑员工 或者新增员工
+    async handleOk () {
+      const $par = await this.$refs.editForm.handleSubmit()
+      if ($par.code === 500) return
+      const { code, data } = await postUser($par)
+      if (code === 0) {
+        console.log(data)
+      }
+      this.visible = false
       console.log($par, '$par')
     },
     // 选中行
@@ -178,6 +242,10 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  .left {
+    display: flex;
+    align-items: center;
+  }
   span {
     margin-right: 10px;
   }