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

<template>
  <el-dialog v-model="modelValue" :title="title" width="70%" @close="closeDialog" destroy-on-close append-to-body>
    <div style="height: 60vh; overflow: auto;">
    <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>

      </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 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_GS_XS_SJLY,D_GS_XS_ZLLX,D_GS_ZDQT_FXDJ,D_GS_XS_CZZT} = proxy.$dict('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
  }
})
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,
  },
  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 },
  ],
  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
  }
  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()
}
</script>

<style scoped></style>