<template lang='pug'> el-container(style="padding:0px;" :style="{height:currentHeight-65+'px'}") el-header(style='height:42px;line-height:42px;border: 1px solid rgba(196, 196, 196, 1);background: #f4f4f4;') span.title-bold.title-left-color() 应急团队列表 el-popover( placement="bottom" width="150") el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)') 筛选 el-checkbox-group( v-model="checkList") el-col( :span="24") el-checkbox( v-for="(item,index) in tableHeader" :label="item" :key="index" ) span {{item.label}} el-main.box_main el-card() div.tableCard() el-form( :inline="true" :model="dataForm" size="mini") el-form-item(label="姓名:") el-input( class="inputWidth" v-model="dataForm.name" placeholder="姓名" clearable) el-form-item( label="证件号码:") el-input( class="inputWidth" v-model="dataForm.cardNumber" placeholder="证件号码" clearable) el-form-item( label="移动电话:") el-input( class="inputWidth" v-model="dataForm.mobile" placeholder="移动电话" clearable) el-form-item( label="政治面貌:") el-select( class="inputWidth" v-model="dataForm.politicCountenance" placeholder="请选择" clearable) el-option(v-for="(item, index) in politicCountenances" :key="index" :label="item.name" :value="item.id") el-form-item(label="人员类型") el-select( class="inputWidth" v-model="dataForm.personnelType" placeholder="请选择" clearable) el-option(label="应急专家" value=1) el-option(label="应急人员" value=2) //el-form-item( label="人员专长:") el-select( class="inputWidth" multiple v-model="dataForm.types" placeholder="请选择" clearable) el-option(v-for="(item, index) in types" :key="index" :label="item.name" :value="item.id") el-form-item( label="民族:") el-select( class="inputWidth" v-model="dataForm.nation" placeholder="请选择" clearable) el-option(v-for="(item, index) in nations" :key="index" :label="item.name" :value="item.id") el-button(@click="getDataList()" size="mini" icon="el-icon-search" type="primary") 查询 el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置 el-button(v-if="isAuth('em:proficient:save')" type="primary" size="mini" icon='el-icon-plus' @click="addOrUpdateHandle()" style="float:right;") 新增 drag-table( :data="dataList" :header="checkList" :isToLine='false' :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="3" :isShowOperate="true") el-table-column(slot="fixed" fixed prop="" label="序号" width='80' header-align="center" align="center") template( slot-scope="scope") span {{scope.$index+(pageIndex - 1) * pageSize + 1}} template(slot='gender' slot-scope='scope') font(v-if='scope.row.gender===0') 女 font(v-if='scope.row.gender===1') 男 template(slot='politic_countenance' slot-scope="scope") font( v-if="scope.row.politic_countenance === '1'") 共青团员 font( v-if="scope.row.politic_countenance === '2'") 预备党员 font( v-if="scope.row.politic_countenance === '3'") 党员 font( v-if="scope.row.politic_countenance === '4'") 群众 font( v-if="scope.row.politic_countenance === '5'") 其它 template(slot='personnel_type' slot-scope='scope') font(v-if='scope.row.personnel_type === 1') 应急专家 font(v-if='scope.row.personnel_type === 2') 应急人员 template( slot='typesName' slot-scope="scope") font(:title="scope.row.typesName") {{scope.row.typesName}} template.operation( slot-scope="scope") //- el-button( type="text" size="mini" v-if="isAuth('em:proficient:info')" @click="queryHandle(scope.row)") 详情 el-button( type="text" size="mini" @click="queryHandle(scope.row)") 详情 el-button( type="text" size="mini" v-if="isAuth('em:proficient:update') && scope.row.byx1 != '1'" @click="addOrUpdateHandle(scope.row.id)") 编辑 el-button( type="text" size="mini" v-if="isAuth('em:proficient:delete') && scope.row.byx1 != '1'" @click="deleteHandle(scope.row.id)") 删除 //- el-table(:data="dataList" @sort-change='sortChange' v-loading="dataListLoading" :stripe="true" @selection-change="selectionChangeHandle" :header-cell-style="{background:'#EEF8FF',color:'#333333'}") el-table-column( type='index', header-align='center', align='center', label='序号') template(scope="scope") span {{scope.$index+(pageIndex - 1) * pageSize + 1}} el-table-column( prop="name" header-align="center" align="center" label="姓名" sortable='custom') el-table-column( prop="gender" header-align="center" align="center" label="性别" sortable='custom') template(slot-scope='scope') font(v-if='scope.row.gender===0') 女 font(v-if='scope.row.gender===1') 男 el-table-column( prop="birthday" header-align="center" align="center" label="出生日期" sortable='custom') el-table-column( prop="politic_countenance" header-align="center" align="center" label="政治面貌" sortable='custom') template( slot-scope="scope") font( v-if="scope.row.politic_countenance === '1'") 共青团员 font( v-if="scope.row.politic_countenance === '2'") 预备党员 font( v-if="scope.row.politic_countenance === '3'") 党员 font( v-if="scope.row.politic_countenance === '4'") 群众 font( v-if="scope.row.politic_countenance === '5'") 其它 el-table-column( prop="nationName" header-align="center" align="center" label="民族" sortable='custom') el-table-column( prop="card_number" header-align="center" align="center" label="证件号码" sortable='custom') el-table-column( prop="mobile" header-align="center" align="center" label="移动电话" sortable='custom') el-table-column( prop="typesName" header-align="center" align="center" label="人员专长" ) template(slot-scope='scope') span(:title='scope.row.typesName') {{scope.row.typesName |ellipsis}} el-table-column( prop="personnel_type" header-align="center" align="center" label="人员类型" sortable='custom') template(slot-scope='scope') font(v-if='scope.row.personnel_type === 1') 应急专家 font(v-if='scope.row.personnel_type === 2') 应急人员 //el-table-column( prop="skill" header-align="center" align="center" label="人员说明" sortable='custom') template(slot-scope='scope') span(:title='scope.row.skill') {{scope.row.skill |ellipsis}} el-table-column( prop header-align="center" align="center" label="操作" width=180) template.operation( slot-scope="scope") el-button( type="text" size="mini" v-if="isAuth('em:proficient:info')" @click="queryHandle(scope.row)") 详情 el-button( type="text" size="mini" v-if="isAuth('em:proficient:update')" @click="addOrUpdateHandle(scope.row.id)") 编辑 el-button( type="text" size="mini" v-if="isAuth('em:proficient:delete')" @click="deleteHandle(scope.row.id)") 删除 el-footer.box_footer el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper") //- 弹窗, 新增 / 修改 add-or-update(v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshdatalist="getDataList") query-detail(v-if="queryDetailVisible" ref="queryView" @refreshdatalist="getDataList") //- config-role(v-if="configRoleVisible" ref="configView" @refreshdatalist="getDataList") </template> <script> import AddOrUpdate from './proficient-add-or-update' import queryDetail from './query-detail' import dragTable from '../../components/tab' // import configRole from './config-role' export default { name: 'em-person', components: { AddOrUpdate, queryDetail, dragTable }, filters: { ellipsis (value) { if (!value) return '' if (value.length > 9) { return value.slice(0, 9) + '...' } return value } }, computed: { currentHeight() { return this.$store.state.d2admin.currentHeight.height } }, data () { return { data: [], dataForm: { types: [] }, dataList: [], nations: [], types: [ { id: '1', name: '医学救援' }, { id: '2', name: '消防' }, { id: '3', name: '抢险' }, { id: '4', name: '防爆' }, { id: '5', name: '谈判' }, { id: '6', name: '人道救援' } ], politicCountenances: [ { id: '1', name: '共青团员' }, { id: '2', name: '预备党员' }, { id: '3', name: '党员' }, { id: '4', name: '群众' }, { id: '5', name: '其它' } ], pageIndex: 1, pageSize: 10, totalPage: 0, sort: '', order: '', dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false, queryDetailVisible: false, configRoleVisible: false, checkList: [], //筛选数据 tableHeader: [ { label: '姓名', prop: 'name' }, { label: '性别', prop: 'gender', slot: true }, { label: '出生日期', prop: 'birthday' }, { label: '政治面貌', prop: 'politic_countenance', slot: true }, { label: '民族', prop: 'nationName' }, { label: '证件号码', prop: 'card_number' }, { label: '移动电话', prop: 'mobile' }, { label: '人员专长', prop: 'typesName', slot: true }, { label: '人员类型', prop: 'personnel_type', slot: true } ], tableOption: { border: false, //是否边框 maxHeight: 500 //高度 } } }, watch: { totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样,这样才能当你data中的属性发生变化时,触发这个函数 let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数 //总页数小于当前页数则重新加载列表数据 if (pages < this.pageIndex) { this.pageIndex = pages || 1 this.getDataList()//获取表格数据的方法 } } }, created () { this.checkList = [...this.tableHeader] this.getDataList() this.getNation() // this.getAllTypes() }, methods: { //重置 reSet() { this.pageIndex = 1 this.dataForm = {} this.getDataList() }, //获取民族信息 getNation () { this.$http({ url: this.$http.adornUrl('/emPerson/getAllNation'), method: 'get' }).then(data => { // console.log("data", data) if (data && data.code === 0) { this.nations = data.result } }) }, //获取人员专长 getAllTypes () { this.$http({ url: this.$http.adornUrl('/emPerson/getAllTypes'), method: 'get', params: { stationId: localStorage.getItem('stationId') } }).then(data => { // console.log('data', data) if (data && data.code === 0) { this.types = data.result } }) }, //获取政治面貌 // getAllPoliticCountenance () { // this.$http({ // url: this.$http.adornUrl('/emPerson/getAllPoliticCountenance'), // method: 'get' // }).then(data => { // // console.log("data", data); // if (data && data.code === 0) { // this.politicCountenance = data.result // } // }) // }, //查看当前用户角色信息 queryHandle (id) { this.queryDetailVisible = true this.$nextTick(() => { this.$refs.queryView.init(id) }) }, configHandle (row) { // console.log("row", row) this.configRoleVisible = true this.$nextTick(() => { this.$refs.configView.init(row) }) }, sortChange (column) { if (column.order === 'descending') { this.order = 'desc' } else { this.order = 'asc' } if (column.column.columnKey) { this.sort = column.column.columnKey } else { this.sort = column.prop } this.getDataList() }, // 获取数据列表 getDataList (sort, order) { this.dataListLoading = true // console.log(this.dataForm.types) this.$http({ url: this.$http.adornUrl('/emProficient/getProficientList'), method: 'post', data: { name: this.dataForm.name, card_number: this.dataForm.cardNumber, mobile: this.dataForm.mobile, politic_countenance: this.dataForm.politicCountenance, types: this.dataForm.types, nation: this.dataForm.nation, personnelType: this.dataForm.personnelType, page: this.pageIndex, size: this.pageSize, sort: sort, order: order, stationId: localStorage.getItem('stationId') } }).then(data => { console.log('data', data) if (data && data.code === 0) { this.dataList = data.result.records this.totalPage = data.result.total this.dataList.forEach(e => { if (e.types) { let arr = e.types.split(',') let typesNameArr = [] this.types.forEach(type => { if (arr.includes(type.id)) { typesNameArr.push(type.name) } }) e.typesName = typesNameArr.join(',') } else { e.typesName = '' } }) } else { this.dataList = [] this.totalPage = 0 } this.dataListLoading = false }) }, // 每页数 sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, // 当前页 currentChangeHandle (val) { this.pageIndex = val this.getDataList() }, // 多选 selectionChangeHandle (val) { this.dataListSelections = val }, // 新增 / 修改 addOrUpdateHandle (id) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id) }) }, // 删除 deleteHandle (id) { // var userIds = id ? [id] : this.dataListSelections.map(item => { // return item.userId // }); // console.log("id", id) this.$confirm(`确认删除该应急团队?`, '删除应急团队', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', closeOnClickModal: false }) .then(() => { this.$http({ url: this.$http.adornUrl('/emProficient/deleteProficient'), method: 'post', data: id }).then(data => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.getDataList() } }) } else { this.$message.error(data.msg) } }) }) .catch(() => { }) } } } </script> <style lang='scss' scoped> .inputWidth { width: 180px; } </style>