Skip to content

C
cdsf-wx-app
Commit d6dcd9a5 by 姜雷
Options

添加约车页面

parent 6353eaf5
Showing with 455 additions and 71 deletions
config-overrides.js
......@@ -35,7 +35,7 @@ module.exports = function override(config, env) {
loader: require.resolve('less-loader'),
options: {
// theme vars, also can use theme.js instead of this.
modifyVars: { '@brand-primary': '#1DA57A' },
modifyVars: { '@brand-primary': '#3695c0' },
},
},
],
......
src/api/index.js
......@@ -11,14 +11,22 @@ export const sendMsg = entity =>
export const fetchRepairArea = () =>
fetch({
url: '/baseData/getBaseData',
method: 'post',
data: { type: 1 },
params: { type: 1 },
});
export const fetchRepairTerm = () =>
fetch({
url: '/baseData/getBaseData',
method: 'post',
data: { type: 2 },
params: { type: 2 },
});
export const fetchCarCategory = () =>
fetch({
url: '/baseData/getBaseData',
params: { type: 3 },
});
export const fetchCarPlateList = () =>
fetch({
url: '/baseData/getBaseData',
params: { type: 4 },
});
// publicCar
export const fetchPublicCarList = entity =>
......
src/containers/PublicCar/PublicCarApply.js
import React, { Component } from 'react';
import { List, InputItem, DatePicker, Button, Toast } from 'antd-mobile';
import { TextareaItem, DatePicker, Button, Toast } from 'antd-mobile';
import { applyPublicCar, fetchCarCategory } from '../../api/index';
import styles from './style.css';
import { applyPublicCar, sendMsg } from '../../api/index';
import { formatDate } from '../../utils/index';
import arrIcon from '../../components/Input/Select/images/select_icon@2x.png';
const CustomChildren = ({ extra, onClick, children }) => (
<div onClick={onClick} className={styles.selectWrap}>
<div className={extra === '请选择' ? '' : styles.selectValue}>
{extra === '请选择' ? '年-月-日 时-分' : extra}
</div>
</div>
);
const minDate = new Date();
class PublicCarApply extends Component {
state = {
constructor(props) {
super(props);
this.state = {
department: '',
createDate: '',
createDate: formatDate(new Date(), 'yyyy-MM-dd'),
name: '',
categoryName: '',
categoryId: '',
userCount: '',
beginDate: '',
endDate: '',
lineDescription: '',
showAllCategory: true,
categoryList: [],
};
}
componentDidMount() {
fetchCarCategory().then(res => {
this.setState({
categoryList: res.data,
});
});
}
selectCategory = id => {
this.setState({
categoryId: id,
});
};
validateForm = () => {
if (!this.state.categoryId) {
Toast.fail('请选择用车类型');
return false;
}
if (!this.state.userCount) {
Toast.fail('请填写用车人数');
return false;
}
if (!this.state.beginDate) {
Toast.fail('请选择用车开始时间');
return false;
}
if (!this.state.endDate) {
Toast.fail('请选择用车结束时间');
return false;
}
return true;
};
onSubmit = () => {
applyPublicCar({
...this.state,
})
if (!this.validateForm()) {
return;
}
let categoryName = JSON.stringify(
this.state.categoryList.map(i => ({
id: i.id,
name: i.name,
checked: i.id === this.state.categoryId,
}))
);
const entity = {
userId: this.state.userId,
department: this.state.department,
name: this.state.name,
categoryName: categoryName,
beginDate: this.state.beginDate,
endDate: this.state.endDate,
lineDescription: this.state.lineDescription,
userCount: this.state.userCount,
};
applyPublicCar(entity)
.then(res => {
console.log('res: ' + res);
})
.catch(err => {
console.log('err: ' + err);
});
sendMsg({
cellphone: '18108096099',
})
.then(res => {
console.log(res);
Toast.success('发送成功！');
})
.catch(err => {
console.log(err);
});
// sendMsg({
// cellphone: '18108096099',
// })
// .then(res => {
// console.log(res);
// Toast.success('发送成功！');
// })
// .catch(err => {
// console.log(err);
// });
};
render() {
const {
name,
department,
createDate,
categoryList,
categoryId,
lineDescription,
} = this.state;
return (
<div className={styles.bg}>
<List className={styles.content}>
<InputItem clear placeholder="用车部门">
用车部门
</InputItem>
<InputItem clear placeholder="申请时间">
申请时间
</InputItem>
<InputItem clear placeholder="申请人">
申请人
</InputItem>
<InputItem clear placeholder="用车类型">
用车类型
</InputItem>
<InputItem clear placeholder="用车人数">
用车人数
</InputItem>
<div className={styles.content}>
<div className={styles.listItem}>
<div className={styles.itemLabel}>用车部门</div>
<div className={styles.itemValue}>{department}</div>
</div>
<div className={styles.listItem}>
<div className={styles.itemLabel}>申请时间</div>
<div className={styles.itemValue}>{createDate}</div>
</div>
<div className={styles.listItem}>
<div className={styles.itemLabel}>申请人</div>
<div className={styles.itemValue}>{name}</div>
</div>
<div className={styles.listItemAutoHeight}>
<div className={styles.itemLabel}>用车类型</div>
<div className={styles.itemValue}>
<div className={styles.selectInput}>
请选择
<span className={styles.arrow}>
<img src={arrIcon} alt="" />
</span>
</div>
{categoryList.map(i => (
<div
key={i.id}
className={styles.optionItem}
onClick={() => this.selectCategory(i.id)}
>
<div className={styles.radioLabel}>
{i.id === categoryId ? (
<div className={styles.inner} />
) : null}
</div>
<div className={styles.radioValue}>{i.name}</div>
</div>
))}
</div>
</div>
<div className={styles.listItem}>
<div className={styles.itemLabel}>用车人数</div>
<div className={styles.itemValue}>
<input
className={styles.itemInput}
type="text"
value={this.state.userCount}
onChange={e =>
this.setState({
userCount: e.target.value,
})
}
/>
</div>
</div>
<div className={styles.listItem}>
<div className={styles.itemLabel}>用车开始时间</div>
<div className={styles.itemSelect}>
<DatePicker
minDate={minDate}
value={this.state.beginDate}
onChange={date => this.setState({ beginDate: date })}
>
<List.Item arrow="horizontal">用车开始时间</List.Item>
<CustomChildren className={styles.DateInnerWrap} />
</DatePicker>
</div>
</div>
<div className={styles.listItem}>
<div className={styles.itemLabel}>用车结束时间</div>
<div className={styles.itemSelect}>
<DatePicker
minDate={this.state.beginDate}
className={styles.DateWrap}
value={this.state.endDate}
onChange={date => this.setState({ endDate: date })}
>
<List.Item arrow="horizontal">用车结束时间</List.Item>
<CustomChildren className={styles.DateInnerWrap} />
</DatePicker>
</List>
<Button type="primary" size="small" inline onClick={this.onSubmit}>
</div>
</div>
<div className={styles.listItemAutoHeight}>
<div className={styles.itemLabel}>用车详细线路</div>
<div className={styles.itemValue}>
<TextareaItem
className={styles.textarea}
placeholder="例：温江校区-富顺县-川大望江校区"
rows={4}
count={50}
value={lineDescription}
onChange={val => this.setState({ lineDescription: val })}
/>
</div>
</div>
</div>
<Button className={styles.submitBtn} onClick={this.onSubmit}>
提交
</Button>
</div>
......
src/containers/PublicCar/PublicCarList.js
......@@ -13,6 +13,7 @@ class PublicCarList extends Component {
height: document.documentElement.clientHeight,
list: [],
pagination: {
lastIndex: null,
pageNum: 1,
pageSize: 50,
},
......@@ -33,12 +34,18 @@ class PublicCarList extends Component {
}
fetchList = () => {
const { pagination } = this.state;
fetchPublicCarList(pagination)
return fetchPublicCarList({ ...pagination })
.then(res => {
console.log(res);
this.setState({
if (res.data) {
this.setState(({ pagination }) => ({
list: res.data,
});
pagination: {
...pagination,
lastIndex: res.data[res.data.length - 1].lastIndex,
},
}));
}
})
.catch(err => {
console.log(err);
......@@ -46,9 +53,9 @@ class PublicCarList extends Component {
};
refreshHandle = () => {
this.setState({ refreshing: true });
setTimeout(() => {
this.fetchList().then(() => {
this.setState({ refreshing: false });
}, 1000);
});
};
render() {
return (
......
src/containers/PublicCar/components/PublicCarItem.js
......@@ -103,7 +103,9 @@ class PublicCarItem extends Component {
}`}
>
<div className={styles.listLabel}>处理人：</div>
<div className={styles.listValue}>{data.dealName}</div>
<div className={styles.listValue}>
{data.dealResult === 1 ? '处理中' : data.dealName}
</div>
</div>,
<div
key="dealDate"
......@@ -114,7 +116,9 @@ class PublicCarItem extends Component {
}`}
>
<div className={styles.listLabel}>处理时间：</div>
<div className={styles.listValue}>{data.dealDate}</div>
<div className={styles.listValue}>
{data.dealResult === 1 ? '待处理后显示' : data.dealDate}
</div>
</div>,
<div
key="carPlate"
......@@ -125,7 +129,9 @@ class PublicCarItem extends Component {
}`}
>
<div className={styles.listLabel}>派车车牌：</div>
<div className={styles.listValue}>{data.carPlate}</div>
<div className={styles.listValue}>
{data.dealResult === 1 ? '待处理后显示' : data.carPlate}
</div>
</div>,
data.dealResult === 3 ? (
<div
......
src/containers/PublicCar/style.css
......@@ -13,3 +13,101 @@
.noData {
composes: noData from '../Repair/style.css';
}
/* apply */
.content {
padding: 30px 40px 20px;
}
.listItem {
composes: listItem from '../Repair/style.css';
padding: 0;
min-height: 53px;
line-height: 53px;
align-items: center;
}
.listItemAutoHeight {
composes: listItem;
height: auto;
align-items: flex-start;
}
.optionItem {
display: flex;
}
.radioLabel {
composes: checkLabel from '../RepairDeal/style.css';
margin-top: 10px;
}
.inner {
composes: checkInner from '../RepairDeal/style.css';
}
.radioValue {
text-align: left;
flex: 1;
}
.itemValue {
composes: inputBox from '../Repair/style.css';
flex: 1;
}
.itemValue::after {
display: none;
}
.inputBox {
background-color: #f0f0f0;
border-radius: 8px;
}
.itemLabel {
composes: itemLabel from '../Repair/style.css';
margin: 0;
margin-right: 14px;
width: 160px;
text-align: right;
text-align-last: right;
}
.itemInput {
composes: input from '../Repair/style.css';
background-color: #f0f0f0;
border-radius: 8px;
line-height: 48px;
height: 48px;
}
.selectInput {
composes: inputBox from '../Repair/style.css';
min-height: 50px;
}
.arrow {
composes: arrow from '../../components/Input/Select/style.css';
}
.itemSelect {
flex: 1;
}
.DateWrap {
width: 100%;
}
.DateInnerWrap {
width: 100%;
}
.selectWrap {
background-color: #f0f0f0;
border-radius: 8px;
height: 48px;
line-height: 48px;
text-align: center;
color: #999;
}
.selectValue {
text-align: center;
color: #333;
}
.textarea {
background-color: #f0f0f0;
border-radius: 8px;
font-size: 22px;
}
.submitBtn {
width: 560px;
height: 80px;
line-height: 80px;
background: #3695c0;
color: #fff;
margin: 40px auto 0;
}
src/containers/PublicCarDeal/index.js
......@@ -2,7 +2,13 @@ import React, { Component } from 'react';
import { PullToRefresh, Modal, Toast, TextareaItem } from 'antd-mobile';
import styles from './style.css';
import PublicCarItem from '../PublicCar/components/PublicCarItem';
import { fetchApplyPublicCarList, dealPublicCar } from '../../api/index';
import {
fetchApplyPublicCarList,
dealPublicCar,
fetchCarPlateList,
} from '../../api/index';
// import Select from '../../components/Input/Select/Select';
import SelectIcon from './images/more_item_btn@2x.png';
class PublicCarDeal extends Component {
constructor(props) {
......@@ -23,31 +29,36 @@ class PublicCarDeal extends Component {
carPlate: '',
dealOpinion: '',
},
carPlateList: [],
};
}
componentDidMount() {
this.fetchList();
}
fetchList = () => {
fetchList = fetchMore => {
const { pagination } = this.state;
fetchApplyPublicCarList({
...pagination,
pageNum: fetchMore ? ++pagination.pageNum : pagination.pageNum,
}).then(res => {
// const { list, ...pagination } = res.data;
// this.setState({
// list: list,
// pagination: pagination,
// });
if (fetchMore) {
this.setState(({ list }) => ({
list: [...list, ...res.data],
}));
} else {
this.setState({
list: res.data.map(i => ({
...i,
dealResult: 1,
})),
list: res.data,
});
}
});
};
refreshHandle = () => {
this.fetchList();
this.fetchList(true);
};
toggleSelectedState = val => {
this.setState({
......@@ -55,6 +66,20 @@ class PublicCarDeal extends Component {
});
};
dealHandle = id => {
if (this.state.carPlateList.length === 0) {
fetchCarPlateList()
.then(res => {
this.setState(({ carPlateList }) => ({
carPlateList: res.data.map(i => ({
value: i.id,
lable: i.name,
})),
}));
})
.catch(err => {
console.log(err);
});
}
this.setState(({ selected }) => ({
dealDialogVisible: true,
selected: {
......@@ -63,7 +88,17 @@ class PublicCarDeal extends Component {
},
}));
};
resetDialog = () => {};
resetDialog = () => {
this.setState(({ selected }) => ({
dealDialogVisible: false,
selected: {
id: '',
value: '',
carPlate: '',
dealOpinion: '',
},
}));
};
toggleSelectedState = val => {
this.setState(({ selected }) => ({
selected: {
......@@ -72,7 +107,26 @@ class PublicCarDeal extends Component {
},
}));
};
validateSelect = () => {
const {
selected: { value, carPlate },
} = this.state;
if (!value) {
Toast.fail('请选择处理结果！');
return false;
}
if (value === 1) {
if (!carPlate) {
Toast.fail('请选择派车！');
return false;
}
}
return true;
};
submitHandle = () => {
if (!this.validateSelect()) {
return;
}
const {
selected: { id, value, carPlate, dealOpinion },
} = this.state;
......@@ -86,20 +140,42 @@ class PublicCarDeal extends Component {
: {
id: id,
dealResult: value,
dealOpinion: dealOpinion,
dealOpinion: dealOpinion
? `不同意 - ${dealOpinion}`
: '不同意 - 无车可派送',
};
dealPublicCar(entity)
.then(res => {
Toast.fail(res.msg || '处理成功！');
this.resetDialog();
Toast.success(res.msg || '处理成功！');
})
.catch(err => {
Toast.fail(err.msg || '处理失败！');
});
};
onSelectHandle = e => {
console.log(e);
const val = e.target.value;
this.setState(({ selected }) => ({
selected: {
...selected,
carPlate: val,
},
}));
};
onInputHandle = val => {
this.setState(({ selected }) => ({
selected: {
...selected,
dealOpinion: val,
},
}));
};
render() {
const {
selected: { value, carPlate, dealOpinion },
dealDialogVisible,
carPlateList,
} = this.state;
return (
<PullToRefresh
......@@ -130,13 +206,14 @@ class PublicCarDeal extends Component {
onClose={this.resetDialog}
title=""
footer={[
{ text: '放弃', onPress: () => console.log('cancel') },
{ text: '放弃', onPress: this.resetDialog },
{
text: '提交',
onPress: this.submitHandle,
},
]}
>
<div className={styles.dialogBody}>
<div key="radio" className={styles.alertInfo}>
<div
className={styles.radioBox}
......@@ -159,7 +236,30 @@ class PublicCarDeal extends Component {
</div>
{value === 1 ? (
<div key="agree" className={styles.agree}>
<span className={styles.dialogLabel}>派车车牌</span>
<span className={styles.dialogAgreeLabel}>派车车牌</span>
<div className={styles.selectWrap}>
<div className={styles.selectIcon}>
<img src={SelectIcon} alt="" />
</div>
<select
className={styles.select}
value={carPlate}
onChange={this.onSelectHandle}
>
{carPlateList.map(i => (
<option key={i.value} value={i.value}>
{i.lable}
</option>
))}
</select>
</div>
{/* <Select
placeholder="请选择"
data={carPlateList}
cols={1}
onChange={this.onSelectHandle}
/> */}
</div>
) : value === 2 ? (
<div key="notAgree" className={styles.notAgree}>
......@@ -169,10 +269,12 @@ class PublicCarDeal extends Component {
placeholder="输入报修地址"
rows={3}
count={50}
// value={dealOpinion}
value={dealOpinion}
onChange={this.onInputHandle}
/>
</div>
) : null}
</div>
</Modal>
</PullToRefresh>
);
......
src/containers/PublicCarDeal/style.css
......@@ -5,12 +5,16 @@
composes: noData from '../Repair/style.css';
}
.dialogBody {
/* height: 200px; */
}
.dealDialog {
width: 520px;
}
.alertInfo {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.radioBox {
display: flex;
......@@ -32,12 +36,42 @@
margin-left: 30px;
margin-right: 14px;
}
.dialogAgreeLabel {
line-height: 60px;
margin-right: 14px;
}
.agree,
.notAgree {
display: flex;
font-size: 26px;
color: #333;
}
.selectWrap {
position: relative;
width: 310px;
height: 60px;
line-height: 60px;
background-color: #f2f2f2;
border-radius: 8px;
padding-left: 26px;
}
.selectIcon {
position: absolute;
right: 0;
top: 0;
width: 46px;
height: 60px;
}
.select {
border: none;
appearance: none;
outline: none;
width: 100%;
height: 100%;
background-color: #f2f2f2;
}
.textarea {
background-color: #f2f2f2;
width: 310px;
height: 180px;
box-sizing: border-box;
......
src/containers/Repair/style.css
......@@ -176,7 +176,6 @@
margin: 20px auto 0;
color: #fff;
font-size: 30px;
font-weight: bold;
background-color: #3695c0;
}
/* reportList */
......
src/store/index.js
......@@ -2,12 +2,12 @@ class Store {
constructor() {
this.userId = '1';
}
static getUserId = () => {
getUserId = () => {
return this.userId;
};
static updateUserId = userId => {
updateUserId = userId => {
this.userId = userId;
};
}
export default Store;
export default new Store();
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