112 lines
3.4 KiB
Vue
112 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||
|
|
<el-scrollbar>
|
||
|
|
<el-form :inline="false" :model="form" label-width="120px">
|
||
|
|
<el-form-item label="上级菜单">
|
||
|
|
<el-cascader
|
||
|
|
v-model="form.pid"
|
||
|
|
:options="tableStore.table.data"
|
||
|
|
:props="cascaderProps"
|
||
|
|
style="width: 100%"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="菜单名称">
|
||
|
|
<el-input v-model="form.name" placeholder="请输入菜单名称" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="图标">
|
||
|
|
<IconSelector v-model="form.icon" placeholder="请选择图标" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="菜单路由">
|
||
|
|
<el-input v-model="form.path" placeholder="请输入菜单名称" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="组件路径">
|
||
|
|
<el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="排序">
|
||
|
|
<el-input-number v-model="form.sort" :min="0" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="菜单描述">
|
||
|
|
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-scrollbar>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="submit">确认</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, inject } from 'vue'
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
import TableStore from '@/utils/tableStore'
|
||
|
|
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||
|
|
import { updateMenu, addMenu } from '@/api/systerm'
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'auth/menu/popupMenu'
|
||
|
|
})
|
||
|
|
const emits = defineEmits<{
|
||
|
|
(e: 'init'): void
|
||
|
|
}>()
|
||
|
|
const tableStore = inject('tableStore') as TableStore
|
||
|
|
const cascaderProps = {
|
||
|
|
label: 'title',
|
||
|
|
value: 'id',
|
||
|
|
checkStrictly: true,
|
||
|
|
emitPath: false
|
||
|
|
}
|
||
|
|
const form: any = reactive({
|
||
|
|
code: '',
|
||
|
|
icon: '',
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
path: '',
|
||
|
|
pid: '0',
|
||
|
|
remark: '',
|
||
|
|
routeName: '',
|
||
|
|
sort: 100,
|
||
|
|
type: 0
|
||
|
|
})
|
||
|
|
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const title = ref('新增菜单')
|
||
|
|
const open = (text: string, data: anyObj) => {
|
||
|
|
console.log(data)
|
||
|
|
title.value = text
|
||
|
|
// 重置表单
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = ''
|
||
|
|
}
|
||
|
|
form.pid = data.pid || '0'
|
||
|
|
form.sort = 100
|
||
|
|
form.type = 0
|
||
|
|
|
||
|
|
if (data.id) {
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = data[key] ? data[key] : data[key] === 0 ? 0 : ''
|
||
|
|
}
|
||
|
|
form.path = data.routePath || ''
|
||
|
|
form.name = data.title || ''
|
||
|
|
}
|
||
|
|
dialogVisible.value = true
|
||
|
|
}
|
||
|
|
const submit = async () => {
|
||
|
|
if (form.id) {
|
||
|
|
await updateMenu(form)
|
||
|
|
} else {
|
||
|
|
form.code = 'menu'
|
||
|
|
let obj = JSON.parse(JSON.stringify(form))
|
||
|
|
delete obj.id
|
||
|
|
await addMenu(obj)
|
||
|
|
}
|
||
|
|
emits('init')
|
||
|
|
dialogVisible.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|