diff --git a/package.json b/package.json index dab3d77..ac77664 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "front-next", - "version": "5.6.1", + "version": "5.6.2", "scripts": { "dev": "vite --host", "build": "vite build", diff --git a/src/modules/dict/views/list.vue b/src/modules/dict/views/list.vue index 590a822..db90dbc 100644 --- a/src/modules/dict/views/list.vue +++ b/src/modules/dict/views/list.vue @@ -11,8 +11,6 @@ - - @@ -26,13 +24,13 @@ prop: 'orderNum', order: 'ascending' }" + row-key="id" + @row-click="onRowClick" /> - - @@ -47,6 +45,8 @@ import { useCrud, useTable, useUpsert } from "@cool-vue/crud"; import { useCool } from "/@/cool"; import Group from "../components/group.vue"; import { computed, provide, ref } from "vue"; +import { deepTree } from "/@/cool/utils"; +import { cloneDeep } from "lodash-es"; const { service, named } = useCool(); @@ -60,16 +60,47 @@ const title = computed(() => { return group.value ? `字典列表(${group.value.name})` : "字典列表"; }); +// 列表 +const list = ref([]); + // cl-upsert 配置 const Upsert = useUpsert({ dialog: { width: "600px" }, props: { - labelWidth: "60px" + labelWidth: "100px" }, items: [ - { label: "名称", prop: "name", required: true, component: { name: "el-input" } }, + { + label: "上级节点", + prop: "parentId", + component: { + name: "el-tree-select", + props: { + data: computed(() => { + const id = Upsert.value?.getForm("id"); + + return deepTree( + cloneDeep(list.value.filter((e) => (id ? e.id != id : true))) + ); + }), + props: { + label: "name", + value: "id" + }, + filterable: true, + "default-expand-all": true, + "check-strictly": true + } + } + }, + { + label: "名称", + prop: "name", + required: true, + component: { name: "el-input" } + }, { label: "排序", prop: "orderNum", @@ -92,20 +123,61 @@ const Upsert = useUpsert({ // cl-table 配置 const Table = useTable({ + contextMenu: [ + "refresh", + (row) => { + return { + label: "新增", + hidden: !service.dict.info._permission?.add, + callback(done) { + append(row); + done(); + } + }; + }, + "edit", + "delete", + "order-asc", + "order-desc" + ], columns: [ - { type: "selection" }, - { label: "名称", prop: "name" }, + { label: "名称", prop: "name", align: "left" }, { label: "排序", prop: "orderNum", sortable: "custom" }, { label: "备注", prop: "remark", showOverflowTooltip: true }, { label: "创建时间", prop: "createTime", sortable: "custom" }, { label: "更新时间", prop: "updateTime", sortable: "custom" }, - { type: "op", buttons: ["edit", "delete"] } + { + type: "op", + width: 250, + buttons: [ + service.dict.info._permission?.add && { + label: "新增", + type: "success", + onClick({ scope }) { + append(scope.row); + } + }, + "edit", + "delete" + ] + } ] }); // cl-crud 配置 const Crud = useCrud({ - service: service.dict.info + service: service.dict.info, + onRefresh(params, { render }) { + service.dict.info + .list({ + typeId: group.value.id, + ...params + }) + .then((res) => { + list.value = cloneDeep(res); + render(deepTree(res)); + }); + } }); // 刷新 @@ -118,6 +190,21 @@ function setGroup(data: any) { group.value = data; } +// 行点击展开 +function onRowClick(row: any, column: any) { + if (column?.property && row.children) { + Table.value?.toggleRowExpansion(row); + } +} + +// 追加子集 +function append(row: any) { + Crud.value?.rowAppend({ + parentId: row.id, + orderNum: 1 + }); +} + provide("dict", { group, refresh,