From 4cce4a5d09d5c8ed86f241cd70b6369344d2dfce Mon Sep 17 00:00:00 2001
From: luoyb <412940104@qq.com>
Date: 星期四, 16 五月 2024 19:08:35 +0800
Subject: [PATCH] feat: 员工档案中意外险案件列表宽度调整
---
src/views/user/selectuser.vue | 430 +++++++++++++----------------------------------------
1 files changed, 107 insertions(+), 323 deletions(-)
diff --git a/src/views/user/selectuser.vue b/src/views/user/selectuser.vue
index 6ad9332..6871d56 100644
--- a/src/views/user/selectuser.vue
+++ b/src/views/user/selectuser.vue
@@ -1,232 +1,103 @@
<template>
<div id="mainDiv">
- <el-container>
- <el-header :height="headerHeight">
- <el-row>
- <el-col :span="16">
- <h3 class="bu-tian-jia-title" />
+ <el-header :height="headerHeight">
+ <el-form>
+ <el-row style="height: 45px;">
+ <el-col :span="10">
+ <el-form-item label="关键字">
+ <el-input v-model="queryParams.baseKey" placeholder="请输入内容" style="width:200px" />
+ </el-form-item>
</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 :span="10" style="height: 100%;">
+ <el-form-item label="员工状态">
+ <el-checkbox-group v-model="queryParams.empStatus">
+ <el-checkbox :label="0">在职</el-checkbox>
+ <el-checkbox :label="1">离职</el-checkbox>
+ <el-checkbox :label="2">退休</el-checkbox>
+ </el-checkbox-group>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-button size="mini" class="hr-but-all" type="primary" @click="vagueSearch">查询</el-button>
+ <el-button size="mini" class="hr-but" type="danger" @click="resetSearch">重置</el-button>
</el-col>
</el-row>
- <el-row>
- <el-col :span="8">
- <!-- <el-button type="danger">导出EXCEL</el-button> -->
- </el-col>
+ <el-row style="text-align: right;height: 45px;line-height: 45px">
+ <el-button type="primary" @click="sureChoose">确定</el-button>
+ <el-button type="danger" @click="cancleChoose">取消</el-button>
</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 v-if="show" prop="empId" label="员工Id" width="100" />
- <el-table-column prop="empNumb" label="员工编号" width="100" />
- <el-table-column prop="empName" label="姓名" width="100" />
- <el-table-column prop="certificateNumb" label="身份证号码" width="180" />
- <el-table-column v-if="show" prop="deptId" label="部门Id" width="100" />
- <el-table-column prop="deptName" label="护卫点" width="100" />
- <el-table-column v-if="show" prop="jobId" label="岗位Id" width="100" />
- <el-table-column prop="jobName" label="岗位" width="100" />
- <el-table-column prop="empTypeName" label="员工类别" width="100" />
- <el-table-column prop="sexName" label="性别" width="50" />
- </el-table>
- <!--
+ </el-form>
+ </el-header>
+ <el-main>
+ <el-table
+ ref="multipleTable"
+ :data="list"
+ row-key="prop1"
+ :cell-style="{padding:'7px 0','text-align':'center'}"
+ :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
+ stripe
+ border
+ style="width: 100%;color: #000;"
+ @selection-change="handleSelectionChange"
+ @row-dblclick="rowDblclick"
+ @sort-change="changeSort"
+ >
+ <el-table-column show-overflow-tooltip type="selection" :reserve-selection="false" width="50" />
+ <el-table-column v-if="show" show-overflow-tooltip prop="empId" label="员工Id" />
+ <el-table-column show-overflow-tooltip prop="empNumb" label="编号" width="80" />
+ <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="110" />
+ <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" min-width="120" />
+ <el-table-column v-if="show" show-overflow-tooltip prop="deptId" label="部门Id" width="60" />
+ <el-table-column show-overflow-tooltip prop="allDeptName" label="部门(护卫点)" width="400" sortable="custom" :sort-orders="['ascending', 'descending']" />
+ <el-table-column v-if="show" show-overflow-tooltip prop="jobId" label="岗位Id" width="80" />
+ <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="100" />
+ <el-table-column show-overflow-tooltip prop="empTypeName" label="员工类别" width="80" />
+ <el-table-column show-overflow-tooltip prop="sexName" label="性别" width="60" />
+ </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>
+ <pagination
+ v-show="total>0"
+ :total="total"
+ :page.sync="pagination.num"
+ :limit.sync="pagination.size"
+ @pagination="search"
+ />
+
+ </el-main>
</div>
</template>
<script>
// 引用翻页组件
import Pagination from '@/components/Pagination'
export default {
- components: { Pagination },
+ components: {
+ Pagination
+ },
+ props: {
+ multipleselect: {
+ type: Boolean,
+ default: false
+ }
+ },
data() {
return {
show: false,
headerHeight: '70px',
deptTree: [],
- advancedQueryShow: false,
selection: [],
multipleSelection: [],
total: 0, // 总数量
- queryParams: {}, // 查询参数
+ queryParams: {
+ baseKey: '',
+ empStatus: []
+ }, // 查询参数
sort: {}, // 排序
pagination: { // 分页参数
- size: 5,
+ size: 15,
num: 1
},
list: [], // 给table显示的数据
@@ -237,32 +108,9 @@
}
},
mounted() {
- this.initDeptTree()
- // 初始加载
- this.fetch()
+ this.search()
},
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({
@@ -270,10 +118,24 @@
...this.sort
})
},
+ vagueSearch() {
+ this.fetch({
+ baseKey: this.queryParams.baseKey,
+ empStatus: this.queryParams.empStatus
+ })
+ },
+ resetSearch() {
+ this.queryParams = {
+ baseKey: '',
+ empStatus: []
+ }
+ this.search()
+ },
fetch(params = {}) {
var that = this
params.pageSize = this.pagination.size
params.pageNum = this.pagination.num
+ params.delFlag = 0
this.$get('hr/empBaseInfo/list', {
...params
}).then((r) => {
@@ -282,114 +144,36 @@
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
+ handleSelectionChange(selection) {
+ if (!this.multipleselect) {
+ if (selection.length > 1) {
+ this.$refs.multipleTable.clearSelection()
+ this.$refs.multipleTable.toggleRowSelection(selection.pop())
+ }
}
- 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
- }
+ this.multipleSelection = selection
},
sureChoose() {
this.$emit('selectedUser', this.multipleSelection)
+ this.$refs.multipleTable.clearSelection()
},
cancleChoose() {
this.$emit('cancleChooseUser')
+ this.$refs.multipleTable.clearSelection()
+ },
+ rowDblclick(row, column, event) {
+ this.$refs.multipleTable.toggleRowSelection(row, true)
+ this.sureChoose()
+ },
+ changeSort(val) {
+ this.sort.field = val.prop
+ this.sort.order = val.order
+ this.search()
}
}
}
</script>
<style lang="scss" scoped>
-
- .el-main {
- height: 600px;
- }
-</style>
-<style lang="scss">
- .el-aside {
- padding: 20px;
- background: #f3f5f8;
- height: 600px;
-
- .el-tree {
- height: 100%;
- }
- }
-
- #mainDiv{
- height: 350px;
- }
-
- #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;
}
--
Gitblit v1.8.0