1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
|
| import type { VbenFormSchema } from '#/adapter/form';
| import type { OnActionClickFn } from '#/adapter/vxe-table';
| import type { SystemDeptApi } from '#/api/system/dept';
|
| import { z } from '#/adapter/form';
| import { getDeptList } from '#/api/system/dept';
| import { $t } from '#/locales';
|
| /**
| * 获取编辑表单的字段配置。如果没有使用多语言，可以直接export一个数组常量
| */
| export function useSchema(): VbenFormSchema[] {
| return [
| {
| component: 'Input',
| fieldName: 'name',
| label: $t('system.dept.deptName'),
| rules: z
| .string()
| .min(2, $t('ui.formRules.minLength', [$t('system.dept.deptName'), 2]))
| .max(
| 20,
| $t('ui.formRules.maxLength', [$t('system.dept.deptName'), 20]),
| ),
| },
| {
| component: 'ApiTreeSelect',
| componentProps: {
| allowClear: true,
| api: getDeptList,
| class: 'w-full',
| labelField: 'name',
| valueField: 'id',
| childrenField: 'children',
| },
| fieldName: 'pid',
| label: $t('system.dept.parentDept'),
| },
| {
| component: 'RadioGroup',
| componentProps: {
| buttonStyle: 'solid',
| options: [
| { label: $t('common.enabled'), value: 1 },
| { label: $t('common.disabled'), value: 0 },
| ],
| optionType: 'button',
| },
| defaultValue: 1,
| fieldName: 'status',
| label: $t('system.dept.status'),
| },
| {
| component: 'Textarea',
| componentProps: {
| maxLength: 50,
| rows: 3,
| showCount: true,
| },
| fieldName: 'remark',
| label: $t('system.dept.remark'),
| rules: z
| .string()
| .max(50, $t('ui.formRules.maxLength', [$t('system.dept.remark'), 50]))
| .optional(),
| },
| ];
| }
|
| /**
| * 获取表格列配置
| * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
| * @param onActionClick 表格操作按钮点击事件
| */
| export function useColumns(
| onActionClick?: OnActionClickFn<SystemDeptApi.SystemDept>,
| ): VxeTableGridOptions<SystemDeptApi.SystemDept>['columns'] {
| return [
| {
| align: 'left',
| field: 'name',
| fixed: 'left',
| title: $t('system.dept.deptName'),
| treeNode: true,
| width: 150,
| },
| {
| cellRender: { name: 'CellTag' },
| field: 'status',
| title: $t('system.dept.status'),
| width: 100,
| },
| {
| field: 'createTime',
| title: $t('system.dept.createTime'),
| width: 180,
| },
| {
| field: 'remark',
| title: $t('system.dept.remark'),
| },
| {
| align: 'right',
| cellRender: {
| attrs: {
| nameField: 'name',
| nameTitle: $t('system.dept.name'),
| onClick: onActionClick,
| },
| name: 'CellOperation',
| options: [
| {
| code: 'append',
| text: '新增下级',
| },
| 'edit', // 默认的编辑按钮
| {
| code: 'delete', // 默认的删除按钮
| disabled: (row: SystemDeptApi.SystemDept) => {
| return !!(row.children && row.children.length > 0);
| },
| },
| ],
| },
| field: 'operation',
| fixed: 'right',
| headerAlign: 'center',
| showOverflow: false,
| title: $t('system.dept.operation'),
| width: 200,
| },
| ];
| }
|
|
