|
@@ -7,8 +7,14 @@
|
|
|
<el-col :lg="12">
|
|
|
<h2>{{ i18n_formTitle || '新增菜单' }}</h2>
|
|
|
<el-form ref="dialogForm" :model="form" :rules="rules" label-width="80px" label-position="right">
|
|
|
- <el-form-item label="上级菜单" prop="parentName">
|
|
|
- <el-input v-model="form.parentName" disabled clearable placeholder="顶级菜单"></el-input>
|
|
|
+ <el-form-item label="上级菜单" prop="pid">
|
|
|
+ <el-cascader
|
|
|
+ v-model="form.pid"
|
|
|
+ :options="menuTreeList"
|
|
|
+ :props="{ value: 'id', label: 'title', children: 'children', checkStrictly: true }"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <!-- <el-input v-model="form.parentName" disabled clearable placeholder="顶级菜单"></el-input>-->
|
|
|
</el-form-item>
|
|
|
<el-form-item class="local_form-item_title" label="显示名称" prop="title">
|
|
|
<template #label>
|
|
@@ -117,7 +123,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, computed } from 'vue'
|
|
|
+import { ref, computed, onMounted } from 'vue'
|
|
|
import resource from '@/api/system/resource'
|
|
|
import IconPicker from '@/components/IconPicker/index.vue'
|
|
|
import ScFormTable from '@/components/ScFormTable'
|
|
@@ -126,8 +132,7 @@ import { generateTitle } from '@/utils/i18n'
|
|
|
const dialogForm = ref()
|
|
|
const form = ref({
|
|
|
id: '',
|
|
|
- pid: '',
|
|
|
- parentName: '',
|
|
|
+ pid: [],
|
|
|
alias: '',
|
|
|
path: '',
|
|
|
component: '',
|
|
@@ -142,6 +147,7 @@ const form = ref({
|
|
|
// 指定父级菜单(路由)名称
|
|
|
parentRoute: ''
|
|
|
})
|
|
|
+const menuTreeList = ref()
|
|
|
const i18n_formTitle = computed(() => {
|
|
|
return generateTitle(form.value.title)
|
|
|
})
|
|
@@ -157,6 +163,7 @@ const apiListAddTemplate = ref({
|
|
|
url: ''
|
|
|
})
|
|
|
const loading = ref(false)
|
|
|
+const $myEmit = defineEmits(['successCb'])
|
|
|
|
|
|
// methods
|
|
|
const save = () =>
|
|
@@ -167,6 +174,7 @@ const save = () =>
|
|
|
try {
|
|
|
await resource.resourceAddOrEditSaveApi(form.value)
|
|
|
ElMessage.success('保存成功')
|
|
|
+ $myEmit('successCb')
|
|
|
loading.value = false
|
|
|
} catch (e) {
|
|
|
loading.value = false
|
|
@@ -185,8 +193,10 @@ const setData = async data => {
|
|
|
loading.value = false
|
|
|
form.value = {
|
|
|
...data,
|
|
|
+ pid: [data.pid],
|
|
|
apiList: res
|
|
|
}
|
|
|
+ console.log(form.value, 'form.value =')
|
|
|
// dialogForm.value?.validateField()
|
|
|
dialogForm.value?.resetFields()
|
|
|
} catch (e) {
|
|
@@ -196,6 +206,14 @@ const setData = async data => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 获取菜单列表
|
|
|
+const getTreeMenu = async () => {
|
|
|
+ let data = await resource.resourceListTreeApi()
|
|
|
+ menuTreeList.value = data
|
|
|
+}
|
|
|
+
|
|
|
+getTreeMenu()
|
|
|
+
|
|
|
// 父组件使用的话需要导出
|
|
|
defineExpose({
|
|
|
setData
|