|
|
@@ -1,13 +1,23 @@
|
|
|
import React, {Component} from 'react';
|
|
|
import './index.css';
|
|
|
-import {NoticeBar, List, InputItem, ImagePicker, Button} from 'antd-mobile';
|
|
|
+import {NoticeBar, List, InputItem, ImagePicker, Button, Stepper, DatePicker} from 'antd-mobile';
|
|
|
import {Query, Mutation} from "react-apollo";
|
|
|
import {Spin} from 'antd';
|
|
|
import gql from "graphql-tag";
|
|
|
-import {serverbyprops, servicebyprops, createserver} from "../../gql";
|
|
|
+import {
|
|
|
+ servicebyid,
|
|
|
+ serverbyprops,
|
|
|
+ servicebyprops,
|
|
|
+ createserver,
|
|
|
+ updateserviceAndupdaterepertory,
|
|
|
+ createserviceAndcreaterepertory,
|
|
|
+ deleteserviceAnddeleterepertory
|
|
|
+} from "../../gql";
|
|
|
import {idGen} from "../../func";
|
|
|
|
|
|
const Item = List.Item;
|
|
|
+const nowTimeStamp = Date.now();
|
|
|
+const now = new Date(nowTimeStamp);
|
|
|
|
|
|
class Release extends Component {
|
|
|
constructor(props) {
|
|
|
@@ -96,6 +106,18 @@ class ServiceList extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ componentWillReceiveProps() {
|
|
|
+ this.setState({
|
|
|
+ serviceID: ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ donotShowDetail = () => {
|
|
|
+ this.setState({
|
|
|
+ serviceID: ''
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
render() {
|
|
|
let {serverID} = this.props;
|
|
|
return (
|
|
|
@@ -109,41 +131,54 @@ class ServiceList extends Component {
|
|
|
return 'error!';
|
|
|
}
|
|
|
return (
|
|
|
- <List renderHeader={() => 'TA的服务项'} className="my-list">
|
|
|
- {
|
|
|
- data.servicebyprops.map(service =>
|
|
|
- <Item
|
|
|
- key={service.id}
|
|
|
- arrow="horizontal"
|
|
|
- multipleLine
|
|
|
- onClick={() => {
|
|
|
- this.setState({
|
|
|
- serviceID: service.id
|
|
|
- })
|
|
|
- }}
|
|
|
- >
|
|
|
- {service.description}
|
|
|
- </Item>
|
|
|
- )
|
|
|
- }
|
|
|
-
|
|
|
- <Item
|
|
|
- arrow="horizontal"
|
|
|
- multipleLine
|
|
|
- onClick={() => {
|
|
|
- this.setState({
|
|
|
- serviceID: 'add'
|
|
|
- })
|
|
|
- }}
|
|
|
- >
|
|
|
+ <div>
|
|
|
+ <List renderHeader={() => 'TA的服务项'} className="my-list">
|
|
|
{
|
|
|
- data.servicebyprops.length === 0 ?
|
|
|
- '没有服务项,点我添加' : '添加'
|
|
|
+ data.servicebyprops.map(service =>
|
|
|
+ <Item
|
|
|
+ key={service.id}
|
|
|
+ arrow="horizontal"
|
|
|
+ multipleLine
|
|
|
+ onClick={() => {
|
|
|
+ this.setState({
|
|
|
+ serviceID: service.id
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {service.description}
|
|
|
+ </Item>
|
|
|
+ )
|
|
|
}
|
|
|
- </Item>
|
|
|
+
|
|
|
+ <Item
|
|
|
+ arrow="horizontal"
|
|
|
+ multipleLine
|
|
|
+ onClick={() => {
|
|
|
+ this.setState({
|
|
|
+ serviceID: 'add'
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {
|
|
|
+ data.servicebyprops.length === 0 ?
|
|
|
+ '没有服务项,点我添加' : '添加'
|
|
|
+ }
|
|
|
+ </Item>
|
|
|
+ </List>
|
|
|
+
|
|
|
+ {
|
|
|
+ this.state.serviceID ?
|
|
|
+ <ServiceDetail
|
|
|
+ serviceID={this.state.serviceID}
|
|
|
+ serverID={serverID}
|
|
|
+ donotShowDetail={this.donotShowDetail}
|
|
|
+ />
|
|
|
+ :
|
|
|
+ ''
|
|
|
+ }
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- </List>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
@@ -181,8 +216,12 @@ class AddServer extends Component {
|
|
|
const {files, name, description} = this.state;
|
|
|
return (
|
|
|
<List renderHeader={() => '请输入服务信息'}>
|
|
|
- <InputItem onChange={(e)=>{this.setState({name: e})}} value={name} placeholder="请输入名称">名称</InputItem>
|
|
|
- <InputItem onChange={(e)=>{this.setState({description: e})}} value={description} placeholder="请输入简介">简介</InputItem>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({name: e})
|
|
|
+ }} value={name} placeholder="请输入名称">名称</InputItem>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({description: e})
|
|
|
+ }} value={description} placeholder="请输入简介">简介</InputItem>
|
|
|
<ImagePicker
|
|
|
files={files}
|
|
|
onChange={this.onChange}
|
|
|
@@ -191,8 +230,8 @@ class AddServer extends Component {
|
|
|
multiple={false}
|
|
|
/>
|
|
|
<Item>
|
|
|
- <SubmitButton
|
|
|
- img={files[0]?files[0].url:''}
|
|
|
+ <SubmitServerButton
|
|
|
+ img={files[0] ? files[0].url : ''}
|
|
|
name={name}
|
|
|
description={description}
|
|
|
/>
|
|
|
@@ -203,11 +242,10 @@ class AddServer extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-class SubmitButton extends Component {
|
|
|
+class SubmitServerButton extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
- this.state = {
|
|
|
- }
|
|
|
+ this.state = {}
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
@@ -231,7 +269,9 @@ class SubmitButton extends Component {
|
|
|
updatedAt: ''
|
|
|
};
|
|
|
return (
|
|
|
- <Button type="primary" size="small" inline onClick={()=>{createserver({variables: varObj})}}>提交</Button>
|
|
|
+ <Button type="primary" size="small" inline onClick={() => {
|
|
|
+ createserver({variables: varObj})
|
|
|
+ }}>提交</Button>
|
|
|
)
|
|
|
}}
|
|
|
</Mutation>
|
|
|
@@ -239,5 +279,309 @@ class SubmitButton extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+class ServiceDetail extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {serviceID, serverID, donotShowDetail} = this.props;
|
|
|
+ return (
|
|
|
+ <Query query={gql(servicebyid)} variables={{id: serviceID}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return <Spin className={'spin'}/>
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!';
|
|
|
+ }
|
|
|
+ let service = data.servicebyid;
|
|
|
+
|
|
|
+ let description = '',
|
|
|
+ startTime = '',
|
|
|
+ lastTime = '',
|
|
|
+ price = '',
|
|
|
+ repertory = 1,
|
|
|
+ repertoryID = '';
|
|
|
+
|
|
|
+ if (service !== null) {
|
|
|
+ description = service.description;
|
|
|
+ startTime = service.startTime;
|
|
|
+ lastTime = service.lastTime;
|
|
|
+ price = service.price;
|
|
|
+ repertory = service.repertory_id.count;
|
|
|
+ repertoryID = service.repertory_id.id;
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <ServiceDetailRender
|
|
|
+ serverID={serverID}
|
|
|
+ serviceID={serviceID}
|
|
|
+ description={description}
|
|
|
+ startTime={startTime}
|
|
|
+ lastTime={lastTime}
|
|
|
+ price={price}
|
|
|
+ repertory={repertory}
|
|
|
+ repertoryID={repertoryID}
|
|
|
+ donotShowDetail={donotShowDetail}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class ServiceDetailRender extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ serverID: props.serverID,
|
|
|
+ serviceID: props.serviceID,
|
|
|
+ repertoryID: props.repertoryID,
|
|
|
+ description: props.description,
|
|
|
+ lastTime: props.lastTime,
|
|
|
+ startTime: props.startTime,
|
|
|
+ price: props.price,
|
|
|
+ repertory: props.repertory,
|
|
|
+ showCalendar: false,
|
|
|
+ date: props.startTime ? new Date(Number(props.startTime)) : now,
|
|
|
+ endDate: props.startTime ? new Date(Number(props.startTime) + Number(props.lastTime)) : now,
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillReceiveProps(next) {
|
|
|
+ this.setState({
|
|
|
+ serverID: next.serverID,
|
|
|
+ serviceID: next.serviceID,
|
|
|
+ repertoryID: next.repertoryID,
|
|
|
+ description: next.description,
|
|
|
+ lastTime: next.lastTime,
|
|
|
+ startTime: next.startTime,
|
|
|
+ price: next.price,
|
|
|
+ repertory: next.repertory
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onReset = () => {
|
|
|
+ this.setState({
|
|
|
+ startTime: '',
|
|
|
+ lastTime: '',
|
|
|
+ description: '',
|
|
|
+ price: '',
|
|
|
+ repertory: 1
|
|
|
+ })
|
|
|
+ };
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {serverID, serviceID, repertoryID, description, price, repertory, date, endDate} = this.state;
|
|
|
+ let {donotShowDetail} = this.props;
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <List renderHeader={() => '请输入服务项信息'}>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({description: e})
|
|
|
+ }} value={description} placeholder="请输入服务类型">服务类型</InputItem>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({price: e})
|
|
|
+ }} value={price} placeholder="请输入价格">价格</InputItem>
|
|
|
+ <Item
|
|
|
+ wrap
|
|
|
+ extra={
|
|
|
+ <Stepper
|
|
|
+ style={{width: '100%', minWidth: '100px'}}
|
|
|
+ showNumber
|
|
|
+ min={0}
|
|
|
+ value={repertory}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({repertory: e})
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+ >
|
|
|
+ 库存
|
|
|
+ </Item>
|
|
|
+ <DatePicker
|
|
|
+ value={this.state.date}
|
|
|
+ onChange={date => this.setState({date})}
|
|
|
+ >
|
|
|
+ <List.Item arrow="horizontal">选择开放时间</List.Item>
|
|
|
+ </DatePicker>
|
|
|
+ <DatePicker
|
|
|
+ value={this.state.endDate}
|
|
|
+ onChange={endDate => this.setState({endDate})}
|
|
|
+ >
|
|
|
+ <List.Item arrow="horizontal">选择结束时间</List.Item>
|
|
|
+ </DatePicker>
|
|
|
+ <Item>
|
|
|
+ {
|
|
|
+ serviceID === 'add' ?
|
|
|
+ <SubmitServiceCreateButton
|
|
|
+ serverID={serverID}
|
|
|
+ count={repertory}
|
|
|
+ description={description}
|
|
|
+ price={price}
|
|
|
+ startTime={date.getTime()}
|
|
|
+ lastTime={endDate.getTime() - date.getTime()}
|
|
|
+ />
|
|
|
+ :
|
|
|
+ <SubmitServiceUpdateButton
|
|
|
+ serverID={serverID}
|
|
|
+ serviceID={serviceID}
|
|
|
+ repertoryID={repertoryID}
|
|
|
+ count={repertory}
|
|
|
+ description={description}
|
|
|
+ price={price}
|
|
|
+ startTime={date.getTime()}
|
|
|
+ lastTime={endDate.getTime() - date.getTime()}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ <Button size="small" inline style={{marginLeft: '2.5px'}} onClick={this.onReset}>重置</Button>
|
|
|
+ {
|
|
|
+ serviceID === 'add' ?
|
|
|
+ ''
|
|
|
+ :
|
|
|
+ <SubmitServiceDeleteButton
|
|
|
+ serverID={serverID}
|
|
|
+ serviceID={serviceID}
|
|
|
+ repertoryID={repertoryID}
|
|
|
+ donotShowDetail={donotShowDetail}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ </Item>
|
|
|
+ </List>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class SubmitServiceUpdateButton extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {serverID, serviceID, description, startTime, lastTime, price, count, repertoryID} = this.props;
|
|
|
+ return (
|
|
|
+ <Mutation
|
|
|
+ mutation={gql(updateserviceAndupdaterepertory)}
|
|
|
+ refetchQueries={[
|
|
|
+ {query: gql(servicebyprops), variables: {server_id: serverID}}
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {(updateBothTwo, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return <Spin/>;
|
|
|
+ if (error)
|
|
|
+ return 'error';
|
|
|
+ let varObj = {
|
|
|
+ server_id: serverID,
|
|
|
+ service_id: serviceID,
|
|
|
+ repertory_id: repertoryID,
|
|
|
+ description,
|
|
|
+ startTime,
|
|
|
+ lastTime,
|
|
|
+ price,
|
|
|
+ count,
|
|
|
+ updatedAt: new Date().getTime()
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <Button type="primary" size="small" inline onClick={() => {
|
|
|
+ updateBothTwo({variables: varObj})
|
|
|
+ }}>修改</Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class SubmitServiceCreateButton extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {serverID, description, startTime, lastTime, price, count} = this.props;
|
|
|
+ return (
|
|
|
+ <Mutation
|
|
|
+ mutation={gql(createserviceAndcreaterepertory)}
|
|
|
+ refetchQueries={[
|
|
|
+ {query: gql(servicebyprops), variables: {server_id: serverID}}
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {(createBothTwo, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return <Spin/>;
|
|
|
+ if (error)
|
|
|
+ return 'error';
|
|
|
+ let varObj = {
|
|
|
+ server_id: serverID,
|
|
|
+ service_id: idGen('service'),
|
|
|
+ repertory_id: idGen('repertory'),
|
|
|
+ description,
|
|
|
+ startTime,
|
|
|
+ lastTime,
|
|
|
+ price,
|
|
|
+ count,
|
|
|
+ createdAt: new Date().getTime(),
|
|
|
+ updatedAt: ''
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <Button type="primary" size="small" inline onClick={() => {
|
|
|
+ createBothTwo({variables: varObj})
|
|
|
+ }}>创建</Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class SubmitServiceDeleteButton extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {serverID, serviceID, repertoryID, donotShowDetail} = this.props;
|
|
|
+ return (
|
|
|
+ <Mutation
|
|
|
+ mutation={gql(deleteserviceAnddeleterepertory)}
|
|
|
+ refetchQueries={[
|
|
|
+ {query: gql(servicebyprops), variables: {server_id: serverID}}
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {(deleteBothTwo, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return <Spin/>;
|
|
|
+ if (error)
|
|
|
+ return 'error';
|
|
|
+ let varObj = {
|
|
|
+ service_id: serviceID,
|
|
|
+ repertory_id: repertoryID
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <Button size="small" type="warning" inline style={{marginLeft: '10px'}} onClick={()=>{
|
|
|
+ deleteBothTwo({variables: varObj});
|
|
|
+ donotShowDetail();
|
|
|
+ }}>删除</Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
export default Release;
|
|
|
|