更新

src/views/Nobility/userPowerByNobility/hook.tsx

@@ -1,9 +1,17 @@
-import { ref, h } from "vue";
+import { ref } from "vue";
 import { queryUserNobility } from "@/api/modules/nobility";
 export function useData() {
   const loading = ref(true);
   const tableList = ref([]);
   const isShow = ref(false);
+  const searchForm = ref({
+    user_code: "",
+    user_nick_name: ""
+  });
+  const searchLabel = ref([
+    { label: "用户ID", prop: "user_code", type: "input" },
+    { label: "用户昵称", prop: "user_nick_name", type: "input" }
+  ]);
   const pagination = ref({
     total: 0,
     pageSize: 10,
@@ -35,7 +43,7 @@ export function useData() {
           preview-src-list={Array.of(row.user_avatar)}
           class="w-[24px] h-[24px] rounded-full align-middle"
         />
-      ),
+      )
     },
     {
       label: "爵位名称",
@@ -44,11 +52,13 @@ export function useData() {
     {
       label: "名称颜色",
       prop: "nick_name_color"
-    },
+    }
   ]);
-  const onSearch = async () => {
+  const onSearch = async formData => {
     loading.value = true;
+    searchForm.value = { ...formData };
     const { data, code } = await queryUserNobility({
+      ...formData,
       page: pagination.value.currentPage,
       page_limit: pagination.value.pageSize
     });
@@ -61,13 +71,15 @@ export function useData() {
   };
   const handleSizeChange = (val: number) => {
     pagination.value.pageSize = val;
-    onSearch();
+    onSearch(searchForm.value);
   };
   const handleCurrentChange = (val: number) => {
     pagination.value.currentPage = val;
-    onSearch();
+    onSearch(searchForm.value);
   };
   return {
+    searchForm,
+    searchLabel,
     onSearch,
     isShow,
     tableList,

src/views/Nobility/userPowerByNobility/index.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { useData } from "./hook";
+import SearchForm from "@/components/SearchForm/index.vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { deviceDetection } from "@pureadmin/utils";
 const {
+  searchLabel,
+  searchForm,
   onSearch,
   isShow,
   tableList,
@@ -11,19 +14,19 @@ const {
   tableLabel,
   handleSizeChange,
   handleCurrentChange,
-  loading,
+  loading
 } = useData();
 defineOptions({
   name: "charmGrade"
 });
 onMounted(() => {
-  onSearch();
+  onSearch(searchForm.value);
 });
 </script>
 
-
 <template>
   <div class="main">
+    <SearchForm class="pb-2" :LabelList="searchLabel" :formData="searchForm" @handleSearch="onSearch" />
     <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
       <PureTableBar title="用户爵位列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
         :columns="tableLabel" @refresh="onSearch">
@@ -33,8 +36,7 @@ onMounted(() => {
             :data="tableList" :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
               background: 'var(--el-fill-color-light)',
               color: 'var(--el-text-color-primary)'
-            }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
+            }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange" />
-          </pure-table>
         </template>
       </PureTableBar>
     </div>