zhzf/client/src/views/fxczfgl/fxczftj.vue

<template>

  <browser class="browser-businesss-table"
           ref="broTable"
           :component-loading="componentLoading"
           :api-config="apiConfig"
           :table-config="tableConfig"
           :permissions="permissions"
           :actions="actions"
           :custom-reset="true"
           @custom-reset="reset"
           :customQuery="true"
           @custom-query="handleQuery"
           @update:actions="actions = $event">
    <template #queryPanel>
      <el-form ref="queryForm" :model="queryParams" label-width="100px">
        <el-row class="query-condition">
          <el-col :span="12">
            <el-form-item label="统计时间" prop="statisticsTime">
              <el-date-picker v-model="queryParams.statisticsTime"
                              type="datetimerange"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                              format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <el-table-column header-align="center" align="center" prop="agency_name" label="属地" min-width="150"/>
    <el-table-column header-align="center" align="center" prop="xccs" label="巡查次数" min-width="150"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="fxwts" label="发现问题" min-width="150"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="jjwts" label="解决问题" min-width="150"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="las" label="立案数" min-width="150"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="cfs" label="处罚数" min-width="150"
                     class-name="can-click"/>
    <template>
      <el-dialog :open="dialogConfig.show" :title="dialogConfig.title" v-if="dialogConfig.show" :show-footer="false"
                 @update:open="dialogConfig.show = false">
        <fxczftjxcdetail :dialog-data="dialogConfig.data" :tag="tag"/>
      </el-dialog>
    </template>
    <template>
      <el-dialog :open="dialogConfig2.show" :title="dialogConfig2.title" v-if="dialogConfig2.show" :show-footer="false"
                 @update:open="dialogConfig2.show = false">
        <fxczftjlacftail :dialog-data="dialogConfig2.data" :tag="tag"/>
      </el-dialog>
    </template>
  </browser>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import browser from '@/components/Browser.vue'
import lawEnfPenaltyStat from '@/api/lawenforcement/LawEnfPenaltyStat'
import Browser from "@/components/Browser.vue";
import ElDialog from "@/components/ElDialog/index.vue";
import fxczftjxcdetail from "@pages/dtsjygl/fxczftjxcdetail.vue";
import fxczftjlacftail from "@pages/dtsjygl/fxczftjlacftail.vue";
import moment from "moment/moment.js";
import {ElMessage, ElMessageBox} from "element-plus";

const state = reactive({
  componentLoading: false,
  queryParams: {
    statisticsTime: [moment().subtract(1, 'months').format('YYYY-MM-DD') + ' 00:00:00', moment().format('YYYY-MM-DD') + ' 23:59:59']
  },
  permissions: {
    query: true,
    add: false,
    modify: false,
    detail: false,
    delete: false,
    importFile: false,
    exportFile: true,
    exportSelectFile: false,
    downloadTemp: false,
  },
  tableConfig: {
    tableId: 'fxczftjTableId',
    hasControlColumn: false,
    tableData: [],
    tableLoading: false,
    usePage: false,
    multipleSelect: false,
    cellClick: caseEventClick,
    // lazy: true,
    // rowKey: 'agencyCode',
    // treeProps: { children: 'children', hasChildren: 'hasChildren' },
    // load: loadTree
  },
  dialogConfig: {
    show: false,
    mode: 'detail',
    loading: false,
    data: {},
    actions: {},
  },
  dialogConfig2: {
    show: false,
    mode: 'detail',
    loading: false,
    data: {},
    actions: {},
  },
  apiConfig: {
    api: lawEnfPenaltyStat,
    modelId: 'enforcementId',
  },
  actions: {
    exportData: handleExport
  },
  tag: ''
})

const {
  componentLoading,
  queryParams,
  permissions,
  tableConfig,
  apiConfig,
  actions,
  dialogConfig,
  dialogConfig2,
  tag
} = toRefs(state)

function handleQuery() {
  if (queryParams.value.statisticsTime === null) {
    ElMessage.error('请选择统计时间')
    return
  }
  tableConfig.value.tableLoading = true
  apiConfig.value.api.statistics(queryParams.value).then(res => {
    tableConfig.value.tableLoading = false
    if (res.success) {
      tableConfig.value.tableData = res
    }
  }).finally(() => {
    tableConfig.value.tableLoading = false
  })
}

function reset(query) {
  queryParams.value.statisticsTime = [moment().subtract(1, 'months').format('YYYY-MM-DD') + ' 00:00:00', moment().format('YYYY-MM-DD') + ' 23:59:59']
  handleQuery()
}

function caseEventClick(row, column, cell, event) {
  const colProp = column.property
  if (colProp === "xccs" && row[colProp] > 0) {
    tag.value = 'xccs'
    let query = Object.assign(queryParams.value, {agencyCode: row.agency_code})
    dialogConfig.value.data = query
    dialogConfig.value.show = true
    dialogConfig.value.mode = 'detail'
    dialogConfig.value.title = '巡查次数详情'

  }
  if (colProp === "fxwts" && row[colProp] > 0) {
    tag.value = 'fxwts'
    let query = Object.assign(queryParams.value, {agencyCode: row.agency_code})
    dialogConfig.value.data = query
    dialogConfig.value.show = true
    dialogConfig.value.mode = 'detail'
    dialogConfig.value.title = '发现问题数详情'
  }
  if (colProp === "jjwts" && row[colProp] > 0) {
    tag.value = 'jjwts'
    let query = Object.assign(queryParams.value, {agencyCode: row.agency_code})
    dialogConfig.value.data = query
    dialogConfig.value.show = true
    dialogConfig.value.mode = 'detail'
    dialogConfig.value.title = '解决问题数详情'
  }
  if (colProp === "las" && row[colProp] > 0) {
    tag.value = 'las'
    let query = Object.assign(queryParams.value, {agencyCode: row.agency_code})
    dialogConfig2.value.data = query
    dialogConfig2.value.show = true
    dialogConfig2.value.mode = 'detail'
    dialogConfig2.value.title = '立案数详情'
  }
  if (colProp === "cfs" && row[colProp] > 0) {
    tag.value = 'cfs'
    let query = Object.assign(queryParams.value, {agencyCode: row.agency_code})
    dialogConfig2.value.data = query
    dialogConfig2.value.show = true
    dialogConfig2.value.mode = 'detail'
    dialogConfig2.value.title = '处罚数详情'
  }

}

const broTable = ref(null)

function handleExport() {
  broTable.value.busiTable.exportExcelFileForCurrentPage(tableConfig.value.tableId, '非现场执法统计')
}
</script>
<style lang="scss" scoped>
.browser-businesss-table {
  .browser-businesss-table-dialog-form {
    padding: 10px 20px 10px 20px;
  }
}

:deep(.el-table) {
  .can-click {
    cursor: pointer;
    color: #126eee;
  }
}
</style>