Skip to content

C
CivManage
Commit c557eab0 authored by 张烨's avatar 张烨
Browse files
Options

feat: web菜单展示

parent d2923656
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 466 additions and 3 deletions
src/pages/webConfig/components/siteConfigDrawer.js
View file @ c557eab0
......@@ -21,7 +21,7 @@ export default props => {
closable
onClose={onClose}
visible={visible}
maskClosable={false}
maskClosable
>
<WebConfigForm
hasIntegerate={hasIntegerate}
......
src/pages/webConfig/index.js
View file @ c557eab0
......@@ -10,10 +10,12 @@ import {
} from '@/services/webConfig/api';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import Modal from 'antd/lib/modal/Modal';
import ProCard from '@ant-design/pro-card';
import styles from './index.less';
import SiteConfig from './components/siteConfigDrawer';
import { appConnector } from '@/containers/App/store';
import { defaultWebConfigObj, webMode } from './utils';
import MenuConfig from './menuconfig/MenuConfig';
const { TabPane } = Tabs;
const WebConfigPage = props => {
......@@ -196,6 +198,10 @@ const WebConfigPage = props => {
});
};
const handleUpdateOnMenuChange = () => {
updateModuleTree(userMode || 'super');
};
const renderTabPane = tabPaneItem => (
<TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
<>
......@@ -209,6 +215,12 @@ const WebConfigPage = props => {
>
查看/编辑网站配置
</span>
<ProCard>
<MenuConfig
menu={curWeb?.children.find(w => w.menuType === 'Web4MenuRoot')}
onUpdate={handleUpdateOnMenuChange}
/>
</ProCard>
</>
</TabPane>
);
......
src/pages/webConfig/menuconfig/AddForm.jsx 0 → 100644
View file @ c557eab0
import React, { useState } from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
const { Item } = Form;
const AddForm = props => {
const { submitCallback, nodeType, nodeObj, addType, submitLoading } = props;
const [form] = Form.useForm();
const [otherForm] = Form.useForm();
console.log(nodeObj, 'nodeObj');
const layout = {
layout: 'horizontal',
labelCol: { span: 4, offset: 1 },
wrapperCol: { span: 16 },
};
const submit = () => {
if (addType === 1) {
let obj = form.getFieldsValue();
submitCallback(obj, nodeObj);
}
if (addType === 2) {
// 分组
let obj = otherForm.getFieldsValue();
submitCallback(obj, nodeObj);
}
};
const finish = () => {
submit();
};
return (
<div>
{addType === 1 && (
<Form
form={form}
name="groupform"
{...layout}
className={styles.formStyle}
onFinish={finish}
>
<Item
label="菜单名称"
name="menuName"
rules={[
{
required: true,
message: '请输入分组名称',
},
]}
>
<Input />
</Item>
<Item label="菜单别名" name="shortName">
<Input />
</Item>
<Item
label="菜单图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择在线图标',
},
]}
>
<PicturesWall />
</Item>
<Item label="功能参数" name="funParam">
<Input />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" htmlType="submit" loading={submitLoading}>
提交
</Button>
</Item>
</Form>
)}
{addType === 2 && (
<Form
form={otherForm}
name="menuform"
{...layout}
onFinish={finish}
className={styles.formStyle}
>
<Item
label="菜单名称"
name="menuName"
rules={[
{
required: true,
message: '请输入菜单名称',
},
]}
>
<Input />
</Item>
<Item label="菜单别名" name="shortName">
<Input />
</Item>
<Item
label="菜单图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择菜单图标',
},
]}
>
<PicturesWall />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" htmlType="submit" loading={submitLoading}>
提交
</Button>
</Item>
</Form>
)}
</div>
);
};
export default AddForm;
src/pages/webConfig/menuconfig/MenuConfig.jsx 0 → 100644
View file @ c557eab0
import React, { useState, useEffect } from 'react';
import ProCard from '@ant-design/pro-card';
import WebMenu from './webMenu';
const MenuConfig = props => {
const { menu } = props;
return (
<>
{menu && (
<div split="vertical">
<WebMenu {...props} />
</div>
)}
</>
);
};
export default MenuConfig;
src/pages/webConfig/menuconfig/addForm.less 0 → 100644
View file @ c557eab0
.formStyle{
margin-bottom: 40px;
}
\ No newline at end of file
src/pages/webConfig/menuconfig/checkBox.jsx 0 → 100644
View file @ c557eab0
import React, { useState, useEffect } from 'react';
import { Checkbox, Empty } from 'antd';
import styles from './checkBox.less';
const CheckList = props => {
const { info, valueCallback, nodeType } = props;
console.log(info, 'info');
const [list, setList] = useState([]);
const [checkList, setCheckList] = useState([]);
const [flag, setFlag] = useState(false);
const a = 'a';
useEffect(() => {
if (info.pageUrl) {
let arr = [...info.relatedRoleList];
let arr2 = [];
arr.map(item => {
if (item.related) {
arr2.push(item.relatedRoleCode);
}
});
console.log(arr2, 'arr2');
setCheckList(arr2);
setList(arr);
setFlag(true);
}
return () => {
setFlag(false);
setCheckList([]);
};
}, [info]);
const handleSelect = (e, val) => {
console.log(e.target, 'e', val);
let arr = [];
list.forEach(item => {
if (item.relatedRoleCode === val) {
item.related = e.target.checked;
}
});
setList([...list]);
valueCallback(list);
};
return (
<div>
{nodeType === 3 || nodeType === 4 ? (
<div className={styles.box}>
{/* <Checkbox>全选/反选</Checkbox> */}
{list &&
list.length > 0 &&
list.map(item => (
<div key={item.relatedRoleCode} className={styles.check}>
<Checkbox
checked={item.related}
onChange={e => {
handleSelect(e, item.relatedRoleCode);
}}
>
{item.relatedRoleName}
</Checkbox>
</div>
))}
</div>
) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
)}
</div>
);
};
export default CheckList;
src/pages/webConfig/menuconfig/checkBox.less 0 → 100644
View file @ c557eab0
.box{
display: flex;
padding: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.check{
flex-shrink: 0;
flex-grow: 0;
min-width: 150px;
padding-bottom: 10px;
}
\ No newline at end of file
src/pages/webConfig/menuconfig/editForm.jsx 0 → 100644
View file @ c557eab0
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
const { Item } = Form;
const EditForm = props => {
const { submitCallback, nodeType, info } = props;
const [form] = Form.useForm();
const [otherForm] = Form.useForm();
console.log(info);
const layout = {
layout: 'horizontal',
labelCol: { span: 4, offset: 1 },
wrapperCol: { span: 16 },
};
// 回显表单
useEffect(() => {
form.resetFields();
otherForm.resetFields();
}, [info]);
useEffect(() => {
const targetForm = nodeType === 1 ? form : otherForm;
let arr = Object.keys(targetForm.getFieldsValue());
let obj = {};
arr.map(i => {
obj[i] = info[i];
});
targetForm.setFieldsValue({ ...obj, shortName: info.menuShortName });
}, [info]);
const submit = () => {
const targetForm = nodeType === 1 ? form : otherForm;
let obj = targetForm.getFieldsValue();
submitCallback(obj);
};
const onFinish = () => {
submit();
};
return (
<div>
{nodeType === 1 && (
<Form
form={form}
name="editGroup"
{...layout}
className={styles.formStyle}
onFinish={onFinish}
>
<Item
label="菜单名称"
name="menuName"
rules={[
{
required: true,
message: '请输入菜单名称',
},
]}
>
<Input />
</Item>
<Item label="菜单别名" name="shortName">
<Input />
</Item>
<Item
label="菜单图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择在线图标',
},
]}
>
<PicturesWall />
</Item>
<Item label="功能路径" name="funParam">
<Input />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Item>
</Form>
)}
{nodeType === 2 && (
<Form
form={otherForm}
name="editMenu"
{...layout}
onFinish={onFinish}
className={styles.formStyle}
>
<Item
label="菜单名称"
name="menuName"
rules={[
{
required: true,
message: '请输入菜单名称',
},
]}
>
<Input />
</Item>
<Item label="菜单别名" name="shortName">
<Input />
</Item>
<Item
label="菜单图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择菜单图标',
},
]}
>
<PicturesWall />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Item>
</Form>
)}
</div>
);
};
export default EditForm;
src/pages/webConfig/menuconfig/miniMenu.less 0 → 100644
View file @ c557eab0
.box{
min-height: calc( 100vh - 172px);
display: flex;
}
.left{
min-width: 300px;
width: 350px;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
.ant-tree-node-content-wrapper{
display: flex;
align-items: center;
.ant-tree-iconEle{
display: flex;
align-items: center;
}
.ant-tree-title{
width: 100%;
}
}
.leftTop{
display: flex;
align-items: center;
margin-bottom: 10px;
justify-content: space-between;
.tRight{
display: flex;
align-items: center;
.icon1{
font-size: 20px;
margin-right: 10px;
}
.icon2{
font-size: 18px;
margin-right: 5px;
}
.icon:hover{
cursor: pointer;
}
}
}
}
.middle{
min-width: 500px;
width: 500px;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
margin: 0 10px;
}
.title{
display: flex;
align-items: center;
width: 100%;
}
.tip{
display: none;
}
.title:hover{
.tip{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
}
.fs{
font-size: 18px;
margin-left: 10px;
}
.rightBox{
min-width: 200px;
// width: 600px;
width: 100%;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
}
\ No newline at end of file
src/pages/webConfig/menuconfig/webMenu.jsx 0 → 100644
View file @ c557eab0
This diff is collapsed.
src/pages/webConfig/utils.js
View file @ c557eab0
......@@ -56,6 +56,7 @@ export const defaultWebConfigObj = {
menu: 'banner-left',
mdi: 'MDI',
hideMap: true,
loginTemplate: 'Default.html',
};
export const getDefaultGetWebconfig = ({
......
src/services/webConfig/api.js
View file @ c557eab0
......@@ -45,18 +45,25 @@ export const getWebconfig = title =>
* @param {*} config 网站配置
* @param {*} isAdd true：添加 false：编辑
*/
export const postEditWebConfig = (config, isAdd = false) =>
export const postEditWebConfig = (config, isAdd = false) => {
const obj = { ...config };
Object.keys(obj).forEach(k => {
if (typeof obj[k] === 'string') {
obj[k] = obj[k].trim();
}
});
post(
`${CITY_SERVICE}/OMS.svc/${
isAdd ? 'W4_AddWebsite' : 'W4_EditWebsite'
}?_version=9999`,
qs.stringify({ config: JSON.stringify(config) }),
qs.stringify({ config: JSON.stringify(obj) }),
{
headers: {
'content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
},
);
};
export const postAddWebSite = config => postEditWebConfig(config, true);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment