sgxt_web/src/views/home/components/informationCollection.vue

<template>
  <el-dialog :model-value="modelValue" width="70%" @close="closeDialog" destroy-on-close append-to-body>
    <template #title>
      <div class="flex just-between align-center">
        <span class="f18">{{ title }}</span>
        <span @click="exportFile" class="f14 pointer" style="color: #0072ff;">下载</span>
      </div>
    </template>

    <div>
      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
        <template #qblx="{ row }">
          <DictTag :tag="false" :value="row.qblx" :options="D_GS_XS_LX" />
        </template>
        <template #qbly="{ row }">
          <DictTag :tag="false" :value="row.qbly" :options="D_BZ_CJLX" />
        </template>
        <template #czzt="{ row }">
          <DictTag :tag="false" :value="row.czzt" :options="D_BZ_QBCZZT" />
        </template>
        <template #lczt="{ row }">

          <DictTag :tag="false" :value="row.lczt" :options="D_BZ_LCZT" />
        </template>
      </MyTable>
      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
        ...pageData.pageConfiger,
        total: pageData.total
      }"></Pages>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="closeDialog">确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getMultiDictVal } from "@/utils/dict.js"
import { exportExlByObj } from "@/utils/exportExcel.js"
import MyTable from "@/components/aboutTable/MyTable.vue";
import Search from "@/components/aboutTable/Search.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import { xxcjSelectXxsbPage, xxcjDeletes, xxcjXxzsx, xxcjUpdateCzlc, xxcjXxqd } from '@/api/xxcj.js'
import { ref, reactive, getCurrentInstance, watch } from "vue";
const { proxy } = getCurrentInstance()
const { D_GS_XS_LX,  D_BZ_QBCZZT, D_BZ_CJLX, D_BZ_LCZT } =
  proxy.$dict("D_GS_XS_LX",  "D_BZ_QBCZZT", "D_BZ_CJLX", "D_BZ_LCZT"); //获取字典数据
const detailDiloag = ref();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  dict: {
    type: Object,
    default: () => ({})
  }, title: {
    default: "下发总数",
    type: String
  },
  sfqs: {
    type: String,
    default: ''
  },
  sffk: {
    type: String,
    default: ''
  }
})
const searchConfiger = ref([
  { label: "名称", prop: 'qbmc', placeholder: "请输入情报名称", showType: "input" },
  { label: "所属单位", prop: "ssbmdm", placeholder: "请选择所属单位", showType: "department" },
  { label: "时间", prop: "startTime", placeholder: "请选择时间", showType: "daterange" },
  { label: "处置状态", prop: 'lczt', placeholder: "请选择处置状态", showType: "select", options: D_BZ_LCZT },
]);
const emit = defineEmits(['update:modelValue'])
const closeDialog = () => {
  emit('update:modelValue', false)
}
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 40,
    haveControls: false,
    showSelectType: 'null',
  },
  controlsWidth: 160, //操作栏宽度
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  tableColumn: [
    { label: "情报上报时间", prop: "sxsbsj" },
    { label: "情报编号", prop: "xsBh" },
    { label: "情报标题", prop: "qbmc" },
    { label: "情报来源", prop: "qbly", showSolt: true },
    { label: "流程状态", prop: "lczt", showSolt: true },
  ],
  tableHeight: "43vh",
});
const parameter = ref()
const onSearch = (val) => {
  const promes = {
    ...pageData.pageConfiger,
    ...val,
    startTime: val.startTime ? val.startTime[0] : '',
    endTime: val.endTime ? val.endTime[1] : '',
  }
  parameter.value = { ...promes }
  pageData.pageConfiger.pageCurrent = 1;

  // parameter.value = { ...val }
  // pageData.pageConfiger.pageCurrent = 1;
  changePage()
}
watch(() => props.modelValue, (val) => {
  if (val) {
    changePage()
  }
})

const changePage = () => {
  pageData.tableConfiger.loading = true;
  const promes = {
    ...parameter.value,
    ...pageData.pageConfiger,
  }
  xxcjSelectXxsbPage(promes).then((res) => {
    pageData.total = res.total || 0;
    pageData.tableConfiger.loading = false;
    pageData.tableData = res.records
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  })
}

const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  changePage()
}
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  changePage()
}

// 导出
const exportFile = () =>{
  const titleObj = {
    sxsbsj: "情报上报时间",
    xsBh: "情报编号",
    qbmc: "情报标题",
    qbly_name: "情报来源",
    lczt_name: "流程状态",
  }
 let list = pageData.tableData.map(item => ({
  ...item,
  qbly_name: getMultiDictVal(item.jqdjdm, D_BZ_CJLX),
  lczt_name: getMultiDictVal(item.jqlbdm, D_BZ_QBCZZT),
 }))
 exportExlByObj(titleObj, list, props.title)
}

</script>

<style scoped></style>