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
136
137
138
139
140
141
<template>
<BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="adaptiveWidth" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" class="menuForm" />
</BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, useAttrs } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema, ComponentTypes } from './menu.data';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { list, saveOrUpdateMenu } from './menu.api';
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
import { useI18n } from "/@/hooks/web/useI18n";
// 声明Emits
const emit = defineEmits(['success', 'register']);
const { adaptiveWidth } = useDrawerAdaptiveWidth();
const attrs = useAttrs();
const isUpdate = ref(true);
const menuType = ref(0);
const isButton = (type) => type === 2;
const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
labelCol: {
md: { span: 4 },
sm: { span: 6 },
},
wrapperCol: {
md: { span: 20 },
sm: { span: 18 },
},
schemas: formSchema,
showActionButtonGroup: false,
});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
await resetFields();
setDrawerProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
menuType.value = data?.record?.menuType;
//获取下拉树信息
const treeData = await list();
updateSchema([
{
field: 'parentId',
// update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
componentProps: { treeData: translateMenu(treeData, 'name') },
// update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8379】菜单管理页菜单国际化
},
{
field: 'name',
label: isButton(unref(menuType)) ? '按钮/权限' : '菜单名称',
},
{
field: 'url',
required: !isButton(unref(menuType)),
componentProps: {
onChange: (e) => onUrlChange(e.target.value),
},
},
]);
// 无论新增还是编辑，都可以设置表单值
if (typeof data.record === 'object') {
let values = { ...data.record };
setFieldsValue(values);
onUrlChange(values.url);
}
//按钮类型情况下，编辑时候清除一下地址的校验
if (menuType.value == 2) {
clearValidate();
}
//禁用表单
setProps({ disabled: !attrs.showFooter });
});
//获取弹窗标题
const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
//提交事件
async function handleSubmit() {
try {
const values = await validate();
// iframe兼容
if (ComponentTypes.IFrame === values.component) {
values.component = values.frameSrc;
}
setDrawerProps({ confirmLoading: true });
//提交表单
await saveOrUpdateMenu(values, unref(isUpdate));
closeDrawer();
emit('success');
} finally {
setDrawerProps({ confirmLoading: false });
}
}
/** url 变化时，动态设置组件名称placeholder */
function onUrlChange(url) {
let placeholder = '';
let httpUrl = url;
if (url != null && url != '') {
if (url.startsWith('/')) {
url = url.substring(1);
}
url = url.replaceAll('/', '-');
// 特殊标记
url = url.replaceAll(':', '@');
placeholder = `${url}`;
} else {
placeholder = '请输入组件名称';
}
updateSchema([{ field: 'componentName', componentProps: { placeholder } }]);
//update-begin---author:wangshuai ---date:20230204 for：[QQYUN-4058]菜单添加智能化处理------------
if (httpUrl != null && httpUrl != '') {
if (httpUrl.startsWith('http://') || httpUrl.startsWith('https://')) {
setFieldsValue({ component: httpUrl });
}
}
//update-end---author:wangshuai ---date:20230204 for：[QQYUN-4058]菜单添加智能化处理------------
}
/**
* 2024-03-06
* liaozhiyang
* 翻译菜单名称
*/
function translateMenu(data, key) {
if (data?.length) {
const { t } = useI18n();
data.forEach((item) => {
if (item[key]) {
if (item[key].includes("t('") && t) {
item[key] = new Function('t', `return ${item[key]}`)(t);
}
}
if (item.children?.length) {
translateMenu(item.children, key);
}
});
}
return data;
}
</script>