mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-03 07:50:25 +08:00
295 lines
10 KiB
Vue
295 lines
10 KiB
Vue
<template>
|
||
<div class="menu-dialog">
|
||
<el-dialog :title="title" :destroy-on-close="true" v-model="dialogVisible" width="769px">
|
||
<el-form :model="form" :inline="true" ref="menuForm" :rules="rules" label-width="95px">
|
||
<el-row :gutter="10">
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item prop="type" label="类型" required>
|
||
<el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择">
|
||
<el-option v-for="item in enums.ResourceTypeEnum as any" :key="item.value" :label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item prop="name" label="名称" required>
|
||
<el-input v-model.trim="form.name" placeholder="资源名[菜单名]" auto-complete="off"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item prop="code" label="path|code">
|
||
<el-input v-model.trim="form.code" placeholder="菜单不带/自动拼接父路径"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item label="序号" prop="weight" required>
|
||
<el-input v-model.trim="form.weight" type="number" placeholder="请输入序号"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue" label="图标">
|
||
<icon-selector v-model="form.meta.icon" type="ele" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="路由名">
|
||
<el-input v-model.trim="form.meta.routeName" placeholder="请输入路由名称"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="组件">
|
||
<el-input v-model.trim="form.meta.component" placeholder="请输入组件名"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否缓存">
|
||
<el-select v-model="form.meta.isKeepAlive" placeholder="请选择" width="w100">
|
||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
|
||
:value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否隐藏">
|
||
<el-select v-model="form.meta.isHide" placeholder="请选择" width="w100">
|
||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
|
||
:value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="tag不可删除">
|
||
<el-select v-model="form.meta.isAffix" placeholder="请选择" width="w100">
|
||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
|
||
:value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否iframe">
|
||
<el-select @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择"
|
||
width="w100">
|
||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
|
||
:value="item.value"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
|
||
<el-form-item v-if="form.type === menuTypeValue && form.meta.isIframe" prop="code"
|
||
label="iframe地址" width="w100">
|
||
<el-input v-model.trim="form.meta.link" placeholder="请输入iframe url"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<div>
|
||
<el-button @click="cancel()">取 消</el-button>
|
||
<el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, toRefs, reactive, watch } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import { resourceApi } from '../api';
|
||
import enums from '../enums';
|
||
import { notEmpty } from '@/common/assert';
|
||
import iconSelector from '@/components/iconSelector/index.vue';
|
||
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
},
|
||
data: {
|
||
type: [Boolean, Object],
|
||
},
|
||
title: {
|
||
type: String,
|
||
},
|
||
typeDisabled: {
|
||
type: Boolean,
|
||
},
|
||
})
|
||
|
||
//定义事件
|
||
const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
|
||
|
||
const menuForm: any = ref(null);
|
||
|
||
const menuTypeValue = enums.ResourceTypeEnum['MENU'].value
|
||
|
||
const defaultMeta = {
|
||
routeName: '',
|
||
icon: 'Menu',
|
||
redirect: '',
|
||
component: '',
|
||
isKeepAlive: true,
|
||
isHide: false,
|
||
isAffix: false,
|
||
isIframe: false,
|
||
link: '',
|
||
};
|
||
|
||
const rules = {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: '请输入资源名称',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
weight: [
|
||
{
|
||
required: true,
|
||
message: '请输入序号',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
}
|
||
|
||
const trueFalseOption = [
|
||
{
|
||
label: '是',
|
||
value: true,
|
||
},
|
||
{
|
||
label: '否',
|
||
value: false,
|
||
},
|
||
]
|
||
|
||
const state = reactive({
|
||
dialogVisible: false,
|
||
form: {
|
||
id: null,
|
||
name: null,
|
||
pid: null,
|
||
code: null,
|
||
type: null,
|
||
weight: 0,
|
||
meta: {
|
||
routeName: '',
|
||
icon: '',
|
||
redirect: '',
|
||
component: '',
|
||
isKeepAlive: true,
|
||
isHide: false,
|
||
isAffix: false,
|
||
isIframe: false,
|
||
link: '',
|
||
},
|
||
},
|
||
btnLoading: false,
|
||
});
|
||
|
||
const {
|
||
dialogVisible,
|
||
form,
|
||
btnLoading,
|
||
} = toRefs(state)
|
||
|
||
watch(props, (newValue: any) => {
|
||
state.dialogVisible = newValue.visible;
|
||
if (newValue.data) {
|
||
state.form = { ...newValue.data };
|
||
} else {
|
||
state.form = {} as any;
|
||
}
|
||
|
||
if (!state.form.meta) {
|
||
state.form.meta = defaultMeta;
|
||
}
|
||
|
||
// 不存在或false，都为false
|
||
const meta: any = state.form.meta;
|
||
state.form.meta.isKeepAlive = meta.isKeepAlive ? true : false;
|
||
state.form.meta.isHide = meta.isHide ? true : false;
|
||
state.form.meta.isAffix = meta.isAffix ? true : false;
|
||
state.form.meta.isIframe = meta.isIframe ? true : false;
|
||
});
|
||
|
||
// 改变iframe字段，如果为是，则设置默认的组件
|
||
const changeIsIframe = (value: boolean) => {
|
||
if (value) {
|
||
state.form.meta.component = 'RouterParent';
|
||
}
|
||
};
|
||
|
||
const btnOk = () => {
|
||
const submitForm = { ...state.form };
|
||
if (submitForm.type == 1) {
|
||
// 如果是菜单，则解析meta，如果值为false或者''则去除该值
|
||
submitForm.meta = parseMenuMeta(submitForm.meta);
|
||
} else {
|
||
submitForm.meta = null as any;
|
||
}
|
||
submitForm.weight = parseInt(submitForm.weight as any);
|
||
menuForm.value.validate((valid: any) => {
|
||
if (valid) {
|
||
resourceApi.save.request(submitForm).then(() => {
|
||
emit('val-change', submitForm);
|
||
state.btnLoading = true;
|
||
ElMessage.success('保存成功');
|
||
setTimeout(() => {
|
||
state.btnLoading = false;
|
||
}, 1000);
|
||
|
||
cancel();
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
};
|
||
|
||
const parseMenuMeta = (meta: any) => {
|
||
let metaForm: any = {};
|
||
// 如果是菜单，则校验meta
|
||
notEmpty(meta.routeName, '路由名不能为空');
|
||
metaForm.routeName = meta.routeName;
|
||
if (meta.isKeepAlive) {
|
||
metaForm.isKeepAlive = true;
|
||
}
|
||
if (meta.isHide) {
|
||
metaForm.isHide = true;
|
||
}
|
||
if (meta.isAffix) {
|
||
metaForm.isAffix = true;
|
||
}
|
||
if (meta.isIframe) {
|
||
metaForm.isIframe = true;
|
||
}
|
||
if (meta.link) {
|
||
metaForm.link = meta.link;
|
||
}
|
||
if (meta.redirect) {
|
||
metaForm.redirect = meta.redirect;
|
||
}
|
||
if (meta.component) {
|
||
metaForm.component = meta.component;
|
||
}
|
||
if (meta.icon) {
|
||
metaForm.icon = meta.icon;
|
||
}
|
||
return metaForm;
|
||
};
|
||
|
||
const cancel = () => {
|
||
emit('update:visible', false);
|
||
emit('cancel');
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
// .m-dialog {
|
||
// .el-cascader {
|
||
// width: 100%;
|
||
// }
|
||
// }
|
||
</style>
|