Merge branch 'master' of http://gogs.ioobot.com:6680/xy/online

src/case/BillApp/src/App.css

@@ -29,3 +29,32 @@
     background-color: black;
 }
 
+.billWrap form{
+    margin-top: 20px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.billWrap .row{
+    width: 283px;
+    padding: 7px 20px;
+    font-size: 10px;
+    border-bottom: 1px solid #ddd;
+} 
+
+.billWrap .input{
+    padding-left: 53px;
+    border: none;
+}
+
+.billWrap .submit{
+    color: #ffffff;
+    background: green;
+    margin-top: 30px;
+    border: none;
+    border-radius: 3px;
+    padding: 11px 93px;
+}

src/case/BillApp/src/api/graphql/bills.js

@@ -24,6 +24,43 @@ export const  BILL_BY_PROPS=`query billbyprops($money: Float, $updateAt: String,
         }
         tag_id {
             id
+            name
+            icon
+            createdAt
+            updateAt
+        }
+    }
+}`
+
+export const CREATE_BILL=`mutation createbill($money: Float, $updateAt: String, $remark: String, $account_id: ID, $time: String, $createdAt: String, $id: ID!, $class: String, $user_id: ID, $tag_id: ID) {
+    createbill: create_bill(money: $money updateAt: $updateAt remark: $remark account_id: $account_id time: $time createdAt: $createdAt id: $id class: $class user_id: $user_id tag_id: $tag_id) {
+        money
+        updateAt
+        remark
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        time
+        createdAt
+        id
+        class
+        user_id {
+            id
+            openid
+            username
+            password
+            avatar
+            createdAt
+            updateAt
+        }
+        tag_id {
+            id
+
+
             name
             icon
             createdAt

src/case/BillApp/src/components/Bill/Bill.jsx

@@ -5,7 +5,11 @@ import NavBars from '../common/NavBar'
 import {graphqls} from '../../api/graphql_request'
 import {ACCOUNT_BY_PROPS} from '../../api/graphql/account'
 import {CLASS_BY_PROPS} from '../../api/graphql/class'
+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){
@@ -14,10 +18,17 @@ export default class Bill extends Component {
           tabs:[{title:'收入'},{title:'支出'}],
           class:'收入',
           account:[],
-          classs:[]
+          classs:[],
+          account_id:'',
+          time:'',
+          remark:'',
+          money:'',
+          tag_id:''
+
       }
 
     this.tabChange=this.tabChange.bind(this)
+    this.handleSubmit=this.handleSubmit.bind(this)
   }
 
   componentDidMount(){
@@ -26,7 +37,7 @@ export default class Bill extends Component {
   }
 
   getAccount(){
-    let user_id=sessionStorage.getItem('openid')
+   
     console.log(user_id)
     graphqls(ACCOUNT_BY_PROPS,{user_id}).then((e)=>{
         console.log(e.accountbyprops)
@@ -41,7 +52,7 @@ export default class Bill extends Component {
     graphqls(CLASS_BY_PROPS,{user_id}).then((e)=>{
         console.log(e.classbyprops)
         this.setState({
-            clsss:e.classbyprops
+            classs:e.classbyprops
         })
     })
   }
@@ -52,78 +63,90 @@ export default class Bill extends Component {
       this.setState({class:e.title})
   }
 
+  handleSubmit(e){
+    e.preventDefault()
+    let data={
+        id:new Date().getTime()+parseInt(Math.random(),10),
+        class:this.state.class,
+        account_id:this.state.account_id,
+        money:this.state.money,
+        remark:this.state.remark,
+        tag_id:this.state.tag_id,
+        time:this.state.time,
+        user_id,
+        createdAt:new Date().toLocaleString('chinese', { hour12: false }),
+        updateAt:new Date().toLocaleString('chinese', { hour12: false })
+    }
+
+    let key =Object.keys(data)
+    let submit =true
+    key.forEach((item)=>{
+        if(data[item]===''){
+            submit=false
+        }
+    })
 
-    /*
-    account_id: ID
-    class: String
-    createdAt: String
-    id: ID!
-    money: Float
-    remark: String
-    tag_id: ID
-    time: String
-    updateAt: String
-
-    金额
-
-    类别
-    账户
-    时间
-
-    备注
+    if(submit){
+        graphqls(CREATE_BILL,data).then((e)=>{
+            console.log(e)
+        })
+    }else{
+        failToast('所有选项不能为空',1)
+    }
+  
+    
+    
+  }
 
 
-    accountName: "shuying"
-createdAt: "2018-11-19 2:42:25"
-id: "1542609745385"
-updateAt: ""
-user_id: null
-    */
 
   render() {
     const account=this.state.account
-    const classs=this.state.class
+    const classs=this.state.classs
     return (
-      <div>
+      <div className="billWrap">
         <NavBars page='home' navBarText='记一笔' changePage={this.props.changePage}/>
         <TabBar tabs={this.state.tabs} tabChange={this.tabChange}/>
-        <div className="money">
-        <input name="money"/>
-        </div>
-        
-
-        <div className="class">
-            {}
-        </div>
-    
-        <select name="account">
-            <option value="0">下拉选择你的账户</option>
-            {
-                account.map((item)=>{
-                    return(
-                        <option key={item.id} value={item.id}>{item.accountName}</option> 
-                    )
-                })            
-            } 
-        </select>
-
-        <select name="class">
-            <option value="0">下拉选择你的账户</option>
-            {
-                account.map((item)=>{
-                    return(
-                        <option key={item.id} value={item.id}>{item.accountName}</option> 
-                    )
-                })            
-            } 
-        </select>
-      
-
-        
-
-        <div className="timeWrap">
-            <label>shijian </label><input name="time"/>
-        </div>
+        <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> 
+            <button className="submit" type="submit">保存</button>
+        </form>
       </div>
     )
   }

src/case/BillApp/src/components/common/Alert.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
+
+const alert = Modal.alert;
+
+export const dialog =(type,message)=>{
+    return new Promise((resolve,reject)=>{
+        alert(type, message, [
+            { text: '取消', onPress: () => {reject.call(null,0)}},
+            { text: '确认', onPress: () => {resolve.call(null,1)} },
+          ])
+    })
+}
+
+

src/case/BillApp/src/components/common/Status.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { ActivityIndicator } from 'antd-mobile';
+
+export const Loading=(text,show)=>{
+    return(<ActivityIndicator toast text={text} animating={show}/>)
+}

src/case/BillApp/src/components/common/Toast.jsx

@@ -0,0 +1,11 @@
+//封装Toast
+import React, { Component } from 'react'
+import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
+
+
+export const successToast=(message,time)=> {
+  Toast.success(message, time);
+}
+export const failToast=(message,time)=> {
+  Toast.fail(message, time);
+}