惠支付PC管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
gratia-pay-web/src/app/admin/system/menu/menu.component.ts

355 lines
9.4 KiB

import { Component, OnInit } from '@angular/core';
import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {HttpClient} from '@angular/common/http';
import {SystemService} from '../../../services/system.service';
import {environment} from '../../../../environments/environment';
declare var $: any;
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.less', '../../../../assets/css/bootstrap-treeview.min.css']
})
export class MenuComponent implements OnInit {
/* 请求参数-查询 */
queryMenuName = null;
/* 请求参数-增加、修改 */
menu: any = {
id: null,
menuPSid: null,
menuType: null,
menuName: null,
menuUrl: null,
showOnMobile: false,
menuMobileUrl: null,
menuUrlImg: null,
menuSort: null,
menuDesc: null
};
parentMenuName = '无';
/* 查询结果 */
menuTree = [];
treeNodeCount = 0;
/* 权限 */
USER_INFO;
WEB_SERVE_URL = environment.baseUrl;
FILE_URL = environment.imageUrl;
/* 页面元素 */
updateType = 'default';
delAble = false; // 删除按钮是否可用
// 选中节点信息
selectedMenu: any = {
// 数据信息
id: null,
pId: null,
text: null,
showOnMobile: null,
nodes: null,
state: null,
// 节点信息
nodeId: null,
parentId: null,
};
checkedMenu = [];
validateFormQuery: UntypedFormGroup;
validateFormEdit: UntypedFormGroup;
loadingSearch = false; // 加载菜单树
loadingSearchDetail = false; // 加载菜单详情
loadingImg = false; // 图片上传
pcMenu = true; // PC手机菜单切换 true-PC菜单 false-手机菜单
constructor(
private fb: UntypedFormBuilder,
private message: NzMessageService,
private http: HttpClient,
private systemService: SystemService,
private modalService: NzModalService,
) {
this.validateFormQuery = this.fb.group({
queryMenuName: [null],
pcMenu: [null],
});
this.validateFormEdit = this.fb.group({
menuType: [null, [Validators.required]],
menuName: [null, [Validators.required]],
showOnMobile: [null, [Validators.required]],
menuUrl: null,
menuMobileUrl: null,
menuSort: [null, [Validators.required]],
menuDesc: null,
menuUrlImg: null,
parentMenuName: null
});
}
ngOnInit() {
this.getMenuTree();
}
/** 构建菜单树 start */
// 查询菜单树
getMenuTree() {
this.loadingSearch = true;
let showOnMobile = 0;
if (this.pcMenu === false) {
showOnMobile = 1;
}
this.systemService.findAllMenuTree(showOnMobile, data => {
this.menuTree = data['return_data'];
this.buildMenuTree(this.menuTree);
});
}
// 构建菜单树
buildMenuTree(treeData) {
const that = this;
$('#menu-tree').treeview({
data: treeData,
levels: 0,
showCheckbox: false,
showBorder: false,
onNodeSelected(event, data) {
that.onNodeSelected(data);
},
onNodeUnselected(event, data) {
that.clearDataArea();
}
});
this.loadingSearch = false;
}
// 选中节点
onNodeSelected(data) {
this.delAble = true;
this.updateType = 'update';
this.loadingSearchDetail = true;
this.systemService.findMenuById(data.id, res => {
this.menu = res['return_data'];
// 是否为手机菜单
if (this.menu.showOnMobile === 1) {
this.menu.showOnMobile = true;
} else {
this.menu.showOnMobile = false;
}
// 设置父级菜单名称
let parentNode = null;
if (data.parentId != null) {
parentNode = $('#menu-tree').treeview('getNode', data.parentId);
this.parentMenuName = parentNode.text;
} else {
this.parentMenuName = '无';
}
this.loadingSearchDetail = false;
});
}
/** 构建菜单树 end */
/** 图片上传 start */
handleChange(info: any): void {
this.loadingImg = true;
if (info.file.response == null) {
return;
}
this.loadingImg = false;
if (info.file.response['return_code'] === '000000') {
this.menu.menuUrlImg = info.file.response['return_data'][0];
} else {
this.message.create('error', `上传失败!`);
}
}
/** 图片上传 end */
/** 按钮事件 start */
// 搜索
onSearch() {
const queryMenuName = this.validateFormQuery.value.queryMenuName;
if (queryMenuName != null && queryMenuName !== '') {
$('#menu-tree').treeview('search', [ queryMenuName, { ignoreCase: false, exactMatch: false }, 'text']);
} else {
$('#menu-tree').treeview('clearSearch');
$('#menu-tree').treeview('collapseAll', { silent: true });
}
}
// 增加按钮-验证父级菜单
onClickAdd() {
this.delAble = false;
this.updateType = 'add';
this.menu = {
id: null,
menuPSid: null,
menuType: null,
menuName: null,
menuUrl: null,
showOnMobile: false,
menuMobileUrl: null,
menuUrlImg: null,
menuSort: null,
menuDesc: null
};
const selectedMenu = $('#menu-tree').treeview('getSelected');
if (selectedMenu.length === 0) {
this.parentMenuName = '无';
} else if (selectedMenu.length === 1) {
this.menu.menuPSid = selectedMenu[0].id;
this.parentMenuName = selectedMenu[0].text;
} else {
this.updateType = 'default';
this.clearDataArea();
this.message.create('warning', `只可选择一个节点作为父节点!`);
// return; // 若后面增加语句, 此处需增加return
}
}
// 增加、修改
onCommit(requestType): void {
// tslint:disable-next-line:forin
for (const i in this.validateFormEdit.controls) {
this.validateFormEdit.controls[i].markAsDirty();
this.validateFormEdit.controls[i].updateValueAndValidity();
}
if (this.menu.menuType == null || this.menu.menuType === '') {
this.message.create('warning', `请选择菜单类型!`);
return;
} else if (this.menu.menuName == null || this.menu.menuName === '') {
this.message.create('warning', `请输入菜单名称!`);
return;
} else if (this.menu.showOnMobile == null || this.menu.showOnMobile === '') {
this.message.create('warning', `请选择是否手机菜单!`);
return;
} else if (this.menu.showOnMobile === false && (this.menu.menuUrl == null || this.menu.menuUrl === '')) {
this.message.create('warning', `请输入菜单路由!`);
return;
} else if (this.menu.showOnMobile === true && (this.menu.menuMobileUrl == null || this.menu.menuMobileUrl === '')) {
this.message.create('warning', `请输入菜单路由!`);
return;
} else if (this.menu.menuSort == null || this.menu.menuSort === '') {
this.message.create('warning', `请输入菜单顺序!`);
return;
}
let requestUrl = null;
if (requestType === 'add') {
requestUrl = '/secMenu/addMenu';
} else if (requestType === 'update') {
requestUrl = '/secMenu/editMenu';
} else {
return;
}
const params = {
id: this.menu.id,
menuPSid: this.menu.menuPSid,
menuType: this.menu.menuType,
menuName: this.menu.menuName,
menuUrl: this.menu.menuUrl,
showOnMobile: this.menu.showOnMobile,
menuMobileUrl: this.menu.menuMobileUrl,
menuUrlImg: this.menu.menuUrlImg,
menuSort: this.menu.menuSort,
menuDesc: this.menu.menuDesc
};
if (this.menu.showOnMobile === true) {
params.showOnMobile = 1;
} else {
params.showOnMobile = 0;
}
this.loadingSearchDetail = true;
this.http.post(this.WEB_SERVE_URL + requestUrl, params).subscribe(data => {
if (data['return_code'] === '000000') {
this.message.create('success', `提交成功!`);
this.getMenuTree();
this.clearDataArea();
} else {
this.message.create('warning', data['return_msg']);
}
setTimeout(() => {
this.loadingSearchDetail = false;
}, 1000);
}, error => {
this.loadingSearchDetail = false;
this.message.create('error', `未知错误!`);
});
}
// 删除
// 對話框删除
showDeleteConfirm(): void {
this.modalService.confirm({
nzTitle: '确定删除',
nzOkText: '是',
nzOnOk: () => this.onDelete(this.menu.id),
nzCancelText: '否',
});
}
onDelete(id) {
if (id == null || id === '') {
return;
}
this.loadingSearchDetail = true;
this.systemService.deleteMenu(id, data => {
if (data['return_code'] === '000000') {
this.message.create('success', `删除成功!`);
this.getMenuTree();
this.clearDataArea();
} else {
this.message.create('error', data['return_msg']);
this.loadingSearchDetail = false;
}
});
}
// 清除页面显示数据
clearDataArea() {
this.validateFormEdit.reset();
this.delAble = false;
this.updateType = 'default';
this.menu = {
id: null,
menuPSid: null,
menuType: null,
menuName: null,
menuUrl: null,
showOnMobile: false,
menuMobileUrl: null,
menuUrlImg: null,
menuSort: null,
menuDesc: null
};
this.parentMenuName = null;
}
// 切换PC、手机菜单
onClickMenuSwitch() {
this.clearDataArea();
this.getMenuTree();
}
/** 按钮事件 end */
}