ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Browse Source
This commit is contained in:
ky_sunl
2021-04-22 13:37:25 +00:00
parent 575a22954f
commit d1c9e5a71e
699 changed files with 1062425 additions and 40640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
Web/src/pages/system/menu/addForm.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<a-drawer
:confirmLoading="confirmLoading"
:visible="visible"
:width="800"
@close="onClose"
@ok="onOk"
class="yo-drawer-form"
title="新增菜单"
>
<FormBody ref="form-body" />
<div class="ant-drawer-footer">
<a-button @click="onClose">取消</a-button>
<a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
</div>
</a-drawer>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
async onOpen() {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
.sysMenuAdd(data)
.then(({ success }) => {
if (success) {
this.$message.success('新增成功');
this.onClose();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onClose() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

83
Web/src/pages/system/menu/editForm.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<a-drawer
:confirmLoading="confirmLoading"
:visible="visible"
:width="800"
@close="onClose"
class="yo-drawer-form"
title="编辑应用"
>
<FormBody ref="form-body" />
<div class="ant-drawer-footer">
<a-button @click="onClose">取消</a-button>
<a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
</div>
</a-drawer>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口,并填充外部传入的数据
*/
onOpen(record) {
this.visible = true;
this.$nextTick(async () => {
await this.formBody.onInit();
this.formBody.onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
.sysMenuEdit(data)
.then(({ success }) => {
if (success) {
this.$message.success('编辑成功');
this.onClose();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onClose() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

297
Web/src/pages/system/menu/form.vue Normal file
View File

@@ -0,0 +1,297 @@
<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="onChangeApplication"
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="可见性">
<a-switch checked-children="可见" un-checked-children="隐藏" v-model="form.visible" />
</a-form-model-item>
<!-- 图标只有[按钮]不可用 -->
<a-form-model-item label="图标" v-if="form.type != 2"></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>
</a-form-model>
</template>
<script>
export default {
data() {
return {
/** 表单数据 */
form: {
type: '1',
openType: '1',
weight: '2',
visible: true,
sort: 100,
},
/** 验证格式 */
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: '请输入外链地址' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/** ... */
appList: [],
codes: {
menuType: [],
menuWerght: [],
openType: [],
},
parentTreeData: [],
};
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
/** 在此处添加默认数据转换 */
/** ... */
visible: record.visible == 'Y',
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/** ... */
record.visible = record.visible ? 'Y' : 'N';
reslove(record);
} else {
reject();
}
});
});
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
*/
onResetFields() {
setTimeout(() => {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/** ... */
this.parentTreeData = [];
}, 300);
},
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/** ...BEGIN */
this.codes = await this.onLoadCodes();
this.appList = await this.onLoadSysApplist();
/** ...END */
this.loading = false;
},
/** 当前组件的其他方法 */
/** ... */
onLoadCodes() {
return this.$api
.$queue([
this.$api.sysDictTypeDropDownWait({ code: 'menu_type' }),
this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
this.$api.sysDictTypeDropDownWait({ 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;
});
},
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();
},
onChangeApplication(value) {
this.$api.getMenuTree({ application: value }).then(({ data }) => {
this.parentTreeData = [
{
id: -1,
parentId: 0,
title: '顶级',
value: 0,
pid: 0,
children: data,
},
];
});
},
},
};
</script>

194
Web/src/pages/system/menu/index.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<container>
<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: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>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
</container>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
export default {
components: {
AddForm,
EditForm,
},
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.sysDictTypeDropDownWait({ code: 'menu_type' }),
this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
this.$api.sysDictTypeDropDownWait({ 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) {
this.$refs[formName].onOpen(record);
},
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>