react.js+easyui 做一个简单的商品表

效果图：

 

 

import React from 'react';

import { Form, FormField, Layout,DataList,LayoutPanel,Panel, Label, CheckBox, TextBox,Tabs,TabPanel, DateBox, NumberBox, RadioButton, ComboBox, LinkButton } from 'rc-easyui';

import '../css/style.css';

import * as demo from 'rc-easyui/dist/locale/easyui-lang-zh_CN.js';

import { reqdoSQL } from '../../api/functions.js';

import 'rc-easyui/dist/themes/gray/radiobutton.css';

import 'rc-easyui/dist/themes/gray/checkbox.css';

export default class Page401 extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

     product:{},

     data:[],

     topic:["饮料","零食","速食产品","母婴用品","鞋包饰品","厨房日用品"],

     topicchecked:[],

     onlist:["上市","未上市"],

     onlists:"",

     datetime:new Date(),

     listtime:[]

    }

  }

  getImage(row) {

    return "/myServer/mybase/products/"+row.productid+".jpg";

  }

  async componentDidMount() {

    let p={};

    p.selectsql='select productid,productname,unitprice from products';

    let rs= await reqdoSQL(p);

    this.setState({data:rs.rows});

   

  }

  renderItem({ row }) {

    return (

      <div key={row.productid}>

        <img src={this.getImage(row)} style={{width:"100px",height:"100px"}} />

        <div>

          <p>{row.productid} - {row.productname}</p>

 

          <p>￥ {row.unitprice}</p>

        </div>

      </div>

    )

  }

  handleChange(name, value) {  //同一个函数，用name来区分

 

    let product = Object.assign({}, this.state.product);

    product[name] = value;

    this.setState({product: product,open:false });

    console.log(name,value);

  }

handleSelectionChange(row){

    this.setState({product:row})

    console.log(111111,row);

  }

  handleChangelist(value, checked) {

    if (checked) {

      this.setState({ onlists: value },() => {

        setTimeout(()=>{

          if(this.state.onlists=="上市"){

            var listtime=[];

            listtime.push(<div style={{ margin: '10px'}}>

          <Label htmlFor="onlisttime" align="left">上市时间:</Label>

          <DateBox inputId="onlisttime" id="onlisttime" value={this.state.datetime} onChange={(value) => this.datetimeChange(value)} format="yyyy-MM-dd"

          style={{width:"300px",fontFamily:"楷体",height:"30px"}}></DateBox>

          </div>);

            this.setState({listtime:listtime})

     

          }else{

     

            this.setState({listtime:[]});

          }

        },100);

     

    });

   

  }

}

  datetimeChange(value){

    this.setState({datetime: value});

  }

  render() {

    return (

      <div>

        <Layout style={{width:"100%",height:"100%",position:"absolute"}}>

          <LayoutPanel region="west" style={{width:200}}>

            <div>

            <DataList

          style={{ width: "100%", height: "100%" ,textAlign:"center"}}

          renderItem={this.renderItem.bind(this)}

          data={this.state.data}

          selectionMode="single"

          onSelectionChange={this.handleSelectionChange.bind(this)}

          />

                  </div>

          </LayoutPanel>

          <LayoutPanel region="center" >

       

         

        <Panel title="商品信息" collapsible >

          <div style={{position:'relative', height:120}} >

          <Label htmlFor="productid" className="labelStyle" style={{position:'absolute', top:'20px', left:'16px'}}>商品编号:</Label>

          <TextBox inputId="productid" id="productid" value={this.state.product.productid}

          onChange={(value) => this.handleChange("pid", value)}

          style={{position:'absolute', top:'20px', left:'85px', width:'200px'}}></TextBox>

          <Label htmlFor="productname" className="labelStyle" style={{position:'absolute', top:70, left:'16px'}}>商品名称:</Label>

          <TextBox inputId="productname" id="productname" value={this.state.product.productname} onChange={(value) => this.handleChange("productname", value)}

          style={{position:'absolute', top:'70px', left:'85px', width:200}}></TextBox>

         

         </div>

        </Panel>

        <div>

        <Tabs tabPosition='top'  >

       

        <TabPanel ref={ref => this.myTab1 = ref} key="myTab1" title="客户列表">

        <div style={{margin:"10px"}}>

            <Label htmlFor="customerid" align="left">客户编码:</Label>

            <TextBox inputId="customerid" iconCls="icon-man" style={{ width: '30%' }}></TextBox>

        </div>

         

        <div style={{margin:"10px"}}>

            <Label htmlFor="companyname" align="left">公司名称:</Label>

            <TextBox inputId="companyname" iconCls="icon-man" style={{ width: '30%' }}></TextBox>

        </div>

        <div style={{margin:"10px"}}>

        <Label htmlFor="companyname" align="left">售货类型:</Label>

        {

          this.state.topic.map(topic => {

            return (

              <div key={topic} style={{display:"inline-block"}}>

                <CheckBox inputId={topic} multiple value={topic} values={this.state.topicchecked} onChange={this.handleChange.bind(this)}></CheckBox>

                <Label htmlFor={topic} style={{margin:'0px 0px 0px 5px'}}>{topic}</Label>

              </div>

            )

          })

         

        }

        </div>

        <div style={{margin:"10px"}}>

        <Label htmlFor="onlist" align="left">公司类型:</Label>

        {

  this.state.onlist.map(onlist => {

    return (

      <div key={onlist} style={{display:"inline-block"}}>

        <RadioButton

          inputId={onlist}

          value={onlist}

          groupValue={this.state.onlists}

          onChange={(checked) => this.handleChangelist(onlist, checked)}

        />

        <Label htmlFor={onlist} style={{ margin: '0 5px' }}>{onlist}</Label>

      </div>

    )

  })

}

</div>

{this.state.listtime}

        <div style={{ margin: '10px' }}>

            <Label htmlFor="note" align="left">公司简历:</Label>

            <TextBox inputId="note" multiline value={this.state.description} style={{ width: '70%', height: 100 }}></TextBox>

        </div>

        </TabPanel>

        </Tabs>

      </div>

        </LayoutPanel>

        </Layout>

      </div>

    );

  }

}

 

 

 

 

做了个选中才出现的信息框，开始做有异步，点击“上市”不出现“上市时间”，点击“未上市”才出现，后来还是用setTimeout()做的，如果有更好的方法可以指点指点的。

 

 handleChangelist(value, checked) {

    if (checked) {

      this.setState({ onlists: value },() => {

        setTimeout(()=>{

          if(this.state.onlists=="上市"){

            var listtime=[];

            listtime.push(<div style={{ margin: '10px'}}>

          <Label htmlFor="onlisttime" align="left">上市时间:</Label>

          <DateBox inputId="onlisttime" id="onlisttime" value={this.state.datetime} onChange={(value) => this.datetimeChange(value)} format="yyyy-MM-dd"

          style={{width:"300px",fontFamily:"楷体",height:"30px"}}></DateBox>

          </div>);

            this.setState({listtime:listtime})

     

          }else{

     

            this.setState({listtime:[]});

          }

        },100);

     

    });

   

  }

}