From f1c5f3c0b8e58a475b8a3c05e51f94043de43a85 Mon Sep 17 00:00:00 2001
From: yijiusmile <253281376@qq.com>
Date: 星期一, 01 二月 2021 21:38:12 +0800
Subject: [PATCH] 选择员工增加分页，信息录入-失业金领取增加选择员工功能
---
src/views/user/selectuser.vue | 235 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 131 insertions(+), 104 deletions(-)
diff --git a/src/views/user/selectuser.vue b/src/views/user/selectuser.vue
index 7bcfa17..c186315 100644
--- a/src/views/user/selectuser.vue
+++ b/src/views/user/selectuser.vue
@@ -163,21 +163,57 @@
</el-header>
<el-container>
<el-aside width="400px">
- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
+ <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="tableData"
- style="width: 100%;height: 90%;"
+ <el-table
+ ref="multipleTable"
+ :data="list"
+ style="width: 100%;height: 80%;"
row-key="prop1"
- @selection-change="handleSelectionChange"
+ @selection-change="handleSelectionChange"
>
<el-table-column type="selection" :reserve-selection="true" width="55" />
- <el-table-column prop="prop0" label="序号" />
- <el-table-column prop="prop1" label="员工编号" />
- <el-table-column prop="prop2" label="姓名" />
- </el-table>
+ <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>
@@ -185,102 +221,96 @@
</el-container>
</div>
</template>
-<script>
-export default {
+<script>
+// 引用翻页组件
+import Pagination from '@/components/Pagination'
+export default {
+ components: { Pagination },
data() {
return {
- headerHeight: '70px',
- advancedQueryShow: false,
- dialogTableVisible: false,
- multipleSelection: [],
- tableData: [{
- 'prop0': '1',
- 'prop1': '2100452312',
- 'prop2': '赵建国',
- 'prop3': '男',
- 'prop4': '510304197402225813',
- 'prop5': '10',
- 'prop6': '汉族',
- 'prop7': '170',
- 'prop8': '46',
- 'prop9': '党员',
- 'prop10': '大专',
- 'prop11': '广东省番禺市',
- 'prop12': '',
- 'prop13': '',
- 'prop14': '已移交',
- 'prop15': '在职',
- 'prop16': '133023187889'
- }, {
- 'prop0': '2',
- 'prop1': '2101620946',
- 'prop2': '罗启艳',
- 'prop3': '女',
- 'prop4': '41272619740120543X',
- 'prop5': '10',
- 'prop6': '汉族',
- 'prop7': '175',
- 'prop8': '46',
- 'prop9': '团员',
- 'prop10': '高中',
- 'prop11': '广东省番禺市',
- 'prop12': '',
- 'prop13': '',
- 'prop14': '已移交',
- 'prop15': '在职',
- 'prop16': '189135789889'
- }],
- data: [{
- label: '一级 1',
- children: [{
- label: '二级 1-1',
- children: [{
- label: '三级 1-1-1'
- }]
- }]
+ headerHeight: '70px',
+ deptTree: [],
+ advancedQueryShow: false,
+ selection: [],
+ multipleSelection: [],
+ total: 0, // 总数量
+ queryParams: {}, // 查询参数
+ sort: {}, // 排序
+ pagination: { // 分页参数
+ size: 5,
+ num: 1
},
- {
- label: '一级 2',
- children: [{
- label: '二级 2-1',
- children: [{
- label: '三级 2-1-1'
- }]
- },
- {
- label: '二级 2-2',
- children: [{
- label: '三级 2-2-1'
- }]
- }
- ]
- },
- {
- label: '一级 3',
- children: [{
- label: '二级 3-1',
- children: [{
- label: '三级 3-1-1'
- }]
- },
- {
- label: '二级 3-2',
- children: [{
- label: '三级 3-2-1'
- }]
- }
- ]
- }
- ],
+ list: [], // 给table显示的数据
defaultProps: {
children: 'children',
label: 'label'
}
}
+ },
+ mounted() {
+ this.initDeptTree()
+ // 初始加载
+ this.fetch()
},
- methods: {
- handleNodeClick(data) {
- console.log(data)
+ 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
@@ -294,14 +324,11 @@
this.advancedQueryShow = true
}
},
- showEmpInfo() {
- this.dialogTableVisible = true
- },
sureChoose() {
this.$emit('selectedUser', this.multipleSelection)
- },
- cancleChoose() {
- this.$emit('cancleChooseUser')
+ },
+ cancleChoose() {
+ this.$emit('cancleChooseUser')
}
}
}
@@ -375,4 +402,4 @@
.del_button {
color: #D9001B;
}
-</style>
+</style>
--
Gitblit v1.8.0