slble-attend/sl.ble_sys-attend/src-js/views/welcome/components/table/columns.tsx

import { tableData } from "../../data";
import { delay } from "@pureadmin/utils";
import { ref, onMounted, reactive } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import ThumbUp from "~icons/ri/thumb-up-line";
import Hearts from "~icons/ri/hearts-line";
import Empty from "./empty.svg?component";
import { parseTime } from "@/utils/time";

export function useColumns() {
  const loading = ref(true);
  const columns: TableColumnList = [
    {
      sortable: true,
      label: "考勤日期",
      prop: "tm",
      cellRenderer: ({ row }) => (
        <div>
          { parseTime(row.tm) }
        </div>
      )
    },
    {
      sortable: true,
      label: "项目名称",
      prop: "projName"
    },
    {
      sortable: true,
      label: "区域名称",
      prop: "locName"
    },
    {
      sortable: true,
      label: "考勤基站",
      prop: "ancAddr"
    },
    {
      sortable: true,
      label: "考勤人次",
      prop: "attendPerson",
      // filterMultiple: false,
      // filterClassName: "pure-table-filter",
      // filters: [
      //   { text: "≥16000", value: "more" },
      //   { text: "<16000", value: "less" }
      // ],
      // filterMethod: (value, { requiredNumber }) => {
      //   return value === "more"
      //     ? requiredNumber >= 16000
      //     : requiredNumber < 16000;
      // }
    },
    {
      sortable: true,
      label: "到岗人次",
      prop: "arrivePerson"
    },
    {
      sortable: true,
      label: "在线人次",
      prop: "onlinePerson"
    },
    {
      sortable: true,
      label: "到岗率",
      minWidth: 100,
      prop: "satisfaction",
      cellRenderer: ({ row }) => (
        <div class="flex justify-center w-full">
          <span class="flex items-center w-[60px]">
            <span class="ml-auto mr-2">{row.attendPerson > 0 ? Math.round(row.arrivePerson/row.attendPerson* 100) : 0}%</span>
            {/* <iconifyIconOffline
              icon={row.satisfaction > 98 ? Hearts : ThumbUp}
              color="#e85f33"
            /> */}
          </span>
        </div>
      )
    },
    {
      label: "操作",
      fixed: "right",
      slot: "operation"
    }
  ];

  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    layout: "prev, pager, next",
    total: 0,
    align: "center"
  });

  function onCurrentChange(page: number) {
    console.log("onCurrentChange", page);
    loading.value = true;
    delay(300).then(() => {
      loading.value = false;
    });
  }

  onMounted(() => {
    pagination.total = tableData.value.length;
    loading.value = false;
  });

  return {
    Empty,
    loading,
    columns,
    pagination,
    onCurrentChange
  };
}