zhzf/client/src/views/dtsjygl/zfjcqktj.vue

239 lines
8.8 KiB
Vue

<template>
<browser :component-loading="componentLoading"
ref="broTable"
:api-config="apiConfig"
:table-config="tableConfig"
:permissions="permissions"
:dialog-config="dialogConfig"
:custom-query="true"
@custom-query="handleQuery"
:actions="actions"
@update:dialog-config="dialogConfig = $event">
<template #queryPanel>
<el-form label-width="120px" :model="queryParams">
<el-row class="query-condition">
<el-col :span="3">
<el-radio-group v-model="queryParams.period" @change="changePeriod">
<el-radio label="month">月度</el-radio>
<el-radio label="quarter">季度</el-radio>
</el-radio-group>
</el-col>
<el-col :span="8" v-if="queryParams.period==='month'">
<el-form-item label="月度" prop="month">
<el-date-picker
v-model="queryParams.Yd"
type="month" value-format="YYYY-MM-DD"
placeholder="选择月">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" v-if="queryParams.period==='quarter'">
<el-form-item label="季度" prop="quarter">
<el-select v-model="queryParams.Jd" placeholder="请选择">
<el-option label="第一季度" :value="1">第一季度</el-option>
<el-option label="第二季度" :value="2">第二季度</el-option>
<el-option label="第三季度" :value="3">第三季度</el-option>
<el-option label="第四季度" :value="4">第四季度</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<el-table-column header-align="center" align="center" prop="agencyName" label="属地" min-width="90"/>
<el-table-column header-align="center" align="center" prop="agency_name" label="执法单位" min-width="250"/>
<el-table-column header-align="center" align="center" prop="jcqysl" label="检查数量" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="jccs" label="检查次数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="hylb" label="行业类别" min-width="200"/>
<el-table-column header-align="center" align="center" prop="" label="查出隐患" min-width="120">
<el-table-column header-align="center" align="center" prop="yhzs" label="隐患总数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="zdyhs" label="重大隐患" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="ybyhs" label="一般隐患" min-width="120"
class-name="can-click"/>
</el-table-column>
<el-table-column header-align="center" align="center" prop="" label="执法文书使用" min-width="120">
<el-table-column header-align="center" align="center" prop="wszs" label="总数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="xcclcss" label="现场处理措施" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="zlxqzgs" label="责令限期整改" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="zgfcyjs" label="整改复查意见书" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="qtwss" label="其他文书" min-width="120"
class-name="can-click"/>
</el-table-column>
<template #dialogContent="{ dialogConfig: dc }">
<el-dialog :open="dc.show" :title="dc.title" :type="dc.type" v-if="dc.show" :show-footer="false"
@update:open="dc.show = false">
<Zfjcqysldetail :dialog-data="dc.data" tag="jcqys"/>
</el-dialog>
</template>
<template #dialog>
<el-dialog :open="dialogConfig1.show" :title="dialogConfig1.title" type="max" v-if="dialogConfig1.show"
:show-footer="false" @update:open="dialogConfig1.show = false">
<zfjccssldetail tag="jccs" :dialog-data="dialogConfig1.data"/>
</el-dialog>
</template>
<template>
<el-dialog :open="dialogConfig2.show" type="max" :title="dialogConfig2.title" v-if="dialogConfig2.show"
:show-footer="false" @update:open="dialogConfig2.show = false">
<zfjcqkdetail :dialog-data="dialogConfig2.data"/>
</el-dialog>
</template>
</browser>
</template>
<script setup>
import {reactive, toRefs, getCurrentInstance, watch, computed, ref} from 'vue'
import Browser from '@/components/Browser.vue'
import {useUserStore} from '@/stores/modules/user'
import statisticsApi from '@/api/lawenforcement/Statistics.js'
import Zfjcqysldetail from "@pages/dtsjygl/zfjcqysldetail.vue"
import moment from 'moment'
import ElDialog from "@/components/ElDialog/index.vue";
import zfjccssldetail from "@pages/dtsjygl/zfjccssldetail.vue";
import zfjcqkdetail from "@pages/dtsjygl/zfjcqkdetail.vue";
const userStore = useUserStore()
const state = reactive({
componentLoading: false,
permissions: {
query: true,
add: false,
modify: false,
detail: false,
delete: false,
importFile: false,
exportFile: true,
exportSelectFile: false,
downloadTemp: false,
},
tableConfig: {
tableId: 'zfjcqktjTableId',
tableLoading: false,
usePage: false,
multipleSelect: false,
hasControlColumn: false,
controlWidth: '150',
hasSummary: true,
cellClick: caseEventClick
},
apiConfig: {
tableLoading: false,
api: statisticsApi,
modelId: 'enterpriseId',
},
dialogConfig: {
show: false,
mode: 'detail',
loading: false,
data: {},
actions: {},
},
dialogConfig1: {
show: false,
mode: 'detail',
loading: false,
data: {},
actions: {},
},
dialogConfig2: {
show: false,
mode: 'detail',
loading: false,
data: {},
actions: {},
},
actions: {
query: handleQuery,
exportData: handleExport
},
queryParams: {
period: 'month',
Yd: moment().startOf('month').format('YYYY-MM-DD')
}
})
function changePeriod(val) {
if (val === 'quarter')
getCurrentQuarter()
}
function getCurrentQuarter() {
const now = new Date()
const quarter = Math.floor(now.getMonth() / 3) + 1;
queryParams.value.Jd = queryParams.value.Jd === undefined ? quarter : queryParams.value.Jd
}
function handleQuery() {
tableConfig.value.tableLoading = true
apiConfig.value.api.statisticEnforceCheckForm(queryParams.value).then(res => {
if (res.success) {
tableConfig.value.tableData = res
tableConfig.value.tableLoading = false
}
})
}
const {
componentLoading,
queryParams,
permissions,
tableConfig,
apiConfig,
dialogConfig,
dialogConfig1,
dialogConfig2,
actions
} = toRefs(state)
const broTable = ref(null)
function handleExport() {
broTable.value.busiTable.exportExcelFileForCurrentPage(tableConfig.value.tableId, '检查情况统计')
}
function caseEventClick(row, column, cell, event) {
const colProp = column.property
if (colProp === "jcqysl" && row[colProp] > 0) {
let query = Object.assign(queryParams.value, {gxdwbm: row.agency_code})
dialogConfig.value.data = query
dialogConfig.value.show = true
dialogConfig.value.mode = 'detail'
dialogConfig.value.title = '企业列表'
}
if (colProp === "jccs" && row[colProp] > 0) {
let query = Object.assign(queryParams.value, {gxdwbm: row.agency_code})
dialogConfig1.value.data = query
dialogConfig1.value.show = true
dialogConfig1.value.mode = 'detail'
dialogConfig1.value.title = '检查列表'
}
if ((colProp === "yhzs" && row[colProp] > 0) || (colProp === "zdyhs" && row[colProp] > 0) || (colProp === "ybyhs" && row[colProp] > 0) || (colProp === "yhzs" && row[colProp] > 0)
|| (colProp === "wszs" && row[colProp] > 0) || (colProp === "xcclcss" && row[colProp] > 0) || (colProp === "zlxqzgs" && row[colProp] > 0)
|| (colProp === "zgfcyjs" && row[colProp] > 0) || (colProp === "qtwss" && row[colProp] > 0)) {
let query = Object.assign(queryParams.value, {gxdwbm: row.agency_code})
dialogConfig2.value.data = query
dialogConfig2.value.show = true
dialogConfig2.value.mode = 'detail'
dialogConfig2.value.title = '检查情况'
}
}
</script>
<style lang="scss" scoped>
:deep(.el-table) {
.can-click {
cursor: pointer;
color: #126eee;
}
}
</style>