vva-cli/templates/ssr/src/pages/article/hooks/useListTable.ts

A CLI of Vue 3 and Typescript and Element-plus in Vite

import { reactive } from "vue";
import { ElMessage } from "element-plus";
import http from "helper/http";
import { DEFAULT_PAGE_SIZE } from "config/others";
import { copy, cusToRefs, formatDate } from "helper/utils";

export default function useListTable(
  tableAddHandle: Function,
  tableEditHandle: Function
) {
  const state = reactive({
    tableData: [],
    form: {},
    allItems: 0
  });
  // 翻页
  const page = { index: 1, size: DEFAULT_PAGE_SIZE };
  function pageHandle({ pindex, psize }) {
    page.index = pindex;
    page.size = psize;
    loadData();
  }
  // 排序
  let sortParams: any = {};
  function sortHandle(params) {
    sortParams = params;
    loadData();
  }
  // 加载数据
  function loadData() {
    const params = cusToRefs(state.form);
    if (Object.keys(sortParams).length) {
      const { orderParam, sortParam, sortVal, order } = sortParams;
      params[sortParam] = sortVal;
      params[orderParam] = order;
    }
    let paramStr = Object.keys(params).reduce((pre, cur) => {
      const value = params[cur];
      let paramValue = value;
      if (value) {
        if (Array.isArray(value)) {
          paramValue = value
            .map((time) => formatDate(new Date(time), "yyyy-MM-dd hh:mm:ss"))
            .join("+");
        }
        pre += `&${cur}=${encodeURIComponent(paramValue)}`;
      }
      return pre;
    }, "");
    const { index, size } = page;
    state.tableData = [];
    const url = `/article/list?psize=${size}&pindex=${index}${paramStr}`;
    http
      .get(url)
      .then((res: any) => {
        const { total = 0, list = [] } = res;
        state.tableData = list;
        state.allItems = total;
      })
      .catch(() => {});
  }
  // 多选
  let selected = [];
  function selectHandle(val) {
    selected = val;
  }
  // 批量操作
  function batchHandle(cmd: string) {
    switch (cmd) {
      case "copy":
        if (!selected.length) {
          ElMessage.warning("至少选择一项");
          return;
        }
        copy(
          selected
            .map(({ id }) => id)
            .filter((k) => k)
            .join("|")
        )
          ? ElMessage.success("已复制成功，可使用快捷键 CTRL+V 粘贴")
          : ElMessage.error("复制失败，请稍后重试");
        break;
      case "add":
        tableAddHandle();
        break;
      default:
        break;
    }
  }
  // 表格操作
  function operateHandle(cmd, row) {
    switch (cmd) {
      case "detail":
        // 进入详情页
        location.href = `/home/article/detail/${row.id}`;
        break;
      case "edit":
        // 编辑
        const { id } = row;
        tableEditHandle(id);
        break;
      default:
        break;
    }
  }
  return {
    state,
    loadData,
    pageHandle,
    selectHandle,
    batchHandle,
    operateHandle,
    sortHandle,
  };
}