更新

src/views/KeyPopulations/model/importantPerson.vue

@@ -5,50 +5,38 @@
                 <span class="title">重点人信息统计</span>
                 <span :class="active == it ? 'active'+`${idx}`:''" @click="changeDate(it)" class="tabsBtn pointer" v-for="(it,idx) in btns" :key="it">{{ it }}</span>
             </div>
-            <span style="color:#00B7FF;" class="f12 pointer">查看更多 》</span>
         </div>
         <div class="asideCnt">
           <div class="seachBox flex">
-                <!-- 搜索 -->
+            <MOSTY.Other style="flex:1" v-model="keywords" clearable placeholder="输入关键字" />
-                <MOSTY.Select v-model="listQuery.bqm" style="width: 120px;margin-right:10px" :dictEnum="search.xd" clearable placeholder="选择标签" />
+            <el-button type="primary" @click="handleSearch">搜索</el-button>
-                <MOSTY.Other v-model="listQuery.nr" clearable placeholder="输入内容" />
-                <el-button type="primary">搜索</el-button>
           </div>
           <MyTable @changePage="changePage" customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
+            <template #qtFxdj="{row}">
+               <DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ"/>
+            </template>
+            <template #qtZt="{row}">
+               <DictTag :tag="false" :value="row.qtZt" :options="D_GS_ZDQT_ZT"/>
+            </template>
           </MyTable>
         </div>
     </div>
 </template>
 
 <script setup>
+import { qcckGet } from "@/api/qcckApi.js";
 import * as MOSTY from "@/components/MyComponents/index";
 import MyTable from "@/components/aboutTable/DarkTable.vue";
-import { reactive, ref,onMounted } from "vue";
+import { reactive, ref,onMounted,getCurrentInstance } from "vue";
 const btns = ref(['重点人','重点群体'])
 const active = ref('重点人');
+const keywords = ref(''); // 搜索关键字
+const { proxy } = getCurrentInstance();
+const { D_GS_ZDQT_ZT,D_BZ_RYBQ,D_GS_ZDQT_FXDJ } = proxy.$dict('D_GS_ZDQT_ZT','D_BZ_RYBQ','D_GS_ZDQT_FXDJ') //获取字典数据
 const pageData = reactive({
   tableData: [
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { ryXm: "王五", rySfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { ryXm: "王五", rySfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
-  
   ],
   keyCount: 0,
   tableConfiger: {
@@ -64,35 +52,82 @@ const pageData = reactive({
     pageNum: 1
   }, //分页
   tableColumn: [
-    { label: "姓名", prop: "xm", showOverflowTooltip: true },
+    { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
-    { label: "身份证号码", prop: "sfzh",showOverflowTooltip: true },
+    { label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
     { label: "标签", prop: "bq",showOverflowTooltip: true },
+    { label: "所属线索", prop: "xsmc",showOverflowTooltip: true },
   ]
 });
-const search = reactive({
+
-  xd: [
-    { label: "吸毒", value: "10" },
-    { label: "贩毒", value: "20" }
-  ],
-});
-const listQuery = ref([])
 onMounted(() => {
   tabHeightFn();
-  window.onresize = function () {
+  getList();
-    tabHeightFn();
-  };
 });
 
+// 切换标签
 const changeDate = (val) =>{
   active.value = val;
+  pageData.pageConfiger.pageNum = 1;
+  pageData.tableData = [];
+  switch(val){
+    case '重点人':
+      pageData.tableColumn = [
+        { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
+        { label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
+        { label: "标签", prop: "bq",showOverflowTooltip: true },
+        { label: "所属线索", prop: "xsmc",showOverflowTooltip: true },
+      ];
+      break;
+    case '重点群体':
+      pageData.tableColumn = [
+        { label: "群体名称", prop: "qtMc", showOverflowTooltip: true },
+        { label: "群体状态", prop: "qtZt",showSolt:true,showOverflowTooltip: true },
+        { label: "群体风险等级", prop: "qtFxdj",showSolt:true, showOverflowTooltip: true },
+      ];
+      break;
+  }
+  getList();
 }
+
+// 搜索
+const handleSearch = () => {
+  pageData.pageConfiger.pageNum = 1; // 重置页码
+  getList();
+};
+
 // 滚动分页加载
 const changePage = () =>{
+  if( pageData.tableConfiger.loading) return; // 防止重复加载
+  pageData.pageConfiger.pageNum++;
 
 }
+
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  let url = active.value === '重点人' ? '/mosty-gsxt/tbGsxtZdry/selectPage' : '/mosty-gsxt/tbGsxtZdqt/selectPage';
+  let params = {
+    pageNum: pageData.pageConfiger.pageNum,
+    pageSize: pageData.pageConfiger.pageSize,
+    keywords: keywords.value,
+  };
+  qcckGet(params,url).then((res) => {
+    console.log(res,'=====');
+    
+    let arr = res.records || [];
+    pageData.tableData = pageData.pageConfiger.pageNum == 1 ? arr :  pageData.tableData.concat(arr);
+    pageData.total = res.total;
+    pageData.tableConfiger.loading = false;
+  }).catch(() => {
+    pageData.tableConfiger.loading = false;
+  });
+};
+
 // 表格高度计算
 const tabHeightFn = () => {
   pageData.tableHeight =  document.getElementById('zdrxxtj').offsetHeight - 160;
+  window.onresize = function () {
+    tabHeightFn();
+  };
 };
 
 </script>