|
|
@@ -1,68 +1,73 @@
|
|
|
import React, { Component } from 'react'
|
|
|
import TabBar from './TabBar'
|
|
|
import NavBars from '../common/NavBar'
|
|
|
+import Pickers from '../common/Picker'
|
|
|
+import Input from '../common/Input'
|
|
|
+import { WhiteSpace } from 'antd-mobile';
|
|
|
+
|
|
|
|
|
|
import {graphqls} from '../../api/graphql_request'
|
|
|
import {ACCOUNT_BY_PROPS} from '../../api/graphql/account'
|
|
|
-import {CLASS_BY_PROPS} from '../../api/graphql/class'
|
|
|
+import {TAG_BY_PROPS} from '../../api/graphql/tag'
|
|
|
import {CREATE_BILL} from '../../api/graphql/bills'
|
|
|
|
|
|
import {failToast} from '../common/Toast'
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
let user_id=sessionStorage.getItem('openid')
|
|
|
|
|
|
export default class Bill extends Component {
|
|
|
constructor(props){
|
|
|
- super(props)
|
|
|
- this.state={
|
|
|
- tabs:[{title:'收入'},{title:'支出'}],
|
|
|
- class:'收入',
|
|
|
- account:[],
|
|
|
- classs:[],
|
|
|
- account_id:'',
|
|
|
- time:'',
|
|
|
- remark:'',
|
|
|
- money:'',
|
|
|
- tag_id:''
|
|
|
-
|
|
|
- }
|
|
|
+ super(props)
|
|
|
+ this.state={
|
|
|
+ picker:[],
|
|
|
+ tabs:[{title:'收入'},{title:'支出'}],
|
|
|
+ class:'收入',
|
|
|
+ account:[],
|
|
|
+ tags:[],
|
|
|
+ account_id:'',
|
|
|
+ time:'',
|
|
|
+ remark:'',
|
|
|
+ money:'',
|
|
|
+ tag_id:'',
|
|
|
+ showPicker:false
|
|
|
+ }
|
|
|
|
|
|
this.tabChange=this.tabChange.bind(this)
|
|
|
this.handleSubmit=this.handleSubmit.bind(this)
|
|
|
+ this.setMoney=this.setMoney.bind(this)
|
|
|
+ this.setAccount_id=this.setAccount_id.bind(this)
|
|
|
+ this.setTime=this.setTime.bind(this)
|
|
|
+ this.setRemark=this.setRemark.bind(this)
|
|
|
+ this.handleSubmit=this.handleSubmit.bind(this)
|
|
|
+ this.showAccountPicker=this.showAccountPicker.bind(this)
|
|
|
+ this.showTimetPicker=this.showTimetPicker.bind(this)
|
|
|
+ this.showTagPicker=this.showTagPicker.bind(this)
|
|
|
}
|
|
|
|
|
|
componentDidMount(){
|
|
|
+
|
|
|
this.getAccount()
|
|
|
- this.getClass()
|
|
|
+ this.getTag()
|
|
|
}
|
|
|
|
|
|
getAccount(){
|
|
|
-
|
|
|
console.log(user_id)
|
|
|
graphqls(ACCOUNT_BY_PROPS,{user_id}).then((e)=>{
|
|
|
- console.log(e.accountbyprops)
|
|
|
- this.setState({
|
|
|
- account:e.accountbyprops
|
|
|
- })
|
|
|
+ //console.log('account',e.accountbyprops)
|
|
|
+ this.setState({account:e.accountbyprops})
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- getClass(){
|
|
|
+ getTag(){
|
|
|
let user_id=sessionStorage.getItem('openid')
|
|
|
- graphqls(CLASS_BY_PROPS,{user_id}).then((e)=>{
|
|
|
- console.log(e.classbyprops)
|
|
|
- this.setState({
|
|
|
- classs:e.classbyprops
|
|
|
- })
|
|
|
+ graphqls(TAG_BY_PROPS,{user_id}).then((e)=>{
|
|
|
+ this.setState({account:e.accountbyprops})
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- tabChange(e){
|
|
|
- console.log(e)
|
|
|
- this.setState({class:e.title})
|
|
|
- }
|
|
|
-
|
|
|
handleSubmit(e){
|
|
|
e.preventDefault()
|
|
|
let data={
|
|
|
@@ -94,56 +99,66 @@ export default class Bill extends Component {
|
|
|
failToast('所有选项不能为空',1)
|
|
|
}
|
|
|
}
|
|
|
+ //picker
|
|
|
+ showAccountPicker(){
|
|
|
+
|
|
|
+ this.setState({showPicker:true})
|
|
|
+ }
|
|
|
+ showTimetPicker(){
|
|
|
+
|
|
|
+ }
|
|
|
+ showTagPicker(){
|
|
|
+
|
|
|
+ this.setState({showPicker:true})
|
|
|
+ }
|
|
|
+ //设置state的函数
|
|
|
+ tabChange(e){
|
|
|
+ console.log(e)
|
|
|
+ this.setState({class:e.title})
|
|
|
+ }
|
|
|
+ setMoney(money){
|
|
|
+ console.log(money)
|
|
|
+ this.setState({money})
|
|
|
+ }
|
|
|
+ setAccount_id(account_id){
|
|
|
+ console.log(account_id)
|
|
|
+ this.setState({account_id})
|
|
|
+ }
|
|
|
+ setTime(time){
|
|
|
+ console.log(time)
|
|
|
+ this.setState({time})
|
|
|
+ }
|
|
|
+ setRemark(remark){
|
|
|
+ console.log(remark)
|
|
|
+ this.setState({remark})
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
const account=this.state.account
|
|
|
- const classs=this.state.classs
|
|
|
+ const classs=this.state.classs
|
|
|
return (
|
|
|
<div className="billWrap">
|
|
|
<NavBars page='home' navBarText='记一笔' changePage={this.props.changePage}/>
|
|
|
<TabBar tabs={this.state.tabs} tabChange={this.tabChange}/>
|
|
|
<form onSubmit={this.handleSubmit}>
|
|
|
- <div className="moneyWrap row">
|
|
|
- <label>金额:</label>
|
|
|
- <input type="text" name="money" className="input" onChange={(e)=>this.setState({money:e.currentTarget.value})}/>
|
|
|
- </div>
|
|
|
- <div className="accountWrap row">
|
|
|
- <label>账户:</label>
|
|
|
- <select name="account" className="input" onChange={(e)=>this.setState({account_id:e.currentTarget.value})}>
|
|
|
- <option value="0">下拉选择你的账户</option>
|
|
|
- {
|
|
|
- account.map((item)=>{
|
|
|
- return(
|
|
|
- <option key={item.id} value={item.id}>{item.accountName}</option>
|
|
|
- )
|
|
|
- })
|
|
|
- }
|
|
|
- </select>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="classWrap row">
|
|
|
- <label>分类:</label>
|
|
|
- <select name="class" className="input" onChange={(e)=>this.setState({tag_id:e.currentTarget.value})}>
|
|
|
- <option value="0">下拉选择你的分类</option>
|
|
|
- {
|
|
|
- classs.map((item)=>{
|
|
|
- return(
|
|
|
- <option key={item.id} value={item.id}>{item.name}</option>
|
|
|
- )
|
|
|
- })
|
|
|
- }
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div className="timeWrap row">
|
|
|
- <label>时间:</label><input type="text" name="time" className="input" placeholder="格式:2018/12/1 00:00:00" onChange={(e)=>this.setState({time:e.currentTarget.value})}/>
|
|
|
- </div>
|
|
|
- <div className="remarkWrap row">
|
|
|
- <label>备注:</label><input type="text" name="remark" className="input" onChange={(e)=>this.setState({remark:e.currentTarget.value})}/>
|
|
|
- </div>
|
|
|
+ <Input title="金额" callback={this.setMoney} value={this.state.money} />
|
|
|
+ <WhiteSpace />
|
|
|
+ <div onClick={this.showAccountPicker}><Input title="账户" disabled={true} callback={this.setAccount_id} value={this.state.account_id} extra={true} /></div>
|
|
|
+
|
|
|
+ <WhiteSpace />
|
|
|
+ <div onClick={this.showTagPicker}><Input title="分类" disabled={true} extra={true} onClick={()=>{}}/></div>
|
|
|
+
|
|
|
+ <WhiteSpace />
|
|
|
+ <div onClick={()=>{console.log('click time')}}><Input title="时间" disabled={true} callback={this.setTime} value={this.state.time} extra={true} onClick={()=>{}}/></div>
|
|
|
+
|
|
|
+ <WhiteSpace />
|
|
|
+ <Input title="备注" callback={this.setRemark} value={this.state.remark}/>
|
|
|
<button className="submit" type="submit">保存</button>
|
|
|
</form>
|
|
|
+ <div style={this.state.showPicker?{}:{display:"none"}}><Pickers data={this.state.picker}/></div>
|
|
|
+
|
|
|
</div>
|
|
|
)
|
|
|
}
|