add som bill graphql

src/case/BillApp/src/App.css

@@ -9,4 +9,8 @@
     overflow:scroll;
 }
 
+.billApp div.am-tabs-default-bar-tab{
+    font-size: 10px;
+}
+
 

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

@@ -0,0 +1,57 @@
+export  const ACCOUNT_BY_PROPS=`query accountbyprops($user_id: ID, $accountName: String, $createdAt: String, $updateAt: String) {
+    accountbyprops: account_by_props(user_id: $user_id accountName: $accountName createdAt: $createdAt updateAt: $updateAt) {
+        id
+        user_id {
+            id
+            openid
+            username
+            password
+            avatar
+            createdAt
+            updateAt
+        }
+        accountName
+        createdAt
+        updateAt
+    }
+}`
+
+export const CREATE_ACCOUNT=`mutation createaccount($id: ID!, $user_id: ID, $accountName: String, $createdAt: String, $updateAt: String) {
+    createaccount: create_account(id: $id user_id: $user_id accountName: $accountName createdAt: $createdAt updateAt: $updateAt) {
+        id
+        user_id {
+            id
+            openid
+            username
+            password
+            avatar
+            createdAt
+            updateAt
+        }
+        accountName
+        createdAt
+        updateAt
+    }
+}`
+
+export const DELETE_ACCOUNT=`mutation deleteaccount($id: ID, $user_id: ID, $accountName: String, $createdAt: String, $updateAt: String) {
+    deleteaccount: delete_account(id: $id user_id: $user_id accountName: $accountName createdAt: $createdAt updateAt: $updateAt)
+}`
+
+export const UPDATE_ACCOUNT=`mutation updateaccount($id: ID, $user_id: ID, $accountName: String, $createdAt: String, $updateAt: String) {
+    updateaccount: update_account(id: $id user_id: $user_id accountName: $accountName createdAt: $createdAt updateAt: $updateAt) {
+        id
+        user_id {
+            id
+            openid
+            username
+            password
+            avatar
+            createdAt
+            updateAt
+        }
+        accountName
+        createdAt
+        updateAt
+    }
+}`

src/case/BillApp/src/api/graphql/billsGraphql.txt

@@ -57,6 +57,22 @@ query accountbyid($id: ID) {
     }
 }
 
