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

<template>
  <el-dialog
    :model-value="modelValue"
    width="70%"
    @close="closeDialog"
    destroy-on-close
    append-to-body
    :close-on-click-modal="false"
  >
    <template #title>
      <div class="flex just-between align-center">
        <span class="f18">{{ props.title }}</span>
        <span
          @click="exportFile"
          class="f14 pointer"
          style="color: #0072ff; margin-right: 30px"
          >下载</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 #zllx="{ row }">
          <DictTag :tag="false" :value="row.zllx" :options="D_GS_XS_ZLLX" />
        </template>
        <template #zldj="{ row }">
          <DictTag :tag="false" :value="row.zldj" :options="D_GS_ZDQT_FXDJ" />
        </template>
        <template #czzt="{ row }">
          <DictTag :tag="false" :value="row.czzt" :options="D_GS_XS_CZZT" />
        </template>
        <template #sffk="{ row }">
          {{ row.sffk == "1" ? "已反馈" : "未反馈" }}
        </template>
        <template #sfqs="{ row }">
          {{ row.sfqs == "0" ? "未签收" : "已签收" }}
        </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 { xxcjXfxsSelectPage } from "@/api/xxcj.js";
import { ref, reactive, getCurrentInstance, watch } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_SF,
  // D_GS_XS_SJLY,
  D_GS_XS_ZLLX, D_GS_ZDQT_FXDJ, D_GS_XS_CZZT } =
  proxy.$dict(
    "D_BZ_SF",
    // "D_GS_XS_SJLY",
    "D_GS_XS_ZLLX",
    "D_GS_ZDQT_FXDJ",
    "D_GS_XS_CZZT"
  );
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: "zlbt",
    placeholder: "请输入指令标题",
    showType: "input"
  },
  {
    label: "指令类型",
    prop: "zllx",
    placeholder: "请选择指令类型",
    showType: "select",
    options: D_GS_XS_ZLLX
  },
  {
    label: "指令等级",
    prop: "zldj",
    placeholder: "请选择指令等级",
    showType: "select",
    options: D_GS_ZDQT_FXDJ
  },
  {
    label: "处置状态",
    prop: "czzt",
    placeholder: "请选择处置状态",
    showType: "select",
    options: D_GS_XS_CZZT
  }
]);
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: "zlbt" },
    { label: "指令类型", prop: "zllx", showSolt: true },
    { label: "指令等级", prop: "zldj", showSolt: true },
    { label: "反馈截止时间", prop: "jssj" },
    { label: "处置状态", prop: "czzt", showSolt: true },
    { label: "是否反馈", prop: "sffk", showSolt: true },
    { label: "是否签收", prop: "sfqs", showSolt: true }
  ],
  tableHeight: "43vh"
});
const parameter = ref();
const onSearch = (val) => {
  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,
    pageCurrent: pageData.pageConfiger.pageCurrent,
    pageSize: pageData.pageConfiger.pageSize,
    sfqs: props.sfqs,
    sffk: props.sffk
  };
  xxcjXfxsSelectPage(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 = {
    zlbt: "指令标题",
    zllx_name: "指令类型",
    zldj_name: "指令等级",
    jssj: "反馈截止时间",
    czzt_name: "处置状态",
    jsffk_name: "是否反馈",
    sfqs_name: "是否签收"
  };
  let list = pageData.tableData.map((item) => ({
    ...item,
    zllx_name: getMultiDictVal(item.zllx, D_GS_XS_ZLLX),
    zldj_name: getMultiDictVal(item.zldj, D_GS_ZDQT_FXDJ),
    czzt_name: getMultiDictVal(item.czzt, D_GS_XS_CZZT),
    sffk_name: getMultiDictVal(item.sffk, D_BZ_SF),
    sfqs_name: getMultiDictVal(item.sfqs, D_BZ_SF)
  }));
  exportExlByObj(titleObj, list, props.title);
};
</script>

<style scoped></style>