|
|
@@ -11,7 +11,7 @@
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="上级菜单:" prop="parentId">
|
|
|
+ <el-form-item label="上级菜单:">
|
|
|
<ele-tree-select
|
|
|
clearable
|
|
|
v-model="form.parentId"
|
|
|
@@ -24,10 +24,10 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="菜单名称:" prop="title">
|
|
|
+ <el-form-item label="菜单名称:" prop="name">
|
|
|
<el-input
|
|
|
clearable
|
|
|
- v-model="form.title"
|
|
|
+ v-model="form.name"
|
|
|
placeholder="请输入菜单名称"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
@@ -46,7 +46,7 @@
|
|
|
<ele-icon-picker
|
|
|
v-model="form.icon"
|
|
|
placeholder="请选择菜单图标"
|
|
|
- :disabled="form.menuType === 2"
|
|
|
+ :disabled="form.type === 2"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -62,7 +62,7 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="菜单类型:">
|
|
|
+ <el-form-item label="菜单类型:" prop="type">
|
|
|
<el-radio-group v-model="form.type" @change="onMenuTypeChange">
|
|
|
<el-radio :label="1">菜单</el-radio>
|
|
|
<el-radio :label="2">按钮</el-radio>
|
|
|
@@ -85,7 +85,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { EleIconPicker } from 'ele-admin';
|
|
|
- import { addMenu, updateMenu } from '@/api/system/menu';
|
|
|
+ import { saveOrUpdate } from '@/api/system/menu';
|
|
|
|
|
|
export default {
|
|
|
components: { EleIconPicker },
|
|
|
@@ -95,24 +95,20 @@
|
|
|
// 修改回显的数据
|
|
|
data: Object,
|
|
|
// 上级菜单id
|
|
|
- parentId: Number,
|
|
|
+ parentId: [Number,String],
|
|
|
// 全部菜单数据
|
|
|
menuList: Array
|
|
|
},
|
|
|
data() {
|
|
|
const defaultForm = {
|
|
|
- menuId: null,
|
|
|
+ id: null,
|
|
|
parentId: '',
|
|
|
- title: '',
|
|
|
- menuType: 0,
|
|
|
- openType: 0,
|
|
|
+ name: '',
|
|
|
+ type: 1,
|
|
|
icon: '',
|
|
|
- path: '',
|
|
|
- component: '',
|
|
|
- authority: '',
|
|
|
- sortNumber: null,
|
|
|
- hide: 0,
|
|
|
- meta: ''
|
|
|
+ url: '',
|
|
|
+ sort: null,
|
|
|
+ permissionCode:1
|
|
|
};
|
|
|
return {
|
|
|
defaultForm,
|
|
|
@@ -120,9 +116,10 @@
|
|
|
form: { ...defaultForm },
|
|
|
// 表单验证规则
|
|
|
rules: {
|
|
|
- title: [{required: true,message: '请输入菜单名称',trigger: 'blur'}],
|
|
|
+ name: [{required: true,message: '请输入菜单名称',trigger: 'blur'}],
|
|
|
sort: [{required: true,message: '请输入排序号', trigger: 'blur'}],
|
|
|
- parentId: [{required: true,message: '请选择上级菜单', trigger: 'blur'}],
|
|
|
+ url: [{required: true,message: '请输入菜单路由', trigger: 'blur'}],
|
|
|
+ type: [{required: true,message: '请选择菜单类型', trigger: 'blur'}],
|
|
|
},
|
|
|
// 提交状态
|
|
|
loading: false,
|
|
|
@@ -131,16 +128,16 @@
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- pathPlaceholder() {
|
|
|
- return this.form.openType === 2 ? '请输入外链地址' : '请输入路由地址';
|
|
|
- },
|
|
|
- componentPlaceholder() {
|
|
|
- return this.form.openType === 1 ? '请输入内链地址' : '请输入组件路径';
|
|
|
- },
|
|
|
- // 是否开启响应式布局
|
|
|
- styleResponsive() {
|
|
|
- return this.$store.state.theme.styleResponsive;
|
|
|
- }
|
|
|
+ // pathPlaceholder() {
|
|
|
+ // return this.form.openType === 2 ? '请输入外链地址' : '请输入路由地址';
|
|
|
+ // },
|
|
|
+ // componentPlaceholder() {
|
|
|
+ // return this.form.openType === 1 ? '请输入内链地址' : '请输入组件路径';
|
|
|
+ // },
|
|
|
+ // // 是否开启响应式布局
|
|
|
+ // styleResponsive() {
|
|
|
+ // return this.$store.state.theme.styleResponsive;
|
|
|
+ // }
|
|
|
},
|
|
|
methods: {
|
|
|
/* 保存编辑 */
|
|
|
@@ -153,14 +150,21 @@
|
|
|
const data = {
|
|
|
...this.form,
|
|
|
// menuType 对应的值与后端不一致在前端处理
|
|
|
- menuType: this.form.menuType === 2 ? 1 : 0,
|
|
|
+ // type: this.form.type === 2 ? 1 : 0,
|
|
|
parentId: this.form.parentId || 0
|
|
|
};
|
|
|
- const saveOrUpdate = this.isUpdate ? updateMenu : addMenu;
|
|
|
+ // const saveOrUpdate = this.isUpdate ? updateMenu : addMenu;
|
|
|
+ if(!this.isUpdate){
|
|
|
+ delete data.id
|
|
|
+ }
|
|
|
saveOrUpdate(data)
|
|
|
- .then((msg) => {
|
|
|
+ .then(res => {
|
|
|
this.loading = false;
|
|
|
- this.$message.success(msg);
|
|
|
+ if(this.isUpdate){
|
|
|
+ this.$message.success('菜单编辑成功');
|
|
|
+ }else{
|
|
|
+ this.$message.success('菜单新增成功');
|
|
|
+ }
|
|
|
this.updateVisible(false);
|
|
|
this.$emit('done');
|
|
|
})
|
|
|
@@ -200,36 +204,35 @@
|
|
|
}
|
|
|
},
|
|
|
/* 判断是否是外链 */
|
|
|
- isUrl(url) {
|
|
|
- return !!(
|
|
|
- url &&
|
|
|
- (url.startsWith('http://') ||
|
|
|
- url.startsWith('https://') ||
|
|
|
- url.startsWith('//'))
|
|
|
- );
|
|
|
- },
|
|
|
+ // isUrl(url) {
|
|
|
+ // return !!(
|
|
|
+ // url &&
|
|
|
+ // (url.startsWith('http://') ||
|
|
|
+ // url.startsWith('https://') ||
|
|
|
+ // url.startsWith('//'))
|
|
|
+ // );
|
|
|
+ // },
|
|
|
/* 判断是否是目录 */
|
|
|
- isDirectory(d) {
|
|
|
- return !!d.children?.length && !d.component;
|
|
|
- }
|
|
|
+ // isDirectory(d) {
|
|
|
+ // return !!d.children?.length && !d.component;
|
|
|
+ // }
|
|
|
},
|
|
|
watch: {
|
|
|
visible(visible) {
|
|
|
if (visible) {
|
|
|
if (this.data) {
|
|
|
- const isInnerLink = this.isUrl(this.data.component) ? 1 : 0;
|
|
|
+ // const isInnerLink = this.isUrl(this.data.component) ? 1 : 0;
|
|
|
// menuType 对应的值与后端不一致在前端处理
|
|
|
- const menuType =
|
|
|
- this.data.menuType === 1
|
|
|
- ? 2
|
|
|
- : this.isDirectory(this.data)
|
|
|
- ? 0
|
|
|
- : 1;
|
|
|
+ // const menuType =
|
|
|
+ // this.data.type === 1
|
|
|
+ // ? 2
|
|
|
+ // : this.isDirectory(this.data)
|
|
|
+ // ? 0
|
|
|
+ // : 1;
|
|
|
this.$util.assignObject(this.form, {
|
|
|
...this.data,
|
|
|
- menuType,
|
|
|
- openType: this.isUrl(this.data.path) ? 2 : isInnerLink,
|
|
|
- parentId: this.data.parentId === 0 ? '' : this.data.parentId ?? ''
|
|
|
+ // openType: this.isUrl(this.data.path) ? 2 : isInnerLink,
|
|
|
+ parentId: this.data.parentId == 0 ? '' : this.data.parentId ?? ''
|
|
|
});
|
|
|
this.isUpdate = true;
|
|
|
} else {
|
LAPTOP-16IUEB3P\Lenovo