+query classbyid($id: ID) {
+    classbyid: class_by_id(id: $id) {
+        id
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        name
+        createdAt
+        updateAt
+    }
+}
+
 query tagbyprops($account_id: ID, $name: String, $icon: String, $createdAt: String, $updateAt: String) {
     tagbyprops: tag_by_props(account_id: $account_id name: $name icon: $icon createdAt: $createdAt updateAt: $updateAt) {
         id
@@ -101,6 +117,22 @@ query billbyid($id: ID) {
     }
 }
 
+query classbyprops($account_id: ID, $name: String, $createdAt: String, $updateAt: String) {
+    classbyprops: class_by_props(account_id: $account_id name: $name createdAt: $createdAt updateAt: $updateAt) {
+        id
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        name
+        createdAt
+        updateAt
+    }
+}
+
 query accountbyprops($user_id: ID, $accountName: String, $createdAt: String, $updateAt: String) {
     accountbyprops: account_by_props(user_id: $user_id accountName: $accountName createdAt: $createdAt updateAt: $updateAt) {
         id
@@ -172,6 +204,7 @@ query billbyprops($account_id: ID, $tag_id: ID, $time: String, $money: Float, $c
         remark
         account_id {
             id
+
             accountName
             createdAt
             updateAt
@@ -262,6 +295,26 @@ mutation updateuser($id: ID, $openid: String, $username: String, $password: Stri
     }
 }
 
+mutation deleteclass($id: ID, $account_id: ID, $name: String, $createdAt: String, $updateAt: String) {
+    deleteclass: delete_class(id: $id account_id: $account_id name: $name createdAt: $createdAt updateAt: $updateAt)
+}
+
+mutation updateclass($id: ID, $account_id: ID, $name: String, $createdAt: String, $updateAt: String) {
+    updateclass: update_class(id: $id account_id: $account_id name: $name createdAt: $createdAt updateAt: $updateAt) {
+        id
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        name
+        createdAt
+        updateAt
+    }
+}
+
 mutation updatetag($id: ID, $account_id: ID, $name: String, $icon: String, $createdAt: String, $updateAt: String) {
     updatetag: update_tag(id: $id account_id: $account_id name: $name icon: $icon createdAt: $createdAt updateAt: $updateAt) {
         id
@@ -402,6 +455,22 @@ mutation updatecollect($updateAt: String, $remark: String, $account_id: ID, $mon
     }
 }
 
+mutation createclass($id: ID!, $account_id: ID, $name: String, $createdAt: String, $updateAt: String) {
+    createclass: create_class(id: $id account_id: $account_id name: $name createdAt: $createdAt updateAt: $updateAt) {
+        id
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        name
+        createdAt
+        updateAt
+    }
+}
+
 mutation createbill($money: Float, $updateAt: String, $remark: String, $account_id: ID, $time: String, $createdAt: String, $id: ID!, $class: String, $tag_id: ID) {
     createbill: create_bill(money: $money updateAt: $updateAt remark: $remark account_id: $account_id time: $time createdAt: $createdAt id: $id class: $class tag_id: $tag_id) {
         money

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

@@ -0,0 +1,32 @@
+export const CREATE_CLASS=`mutation createclass($id: ID!, $account_id: ID, $name: String, $createdAt: String, $updateAt: String) {
+    createclass: create_class(id: $id account_id: $account_id name: $name createdAt: $createdAt updateAt: $updateAt) {
+        id
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        name
+        createdAt
+        updateAt
+    }
+}`
+
+export const CLASS_BY_PROPS=`query classbyprops($account_id: ID, $name: String, $createdAt: String, $updateAt: String) {
+    classbyprops: class_by_props(account_id: $account_id name: $name createdAt: $createdAt updateAt: $updateAt) {
+        id
+        account_id {
+            id
+
+            accountName
+            createdAt
+            updateAt
+        }
+        name
+        createdAt
+        updateAt
+    }
+}`
+

src/case/BillApp/src/components/App/NavBar.jsx

@@ -13,7 +13,7 @@ export default class NavBars extends Component{
                 <NavBar
                 mode="dark"
                 icon={<Icon type="left" />}
-                onLeftClick={() => this.props.changePage('bill')}
+                onLeftClick={() => this.props.changePage('home')}
                 rightContent={[
                     <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                     <Icon key="1" type="ellipsis" />,

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

@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+
+import TabBar from './TabBar'
+
+export default class Bill extends Component {
+  constructor(props){
+      super(props)
+      this.state={
+          tabs:[{title:'收入'},{title:'支出'}],
+          class:'收入'
+      }
+
+    this.tabChange=this.tabChange.bind(this)
+  }
+
+  tabChange(e){
+      console.log(e)
+      this.setState({class:e.title})
+  }
+
+
+    /*
+    account_id: ID
+    class: String
+    createdAt: String
+    id: ID!
+    money: Float
+    remark: String
+    tag_id: ID
+    time: String
+    updateAt: String
+
+    金额
+
+    类别
+    账户
+    成员
+    时间
+
+    备注
+    */
+
+  render() {
+    return (
+      <div>
+        <TabBar tabs={this.state.tabs} tabChange={this.tabChange}/>
+        <input className="money"/>
+
+        <div className="class">
+            {}
+        </div>
+        <select name="select">
+            <option value="value1">Value 1</option> 
+            <option value="value2" selected>Value 2</option>
+            <option value="value3">Value 3</option>
+        </select>
+      </div>
+    )
+  }
+}

src/case/BillApp/src/components/HomePage/Button.jsx

@@ -2,14 +2,23 @@ import React, { Component } from 'react';
 import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
 // import { genPercentAdd } from 'antd/lib/upload/utils';
 
-export default function Buttons(){
-    let buttonStyle={
-        background:"green",
-        margin:'0 10px'
+export default class Buttons extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+            buttonStyle:{
+                background:"green",
+                margin:'0 10px'
+            }
+        }
+    }
+   
+
+    render(){
+        return (
+            <WingBlank>
+                <Button type="primary" style={this.state.buttonStyle} onClick={this.props.handleChange}>+记一笔</Button><WhiteSpace />
+            </WingBlank>
+        )
     }
-    return (
-        <WingBlank>
-            <Button type="primary" style={buttonStyle}>+记一笔</Button><WhiteSpace />
-        </WingBlank>
-    )
 }

src/case/BillApp/src/components/HomePage/HomePage.jsx

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Lists from './List'
 import Buttons from './Button'
 import IconList from './IconList'
+import Bill from './Bill'
 
 import {graphqls} from '../../api/graphql_request'
 import {BILL_BY_PROPS} from '../../api/graphql/bills'
@@ -25,19 +26,13 @@ class HomePage  extends Component{
             year,
             weekBottom:'',
             weekTop:'',
-            bills:[]
+            bills:[],
+            page:'index'
         }
-    }
-
 
-    getBills(){
-        graphqls(BILL_BY_PROPS,{}).then((e)=>{
-            console.log('1----',e.billbyprops)
-            this.setState({
-                bills:e.billbyprops
-            })
-        })
+        this.handleChange=this.handleChange.bind(this)
     }
+
     componentDidMount(){
         //console.log('组件已加载')
         this.props.setNavBarText('微记账本')
@@ -55,18 +50,48 @@ class HomePage  extends Component{
         this.setState({weekTop,weekBottom})
     }
 
-    render(){
+    getBills(){
+        graphqls(BILL_BY_PROPS,{}).then((e)=>{
+            //console.log('1----',e.billbyprops)
+            this.setState({
+                bills:e.billbyprops
+            })
+        })
+    }
+
+    handleChange(){
+        console.log('---')
+        this.setState({page:'bill'})
+    }
+
+    renderPage(){
+        const page=this.state.page
         const weekTop=this.state.weekTop
         const weekBottom=this.state.weekBottom
+        if(page==='index'){
+            return(
+                <div>
+                    <div className="dateWrap"><span className="month"> {this.state.month} </span> / {this.state.year}</div>
+                    <Lists bills={this.state.bills} year={this.state.year} month={this.state.month}/>
+                    <div className="buttonWrap">
+                    <Buttons handleChange={this.handleChange}/>
+                    </div>
+                    <IconList bills={this.state.bills} week={{weekTop,weekBottom}}/>
+                </div>
+            )
+        }else{
+            return(
+                <div>
+                    <Bill />
+                </div>
+            )
+        }
+
+    }
+
+    render(){
         return(
-            <div>
-               <div className="dateWrap"><span className="month"> {this.state.month} </span> / {this.state.year}</div>
-               <Lists bills={this.state.bills} year={this.state.year} month={this.state.month}/>
-               <div className="buttonWrap">
-                <Buttons />
-               </div>
-               <IconList bills={this.state.bills} week={{weekTop,weekBottom}}/>
-            </div>
+            <div>{this.renderPage()}</div>
         )
     }
 }

src/case/BillApp/src/components/HomePage/TabBar.jsx

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import { Tabs, WhiteSpace } from 'antd-mobile';
+
+
+class TabBar extends Component {
+    render() {
+      //console.log('this.state.products',this.state.products)
+      return (
+        <div>
+          <WhiteSpace />
+            <Tabs onChange={e=>this.props.tabChange(e)} tabs={this.props.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
+            </Tabs>
+          <WhiteSpace />
+        </div>
+      );
+    }
+  }
+
+  export default TabBar

src/case/BillApp/src/untils/date.js

@@ -1,33 +1,33 @@
 export function getMonDayAndSunDay(datevalue){  
-    var dateValue = datevalue;  
-    var arr = dateValue.split("/")  
+    let dateValue = datevalue;  
+    let arr = dateValue.split("/")  
     //月份-1 因为月份从0开始 构造一个Date对象  
-    var date = new Date(arr[0],arr[1]-1,arr[2]);  
+    let date = new Date(arr[0],arr[1]-1,arr[2]);  
   
-    var dateOfWeek = date.getDay();//返回当前日期的在当前周的某一天（0～6--周日到周一）  
+    let dateOfWeek = date.getDay();//返回当前日期的在当前周的某一天（0～6--周日到周一）  
   
-    var dateOfWeekInt = parseInt(dateOfWeek,10);//转换为整型  
+    let dateOfWeekInt = parseInt(dateOfWeek,10);//转换为整型  
   
     if(dateOfWeekInt===0){//如果是周日  
         dateOfWeekInt=7;  
     }  
-    var aa = 7-dateOfWeekInt;//当前于周末相差的天数  
+    let aa = 7-dateOfWeekInt;//当前于周末相差的天数  
   
-    var temp2 = parseInt(arr[2],10);//按10进制转换，以免遇到08和09的时候转换成0  
-    var sunDay = temp2+aa;//当前日期的周日的日期  
-    var monDay = sunDay-6//当前日期的周一的日期  
+    let temp2 = parseInt(arr[2],10);//按10进制转换，以免遇到08和09的时候转换成0  
+    let sunDay = temp2+aa;//当前日期的周日的日期  
+    let monDay = sunDay-6//当前日期的周一的日期  
   
-    var startDate = new Date(arr[0],arr[1]-1,monDay);  
-    var endDate = new Date(arr[0],arr[1]-1,sunDay);  
+    let startDate = new Date(arr[0],arr[1]-1,monDay);  
+    let endDate = new Date(arr[0],arr[1]-1,sunDay);  
   
-    var sm = parseInt(startDate.getMonth())+1;//月份+1 因为月份从0开始  
-    var em = parseInt(endDate.getMonth())+1;  
+    let sm = parseInt(startDate.getMonth())+1;//月份+1 因为月份从0开始  
+    let em = parseInt(endDate.getMonth())+1;  
   
 //  alert("星期一的日期："+startDate.getYear()+"-"+sm+"-"+startDate.getDate());  
 //  alert("星期日的日期："+endDate.getYear()+"-"+em+"-"+endDate.getDate());  
-    var start = startDate.getYear()+"/"+sm+"/"+startDate.getDate();  
-    var end = endDate.getYear()+"/"+em+"/"+endDate.getDate();  
-    var result = new Array([]);  
+    let start = startDate.getYear()+"/"+sm+"/"+startDate.getDate();  
+    let end = endDate.getYear()+"/"+em+"/"+endDate.getDate();  
+    let result = new Array([]);  
     result.push(start);  
     result.push(end); 
       
@@ -53,3 +53,8 @@ export function collectByDate(arr=[],bottom,top){
 }
 
 
+
+
+
+
+