|
|
@@ -8,20 +8,22 @@
|
|
|
:title="isUpdate ? '修改菜单' : '添加菜单'"
|
|
|
@update:visible="updateVisible"
|
|
|
>
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="92px">
|
|
|
- <el-row :gutter="15">
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item label="上级菜单:">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="上级菜单:" prop="parentId">
|
|
|
<ele-tree-select
|
|
|
clearable
|
|
|
v-model="form.parentId"
|
|
|
:data="menuList"
|
|
|
- label-key="title"
|
|
|
- value-key="menuId"
|
|
|
+ label-key="name"
|
|
|
+ value-key="id"
|
|
|
default-expand-all
|
|
|
placeholder="请选择上级菜单"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
<el-form-item label="菜单名称:" prop="title">
|
|
|
<el-input
|
|
|
clearable
|
|
|
@@ -30,32 +32,16 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item label="菜单类型:">
|
|
|
- <el-radio-group v-model="form.menuType" @change="onMenuTypeChange">
|
|
|
- <el-radio :label="0">目录</el-radio>
|
|
|
- <el-radio :label="1">菜单</el-radio>
|
|
|
- <el-radio :label="2">按钮</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="打开方式:">
|
|
|
- <el-radio-group
|
|
|
- v-model="form.openType"
|
|
|
- :disabled="form.menuType === 0 || form.menuType === 2"
|
|
|
- @change="onOpenTypeChange"
|
|
|
- >
|
|
|
- <el-radio :label="0">组件</el-radio>
|
|
|
- <el-radio :label="1">内链</el-radio>
|
|
|
- <el-radio :label="2">外链</el-radio>
|
|
|
- </el-radio-group>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="路由地址:" prop="url">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="form.url"
|
|
|
+ placeholder="请输入路由地址"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
- <div style="margin: 6px 0 28px 0">
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- <el-row :gutter="15">
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-col :span="12">
|
|
|
<el-form-item label="菜单图标:">
|
|
|
<ele-icon-picker
|
|
|
v-model="form.icon"
|
|
|
@@ -63,100 +49,30 @@
|
|
|
:disabled="form.menuType === 2"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item name="path">
|
|
|
- <template v-slot:label>
|
|
|
- <el-tooltip
|
|
|
- v-if="form.openType === 2"
|
|
|
- placement="top"
|
|
|
- content="需要以`http://`、`https://`、`//`开头"
|
|
|
- >
|
|
|
- <i class="el-icon-_question"></i>
|
|
|
- </el-tooltip>
|
|
|
- <span>
|
|
|
- {{ form.openType === 2 ? ' 外链地址:' : ' 路由地址:' }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <el-input
|
|
|
- clearable
|
|
|
- v-model="form.path"
|
|
|
- :disabled="form.menuType === 2"
|
|
|
- :placeholder="pathPlaceholder"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item name="component">
|
|
|
- <template v-slot:label>
|
|
|
- <el-tooltip
|
|
|
- v-if="form.openType === 1"
|
|
|
- placement="top"
|
|
|
- content="需要以`http://`、`https://`、`//`开头"
|
|
|
- >
|
|
|
- <i class="el-icon-_question"></i>
|
|
|
- </el-tooltip>
|
|
|
- <span>
|
|
|
- {{ form.openType === 1 ? ' 内链地址:' : ' 组件路径:' }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <el-input
|
|
|
- clearable
|
|
|
- v-model="form.component"
|
|
|
- :disabled="
|
|
|
- form.menuType === 0 ||
|
|
|
- form.menuType === 2 ||
|
|
|
- form.openType === 2
|
|
|
- "
|
|
|
- :placeholder="componentPlaceholder"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item label="权限标识:">
|
|
|
- <el-input
|
|
|
- clearable
|
|
|
- v-model="form.authority"
|
|
|
- placeholder="请输入权限标识"
|
|
|
- :disabled="
|
|
|
- form.menuType === 0 ||
|
|
|
- (form.menuType === 1 && form.openType === 2)
|
|
|
- "
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="排序号:" prop="sortNumber">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="排序号:" prop="sort">
|
|
|
<el-input-number
|
|
|
:min="0"
|
|
|
- v-model="form.sortNumber"
|
|
|
+ v-model="form.sort"
|
|
|
placeholder="请输入排序号"
|
|
|
controls-position="right"
|
|
|
class="ele-fluid ele-text-left"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="是否展示:">
|
|
|
- <el-switch
|
|
|
- :active-value="0"
|
|
|
- :inactive-value="1"
|
|
|
- v-model="form.hide"
|
|
|
- :disabled="form.menuType === 2"
|
|
|
- />
|
|
|
- <el-tooltip
|
|
|
- placement="top"
|
|
|
- content="选择不展示只注册路由不显示在侧边栏, 比如添加页面应该选择不展示"
|
|
|
- >
|
|
|
- <i
|
|
|
- class="el-icon-_question"
|
|
|
- style="vertical-align: middle; margin-left: 8px"
|
|
|
- ></i>
|
|
|
- </el-tooltip>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="菜单类型:">
|
|
|
+ <el-radio-group v-model="form.type" @change="onMenuTypeChange">
|
|
|
+ <el-radio :label="1">菜单</el-radio>
|
|
|
+ <el-radio :label="2">按钮</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-form-item label="路由元数据:" prop="meta">
|
|
|
- <el-input
|
|
|
- :rows="4"
|
|
|
- type="textarea"
|
|
|
- :maxlength="200"
|
|
|
- v-model="form.meta"
|
|
|
- placeholder="请输入JSON格式的路由元数据"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
+ <!-- <div style="margin: 6px 0 28px 0">
|
|
|
+ <el-divider />
|
|
|
+ </div> -->
|
|
|
</el-form>
|
|
|
<template v-slot:footer>
|
|
|
<el-button @click="updateVisible(false)">取消</el-button>
|
|
|
@@ -204,41 +120,9 @@
|
|
|
form: { ...defaultForm },
|
|
|
// 表单验证规则
|
|
|
rules: {
|
|
|
- title: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请输入菜单名称',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ],
|
|
|
- sortNumber: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请输入排序号',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ],
|
|
|
- meta: [
|
|
|
- {
|
|
|
- trigger: 'blur',
|
|
|
- validator: (_rule, value, callback) => {
|
|
|
- if (value) {
|
|
|
- const error = new Error('请输入正确的JSON格式');
|
|
|
- try {
|
|
|
- const obj = JSON.parse(value);
|
|
|
- if (typeof obj !== 'object' || obj === null) {
|
|
|
- callback(error);
|
|
|
- return;
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- callback(error);
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- callback();
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
+ title: [{required: true,message: '请输入菜单名称',trigger: 'blur'}],
|
|
|
+ sort: [{required: true,message: '请输入排序号', trigger: 'blur'}],
|
|
|
+ parentId: [{required: true,message: '请选择上级菜单', trigger: 'blur'}],
|
|
|
},
|
|
|
// 提交状态
|
|
|
loading: false,
|
|
|
@@ -292,21 +176,21 @@
|
|
|
},
|
|
|
/* menuType选择改变 */
|
|
|
onMenuTypeChange() {
|
|
|
- if (this.form.menuType === 0) {
|
|
|
- this.form.authority = null;
|
|
|
- this.form.openType = 0;
|
|
|
- this.form.component = null;
|
|
|
- } else if (this.form.menuType === 1) {
|
|
|
- if (this.form.openType === 2) {
|
|
|
- this.form.authority = null;
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.form.openType = 0;
|
|
|
- this.form.icon = null;
|
|
|
- this.form.path = null;
|
|
|
- this.form.component = null;
|
|
|
- this.form.hide = 0;
|
|
|
- }
|
|
|
+ // if (this.form.menuType === 0) {
|
|
|
+ // this.form.authority = null;
|
|
|
+ // this.form.openType = 0;
|
|
|
+ // this.form.component = null;
|
|
|
+ // } else if (this.form.menuType === 1) {
|
|
|
+ // if (this.form.openType === 2) {
|
|
|
+ // this.form.authority = null;
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // this.form.openType = 0;
|
|
|
+ // this.form.icon = null;
|
|
|
+ // this.form.path = null;
|
|
|
+ // this.form.component = null;
|
|
|
+ // this.form.hide = 0;
|
|
|
+ // }
|
|
|
},
|
|
|
/* openType选择改变 */
|
|
|
onOpenTypeChange() {
|