sgxt_web/src/views/home/model/zdgk.vue

<template>
  <div class="comom-title">
    <div class="title">
      <span
        class="mr12 pointer nowrap"
        :style="{ fontSize: activeIndex == idx ? '22px' : '18px' }"
        v-for="(it, idx) in btns"
        :key="idx"
        @click="changeIndex(idx)"
        >{{ it }}</span
      >
    </div>
  </div>
  <div id="zdgk" class="comom-cnt">
    <MyTable
      @changePage="changePage"
      customClass="zdy_bkcz_table"
      :tableData="pageData.tableData"
      :tableColumn="pageData.tableColumn"
      :tableHeight="pageData.tableHeight"
      :key="pageData.keyCount"
      :tableConfiger="pageData.tableConfiger"
    >
    <template #ryXb="{row}">
      <DictTag :tag="false" :value="row.ryXb" color="#fff" :options="D_BZ_XB" />
    </template>
    <template #qtLb="{row}">
      <DictTag :tag="false" :value="row.qtLb" color="#fff" :options="D_GS_ZDQT_LB" />
    </template>
    <template #qtFxdj="{row}">
      <DictTag :tag="false" :value="row.qtFxdj" color="#fff" :options="D_GS_ZDQT_FXDJ" />
    </template>
      <template #tp="{ row }">
        <img width="30" height="30" src="" alt="" />
      </template>
    </MyTable>
  </div>
</template>
    
<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { reactive, ref,onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_XB,D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ } = proxy.$dict('D_BZ_XB','D_GS_ZDQT_LB','D_GS_ZDQT_FXDJ');
const btns = reactive(["重点人管控信息", "重点全体管控信息"]);
const activeIndex = ref(0);
const page = ref(1);
const total = ref(0);
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    haveControls: false,
    showSelectType: "null",
    showIndex: false,
    stripe: true
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageNum: 1
  }, //分页
  tableColumn: [
    { label: "照片", prop: "tp", showSolt: true },
    { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
    { label: "性别", prop: "ryXb", showOverflowTooltip: true,showSolt:true },
    { label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
    { label: "管控原因", prop: "zdrLkyy", showOverflowTooltip: true }
  ]
});

onMounted(() => {
  tabHeightFn();
  getList()
});

// 切换啊按钮
const changeIndex = (index) =>{
  activeIndex.value = index;
  page.value  = 1;
  pageData.tableData = [];
  switch(index){
  case 0:
    pageData.tableColumn = [
      { label: "照片", prop: "tp", showSolt: true },
      { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
      { label: "性别", prop: "ryXb", showOverflowTooltip: true,showSolt:true },
      { label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
      { label: "管控原因", prop: "zdrLkyy", showOverflowTooltip: true }
    ]
    break;
  case 1:
    pageData.tableColumn = [
      { label: "照片", prop: "tp", showSolt: true },
      { label: "群体名称", prop: "qtMc", showOverflowTooltip: true },
      { label: "群体类别", prop: "qtLb", showOverflowTooltip: true,showSolt:true },
      { label: "风险等级", prop: "qtFxdj", showOverflowTooltip: true ,showSolt: true},
      { label: "列控原因", prop: "zdrLkyy", showOverflowTooltip: true }
    ]
    break;
  }
  pageData.keyCount++;
  getList()
}

// 获取列表
const getList = () => {
  pageData.tableConfiger.loading = true;
  let data = { pageSize:10,pageCurrent:page.value };
  let url =  activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'/mosty-gsxt/tbGsxtZdqt/selectPage'
  qcckGet(data, url).then((res) => {
    let arr = res.records || [];
    pageData.tableData = page.value == 1 ? arr : pageData.tableData.concat(arr)
    total.value = res.total;
    pageData.tableConfiger.loading = false;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight =  document.getElementById('zdgk').offsetHeight - 10;
  window.onresize = function () {
    tabHeightFn();
  };
};

const changePage = () => {
  if(pageData.tableData.length == total.value) return false;
  page.value++;
  getList()
};
</script>
    
    
  <style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
::v-deeep .comom-title {
  background: url("~@/assets/images/bg18.png") no-repeat center center;
  background-size: 100% 100%;
}
::v-deep .el-table td.el-table__cell {
  color: #ffffff;
}

::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: rgba(0, 61, 130, 0.75);
}
</style>
  <style lang="scss">
.zdy_bkcz_table td.el-table__cell {
  color: #ffffff !important;
}
.zdy_bkcz_table th.el-table__cell {
  color: #ffffff !important;
  font-size: 15px;
}
</style>