GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增测试树表

Browse Source
This commit is contained in:
xlsea 2025-05-10 19:32:20 +08:00
parent 4a4febeeab
commit fd0783a50f
18 changed files with 601 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/template/index-tree.vue.vm vendored
View File

@ -6,6 +6,7 @@ import { fetchBatchDelete${BusinessName}, fetchGet${BusinessName}List } from '@/
import { useAppStore } from '@/store/modules/app';
import { useAuth } from '@/hooks/business/auth';
import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
import { useDownload } from '@/hooks/business/download';
import { $t } from '@/locales';
import ButtonIcon from '@/components/custom/button-icon.vue';
import ${BusinessName}OperateDrawer from './modules/${business__name}-operate-drawer.vue';
@ -45,7 +46,7 @@ const {
#end
params: {}
},
idField: #foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!,
idField: '#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end',
columns: () => [
{
type: 'selection',
@ -93,7 +94,7 @@ const {
type="primary"
icon="material-symbols:drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}
onClick={() => edit(row)}
/>
);
};
@ -148,19 +149,23 @@ async function handleDelete(#foreach($column in $columns)#if($column.isPk == '1'
onDeleted();
}
async function edit(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>) {
function edit(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>) {
handleEdit(row);
}
async function addInRow(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>) {
function addInRow(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>) {
editingData.value = jsonClone(row);
handleAdd();
}
function handleExport() {
download('/${moduleName}/${businessName}/export', searchParams, `${functionName}_#[[${new Date().getTime()}]]#.xlsx`);
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<${BusinessName}Search v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
<${BusinessName}Search v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
<NCard title="${functionName}列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<TableHeaderOperation
@ -176,13 +181,13 @@ async function addInRow(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>
@refresh="getData"
>
<template #prefix>
<NButton v-if="!isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="expandAll">
<NButton v-if="!isCollapse" :disabled="!data.length" size="small" @click="expandAll">
<template #icon>
<icon-quill:expand />
</template>
全部展开
</NButton>
<NButton v-if="isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="collapseAll">
<NButton v-if="isCollapse" :disabled="!data.length" size="small" @click="collapseAll">
<template #icon>
<icon-quill:collapse />
</template>
@ -193,6 +198,7 @@ async function addInRow(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>
</template>
<NDataTable
v-model:checked-row-keys="checkedRowKeys"
v-model::expanded-row-keys="expandedRowKeys"
:columns="columns"
:data="data"
size="small"
@ -201,14 +207,13 @@ async function addInRow(row: TableDataWithIndex<Api.$ModuleName.${BusinessName}>
:loading="loading"
remote
:row-key="row => row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end"
:pagination="mobilePagination"
class="sm:h-full"
/>
<${BusinessName}OperateDrawer
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="getDataByPage"
@submitted="getData"
/>
</NCard>
</div>

4
docs/template/index.vue.vm vendored
View File

@ -137,11 +137,11 @@ async function handleDelete(#foreach($column in $columns)#if($column.isPk == '1'
onDeleted();
}
async function edit(#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end: CommonType.IdType) {
function edit(#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end: CommonType.IdType) {
handleEdit('#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end', #foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end);
}
async function handleExport() {
function handleExport() {
download('/${moduleName}/${businessName}/export', searchParams, `${functionName}_#[[${new Date().getTime()}]]#.xlsx`);
}
</script>

2
src/components/custom/user-select.vue
View File

@ -14,7 +14,7 @@ interface Props {
defineProps<Props>();
const value = defineModel<CommonType.IdType[] | null>('value', { required: false });
const value = defineModel<CommonType.IdType | null>('value', { required: false });
const attrs: SelectProps = useAttrs();

6
src/hooks/common/tree-table.ts
View File

@ -57,7 +57,9 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(
});
// if defaultExpandAll is true, expand all nodes
expandedRowKeys.value = defaultExpandAll ? records.map(item => item[idField]) : [records[0][idField]];
expandedRowKeys.value = defaultExpandAll
? records.map(item => item[idField])
: records.filter(item => item[parentIdField] === 0).map(item => item[idField]) || [];
return { data: treeData };
},
@ -138,7 +140,7 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(
/** collapse all nodes */
function collapseAll() {
toggleCollapse();
expandedRowKeys.value = data.value.length ? [data.value[0][idField]] : [];
expandedRowKeys.value = [];
}
scope.run(() => {

3
src/locales/langs/en-us.ts
View File

@ -189,7 +189,8 @@ const local: App.I18n.Schema = {
'user-center': 'User Center',
system_role: 'Role Management',
demo: 'Demo',
demo_demo: 'Demo Table'
demo_demo: 'Demo Table',
demo_tree: 'Demo Tree'
},
page: {
login: {

3
src/locales/langs/zh-cn.ts
View File

@ -189,7 +189,8 @@ const local: App.I18n.Schema = {
'user-center': '个人中心',
system_role: '角色管理',
demo: '测试',
demo_demo: '测试单表'
demo_demo: '测试单表',
demo_tree: '测试树表'
},
page: {
login: {

1
src/router/elegant/imports.ts
View File

@ -23,6 +23,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
"social-callback": () => import("@/views/_builtin/social-callback/index.vue"),
"user-center": () => import("@/views/_builtin/user-center/index.vue"),
demo_demo: () => import("@/views/demo/demo/index.vue"),
demo_tree: () => import("@/views/demo/tree/index.vue"),
home: () => import("@/views/home/index.vue"),
monitor_cache: () => import("@/views/monitor/cache/index.vue"),
"monitor_login-infor": () => import("@/views/monitor/login-infor/index.vue"),

9
src/router/elegant/routes.ts
View File

@ -56,6 +56,15 @@ export const generatedRoutes: GeneratedRoute[] = [
title: 'demo_demo',
i18nKey: 'route.demo_demo'
}
},
{
name: 'demo_tree',
path: '/demo/tree',
component: 'view.demo_tree',
meta: {
title: 'demo_tree',
i18nKey: 'route.demo_tree'
}
}
]
},

1
src/router/elegant/transform.ts
View File

@ -168,6 +168,7 @@ const routeMap: RouteMap = {
"500": "/500",
"demo": "/demo",
"demo_demo": "/demo/demo",
"demo_tree": "/demo/tree",
"home": "/home",
"iframe-page": "/iframe-page/:url",
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",

8
src/service/api/demo/demo.ts
View File

@ -1,6 +1,6 @@
import { request } from '@/service/request';
/** 获取测试单列表 */
/** 获取测试单表列表 */
export function fetchGetDemoList(params?: Api.Demo.DemoSearchParams) {
return request<Api.Demo.DemoList>({
url: '/demo/demo/list',
@ -9,7 +9,7 @@ export function fetchGetDemoList(params?: Api.Demo.DemoSearchParams) {
});
}
/** 新增测试单 */
/** 新增测试单表 */
export function fetchCreateDemo(data: Api.Demo.DemoOperateParams) {
return request<boolean>({
url: '/demo/demo',
@ -18,7 +18,7 @@ export function fetchCreateDemo(data: Api.Demo.DemoOperateParams) {
});
}
/** 修改测试单 */
/** 修改测试单表 */
export function fetchUpdateDemo(data: Api.Demo.DemoOperateParams) {
return request<boolean>({
url: '/demo/demo',
@ -27,7 +27,7 @@ export function fetchUpdateDemo(data: Api.Demo.DemoOperateParams) {
});
}
/** 批量删除测试单 */
/** 批量删除测试单表 */
export function fetchBatchDeleteDemo(ids: CommonType.IdType[]) {
return request<boolean>({
url: `/demo/demo/${ids.join(',')}`,

2
src/typings/elegant-router.d.ts vendored
View File

@ -22,6 +22,7 @@ declare module "@elegant-router/types" {
"500": "/500";
"demo": "/demo";
"demo_demo": "/demo/demo";
"demo_tree": "/demo/tree";
"home": "/home";
"iframe-page": "/iframe-page/:url";
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
@ -114,6 +115,7 @@ declare module "@elegant-router/types" {
| "social-callback"
| "user-center"
| "demo_demo"
| "demo_tree"
| "home"
| "monitor_cache"
| "monitor_login-infor"

14
src/views/demo/demo/index.vue
View File

@ -48,12 +48,6 @@ const {
align: 'center',
width: 48
},
{
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
},
{
key: 'id',
title: '主键',
@ -62,13 +56,13 @@ const {
},
{
key: 'deptId',
title: '部门id',
title: '部门 ID',
align: 'center',
minWidth: 120
},
{
key: 'userId',
title: '用户id',
title: '用户 ID',
align: 'center',
minWidth: 120
},
@ -168,14 +162,14 @@ async function edit(id: CommonType.IdType) {
}
async function handleExport() {
download('/demo/demo/export', searchParams, `测试单_${new Date().getTime()}.xlsx`);
download('/demo/demo/export', searchParams, `测试单表_${new Date().getTime()}.xlsx`);
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<DemoSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
<NCard title="测试单列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<NCard title="测试单表列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"

4
src/views/demo/demo/modules/demo-operate-drawer.vue
View File

@ -32,8 +32,8 @@ const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: '新增测试单',
edit: '编辑测试单'
add: '新增测试单表',
edit: '编辑测试单表'
};
return titles[props.operateType];
});

237
src/views/demo/tree/index.vue Normal file
View File

@ -0,0 +1,237 @@
<script setup lang="tsx">
import { NDivider } from 'naive-ui';
import { jsonClone } from '@sa/utils';
import { type TableDataWithIndex } from '@sa/hooks';
import { fetchBatchDeleteTree, fetchGetTreeList } from '@/service/api/demo/tree';
import { useAppStore } from '@/store/modules/app';
import { useAuth } from '@/hooks/business/auth';
import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
import { useDownload } from '@/hooks/business/download';
import { $t } from '@/locales';
import ButtonIcon from '@/components/custom/button-icon.vue';
import TreeOperateDrawer from './modules/tree-operate-drawer.vue';
import TreeSearch from './modules/tree-search.vue';
defineOptions({
name: 'TreeList'
});
const appStore = useAppStore();
const { download } = useDownload();
const { hasAuth } = useAuth();
const {
columns,
columnChecks,
data,
getData,
loading,
searchParams,
resetSearchParams,
expandedRowKeys,
isCollapse,
expandAll,
collapseAll
} = useTreeTable({
apiFn: fetchGetTreeList,
apiParams: {
pageNum: 1,
pageSize: 10,
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
// the value can not be undefined, otherwise the property in Form will not be reactive
parentId: null,
deptId: null,
userId: null,
treeName: null,
params: {}
},
idField: 'id',
columns: () => [
{
type: 'selection',
align: 'center',
width: 48
},
{
key: 'id',
title: '主键',
align: 'center',
minWidth: 120
},
{
key: 'parentId',
title: '父 ID',
align: 'center',
minWidth: 120
},
{
key: 'deptId',
title: '部门 ID',
align: 'center',
minWidth: 120
},
{
key: 'userId',
title: '用户 ID',
align: 'center',
minWidth: 120
},
{
key: 'treeName',
title: '值',
align: 'center',
minWidth: 120
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => {
const addBtn = () => {
return (
<ButtonIcon
text
type="primary"
icon="material-symbols:add-2-rounded"
tooltipContent={$t('common.add')}
onClick={() => addInRow(row)}
/>
);
};
const editBtn = () => {
return (
<ButtonIcon
text
type="primary"
icon="material-symbols:drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row)}
/>
);
};
const deleteBtn = () => {
return (
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.id!)}
/>
);
};
const buttons = [];
if (hasAuth('demo:tree:add')) buttons.push(addBtn());
if (hasAuth('demo:tree:edit')) buttons.push(editBtn());
if (hasAuth('demo:tree:remove')) buttons.push(deleteBtn());
return (
<div class="flex-center gap-8px">
{buttons.map((btn, index) => (
<>
{index !== 0 && <NDivider vertical />}
{btn}
</>
))}
</div>
);
}
}
]
});
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
useTreeTableOperate(data, getData);
async function handleBatchDelete() {
// request
const { error } = await fetchBatchDeleteTree(checkedRowKeys.value);
if (error) return;
onBatchDeleted();
}
async function handleDelete(id: CommonType.IdType) {
// request
const { error } = await fetchBatchDeleteTree([id]);
if (error) return;
onDeleted();
}
async function edit(row: TableDataWithIndex<Api.Demo.Tree>) {
handleEdit(row);
}
function addInRow(row: TableDataWithIndex<Api.Demo.Tree>) {
editingData.value = jsonClone(row);
handleAdd();
}
function handleExport() {
download('/demo/tree/export', searchParams, `demo_tree_#[[${new Date().getTime()}]]#.xlsx`);
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<TreeSearch v-model:model="searchParams" :tree-list="data" @reset="resetSearchParams" @search="getData" />
{{ expandedRowKeys }}
<NCard title="测试树列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0"
:loading="loading"
:show-add="hasAuth('demo:tree:add')"
:show-delete="hasAuth('demo:tree:remove')"
:show-export="false"
@add="handleAdd"
@delete="handleBatchDelete"
@export="handleExport"
@refresh="getData"
>
<template #prefix>
<NButton v-if="!isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="expandAll">
<template #icon>
<icon-quill:expand />
</template>
全部展开
</NButton>
<NButton v-if="isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="collapseAll">
<template #icon>
<icon-quill:collapse />
</template>
全部收起
</NButton>
</template>
</TableHeaderOperation>
</template>
<NDataTable
v-model:checked-row-keys="checkedRowKeys"
v-model:expanded-row-keys="expandedRowKeys"
:columns="columns"
:data="data"
size="small"
:flex-height="!appStore.isMobile"
:scroll-x="962"
:loading="loading"
remote
:row-key="row => row.id"
class="sm:h-full"
/>
<TreeOperateDrawer
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
:tree-list="data"
@submitted="getData"
/>
</NCard>
</div>
</template>
<style scoped></style>

156
src/views/demo/tree/modules/tree-operate-drawer.vue Normal file
View File

@ -0,0 +1,156 @@
<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { fetchCreateTree, fetchUpdateTree } from '@/service/api/demo/tree';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'TreeOperateDrawer'
});
interface Props {
/** the type of operation */
operateType: NaiveUI.TableOperateType;
/** the edit row data */
rowData?: Api.Demo.Tree | null;
/** the tree data */
treeList?: Api.Demo.Tree[] | null;
}
const props = defineProps<Props>();
interface Emits {
(e: 'submitted'): void;
}
const emit = defineEmits<Emits>();
const visible = defineModel<boolean>('visible', {
default: false
});
const { formRef, validate, restoreValidation } = useNaiveForm();
const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: '新增测试树',
edit: '编辑测试树'
};
return titles[props.operateType];
});
type Model = Api.Demo.TreeOperateParams;
const model: Model = reactive(createDefaultModel());
function createDefaultModel(): Model {
return {
parentId: null,
deptId: null,
userId: null,
treeName: ''
};
}
type RuleKey = Extract<keyof Model, 'id' | 'parentId' | 'deptId' | 'userId' | 'treeName'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
id: createRequiredRule('主键不能为空'),
parentId: createRequiredRule('父 ID 不能为空'),
deptId: createRequiredRule('部门不能为空'),
userId: createRequiredRule('用户不能为空'),
treeName: createRequiredRule('值不能为空')
};
function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') {
Object.assign(model, createDefaultModel());
model.parentId = props.rowData?.id || 0;
return;
}
if (props.operateType === 'edit' && props.rowData) {
Object.assign(model, props.rowData);
}
}
function closeDrawer() {
visible.value = false;
}
async function handleSubmit() {
await validate();
// request
if (props.operateType === 'add') {
const { parentId, deptId, userId, treeName } = model;
const { error } = await fetchCreateTree({ parentId, deptId, userId, treeName });
if (error) return;
}
if (props.operateType === 'edit') {
const { id, parentId, deptId, userId, treeName } = model;
const { error } = await fetchUpdateTree({ id, parentId, deptId, userId, treeName });
if (error) return;
}
window.$message?.success($t('common.updateSuccess'));
closeDrawer();
emit('submitted');
}
watch(visible, () => {
if (visible.value) {
handleUpdateModelWhenEdit();
restoreValidation();
}
});
const treeOptions = computed(() => {
return [
{
id: 0,
treeName: '顶级节点',
children: props.treeList!
}
];
});
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem label="父 ID" path="parentId">
<NTreeSelect
v-model:value="model.parentId"
filterable
class="h-full"
key-field="id"
label-field="treeName"
:options="treeOptions"
:default-expanded-keys="[0]"
/>
</NFormItem>
<NFormItem label="部门" path="deptId">
<DeptTreeSelect v-model:value="model.deptId" placeholder="请选择部门" />
</NFormItem>
<NFormItem label="用户" path="userId">
<UserSelect v-model:value="model.userId" placeholder="请选择用户" />
</NFormItem>
<NFormItem label="值" path="treeName">
<NInput v-model:value="model.treeName" placeholder="请输入值" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
</template>
<style scoped></style>

88
src/views/demo/tree/modules/tree-search.vue Normal file
View File

@ -0,0 +1,88 @@
<script setup lang="ts">
import { useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'TreeSearch'
});
interface Props {
/** the tree list */
treeList?: Api.Demo.Tree[] | null;
}
defineProps<Props>();
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.Demo.TreeSearchParams>('model', { required: true });
async function reset() {
Object.assign(model.value.params!, {});
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="父 ID" path="parentId" class="pr-24px">
<NTreeSelect
v-model:value="model.parentId"
filterable
class="h-full"
key-field="id"
label-field="treeName"
:options="treeList!"
:default-expanded-keys="[0]"
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="部门" path="deptId" class="pr-24px">
<DeptTreeSelect v-model:value="model.deptId" placeholder="请选择部门" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="用户" path="userId" class="pr-24px">
<UserSelect v-model:value="model.userId" placeholder="请选择用户" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="值" path="treeName" class="pr-24px">
<NInput v-model:value="model.treeName" placeholder="请输入值" />
</NFormItemGi>
<NFormItemGi :show-feedback="false" span="24" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
</NCard>
</template>
<style scoped></style>

7
src/views/system/dept/index.vue
View File

@ -174,13 +174,13 @@ async function addInRow(row: TableDataWithIndex<Api.System.Dept>) {
@refresh="getData"
>
<template #prefix>
<NButton v-if="!isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="expandAll">
<NButton v-if="!isCollapse" :disabled="!data.length" size="small" @click="expandAll">
<template #icon>
<icon-quill:expand />
</template>
全部展开
</NButton>
<NButton v-if="isCollapse" :disabled="!expandedRowKeys.length" size="small" @click="collapseAll">
<NButton v-if="isCollapse" :disabled="!data.length" size="small" @click="collapseAll">
<template #icon>
<icon-quill:collapse />
</template>
@ -190,6 +190,7 @@ async function addInRow(row: TableDataWithIndex<Api.System.Dept>) {
</TableHeaderOperation>
</template>
<NDataTable
v-model:expanded-row-keys="expandedRowKeys"
:columns="columns"
:data="data"
size="small"
@ -198,9 +199,7 @@ async function addInRow(row: TableDataWithIndex<Api.System.Dept>) {
:loading="loading"
:indent="28"
:row-key="row => row.deptId"
:expanded-row-keys="expandedRowKeys"
class="sm:h-full"
@update:expanded-row-keys="keys => (expandedRowKeys = keys)"
/>
<DeptOperateDrawer
v-model:visible="drawerVisible"

69
src/views/tool/gen/modules/gen-table-operate-drawer.vue
View File

@ -65,6 +65,9 @@ type InfoRuleKey = Extract<
| 'parentMenuId'
| 'genType'
| 'genPath'
| 'treeCode'
| 'treeParentCode'
| 'treeName'
>;
const infoRules: Record<InfoRuleKey, App.Global.FormRule> = {
@ -75,7 +78,10 @@ const infoRules: Record<InfoRuleKey, App.Global.FormRule> = {
functionName: defaultRequiredRule,
parentMenuId: defaultRequiredRule,
genType: defaultRequiredRule,
genPath: defaultRequiredRule
genPath: defaultRequiredRule,
treeCode: defaultRequiredRule,
treeParentCode: defaultRequiredRule,
treeName: defaultRequiredRule
};
async function getGenTableInfo() {
@ -369,6 +375,67 @@ const columns: NaiveUI.TableColumn<Api.Tool.GenTableColumn>[] = [
<NInput v-model:value="genTableInfo.info.genPath" />
</NFormItemGi>
</NGrid>
<template v-if="genTableInfo.info.tplCategory === 'tree'">
<NDivider>其他信息</NDivider>
<NGrid :x-gap="16" responsive="screen" item-responsive>
<NFormItemGi span="24 s:12" path="treeCode">
<template #label>
<div class="flex-center">
<FormTip content="树显示的编码字段名， 如：dept_id" />
<span>树编码字段</span>
</div>
</template>
<NSelect
v-model:value="genTableInfo.info.treeCode"
placeholder="请选择树编码字段"
:options="
genTableInfo.rows.map(column => ({
value: column.columnName,
label: column.columnName + '：' + column.columnComment
}))
"
/>
</NFormItemGi>
<NFormItemGi span="24 s:12" path="treeParentCode">
<template #label>
<div class="flex-center">
<FormTip content="树显示的父编码字段名， 如：parent_Id" />
<span>树父编码字段</span>
</div>
</template>
<NSelect
v-model:value="genTableInfo.info.treeParentCode"
placeholder="请选择树父编码字段"
:options="
genTableInfo.rows.map(column => ({
value: column.columnName,
label: column.columnName + '：' + column.columnComment
}))
"
/>
</NFormItemGi>
<NFormItemGi span="24 s:12" path="treeName">
<template #label>
<div class="flex-center">
<FormTip content="树节点的显示名称字段名， 如：dept_name" />
<span>树名称字段</span>
</div>
</template>
<NSelect
v-model:value="genTableInfo.info.treeName"
placeholder="请选择树名称字段"
:options="
genTableInfo.rows.map(column => ({
value: column.columnName,
label: column.columnName + '：' + column.columnComment
}))
"
/>
</NFormItemGi>
</NGrid>
</template>
</NForm>
</NTabPane>
</NTabs>