diff --git a/package.json b/package.json index 99d00e671..d97c6b499 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@logicflow/extension": "^1.2.22", "@pureadmin/descriptions": "^1.2.1", "@pureadmin/table": "^3.1.2", - "@pureadmin/utils": "^2.4.6", + "@pureadmin/utils": "^2.4.7", "@vueuse/core": "^10.9.0", "@vueuse/motion": "^2.1.0", "@wangeditor/editor": "^5.1.23", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f77db5288..cc7ee20d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ dependencies: specifier: ^3.1.2 version: 3.1.2(element-plus@2.6.1)(typescript@5.4.2) '@pureadmin/utils': - specifier: ^2.4.6 - version: 2.4.6(echarts@5.5.0)(vue@3.4.21) + specifier: ^2.4.7 + version: 2.4.7(echarts@5.5.0)(vue@3.4.21) '@vueuse/core': specifier: ^10.9.0 version: 10.9.0(vue@3.4.21) @@ -1758,7 +1758,7 @@ packages: element-plus: ^2.0.0 dependencies: '@element-plus/icons-vue': 2.3.1(vue@3.4.21) - '@pureadmin/utils': 2.4.6(echarts@5.5.0)(vue@3.4.21) + '@pureadmin/utils': 2.4.7(echarts@5.5.0)(vue@3.4.21) element-plus: 2.6.1(vue@3.4.21) vue: 3.4.21(typescript@5.4.2) transitivePeerDependencies: @@ -1785,8 +1785,8 @@ packages: string-hash: 1.1.3 dev: true - /@pureadmin/utils@2.4.6(echarts@5.5.0)(vue@3.4.21): - resolution: {integrity: sha512-TBN9fJhqrsjATvSHR1tDC4ZCQTvC6zMl2xj76lEJW7/VAX3OtNlb5073BAQBBMg7fXsAUXkMyBTwagsOZM5grg==} + /@pureadmin/utils@2.4.7(echarts@5.5.0)(vue@3.4.21): + resolution: {integrity: sha512-fUHwZm9wEtcxUk//bs8xoDe0XYAeoU/FbvAF9CM4Y5xBmaaXvzN+sSFCUyUKC08q4tmCyaHBeLNolO3I4t3X6Q==} peerDependencies: echarts: '*' vue: '*' diff --git a/src/views/pure-table/edit/data.ts b/src/views/pure-table/edit/data.ts index f49ec70dd..9ce85d053 100644 --- a/src/views/pure-table/edit/data.ts +++ b/src/views/pure-table/edit/data.ts @@ -1,68 +1,47 @@ -import dayjs from "dayjs"; - -const date = dayjs(new Date()).format("YYYY-MM-DD"); - const tableData = [ { - date, name: "Tom", sex: 0, // 0代表男 1代表女 - hobby: null + hobby: 2, + date: "2024-03-17" }, { - date, name: "Jack", sex: 0, - hobby: null + hobby: 1, + date: "2024-03-18" }, { - date, - name: "Dick", - sex: 0, - hobby: null + name: "Lily", + sex: 1, + hobby: 1, + date: "2024-03-19" }, { - 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 + name: "Mia", + sex: 1, + hobby: 3, + date: "2024-03-20" } ]; -export { tableData }; +const options = [ + { + value: 0, + label: "上午写代码" + }, + { + value: 1, + label: "下午写代码" + }, + { + value: 2, + label: "晚上写代码" + }, + { + value: 3, + label: "凌晨休息了" + } +]; + +export { tableData, options }; diff --git a/src/views/pure-table/edit/demo1/columns.tsx b/src/views/pure-table/edit/demo1/columns.tsx index 4b4782cca..30efd47e3 100644 --- a/src/views/pure-table/edit/demo1/columns.tsx +++ b/src/views/pure-table/edit/demo1/columns.tsx @@ -1,27 +1,9 @@ import { ref } from "vue"; +import { options } from "../data"; export function useColumns() { const dataList = ref([]); - const options = [ - { - value: 0, - label: "上午写代码" - }, - { - value: 1, - label: "下午写代码" - }, - { - value: 2, - label: "晚上写代码" - }, - { - value: 3, - label: "凌晨休息了" - } - ]; - const columns: TableColumnList = [ { label: "姓名", diff --git a/src/views/pure-table/edit/demo1/index.vue b/src/views/pure-table/edit/demo1/index.vue index 3dffddfa3..208bfd065 100644 --- a/src/views/pure-table/edit/demo1/index.vue +++ b/src/views/pure-table/edit/demo1/index.vue @@ -16,12 +16,12 @@ const { columns, dataList, onAdd, onDel } = useColumns(); @@ -50,3 +50,9 @@ const { columns, dataList, onAdd, onDel } = useColumns(); + + diff --git a/src/views/pure-table/edit/demo2/columns.tsx b/src/views/pure-table/edit/demo2/columns.tsx new file mode 100644 index 000000000..4d955f6aa --- /dev/null +++ b/src/views/pure-table/edit/demo2/columns.tsx @@ -0,0 +1,116 @@ +import { ref } from "vue"; +import { tableData, options } from "../data"; +import { clone, delObjectProperty } from "@pureadmin/utils"; + +export function useColumns() { + const editMap = ref({}); + const dataList = ref(clone(tableData, true)); + + const columns: TableColumnList = [ + { + label: "姓名", + prop: "name", + cellRenderer: ({ row, index }) => ( + <> + {editMap.value[index]?.editable ? ( + + ) : ( +

