272 lines
11 KiB
Vue
272 lines
11 KiB
Vue
<template>
|
|
<div class="layout-tabs-content-box">
|
|
<div class="pt-8 border-b-solid-lighter-1">
|
|
<div class="height-30 flex-row align-items-center justify-content-between mb-24">
|
|
<div class="f22 color-text-primary">筛选</div>
|
|
<div class="flex-row align-items-center color-text-regular cursor-pointer"
|
|
@click="handleToggleSearch">
|
|
<span class="f14 pr-8">{{showSearch?'展开':'收起'}}</span>
|
|
<i :class="['f14 el-icon-arrow-down transform-time-default', {
|
|
'rotate--180': showSearch
|
|
}]"></i>
|
|
</div>
|
|
</div>
|
|
<el-collapse-transition>
|
|
<div v-show="showSearch" class="">
|
|
<el-row :gutter="40">
|
|
<el-col :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-24">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">调解员</span>
|
|
<el-input v-model.trim="queryParam.mediatorName"
|
|
clearable placeholder="请输入内容"
|
|
@keydown.enter.native="handleSearch" maxlength="20">
|
|
</el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<div class="flex-row align-items-center height-40 mb-24">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">选择日期</span>
|
|
<span :class="['f14 pr-24 cursor-pointer', i === 0 ? 'pl-8' : '',
|
|
activeUsage === item ?
|
|
'color-primary' : 'color-text-regular']"
|
|
v-for="(item, i) in usageOption" :key="i"
|
|
@click="handleClickUsage(item)">{{item}}</span>
|
|
<el-date-picker
|
|
v-model="queryDate"
|
|
type="daterange"
|
|
clearable
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
@change="handleChangeDate">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="flex-row align-items-center justify-content-end">
|
|
<el-button @click="hanldeReset">重置</el-button>
|
|
<el-button type="primary" @click="handleSearch">筛选</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-collapse-transition>
|
|
</div>
|
|
|
|
<div class="pt-8">
|
|
<div class="height-56 flex-row align-items-center justify-content-between">
|
|
<div class="f22 color-text-primary">金融案件统计</div>
|
|
<el-button size="medium" @click="handleExport">导出数据</el-button>
|
|
</div>
|
|
<div>
|
|
<el-table :data="tableData" :height="`${contentHeight}`" @sort-change="sortchange">
|
|
<el-table-column
|
|
v-for="(item, i) in tableHead"
|
|
:key="i"
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
:show-overflow-tooltip="item.showOverflowTooltip"
|
|
:width="item.width"
|
|
:sortable="item.sortable"
|
|
:formatter="item.formatter"
|
|
></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="text-center pt-16" v-if="tableData.length>0">
|
|
<el-pagination
|
|
@size-change="getMediateDataList"
|
|
@current-change="getMediateDataList"
|
|
:current-page="queryParam.current"
|
|
:page-size="queryParam.size"
|
|
layout="total, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import statisticalAnalysisApi from "@/services/statisticalAnalysisApi";
|
|
export default {
|
|
data() {
|
|
return {
|
|
showSearch: true,
|
|
queryDate: '',
|
|
activeUsage: '近一月',
|
|
queryParam: {
|
|
mediatorName: '',//调解员名称
|
|
starTime:'',
|
|
endTime:'',
|
|
current:1,
|
|
size:10,
|
|
exportType:2
|
|
},
|
|
usageOption: ['近一月', '近半年', '近一年'],
|
|
tableHead: [
|
|
{
|
|
prop: "mediatorName",
|
|
label: "调解员",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatTable,
|
|
sortable:"mediatorName",
|
|
},
|
|
// {
|
|
// prop: "companyNo",
|
|
// label: "工号",
|
|
// showOverflowTooltip: true,
|
|
// formatter: this.formatTable,
|
|
|
|
// },
|
|
{
|
|
prop: "count",
|
|
label: "案件总量",
|
|
showOverflowTooltip: true,
|
|
formatter:this.formatTable,
|
|
sortable:"count",
|
|
},
|
|
{
|
|
prop: "caseIng",
|
|
label: "调解中",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatTable,
|
|
sortable:"caseIng",
|
|
},
|
|
{
|
|
prop: "caseSuccess",
|
|
label: "审计中",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatTable,
|
|
sortable:"caseSuccess",
|
|
},
|
|
{
|
|
prop: "caseEnd",
|
|
label: "已结案",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatTable,
|
|
sortable:"caseEnd",
|
|
},
|
|
|
|
],
|
|
tableData: []
|
|
}
|
|
},
|
|
created() {
|
|
this.setDateFast()
|
|
this.getMediateDataList(1)
|
|
},
|
|
computed:{
|
|
// 获取抽屉drawer的内容高度
|
|
contentHeight(){
|
|
let oh = document.documentElement.clientHeight;
|
|
if(this.showSearch){
|
|
return oh-56-48-240-32
|
|
}else{
|
|
return oh-56-48-175-32
|
|
}
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
getMediateDataList(val){
|
|
this.queryParam.current = val
|
|
statisticalAnalysisApi.financialCaseStatistics(this.queryParam).then(res => {
|
|
if (!res.code) {
|
|
this.tableData = res.records;
|
|
this.total = res.total;
|
|
}
|
|
})
|
|
},
|
|
handleToggleSearch() {
|
|
this.showSearch = !this.showSearch
|
|
},
|
|
// 取消
|
|
hanldeReset() {
|
|
for (let key in this.queryParam) {
|
|
this.queryParam[key] = ''
|
|
}
|
|
this.queryParam.current = 1
|
|
this.queryParam.size = 10
|
|
|
|
this.activeUsage = ''
|
|
this.queryDate = ''
|
|
|
|
this.setDateFast()
|
|
},
|
|
// 搜索
|
|
handleSearch() {
|
|
this.queryParam.current = 1
|
|
this.queryParam.size = 10
|
|
this.getMediateDataList(1)
|
|
},
|
|
handleClickUsage(item) {
|
|
this.activeUsage = item
|
|
this.setDateFast()
|
|
},
|
|
handleChangeDate() {
|
|
this.activeUsage = ''
|
|
if(this.queryDate === null) {
|
|
this.setDateFast()
|
|
}else {
|
|
this.queryParam.starTime = this.$util.getDayStart(this.queryDate[0])
|
|
this.queryParam.endTime = this.$util.getDayEnd(this.queryDate[1])
|
|
}
|
|
|
|
},
|
|
setDateFast() {
|
|
switch (this.activeUsage) {
|
|
case "近一月":
|
|
let rangeMonth = this.$util.getRecentMonths()
|
|
this.queryParam.starTime = rangeMonth.recentMonthStart
|
|
this.queryParam.endTime = rangeMonth.todayEnd
|
|
break
|
|
case "近半年":
|
|
let rangeMonths = this.$util.getRecentMonths(6)
|
|
this.queryParam.starTime = rangeMonths.recentMonthStart
|
|
this.queryParam.endTime = rangeMonths.todayEnd
|
|
break
|
|
case "近一年":
|
|
let rangeYear = this.$util.getRecentYears()
|
|
this.queryParam.starTime = rangeYear.recentYearStart
|
|
this.queryParam.endTime = rangeYear.todayEnd
|
|
break
|
|
default:
|
|
this.queryParam.starTime = ''
|
|
this.queryParam.endTime = ''
|
|
this.queryDate = ''
|
|
break
|
|
}
|
|
if(this.queryParam.starTime && this.queryParam.endTime) {
|
|
this.queryDate = [this.queryParam.starTime, this.queryParam.endTime]
|
|
}
|
|
},
|
|
// 导出
|
|
handleExport(){
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
statisticalAnalysisApi.exportFinancialCaseStatistics(this.queryParam).then(res => {
|
|
this.$util.downloadFileByBlob(res.data, '金融案件统计.xlsx')
|
|
})
|
|
},
|
|
formatTable(row, column, cellValue, index) {
|
|
return cellValue || "-";
|
|
},
|
|
sortchange(item)
|
|
{
|
|
this.queryParam.orderName = item.prop
|
|
if(item.order=='ascending'){this.queryParam.orderBy = 0}
|
|
else if(item.order=='descending'){this.queryParam.orderBy = 1}
|
|
else
|
|
{
|
|
delete this.queryParam.orderName
|
|
delete this.queryParam.orderBy
|
|
}
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
this.getMediateDataList(1)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|