update .gitignore
This commit is contained in:
@@ -1,340 +1,340 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-alert type="warning">
|
||||
<template slot="message">当前没有写入字段[重定向]</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<div class="yo-form-group">
|
||||
<!-- 表单控件 -->
|
||||
<h3>基本信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="菜单类型" prop="type">
|
||||
<template slot="help">
|
||||
目录：默认添加在顶级
|
||||
<br />菜单：
|
||||
<br />按钮：
|
||||
</template>
|
||||
<a-radio-group @change="onTypeChange" v-model="form.type">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="名称" prop="name">
|
||||
<a-input placeholder="请输入名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属应用" prop="application">
|
||||
<a-select @change="onLoadMenuTree" placeholder="请选择所属应用" v-model="form.application">
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in appList"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<!-- 父级菜单只有[目录]不可用 -->
|
||||
<a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="parentTreeData"
|
||||
placeholder="请选择父级菜单"
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
|
||||
<h3>扩展信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
|
||||
<a-radio-group @change="onOpenTypeChange" v-model="form.openType">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.openType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<!-- 前端组件只有[菜单]及[组件]可用 -->
|
||||
<a-form-model-item
|
||||
label="前端组件"
|
||||
prop="component"
|
||||
v-if="form.type == 1 && form.openType == 1"
|
||||
v-show="form.type == 1 && form.openType == 1"
|
||||
>
|
||||
<a-input placeholder="请输入前端组件" v-model="form.component" />
|
||||
</a-form-model-item>
|
||||
<!-- 内链地址只有[菜单]及[内链]可用 -->
|
||||
<a-form-model-item label="内链地址" prop="router" v-if="form.type == 1 && form.openType == 2">
|
||||
<a-input placeholder="请输入内链地址" v-model="form.router" />
|
||||
</a-form-model-item>
|
||||
<!-- 外链地址只有[菜单]及[外链]可用 -->
|
||||
<a-form-model-item label="内外链地址" prop="link" v-if="form.type == 1 && form.openType == 3">
|
||||
<a-input placeholder="请输入内外链地址" v-model="form.link" />
|
||||
</a-form-model-item>
|
||||
<!-- <a-form-model-item label="权重" prop="weight">
|
||||
<template slot="help">
|
||||
系统权重：菜单可分配给任何角色
|
||||
<br />业务权重：菜单对超级管理员不可见
|
||||
</template>
|
||||
<a-radio-group v-model="form.weight">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuWerght"
|
||||
>{{type.value}}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>-->
|
||||
<a-form-model-item label="权限标识" prop="permission" v-if="form.type == 2">
|
||||
<a-input placeholder="请输入权限标识" v-model="form.permission" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="关联上级菜单显示" prop="visibleParent" v-if="form.type == 2">
|
||||
<a-switch v-model="form.visibleParent" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="可见性">
|
||||
<a-switch v-model="form.visible" />
|
||||
</a-form-model-item>
|
||||
<!-- 图标只有[按钮]不可用 -->
|
||||
<a-form-model-item label="图标" v-if="form.type != 2">
|
||||
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
|
||||
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
|
||||
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="排序">
|
||||
<a-input-number
|
||||
:max="1000"
|
||||
:min="0"
|
||||
class="w-100-p"
|
||||
placeholder="请输入排序"
|
||||
v-model="form.sort"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="备注信息">
|
||||
<a-textarea placeholder="请输入备注信息" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { EMPTY_ID } from '@/util/global';
|
||||
|
||||
import YoIconSelector from '@/components/yoIconSelector';
|
||||
|
||||
const defaultValue = {
|
||||
type: '1',
|
||||
openType: '1',
|
||||
weight: '1',
|
||||
visibleParent: false,
|
||||
visible: true,
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoIconSelector,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
type: [{ required: true, message: '请选择菜单类型' }],
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
application: [{ required: true, message: '请选择所属应用' }],
|
||||
pid: [{ required: true, message: '请选择父级' }],
|
||||
component: [{ required: true, message: '请输入前端组件' }],
|
||||
router: [{ required: true, message: '请输入内链地址' }],
|
||||
link: [{ required: true, message: '请输入外链地址' }],
|
||||
permission: [{ required: true, message: '请输入权限标识' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/** ... */
|
||||
appList: [],
|
||||
codes: {
|
||||
menuType: [],
|
||||
menuWerght: [],
|
||||
openType: [],
|
||||
},
|
||||
|
||||
parentTreeData: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
let form = {
|
||||
...defaultValue,
|
||||
...params.record,
|
||||
/** 在此处添加默认数据转换 */
|
||||
/** ... */
|
||||
};
|
||||
|
||||
if (params.isParent) {
|
||||
form.pid = params.parent.id;
|
||||
form.application = params.parent.application;
|
||||
}
|
||||
|
||||
this.form = this.$_.cloneDeep(form);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/** ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
this.form = {
|
||||
...defaultValue,
|
||||
};
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/** ... */
|
||||
this.parentTreeData = [];
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/** ...BEGIN */
|
||||
this.codes = await this.onLoadCodes();
|
||||
this.appList = await this.onLoadSysApplist();
|
||||
if (params.isParent) {
|
||||
await this.onLoadMenuTree(params.parent.application);
|
||||
} else if (params.record) {
|
||||
await this.onLoadMenuTree(params.record.application);
|
||||
}
|
||||
/** ...END */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/** ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
return {
|
||||
menuType: menuType.data,
|
||||
menuWerght: menuWerght.data,
|
||||
openType: openType.data,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
onLoadSysApplist() {
|
||||
return this.$api.getAppList().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onLoadMenuTree(app) {
|
||||
return this.$api.getMenuTree({ application: app }).then(({ data }) => {
|
||||
this.parentTreeData = [
|
||||
{
|
||||
id: EMPTY_ID,
|
||||
parentId: undefined,
|
||||
title: '顶级',
|
||||
value: EMPTY_ID,
|
||||
pid: undefined,
|
||||
children: data,
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
onTypeChangeGroup() {
|
||||
const { type, openType } = this.form;
|
||||
if (type == 1 && openType == 2) {
|
||||
this.$set(this.form, 'component', 'iframe');
|
||||
} else {
|
||||
this.$set(this.form, 'component', '');
|
||||
}
|
||||
},
|
||||
|
||||
onTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
|
||||
if (this.form.type == 0 || this.form.type == 2) {
|
||||
this.form.openType = '0';
|
||||
} else {
|
||||
this.form.openType = '1';
|
||||
}
|
||||
},
|
||||
|
||||
onOpenTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
},
|
||||
|
||||
onOpenSelectIcon() {
|
||||
this.$refs['icon-selector'].onOpen(this.form.icon);
|
||||
},
|
||||
|
||||
onSelectIcon(icon) {
|
||||
this.$set(this.form, 'icon', icon);
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-alert type="warning">
|
||||
<template slot="message">当前没有写入字段[重定向]</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<div class="yo-form-group">
|
||||
<!-- 表单控件 -->
|
||||
<h3>基本信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="菜单类型" prop="type">
|
||||
<template slot="help">
|
||||
目录：默认添加在顶级
|
||||
<br />菜单：
|
||||
<br />按钮：
|
||||
</template>
|
||||
<a-radio-group @change="onTypeChange" v-model="form.type">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="名称" prop="name">
|
||||
<a-input placeholder="请输入名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="所属应用" prop="application">
|
||||
<a-select @change="onLoadMenuTree" placeholder="请选择所属应用" v-model="form.application">
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in appList"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<!-- 父级菜单只有[目录]不可用 -->
|
||||
<a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
|
||||
<a-tree-select
|
||||
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:tree-data="parentTreeData"
|
||||
placeholder="请选择父级菜单"
|
||||
v-model="form.pid"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
|
||||
<h3>扩展信息</h3>
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
|
||||
<a-radio-group @change="onOpenTypeChange" v-model="form.openType">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.openType"
|
||||
>{{ type.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<!-- 前端组件只有[菜单]及[组件]可用 -->
|
||||
<a-form-model-item
|
||||
label="前端组件"
|
||||
prop="component"
|
||||
v-if="form.type == 1 && form.openType == 1"
|
||||
v-show="form.type == 1 && form.openType == 1"
|
||||
>
|
||||
<a-input placeholder="请输入前端组件" v-model="form.component" />
|
||||
</a-form-model-item>
|
||||
<!-- 内链地址只有[菜单]及[内链]可用 -->
|
||||
<a-form-model-item label="内链地址" prop="router" v-if="form.type == 1 && form.openType == 2">
|
||||
<a-input placeholder="请输入内链地址" v-model="form.router" />
|
||||
</a-form-model-item>
|
||||
<!-- 外链地址只有[菜单]及[外链]可用 -->
|
||||
<a-form-model-item label="内外链地址" prop="link" v-if="form.type == 1 && form.openType == 3">
|
||||
<a-input placeholder="请输入内外链地址" v-model="form.link" />
|
||||
</a-form-model-item>
|
||||
<!-- <a-form-model-item label="权重" prop="weight">
|
||||
<template slot="help">
|
||||
系统权重：菜单可分配给任何角色
|
||||
<br />业务权重：菜单对超级管理员不可见
|
||||
</template>
|
||||
<a-radio-group v-model="form.weight">
|
||||
<a-radio-button
|
||||
:key="type.code"
|
||||
:value="type.code"
|
||||
v-for="type in codes.menuWerght"
|
||||
>{{type.value}}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>-->
|
||||
<a-form-model-item label="权限标识" prop="permission" v-if="form.type == 2">
|
||||
<a-input placeholder="请输入权限标识" v-model="form.permission" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="关联上级菜单显示" prop="visibleParent" v-if="form.type == 2">
|
||||
<a-switch v-model="form.visibleParent" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="可见性">
|
||||
<a-switch v-model="form.visible" />
|
||||
</a-form-model-item>
|
||||
<!-- 图标只有[按钮]不可用 -->
|
||||
<a-form-model-item label="图标" v-if="form.type != 2">
|
||||
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
|
||||
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
|
||||
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="排序">
|
||||
<a-input-number
|
||||
:max="1000"
|
||||
:min="0"
|
||||
class="w-100-p"
|
||||
placeholder="请输入排序"
|
||||
v-model="form.sort"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="备注信息">
|
||||
<a-textarea placeholder="请输入备注信息" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { EMPTY_ID } from '@/util/global';
|
||||
|
||||
import YoIconSelector from '@/components/yoIconSelector';
|
||||
|
||||
const defaultValue = {
|
||||
type: '1',
|
||||
openType: '1',
|
||||
weight: '1',
|
||||
visibleParent: false,
|
||||
visible: true,
|
||||
sort: 100,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoIconSelector,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
type: [{ required: true, message: '请选择菜单类型' }],
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
application: [{ required: true, message: '请选择所属应用' }],
|
||||
pid: [{ required: true, message: '请选择父级' }],
|
||||
component: [{ required: true, message: '请输入前端组件' }],
|
||||
router: [{ required: true, message: '请输入内链地址' }],
|
||||
link: [{ required: true, message: '请输入外链地址' }],
|
||||
permission: [{ required: true, message: '请输入权限标识' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/** ... */
|
||||
appList: [],
|
||||
codes: {
|
||||
menuType: [],
|
||||
menuWerght: [],
|
||||
openType: [],
|
||||
},
|
||||
|
||||
parentTreeData: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(params) {
|
||||
/** 将默认数据覆盖到form */
|
||||
let form = {
|
||||
...defaultValue,
|
||||
...params.record,
|
||||
/** 在此处添加默认数据转换 */
|
||||
/** ... */
|
||||
};
|
||||
|
||||
if (params.isParent) {
|
||||
form.pid = params.parent.id;
|
||||
form.application = params.parent.application;
|
||||
}
|
||||
|
||||
this.form = this.$_.cloneDeep(form);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/** ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
this.form = {
|
||||
...defaultValue,
|
||||
};
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/** ... */
|
||||
this.parentTreeData = [];
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
this.loading = true;
|
||||
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/** ...BEGIN */
|
||||
this.codes = await this.onLoadCodes();
|
||||
this.appList = await this.onLoadSysApplist();
|
||||
if (params.isParent) {
|
||||
await this.onLoadMenuTree(params.parent.application);
|
||||
} else if (params.record) {
|
||||
await this.onLoadMenuTree(params.record.application);
|
||||
}
|
||||
/** ...END */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/** ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
return {
|
||||
menuType: menuType.data,
|
||||
menuWerght: menuWerght.data,
|
||||
openType: openType.data,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
onLoadSysApplist() {
|
||||
return this.$api.getAppList().then(({ data }) => {
|
||||
return data;
|
||||
});
|
||||
},
|
||||
|
||||
onLoadMenuTree(app) {
|
||||
return this.$api.getMenuTree({ application: app }).then(({ data }) => {
|
||||
this.parentTreeData = [
|
||||
{
|
||||
id: EMPTY_ID,
|
||||
parentId: undefined,
|
||||
title: '顶级',
|
||||
value: EMPTY_ID,
|
||||
pid: undefined,
|
||||
children: data,
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
onTypeChangeGroup() {
|
||||
const { type, openType } = this.form;
|
||||
if (type == 1 && openType == 2) {
|
||||
this.$set(this.form, 'component', 'iframe');
|
||||
} else {
|
||||
this.$set(this.form, 'component', '');
|
||||
}
|
||||
},
|
||||
|
||||
onTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
|
||||
if (this.form.type == 0 || this.form.type == 2) {
|
||||
this.form.openType = '0';
|
||||
} else {
|
||||
this.form.openType = '1';
|
||||
}
|
||||
},
|
||||
|
||||
onOpenTypeChange() {
|
||||
this.onTypeChangeGroup();
|
||||
},
|
||||
|
||||
onOpenSelectIcon() {
|
||||
this.$refs['icon-selector'].onOpen(this.form.icon);
|
||||
},
|
||||
|
||||
onSelectIcon(icon) {
|
||||
this.$set(this.form, 'icon', icon);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,227 +1,227 @@
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert type="error">
|
||||
<template slot="message">按钮编辑关闭时调用resetFields报错,原因为visible=undefined</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysMenu:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增菜单</a-button>
|
||||
</Auth>
|
||||
<span slot="type" slot-scope="text">{{ bindCodeValue(text, 'menu_type') }}</span>
|
||||
<span slot="icon" slot-scope="text">
|
||||
<div v-if="text">
|
||||
<a-icon :type="text" />
|
||||
</div>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysMenu:add" v-if="record.type < 2">
|
||||
<a @click="onOpen('add-form', record, true)">新增子菜单</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuAdd"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="add-form"
|
||||
title="新增菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuEdit"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
title="编辑菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
width: '220px',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '菜单类型',
|
||||
width: '100px',
|
||||
dataIndex: 'type',
|
||||
scopedSlots: { customRender: 'type' },
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
width: '100px',
|
||||
dataIndex: 'icon',
|
||||
scopedSlots: { customRender: 'icon' },
|
||||
},
|
||||
{
|
||||
title: '前端组件',
|
||||
width: '220px',
|
||||
dataIndex: 'component',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
width: '220px',
|
||||
dataIndex: 'permission',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '100px',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
],
|
||||
codes: [
|
||||
{
|
||||
code: 'menu_type',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'menu_weight',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'open_type',
|
||||
values: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
const flag = this.$auth({
|
||||
sysApp: [['edit'], ['delete']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getMenuList({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
this.codes.find((p) => p.code === 'menu_type').values = menuType.data;
|
||||
this.codes.find((p) => p.code === 'menu_weight').values = menuWerght.data;
|
||||
this.codes.find((p) => p.code === 'open_type').values = openType.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record, isParent = false) {
|
||||
const params = isParent
|
||||
? {
|
||||
parent: record,
|
||||
isParent,
|
||||
}
|
||||
: {
|
||||
record,
|
||||
isParent,
|
||||
};
|
||||
this.$refs[formName].onOpen(params);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysMenuDelete(record).then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
<template>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert type="error">
|
||||
<template slot="message">按钮编辑关闭时调用resetFields报错,原因为visible=undefined</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<Auth auth="sysMenu:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增菜单</a-button>
|
||||
</Auth>
|
||||
<span slot="type" slot-scope="text">{{ bindCodeValue(text, 'menu_type') }}</span>
|
||||
<span slot="icon" slot-scope="text">
|
||||
<div v-if="text">
|
||||
<a-icon :type="text" />
|
||||
</div>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysMenu:add" v-if="record.type < 2">
|
||||
<a @click="onOpen('add-form', record, true)">新增子菜单</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysMenu:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</a-card>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuAdd"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="add-form"
|
||||
title="新增菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
|
||||
<yo-modal-form
|
||||
:action="$api.sysMenuEdit"
|
||||
:width="800"
|
||||
@ok="onReloadData"
|
||||
ref="edit-form"
|
||||
title="编辑菜单"
|
||||
type="drawer"
|
||||
>
|
||||
<form-body />
|
||||
</yo-modal-form>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
width: '220px',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '菜单类型',
|
||||
width: '100px',
|
||||
dataIndex: 'type',
|
||||
scopedSlots: { customRender: 'type' },
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
width: '100px',
|
||||
dataIndex: 'icon',
|
||||
scopedSlots: { customRender: 'icon' },
|
||||
},
|
||||
{
|
||||
title: '前端组件',
|
||||
width: '220px',
|
||||
dataIndex: 'component',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
width: '220px',
|
||||
dataIndex: 'permission',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
width: '100px',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
],
|
||||
codes: [
|
||||
{
|
||||
code: 'menu_type',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'menu_weight',
|
||||
values: [],
|
||||
},
|
||||
{
|
||||
code: 'open_type',
|
||||
values: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
const flag = this.$auth({
|
||||
sysApp: [['edit'], ['delete']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getMenuList({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载字典数据时的必要方法
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
|
||||
])
|
||||
.then(([menuType, menuWerght, openType]) => {
|
||||
this.codes.find((p) => p.code === 'menu_type').values = menuType.data;
|
||||
this.codes.find((p) => p.code === 'menu_weight').values = menuWerght.data;
|
||||
this.codes.find((p) => p.code === 'open_type').values = openType.data;
|
||||
});
|
||||
},
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record, isParent = false) {
|
||||
const params = isParent
|
||||
? {
|
||||
parent: record,
|
||||
isParent,
|
||||
}
|
||||
: {
|
||||
record,
|
||||
isParent,
|
||||
};
|
||||
this.$refs[formName].onOpen(params);
|
||||
},
|
||||
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
this.$refs.table.onLoaded();
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api.sysMenuDelete(record).then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user