|
<template>
|
<div class="demerit-record-table">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
|
<el-form-item label="区域" prop="belongUnit">
|
<el-select v-model="queryParams.deptId" @change="handleQuery" clearable placeholder="运维考核单位">
|
<el-option v-for="(item,index) in deptList" :key="index" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="搜索类型:">
|
<el-radio-group v-model="queryParams.searchType" size="small">
|
<el-radio label="day">按日</el-radio>
|
<el-radio label="month">按月</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="选择日期:" v-show="queryParams.searchType === 'day'">
|
<el-date-picker
|
v-model="queryParams.dayDate"
|
type="date"
|
placeholder="选择日期"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
size="small"
|
></el-date-picker>
|
</el-form-item>
|
|
<el-form-item label="选择月份:" v-show="queryParams.searchType === 'month'">
|
<el-date-picker
|
v-model="queryParams.monthDate"
|
type="month"
|
placeholder="选择月份"
|
format="yyyy-MM"
|
value-format="yyyy-MM"
|
size="small"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="分建类型">
|
<el-select v-model="queryParams.constructionType" @change="handleQuery" clearable placeholder="分建类型">
|
<el-option v-for="(item,index) in constructionTypeList" :key="index" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="tableData"
|
border
|
stripe
|
style="width: 100%"
|
:header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
|
>
|
<el-table-column
|
prop="deptName"
|
label="区域名"
|
align="center"
|
min-width="150"
|
></el-table-column>
|
|
<el-table-column
|
prop="constructionType"
|
label="分建设类型"
|
align="center"
|
min-width="180"
|
>
|
<template slot-scope="scope">
|
{{ formatConstructionType(scope.row.constructionType) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="demerit"
|
label="扣分"
|
align="center"
|
min-width="120"
|
>
|
<template slot-scope="scope">
|
{{ formatDemerit(scope.row.demerit) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="createTime"
|
label="创建日期"
|
align="center"
|
min-width="200"
|
>
|
<template slot-scope="scope">
|
<!-- createTime格式为 "yyyy-MM-dd HH:mm:ss"，通过split截取日期部分 -->
|
{{ scope.row.createTime ? scope.row.createTime.split(' ')[0] : '-' }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getPage"
|
/>
|
</div>
|
</template>
|
<script>
|
import { getPage
|
} from "@/api/platform/demeritRecord"
|
export default {
|
name: 'DemeritRecordTable',
|
data() {
|
return {
|
deptList: [
|
{ value: 201, label: '自流井区' }, // ZLJQ最后一个属性201，第一个属性"自流井区"
|
{ value: 202, label: '贡井区' }, // GJQ最后一个属性202，第一个属性"贡井区"
|
{ value: 102, label: '大安区' }, // DAQ最后一个属性102，第一个属性"大安区"
|
{ value: 211, label: '沿滩区' }, // YTQ最后一个属性211，第一个属性"沿滩区"
|
{ value: 203, label: '荣县' }, // RX最后一个属性203，第一个属性"荣县"
|
{ value: 101, label: '富顺县' }, // FSX最后一个属性101，第一个属性"富顺县"
|
{ value: 210, label: '高新区' } // GXQ最后一个属性210，第一个属性"高新区"
|
],
|
queryParams:{
|
searchType: 'day',
|
dayDate: null,
|
monthDate:null,
|
deptId: '',
|
constructionType: '',
|
pageNum: 1,
|
pageSize: 20
|
},
|
constructionTypeList:[
|
{ label:'一二期',value:'PHASE_ONE_TWO' },
|
{ label:'三期',value:'PHASE_THREE' },
|
{ label:'四期',value:'PHASE_FOURTH' }
|
],
|
// 表格数据，实际项目中从接口获取
|
total:0,
|
tableData: [
|
],
|
// 建设类型映射，用于将英文标识转换为中文显示
|
constructionTypeMap: {
|
'PHASE_ONE_TWO': '一二期',
|
'PHASE_THREE': '三期',
|
'PHASE_FOURTH': '四期'
|
}
|
};
|
},
|
mounted() {
|
// 关键修复：移除原生radio的aria-hidden属性
|
this.$nextTick(() => {
|
const radioInputs = document.querySelectorAll('.el-radio__original');
|
radioInputs.forEach(input => {
|
input.removeAttribute('aria-hidden'); // 让辅助技术能识别焦点
|
});
|
});
|
this.init();
|
|
},
|
methods: {
|
init(){
|
// 初始化查询参数
|
this.getPage();
|
|
},
|
getPage(){
|
if (this.queryParams.searchType === "day"){
|
this.queryParams.monthDate = null;
|
}else{
|
this.queryParams.dayDate = null;
|
}
|
let from = {...this.queryParams}
|
|
getPage(from).then(res =>{
|
if (res.code === 200){
|
this.tableData = res.data;
|
this.total = res.total
|
}
|
})
|
},
|
handleQuery(){
|
this.queryParams.pageNum = 1;
|
this.getPage()
|
},
|
resetQuery(){
|
this.queryParams = {
|
searchType: 'day',
|
dayDate: null,
|
monthDate:null,
|
deptId: '',
|
constructionType: '',
|
pageNum: 1,
|
pageSize: 20
|
};
|
this.getPage()
|
},
|
// 格式化建设类型显示
|
formatConstructionType(type) {
|
return this.constructionTypeMap[type] || type;
|
},
|
// 格式化扣分显示，保留一位小数
|
formatDemerit(value) {
|
return value.toFixed(1);
|
}
|
}
|
};
|
</script>
|
<style>
|
.demerit-record-table {
|
padding: 20px;
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
}
|
</style>
|
