feat:联调完成员工档案接口;todo:员工概况待调试,员工档案查看档案接口数据不全;style:组织管理的代码格式改动;

src/api/api_staff.js

@@ -9,13 +9,14 @@ export const apiOrganizationList = data => {
 }
 
 // 员工列表
-export const apiEmployeesList = data => {
+export const apiEmployeesList = params => {
-  return http({ url: '/lz_management/staff/info/list', method: 'post', data })
+  return http({ url: '/lz_management/staff/info/list', method: 'get', params })
 }
 
 // 员工档案
 export const apiEmployeesInfo = data => {
-  return http({ url: '/lz_management/staff/archives/query', method: 'post', data })
+  console.log('data: ', data)
+  return http({ url: '/lz_management/staff/info/query/' + data, method: 'post' })
 }
 
 // 员工概况

src/views/modules/staff/archives/componments/basis.vue

@@ -0,0 +1,94 @@
+<!--  -->
+<template>
+  <div>
+    <div class="contant" v-if="info.staffName">
+      <span class="contant-label">姓名：</span>
+      <span class="contant-name">{{info.staffName}}</span>
+    </div>
+    <div class="contant" v-if="info.gender">
+      <span class="contant-label">性别：</span>
+      <span class="contant-name">{{info.gender |getSex}}</span>
+    </div>
+    <div class="contant" v-if="info.birthday">
+      <span class="contant-label">生日：</span>
+      <span class="contant-name">{{info.birthday}}</span>
+    </div>
+    <div class="contant" v-if="info.maritalStatus">
+      <span class="contant-label">婚姻状况：</span>
+      <span class="contant-name">{{info.maritalStatus==0?"未婚":"已婚"}}</span>
+    </div>
+    <div class="contant" v-if="info.national">
+      <span class="contant-label">民族：</span>
+      <span class="contant-name">{{info.national}}</span>
+    </div>
+    <div class="contant" v-if="info.politicalLandscape">
+      <span class="contant-label">政治面貌：</span>
+      <span class="contant-name">{{info.politicalLandscape}}</span>
+    </div>
+    <div class="contant" v-if="info.mobile">
+      <span class="contant-label">联系电话：</span>
+      <span class="contant-name">{{info.mobile}}</span>
+    </div>
+    <div class="contant" v-if="info.currentAddress">
+      <span class="contant-label">现住址：</span>
+      <span class="contant-name">{{info.currentAddress}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  filters: {
+    getSex (type) {
+      let info = ''
+      switch (type) {
+        case 0:
+          info = '未知'
+          break
+        case 1:
+          info = '男'
+          break
+        case 2:
+          info = '女'
+          break
+
+        default:
+          break
+      }
+      return info
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () { },
+  mounted () { },
+  methods: {},
+  watch: {}
+
+}
+</script>
+
+<style lang='scss' scoped>
+.contant {
+  margin: 16px auto;
+  display: flex;
+  width: 80%;
+  &-label {
+    width: 120px;
+    padding: 0 10px;
+  }
+  &-name {
+    flex: 1;
+  }
+}
+</style>

src/views/modules/staff/archives/componments/education.vue

@@ -0,0 +1,69 @@
+<!--  -->
+<template>
+  <div>
+    <div class="contant" v-if="info.education">
+      <span class="contant-label">学历：</span>
+      <span class="contant-name">{{info.education}}</span>
+    </div>
+    <div class="contant" v-if="info.graduatedSchool">
+      <span class="contant-label">毕业院校：</span>
+      <span class="contant-name">{{info.graduatedSchool }}</span>
+    </div>
+    <div class="contant" v-if="info.specialty">
+      <span class="contant-label">专业：</span>
+      <span class="contant-name">{{info.specialty}}</span>
+    </div>
+    <div class="contant" v-if="info.graduationTime">
+      <span class="contant-label">毕业日期：</span>
+      <span class="contant-name">{{info.graduationTime}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  filters: {
+    getSex (type) {
+      let info = ''
+      switch (type) {
+        case 0:
+          info = '未知'
+          break
+        case 1:
+          info = '男'
+          break
+        case 2:
+          info = '女'
+          break
+
+        default:
+          break
+      }
+      return info
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () { },
+  mounted () { },
+  methods: {},
+  watch: {}
+
+}
+</script>
+
+<style lang='scss' scoped>
+.contant {
+  margin: 16px 0;
+}
+</style>

src/views/modules/staff/archives/componments/professional.vue

@@ -0,0 +1,94 @@
+<!--  -->
+<template>
+  <div>
+    <div class="contant" v-if="info.staffNo">
+      <span class="contant-label">工号：</span>
+      <span class="contant-name">{{info.staffNo}}</span>
+    </div>
+    <div class="contant" v-if="info.position">
+      <span class="contant-label">职位：</span>
+      <span class="contant-name">{{info.position }}</span>
+    </div>
+    <div class="contant" v-if="info.specialty">
+      <span class="contant-label">专业：</span>
+      <span class="contant-name">{{info.specialty}}</span>
+    </div>
+    <div class="contant" v-if="info.entryTime">
+      <span class="contant-label">入职时间：</span>
+      <span class="contant-name">{{info.entryTime}}</span>
+    </div>
+
+    <div class="contant" v-if="info.staffStatus">
+      <span class="contant-label">人员状态：</span>
+      <span class="contant-name">{{info.staffStatus==1?"离职":"在职"}}</span>
+    </div>
+
+    <div class="contant" v-if="info.resignationTime">
+      <span class="contant-label">离职时间：</span>
+      <span class="contant-name">{{info.resignationTime}}</span>
+    </div>
+
+    <div class="contant" v-if="info.signingCompany">
+      <span class="contant-label">离职原因：</span>
+      <span class="contant-name">{{info.signingCompany}}</span>
+    </div>
+
+    <div class="contant" v-if="info.entryTime">
+      <span class="contant-label">劳动合同签订公司：</span>
+      <span class="contant-name">{{info.entryTime}}</span>
+    </div>
+
+    <div class="contant" v-if="info.jobBeginTime">
+      <span class="contant-label">岗位最初从业时间：</span>
+      <span class="contant-name">{{info.jobBeginTime}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  filters: {
+    getSex (type) {
+      let info = ''
+      switch (type) {
+        case 0:
+          info = '未知'
+          break
+        case 1:
+          info = '男'
+          break
+        case 2:
+          info = '女'
+          break
+
+        default:
+          break
+      }
+      return info
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () { },
+  mounted () { },
+  methods: {},
+  watch: {}
+
+}
+</script>
+
+<style lang='scss' scoped>
+.contant {
+  margin: 16px 0;
+}
+</style>

src/views/modules/staff/archives/index.vue

@@ -1,34 +1,31 @@
 <template>
   <div class="staff">
-    <!-- el-icon-minus -->
     <el-card>
       <el-row>
         <el-col class="menu" :span="6">
           <el-tree
+            ref="treeList"
             :data="menuList"
             :props="defaultProps"
+            :expand-on-click-node="false"
             :highlight-current="true"
-            :load="loadNode"
+            node-key="departmentId"
-            lazy
             @node-click="handleNodeClick"
           >
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span>{{ data.departmentName }}</span>
+              <span>{{ data.departmentName}}</span>
-              <span>({{data.memberCount}})人</span>
+              <span>{{" " + data.memberCount}}</span>
             </span>
           </el-tree>
-          <!-- <el-menu @open="openMenu" :default-active="current" :collapse-transition="true" :unique-opened="true">
-            <menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
-          </el-menu>-->
         </el-col>
         <el-col :span="18">
           <div class="block">
             <el-form :inline="true">
               <el-form-item label="员工姓名">
-                <el-input v-model="searchParams.staffName"></el-input>
+                <el-input clearable v-model="query.name"></el-input>
               </el-form-item>
               <el-form-item label="人员状态">
-                <el-select v-model="searchParams.staffState" placeholder="请选择">
+                <el-select v-model="query.staffStatus" placeholder="请选择">
                   <el-option
                     v-for="item in staffStateList"
                     :key="item.value"
@@ -38,8 +35,8 @@
                 </el-select>
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" @click="getTable()">查询</el-button>
+                <el-button type="primary" @click="getTable">查询</el-button>
-                <el-button @click="clear()">重置</el-button>
+                <el-button @click="clear">重置</el-button>
               </el-form-item>
             </el-form>
           </div>
@@ -49,15 +46,22 @@
               :data="tableData"
               :header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
               style="width: 100%"
-              height="100%"
+              height="600"
             >
-              <el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
+              <el-table-column header-align="center" align="center" label="工号" prop="staffId"></el-table-column>
-              <el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
+              <el-table-column header-align="center" align="center" width="260" label="员工姓名">
+                <template slot-scope="scope">
+                  <div class="conatnt-name">
+                    <span>{{ scope.row.name }}</span>
+                    <span class="conatnt-name-label" v-if="scope.row.departmentLeader===1">部门负责人</span>
+                  </div>
+                </template>
+              </el-table-column>
               <el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
-              <el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
+              <el-table-column header-align="center" align="center" label="状态" prop="staffStatus"></el-table-column>
               <el-table-column header-align="center" align="center" label="操作">
                 <template slot-scope="scope">
-                  <el-button type="text" @click="handleView(scope.row)">查看</el-button>
+                  <el-button type="text" @click="handleView(scope.row)">查看档案</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -65,68 +69,84 @@
               class="bl-form3"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
-              :current-page.sync="currentPage"
+              :current-page.sync="query.currentPage"
               :page-sizes="[10, 20, 50]"
-              :page-size="pageSize"
               layout="total, sizes, prev, pager, next"
-              :total="pageTotal"
+              :total="query.pageTotal"
             ></el-pagination>
           </div>
         </el-col>
       </el-row>
     </el-card>
+    <el-dialog title="员工档案" :close-on-click-modal="false" :visible.sync="dialogVisible" width="60%">
+      <div class="dialogVisible-tabs">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="基础信息" name="first">
+            <basis v-if="employeesInfo.baseInfo" :info="employeesInfo.baseInfo" />
+            <div class="noInfo" v-else>暂无信息</div>
+          </el-tab-pane>
+          <el-tab-pane label="教育背景" name="second">
+            <education v-if="employeesInfo.educationInfo" :info="employeesInfo.educationInfo" />
+            <div class="noInfo" v-else>暂无信息</div>
+          </el-tab-pane>
+          <el-tab-pane label="职业信息" name="third">
+            <professional
+              v-if="employeesInfo.occupationInfo"
+              :info="occupationInfo.occupationInfo"
+            />
+            <div class="noInfo" v-else>暂无信息</div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import menuTree from '@/components/menu-tree'
-
+import basis from './componments/basis.vue'
+import professional from './componments/professional'
+import education from './componments/education'
+import { apiOrganizationList, apiEmployeesList, apiEmployeesInfo } from '@/api/api_staff'
 export default {
   components: {
-    menuTree
+    menuTree,
+    professional,
+    basis,
+    education
   },
   data () {
     return {
+      activeName: 'first',
+      dialogVisible: false,
       defaultProps: {
-        children: 'children',
+        children: 'list',
         label: 'name'
       },
       menuList: [], // 架构数据
       tableData: [], // 表格数据
-      // 搜索数据
+      employeesInfo: {}, // 员工档案
-      searchParams: {
-        staffName: '',
-        staffState: ''
-      },
       // 在职状态
       staffStateList: [
         { value: '0', label: '在职' },
         { value: '1', label: '离职' }
       ],
       loading: false,
-      currentPage: 1,
+      query: {
-      pageSize: 10,
+        page: 1,
-      pageTotal: 0,
+        limit: 10,
-      deptId: '',
+        pageTotal: 0,
-      // 弹窗相关
+        departmentId: null
-      showAddDialogForm: false,
-      activeName: 'first',
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
       }
     }
   },
   watch: {
     $route: function (val) {
       if (val.name === 'staff') {
-        this.clearData()
+        this.clear()
         this.handleGetTableList(val.query.id)
       }
     }
@@ -141,202 +161,96 @@ export default {
     this.handleGetTableList(this.current)
   },
   methods: {
-    loadNode (node, resolve) {
+    async getEmployeesInfo (data) {
-      console.log('resolve: ', resolve)
+      let result = await apiEmployeesInfo(data)
-      console.log('node', node)
+      if (result.code === 0) {
-      if (node.level === 0) {
+        this.dialogVisible = true
-        return resolve([{
+        this.employeesInfo = result.data
-          departmentName: '业务前台',
+      } else {
-          departmentId: parseInt(Math.random() * 300),
+        this.$message.error(result.msg)
-          departmentParentId: '',
-          memberCount: '20',
-          type: 1
-        },
-        {
-          departmentName: '业务中台',
-          departmentId: parseInt(Math.random() * 300),
-          departmentParentId: '',
-          memberCount: '30',
-          type: 2
-        }, {
-          departmentName: '业务后台',
-          departmentId: parseInt(Math.random() * 300),
-          departmentParentId: '',
-          memberCount: '50',
-          type: 3
-        }])
       }
-      // if (node.level > 1) return resolve([])
+      console.log('result: ', result)
-
-      setTimeout(() => {
-        let data = []
-        if (node.data.type === 2) {
-          data = [{
-            departmentName: '技术中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '10',
-            type: 4
-          },
-          {
-            departmentName: '产品设计中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '20',
-            type: 4
-          },
-          {
-            departmentName: '品牌中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '14',
-            type: 4
-          }, {
-            departmentName: '客服中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '6',
-            type: 4
-          }]
-        }
-        if (node.data.type === 4) {
-          data = [{
-            departmentName: 'xx团队',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '6',
-            type: 5
-          },
-          {
-            departmentName: 'xx团队',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '6',
-            type: 5
-          }]
-        }
-
-        resolve(data)
-      }, 500)
     },
     handleNodeClick (data) {
+      // highlight - current
+      this.query.departmentId = data.departmentId
       console.log('data', data)
     },
     // 获取侧边架构列表
-    handleGetMenuList () {
+    async handleGetMenuList () {
-      let data = [{
+      let result = await apiOrganizationList()
-        'children': [
+      console.log('result: ', result)
-          {
+      this.menuList = result
-            'children': [],
-            'id': 70990627,
-            'name': '结算部',
-            'parentId': 55969991,
-            'number': '1'
-          }
-        ],
-        'id': 55969991,
-        'name': '结算中心',
-        'parentId': 1,
-        'number': 2
-      }, {
-        'children': [
-          {
-            'children': [
-              {
-                'children': [],
-                'id': 92131240,
-                'name': '金融运营团队',
-                'parentId': 87839336
-              },
-              {
-                'children': [
-                  {
-                    'children': [],
-                    'id': 9213124111,
-                    'name': '2B业务组',
-                    'parentId': 92131239
-                  },
-                  {
-                    'children': [],
-                    'id': 9213124222,
-                    'name': '2C业务组',
-                    'parentId': 92131239
-                  }
-                ],
-                'id': 92131239,
-                'name': '电商运营团队',
-                'parentId': 87839336
-              }
-            ],
-            'id': 87839336,
-            'name': '运营中心',
-            'parentId': 87839327
-          }
-        ],
-        'id': 87839327,
-        'name': '业务前台',
-        'parentId': 1
-      }]
-      this.menuList = data
     },
-    // 获取数据列表
+    // 获取数据列表 { page: 0, limit: 5 }
-    handleGetTableList (id) {
+    async handleGetTableList (id) {
-      this.tableData = [{
+      this.loading = true
-        'deptName': '结算中心',
+      let result = await apiEmployeesList(Object.assign({}, this.query, { limit: this.query.pageSize }))
-        'id': 665,
+      console.log('result: ', result)
-        'jobnumber': '4',
+      if (result.code === 0) {
-        'name': '刘更顺',
+        this.tableData = result.page.list
-        'position': 'CPO'
+        this.query.pageTotal = result.page.totalCount
-      },
+      } else {
-      {
+        this.$message.error(result.msg)
-        'deptName': '结算部',
+      }
-        'id': 670,
+      console.log('getEmployeesList: ', result)
-        'jobnumber': '239',
-        'name': '王文龙',
-        'position': '数据运营'
-      }]
       this.loading = false
     },
-    openMenu (index, indexPath) {
-      if (index === '51685041') {
-        this.handleGetTableList(index)
-      } else {
-        this.clearData()
-        this.loading = false
-      }
-    },
     clear () {
-      this.input = ''
+      this.query = {
-      this.deptId = ''
+        page: 1,
-      this.$router.push({ name: 'staff', query: { id: '' } })
+        limit: 10,
+        pageTotal: 0,
+        departmentId: null
+      }
+      this.$refs.treeList.setCurrentKey()
+      this.handleGetTableList()
     },
-    clearData () {
+    getTable () {
-      this.tableData = []
+      this.query.page = 1
-      this.currentPage = 1
+      this.handleGetTableList()
-      this.pageTotal = 10
-      this.loading = true
     },
     handleCurrentChange (val) {
+      console.log('val: ', val)
+      this.query.page = val
       this.handleGetTableList()
     },
     handleSizeChange (val) {
-      this.pageSize = val
+      this.query.pageSize = val
       this.handleGetTableList()
     },
     // 弹窗相关
     handleClick (tab, event) {
       console.log(tab, event)
     },
-    handleView () {
+    async handleView (data) {
-      this.showAddDialogForm = true
+      console.log('data: ', data)
+      await this.getEmployeesInfo(data.staffId)
     }
   }
 }
 </script>
-<style >
+<style lang="scss">
+.conatnt-name {
+  position: relative;
+  &-label {
+    position: absolute;
+    font-size: 10px;
+    background: rgba(24, 144, 255, 1);
+    border-radius: 5px;
+    color: #fff;
+    padding: 0 4px;
+    top: -4px;
+    transform: scale(0.7);
+  }
+}
 .el-tree-node__content {
   margin: 10px 0 !important;
 }
+.el-table td,
+.el-table th {
+  padding: 8px 0 !important;
+}
 </style>
 <style lang="scss" scoped>
 .staff .block,
@@ -354,10 +268,17 @@ export default {
   padding-bottom: 10px;
   margin-bottom: 20px;
 }
+.dialogVisible-tabs {
+  // width: 248px;
+  margin: 0 auto;
+}
 .bl-form3 {
   &.el-pagination {
     margin-top: 16px;
     text-align: right;
   }
 }
+.noInfo {
+  text-align: center;
+}
 </style>

src/views/modules/staff/manage/compoments/staff-manage-left/index.vue

@@ -1,23 +0,0 @@
-<!--  -->
-<template>
-  <div>左边</div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-
-    }
-  },
-  computed: {},
-  beforeMount () { },
-  mounted () { },
-  methods: {},
-  watch: {}
-
-}
-</script>
-
-<style lang='' scoped>
-</style>

src/views/modules/staff/manage/compoments/staff-manage-right/index.vue

@@ -1,171 +0,0 @@
-<template>
-  <div class="staff-manage-right">
-    <div class="el-card__body">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="handleGetTableList()">
-        <el-form-item>
-          <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleGetTableList()">查询</el-button>
-          <el-button v-if="isAuth('sys:user:save')" type="primary" @click="handleAddOrUpdate()">新增</el-button>
-          <el-button
-            v-if="isAuth('sys:user:delete')"
-            type="danger"
-            @click="handleDelete()"
-            :disabled="dataListSelections.length <= 0"
-          >批量删除</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="el-card__body">
-      <el-table
-        :data="dataList"
-        border
-        v-loading="dataListLoading"
-        @selection-change="handleChangeSelection"
-        style="width: 100%;"
-      >
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID"></el-table-column>
-        <el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
-        <el-table-column prop="email" header-align="center" align="center" label="邮箱"></el-table-column>
-        <el-table-column prop="mobile" header-align="center" align="center" label="手机号"></el-table-column>
-        <el-table-column prop="status" header-align="center" align="center" label="状态">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
-            <el-tag v-else size="small">正常</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="createTime"
-          header-align="center"
-          align="center"
-          width="180"
-          label="创建时间"
-        ></el-table-column>
-        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-          <template slot-scope="scope">
-            <el-button
-              v-if="isAuth('sys:user:update')"
-              type="text"
-              size="small"
-              @click="handleAddOrUpdate(scope.row.userId)"
-            >修改</el-button>
-            <el-button
-              v-if="isAuth('sys:user:delete')"
-              type="text"
-              size="small"
-              @click="handleDelete(scope.row.userId)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination
-        @size-change="handleChangeSize"
-        @current-change="handleChangeCurrent"
-        :current-page="pageIndex"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="pageSize"
-        :total="totalPage"
-        layout="total, sizes, prev, pager, next, jumper"
-      ></el-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-// import { apiSysUserList } from '@/api/api_sys'
-
-export default {
-  data () {
-    return {
-      dataForm: {
-        userName: ''
-      },
-      dataList: [],
-      pageIndex: 1,
-      pageSize: 10,
-      totalPage: 0,
-      dataListLoading: false,
-      dataListSelections: [],
-      addOrUpdateVisible: false
-    }
-  },
-  components: {
-  },
-  activated () {
-    this.handleGetTableList()
-  },
-  methods: {
-    // 获取数据列表
-    handleGetTableList () {
-      // apiSysUserList({
-      //   'page': this.pageIndex,
-      //   'limit': this.pageSize,
-      //   'username': this.dataForm.userName
-      // }).then(res => {
-      //   if (res && res.code === 0) {
-      //     this.dataList = res.page.list
-      //     this.totalPage = res.page.totalCount
-      //   } else {
-      //     this.dataList = []
-      //     this.totalPage = 0
-      //   }
-      //   this.dataListLoading = false
-      // })
-    },
-    // 每页数
-    handleChangeSize (val) {
-      this.pageSize = val
-      this.pageIndex = 1
-      this.handleGetTableList()
-    },
-    // 当前页
-    handleChangeCurrent (val) {
-      this.pageIndex = val
-      this.handleGetTableList()
-    },
-    // 多选
-    handleChangeSelection (val) {
-      this.dataListSelections = val
-    },
-    // 新增 / 修改
-    handleAddOrUpdate (id) {
-      this.addOrUpdateVisible = true
-      this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(id)
-      })
-    },
-    // 删除
-    handleDelete (id) {
-      var userIds = id ? [id] : this.dataListSelections.map(item => {
-        return item.userId
-      })
-      this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$http({
-          url: this.$http.adornUrl('/sys/user/delete'),
-          method: 'post',
-          data: this.$http.adornData(userIds, false)
-        }).then(({ data }) => {
-          if (data && data.code === 0) {
-            this.$message({
-              message: '操作成功',
-              type: 'success',
-              duration: 1500,
-              onClose: () => {
-                this.handleGetTableList()
-              }
-            })
-          } else {
-            this.$message.error(data.msg)
-          }
-        })
-      }).catch(() => { })
-    }
-  }
-}
-</script>

src/views/modules/staff/manage/componments/basis.vue

@@ -0,0 +1,126 @@
+<!--  -->
+<template>
+  <div class="contant">
+    <el-form label-position="left" ref="form" :model="form" label-width="120px">
+      <el-form-item label="姓名">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="1">男</el-radio>
+          <el-radio label="0">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="生日">
+        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="婚姻状况">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="1">已婚</el-radio>
+          <el-radio label="0">未婚</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="民族">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="政治面貌">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="联系电话">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="现住址">
+        <el-input type="textarea" v-model="form.desc"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <!-- <div class="contant" v-if="info.staffName">
+      <span class="contant-label">姓名：</span>
+      <span class="contant-name">{{info.staffName}}</span>
+    </div>
+    <div class="contant" v-if="info.gender">
+      <span class="contant-label">性别：</span>
+      <span class="contant-name">{{info.gender |getSex}}</span>
+    </div>
+    <div class="contant" v-if="info.birthday">
+      <span class="contant-label">生日：</span>
+      <span class="contant-name">{{info.birthday}}</span>
+    </div>
+    <div class="contant" v-if="info.maritalStatus">
+      <span class="contant-label">婚姻状况：</span>
+      <span class="contant-name">{{info.maritalStatus==0?"未婚":"已婚"}}</span>
+    </div>
+    <div class="contant" v-if="info.national">
+      <span class="contant-label">民族：</span>
+      <span class="contant-name">{{info.national}}</span>
+    </div>
+    <div class="contant" v-if="info.politicalLandscape">
+      <span class="contant-label">政治面貌：</span>
+      <span class="contant-name">{{info.politicalLandscape}}</span>
+    </div>
+    <div class="contant" v-if="info.mobile">
+      <span class="contant-label">联系电话：</span>
+      <span class="contant-name">{{info.mobile}}</span>
+    </div>
+    <div class="contant" v-if="info.currentAddress">
+      <span class="contant-label">现住址：</span>
+      <span class="contant-name">{{info.currentAddress}}</span>
+    </div>-->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  filters: {
+    getSex (type) {
+      let info = ''
+      switch (type) {
+        case 0:
+          info = '未知'
+          break
+        case 1:
+          info = '男'
+          break
+        case 2:
+          info = '女'
+          break
+
+        default:
+          break
+      }
+      return info
+    }
+  },
+  data () {
+    return {
+      form: {}
+
+    }
+  },
+  computed: {},
+  beforeMount () { },
+  mounted () { },
+  methods: {},
+  watch: {}
+
+}
+</script>
+
+<style lang='scss' scoped>
+.contant {
+  margin: 16px auto;
+  width: 80%;
+}
+</style>

src/views/modules/staff/manage/componments/education.vue

@@ -0,0 +1,109 @@
+<!--  -->
+<template>
+  <div class="contant">
+    <el-form label-position="left" ref="form" :model="form" label-width="120px">
+      <el-form-item label="学历">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="1">初中</el-radio>
+          <el-radio label="2">高中</el-radio>
+          <el-radio label="3">大专</el-radio>
+          <el-radio label="4">本科</el-radio>
+          <el-radio label="5">硕士及以上</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="毕业院校">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="专业">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="毕业日期">
+        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+      </el-form-item>
+    </el-form>
+    <!-- <div class="contant" v-if="info.staffName">
+      <span class="contant-label">姓名：</span>
+      <span class="contant-name">{{info.staffName}}</span>
+    </div>
+    <div class="contant" v-if="info.gender">
+      <span class="contant-label">性别：</span>
+      <span class="contant-name">{{info.gender |getSex}}</span>
+    </div>
+    <div class="contant" v-if="info.birthday">
+      <span class="contant-label">生日：</span>
+      <span class="contant-name">{{info.birthday}}</span>
+    </div>
+    <div class="contant" v-if="info.maritalStatus">
+      <span class="contant-label">婚姻状况：</span>
+      <span class="contant-name">{{info.maritalStatus==0?"未婚":"已婚"}}</span>
+    </div>
+    <div class="contant" v-if="info.national">
+      <span class="contant-label">民族：</span>
+      <span class="contant-name">{{info.national}}</span>
+    </div>
+    <div class="contant" v-if="info.politicalLandscape">
+      <span class="contant-label">政治面貌：</span>
+      <span class="contant-name">{{info.politicalLandscape}}</span>
+    </div>
+    <div class="contant" v-if="info.mobile">
+      <span class="contant-label">联系电话：</span>
+      <span class="contant-name">{{info.mobile}}</span>
+    </div>
+    <div class="contant" v-if="info.currentAddress">
+      <span class="contant-label">现住址：</span>
+      <span class="contant-name">{{info.currentAddress}}</span>
+    </div>-->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  filters: {
+    getSex (type) {
+      let info = ''
+      switch (type) {
+        case 0:
+          info = '未知'
+          break
+        case 1:
+          info = '男'
+          break
+        case 2:
+          info = '女'
+          break
+
+        default:
+          break
+      }
+      return info
+    }
+  },
+  data () {
+    return {
+      form: {}
+
+    }
+  },
+  computed: {},
+  beforeMount () { },
+  mounted () { },
+  methods: {},
+  watch: {}
+
+}
+</script>
+
+<style lang='scss' scoped>
+.contant {
+  margin: 16px auto;
+  width: 80%;
+}
+</style>

src/views/modules/staff/manage/componments/professional.vue

@@ -0,0 +1,124 @@
+<!--  -->
+<template>
+  <div class="contant">
+    <el-form label-position="left" ref="form" :model="form" label-width="140px">
+      <el-form-item label="工号">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="职位">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="入职时间">
+        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="人员状态">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="离职时间">
+        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="离职原因">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="劳动合同签订公司">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="岗位最初从业时间">
+        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="工作经历">
+        <el-input type="textarea" v-model="form.desc"></el-input>
+      </el-form-item>
+    </el-form>
+    <!-- <div class="contant" v-if="info.staffName">
+      <span class="contant-label">姓名：</span>
+      <span class="contant-name">{{info.staffName}}</span>
+    </div>
+    <div class="contant" v-if="info.gender">
+      <span class="contant-label">性别：</span>
+      <span class="contant-name">{{info.gender |getSex}}</span>
+    </div>
+    <div class="contant" v-if="info.birthday">
+      <span class="contant-label">生日：</span>
+      <span class="contant-name">{{info.birthday}}</span>
+    </div>
+    <div class="contant" v-if="info.maritalStatus">
+      <span class="contant-label">婚姻状况：</span>
+      <span class="contant-name">{{info.maritalStatus==0?"未婚":"已婚"}}</span>
+    </div>
+    <div class="contant" v-if="info.national">
+      <span class="contant-label">民族：</span>
+      <span class="contant-name">{{info.national}}</span>
+    </div>
+    <div class="contant" v-if="info.politicalLandscape">
+      <span class="contant-label">政治面貌：</span>
+      <span class="contant-name">{{info.politicalLandscape}}</span>
+    </div>
+    <div class="contant" v-if="info.mobile">
+      <span class="contant-label">联系电话：</span>
+      <span class="contant-name">{{info.mobile}}</span>
+    </div>
+    <div class="contant" v-if="info.currentAddress">
+      <span class="contant-label">现住址：</span>
+      <span class="contant-name">{{info.currentAddress}}</span>
+    </div>-->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  filters: {
+    getSex (type) {
+      let info = ''
+      switch (type) {
+        case 0:
+          info = '未知'
+          break
+        case 1:
+          info = '男'
+          break
+        case 2:
+          info = '女'
+          break
+
+        default:
+          break
+      }
+      return info
+    }
+  },
+  data () {
+    return {
+      form: {}
+
+    }
+  },
+  computed: {},
+  beforeMount () { },
+  mounted () { },
+  methods: {},
+  watch: {}
+
+}
+</script>
+
+<style lang='scss' scoped>
+.contant {
+  margin: 16px auto;
+  width: 80%;
+}
+</style>

src/views/modules/staff/manage/index copy.vue

@@ -1,37 +0,0 @@
-<!--  -->
-<template>
-  <div class="staff-manage">
-    <staff-manage-left />
-    <staff-manage-right />
-  </div>
-</template>
-
-
-<script>
-import staffManageLeft from './compoments/staff-manage-left'
-import staffManageRight from './compoments/staff-manage-right'
-export default {
-  data () {
-    return {
-
-    }
-  },
-  components: {
-    staffManageLeft,
-    staffManageRight
-
-  },
-  computed: {},
-  beforeMount () { },
-  mounted () { },
-  methods: {},
-  watch: {}
-
-}
-</script>
-
-<style lang='scss' scoped>
-.staff-manage {
-  display: flex;
-}
-</style>

src/views/modules/staff/manage/index.vue

@@ -5,30 +5,28 @@
       <el-row>
         <el-col class="menu" :span="6">
           <el-tree
+            ref="treeList"
             :data="menuList"
             :props="defaultProps"
+            :expand-on-click-node="false"
             :highlight-current="true"
-            :load="loadNode"
+            node-key="departmentId"
-            lazy
             @node-click="handleNodeClick"
           >
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span>{{ data.departmentName }}</span>
+              <span>{{ data.departmentName}}</span>
-              <span>({{data.memberCount}})人</span>
+              <span>{{" " + data.memberCount}}</span>
             </span>
           </el-tree>
-          <!-- <el-menu @open="openMenu" :default-active="current" :collapse-transition="true" :unique-opened="true">
-            <menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
-          </el-menu>-->
         </el-col>
         <el-col :span="18">
           <div class="block">
             <el-form :inline="true">
               <el-form-item label="员工姓名">
-                <el-input v-model="searchParams.staffName"></el-input>
+                <el-input v-model="query.name"></el-input>
               </el-form-item>
               <el-form-item label="人员状态">
-                <el-select v-model="searchParams.staffState" placeholder="请选择">
+                <el-select v-model="query.staffStatus" placeholder="请选择">
                   <el-option
                     v-for="item in staffStateList"
                     :key="item.value"
@@ -38,11 +36,7 @@
                 </el-select>
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" :loading="isUploadIng">
+                <el-button type="primary" @click="getTable">查询</el-button>
-                  <i v-if="!isUploadIng" class="el-icon-plus"></i>
-                  上传
-                </el-button>
-                <el-button type="primary" :loading="queryIng" @click="getTable">查询</el-button>
                 <el-button @click="clear">重置</el-button>
               </el-form-item>
             </el-form>
@@ -53,12 +47,12 @@
               :data="tableData"
               :header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
               style="width: 100%"
-              height="100%"
+              height="600"
             >
-              <el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
+              <el-table-column header-align="center" align="center" label="工号" prop="staffId"></el-table-column>
               <el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
               <el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
-              <el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
+              <el-table-column header-align="center" align="center" label="状态" prop="staffStatus"></el-table-column>
               <el-table-column header-align="center" align="center" label="操作">
                 <template slot-scope="scope">
                   <el-button type="text" @click="handleView(scope.row)">编辑</el-button>
@@ -69,36 +63,62 @@
               class="bl-form3"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
-              :current-page.sync="currentPage"
+              :current-page.sync="query.currentPage"
               :page-sizes="[10, 20, 50]"
-              :page-size="pageSize"
               layout="total, sizes, prev, pager, next"
-              :total="pageTotal"
+              :total="query.pageTotal"
             ></el-pagination>
           </div>
         </el-col>
       </el-row>
     </el-card>
+    <el-dialog title="员工档案" :close-on-click-modal="false" :visible.sync="dialogVisible" width="60%">
+      <div class="dialogVisible-tabs">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="基础信息" name="first">
+            <basis />
+          </el-tab-pane>
+          <el-tab-pane label="教育背景" name="second">
+            <education />
+          </el-tab-pane>
+          <el-tab-pane label="职业信息" name="third">
+            <professional />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import menuTree from '@/components/menu-tree'
-
+import basis from './componments/basis.vue'
+import professional from './componments/professional'
+import education from './componments/education'
+import { apiOrganizationList, apiEmployeesList, apiEmployeesInfo } from '@/api/api_staff'
 export default {
   components: {
-    menuTree
+    menuTree,
+    professional,
+    basis,
+    education
   },
   data () {
     return {
-      isUploadIng: false,
+      activeName: 'first',
-      queryIng: false,
+      dialogVisible: false,
       defaultProps: {
-        children: 'children',
+        children: 'list',
         label: 'name'
       },
+
+      employeesList: [],
       menuList: [], // 架构数据
       tableData: [], // 表格数据
+      employeesInfo: {}, // 员工档案
       // 搜索数据
       searchParams: {
         staffName: '',
@@ -110,13 +130,15 @@ export default {
         { value: '1', label: '离职' }
       ],
       loading: false,
-      currentPage: 1,
+      query: {
-      pageSize: 10,
+        page: 1,
-      pageTotal: 0,
+        limit: 10,
+        pageTotal: 0,
+        departmentId: null
+      },
       deptId: '',
       // 弹窗相关
       showAddDialogForm: false,
-      activeName: 'first',
       form: {
         name: '',
         region: '',
@@ -147,197 +169,76 @@ export default {
     this.handleGetTableList(this.current)
   },
   methods: {
-    getTable () {
+    async getEmployeesInfo (data) {
-      console.log('获取数据')
+      let result = await apiEmployeesInfo(data)
-    },
+      if (result.code === 0) {
-    loadNode (node, resolve) {
+        this.dialogVisible = true
-      console.log('resolve: ', resolve)
+        this.employeesInfo = result.data
-      console.log('node', node)
+      } else {
-      if (node.level === 0) {
+        this.$message.error(result.msg)
-        return resolve([{
-          departmentName: '业务前台',
-          departmentId: parseInt(Math.random() * 300),
-          departmentParentId: '',
-          memberCount: '20',
-          type: 1
-        },
-        {
-          departmentName: '业务中台',
-          departmentId: parseInt(Math.random() * 300),
-          departmentParentId: '',
-          memberCount: '30',
-          type: 2
-        }, {
-          departmentName: '业务后台',
-          departmentId: parseInt(Math.random() * 300),
-          departmentParentId: '',
-          memberCount: '50',
-          type: 3
-        }])
       }
-      // if (node.level > 1) return resolve([])
+      console.log('result: ', result)
-
+    },
-      setTimeout(() => {
+    setCurrentKey (key) {
-        let data = []
+      console.log('key: ', key)
-        if (node.data.type === 2) {
-          data = [{
-            departmentName: '技术中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '10',
-            type: 4
-          },
-          {
-            departmentName: '产品设计中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '20',
-            type: 4
-          },
-          {
-            departmentName: '品牌中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '14',
-            type: 4
-          }, {
-            departmentName: '客服中心',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '6',
-            type: 4
-          }]
-        }
-        if (node.data.type === 4) {
-          data = [{
-            departmentName: 'xx团队',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '6',
-            type: 5
-          },
-          {
-            departmentName: 'xx团队',
-            departmentId: parseInt(Math.random() * 300),
-            departmentParentId: '',
-            memberCount: '6',
-            type: 5
-          }]
-        }
-
-        resolve(data)
-      }, 500)
     },
     handleNodeClick (data) {
+      // highlight - current
+      this.query.departmentId = data.departmentId
       console.log('data', data)
     },
     // 获取侧边架构列表
-    handleGetMenuList () {
+    async handleGetMenuList () {
-      let data = [{
+      let result = await apiOrganizationList()
-        'children': [
+      console.log('result: ', result)
-          {
+      this.menuList = result
-            'children': [],
-            'id': 70990627,
-            'name': '结算部',
-            'parentId': 55969991,
-            'number': '1'
-          }
-        ],
-        'id': 55969991,
-        'name': '结算中心',
-        'parentId': 1,
-        'number': 2
-      }, {
-        'children': [
-          {
-            'children': [
-              {
-                'children': [],
-                'id': 92131240,
-                'name': '金融运营团队',
-                'parentId': 87839336
-              },
-              {
-                'children': [
-                  {
-                    'children': [],
-                    'id': 9213124111,
-                    'name': '2B业务组',
-                    'parentId': 92131239
-                  },
-                  {
-                    'children': [],
-                    'id': 9213124222,
-                    'name': '2C业务组',
-                    'parentId': 92131239
-                  }
-                ],
-                'id': 92131239,
-                'name': '电商运营团队',
-                'parentId': 87839336
-              }
-            ],
-            'id': 87839336,
-            'name': '运营中心',
-            'parentId': 87839327
-          }
-        ],
-        'id': 87839327,
-        'name': '业务前台',
-        'parentId': 1
-      }]
-      this.menuList = data
     },
-    // 获取数据列表
+    // 获取数据列表 { page: 0, limit: 5 }
-    handleGetTableList (id) {
+    async handleGetTableList (id) {
-      this.tableData = [{
+      this.loading = true
-        'deptName': '结算中心',
+      let result = await apiEmployeesList(Object.assign({}, this.query, { limit: this.query.pageSize, page: this.query.page - 1 }))
-        'id': 665,
+      this.tableData = result.page.list
-        'jobnumber': '4',
+      this.query.pageTotal = result.page.totalCount
-        'name': '刘更顺',
+      console.log('getEmployeesList: ', result)
-        'position': 'CPO'
-      },
-      {
-        'deptName': '结算部',
-        'id': 670,
-        'jobnumber': '239',
-        'name': '王文龙',
-        'position': '数据运营'
-      }]
       this.loading = false
     },
-    openMenu (index, indexPath) {
-      if (index === '51685041') {
-        this.handleGetTableList(index)
-      } else {
-        this.clearData()
-        this.loading = false
-      }
-    },
     clear () {
-      this.input = ''
+      this.query = {
-      this.deptId = ''
+        page: 1,
+        limit: 10,
+        pageTotal: 0,
+        departmentId: null
+      }
+      this.$refs.treeList.setCurrentKey()
+      this.handleGetTableList()
+    },
+    getTable () {
+      this.query.page = 1
+      this.handleGetTableList()
     },
     clearData () {
       this.tableData = []
       this.currentPage = 1
-      this.pageTotal = 10
+      this.pageTotal = 20
       this.loading = true
     },
     handleCurrentChange (val) {
+      console.log('val: ', val)
+      this.query.page = val
       this.handleGetTableList()
     },
     handleSizeChange (val) {
-      this.pageSize = val
+      this.query.pageSize = val
       this.handleGetTableList()
     },
     // 弹窗相关
     handleClick (tab, event) {
       console.log(tab, event)
     },
-    handleView () {
+    async handleView (data) {
-      // this.showAddDialogForm = true
+      this.dialogVisible = true
-      console.log('编辑')
+      console.log('data: ', data)
+      // await this.getEmployeesInfo(data.staffId)
     }
   }
 }
@@ -346,8 +247,19 @@ export default {
 .el-tree-node__content {
   margin: 10px 0 !important;
 }
+.el-table td,
+.el-table th {
+  padding: 8px 0 !important;
+}
 </style>
 <style lang="scss" scoped>
+.staff {
+  // height: 1000px;
+  // background: #fff;
+  // padding: 10px;
+  // box-sizing: border-box;
+  // border-radius: 2px;
+}
 .staff .block,
 .staff .table {
   margin-left: 20px;
@@ -363,6 +275,10 @@ export default {
   padding-bottom: 10px;
   margin-bottom: 20px;
 }
+.dialogVisible-tabs {
+  // width: 248px;
+  margin: 0 auto;
+}
 .bl-form3 {
   &.el-pagination {
     margin-top: 16px;

src/views/modules/staff/profile/componments/query-form/index.vue

@@ -4,7 +4,12 @@
     <div class="staff-archives-title">条件筛选</div>
     <el-form :inline="true" :model="formInline" class="demo-form-inline staff-archives-form">
       <el-form-item label="选择部门">
-        <el-input placeholder="请选择部门" @focus="isChoose=true" readonly :value="formInline.input3"></el-input>
+        <el-input
+          placeholder="请选择部门"
+          @focus="isChoose=true"
+          readonly
+          :value="formInline.departmentName"
+        ></el-input>
       </el-form-item>
 
       <el-form-item :label="`选择时间段\n(仅对员工数量生效)`">
@@ -17,20 +22,21 @@
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          @change="changeData"
           :picker-options="pickerOptions"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button type="primary" @click="onSubmit">重置</el-button>
+        <el-button type="primary" @click="restValue">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-dialog title="选择部门" :visible.sync="isChoose" width="30%">
-      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
+      <el-tree :data="menuList" :props="defaultProps" @node-click="handleNodeClick">
         <span class="custom-tree-node" slot-scope="{ node, data }">
-          <span>{{ data.label }}</span>
+          <span>{{ data.departmentName }}</span>
-          <span>({{ data.number }})人</span>
+          <span>({{ data.memberCount }})人</span>
         </span>
       </el-tree>
       <span slot="footer" class="dialog-footer">
@@ -42,38 +48,18 @@
 </template>
 
 <script>
+import { apiOrganizationList } from '@/api/api_staff'
 export default {
   data () {
     return {
-      isChooseText: '',
+      isChooseObj: {},
       isChoose: false,
-      data: [{
+      menuList: [],
-        label: '业务前台',
-        number: 24,
-        children: [{
-          label: '商务中心',
-          number: 10
-        }, {
-          label: '运营中心',
-          number: 12
-        }]
-      }, {
-        label: '业务中台',
-        number: 25,
-        children: [{
-          label: '产品中心',
-          number: 12
-        }, {
-          label: '客服中心',
-          number: 13
-        }]
-      }],
       defaultProps: {
-        children: 'children',
+        children: 'list',
-        label: 'label'
+        label: 'name'
       },
       formInline: {
-        input3: ''
       },
       pickerOptions: {
         shortcuts: [{
@@ -106,19 +92,39 @@ export default {
   },
   computed: {},
   beforeMount () { },
+  created () {
+    this.handleGetMenuList()
+  },
   mounted () { },
   methods: {
+    changeData (data) {
+      console.log('data: ', data)
+      this.formInline.beginDate = data[0]
+      this.formInline.endDate = data[1]
+    },
+    // 获取侧边架构列表
+    async handleGetMenuList () {
+      let result = await apiOrganizationList()
+      console.log('result: ', result)
+      this.menuList = result
+    },
     onSubmit () {
-      console.log(this.formInline)
+      console.log('formInline', this.formInline)
       this.$emit('submit', 12)
     },
+    restValue () {
+      this.formInline = {}
+    },
     onsumbit () {
-      this.formInline.input3 = this.isChooseText
+      this.formInline = Object.assign({}, this.formInline, this.isChooseObj)
       this.isChoose = false
     },
     handleNodeClick (a, b) {
-      this.isChooseText = a.label
+      this.isChooseObj = {
-      console.log(this.formInline.input3)
+        departmentId: a.departmentId,
+        departmentName: a.departmentName
+      }
+      console.log('a: ', a)
     }
   },
   watch: {}

src/views/modules/staff/profile/index.vue

@@ -29,6 +29,7 @@
 import chartForm from './componments/chart-form'
 import queryForm from './componments/query-form'
 import employeesNumber from './componments/employees-number'
+
 export default {
   components: {
     chartForm,