|
@@ -154,40 +154,53 @@
|
|
|
<el-form-item label="菜单类型" prop="menuType">
|
|
|
<el-radio-group v-model="form.menuType">
|
|
|
<el-radio label="M">目录</el-radio>
|
|
|
- <el-radio label="C" :disabled="form.menuType == 'M' && form.children.length > 0">菜单</el-radio>
|
|
|
+ <el-radio
|
|
|
+ label="C"
|
|
|
+ :disabled="form.menuType == 'M' && form.children.length > 0"
|
|
|
+ >菜单</el-radio
|
|
|
+ >
|
|
|
<el-radio label="F">按钮</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item v-if="form.menuType != 'F'" label="菜单图标">
|
|
|
- <el-popover
|
|
|
- placement="bottom-start"
|
|
|
- width="460"
|
|
|
- trigger="click"
|
|
|
- @show="$refs['iconSelect'].reset()"
|
|
|
- >
|
|
|
- <IconSelect ref="iconSelect" @selected="selected" />
|
|
|
- <el-input
|
|
|
- slot="reference"
|
|
|
- v-model="form.icon"
|
|
|
- placeholder="点击选择图标"
|
|
|
- readonly
|
|
|
+ <div class="dis_flex">
|
|
|
+ <el-popover
|
|
|
+ placement="bottom-start"
|
|
|
+ width="460"
|
|
|
+ trigger="click"
|
|
|
+ @show="$refs['iconSelect'].reset()"
|
|
|
+ >
|
|
|
+ <IconSelect ref="iconSelect" @selected="selected" />
|
|
|
+ <el-input
|
|
|
+ slot="reference"
|
|
|
+ v-model="form.icon"
|
|
|
+ placeholder="点击选择图标"
|
|
|
+ readonly
|
|
|
+ >
|
|
|
+ <svg-icon
|
|
|
+ v-if="form.icon"
|
|
|
+ slot="prefix"
|
|
|
+ :icon-class="form.icon"
|
|
|
+ class="el-input__icon"
|
|
|
+ style="height: 32px; width: 16px"
|
|
|
+ />
|
|
|
+ <i
|
|
|
+ v-else
|
|
|
+ slot="prefix"
|
|
|
+ class="el-icon-search el-input__icon"
|
|
|
+ />
|
|
|
+ </el-input>
|
|
|
+ </el-popover>
|
|
|
+ <el-button
|
|
|
+ v-if="form.icon && form.icon != '#'"
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="form.icon = '#'"
|
|
|
+ >清空</el-button
|
|
|
>
|
|
|
- <svg-icon
|
|
|
- v-if="form.icon"
|
|
|
- slot="prefix"
|
|
|
- :icon-class="form.icon"
|
|
|
- class="el-input__icon"
|
|
|
- style="height: 32px; width: 16px"
|
|
|
- />
|
|
|
- <i
|
|
|
- v-else
|
|
|
- slot="prefix"
|
|
|
- class="el-icon-search el-input__icon"
|
|
|
- />
|
|
|
- </el-input>
|
|
|
- </el-popover>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
@@ -308,10 +321,10 @@ export default {
|
|
|
menuName: undefined,
|
|
|
visible: undefined,
|
|
|
},
|
|
|
- showListMenu:[],
|
|
|
+ showListMenu: [],
|
|
|
// 表单参数
|
|
|
form: {
|
|
|
- children : []
|
|
|
+ children: [],
|
|
|
},
|
|
|
// 表单校验
|
|
|
rules: {
|
|
@@ -348,7 +361,7 @@ export default {
|
|
|
this.loading = true;
|
|
|
this.$api.getsystemmenu(this.queryParams).then((response) => {
|
|
|
this.menuList = this.handleTree(response.data, "menuId");
|
|
|
- this.showListMenu = response.data
|
|
|
+ this.showListMenu = response.data;
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
@@ -377,9 +390,9 @@ export default {
|
|
|
// },
|
|
|
/** 查询菜单下拉树结构 */
|
|
|
getTreeselect() {
|
|
|
- this.$api.getsystemmenu().then(response => {
|
|
|
+ this.$api.getsystemmenu().then((response) => {
|
|
|
this.menuOptions = [];
|
|
|
- const menu = { menuId: 0, menuName: '主类目', children: [] };
|
|
|
+ const menu = { menuId: 0, menuName: "主类目", children: [] };
|
|
|
menu.children = this.handleTree(response.data, "menuId");
|
|
|
this.menuOptions.push(menu);
|
|
|
});
|
|
@@ -389,7 +402,11 @@ export default {
|
|
|
if (row.menuType == "F") {
|
|
|
return "";
|
|
|
}
|
|
|
- console.log("this.visibleOptions, row.visible",this.visibleOptions, row.visible)
|
|
|
+ console.log(
|
|
|
+ "this.visibleOptions, row.visible",
|
|
|
+ this.visibleOptions,
|
|
|
+ row.visible
|
|
|
+ );
|
|
|
return this.selectDictLabel(this.visibleOptions, row.visible);
|
|
|
},
|
|
|
// 菜单状态字典翻译
|
|
@@ -407,7 +424,7 @@ export default {
|
|
|
// 表单重置
|
|
|
reset() {
|
|
|
this.form = {
|
|
|
- children:[],
|
|
|
+ children: [],
|
|
|
menuId: undefined,
|
|
|
parentId: 0,
|
|
|
menuName: undefined,
|
|
@@ -434,7 +451,7 @@ export default {
|
|
|
handleAdd(row) {
|
|
|
this.reset();
|
|
|
this.getTreeselect();
|
|
|
- if (row != null && row.menuId && row.menuType === 'M') {
|
|
|
+ if (row != null && row.menuId && row.menuType === "M") {
|
|
|
this.form.parentId = row.menuId;
|
|
|
} else {
|
|
|
this.form.parentId = 0;
|
|
@@ -444,14 +461,14 @@ export default {
|
|
|
},
|
|
|
/** 修改按钮操作 */
|
|
|
handleUpdate(row) {
|
|
|
- var self = this
|
|
|
+ var self = this;
|
|
|
this.reset();
|
|
|
this.getTreeselect();
|
|
|
this.$api.enutreeselectmenu(row.menuId).then((response) => {
|
|
|
- var children = self.showListMenu.filter(item => {
|
|
|
- return item.parentId === response.data.menuId
|
|
|
- })
|
|
|
- response.data.children = children
|
|
|
+ var children = self.showListMenu.filter((item) => {
|
|
|
+ return item.parentId === response.data.menuId;
|
|
|
+ });
|
|
|
+ response.data.children = children;
|
|
|
self.form = response.data;
|
|
|
self.open = true;
|
|
|
self.title = "修改菜单";
|
|
@@ -503,3 +520,12 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.dis_flex {
|
|
|
+ display: flex;
|
|
|
+ & > span {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|