feat:添加api接口,模拟员工概况页面

src/api/api_staff.js

@@ -18,6 +18,11 @@ export const apiEmployeesInfo = data => {
   return http({ url: '/lz_management/staff/archives/query', method: 'post', data })
 }
 
+// 员工概况
+export const apiEmployeessItuation = data => {
+  return http({ url: '/lz_management/staff/statistical', method: 'post', data })
+}
+
 /**
  * 文件上传
  */
@@ -25,18 +30,3 @@ export const apiEmployeesInfo = data => {
 export const apiSysOssList = params => {
   return http({ url: '/lz_management/sys/oss/list', method: 'get', params })
 }
-
-// 删除文件上传记录
-export const apiSysOssDelete = data => {
-  return http({ url: `/lz_management/sys/oss/delete`, method: 'post', data })
-}
-
-// 编辑云储存配置
-export const apiSysOssConfig = params => {
-  return http({ url: `/lz_management/sys/oss/config`, method: 'get', params })
-}
-
-// 提交云储存配置
-export const apiSysOssSaveConfig = params => {
-  return http({ url: `/lz_management/sys/oss/saveConfig`, method: 'get', params })
-}

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

@@ -8,11 +8,13 @@
             :data="menuList"
             :props="defaultProps"
             :highlight-current="true"
+            :load="loadNode"
+            lazy
             @node-click="handleNodeClick"
           >
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span>{{ data.name }}</span>
+              <span>{{ data.departmentName }}</span>
-              <span>({{data.id}})人</span>
+              <span>({{data.memberCount}})人</span>
             </span>
           </el-tree>
           <!-- <el-menu @open="openMenu" :default-active="current" :collapse-transition="true" :unique-opened="true">
@@ -36,8 +38,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>
@@ -139,6 +141,84 @@ export default {
     this.handleGetTableList(this.current)
   },
   methods: {
+    loadNode (node, resolve) {
+      console.log('resolve: ', resolve)
+      console.log('node', node)
+      if (node.level === 0) {
+        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([])
+
+      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) {
       console.log('data', data)
     },

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

@@ -38,8 +38,12 @@
                 </el-select>
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" @click="getTable()">查询</el-button>
+                <el-button type="primary" :loading="isUploadIng">
-                <el-button @click="clear()">重置</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>
           </div>
@@ -87,6 +91,8 @@ export default {
   },
   data () {
     return {
+      isUploadIng: false,
+      queryIng: false,
       defaultProps: {
         children: 'children',
         label: 'name'
@@ -141,6 +147,9 @@ export default {
     this.handleGetTableList(this.current)
   },
   methods: {
+    getTable () {
+      console.log('获取数据')
+    },
     loadNode (node, resolve) {
       console.log('resolve: ', resolve)
       console.log('node', node)
@@ -308,7 +317,6 @@ export default {
     clear () {
       this.input = ''
       this.deptId = ''
-      this.$router.push({ name: 'staff', query: { id: '' } })
     },
     clearData () {
       this.tableData = []
@@ -328,7 +336,8 @@ export default {
       console.log(tab, event)
     },
     handleView () {
-      this.showAddDialogForm = true
+      // this.showAddDialogForm = true
+      console.log('编辑')
     }
   }
 }

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

@@ -1,11 +1,11 @@
 <!--  -->
 <template>
   <div class="staff-archives-charts">
-    <div class="staff-archives-title">性别分布{{color}}</div>
+    <div class="staff-archives-title">{{title}}</div>
     <div>
       <ve-ring
         height="300px"
-        :data="chartData"
+        :data="dataInfo"
         :extend="color.length>0?Object.assign({},chartExtend,{color}):chartExtend"
         :settings="chartSettings"
       ></ve-ring>
@@ -16,6 +16,14 @@
 <script>
 export default {
   props: {
+    dataInfo: {
+      type: Object,
+      default: () => { }
+    },
+    title: {
+      type: String,
+      default: () => '分布'
+    },
     color: {
       type: Array,
       default: () => []
@@ -25,7 +33,6 @@ export default {
     return {
       chartExtend: {
         legend: {
-          orient: 'vertical',
           x: 'center',
           y: '80%',
           show: true
@@ -35,12 +42,12 @@ export default {
         }
       },
       chartData: {
-        columns: ['分类', '数量'],
+        columns: ['分类', '数量', '占比'],
         rows: [
-          { '分类': '0-3年', '数量': '50' },
+          { '分类': '0-3年', '数量': '50', '占比': '10%' },
-          { '分类': '3-5年', '数量': '80' },
+          { '分类': '3-5年', '数量': '80', '占比': '10%' },
-          { '分类': '5-8年', '数量': '58' },
+          { '分类': '5-8年', '数量': '58', '占比': '10%' },
-          { '分类': '8-10年', '数量': '58' }
+          { '分类': '8-10年', '数量': '58', '占比': '10%' }
         ]
       },
       chartSettings: {
@@ -50,7 +57,6 @@ export default {
         },
         label: {
           formatter: params => {
-            console.log(params)
             return `{a|${params.data.name}\n${params.data.value}人}`
           },
           rich: {

src/views/modules/staff/profile/componments/employees-number/index.vue

@@ -23,6 +23,12 @@
 
 <script>
 export default {
+  props: {
+    dataInfo: {
+      type: Object,
+      default: () => { }
+    }
+  },
   data () {
     return {
 

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

@@ -5,11 +5,20 @@
       <query-form @submit="submit" />
     </el-card>
     <el-card>
-      <employees-number />
+      <employees-number :dataInfo="dataInfo" />
     </el-card>
     <div class="staff-archives-chart">
-      <el-card v-for="i in 10" :key="i">
+      <el-card>
-        <chart-form />
+        <chart-form :dataInfo="dataInfo.genderDistribution" title="性别分布" />
+      </el-card>
+      <el-card>
+        <chart-form :dataInfo="dataInfo.ageDistribution" title="年龄分布" />
+      </el-card>
+      <el-card>
+        <chart-form :dataInfo="dataInfo.jobSeniorityDistribution" title="岗位工龄分布" />
+      </el-card>
+      <el-card>
+        <chart-form :dataInfo="dataInfo.educationDistribution" title="学历分布" />
       </el-card>
     </div>
   </div>
@@ -28,12 +37,46 @@ export default {
   },
   data () {
     return {
+      dataInfo: {}
     }
   },
   computed: {},
   beforeMount () { },
-  mounted () { },
+  mounted () {
+    this.initData()
+  },
   methods: {
+    // 获取页面数据
+    async initData () {
+      const dataInfo = {
+        beginDate: '2020-03-03',
+        endDate: '2020-05-16',
+        departmentName: '技术部',
+        totalStaffCount: '300',
+        managementCount: '24',
+        managementRate: '25%',
+        newStaffCount: '20',
+        leaveStaffCount: '2',
+        leaveRate: '15%',
+        genderDistribution: {
+          columns: ['分类', '数量', '占比'],
+          rows: [{ '分类': '男', '数量': 153, '占比': '60%' }, { '分类': '女', '数量': 100, '占比': '40%' }]
+        },
+        ageDistribution: {
+          columns: ['分类', '数量', '占比'],
+          rows: [{ '分类': '10-20', '数量': 153, '占比': '60%' }, { '分类': '20-30', '数量': 60, '占比': '40%' }, { '分类': '30-40', '数量': 10, '占比': '40%' }]
+        },
+        jobSeniorityDistribution: {
+          columns: ['分类', '数量', '占比'],
+          rows: [{ '分类': '男', '数量': 153, '占比': '60%' }, { '分类': '女', '数量': 60, '占比': '40%' }]
+        },
+        educationDistribution: {
+          columns: ['分类', '数量', '占比'],
+          rows: [{ '分类': '专科', '数量': 13, '占比': '60%' }, { '分类': '本科', '数量': 100, '占比': '40%' }, { '分类': '研究生', '数量': 60, '占比': '40%' }, { '分类': '博士', '数量': 10, '占比': '40%' }]
+        }
+      }
+      this.dataInfo = dataInfo
+    },
     submit (data) {
       console.log('data', data)
     }