From 26a940c0306644e30f6877dbef24e0413ec744d1 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sun, 17 Mar 2024 14:16:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20`pure-admin-table`=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8F=AF=E7=BC=96=E8=BE=91=E8=A1=A8=E6=A0=BC=E7=9A=84=E7=AE=80?= =?UTF-8?q?=E6=98=93=E7=94=A8=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/en.yaml | 1 + locales/zh-CN.yaml | 1 + src/router/modules/table.ts | 9 ++ src/views/pure-table/edit.vue | 82 +++++++++++++++ src/views/pure-table/edit/data.ts | 68 +++++++++++++ src/views/pure-table/edit/demo1/columns.tsx | 105 ++++++++++++++++++++ src/views/pure-table/edit/demo1/index.vue | 52 ++++++++++ src/views/pure-table/edit/empty.svg | 1 + src/views/pure-table/edit/list.tsx | 13 +++ 9 files changed, 332 insertions(+) create mode 100644 src/views/pure-table/edit.vue create mode 100644 src/views/pure-table/edit/data.ts create mode 100644 src/views/pure-table/edit/demo1/columns.tsx create mode 100644 src/views/pure-table/edit/demo1/index.vue create mode 100644 src/views/pure-table/edit/empty.svg create mode 100644 src/views/pure-table/edit/list.tsx diff --git a/locales/en.yaml b/locales/en.yaml index 37830a4e3..af00d37e5 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -130,6 +130,7 @@ menus: hsdanmaku: Danmaku hsPureTableBase: Base Usage hsPureTableHigh: High Usage + hsPureTableEdit: Edit Usage hsboard: Paint Board hsMenuoverflow: Menu Overflow Show Tooltip Text hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index bb95d6ed3..cc6281b21 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -130,6 +130,7 @@ menus: hsdanmaku: 弹幕 hsPureTableBase: 基础用法（23个示例） hsPureTableHigh: 高级用法（11个示例） + hsPureTableEdit: 可编辑用法 hsboard: 艺术画板 hsMenuoverflow: 目录超出显示 Tooltip 文字提示 hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示 diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts index b02329606..fe360605d 100644 --- a/src/router/modules/table.ts +++ b/src/router/modules/table.ts @@ -25,6 +25,15 @@ export default { meta: { title: $t("menus.hsPureTableHigh") } + }, + { + path: "/pure-table/edit", + name: "PureTableEdit", + component: () => import("@/views/pure-table/edit.vue"), + meta: { + title: $t("menus.hsPureTableEdit"), + extraIcon: "IF-pure-iconfont-new svg" + } } ] } satisfies RouteConfigsTable; diff --git a/src/views/pure-table/edit.vue b/src/views/pure-table/edit.vue new file mode 100644 index 000000000..d251dd1ee --- /dev/null +++ b/src/views/pure-table/edit.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/views/pure-table/edit/data.ts b/src/views/pure-table/edit/data.ts new file mode 100644 index 000000000..f49ec70dd --- /dev/null +++ b/src/views/pure-table/edit/data.ts @@ -0,0 +1,68 @@ +import dayjs from "dayjs"; + +const date = dayjs(new Date()).format("YYYY-MM-DD"); + +const tableData = [ + { + date, + name: "Tom", + sex: 0, // 0代表男 1代表女 + hobby: null + }, + { + date, + name: "Jack", + sex: 0, + hobby: null + }, + { + date, + name: "Dick", + sex: 0, + hobby: null + }, + { + date, + name: "Harry", + sex: 0, + hobby: null + }, + { + date, + name: "Sam", + sex: 0, + hobby: null + }, + { + date, + name: "Lucy", + sex: 0, + hobby: null + }, + { + date, + name: "Mary", + sex: 0, + hobby: null + }, + { + date, + name: "Mike", + sex: 0, + hobby: null + }, + { + date, + name: "Mike1", + sex: 0, + hobby: null + }, + { + date, + name: "Mike2", + sex: 0, + hobby: null + } +]; + +export { tableData }; diff --git a/src/views/pure-table/edit/demo1/columns.tsx b/src/views/pure-table/edit/demo1/columns.tsx new file mode 100644 index 000000000..4b4782cca --- /dev/null +++ b/src/views/pure-table/edit/demo1/columns.tsx @@ -0,0 +1,105 @@ +import { ref } from "vue"; + +export function useColumns() { + const dataList = ref([]); + + const options = [ + { + value: 0, + label: "上午写代码" + }, + { + value: 1, + label: "下午写代码" + }, + { + value: 2, + label: "晚上写代码" + }, + { + value: 3, + label: "凌晨休息了" + } + ]; + + const columns: TableColumnList = [ + { + label: "姓名", + prop: "name", + cellRenderer: ({ row }) => + }, + { + label: "性别", + prop: "sex", + cellRenderer: ({ row }) => ( + + ) + }, + { + label: "爱好", + prop: "hobby", + cellRenderer: ({ row }) => ( + + {options.map(item => { + return ( + + ); + })} + + ) + }, + { + label: "日期", + prop: "date", + cellRenderer: ({ row }) => ( + + ), + minWidth: 110 + }, + { + label: "操作", + fixed: "right", + width: 90, + slot: "operation" + } + ]; + + function onAdd() { + dataList.value.push({ + id: dataList.value.length + 1, + name: "", + sex: 0, + hobby: "", + date: "" + }); + } + + function onDel(row) { + const index = dataList.value.indexOf(row); + if (index !== -1) dataList.value.splice(index, 1); + } + + return { + columns, + dataList, + onAdd, + onDel + }; +} diff --git a/src/views/pure-table/edit/demo1/index.vue b/src/views/pure-table/edit/demo1/index.vue new file mode 100644 index 000000000..3dffddfa3 --- /dev/null +++ b/src/views/pure-table/edit/demo1/index.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/views/pure-table/edit/empty.svg b/src/views/pure-table/edit/empty.svg new file mode 100644 index 000000000..5c8b211ce --- /dev/null +++ b/src/views/pure-table/edit/empty.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/pure-table/edit/list.tsx b/src/views/pure-table/edit/list.tsx new file mode 100644 index 000000000..eecc45adb --- /dev/null +++ b/src/views/pure-table/edit/list.tsx @@ -0,0 +1,13 @@ +import Demo1 from "./demo1/index.vue"; + +const rendContent = (val: string) => + `代码位置：src/views/pure-table/edit/${val}/index.vue`; + +export const list = [ + { + key: "demo1", + content: rendContent("demo1"), + title: "示例一", + component: Demo1 + } +];