zhzf/client/src/views/xzzfgl/xzcfdagl.vue

<template>
  <browser class="browser-businesss-table"
           :component-loading="componentLoading"
           :api-config="apiConfig"
           :table-config="tableConfig"
           :permissions="permissions"
           :dialog-config="dialogConfig"
           :actions="actions"
           :custom-query="true"
           @custom-query="handleQuery"
           @update:dialog-config="dialogConfig = $event"
           @update:actions="actions = $event">
    <template #queryPanel="{ queryParams: query }">
      <el-form ref="queryForm" :model="query" label-width="100px">
        <el-row class="query-condition">
          <el-col :span="6">
            <el-form-item label="档案编号" prop="archivalNum">
              <el-input v-model="query.archivalNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="案件名称" prop="caseName">
              <el-input v-model.trim="query.caseName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归档日期" prop="jcsx">
              <el-date-picker
                  v-model="query.archiveDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <el-table-column label="案件号" prop="caseNum" min-width="200"></el-table-column>
    <el-table-column label="案件名称" prop="caseName" min-width="500"></el-table-column>
    <el-table-column label="归档日期" prop="archiveDate" min-width="100"></el-table-column>
    <el-table-column label="保存期限" prop="shelfLife" min-width="100"></el-table-column>
    <template #dialogContent="{ dialogConfig: dialog }">
      <case-detail :caseInfo="dialog.data"/>
    </template>
  </browser>
</template>
<script setup>
import {reactive, toRefs} from 'vue'
import browser from '@/components/Browser.vue'
import {useUserStore} from '@/stores/modules/user'
import caseApi from '@/api/lawenforcement/Case'
import caseDetail from "@pages/xzzfgl/caseDetail.vue";

const userStore = useUserStore()

const state = reactive({
  componentLoading: false,
  queryParams: {},
  permissions: {
    query: true,
    add: false,
    modify: false,
    detail: true,
    delete: false,
    importFile: false,
    exportFile: false,
    exportSelectFile: false,
    downloadTemp: false
  },
  tableConfig: {
    multipleSelect: false,
    hasControlColumn: true,
    defaultSort: {
      prop: 'archiveDate',
      order: 'desc'
    },
    controlWidth: '200'
  },
  apiConfig: {
    api: caseApi,
    modelId: 'checkId',
  },
  dialogConfig: {
    show: false,
    showFooter: false,
    mode: 'detail',
    title: '档案详情',
    loading: false,
    data: {},
    actions: {}
  },
  actions: {
    detail: handleDetail
  }
})

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

function scrollToSection(sectionId) {
  const element = document.getElementById(sectionId);
  element.scrollIntoView({behavior: 'smooth'});
}




function handleQuery(query) {
  tableConfig.value.tableLoading = true
  query.status = "reviewing_done"//查询立案后的所有案卷
  apiConfig.value.api.query(query).then(res => {
    if (res.success) {
      tableConfig.value.tableData = res
      tableConfig.value.tableLoading = false
    }
  })
}

function handleDetail(row) {
  dialogConfig.value.show = true
  dialogConfig.value.mode = 'detail'
  dialogConfig.value.title = '行政处罚档案详情'
  // dialogConfig.value.loading = true
  dialogConfig.value.data = row
  if (dialogConfig.value.data.evidence === null) {
    dialogConfig.value.data.evidence = {}
  }
  if (dialogConfig.value.data.analyzeJudge === null) {
    dialogConfig.value.data.analyzeJudge = {}
  }
  if (dialogConfig.value.data.discuss === null) {
    dialogConfig.value.data.discuss = {}
  }
  if (dialogConfig.value.data.inform === null) {
    dialogConfig.value.data.inform = {}
  }
  if (dialogConfig.value.data.informsbtz === null) {
    dialogConfig.value.data.informsbtz = {}
  }
  if (dialogConfig.value.data.decided === null) {
    dialogConfig.value.data.decided = {}
  }
  if (dialogConfig.value.data.execute === null) {
    dialogConfig.value.data.execute = {}
  }
  if (dialogConfig.value.data.finalCase === null) {
    dialogConfig.value.data.finalCase = {}
  }
  //findOne(row)
}

function findOne(row) {
  apiConfig.value.api.findOne(row.enforcementId).then(res => {
    if (res.success) {
      dialogConfig.value.loading = false
      dialogConfig.value.data = res.data || {}
    } else {
      dialogConfig.value.loading = false
      throw new Error('查询失败')
    }
  }).finally(() => {
    dialogConfig.value.loading = false
  })
}
</script>
<style lang="scss" scoped>
.browser-businesss-table {
  .browser-businesss-table-dialog-form {
    padding: 10px 20px 10px 20px;
  }
}

table.case-details {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

table.case-details td {
  border: 1px solid #000;
  padding: 8px;
}

table.case-details .label {
  width: 80px;
  font-weight: bold;
}

.dates, .personnel {
  margin: 15px 0;
  line-height: 1.8;
}

.file-list {
  width: 95%;
  border-collapse: collapse;
  margin-top: 20px;
}

.file-list th, .file-list td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

.file-list th {
  font-family: 黑体;
  color: #111111;
  font-size: 20px;
}

.linkStyle {
  font-size: 20px;
  font-family: 仿宋;
  color: #111111;
}

</style>