auth_perm_system_front/src/views/testTable/splitTable/index.vue

<script setup lang="ts">
import { computed, ref } from "vue";
import {
  type PlusColumn,
  useTable,
  PlusSearch,
  PlusTable,
  PageInfo,
  ButtonsCallBackParams
} from "plus-pro-components";
import { number } from "echarts";
defineOptions({
  name: "SplitTable"
});
interface TableRow {
  id: number;
  name: string;
  status: string;
  tag: string;
  time: Date;
}

const state = ref({});
const { tableData, buttons, pageInfo } = useTable<TableRow[]>();

const columns: PlusColumn[] = [
  {
    label: "名称",
    prop: "name",
    valueType: "copy",
    tooltip: "名称最多显示6个字符"
  },
  {
    label: "状态",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "未解决",
        value: "0",
        color: "red"
      },
      {
        label: "已解决",
        value: "1",
        color: "blue"
      },
      {
        label: "解决中",
        value: "2",
        color: "yellow"
      },
      {
        label: "失败",
        value: "3",
        color: "red"
      }
    ]
  },
  {
    label: "时间",
    prop: "time",
    valueType: "date-picker"
  },
  {
    label: "数量",
    prop: "number",
    valueType: "input-number",
    fieldProps: { precision: 2, step: 2 }
  },
  {
    label: "城市",
    prop: "city",
    valueType: "cascader",
    options: [
      {
        value: "zhejiang",
        label: "浙江",
        children: [
          {
            value: "hangzhou",
            label: "杭州",
            children: [
              {
                value: "xihu",
                label: "西湖"
              }
            ]
          },
          {
            value: "ningbo",
            label: "宁波",
            children: [
              {
                value: "dongqianlake",
                label: "东钱湖"
              }
            ]
          }
        ]
      },
      {
        value: "jiangsu",
        label: "江苏",
        children: [
          {
            value: "nanjing",
            label: "南京",
            children: [
              {
                value: "zhonghuamen",
                label: "中华门"
              }
            ]
          }
        ]
      }
    ],
    fieldProps: {
      clearable: true,
      style: { width: "100%" },
      props: { checkStrictly: true }
    }
  }
];

const tableColums: PlusColumn[] = [
  {
    label: "名称",
    prop: "name",
    disabledHeaderFilter: true,
    tooltip: "名称",
    tableColumnProps: {
      align: "center",
      showOverflowTooltip: true
    }
  },
  {
    label: "状态",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "未解决",
        value: "0",
        color: "red"
      },
      {
        label: "已解决",
        value: "1",
        color: "blue"
      },
      {
        label: "解决中",
        value: "2",
        color: "yellow"
      },
      {
        label: "失败",
        value: "3",
        color: "red"
      }
    ]
  },
  {
    label: "标签",
    prop: "tag",
    valueType: "tag",
    fieldProps: (value: string) => {
      return { type: value };
    }
  },
  {
    label: "时间",
    prop: "time",
    valueType: "date-picker",
    tableColumnProps: {
      align: "center",
      sortable: true
    }
  }
];

const multipleSelection = ref<TableRow[]>([]);

const TestServe = {
  getList: async () => {
    const data = Array.from({ length: 4 }).map((item, index) => {
      return {
        id: index,
        name: index === 0 ? index + "name".repeat(100) : index + "name",
        status: String(index % 3),
        tag:
          index === 1
            ? "success"
            : index === 2
              ? "warning"
              : index === 3
                ? "info"
                : "danger",
        time: new Date()
      };
    });
    return {
      data: data as TableRow[]
    };
  }
};

const getList = async () => {
  try {
    const { data } = await TestServe.getList();
    tableData.value = data;
  } catch (error) {}
};

buttons.value = [
  {
    // 查看
    text: "查看",
    code: "view",
    props: (row: any) => ({
      type: "info",
      disabled: row.status === "1"
    }),
    show: (row: any) => row.status === "1"
  },
  {
    // 修改
    text: "修改",
    code: "edit",
    // props v0.1.16 版本新增函数类型
    props: (row: any) => ({
      type: "primary",
      disabled: row.status === "1"
    }),
    show: computed(() => true)
  },
  {
    // 删除
    text: "删除",
    code: "delete",
    // props v0.1.16 版本新增计算属性支持
    props: computed(() => ({ type: "danger" })),
    confirm: {
      options: {
        draggable: true,
        message: "确定删除此数据吗？"
      }
    }
  }
];

getList();

const handleChange = (values: any) => {
  console.log(values, "change");
};
const handleSearch = (values: any) => {
  console.log(values, "search");
};
const handleRest = () => {
  console.log("handleRest");
};
const handlePaginationChange = (_pageInfo: PageInfo): void => {
  console.log("handlePaginationChange", _pageInfo);
  pageInfo.value = _pageInfo;

  getList();
};
const handleSelectionChange = (val: TableRow[]) => {
  multipleSelection.value = val;
  console.log("handleSelectionChange", val);
};
const handleSrotChange = (values: any) => {
  console.log("handleSrotChange", values);
};
const handleClickButton = (data: ButtonsCallBackParams) => {
  console.log("handleClickButton", data);
};
</script>

<template>
  <div class="p-0">
    <el-card class="box-card">
      <PlusSearch
        v-model="state"
        :columns="columns"
        :show-number="2"
        label-width="80"
        label-position="right"
        @change="handleChange"
        @search="handleSearch"
        @reset="handleRest"
      />
    </el-card>
    <el-card class="mt-5">
      <PlusTable
        :columns="tableColums"
        :table-data="tableData"
        :is-selection="true"
        :action-bar="{
          buttons: buttons,
          type: 'button',
          width: 260
        }"
        :pagination="{
          total: 100,
          modelValue: pageInfo,
          pageSizeList: [10, 20, 50]
        }"
        :adaptive="{ offsetBottom: 50 }"
        @selection-change="handleSelectionChange"
        @paginationChange="handlePaginationChange"
        @sort-change="handleSrotChange"
        @clickAction="handleClickButton"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss"></style>