<template> <div> <!-- 搜索 --> <div class="top-search flex"> <el-select v-model="queryParam.personPost" filterable placeholder="请选择职务" size="mini" style="width: 25%" clearable > <el-option v-for="item in linePatrolPost" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" > </el-option> </el-select> <el-select v-model="queryParam.groupNum" filterable placeholder="请选择组号" size="mini" style="width: 25%" clearable > <el-option v-for="item in linePatrolGroup" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" > </el-option> </el-select> <el-input v-model="queryParam.personName" size="mini" placeholder="请输入姓名" clearable style="width: 30%" > </el-input> <div> <el-button @click="searchTable" size="mini">搜索</el-button> </div> </div> <!-- 列表 --> <div class="left-middle-table"> <el-table v-loading="loading" :data="nameList" @select="select" @select-all="all" ref="multipleTable" > <el-table-column v-if='!disabled' type="selection" /> <el-table-column label="姓名" align="center" prop="personName" /> <el-table-column label="职务" align="center" prop="personPost" :formatter="postFormatter"/> <el-table-column label="组号" align="center" prop="groupNum" :formatter="groupFormatter"/> </el-table> </div> </div> </template> <script> import { linePatrolPersonList } from "@/api/regulation/person"; export default { name: "people-table", props: { selectNameList: { type: Array, }, disabled: { type: Boolean, }, }, data(){ return{ nameList: [], linePatrolPost: [], linePatrolGroup: [], personName: "", personPost: "", loading: false, queryParam:{ personPost: null, personName: null, groupNum: null } } }, created(){ this.getLinePatrolPost(); this.getLinePatrolGroup(); this.getPersonInfo(); }, methods:{ getPersonInfo(){ this.loading = true; linePatrolPersonList(this.queryParam).then(res =>{ this.loading = false; if(res.code == 200 && res.data && res.data.length > 0){ this.nameList = res.data.filter(item =>(item.personPost != '0' && item.personPost != '1')); this.$nextTick((item) => { this.selectNameList.forEach((item) => { this.toggleSelection(item.personId, true); }); }); } }) }, select(all,row){ this.$emit("selectOne", all, row); }, all(all){ let allSelect = false; if (all.length == 0 || (all.length == 1 && [0] == undefined)) { allSelect = false; } else if (all.length > 1) { allSelect = true; } this.$emit("selectAll", this.nameList, allSelect); }, getLinePatrolPost(){ this.getDicts("t_line_patrol_post").then(response => { this.linePatrolPost = response.data.filter(item =>(item.dictCode != 112 && item.dictCode != 113)); }); }, getLinePatrolGroup(){ this.getDicts("t_line_patrol_group").then(response => { this.linePatrolGroup = response.data; }); }, groupFormatter(row){ return this.selectDictLabel(this.linePatrolGroup, row.groupNum); }, postFormatter(row){ return this.selectDictLabel(this.linePatrolPost, row.personPost); }, searchTable(){ this.getPersonInfo(); }, toggleSelection(personId, SeclctFlag = false) { const item = this.nameList.find((item) => { return item.personId == personId; }); this.$refs.multipleTable.toggleRowSelection(item, SeclctFlag); }, } } </script> <style scoped lang="scss"> .top-search { margin-bottom: 12px; justify-content: space-between; } .left-middle-table { flex: 1; // background: red; height: 331px; overflow-y: scroll; &::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 4px; /* 设置滚动条背景色 */ //background: black; } //滚动条轨道 &::-webkit-scrollbar-track { background-color:transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } //滚动条滑块 &::-webkit-scrollbar-thumb { background-color: rgb(147,147,153,0.5); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } } </style>