{row.name}

+ )} + + ) + }, + { + label: "性别", + prop: "sex", + cellRenderer: ({ row, index }) => ( + <> + {editMap.value[index]?.editable ? ( + + ) : ( +

{row.sex === 0 ? "男" : "女"}

+ )} + + ) + }, + { + label: "爱好", + prop: "hobby", + cellRenderer: ({ row, index }) => ( + <> + {editMap.value[index]?.editable ? ( + + {options.map(item => { + return ( + + ); + })} + + ) : ( + + {options.filter(opt => opt.value == row.hobby)[0]?.label} + + )} + + ) + }, + { + label: "日期", + prop: "date", + cellRenderer: ({ row, index }) => ( + <> + {editMap.value[index]?.editable ? ( + + ) : ( +

{row.date}

+ )} + + ), + minWidth: 110 + }, + { + label: "操作", + fixed: "right", + slot: "operation" + } + ]; + + function onEdit(row, index) { + editMap.value[index] = Object.assign({ ...row, editable: true }); + } + + function onSave(index) { + editMap.value[index].editable = false; + } + + function onCancel(index) { + editMap.value[index].editable = false; + dataList.value[index] = delObjectProperty(editMap.value[index], "editable"); + } + + return { + editMap, + columns, + dataList, + onEdit, + onSave, + onCancel + }; +} diff --git a/src/views/pure-table/edit/demo2/index.vue b/src/views/pure-table/edit/demo2/index.vue new file mode 100644 index 000000000..792827fc9 --- /dev/null +++ b/src/views/pure-table/edit/demo2/index.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/views/pure-table/edit/list.tsx b/src/views/pure-table/edit/list.tsx index eecc45adb..7c2e70ab8 100644 --- a/src/views/pure-table/edit/list.tsx +++ b/src/views/pure-table/edit/list.tsx @@ -1,4 +1,5 @@ import Demo1 from "./demo1/index.vue"; +import Demo2 from "./demo2/index.vue"; const rendContent = (val: string) => `代码位置：src/views/pure-table/edit/${val}/index.vue`; @@ -7,7 +8,13 @@ export const list = [ { key: "demo1", content: rendContent("demo1"), - title: "示例一", + title: "整体编辑", component: Demo1 + }, + { + key: "demo2", + content: rendContent("demo2"), + title: "单行编辑", + component: Demo2 } ];