Commit f95af854 authored by baixian's avatar baixian

优化

parent dd3d0c37
import React from 'react';
import { Modal, Icon, Form, Descriptions, Button, Table } from 'antd';
import { imagify } from '../utils/index';
import pageStyle from './LeaveDetailModal.less';
class LeaveDetailModal extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() { // 挂载
}
componentWillUnmount() { // 卸载
}
render() {
const {
visible,
} = this.props;
return (
<Modal
visible={visible}
title="请假详情"
cancelText="关闭"
zIndex={110}
onCancel={this.cancelLeaveModal}
maskClosable={false}
width={700}
footer={null}
bodyStyle={{ padding: '20px 0' }}
>
<div className={pageStyle.modalBox}>
<div className={pageStyle.modalHead}>
<div className={pageStyle.left}>
<img className={pageStyle.avatar} src="" alt="" />
<div className={pageStyle.leftInfo}>
<div className={pageStyle.infoline} style={{ marginBottom: 10 }}><img src={`${__IMGCDN__}teacher/people_icon.png`} alt="" />余瑞剑</div>
<div className={pageStyle.infoline}><img src={`${__IMGCDN__}teacher/phone_icon.png`} alt="" />18735113246</div>
</div>
</div>
<div className={pageStyle.right}>
<div className={pageStyle.rightNum}>8</div>
<div className={pageStyle.rightTip}>历史请假(次)</div>
</div>
</div>
<div className={pageStyle.modalBody}>
<Descriptions>
<Descriptions.Item label="请假课次" className={pageStyle.size}>小星星英语培训(2019.12.05 14:48~15.20</Descriptions.Item>
</Descriptions>
<Descriptions>
<Descriptions.Item label="请假原因" className={pageStyle.size}>家里有事情</Descriptions.Item>
</Descriptions>
</div>
<div className={pageStyle.modalFooter}>
<Descriptions>
<Descriptions.Item label="申请时间" className={pageStyle.size1}>2019.12.05 1450</Descriptions.Item>
</Descriptions>
<Descriptions>
<Descriptions.Item label="撤销时间" className={pageStyle.size1}>2019.12.05 1450</Descriptions.Item>
</Descriptions>
</div>
<div className={pageStyle.triangle}>
<div className={pageStyle.text}>已通过</div>
</div>
</div>
</Modal>
);
}
}
LeaveDetailModal.propTypes = {
};
const LeaveDetail = Form.create()(LeaveDetailModal);
export default LeaveDetail;
.modalBox {
position: relative;
.triangle {
position: relative;
right: 0;
bottom: 0;
.text {
z-index: 11;
font-size:20px;
font-family:PingFang SC;
font-weight:bold;
color:rgba(255,255,255,1);
position: absolute;
right: 0;
bottom: 0;
transform: rotate(-50deg);
letter-spacing: 2px;
}
&:after {
content: '';
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:transparent #35BAFD transparent transparent;
border-style:solid solid dashed dashed;
border-width:100px 100px 0 0 ;
bottom: -20px;
right: 0px;
position: absolute;
}
}
}
.modalHead {
display: flex;
align-items: center;
justify-content: space-between;
box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
padding: 15px 25px;
.left {
display: flex;
align-items: center;
.avatar {
width: 69px;
height: 69px;
border-radius: 50%;
margin-right: 20px;
}
.leftInfo {
.infoline {
display: flex;
align-items: center;
&>img {
width: 23px;
height: 23px;
margin-right: 10px;
}
}
}
}
.right {
text-align: center;
.rightNum {
font-size:30px;
font-family:PingFang SC;
font-weight:500;
color:rgba(0,0,0,1);
.rightTip {
font-size:14px;
font-family:PingFang SC;
font-weight:500;
color:rgba(150,150,150,1);
}
}
}
}
.modalBody {
padding: 25px 25px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
.size {
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(87,87,87,1);
:global {
.ant-descriptions-item-content {
color:#575757;
}
}
}
}
.modalFooter {
padding: 25px 25px 0;
.size1 {
font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:#B2B2B2;
:global {
.ant-descriptions-item-content {
color:#B2B2B2;
}
}
}
}
@import '../../less/variables.less';
.container {
// background-color: #fff;
background-color: #fff;
}
.classDetail {
background-color: #fff;
margin-bottom: 24px;
margin-bottom: 10px;
box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
}
.classdetailheader {
padding: 0 23px 0 32px;
......
@import '../../less/variables.less';
.container {
background-color: #fff;
}
.headerbox {
padding: 19px 0 34px 16px;
......@@ -29,7 +29,8 @@
.searchbox {
padding-left: 16px;
padding-right: 24px;
margin-bottom: 14px;
margin-bottom: 20px;
box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
}
.resetbtn {
margin-right: 16px;
......
import React from 'react';
import { connect } from 'dva';
import { Row, Col, Modal, Form, Input, Button, Table, Alert, Select } from 'antd';
import pageStyles from './StudentLeaveModal.less';
import { pageIn, imagify } from '../../utils/index';
import LeaveDetailModal from '../../components/LeaveDetailModal';
const { Search } = Input;
const FormItem = Form.Item;
const { Option } = Select;
class StudentLeaveModal extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
}
componentWillUnmount() {
const { dispatch } = this.props;
}
cancelLeaveModal = () => {
const { dispatch } = this.props;
dispatch({
type: 'indexstaic/updateState',
payload: {
leaveVisible: false,
},
});
}
goDetail = (record) => {
const { dispatch } = this.props;
dispatch({
type: 'indexstaic/updateState',
payload: {
detailVisible: true,
},
});
}
render() {
const {
visible,
detailVisible,
} = this.props;
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '申请学员',
dataIndex: 'name',
key: 'name',
},
{
title: '请假课次',
dataIndex: 'age',
key: 'age',
},
{
title: '申请时间',
dataIndex: 'address',
key: 'address',
},
{
title: '处理时间',
dataIndex: 'address',
key: 'address',
},
{
title: '处理状态',
dataIndex: 'address',
render: (text, record) => {
return (
<div className={pageStyles.typeColor}>
<div className={pageStyles.typeColor1}>到课</div>
</div>
);
},
},
{
title: '操作',
dataIndex: 'address',
render: (text, record) => {
return (
<div>
<span className="hreflink" onClick={() => this.goDetail(record)}>查看详情</span>
</div>
);
},
},
];
const { getFieldDecorator } = this.props.form;
return (
<div>
<Modal
visible={visible}
title="请假申请"
cancelText="关闭"
zIndex={110}
onCancel={this.cancelLeaveModal}
maskClosable={false}
width={1031}
footer={null}
>
<Form layout="inline" labelAlign="right" onSubmit={this.handleSearch}>
<FormItem label="学员姓名">
{getFieldDecorator('class_id', {
initialValue: '',
})(
<Search
placeholder="请输入学员姓名"
style={{ width: 210 }}
/>,
)}
</FormItem>
<FormItem label="状态">
{getFieldDecorator('class_id', {
initialValue: '',
})(
<Select style={{ width: 130 }}>
<Option value="">全部</Option>
<Option value={1}>待处理</Option>
<Option value={2}>已通过</Option>
<Option value={3}>已驳回</Option>
<Option value={4}>已撤销</Option>
</Select>,
)}
</FormItem>
<FormItem>
<Button onClick={this.handleSearchReset} style={{ marginRight: 20 }} >
重置
</Button>
<Button type="primary" ghost htmlType="submit">
搜索
</Button>
</FormItem>
</Form>
<div className={pageStyles.tableBox}>
<Table
rowKey="id"
dataSource={dataSource}
columns={columns}
/>
</div>
</Modal>
<LeaveDetailModal
visible={detailVisible}
/>
</div>
);
}
}
StudentLeaveModal.propTypes = {
};
const StudentLeave = Form.create()(StudentLeaveModal);
function mapStateToProps(state) {
const {
leaveVisible,
detailVisible,
} = state.indexstaic;
return {
leaveVisible,
detailVisible,
};
}
export default connect(mapStateToProps)(StudentLeave);
.tableBox {
margin-top: 35px;
}
.typeColor {
.typeColor1,.typeColor2,.typeColor3,.typeColor4 {
width: 48px;
height: 24px;
line-height: 24px;
font-size: 13px;
border-radius: 4px;
text-align: center;
}
}
.typeColor1 {
color: #FF3B3B;
background:rgba(255,59,59,0.1);
}
.typeColor2 {
color: #2194FF;
background:rgba(33,148,255,0.1);
}
.typeColor3 {
color: #929292;
background:rgba(233,233,233,0.1);
}
.typeColor4 {
color: #FFAD1F;
background:rgba(255,209,68,0.1);
}
......@@ -22,6 +22,7 @@ import Cropper from '../../components/Cropper';
import RepeatStudent from '../student/RepeatStudent';
import CallStudents from '../../components/CallStudents';
import ChangeCourse from '../classdetail/ChangeCourse';
import StudentLeaveModal from './StudentLeaveModal';
const { RangePicker } = DatePicker;
class StaticCenter extends React.Component {
constructor(props) {
......@@ -646,6 +647,16 @@ class StaticCenter extends React.Component {
},
});
}
// 请假弹框
goLeaveShow = () => {
const { dispatch } = this.props;
dispatch({
type: 'indexstaic/updateState',
payload: {
leaveVisible: true,
},
});
}
render() {
const that = this;
const {
......@@ -683,6 +694,7 @@ class StaticCenter extends React.Component {
studentChangeScheduleListLoading,
studentChangeScheduleListTotal,
studentChangeScheduleListQueryParams,
leaveVisible,
} = this.props;
const studentChangeScheduleColumns = [
{
......@@ -904,7 +916,7 @@ class StaticCenter extends React.Component {
<div className={pageStyle.informTip}>学员报名</div>
</div>
</Col>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 1 }} lg={{ span: 4, offset: 1 }} xl={{ span: 4, offset: 1 }}>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 1 }} lg={{ span: 4, offset: 0 }} xl={{ span: 4, offset: 0 }}>
<div className={pageStyle.informItem} onClick={this.goCallStudent}>
<div className={pageStyle.informImg} id="index_callwarn"><img src={`${__IMGCDN__}index/inform_icon2.png`} alt="" />
<Badge className={pageStyle.informNum} overflowCount={999} count={callData.total}>
......@@ -913,7 +925,7 @@ class StaticCenter extends React.Component {
<div className={pageStyle.informTip}>点名提醒</div>
</div>
</Col>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 1 }} lg={{ span: 4, offset: 1 }} xl={{ span: 4, offset: 1 }}>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 1 }} lg={{ span: 4, offset: 0 }} xl={{ span: 4, offset: 0 }}>
<div className={pageStyle.informItem} onClick={this.goPlanStudent}>
<div className={pageStyle.informImg} id="index_planwarn"><img src={`${__IMGCDN__}index/inform_icon3.png`} alt="" />
<Badge className={pageStyle.informNum} overflowCount={999} count={assign.total}>
......@@ -922,7 +934,7 @@ class StaticCenter extends React.Component {
<div className={pageStyle.informTip}>分配提醒</div>
</div>
</Col>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 1 }} lg={{ span: 4, offset: 1 }} xl={{ span: 4, offset: 1 }}>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 1 }} lg={{ span: 4, offset: 0 }} xl={{ span: 4, offset: 0 }}>
<div className={pageStyle.informItem} onClick={this.goBirthStudent}>
<div className={pageStyle.informImg} id="index_birthwarn"><img src={`${__IMGCDN__}index/inform_icon4.png`} alt="" />
<Badge className={pageStyle.informNum} overflowCount={999} count={birthday.total}>
......@@ -931,6 +943,15 @@ class StaticCenter extends React.Component {
<div className={pageStyle.informTip}>生日提醒</div>
</div>
</Col>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 0 }} lg={{ span: 4, offset: 0 }} xl={{ span: 4, offset: 0 }}>
<div className={pageStyle.informItem} onClick={this.goLeaveShow}>
<div className={pageStyle.informImg} id="index_paywarn"><img src={`${__IMGCDN__}index/inform_icon6.png`} alt="" />
<Badge className={pageStyle.informNum} overflowCount={999} count={renew.total}>
</Badge>
</div>
<div className={pageStyle.informTip}>请假提醒</div>
</div>
</Col>
<Col xs={{ span: 8, offset: 0 }} sm={{ span: 8, offset: 0 }} md={{ span: 4, offset: 0 }} lg={{ span: 4, offset: 0 }} xl={{ span: 4, offset: 0 }}>
<div className={pageStyle.informItem} onClick={this.goDeadlineStudent}>
<div className={pageStyle.informImg} id="index_paywarn"><img src={`${__IMGCDN__}index/inform_icon5.png`} alt="" />
......@@ -999,6 +1020,9 @@ class StaticCenter extends React.Component {
<CallStudents
callBack={this.saveCallStudents}
/>
<StudentLeaveModal
visible={leaveVisible}
/>
</div>
);
}
......@@ -1031,6 +1055,7 @@ function mapStateToProps(state) {
scheduleCount,
courseTimeListShow,
datetime,
leaveVisible,
} = state.indexstaic;
// eslint-disable-next-line no-empty-pattern
const {} = state.createtheme;
......@@ -1113,6 +1138,7 @@ function mapStateToProps(state) {
studentChangeScheduleListQueryParams,
schoolUserInfo,
guideShow,
leaveVisible,
};
}
export default connect(mapStateToProps)(StaticCenter);
......
@import '../../less/variables.less';
.container {
// background-color: #fff;
background-color: #fff;
}
.headerbox {
padding: 19px 0 19px 16px;
background: #fff;
box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
.headerbtn {
margin-right: 16px;
}
......
......@@ -757,7 +757,7 @@ class StudentMgt extends React.Component {
<Descriptions.Item label="备用电话" className={pageStyle.item}>{studentsdetail.reserve_mobile}</Descriptions.Item>
</Descriptions>
<Descriptions>
<Descriptions.Item className={pageStyle.item}><img src={`${__IMGCDN__}teacher/phone_icon.png`} alt="" /> {studentsdetail.mobile}</Descriptions.Item>
<Descriptions.Item className={pageStyle.item}><img src={`${__IMGCDN__}teacher/phone_icon.png`} alt="" />{studentsdetail.mobile}</Descriptions.Item>
<Descriptions.Item className={pageStyle.item}><img src={`${__IMGCDN__}teacher/birthday_icon.png`} alt="" />{studentsdetail.birthday}</Descriptions.Item>
<Descriptions.Item label="年级">{studentsdetail.grade}</Descriptions.Item>
</Descriptions>
......
@import '../../less/variables.less';
.container {
// background-color: #fff;
background-color: #fff;
}
.headerbox{
padding: 20px 33px;
......@@ -10,9 +10,14 @@
.headerbtn{
margin-right: 15px;
}
.table,.search{
background-color: #fff;
margin-top: 23px;
margin-top: 10px;
}
.search {
box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
margin-top: 0;
}
.titlebox {
line-height: 55px;
......
@import '../../less/variables.less';
.container {
// background-color: #fff;
background-color: #fff;
}
.headerbox{
padding: 20px 33px;
......@@ -14,6 +14,9 @@
.table,.search{
background-color: #fff;
}
.search {
box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
}
.title{
height: 55px;
padding-left: 32px;
......@@ -70,7 +73,7 @@
align-items: center;
}
.searchbox {
padding: 24px 34px;
padding: 24px 34px 0;
margin-bottom: 23px;
}
.resetbtn {
......
@import '../../less/variables.less';
.container {
// background-color: #fff;
background-color: #fff;
}
.headerbox{
padding: 20px 33px;
......@@ -35,7 +35,11 @@
}
.table,.search{
background-color: #fff;
margin-top: 23px;
margin-top: 10px;
}
.search {
box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
margin-top: 0;
}
.teacherName {
width: 100px;
......
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