wulin/wl_management_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xiongchengqiang 2020-05-15 18:03:58 +08:00
parent dea0d7bd05
commit 88260bc3af
6 changed files with 170 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/api_staff.js
View File

@ -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 })
}

88
src/views/modules/staff/archives/index.vue
View File

@ -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.id}})人</span>
<span>{{ data.departmentName }}</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 @click="clear">重置</el-button>
<el-button type="primary" @click="getTable()">查询</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)
},

17
src/views/modules/staff/manage/index.vue
View File

@ -38,8 +38,12 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getTable()">查询</el-button>
<el-button @click="clear()">重置</el-button>
<el-button type="primary" :loading="isUploadIng">
<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('编辑')
}
}
}

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

@ -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' },
{ '分类': '3-5年', '数量': '80' },
{ '分类': '5-8年', '数量': '58' },
{ '分类': '8-10年', '数量': '58' }
{ '分类': '0-3年', '数量': '50', '占比': '10%' },
{ '分类': '3-5年', '数量': '80', '占比': '10%' },
{ '分类': '5-8年', '数量': '58', '占比': '10%' },
{ '分类': '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: {

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

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

51
src/views/modules/staff/profile/index.vue
View File

@ -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">
<chart-form />
<el-card>
<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)
}