/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-02-23
|
* @LastEditTime: 2022-05-11 16:39:56
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 功能管理-功能清单
|
*/
|
import React, { Component } from 'react';
|
import Icon, { PlusSquareFilled, AppstoreOutlined, EllipsisOutlined, FileOutlined, SettingOutlined, EditOutlined } from '@ant-design/icons';
|
import './index.less';
|
import FunctionMenuViewTable from '../FunctionMenuViewTable';
|
import { Table, Menu, Spin, Dropdown, Divider, Tooltip, Input, Row, Col, Button, Popconfirm, Form, Typography, message, Select } from 'antd';
|
|
import * as $$ from '../../../utils/utility';
|
const { SubMenu } = Menu;
|
const { Option } = Select;
|
|
// 模块图标
|
const iconArr = [
|
'DashboardOutlined',
|
'FormOutlined',
|
'UnorderedListOutlined',
|
'SettingOutlined',
|
'FileTextOutlined',
|
'AppstoreOutlined',
|
'BankOutlined',
|
'ReadOutlined',
|
'HistoryOutlined',
|
'FrownOutlined',
|
'ControlOutlined',
|
'SmileOutlined',
|
'TeamOutlined',
|
'ShoppingCartOutlined',
|
'SafetyCertificateOutlined',
|
'DeploymentUnitOutlined',
|
'ApartmentOutlined',
|
'OrderedListOutlined',
|
];
|
// 树形结构
|
function getTree(appClient) {
|
return $$.ax.request({ url: 'v1/rsApp/getTree', type: 'get', data: { appType: '1', appClient }, service: 'oper' });
|
}
|
//一级应用菜单提交接口
|
function saveRsAPP(data) {
|
return $$.ax.request({ url: 'v1/rsApp/saveRsAPP', type: 'post', data, service: 'oper' });
|
}
|
//一级应用菜单删除
|
function removeRsAPP(ids) {
|
return $$.ax.request({ url: 'v1/rsApp/removeByIds', type: 'get', data: { ids }, service: 'oper' });
|
}
|
//一级应用菜单详情接口
|
function saveRsAPPById(id) {
|
return $$.ax.request({ url: 'v1/rsApp/getById', type: 'get', data: { id }, service: 'oper' });
|
}
|
|
//二级、三级菜单提交接口
|
function saveRsModule(data) {
|
return $$.ax.request({ url: 'v1/rsModule/saveRsModule', type: 'post', data, service: 'oper' });
|
}
|
//二级、三级菜单详情接口
|
function saveRsModuleById(id) {
|
return $$.ax.request({ url: 'v1/rsModule/getById', type: 'get', data: { id }, service: 'oper' });
|
}
|
//二级、三级菜单删除
|
function removersModule(id) {
|
return $$.ax.request({ url: 'v1/rsModule/removeById', type: 'get', data: { id }, service: 'oper' });
|
}
|
|
//功能提交接口
|
function saveRsFunction(data) {
|
return $$.ax.request({ url: 'v1/rsFunction/saveRsFunction', type: 'post', data, service: 'oper' });
|
}
|
//功能详情接口
|
function saveRsFunctionById(id) {
|
return $$.ax.request({ url: 'v1/rsFunction/getById', type: 'get', data: { id }, service: 'oper' });
|
}
|
// 菜单删除
|
function listQueryRemove(ids) {
|
return $$.ax.request({ url: 'v1/rsFunction/removeByIds', type: 'get', data: { ids }, service: 'oper' });
|
}
|
|
//删除时拦截是否还有子级菜单
|
function checkCanRemove(id) {
|
return $$.ax.request({ url: 'v1/rsModule/checkCanRemove', type: 'get', data: { id }, service: 'oper' });
|
}
|
|
// 功能列表
|
function listRsFunction() {
|
return $$.ax.request({ url: 'v1/rsFunction/listQuery', type: 'get', data: {}, service: 'oper' });
|
}
|
|
class FunctionMenuView extends Component {
|
constructor(props) {
|
super(props);
|
this.config = {};
|
this.state = {
|
treeData: [], //树形结构数组
|
data: {}, //表单数据，提交后清空
|
hoverGrade: '', //聚焦的菜单等级，0.一级 1.二级 2.三级
|
hoverType: 2, //聚焦的菜单类型，1.编辑 2.查看
|
hoverSelectedKeys: '', //聚焦的菜单key
|
saveLoading: false, //保存局部加载中
|
loading: false, //全局加载中
|
tableList: [], //菜单功能列表数组
|
FunctionEditTableList: [],
|
FunctionEditTableData: {},
|
FunctionEditTableId: '',
|
FunctionEditTableKey: '',
|
FunctionEditTableLoading: false,
|
addDisabled: false, //新增应用限制
|
isShowIcon: true,
|
};
|
}
|
|
componentDidMount() {
|
this.componentChange();
|
}
|
// 功能清单初始化
|
componentChange = async () => {
|
const { tabKey } = this.props;
|
this.setState({ saveLoading: true });
|
const res = await getTree(tabKey);
|
if (res.type) {
|
const newData = res.data.length > 0 ? res.data[0] : {};
|
const byIdData = await saveRsAPPById(newData.value || '');
|
this.setState({
|
saveLoading: false,
|
treeData: res.data.length > 0 ? res.data.map((item, idx) => ({ ...item, hover: idx == 0 ? true : false })) : [],
|
hoverType: 2,
|
hoverGrade: res.data.length > 0 ? '0' : '',
|
data: byIdData.data,
|
hoverSelectedKeys: newData.value || '',
|
});
|
} else {
|
this.setState({ saveLoading: false });
|
}
|
};
|
|
//icon类型
|
iconType(type) {
|
var name = '';
|
switch (type) {
|
case 'PlusSquareFilled':
|
name = <PlusSquareFilled />;
|
break;
|
case 'SettingOutlined':
|
name = <SettingOutlined />;
|
break;
|
case 'EditOutlined':
|
name = <EditOutlined />;
|
break;
|
case 'AppstoreOutlined':
|
name = <AppstoreOutlined />;
|
break;
|
case 'EllipsisOutlined':
|
name = <EllipsisOutlined />;
|
break;
|
default:
|
name = <FileOutlined />;
|
break;
|
}
|
return name;
|
}
|
|
//选中树形菜单时回调
|
onMenuSelect = async ({ item, key, keyPath, selectedKeys, domEvent }) => {
|
const { treeData } = this.state;
|
let newData = flatten(treeData).find((item, index) => item.value == key);
|
|
// 树形结构增加hover，方便新增修改按钮的跟踪
|
let treeDataNew = treeData
|
.filter((item, index) => item.label.indexOf('自定义') == -1)
|
.map((item, index) => ({
|
...item,
|
hover: item.value == key ? true : null,
|
children: item.children
|
.filter((item, index) => item.label.indexOf('自定义') == -1)
|
.map((modules) => ({
|
...modules,
|
hover: modules.value == key ? true : null,
|
children: modules.children
|
.filter((item, index) => item.label.indexOf('自定义') == -1)
|
.map((menus) => ({ ...menus, hover: menus.value == key ? true : null })),
|
})),
|
}));
|
|
if (newData.labelType === '0') {
|
const res = await saveRsAPPById(newData.value);
|
if (res.type) {
|
this.setState({
|
// 加入一个hover字段,展示右侧三个点按钮；
|
treeData: treeDataNew,
|
data: res.data,
|
hoverType: 2,
|
hoverGrade: newData.labelType,
|
hoverSelectedKeys: key,
|
addDisabled: false,
|
});
|
}
|
} else {
|
const res = await saveRsModuleById(newData.value);
|
if (res.type) {
|
this.setState({
|
// 加入一个hover字段,展示右侧三个点按钮；
|
treeData: treeDataNew.filter((item) => item.label !== '自定义应用中心'),
|
data: res.data,
|
hoverType: 2,
|
hoverGrade: newData.labelType,
|
hoverSelectedKeys: key,
|
addDisabled: false,
|
});
|
}
|
}
|
};
|
|
onSelect = (selectedKeys, info) => {};
|
InputChange = ({ target: { value, name } }) => {
|
const { data } = this.state;
|
this.setState({ data: { ...data, [name]: value } });
|
};
|
|
//新增一级菜单应用中心
|
addModal = () => {
|
const { treeData, hoverSelectedKeys } = this.state;
|
const keyDate = String(new Date().getTime());
|
treeData.push({ label: '自定义应用中心', labelType: '0', children: [], value: keyDate });
|
|
let treeDataNew = treeData.map((item, index) => ({
|
...item,
|
hover: item.value == keyDate ? true : null,
|
children: item.children.map((modules) => ({
|
...modules,
|
hover: modules.value == keyDate ? true : null,
|
children: modules.children.map((menus) => ({ ...menus, hover: menus.value == keyDate ? true : null })),
|
})),
|
}));
|
this.setState({ addDisabled: true, hoverGrade: '0', hoverType: 1, data: {}, treeData: treeDataNew, hoverSelectedKeys: keyDate });
|
};
|
|
// 新增模块
|
hoverAddModule = (data) => {
|
const { treeData } = this.state;
|
const keyDate = String(new Date().getTime());
|
this.setState({ data: {}, hoverGrade: '1', hoverType: 1 });
|
treeData.map((item) => ({
|
...item,
|
children: item.value == data.value ? item.children.push({ label: '自定义模块', labelType: '1', children: [], value: keyDate }) : item.children,
|
}));
|
// 树形结构增加hover，方便新增修改按钮的跟踪
|
let treeDataNew = treeData.map((item, index) => ({
|
...item,
|
hover: item.value == keyDate ? true : null,
|
children: item.children.map((modules) => ({
|
...modules,
|
hover: modules.value == keyDate ? true : null,
|
children: modules.children.map((menus) => ({ ...menus, hover: menus.value == keyDate ? true : null })),
|
})),
|
}));
|
|
this.setState({ data: { appId: data.value, parentId: data.value }, treeData: treeDataNew, hoverSelectedKeys: keyDate });
|
};
|
|
//新增菜单
|
hoverAddMenu = (data) => {
|
const { treeData, tableList } = this.state;
|
const keyDate = String(new Date().getTime());
|
this.setState({ data: {}, hoverGrade: '2', hoverType: 1 });
|
if (data.labelType == '0') {
|
treeData.map((item) => ({
|
...item,
|
children:
|
item.value == data.value ? item.children.push({ label: '自定义菜单', labelType: '2', children: [], value: keyDate }) : item.children,
|
}));
|
} else if (data.labelType == '1') {
|
treeData.map((item) => ({
|
...item,
|
children: item.children.map((modules) => ({
|
...modules,
|
children:
|
modules.value == data.value
|
? modules.children.push({ label: '自定义菜单', labelType: '2', children: [], value: keyDate })
|
: modules.children,
|
})),
|
}));
|
}
|
// 树形结构增加hover，方便新增修改按钮的跟踪
|
let treeDataNew = treeData.map((item, index) => ({
|
...item,
|
hover: item.value == keyDate ? true : null,
|
children: item.children.map((modules) => ({
|
...modules,
|
hover: modules.value == keyDate ? true : null,
|
children: modules.children.map((menus) => ({ ...menus, hover: menus.value == keyDate ? true : null })),
|
})),
|
}));
|
this.setState({
|
data: { appId: data.value, parentId: data.value },
|
treeData: treeDataNew,
|
isShowIcon: data.labelType == '0' ? true : false,
|
hoverSelectedKeys: keyDate,
|
FunctionEditTableList: [],
|
});
|
};
|
|
//修改
|
hoverEdit = async (item) => {
|
const { treeData } = this.state;
|
if (item.labelType === '0') {
|
const res = await saveRsAPPById(item.value);
|
if (res.type) {
|
this.setState({ data: res.data, hoverType: 1 });
|
}
|
} else if (item.labelType === '1') {
|
const res = await saveRsModuleById(item.value);
|
if (res.data) {
|
this.setState({ data: res.data, hoverType: 1 });
|
}
|
} else {
|
const res = await saveRsModuleById(item.value);
|
if (res.data) {
|
this.setState({ data: res.data, hoverType: 1, FunctionEditTableList: res.data.functions || [] });
|
}
|
}
|
};
|
|
//删除
|
hoverDel = async (item) => {
|
const { treeData } = this.state;
|
const r = await checkCanRemove(item.value);
|
if (r.type) {
|
if (r.length > 0) {
|
return $$.catchApiError({ content: '抱歉，请先删除相关子级模板或菜单！' });
|
}
|
}
|
if (item.labelType === '0') {
|
const res = await removeRsAPP(item.value);
|
if (res.type) {
|
message.success('删除成功！');
|
this.componentChange();
|
}
|
// this.setState({ data: res, hoverType: 1 });
|
} else {
|
const res = await removersModule(item.value);
|
if (res.type) {
|
message.success('删除成功！');
|
this.componentChange();
|
}
|
// this.setState({ data: res, hoverType: 1 });
|
}
|
};
|
|
// 提交
|
save = async () => {
|
this.setState({ saveLoading: true });
|
const { hoverGrade, data, hoverSelectedKeys, FunctionEditTableList } = this.state;
|
const { tabKey } = this.props;
|
if (hoverGrade == '0') {
|
const res = await saveRsAPP({ ...data, appClient: tabKey });
|
this.setState({
|
saveLoading: false,
|
});
|
if (res.type) {
|
const r = await getTree(tabKey);
|
if (r) {
|
let newData = flatten(r.data).find((item, index) => item.value == res.data.id);
|
const newData2 = await saveRsAPPById(newData.value);
|
message.success('提交成功！');
|
// 树形结构增加hover，方便新增修改按钮的跟踪
|
let treeDataNew = r.data.map((item, index) => ({
|
...item,
|
hover: item.value == newData.value ? true : null,
|
children: item.children.map((modules) => ({
|
...modules,
|
hover: modules.value == newData.value ? true : null,
|
children: modules.children.map((menus) => ({ ...menus, hover: menus.value == newData.value ? true : null })),
|
})),
|
}));
|
|
this.setState({
|
saveLoading: false,
|
treeData: treeDataNew,
|
isShowIcon: true,
|
hoverType: 2,
|
hoverGrade: r.data.length > 0 ? '0' : '',
|
data: newData2.data,
|
hoverSelectedKeys: newData.value,
|
addDisabled: false,
|
});
|
}
|
}
|
} else if (hoverGrade == '1') {
|
const res = await saveRsModule({ ...data, appClient: tabKey, functions: [] });
|
this.setState({
|
saveLoading: false,
|
});
|
|
if (res.type) {
|
const r = await getTree(tabKey);
|
if (r.type) {
|
const newData = flatten(r.data).find((item, index) => item.value == res.data.id);
|
const newData2 = await saveRsModuleById(newData.value);
|
message.success('提交成功！');
|
// 树形结构增加hover，方便新增修改按钮的跟踪
|
let treeDataNew = r.data.map((item, index) => ({
|
...item,
|
hover: item.value == newData.value ? true : null,
|
children: item.children.map((modules) => ({
|
...modules,
|
hover: modules.value == newData.value ? true : null,
|
children: modules.children.map((menus) => ({ ...menus, hover: menus.value == newData.value ? true : null })),
|
})),
|
}));
|
this.setState({
|
saveLoading: false,
|
treeData: treeDataNew,
|
hoverType: 2,
|
hoverGrade: r.data.length > 0 ? '1' : '',
|
data: newData2.data,
|
hoverSelectedKeys: newData.value,
|
addDisabled: false,
|
});
|
}
|
}
|
} else {
|
const res = await saveRsModule({ ...data, modType: '2', appClient: tabKey, functions: FunctionEditTableList });
|
this.setState({
|
saveLoading: false,
|
});
|
|
if (res.type) {
|
const r = await getTree(tabKey);
|
if (r.type) {
|
const newData = flatten(r.data).find((item, index) => item.value == res.data.id);
|
const newData2 = await saveRsModuleById(newData.value);
|
message.success('提交成功！');
|
// 树形结构增加hover，方便新增修改按钮的跟踪
|
let treeDataNew = r.data.map((item, index) => ({
|
...item,
|
hover: item.value == newData.value ? true : null,
|
children: item.children.map((modules) => ({
|
...modules,
|
hover: modules.value == newData.value ? true : null,
|
children: modules.children.map((menus) => ({ ...menus, hover: menus.value == newData.value ? true : null })),
|
})),
|
}));
|
this.setState({
|
saveLoading: false,
|
treeData: treeDataNew,
|
hoverType: 2,
|
hoverGrade: r.data.length > 0 ? '2' : '',
|
data: newData2.data,
|
hoverSelectedKeys: newData.value,
|
addDisabled: false,
|
});
|
}
|
}
|
}
|
};
|
// 提交并继续
|
saveContinue = () => {};
|
// 重置
|
reset = async () => {
|
const { data } = this.state;
|
|
if (data.modType === '0') {
|
const res = data.id ? await saveRsAPPById(data.id) : { data: {} };
|
this.setState({ data: res.data, hoverType: 1 });
|
} else if (data.modType === '1') {
|
const res = data.id ? await saveRsModuleById(data.id) : { data: {} };
|
this.setState({ data: res.data, hoverType: 1 });
|
} else {
|
const res = data.id ? await saveRsModuleById(data.id) : { data: {} };
|
this.setState({
|
data: res.data,
|
hoverType: 1,
|
FunctionEditTableList: res.data ? res.data.functions : [],
|
FunctionEditTableId: '',
|
FunctionEditTableKey: new Date().getTime(),
|
});
|
}
|
};
|
// 取消
|
cancel = async () => {
|
const { tabKey } = this.props;
|
const { treeData } = this.state;
|
const newList = flatten(treeData).filter((item, index) => item.label.indexOf('自定义') !== -1);
|
|
// 新增应用中心，新增模块，新增菜单 取消按钮效果
|
if (newList.length > 0) {
|
const res = await getTree(tabKey);
|
if (res.type) {
|
const newData = treeData.length > 0 ? treeData[0] : {};
|
const byIdData = await saveRsAPPById(newData.value || '');
|
this.setState({
|
hoverType: 2,
|
hoverGrade: newList.length > 0 ? '0' : '',
|
addDisabled: false,
|
data: byIdData.data || {},
|
hoverSelectedKeys: newData.value || '',
|
treeData: res.data.length > 0 ? res.data.map((item, idx) => ({ ...item, hover: idx == 0 ? true : false })) : [],
|
});
|
}
|
} else {
|
this.setState({ hoverType: 2, addDisabled: false });
|
}
|
};
|
|
tableSave = (form, key) => {};
|
|
//保存公共功能
|
saveTableData = async (data) => {
|
const { FunctionEditTableList } = this.state;
|
this.setState({ FunctionEditTableList: data, FunctionEditTableId: '', FunctionEditTableKey: new Date().getTime() });
|
};
|
|
//保存并继续公共功能
|
saveContinueTableData = async (data, key) => {
|
this.setState({ FunctionEditTableList: data, FunctionEditTableId: key, FunctionEditTableKey: new Date().getTime() });
|
};
|
|
//删除功能
|
removeTableData = async (id) => {
|
const { FunctionEditTableList } = this.state;
|
const list = FunctionEditTableList.filter((item) => item.id !== id);
|
|
// this.setState({ FunctionEditTableLoading: true });
|
// const res = await listQueryRemove(id);
|
// if (res) {
|
// message.success('删除成功！');
|
// }
|
// const list = await listRsFunction();
|
this.setState({
|
FunctionEditTableList: list,
|
FunctionEditTableId: '',
|
FunctionEditTableLoading: false,
|
FunctionEditTableKey: new Date().getTime(),
|
});
|
};
|
|
//取消功能
|
cancelTableData = (list, key) => {
|
this.setState({
|
FunctionEditTableList: list,
|
FunctionEditTableId: '',
|
FunctionEditTableLoading: false,
|
FunctionEditTableKey: new Date().getTime(),
|
});
|
};
|
|
render() {
|
const {
|
treeData,
|
hoverGrade,
|
hoverType,
|
hoverSelectedKeys,
|
saveLoading,
|
data,
|
tabKey,
|
isShowIcon,
|
addDisabled,
|
FunctionEditTableList,
|
FunctionEditTableData,
|
FunctionEditTableId,
|
FunctionEditTableKey,
|
FunctionEditTableLoading,
|
} = this.state;
|
|
const columns = [
|
{
|
title: '功能名称',
|
dataIndex: 'name',
|
width: '25%',
|
editable: true,
|
},
|
{
|
title: '功能标签',
|
dataIndex: 'tag',
|
width: '25%',
|
editable: true,
|
},
|
{
|
title: '功能说明',
|
dataIndex: 'des',
|
width: '25%',
|
editable: true,
|
},
|
];
|
|
return (
|
<React.Fragment>
|
<Spin spinning={saveLoading}>
|
<Row className="function-menu-view-row">
|
<Col style={{ padding: 10, width: '300px' }}>
|
<div className="function-menu-view-row-col">
|
<span className="function-menu-view-title">功能清单</span>
|
<Tooltip title="新增应用中心">
|
<Typography.Link disabled={addDisabled} onClick={this.addModal} style={{ marginRight: 8 }}>
|
<PlusSquareFilled style={{ fontSize: '28px' }} />
|
</Typography.Link>
|
</Tooltip>
|
</div>
|
<Menu
|
className="function-menu-view-menu"
|
selectedKeys={[hoverSelectedKeys]}
|
onSelect={this.onMenuSelect}
|
style={{ width: '300px' }}
|
expandIcon={false}
|
mode="inline"
|
>
|
{treeData &&
|
treeData.map((item, index) => (
|
<React.Fragment key={item.value}>
|
{console.log(item)}
|
<Menu.Item
|
key={item.value}
|
style={item.labelType == '1' ? { paddingLeft: '48px' } : item.labelType == '2' ? { paddingLeft: '72px' } : {}}
|
icon={item.icon ? <Icon component={$$.iconContrast[item.icon]} /> : <AppstoreOutlined />}
|
>
|
{item.label}
|
</Menu.Item>
|
{item.children.length > 0 &&
|
item.children.map((modules, idx) => (
|
<React.Fragment key={modules.value}>
|
<Menu.Item
|
key={modules.value}
|
style={{ paddingLeft: '48px' }}
|
icon={modules.icon ? <Icon component={$$.iconContrast[modules.icon]} /> : <AppstoreOutlined />}
|
>
|
{modules.label}
|
</Menu.Item>
|
{modules.children.length > 0 &&
|
modules.children.map((menus, key) => (
|
<Menu.Item
|
key={menus.value}
|
style={{ paddingLeft: '72px' }}
|
icon={menus.icon ? <Icon component={$$.iconContrast[menus.icon]} /> : ''}
|
>
|
{menus.label}
|
</Menu.Item>
|
))}
|
</React.Fragment>
|
))}
|
</React.Fragment>
|
))}
|
</Menu>
|
<div className="function-menu-view-menu-change">
|
{treeData &&
|
flatten(treeData).map((item, index) => (
|
<div key={index} className="function-menu-view-menu-change-col">
|
{item.hover ? (
|
<Dropdown
|
overlay={
|
<Menu>
|
{hoverGrade === '0' && (
|
<Menu.Item>
|
<Typography.Link onClick={() => this.hoverAddModule(item)} style={{ marginRight: 8, color: '#000' }}>
|
新增模块
|
</Typography.Link>
|
</Menu.Item>
|
)}
|
{hoverGrade !== '2' && (
|
<Menu.Item>
|
<Typography.Link onClick={() => this.hoverAddMenu(item)} style={{ marginRight: 8, color: '#000' }}>
|
新增菜单
|
</Typography.Link>
|
</Menu.Item>
|
)}
|
<Menu.Item>
|
<Typography.Link onClick={() => this.hoverEdit(item)} style={{ marginRight: 8, color: '#000' }}>
|
修改
|
</Typography.Link>
|
</Menu.Item>
|
<Menu.Item>
|
<Popconfirm title="确定删除?" onConfirm={() => this.hoverDel(item)}>
|
<Typography.Link style={{ marginRight: 8, color: '#000' }}>删除</Typography.Link>
|
</Popconfirm>
|
</Menu.Item>
|
</Menu>
|
}
|
placement="bottomRight"
|
arrow
|
>
|
<Typography.Link style={{ marginRight: 8 }}>
|
<EllipsisOutlined style={{ fontSize: '16px' }} />
|
</Typography.Link>
|
</Dropdown>
|
) : null}
|
</div>
|
))}
|
</div>
|
{/* <Tree defaultExpandAll={true} showIcon={true} onSelect={this.onSelect} treeData={treeData} /> */}
|
</Col>
|
<Divider style={{ color: '#e8e8e8', height: '42vh', padding: '0 10px' }} type="vertical" />
|
<Col style={{ padding: 10, flex: '1' }}>
|
{/* 一级菜单应用中心编辑 */}
|
{hoverGrade === '0' && hoverType === 1 && (
|
<table width="100%" border="0" cellSpacing="1" cellPadding="4" bgcolor="#cccccc" className="tabtop" align="left">
|
<tr>
|
<td className="function-menu-view-first">应用名称</td>
|
<td colSpan="12" className="font-left ">
|
<Input
|
placeholder="请输入应用名称"
|
style={{ width: '300px' }}
|
name="name"
|
onChange={this.InputChange}
|
value={data.name || ''}
|
/>
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">应用key</td>
|
<td colSpan="12" className="font-left">
|
<Input placeholder="请输入应用key" style={{ width: '300px' }} name="tag" onChange={this.InputChange} value={data.tag || ''} />
|
</td>
|
</tr>
|
</table>
|
)}
|
{/* 一级菜单应用中心展示 */}
|
{hoverGrade === '0' && hoverType === 2 && (
|
<table width="100%" border="0" cellSpacing="1" cellPadding="4" bgcolor="#cccccc" className="tabtop" align="left">
|
<tr>
|
<td className="function-menu-view-first">应用名称</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.name || ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">应用key</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.tag || ''}
|
</td>
|
</tr>
|
</table>
|
)}
|
{/* 二级模块 */}
|
{hoverGrade === '1' && hoverType === 1 && (
|
<table width="100%" border="0" cellSpacing="1" cellPadding="4" bgcolor="#cccccc" className="tabtop" align="left">
|
<tr>
|
<td className="function-menu-view-first">模块名称</td>
|
<td colSpan="12" className="font-left">
|
<Input
|
placeholder="请输入模块名称"
|
style={{ width: '300px' }}
|
name="name"
|
onChange={this.InputChange}
|
value={data.name || ''}
|
/>
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">模块key</td>
|
<td colSpan="12" className="font-left">
|
<Input placeholder="请输入模块key" style={{ width: '300px' }} name="tag" onChange={this.InputChange} value={data.tag || ''} />
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">模块图标</td>
|
<td colSpan="12" className="font-left">
|
<Select
|
placeholder="请选择审批结果"
|
style={{ width: '300px' }}
|
value={data.icon || ''}
|
onChange={(value) => this.InputChange({ target: { name: 'icon', value } })}
|
>
|
{iconArr.map((x) => (
|
<Option value={x}>
|
<Icon component={$$.iconContrast[x]} />
|
</Option>
|
))}
|
</Select>
|
</td>
|
</tr>
|
</table>
|
)}
|
|
{/* 二级模块展示 */}
|
{hoverGrade === '1' && hoverType === 2 && (
|
<table width="100%" border="0" cellSpacing="1" cellPadding="4" bgcolor="#cccccc" className="tabtop" align="left">
|
<tr>
|
<td className="function-menu-view-first">模块名称</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.name || ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">模块key</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.tag || ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">模块图标</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.icon ? <Icon component={$$.iconContrast[data.icon]} /> : ''}
|
</td>
|
</tr>
|
</table>
|
)}
|
{/* 三级菜单 */}
|
{hoverGrade === '2' && hoverType === 1 && (
|
<table width="100%" border="0" cellSpacing="1" cellPadding="4" bgcolor="#cccccc" className="tabtop" align="left">
|
<tr>
|
<td className="function-menu-view-first">菜单名称</td>
|
<td colSpan="12" className="font-left">
|
<Input
|
placeholder="请输入菜单名称"
|
style={{ width: '300px' }}
|
name="name"
|
onChange={this.InputChange}
|
value={data.name || ''}
|
/>
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">菜单key</td>
|
<td colSpan="12" className="font-left">
|
<Input placeholder="请输入模块key" style={{ width: '300px' }} name="tag" onChange={this.InputChange} value={data.tag || ''} />
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">菜单图标</td>
|
<td colSpan="12" className="font-left">
|
<Select
|
placeholder="请选择审批结果"
|
style={{ width: '300px' }}
|
value={data.icon || ''}
|
onChange={(value) => this.InputChange({ target: { name: 'icon', value } })}
|
>
|
{iconArr.map((x) => (
|
<Option value={x}>
|
<Icon component={$$.iconContrast[x]} />
|
</Option>
|
))}
|
</Select>
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">菜单url</td>
|
<td colSpan="12" className="font-left">
|
<Input placeholder="请输入菜单url" style={{ width: '300px' }} name="url" onChange={this.InputChange} value={data.url || ''} />
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">功能</td>
|
<td colSpan="12" className="font-left">
|
<FunctionMenuViewTable
|
key={FunctionEditTableKey}
|
loading={FunctionEditTableLoading}
|
EditTableId={FunctionEditTableId}
|
saveTableData={this.saveTableData}
|
removeTableData={this.removeTableData}
|
cancelTableData={this.cancelTableData}
|
saveContinueTableData={this.saveContinueTableData}
|
EditTableData={FunctionEditTableData}
|
EditTableList={FunctionEditTableList}
|
/>
|
</td>
|
</tr>
|
</table>
|
)}
|
|
{/* 三级菜单展示 */}
|
{hoverGrade === '2' && hoverType === 2 && (
|
<table width="100%" border="0" cellSpacing="1" cellPadding="4" bgcolor="#cccccc" className="tabtop" align="left">
|
<tr>
|
<td className="function-menu-view-first">菜单名称</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.name || ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">菜单key</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.tag || ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">菜单图标</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.icon ? <Icon component={$$.iconContrast[data.icon]} /> : ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">菜单Url</td>
|
<td colSpan="12" className="font-left padding-left">
|
{data.url || ''}
|
</td>
|
</tr>
|
<tr>
|
<td className="function-menu-view-first">功能</td>
|
<td colSpan="12" className="font-left padding-left">
|
<Table
|
className="function-table-left"
|
pagination={false}
|
key={data.functions}
|
bordered
|
dataSource={data.functions || []}
|
columns={columns}
|
/>
|
</td>
|
</tr>
|
</table>
|
)}
|
{hoverType === 1 && (
|
<div className="function-menu-view-bottom-buttton">
|
<Button onClick={() => this.save()} type="primary">
|
提交
|
</Button>
|
{/* <Button onClick={() => this.saveContinue()}>提交并继续</Button> */}
|
<Button onClick={() => this.reset()}>重置</Button>
|
<Popconfirm title="确定取消输入?" onConfirm={() => this.cancel()}>
|
<Button>取消</Button>
|
</Popconfirm>
|
</div>
|
)}
|
</Col>
|
</Row>
|
</Spin>
|
</React.Fragment>
|
);
|
}
|
}
|
|
// 递归处理多维数组转为一维数组
|
function flatten(arr) {
|
var res = [];
|
for (var i = 0; i < arr.length; i++) {
|
var item = arr[i];
|
if (Array.isArray(item)) {
|
var newArr = flatten(item);
|
res = res.concat(newArr);
|
} else {
|
res.push({ label: item.label, appClient: item.appClient, value: item.value, labelType: item.labelType, hover: item.hover });
|
}
|
|
if (Array.isArray(item.children)) {
|
var newArr = flatten(item.children, item.id);
|
res = res.concat(newArr);
|
}
|
}
|
return res;
|
}
|
|
export default FunctionMenuView;
|
