From 44065a89784fd63a28e08824017f6f1ba20fbbb2 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Tue, 23 Jan 2024 23:49:50 +0800 Subject: [PATCH 1/2] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E7=81=B5=E5=8A=A8=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/tag/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue index a2ea3e250..3406320ea 100644 --- a/src/layout/components/tag/index.vue +++ b/src/layout/components/tag/index.vue @@ -588,7 +588,7 @@ onBeforeUnmount(() => { > -
Date: Wed, 24 Jan 2024 15:48:22 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8-=E5=A4=9A=E9=80=89=E6=B7=BB=E5=8A=A0`form`?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/enums.ts | 6 +- src/views/pure-table/high/data.ts | 3 +- .../high/table-select/multiple/columns.tsx | 70 ++++++++++++++++--- .../high/table-select/multiple/index.vue | 52 ++++++++++++-- 4 files changed, 111 insertions(+), 20 deletions(-) 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);