mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-04 00:10:25 +08:00
feat: 前端升级至vue3，后端代码结构重构，新增权限管理相关功能
This commit is contained in:
meilin.huang
288
mayfly_go_web/src/views/system/resource/ResourceEdit.vue
Normal file
288
mayfly_go_web/src/views/system/resource/ResourceEdit.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div class="menu-dialog">
|
||||
<el-dialog :title="title" :destroy-on-close="true" v-model="visible" width="700px">
|
||||
<el-form :model="form" :inline="true" ref="menuForm" :rules="rules" label-width="95px" size="small">
|
||||
<el-form-item prop="type" label="类型" required>
|
||||
<el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择" width="50px">
|
||||
<el-option v-for="item in enums.ResourceTypeEnum" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="name" label="名称" required>
|
||||
<el-input v-model.trim="form.name" placeholder="资源名[菜单名]" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="code" label="path|code">
|
||||
<el-input v-model.trim="form.code" placeholder="菜单为路由path"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="序号" prop="weight" required>
|
||||
<el-input v-model.trim="form.weight" type="number" placeholder="请输入序号"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" label="图标">
|
||||
<icon-selector v-model="form.meta.icon" :isAllOn="true" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="路由名">
|
||||
<el-input v-model.trim="form.meta.routeName" placeholder="请输入路由名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="组件">
|
||||
<el-input v-model.trim="form.meta.component" placeholder="请输入组件名"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否缓存">
|
||||
<el-select v-model="form.meta.isKeepAlive" placeholder="请选择">
|
||||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否隐藏">
|
||||
<el-select v-model="form.meta.isHide" placeholder="请选择" width="50px">
|
||||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="tag不可删除">
|
||||
<el-select v-model="form.meta.isAffix" placeholder="请选择">
|
||||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否iframe">
|
||||
<el-select @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择">
|
||||
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value && form.meta.isIframe" prop="code" label="iframe地址">
|
||||
<el-input v-model.trim="form.meta.link" placeholder="请输入iframe url"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div style="text-align: center" class="dialog-footer mt10">
|
||||
<el-button type="primary" :loading="btnLoading" @click="btnOk" size="mini">确 定</el-button>
|
||||
<el-button @click="cancel()" size="mini">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, toRefs, reactive, watch, defineComponent } 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';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResourceEdit',
|
||||
components: {
|
||||
iconSelector,
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
},
|
||||
data: {
|
||||
type: [Boolean, Object],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
typeDisabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
setup(props: any, { emit }) {
|
||||
const menuForm: any = ref(null);
|
||||
|
||||
const defaultMeta = {
|
||||
routeName: '',
|
||||
icon: 'el-icon-menu',
|
||||
redirect: '',
|
||||
component: '',
|
||||
isKeepAlive: true,
|
||||
isHide: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
trueFalseOption: [
|
||||
{
|
||||
label: '是',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: '否',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
visible: false,
|
||||
//弹出框对象
|
||||
dialogForm: {
|
||||
title: '',
|
||||
visible: false,
|
||||
data: {},
|
||||
},
|
||||
props: {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
},
|
||||
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,
|
||||
},
|
||||
},
|
||||
// 资源类型选择是否禁用
|
||||
// typeDisabled: false,
|
||||
btnLoading: false,
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入资源名称',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
weight: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入序号',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
watch(props, (newValue, oldValue) => {
|
||||
state.visible = 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((res) => {
|
||||
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');
|
||||
setTimeout(() => {
|
||||
menuForm.value.resetFields();
|
||||
// 重置对象属性为null
|
||||
state.form = {} as any;
|
||||
}, 200);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
enums,
|
||||
changeIsIframe,
|
||||
menuForm,
|
||||
btnOk,
|
||||
cancel,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .m-dialog {
|
||||
// .el-cascader {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
Reference in New Issue
Block a user