yusheng-admin/src/views/Nobility/userPowerByNobility/hook.tsx

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_code"
    },
    {
      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
  };
}