更新大屏

src/views/home/model/fjqk.vue

@@ -12,61 +12,17 @@
       :key="pageData.keyCount"
       :tableConfiger="pageData.tableConfiger"
     >
-      <template #tp="{ row }">
-        <img width="30" src="@/assets/images/icon100.png" alt="" />
-      </template>
     </MyTable>
   </div>
 </template>
     
 <script setup>
+import { qcckGet } from "@/api/qcckApi.js";
 import MyTable from "@/components/aboutTable/DarkTable.vue";
-import { reactive, onMounted } from "vue";
+import { fa } from "element-plus/es/locale.mjs";
+import { reactive, onMounted,ref } from "vue";
 const pageData = reactive({
-  tableData: [
-    {
-      tp: "https://example.com/photo1.jpg",
-      xm: "张三",
-      xb: "男",
-      sfzh: "330102199001011234",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo2.jpg",
-      xm: "李四",
-      xb: "女",
-      sfzh: "330102199203034567",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    }
-  ],
+  tableData: [],
   keyCount: 0,
   tableConfiger: {
     loading: false,
@@ -76,26 +32,44 @@ const pageData = reactive({
     showIndex: false,
     stripe: true
   },
-  total: 0,
-  pageConfiger: {
-    pageSize: 20,
-    pageNum: 1
-  }, //分页
   tableColumn: [
-    { label: "照片", prop: "tp", showSolt: true },
-    { label: "姓名", prop: "xm", showOverflowTooltip: true },
-    { label: "性别", prop: "xb", showOverflowTooltip: true },
-    { label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
-    { label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
+    { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
+    { label: "手机号码", prop: "rySjhm", showOverflowTooltip: true },
+    { label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
+    { label: "户籍地址", prop: "ryHjdz", showOverflowTooltip: true },
   ]
 });
 
+const total = ref(0);
+const pageNum = ref(1);
+
 onMounted(() => {
+  getList()
   tabHeightFn();
 });
 
+
+
+// 获取列表
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  let data = { sfZbkry: 1, pageSize:10 , pageCurrent:pageNum.value};
+  qcckGet(data, "/mosty-gsxt/tbGsxtRqfjRy/selectPage").then((res) => {
+    let arr = res.records || [];
+    pageData.tableData = pageNum.value == 1 ? arr :  pageData.tableData.concat(arr);
+    total.value = res.total;
+    pageData.tableConfiger.loading = false;
+  })
+  .catch(() => {
+    pageData.tableConfiger.loading = false;
+  });
+};
+
 const changePage = () => {
-  console.log("触底加载==========");
+  if(pageData.tableData.length == total.value) return false;
+  pageNum.value++;
+  getList()
+
 };
 
 // 表格高度计算