更新

src/views/Nobility/userPowerByNobility/hook.tsx

@@ -0,0 +1,80 @@
+import { ref, h } from "vue";
+import { queryUserNobility } from "@/api/modules/nobility";
+export function useData() {
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "用户Id",
+      prop: "user_id"
+    },
+    {
+      label: "用户名称",
+      prop: "user_nick_name"
+    },
+    {
+      label: "用户头像",
+      prop: "user_avatar",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.user_avatar}
+          preview-src-list={Array.of(row.user_avatar)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+    },
+    {
+      label: "爵位名称",
+      prop: "nobility_name"
+    },
+    {
+      label: "名称颜色",
+      prop: "nick_name_color"
+    },
+  ]);
+  const onSearch = async () => {
+    loading.value = true;
+    const { data, code } = await queryUserNobility({
+      page: pagination.value.currentPage,
+      page_limit: pagination.value.pageSize
+    });
+    if (code) {
+      tableList.value = data.lists;
+      pagination.value.total = data.count;
+      pagination.value.currentPage = data.page;
+    }
+    loading.value = false;
+  };
+  const handleSizeChange = (val: number) => {
+    pagination.value.pageSize = val;
+    onSearch();
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch();
+  };
+  return {
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading
+  };
+}