348 lines
12 KiB
Vue
348 lines
12 KiB
Vue
<template>
|
||
<div id="main-content" class="main-content m20">
|
||
<!--头部-查询-->
|
||
<div class="content-header">
|
||
<searchHeader title="查询" />
|
||
<div class="body search-body">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-row>
|
||
<label class="label-name_1">选择日期：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式 -->
|
||
<el-date-picker
|
||
v-model="searchForm.searchDate"
|
||
size="mini"
|
||
value-format="yyyy-MM-dd"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
/>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div class="btn-box">
|
||
<el-button size="mini" type="primary" :loading="loading" @click="search">查询</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="margin-top: 10px">
|
||
<label class="label-name_1">业务状态：</label>
|
||
<el-radio-group v-model="searchForm.busstatus">
|
||
<el-radio :label="0">全部</el-radio>
|
||
<el-radio :label="1">完成审批</el-radio>
|
||
<el-radio :label="2">审核/审批中</el-radio>
|
||
</el-radio-group>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-body">
|
||
<!-- <table v-loading="loading" class="apply-table" wdith="100%">
|
||
<tr>
|
||
<th width="40%">业务类型</th>
|
||
<th>业务数量</th>
|
||
</tr>
|
||
<tr v-for= "(item,i) in cphStatistics" :key="i">
|
||
<th width="40%">{{ item.name }}</th>
|
||
<td>{{ item.num }}</td>
|
||
</tr>
|
||
</table> -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="cphStatistics"
|
||
show-summary :summary-method="getSummaries"
|
||
class="custom-summary-table"
|
||
:row-class-name="tableRowClassName"
|
||
cell-class-name="cell-class-name"
|
||
:header-cell-style="{'text-align':'center','background':'#5197FF',color:'#fff','fontWeight':'500','border-color':'#8CC3FB'}"
|
||
style="width:100%;border:1px solid #8CC3FB"
|
||
:cell-style="{'text-align':'center'}"
|
||
>
|
||
<el-table-column prop="orgunitname" label="单位" width="100px" fixed />
|
||
<el-table-column label="业务类型" width="200px">
|
||
<el-table-column label="经营异常名录" width="380px">
|
||
<el-table-column label-class-name="bgColor" prop="abnlrnum" label="列入" width="60px" />
|
||
<el-table-column label-class-name="bgColor" label="移出" width="260px">
|
||
<el-table-column label-class-name="bgColor" prop="abnycnum" label="小计" width="60px" />
|
||
<el-table-column label-class-name="bgColor" prop="abnycnumon" label="线上申请" width="100px" />
|
||
<el-table-column label-class-name="bgColor" prop="abnycnumoff" label="线下申请" width="100px" />
|
||
</el-table-column>
|
||
<el-table-column label-class-name="bgColor" prop="abnyynum" label="异议" width="60px" />
|
||
</el-table-column>
|
||
<el-table-column label="严重违法失信名单" width="380px">
|
||
<el-table-column label-class-name="bgColor" prop="leglrnum" label="列入" width="60px" />
|
||
<el-table-column label-class-name="bgColor" label="移出" width="260px">
|
||
<el-table-column label-class-name="bgColor" prop="legycnum" label="小计" width="60px" />
|
||
<el-table-column label-class-name="bgColor" prop="legycnumon" label="线上申请" width="100px" />
|
||
<el-table-column label-class-name="bgColor" prop="legycnumoff" label="线下申请" width="100px" />
|
||
</el-table-column>
|
||
<el-table-column label-class-name="bgColor" prop="legyynum" label="异议" width="60px" />
|
||
</el-table-column>
|
||
<el-table-column label="行政处罚信用修复" width="260px">
|
||
<el-table-column label-class-name="bgColor" prop="penxfnum" label="小计" width="60px" />
|
||
<el-table-column label-class-name="bgColor" prop="penxfnumon" label="线上申请" width="100px" />
|
||
<el-table-column label-class-name="bgColor" prop="penxfnumoff" label="线下申请" width="100px" />
|
||
</el-table-column>
|
||
<el-table-column prop="ualfknum" label="年报公示信息异议反馈" width="100px" />
|
||
<el-table-column prop="mytrnum" label="冒用他人身份信息" width="100px" />
|
||
<!-- <el-table-column prop="wtcznum" label="问题处置反馈" min-width="10%" />-->
|
||
<!-- <el-table-column prop="legycnum" label="严重违法信用修复" min-width="10%" />-->
|
||
<!-- <el-table-column prop="xyfxyynum" label="信用风险异议申请" min-width="10%" />-->
|
||
<!-- <el-table-column label="勘误">-->
|
||
<!-- <el-table-column prop="abnkwnum" label-class-name="bgColor" label="列异勘误" min-width="20%" />-->
|
||
<!-- <el-table-column prop="legkwnum" label-class-name="bgColor" label="列严勘误" min-width="20%" />-->
|
||
<!-- </el-table-column>-->
|
||
<el-table-column prop="pldxnum" label="批量吊销" width="100px" />
|
||
<!-- <el-table-column prop="cxnum" label="撤销" min-width="10%" />-->
|
||
<!-- <el-table-column prop="fynum" label="复议" min-width="10%" />-->
|
||
<!-- <el-table-column prop="susnum" label="诉讼" min-width="10%" />-->
|
||
<!-- <el-table-column label="联合惩戒">
|
||
<el-table-column prop="locknum" label-class-name="bgColor" label="锁定" />
|
||
<el-table-column prop="unlocknum" label-class-name="bgColor" label="解锁" />
|
||
</el-table-column> -->
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import searchHeader from '@/components/searchHeader'
|
||
import { queryCphStatistics } from '@/api/comprehensive'
|
||
export default {
|
||
components: { searchHeader },
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
searchForm: {
|
||
searchDate: '',
|
||
busstatus: 0
|
||
},
|
||
cphStatistics: [],
|
||
sumObject: { abnlrnum: 0, abnycnum: 0, abnycnumon: 0, abnycnumoff: 0, abnyynum: 0,
|
||
leglrnum: 0, legyynum: 0, legycnum: 0, legycnumon: 0, legycnumoff: 0,
|
||
ualfknum: 0, mytrnum: 0, pldxnum: 0}, // 合计数据
|
||
operatestatusList: [{
|
||
value: 'tsabnlist',
|
||
label: '经营异常管理'
|
||
}, {
|
||
value: 'entlock',
|
||
label: '联合惩戒'
|
||
}, {
|
||
value: 'eOtCase',
|
||
label: '行政处罚'
|
||
}, {
|
||
value: 'tsserillegallist',
|
||
label: '严重违法失信'
|
||
}, {
|
||
value: 'eSusnateOperreg',
|
||
label: '涉嫌冒用他人身份取得登记信息'
|
||
}, {
|
||
value: 'revokelist',
|
||
label: '批量吊销'
|
||
}]
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.search() //不做初始化查询
|
||
},
|
||
methods: {
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if (rowIndex % 2 === 1) {
|
||
return 'warning-row'
|
||
}
|
||
},
|
||
search() {
|
||
this.loading = true
|
||
queryCphStatistics(this.searchForm).then(res => {
|
||
if (res.code === 0) {
|
||
this.cphStatistics = res.data
|
||
// this.cphStatistics.forEach(each => {
|
||
// each.name = this.nameFormat(each.name)
|
||
// })
|
||
this.loading = false
|
||
// const hz = {
|
||
// abnlrnum: 0,
|
||
// abnycnum: 0,
|
||
// abnyynum: 0,
|
||
// leglrnum: 0,
|
||
// legyynum: 0,
|
||
// legycnum: 0,
|
||
// ualfknum: 0,
|
||
// mytrnum: 0,
|
||
// pldxnum: 0,
|
||
// locknum: 0,
|
||
// unlocknum: 0
|
||
// }
|
||
// hz.orgunitname = '汇总'
|
||
// this.cphStatistics.forEach(each => {
|
||
// hz.abnlrnum = hz.abnlrnum + each.abnlrnum
|
||
// hz.abnycnum = hz.abnycnum + each.abnycnum
|
||
// hz.abnyynum = hz.abnyynum + each.abnyynum
|
||
// hz.leglrnum = hz.leglrnum + each.leglrnum
|
||
// hz.legyynum = hz.legyynum + each.legyynum
|
||
// hz.legycnum = hz.legycnum + each.legycnum
|
||
// hz.ualfknum = hz.ualfknum + each.ualfknum
|
||
// hz.mytrnum = hz.mytrnum + each.mytrnum
|
||
// hz.pldxnum = hz.pldxnum + each.pldxnum
|
||
// hz.locknum = hz.locknum + each.locknum
|
||
// hz.unlocknum = hz.unlocknum + each.unlocknum
|
||
// })
|
||
// this.cphStatistics.push(hz)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
}).catch(_ => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
nameFormat(code) {
|
||
let name = ''
|
||
this.operatestatusList.forEach(each => {
|
||
if (each.value === code) {
|
||
name = each.label
|
||
}
|
||
})
|
||
return name
|
||
},
|
||
getSummaries(param) {
|
||
const { columns, data } = param;
|
||
const sums = [];
|
||
columns.forEach((column, index) => {
|
||
if (index === 0) {
|
||
sums[index] = "合计";
|
||
return;
|
||
}
|
||
const values = data.map(item => Number(item[column.property]));
|
||
let Subtotal = values.reduce((prev, curr) => (!isNaN(curr) ? prev + curr : prev), 0);
|
||
let allTotal = this.sumObject[column.property] ? this.sumObject[column.property] : "";
|
||
sums[index] = `${Subtotal}`; //`${Subtotal}\n${allTotal}`
|
||
});
|
||
return sums;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.main-content{
|
||
background: #fff;
|
||
padding: 10pt;
|
||
.content-header{
|
||
background: white;
|
||
.label-name_1 {
|
||
text-align: right;
|
||
display: inline-block;//转成行内快，才可定义宽度
|
||
width: 100px;
|
||
font-size: $table-content-font-size;
|
||
}
|
||
.search-input-box_1{
|
||
display: inline-block;
|
||
width: calc(100% - 110px);
|
||
}
|
||
.label-name_2 {
|
||
text-align: right;
|
||
display: inline-block;//转成行内快，才可定义宽度
|
||
width: 110px;
|
||
font-size: $table-content-font-size;
|
||
}
|
||
.search-input-box_2{
|
||
display: inline-block;
|
||
width: calc(100% - 120px);
|
||
}
|
||
.label-name_3 {
|
||
text-align: right;
|
||
display: inline-block;//转成行内快，才可定义宽度
|
||
width: 140px;
|
||
font-size: $font-size-content-text;
|
||
}
|
||
.custom{
|
||
width: calc(100% - 150px);
|
||
}
|
||
.search-input{
|
||
cursor: pointer;
|
||
}
|
||
.body{
|
||
padding: 20px 0;
|
||
border-top:none;
|
||
margin-bottom: 40PX;
|
||
}
|
||
}
|
||
.content-body{
|
||
background:white
|
||
}
|
||
.header{
|
||
.title{
|
||
font-weight: 600;
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
.page-box{margin:10PX;text-align:right}
|
||
.mb10{
|
||
margin-bottom: 10px;
|
||
}
|
||
.btn-box{
|
||
display: inline-block;
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
.apply-table{
|
||
width: 100%;
|
||
/*margin: 0 auto;*/
|
||
border-collapse: collapse;
|
||
padding:15px;
|
||
font-size:18px;
|
||
table{
|
||
border-top: 1px solid $color-border;
|
||
border-left: 1px solid $color-border;
|
||
}
|
||
tr{
|
||
width:100%
|
||
}
|
||
th,td{
|
||
border-top: 1px solid $color-border;
|
||
border-left: 1px solid $color-border;
|
||
border-right: 1px solid $color-border;
|
||
border-bottom: 1px solid $color-border;
|
||
padding:15px
|
||
}
|
||
th{
|
||
color: #5e5e5e;
|
||
font-weight: normal;
|
||
background: $color-form-label
|
||
}
|
||
td{
|
||
text-align: center;
|
||
}
|
||
}
|
||
/deep/.bgColor{
|
||
// background: #7cb1ff!important;
|
||
}
|
||
|
||
/deep/.cell-class-name{
|
||
border-color: #8CC3FB!important;
|
||
}
|
||
|
||
/* 穿透 scoped 样式（Element Plus/UI 合计行类名） */
|
||
.custom-summary-table :deep(.el-table__footer-wrapper) {
|
||
/* 合计行整体样式 */
|
||
background-color: #f8f9fa; /* 背景色 */
|
||
}
|
||
|
||
.custom-summary-table :deep(.el-table__footer-wrapper td) {
|
||
/* 合计行单元格样式 */
|
||
color: #000000; /* 文字颜色 */
|
||
// font-weight: bold; /* 文字加粗 */
|
||
font-size: 14px; /* 字体大小 */
|
||
border-color: #8CC3FB;
|
||
// border-top: 2px solid #409eff; /* 上边框 */
|
||
height: 50px; /* 行高 */
|
||
text-align: center; /* 文字居中 */
|
||
}
|
||
|
||
/* 单独修改合计行第一列样式 */
|
||
.custom-summary-table :deep(.el-table__footer-wrapper td:first-child) {
|
||
color: #000000; /* 文字颜色 */
|
||
font-size: 20px; /* 字体大小 */
|
||
}
|
||
</style>
|