Skip to content

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

添加约车页面

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