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

<template>
  <el-dialog v-model="modelValue" 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"
        @chooseData="chooseData">
        <template #bqList="{ row }">
          <ul>
            <li class="one_text_detail marks mb4" :key="index" v-for="(item, index) in row.bqList">{{ item.bqMc }}({{
              item.bqFz || 0 }} 分) </li>
          </ul>
        </template>
        <template #ryXb="{ row }">
          <DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
        </template>
        <template #ryJg="{ row }">
          <DictTag :tag="false" :value="row.ryJg" :options="D_BZ_XZQHDM" />
        </template>
        <template #ryMz="{ row }">
          <DictTag :tag="false" :value="row.ryMz" :options="D_BZ_MZ" />
        </template>
        <template #hjdQh="{ row }">
          <DictTag :tag="false" :value="row.hjdQh" :options="D_BZ_XZQHDM" />
        </template>
        <template #zdrRyjb="{ row }">
          <DictTag :tag="false" :value="row.zdrRyjb" :options="D_GS_ZDR_RYJB" />
        </template>
        <template #zdrBkZt="{ row }">
          <DictTag :tag="false" :value="row.zdrBkZt" :options="D_GS_ZDR_BK_ZT" />
        </template>
        <template #zdrCzzt="{ row }">
          <DictTag :tag="false" :value="row.zdrCzzt" :options="D_GS_ZDR_CZZT" />
        </template>
        <template #zdrZt="{ row }">
          <DictTag :tag="false" :value="row.zdrZt" :options="D_GS_ZDQT_ZT" />
        </template>
        <template #xtSjzt="{ row }">
          <div> {{ row.xtSjzt == 0 ? "注销" : row.xtSjzt == 1 ? "正常" : "封存" }}</div>
        </template>

        <!-- 操作 -->
        <template #controls="{ row }">
          <el-link size="small" type="success" @click="handleremove(row.id)">移除</el-link>
          <el-link size="small" type="success" v-if="row.zdrZt == '01' || row.zdrZt == '03'"
            @click="handleSend(row.id)">送审</el-link>
          <el-link size="small" type="primary" v-if="row.zdrZt == '01' || row.zdrZt == '03'"
            @click="addEdit('edit', row)">编辑</el-link>
          <el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
          <el-link size="small" type="danger" @click="deleteRow(row.id)">删除</el-link>
        </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 { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { ref, reactive, getCurrentInstance, watch } from "vue";
import { useRoute, useRouter } from 'vue-router'
import {timeValidate} from '@/utils/tools.js'
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const { D_GS_ZDQT_ZT, D_GS_ZDR_RYJB, D_BZ_XB, D_BZ_MZ, D_BZ_XZQHDM, D_GS_ZDR_BK_ZT, D_GS_ZDR_CZZT, D_GS_BQ_ZL, D_GS_BQ_LB, D_GS_BQ_LX, D_GS_ZDR_YJDJ, D_GS_BK_SSJZ, D_GS_BK_SQLX, D_BZ_SF, D_GS_XS_LY, D_BZ_SSZT, D_GS_XS_LX, D_GS_XS_QTLX } =
  proxy.$dict("D_GS_ZDQT_ZT", "D_GS_ZDR_RYJB", "D_BZ_XB", "D_BZ_MZ", "D_BZ_XZQHDM", "D_GS_ZDR_BK_ZT", "D_GS_ZDR_CZZT", "D_GS_BQ_ZL", "D_GS_BQ_LB", "D_GS_BQ_LX", "D_GS_ZDR_YJDJ", "D_GS_BK_SSJZ", "D_GS_BK_SQLX", "D_BZ_SF", "D_GS_XS_LY", "D_BZ_SSZT", "D_GS_XS_LX", "D_GS_XS_QTLX");
const obj = ref({});
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  dict: {
    type: Object,
    default: () => ({})
  }
})
const searchConfiger = ref([
   {
    label: "姓名",
    prop: "ryXm",
    placeholder: "请输入姓名",
    showType: "input"
  },
  {
    label: "身份证",
    prop: "rySfzh",
    placeholder: "请输入身份证",
    showType: "input"
  },
  {
    label: "户籍地",
    prop: "hjdXz",
    placeholder: "请输入户籍地",
    showType: "input"
  },
  {
    label: "人员级别",
    prop: "zdrRyjb",
    placeholder: "请输入人员级别",
    showType: "select",
    options: D_GS_ZDR_RYJB
  },
    {
    label: "所属部门",
    prop: "gxSsbmdm",
    placeholder: "请输入所属部门",
    showType: "department",
  },
]);
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: "ryXm", width: 150 },
    { label: "性别", prop: "ryXb", showSolt: true, width: 100 },
    { label: "籍贯", prop: "ryJg", showSolt: true, width: 100 },
    { label: "身份证", prop: "rySfzh", width: 200 },
    { label: "民族", prop: "ryMz", showSolt: true, width: 100 },
    { label: "户籍地区划", prop: "hjdQh", showSolt: true, width: 150 },
    { label: "户籍派出所", prop: "hjdPcsmc", width: 200 },
    { label: "户籍地详址", prop: "hjdXz", width: 200 },
    { label: "标签", prop: "bqList", showSolt: true, width: 400, showOverflowTooltip: true },
    { label: "管辖单位", prop: "gxSsbmmc", width: 200 },
    { label: "人员级别", prop: "zdrRyjb", showSolt: true, width: 130 },
    { label: "管控原因", prop: "zdrLkyy", width: 200, showOverflowTooltip: true },
    { label: "管控状态", prop: "zdrBkZt", width: 200, showOverflowTooltip: true },
    { label: "处置状态", prop: "zdrCzzt", showSolt: true },
    { label: "审核状态", prop: "zdrZt", showSolt: true },
    { label: "状态", prop: "xtSjzt", showSolt: true },
  ],
  tableHeight: "42vh",
});
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;

  let data = {...pageData.pageConfiger,  ...parameter.value };
  qcckGet(data, "/mosty-gsxt/tbGsxtZdry/selectPage").then((res) => {
    pageData.tableData = res.records || [];
    pageData.total = res.total;
    pageData.tableConfiger.loading = false;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });

}

// 查看详情
const showDetail = (item) => {
  router.push({
    path: '/CollectCrculate',
    query: {
      id: item.id
    }
  })
}

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

<style scoped></style>