diff --git a/src/router/enums.ts b/src/router/enums.ts index 7ed7d34c4..69219f665 100644 --- a/src/router/enums.ts +++ b/src/router/enums.ts @@ -1,8 +1,8 @@ // 完整版菜单比较多,将 rank 抽离出来,在此方便维护 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ,所以后端在返回 rank 的时候需要从 1 开始哦 - able = 1, - components = 2, + components = 1, + able = 2, table = 3, list = 4, result = 5, @@ -23,8 +23,8 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ,所以 export { home, - able, components, + able, table, list, result, diff --git a/src/views/pure-table/high/data.ts b/src/views/pure-table/high/data.ts index 777f67aaf..909db024c 100644 --- a/src/views/pure-table/high/data.ts +++ b/src/views/pure-table/high/data.ts @@ -91,7 +91,8 @@ const tableDataEdit = clone(tableData, true).map((item, index) => { return Object.assign(item, { id: index + 1, date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`, - address: "China" + address: "China", + sex: index % 2 === 0 ? "男" : "女" }); }); diff --git a/src/views/pure-table/high/table-select/multiple/columns.tsx b/src/views/pure-table/high/table-select/multiple/columns.tsx index 0966d22ef..1c0296b94 100644 --- a/src/views/pure-table/high/table-select/multiple/columns.tsx +++ b/src/views/pure-table/high/table-select/multiple/columns.tsx @@ -1,10 +1,27 @@ import { message } from "@/utils/message"; import { tableDataEdit } from "../../data"; -import { ref, reactive, type Ref } from "vue"; +import { type Ref, ref, reactive } from "vue"; import type { PaginationProps } from "@pureadmin/table"; +import { cloneDeep, isAllEmpty } from "@pureadmin/utils"; -export function useColumns(selectRef: Ref, tableRef: Ref) { +export function useColumns(selectRef: Ref, formRef: Ref, tableRef: Ref) { + const tableData = ref(tableDataEdit); + const cloneTableData = cloneDeep(tableData.value); const selectValue = ref([]); + const searchForm = reactive({ + sexValue: "", + searchDate: "" + }); + const sexOptions = [ + { + value: 0, + label: "男" + }, + { + value: 1, + label: "女" + } + ]; const columns: TableColumnList = [ { type: "selection", @@ -14,20 +31,24 @@ export function useColumns(selectRef: Ref, tableRef: Ref) { { label: "ID", prop: "id", - width: 80 - }, - { - label: "日期", - prop: "date", - minWidth: 120 + width: 50 }, { label: "姓名", prop: "name" }, + { + label: "性别", + prop: "sex" + }, { label: "地址", prop: "address" + }, + { + label: "日期", + prop: "date", + minWidth: 120 } ]; @@ -36,7 +57,7 @@ export function useColumns(selectRef: Ref, tableRef: Ref) { pageSize: 5, currentPage: 1, layout: "prev, pager, next", - total: tableDataEdit.length, + total: tableData.value.length, background: true, small: true }); @@ -49,9 +70,32 @@ export function useColumns(selectRef: Ref, tableRef: Ref) { selectValue.value = arr; }; + const onSearch = () => { + tableData.value = cloneTableData; + if (!isAllEmpty(searchForm.sexValue)) { + let sex = sexOptions + .map(sex => sex.value === Number(searchForm.sexValue) && sex.label) + .filter(Boolean)[0]; + tableData.value = tableData.value.filter(data => data.sex === sex); + } + if (!isAllEmpty(searchForm.searchDate)) { + tableData.value = tableData.value.filter( + data => data.date === searchForm.searchDate + ); + } + pagination.total = tableData.value.length; + }; + + const onReset = () => { + formRef.value.resetFields(); + onClear(); + tableData.value = cloneTableData; + pagination.total = tableData.value.length; + }; + const removeTag = ({ id }) => { const { toggleRowSelection } = tableRef.value.getTableRef(); - toggleRowSelection(tableDataEdit.filter(v => v.id == id)?.[0], false); + toggleRowSelection(tableData.value.filter(v => v.id == id)?.[0], false); }; const onClear = () => { @@ -67,12 +111,16 @@ export function useColumns(selectRef: Ref, tableRef: Ref) { }; return { + searchForm, + sexOptions, columns, pagination, selectValue, - tableDataEdit, + tableData, onSure, onClear, + onReset, + onSearch, removeTag, handleSelectionChange }; diff --git a/src/views/pure-table/high/table-select/multiple/index.vue b/src/views/pure-table/high/table-select/multiple/index.vue index 88a32e1ae..f932c4c95 100644 --- a/src/views/pure-table/high/table-select/multiple/index.vue +++ b/src/views/pure-table/high/table-select/multiple/index.vue @@ -2,18 +2,23 @@ import { ref } from "vue"; import { useColumns } from "./columns"; -const selectRef = ref(); +const formRef = ref(); const tableRef = ref(); +const selectRef = ref(); const { + searchForm, + sexOptions, columns, pagination, selectValue, - tableDataEdit, - onClear, + tableData, onSure, + onClear, + onReset, + onSearch, removeTag, handleSelectionChange -} = useColumns(selectRef, tableRef); +} = useColumns(selectRef, formRef, tableRef);