feat:联调完成员工档案接口;todo:员工概况待调试,员工档案查看档案接口数据不全;style:组织管理的代码格式改动;
This commit is contained in:
xiongchengqiang
parent
88260bc3af
commit
45456d9958
@ -9,13 +9,14 @@ export const apiOrganizationList = data => {
|
||||
}
|
||||
|
||||
// 员工列表
|
||||
export const apiEmployeesList = data => {
|
||||
return http({ url: '/lz_management/staff/info/list', method: 'post', data })
|
||||
export const apiEmployeesList = params => {
|
||||
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' })
|
||||
}
|
||||
|
||||
// 员工概况
|
||||
|
||||
94
src/views/modules/staff/archives/componments/basis.vue
Normal file
94
src/views/modules/staff/archives/componments/basis.vue
Normal file
@ -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>
|
||||
69
src/views/modules/staff/archives/componments/education.vue
Normal file
69
src/views/modules/staff/archives/componments/education.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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"
|
||||
lazy
|
||||
node-key="departmentId"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ data.departmentName }}</span>
|
||||
<span>({{data.memberCount}})人</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">
|
||||
<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 @click="clear()">重置</el-button>
|
||||
<el-button type="primary" @click="getTable">查询</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="name"></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" 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: [], // 表格数据
|
||||
// 搜索数据
|
||||
searchParams: {
|
||||
staffName: '',
|
||||
staffState: ''
|
||||
},
|
||||
employeesInfo: {}, // 员工档案
|
||||
// 在职状态
|
||||
staffStateList: [
|
||||
{ value: '0', label: '在职' },
|
||||
{ value: '1', label: '离职' }
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0,
|
||||
deptId: '',
|
||||
// 弹窗相关
|
||||
showAddDialogForm: false,
|
||||
activeName: 'first',
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
query: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
pageTotal: 0,
|
||||
departmentId: null
|
||||
}
|
||||
}
|
||||
},
|
||||
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) {
|
||||
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
|
||||
}])
|
||||
async getEmployeesInfo (data) {
|
||||
let result = await apiEmployeesInfo(data)
|
||||
if (result.code === 0) {
|
||||
this.dialogVisible = true
|
||||
this.employeesInfo = result.data
|
||||
} else {
|
||||
this.$message.error(result.msg)
|
||||
}
|
||||
// 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)
|
||||
console.log('result: ', result)
|
||||
},
|
||||
handleNodeClick (data) {
|
||||
// highlight - current
|
||||
this.query.departmentId = data.departmentId
|
||||
console.log('data', data)
|
||||
},
|
||||
// 获取侧边架构列表
|
||||
handleGetMenuList () {
|
||||
let data = [{
|
||||
'children': [
|
||||
{
|
||||
'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
|
||||
async handleGetMenuList () {
|
||||
let result = await apiOrganizationList()
|
||||
console.log('result: ', result)
|
||||
this.menuList = result
|
||||
},
|
||||
// 获取数据列表
|
||||
handleGetTableList (id) {
|
||||
this.tableData = [{
|
||||
'deptName': '结算中心',
|
||||
'id': 665,
|
||||
'jobnumber': '4',
|
||||
'name': '刘更顺',
|
||||
'position': 'CPO'
|
||||
},
|
||||
{
|
||||
'deptName': '结算部',
|
||||
'id': 670,
|
||||
'jobnumber': '239',
|
||||
'name': '王文龙',
|
||||
'position': '数据运营'
|
||||
}]
|
||||
// 获取数据列表 { page: 0, limit: 5 }
|
||||
async handleGetTableList (id) {
|
||||
this.loading = true
|
||||
let result = await apiEmployeesList(Object.assign({}, this.query, { limit: this.query.pageSize }))
|
||||
console.log('result: ', result)
|
||||
if (result.code === 0) {
|
||||
this.tableData = result.page.list
|
||||
this.query.pageTotal = result.page.totalCount
|
||||
} else {
|
||||
this.$message.error(result.msg)
|
||||
}
|
||||
console.log('getEmployeesList: ', result)
|
||||
this.loading = false
|
||||
},
|
||||
openMenu (index, indexPath) {
|
||||
if (index === '51685041') {
|
||||
this.handleGetTableList(index)
|
||||
} else {
|
||||
this.clearData()
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.input = ''
|
||||
this.deptId = ''
|
||||
this.$router.push({ name: 'staff', query: { id: '' } })
|
||||
this.query = {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
pageTotal: 0,
|
||||
departmentId: null
|
||||
}
|
||||
this.$refs.treeList.setCurrentKey()
|
||||
this.handleGetTableList()
|
||||
},
|
||||
clearData () {
|
||||
this.tableData = []
|
||||
this.currentPage = 1
|
||||
this.pageTotal = 10
|
||||
this.loading = true
|
||||
getTable () {
|
||||
this.query.page = 1
|
||||
this.handleGetTableList()
|
||||
},
|
||||
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 () {
|
||||
this.showAddDialogForm = true
|
||||
async handleView (data) {
|
||||
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>
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>左边</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
@ -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>
|
||||
126
src/views/modules/staff/manage/componments/basis.vue
Normal file
126
src/views/modules/staff/manage/componments/basis.vue
Normal file
@ -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>
|
||||
109
src/views/modules/staff/manage/componments/education.vue
Normal file
109
src/views/modules/staff/manage/componments/education.vue
Normal file
@ -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>
|
||||
124
src/views/modules/staff/manage/componments/professional.vue
Normal file
124
src/views/modules/staff/manage/componments/professional.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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"
|
||||
lazy
|
||||
node-key="departmentId"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ data.departmentName }}</span>
|
||||
<span>({{data.memberCount}})人</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">
|
||||
<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">
|
||||
<i v-if="!isUploadIng" class="el-icon-plus"></i>
|
||||
上传
|
||||
</el-button>
|
||||
<el-button type="primary" :loading="queryIng" @click="getTable">查询</el-button>
|
||||
<el-button type="primary" @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,
|
||||
queryIng: false,
|
||||
activeName: 'first',
|
||||
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,
|
||||
pageSize: 10,
|
||||
pageTotal: 0,
|
||||
query: {
|
||||
page: 1,
|
||||
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 () {
|
||||
console.log('获取数据')
|
||||
},
|
||||
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
|
||||
}])
|
||||
async getEmployeesInfo (data) {
|
||||
let result = await apiEmployeesInfo(data)
|
||||
if (result.code === 0) {
|
||||
this.dialogVisible = true
|
||||
this.employeesInfo = result.data
|
||||
} else {
|
||||
this.$message.error(result.msg)
|
||||
}
|
||||
// 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)
|
||||
console.log('result: ', result)
|
||||
},
|
||||
setCurrentKey (key) {
|
||||
console.log('key: ', key)
|
||||
},
|
||||
handleNodeClick (data) {
|
||||
// highlight - current
|
||||
this.query.departmentId = data.departmentId
|
||||
console.log('data', data)
|
||||
},
|
||||
// 获取侧边架构列表
|
||||
handleGetMenuList () {
|
||||
let data = [{
|
||||
'children': [
|
||||
{
|
||||
'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
|
||||
async handleGetMenuList () {
|
||||
let result = await apiOrganizationList()
|
||||
console.log('result: ', result)
|
||||
this.menuList = result
|
||||
},
|
||||
// 获取数据列表
|
||||
handleGetTableList (id) {
|
||||
this.tableData = [{
|
||||
'deptName': '结算中心',
|
||||
'id': 665,
|
||||
'jobnumber': '4',
|
||||
'name': '刘更顺',
|
||||
'position': 'CPO'
|
||||
},
|
||||
{
|
||||
'deptName': '结算部',
|
||||
'id': 670,
|
||||
'jobnumber': '239',
|
||||
'name': '王文龙',
|
||||
'position': '数据运营'
|
||||
}]
|
||||
// 获取数据列表 { page: 0, limit: 5 }
|
||||
async handleGetTableList (id) {
|
||||
this.loading = true
|
||||
let result = await apiEmployeesList(Object.assign({}, this.query, { limit: this.query.pageSize, page: this.query.page - 1 }))
|
||||
this.tableData = result.page.list
|
||||
this.query.pageTotal = result.page.totalCount
|
||||
console.log('getEmployeesList: ', result)
|
||||
this.loading = false
|
||||
},
|
||||
openMenu (index, indexPath) {
|
||||
if (index === '51685041') {
|
||||
this.handleGetTableList(index)
|
||||
} else {
|
||||
this.clearData()
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.input = ''
|
||||
this.deptId = ''
|
||||
this.query = {
|
||||
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 () {
|
||||
// this.showAddDialogForm = true
|
||||
console.log('编辑')
|
||||
async handleView (data) {
|
||||
this.dialogVisible = true
|
||||
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;
|
||||
|
||||
@ -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.number }})人</span>
|
||||
<span>{{ data.departmentName }}</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: [{
|
||||
label: '业务前台',
|
||||
number: 24,
|
||||
children: [{
|
||||
label: '商务中心',
|
||||
number: 10
|
||||
}, {
|
||||
label: '运营中心',
|
||||
number: 12
|
||||
}]
|
||||
}, {
|
||||
label: '业务中台',
|
||||
number: 25,
|
||||
children: [{
|
||||
label: '产品中心',
|
||||
number: 12
|
||||
}, {
|
||||
label: '客服中心',
|
||||
number: 13
|
||||
}]
|
||||
}],
|
||||
menuList: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
children: 'list',
|
||||
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
|
||||
console.log(this.formInline.input3)
|
||||
this.isChooseObj = {
|
||||
departmentId: a.departmentId,
|
||||
departmentName: a.departmentName
|
||||
}
|
||||
console.log('a: ', a)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user