<template>
|
<div>
|
<el-container>
|
<el-header :height="headerHeight">
|
<el-row>
|
<el-col :span="16">
|
<h3 class="bu-tian-jia-title" />
|
</el-col>
|
<el-col :span="8">
|
<el-input v-model="input" placeholder="请输入内容" style="width:200px" />
|
<el-button type="primary">查询</el-button>
|
<el-button type="danger" @click.native="advancedQueryShowMethods">高级查询</el-button>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<!-- <el-button type="danger">导出EXCEL</el-button> -->
|
</el-col>
|
</el-row>
|
<div v-show="advancedQueryShow">
|
<form>
|
<el-row>
|
<el-col :span="3">员工编号：
|
<el-input v-model="input" placeholder="请输入内容" style="width:80px" />
|
</el-col>
|
<el-col :span="3">姓名：
|
<el-input v-model="input" placeholder="请输入内容" style="width:80px" />
|
</el-col>
|
<el-col :span="3">身份证号：
|
<el-input v-model="input" placeholder="请输入内容" style="width:80px" />
|
</el-col>
|
<el-col :span="3">所属部门：
|
<el-input v-model="input" placeholder="请输入内容" style="width:80px" />
|
</el-col>
|
<el-col :span="3">岗位：
|
<el-input v-model="input" placeholder="请输入内容" style="width:80px" />
|
</el-col>
|
<el-col :span="3">保安证号：
|
<el-input v-model="input" placeholder="请输入内容" style="width:80px" />
|
</el-col>
|
<el-col :span="6">
|
<el-button type="primary">查询</el-button>
|
<el-button type="danger">重置</el-button>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<table id="searchTable">
|
<tr>
|
<td>搜索项：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">基本信息</el-radio>
|
<el-radio :label="6">工作信息</el-radio>
|
<el-radio :label="9">工作经历</el-radio>
|
<el-radio :label="9">体检信息</el-radio>
|
<el-radio :label="9">合同信息</el-radio>
|
<el-radio :label="9">考勤情况</el-radio>
|
<el-radio :label="9">员工请假</el-radio>
|
<el-radio :label="9">员工调岗</el-radio>
|
<el-radio :label="9">备注信息</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>性别：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
<el-radio :label="6">男性</el-radio>
|
<el-radio :label="9">女性</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>最高学历：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
<el-radio :label="6">初中</el-radio>
|
<el-radio :label="9">高中</el-radio>
|
<el-radio :label="9">大专</el-radio>
|
<el-radio :label="9">本科</el-radio>
|
<el-radio :label="9">硕士</el-radio>
|
<el-radio :label="9">博士</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>政治面貌：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
<el-radio :label="6">党员</el-radio>
|
<el-radio :label="9">团员</el-radio>
|
<el-radio :label="9">群众</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>入职日期：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>身高：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
<el-radio :label="6">150-159</el-radio>
|
<el-radio :label="9">160-169</el-radio>
|
<el-radio :label="9">170-179</el-radio>
|
<el-radio :label="9">180-189</el-radio>
|
<el-radio :label="9">190-199</el-radio>
|
<el-radio :label="9">200及以上</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>年龄：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
<el-radio :label="6">18-29</el-radio>
|
<el-radio :label="9">30-39</el-radio>
|
<el-radio :label="9">40-49</el-radio>
|
<el-radio :label="9">50-59</el-radio>
|
<el-radio :label="9">60-69</el-radio>
|
<el-radio :label="9">69及以上</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>档案情况：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
<el-radio :label="6">已移交</el-radio>
|
<el-radio :label="9">未移交</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td>员工状态：</td>
|
<td>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">全部</el-radio>
|
<el-radio :label="6">在职</el-radio>
|
<el-radio :label="6">正常离职</el-radio>
|
<el-radio :label="6">自动离职</el-radio>
|
<el-radio :label="6">公司辞退</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
</table>
|
</el-col>
|
</el-row>
|
</form>
|
</div>
|
</el-header>
|
<el-container>
|
<el-aside width="400px">
|
<el-tree
|
ref="tree"
|
:data="deptTree"
|
:check-strictly="true"
|
show-checkbox
|
accordion
|
node-key="id"
|
highlight-current
|
default-expand-all
|
:filter-node-method="filterNode"
|
@node-click="nodeClick"
|
/>
|
</el-aside>
|
<el-main>
|
<el-table
|
ref="multipleTable"
|
:data="list"
|
style="width: 100%;height: 80%;"
|
row-key="prop1"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" :reserve-selection="true" width="55" />
|
<el-table-column :label="$t('table.user.username')" prop="username" :show-overflow-tooltip="true" align="center" min-width="120px">
|
<template slot-scope="scope">
|
<span>{{ scope.row.username }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="$t('table.user.email')" :show-overflow-tooltip="true" align="center" min-width="150px">
|
<template slot-scope="scope">
|
<span>{{ scope.row.email }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
:label="$t('table.user.sex')"
|
:filters="[{ text: $t('common.sex.male'), value: '0' }, { text: $t('common.sex.female'), value: '1' }, { text: $t('common.sex.secret'), value: '2' }]"
|
:filter-method="filterSex"
|
class-name="status-col"
|
>
|
<template slot-scope="{row}">
|
<el-tag :type="row.sex | sexFilter">
|
{{ transSex(row.sex) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!--
|
page.sync 当前页
|
limit.sync 每页显示数量 只能是5，10，20，30，50
|
pagination 翻页的事件
|
-->
|
<pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="search" />
|
<el-button type="primary" @click="sureChoose">确定</el-button>
|
<el-button type="danger" @click="cancleChoose">取消</el-button>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
<script>
|
// 引用翻页组件
|
import Pagination from '@/components/Pagination'
|
export default {
|
components: { Pagination },
|
data() {
|
return {
|
headerHeight: '70px',
|
deptTree: [],
|
advancedQueryShow: false,
|
selection: [],
|
multipleSelection: [],
|
total: 0, // 总数量
|
queryParams: {}, // 查询参数
|
sort: {}, // 排序
|
pagination: { // 分页参数
|
size: 5,
|
num: 1
|
},
|
list: [], // 给table显示的数据
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
}
|
}
|
},
|
mounted() {
|
this.initDeptTree()
|
// 初始加载
|
this.fetch()
|
},
|
methods: {
|
initDept() {
|
return {
|
deptId: '',
|
deptName: '',
|
parentId: null,
|
orderNum: 0
|
}
|
},
|
transSex(sex) {
|
switch (sex) {
|
case '0':
|
return this.$t('common.sex.male')
|
case '1':
|
return this.$t('common.sex.female')
|
default:
|
return this.$t('common.sex.secret')
|
}
|
},
|
filterSex(value, row) {
|
return row.sex === value
|
},
|
// 翻页方法
|
search() {
|
this.fetch({
|
...this.queryParams,
|
...this.sort
|
})
|
},
|
fetch(params = {}) {
|
var that = this
|
params.pageSize = this.pagination.size
|
params.pageNum = this.pagination.num
|
this.$get('system/user', {
|
...params
|
}).then((r) => {
|
const data = r.data.data
|
that.total = data.total
|
that.list = data.rows
|
})
|
},
|
|
initDeptTree() {
|
this.$get('system/dept').then((r) => {
|
this.deptTree = r.data.data.rows
|
})
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
nodeClick(data) {
|
this.dept.parentId = data.parentId
|
if (this.dept.parentId === '0') {
|
this.dept.parentId = null
|
}
|
this.dept.orderNum = data.orderNum
|
this.dept.deptName = data.label
|
this.dept.deptId = data.id
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
},
|
advancedQueryShowMethods() {
|
if (this.advancedQueryShow) {
|
this.headerHeight = '70px'
|
this.advancedQueryShow = false
|
} else {
|
this.headerHeight = '410px'
|
this.advancedQueryShow = true
|
}
|
},
|
sureChoose() {
|
this.$emit('selectedUser', this.multipleSelection)
|
},
|
cancleChoose() {
|
this.$emit('cancleChooseUser')
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.el-aside {
|
padding: 20px;
|
background: #f3f5f8;
|
height: 600px;
|
|
.el-tree {
|
height: 100%;
|
}
|
}
|
|
.el-main {
|
height: 600px;
|
}
|
|
#searchTable {
|
margin-top: 10px;
|
border-collapse: collapse;
|
width: 100%;
|
}
|
|
#searchTable td,
|
#searchTable th {
|
border: 1px solid #cad9ea;
|
color: #666;
|
height: 30px;
|
}
|
|
#ygxq table {
|
border-collapse: collapse;
|
margin: 0 auto;
|
text-align: center;
|
width: 100%;
|
margin-top: 20px;
|
}
|
|
#ygxq table td,
|
#ygxq table th {
|
border: 1px solid #DDDCDC;
|
color: #666;
|
height: 30px;
|
}
|
|
#ygxq table thead th {
|
background-color: #CCE8EB;
|
width: 100px;
|
}
|
|
#ygxq table tr:nth-child(odd) {
|
background: #fff;
|
}
|
|
#ygxq table tr:nth-child(even) {
|
background: #F5FAFA;
|
}
|
|
.tdTitle {
|
font-size: 14px;
|
font-weight: 700;
|
text-align: left;
|
}
|
|
.link_button {
|
color: #169BD5;
|
}
|
|
.del_button {
|
color: #D9001B;
|
}
|
</style>
|
