Skip to content

B
biz.qingxiao.com
Commit c5e8d0e3 authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent 0f90a66a
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 20 deletions
src/common/menuconfig.js
View file @ c5e8d0e3
......@@ -28,5 +28,19 @@ export default {
path: '/sjd/officialweb',
relativePath: ['/sjd/officialweb', '/sjd/officialwebeditor'],
},
{
id: '3',
name: '班级管理',
activeIcon: {
backgroundPosition: '-99px -28px',
},
defaultIcon: {
backgroundPosition: '-67px -28px',
},
activeurl: `${__IMGCDN__}menu/officialwebactive.png`,
notactiveurl: `${__IMGCDN__}menu/officialwebnotactive.png`,
path: '/sjd/classmgt',
relativePath: ['/sjd/classmgt'],
},
],
};
src/components/SjdHeader.js
View file @ c5e8d0e3
......@@ -38,7 +38,9 @@ class SjdMenu extends React.Component {
}
}
render() {
const { collapsed, userInfo, screenIsBig } = this.props;
const {
collapsed, userInfo, screenIsBig, breadcrumbList,
} = this.props;
const menu = (
<Menu onClick={this.signOut}>
<Menu.Item key="0">
......@@ -73,6 +75,22 @@ class SjdMenu extends React.Component {
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
{breadcrumbList.length == 1 &&
<div className={SjdHeaderStyle.breadbox}>
<div className={`${SjdHeaderStyle.breaditembold} ${SjdHeaderStyle.breaditem}`}>
{breadcrumbList[0].name}
</div>
</div>
}
{breadcrumbList.length > 1 &&
<div className={SjdHeaderStyle.breadbox}>
{breadcrumbList.map((ele, index) => (
<div className={SjdHeaderStyle.breaditem}>
{ele.name}&nbsp;&nbsp;{index < breadcrumbList.length - 1 ? '/' : ''}&nbsp;&nbsp;
</div>
))}
</div>
}
<div className={SjdHeaderStyle.useraccount}>
<span className={SjdHeaderStyle.usermobile}>{(userInfo && userInfo.nickname) || ''}</span>
<img alt={(userInfo && userInfo.name) || ''} src={(userInfo && imagify(userInfo.avatar)) || ''} className={SjdHeaderStyle.avator} />
......@@ -90,11 +108,14 @@ SjdMenu.propTypes = {
};
function mapStateToProps(state) {
const { collapsed, userInfo, screenIsBig } = state.webapp;
const {
collapsed, userInfo, screenIsBig, breadcrumbList,
} = state.webapp;
return {
collapsed,
userInfo,
screenIsBig,
breadcrumbList,
};
}
export default connect(mapStateToProps)(SjdMenu);
src/components/SjdHeader.less
View file @ c5e8d0e3
......@@ -61,4 +61,17 @@
.caretDown {
color: #C2C2C2;
font-size: 14px;
}
.breadbox {
display: inline;
padding-left: 10px;
.breaditem {
display: inline;
font-size: 14px;
color: rgba(0,0,0,0.45);
cursor: pointer;
&.breaditembold {
color: rgba(0,0,0,1);
}
}
}
\ No newline at end of file
src/components/SjdMenu.js
View file @ c5e8d0e3
......@@ -32,9 +32,9 @@ class SjdMenu extends React.Component {
const { menus, defaultMenu, collapsed } = this.props;
const { avatar, nickname } = this.state;
const menuItemStyle = {
fontSize: '14px',
height: '36px',
paddingLeft: '30px',
fontSize: '13px',
height: '40px',
paddingLeft: '35px',
};
return (
<Layout>
......
src/components/SjdMenu.less
View file @ c5e8d0e3
......@@ -18,7 +18,7 @@
display: block;
}
.menu {
background-color: #333;
background-color: transparent;
}
.menuitem{
color: red;
......@@ -34,19 +34,22 @@
background-size: 100% 100%;
}
.menusider{
background-color: #313131;
background-color: #001529;
}
:global{
.ant-menu.ant-menu-dark{
.ant-menu-item {
color: rgba(254,254,254,0.5);
font-size: 14px;
line-height: 36px;
font-size: 13px;
line-height: 40px;
border-left: 5px solid transparent;
}
.ant-menu-item-selected{
background-color: rgba(255,255,255,0.1);
background-color: #1890FF;
color: #fff;
border-radius: 18px;
font-size: 13px;
border-left: 5px solid #FFFFFF;
// border-radius: 18px;
}
}
}
......
src/models/webapp.js
View file @ c5e8d0e3
......@@ -32,15 +32,9 @@ export default {
showExpired: false,
dakarole: LocalStorage.getItem('dakarole') || 1,
screenIsBig: true,
// excelTotalAmount: 0,
// excelListRows: 2000,
breadcrumbList: [],
},
subscriptions: {
// onResize({ dispatch }) {
// document.addEventListener('click', () => { // 这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名
// console.log('ssss');
// });
// },
setup({ dispatch, history }) {
window.addEventListener('resize', (e) => { // 这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名
let screenIsBig = true;
......@@ -136,6 +130,20 @@ export default {
type: 'schooladd/getcategorys',
});
}
if (pathname === '/sjd/classmgt') {
dispatch({
type: 'webapp/updateState',
payload: {
breadcrumbList: [{
path: pathname,
name: '班级管理',
}],
},
});
// dispatch({
// type: 'schooladd/getcategorys',
// });
}
});
},
},
......@@ -213,10 +221,12 @@ export default {
const { menus, defaultMenu } = yield select(state => state.webapp);
const { pathname } = payload;
let newDefaultMenu = defaultMenu;
let matchedmenu = null;
for (let i = 0; i < menus.length; i++) {
const menu = menus[i];
for (let j = 0; j < menu.relativePath.length; j++) {
if (pathToRegexp(menu.relativePath[j]).exec(pathname)) {
matchedmenu = menu;
newDefaultMenu = menu.id;
}
}
......
src/pages/SjdIndex.js
View file @ c5e8d0e3
......@@ -49,7 +49,7 @@ class SjdIndex extends React.Component {
let paddingRight = 20;
let paddingLeft = 20;
if (screenIsBig) {
contentMarginLeft = !collapsed ? 210 : 90;
contentMarginLeft = !collapsed ? 204 : 84;
} else {
contentMarginLeft = 0;
paddingRight = 10;
......
src/pages/classmgt/index.js 0 → 100644
View file @ c5e8d0e3
import { connect } from 'dva';
import React from 'react';
import { Icon, Button, Row, Col, Input, Select, Checkbox, Table } from 'antd';
import pageStyle from './index.less';
import { pageIn } from '../../utils/index';
const { Option } = Select;
class ClassMgt extends React.Component {
componentDidMount() { // 挂载
pageIn('班级管理');
// 初始化地图函数 自定义函数名init
// 定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
}
componentWillUnmount() { // 卸载
}
render() {
const dataSource = [
{
key: '1',
name: '是是地方是是地方是是地方是是地方是是地方是是地方',
age: 32,
address: '西湖区湖底公园1号',
a: '西湖区湖底公园1号',
b: '西湖区湖底公园1号',
c: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
a: '西湖区湖底公园1号',
b: '西湖区湖底公园1号',
c: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
a: '西湖区湖底公园1号',
b: '西湖区湖底公园1号',
c: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '班级名称',
dataIndex: 'name',
key: 'name',
render: (text, record, index) => {
return (
<div className={pageStyle.classNamebox}>
{text}
</div>
);
},
},
{
title: '课程名称',
dataIndex: 'age',
key: 'age',
},
{
title: '班级老师',
dataIndex: 'address',
key: 'address',
},
{
title: '人数/容量',
dataIndex: 'a',
key: 'a',
},
{
title: '已上/总课次',
dataIndex: 'b',
key: 'b',
},
{
title: '操作',
dataIndex: 'c',
key: 'c',
render: (text, record, index) => {
return (
<div className={pageStyle.tableoperatebox}>
<a className={pageStyle.alink} href="javascript:;">学员管理</a>
<span className={pageStyle.divideline}>|</span>
<a className={pageStyle.alink} href="javascript:;">布置作业</a>
<span className={pageStyle.divideline}>|</span>
<a className={pageStyle.alink} href="javascript:;">主题管理</a>
<span className={pageStyle.divideline}>|</span>
<a className={pageStyle.alink} href="javascript:;">点名</a>
<span className={pageStyle.divideline}>|</span>
<a className={pageStyle.alink} href="javascript:;">结业</a>
</div>
);
},
},
];
return (
<div className={pageStyle.container}>
<div className={pageStyle.headerbox}>
<Button icon="plus" className={pageStyle.headerbtn} type="primary">添加班级</Button>
<Button className={pageStyle.headerbtn}>批量结业</Button>
<Button icon="download" className={pageStyle.headerbtn}>导出</Button>
</div>
<div className={pageStyle.searchbox}>
<Row
gutter={{
sm: 24, xs: 24, md: 24, lg: 64,
}}
className={pageStyle.searchrow}
>
<Col className={pageStyle.formitem} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }}>
<div className={pageStyle.formitemlabel}>班级名称</div>
<Input placeholder="请输入班级名称" />
</Col>
<Col className={pageStyle.formitem} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }}>
<div className={pageStyle.formitemlabel}>所属课程</div>
<Select className={pageStyle.selectitem} placeholder="请选择所属课程">
<Option value="china">China</Option>
<Option value="usa">U.S.A</Option>
</Select>
</Col>
<Col className={pageStyle.formitem} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }}>
<div className={pageStyle.formitemlabel}>上课教室</div>
<Select className={pageStyle.selectitem} placeholder="请选择上课教室">
<Option value="china">China</Option>
<Option value="usa">U.S.A</Option>
</Select>
</Col>
</Row>
<Row
gutter={{
sm: 24, xs: 24, md: 24, lg: 64,
}}
className={pageStyle.searchrow}
>
<Col className={pageStyle.formitem} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }}>
<div className={pageStyle.formitemlabel}>班级老师</div>
<Select className={pageStyle.selectitem} placeholder="请选择班级老师">
<Option value="china">China</Option>
<Option value="usa">U.S.A</Option>
</Select>
</Col>
<Col className={pageStyle.formitem} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }}>
<div className={pageStyle.formitemlabel}>结业状态</div>
<Select className={pageStyle.selectitem} placeholder="请选择结业状态">
<Option value="china">China</Option>
<Option value="usa">U.S.A</Option>
</Select>
</Col>
<Col className={pageStyle.formitem} xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 12 }} lg={{ span: 6 }}>
<div className={pageStyle.formitemlabel}>是否排课</div>
<Checkbox.Group style={{ width: '100%', lineHeight: '32px' }}>
<Row type="flex" align="center" justify="center">
<Col span={12}>
<Checkbox value="A">已排课</Checkbox>
</Col>
<Col span={12}>
<Checkbox value="C">未排课</Checkbox>
</Col>
</Row>
</Checkbox.Group>
</Col>
<Col className={pageStyle.searchbtnbox} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }}>
<Button className={pageStyle.resetbtn}>重置</Button>
<Button className={pageStyle.searchbtn} type="primary">搜索</Button>
</Col>
</Row>
</div>
<div className={pageStyle.tablebox}>
<Table dataSource={dataSource} columns={columns} scroll={{ x: 700 }} />;
</div>
</div>
);
}
}
ClassMgt.propTypes = {
};
function mapStateToProps(state) {
const {
a,
} = state.officialweb;
return {
a,
};
}
export default connect(mapStateToProps)(ClassMgt);
src/pages/classmgt/index.less 0 → 100644
View file @ c5e8d0e3
@import '../../less/variables.less';
.container {
background-color: #fff;
}
.headerbox {
padding: 19px 0 19px 44px;
.headerbtn {
margin: 0 8px;
}
}
.formitemlabel {
color: #000000;
font-size: 14px;
line-height: 1;
margin-bottom: 8px;
}
.selectitem {
display: block;
}
.formitem {
margin-bottom: 32px;
}
.searchbtnbox {
height: 54px;
display: flex;
align-items: center;
}
.searchbox {
padding-left: 44px;
padding-right: 24px;
margin-bottom: 14px;
}
.resetbtn {
margin-right: 16px;
}
.tablebox {
padding-left: 16px;
}
.divideline {
color: #E9E9E9;
padding: 0 8px;
}
.alink {
color: #1890FF;
}
.classNamebox {
max-width: 250px;
word-break: break-all;
}
.tableoperatebox {
min-width: 160px;
line-height: 30px;
}
\ No newline at end of file
src/router.js
View file @ c5e8d0e3
......@@ -54,6 +54,11 @@ const SchoolAdd = props => (
{ SchoolAdd => (<SchoolAdd {...props} />) }
</Bundle>
);
const ClassMgt = props => (
<Bundle load={() => import(/* webpackChunkName:"classmgt" */'./pages/classmgt/index')}>
{ ClassMgt => (<ClassMgt {...props} />) }
</Bundle>
);
function RouterConfig({ history }) {
return (
......@@ -69,6 +74,7 @@ function RouterConfig({ history }) {
<Route path="/sjd" exact render={() => (<Redirect to="/sjd/indexstaic" />)} />
<Route path="/sjd/404" exact component={Errorpage} />
<Route path="/sjd/indexstaic" exact component={IndexStaic} />
<Route path="/sjd/classmgt" exact component={ClassMgt} />
</SjdIndex>
)}
/>
......
webpack.config.js
View file @ c5e8d0e3
......@@ -32,7 +32,7 @@ const proFile = {
}
};
const devFile ={
title: '商家岛开发环境后台',
title: '轻校',
template: './public/index.ejs',
inject: false,
// hash: 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