Ant Design 學習記錄

遇到的問題： 

• 　　點擊列表中的一個字段 ， 顯示出一條指定id（其他篩選條件的）數據 

解決這個問題之前，要先了解 Antd的 Table中的  Column  列描述數據對象，是 columns 中的一項，Column 使用相同的 API。  官網地址

從中我們可以知道 :  render  生成復雜數據的渲染函數，參數分別為（當前行的值，當前行數據，行索引），@return 里面可以設置表格行/列合並 類型是函數 (text, record, index) => { }  

 

 

 

 

 

 

 點擊后彈出以下列表

解決：

兩種寫法 ：

1. 直接給子組件傳 props值， 然后子組件渲染this.props.item
2. 給子組件傳id值，然后子組件通過URL傳給后台，后台篩選出滿足條件的數據。

import React, {Component} from 'react';
import { PageHeader, Table, Input, Card } from "antd";
import HttpUtils from "../../utils/HttpUtils";
import moment from "moment";
import FilterForm from "../../components/Filter";
import Team from './StatisticalTeam';
import Share from './StatisticalShare';
import User from './StatisticalUser';

const {TextArea} = Input;
const select = [
    {
        name: '時間',
        type: 'date',
        dataIndex: ['start_time', 'end_time'],
        // wrap: 24
    }
]

export default class Hello extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: {
                pers: 10,
                page: 1
            },
            loading:false,
            values: {},
            dataSource: [],
            value: '',
            count: ''
        };
        this.columns = [
            {   
                width:400,
                title: '記錄創造時間',
                dataIndex: 'first_day',
                key: 'first_day',
                render: (props) => {
                    // return this.timestampToTime(props);
                    const  time =  this.timestampToTime(props);
                   return moment(time).format('YYYY-MM-DD hh:mm:ss')
                }
            },
            {
                title: '分享',
                dataIndex: 'share_award_real_amount',
                key: 'share_award_real_amount',
                render: (text, record) => {
                    return (
                        <div
                        onClick={() => {
                            this.setState({
                                visible_pwd: true,
                                user_id: record.id
                            })
                        }}
                        
                        style={{marginRight: 10, cursor: "pointer", color: '#40a9ff'}}
                        >
                              <Share item={record} loadUserList={()=> {
                                this._loadUserList()
                            }}/>    
                    </div>
                    )
                }
            }, {
                title: '團隊',
                // dataIndex: 'share_award_real_amount',
                // key: 'share_award_real_amount',
                render: (text, record) => {
                    return (
                        <div
                        onClick={() => {
                            this.setState({
                                visible_pwd: true,
                                user_id: record.id
                            })
                        }}
                        
                        style={{marginRight: 10, cursor: "pointer", color: '#40a9ff'}}
                        >
                            <Team item={record} loadUserList={()=> {
                                this._loadUserList()
                            }}/>           
                    </div>
                    )
                }
            }, {
                width: 140,
                title: '用戶',
                render: (text, record) => {
                    return (
                        <div
                        onClick={() => {
                            this.setState({
                                visible_pwd: true,
                                user_id: record.id
                            })
                        }}
                        
                        style={{marginRight: 10, cursor: "pointer", color: '#40a9ff'}}
                        >
                              <User   happy={record}  item={record} loadUserList={()=> {
                                this._loadUsreList()
                            }}/>           
                    </div>
                    )
                }

            },
        ]
    };

    componentDidMount() {
        this.getUserList()
    }
    //處理六位小數
    toDecimal=(x)=>{ 
        var f = parseFloat(x); 
        if (isNaN(f)) { 
          return; 
        } 
        f = Math.round(x*1000000)/1000000; 
        return f; 
    }
    //處理時間戳
    timestampToTime = (timestamp) => {
        var date = new Date(timestamp * 1000);//時間戳為10位需*1000，時間戳為13位的話不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D+h+m+s;
    }


    getUserList() {
        this.setState({loading:true})
        HttpUtils.postForm('/api/auex/statistics/award/list', {
            ...this.state.form,
            order: "id desc",
            ...this.state.values
        }).then(res => {
        this.setState({loading:false})
            if (res.status == 10000) {
                this.setState({
                    dataSource: res.data,
                    count: res.count
                })
            }
            console.log(res);
        }).catch(err => {
        this.setState({loading:false})
            window.$message.error('通訊失敗')
        })
    }

  

    onSubmit = (value) => {
        console.log(value)
        this.setState({
            form: {
                page: 1,
                pers: this.state.form.pers,

            },
            values: value
        }, () => {
            this.getUserList()
        })
    }
    onReset = () => {
        this.setState({
            values: {}
        }, () => {
            this.getUserList();
        })
    }

    getCurrent = (page) => {
        console.log(page)
        this.setState({
            form: {
                page: page,
                pers: this.state.form.pers
            }
        }, () => this.getUserList())
    }
    changePers = (current, size) => {
        this.setState({
            form: {
                page: current,
                pers: size
            }
        }, () => this.getUserList())
    }

    render() {
        return (
            <div>
                <PageHeader title="用戶列表" subTitle="查看用戶信息" style={{marginBottom: 20}}/>
                <FilterForm select={select} onSubmit={this.onSubmit} onReset={this.onReset} />
                <Card>
                    <Table
                        loading={this.state.loading}
                        dataSource={this.state.dataSource}
                       columns={this.columns }
                       title={() => `記錄條數：${this.state.count}條`}
                       pagination={{
                           showTotal: (total) => {
                               return <div style={{display: 'flex'}}>
                                   <div style={{paddingLeft: 18}}>總共{total}條</div>
                               </div>
                           },
                           showSizeChanger: true,
                           onShowSizeChange: this.changePers,
                           pageSizeOptions: ['10', '30', '50', '100'],
                           showQuickJumper: true,
                           current: this.state.form.page,
                           total: this.state.count,
                           onChange: this.getCurrent
                       }}
                />
                </Card>
            </div>
        )
    };
}

補充：

     0.給子組件傳值  ：  <Share happy={record} loadUserList={()=> {this._loadUserList()}}/>   子組件接收值 

     1.設置state中值的時候 不要直接賦值 ， 要 使用規范寫法

this.setState({ 2                             visible_father: true
                        })

     2.子組件接到數后不能展示列表？ 

 onClick={() => { 2                         this.setState({ 3                             visible_father: true //修改列表展示為true
 }) 5                     }}

 　3.dataSource中的數據this.props.item 是對象  所以要再外面加一個[] 使其變為數組  

    4.const {number, visible_father, data, loading,} = this.state;  解構賦值后 ， 就不需要在this.state.xxx了

    5.<Modal /> 有個visible屬性，表示是否顯示對話框。

占位

 

需要掌握的：

1.Form表單

• Form.create   經過 Form.create 包裝的組件將會自帶 this.props.form 屬性，this.props.form  常用API ：  getFieldDecorator 用於和表單進行雙向綁定，詳見下方描述

class CustomizedForm extends React.Component {} CustomizedForm = Form.create({})(CustomizedForm);

this.props.form.getFieldDecorator(要傳的值, options)

經過 getFieldDecorator 包裝的控件，表單控件會自動添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數據同步將被 Form 接管，這會導致以下結果：

1. 你不再需要也不應該用 onChange 來做同步，但還是可以繼續監聽 onChange 等事件。

2. 你不能用控件的 value defaultValue 等屬性來設置表單域的值，默認值可以用 getFieldDecorator 里的 initialValue。

3. 你不應該用 setState，可以使用 this.props.form.setFieldsValue 來動態改變表單值(可以設置默認值)。

• validateFields  校驗並 獲取 一組輸入域的值與 Error，若 fieldNames 參數為空，則校驗全部組件   /  resetFields 重置一組輸入控件的值（為  initialValue）與狀態，如不傳入參數，則重置所有組件

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (err) {
                return;
            }
            values.rate = values.rate / 100;
            window.$http.postForm('/api/', {...this.state.item,...values}).then(res => {
                if (res.status === 10000) {
                    window.$message.success('提交成功！');
                    this.props.form.resetFields();
                    this.setState({visible: false})
                    this.getBonusList()
                } else {
                    window.$message.error(res.message);
                }
            }).catch((err) => {
                window.$message.error('通訊失敗');
            })
        });
    }

•  Form.Item 表單域

2. Affix 固釘  https://ant.design/components/affix-cn/#header

注意：Affix 內的元素不要使用絕對定位，如需要絕對定位的效果，可以直接設置 Affix 為絕對定位：

<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>

3.Card 卡片 https://ant.design/components/card-cn/#header

 

 

 

4.父子傳值   ， 傳方法

首先父組件調用子組件，寫一個item = { recodr（columns表單所有數據） }   寫一個 refreshList方法 

 <UpdateCategory item={record} refreshList={() => {

     this.custom_table.getList()

 }}/>

然后再子組件調用 (使用this.props.XXX)調用父組件的XXX

調用屬性 （這里又把父組件的值傳給了子組件CustomForm）
<CustomForm
  content={this.state.content} onSubmit={this.onSubmit} url={'/api/backend/distribution/time/category/save'}
  value={{ id: this.props.item.id }}
  values={this.props.item}
  space={86400}
/>

調用方法

  onSubmit = () => {
     this.setState({
        visible: false
      })
     this.props.refreshList()
  }

 5.彈窗 Modal

6.文本域： const { textArea } = Input  去掉右下角調整大小按鍵 ： CSS resize：none；

7.上傳圖片  Upload

8.修改狀態

  {
      // width: 150,
      title: '操作',
      dataIndex: 'status', //verified
      key: 'status',
      render: (text, item) => (
           <>
             {item.status != 1 ? null :
                 <Switch
                     checked={text === 1}
                     onChange={() => {
                         this.changeStatus(text, item.id);
                     }}
                 />}
         </>
       )
  }

 changeStatus(text, id) {

        const toast = window.$message.loading('修改狀態中');

        HttpUtils.postForm(' /api/admin/user/asset/releasedRuleUpdate', {

            id: id,

            status:  2

        }).then(res => {

            toast();

            if (res.status === 10000) {

                window.$message.success('修改狀態成功');

                this.getData();

            } else if(res.status!==18888){

                window.$message.error(res.message);

            }

        }).catch(err => {

            toast();

            window.$message.error('通訊失敗');

        })

    }

 9.刪除一行記錄 

{ title: '操作', render: (text, item) => { return ( <div>
                            <Button size={'small'} type={'primary'} onClick={() => { this.props.history.push('/content/carousel/edit/' + item.id) }}> 編輯 </Button>
                            <Popconfirm title="確定要刪除嗎？" okText="確定" cancelText="取消" onConfirm={() => { window.$http.postForm('/api/web/carousel/delete', {id: item.id}).then(res => { if (res.status === 10000) { window.$message.success('刪除成功'); this._loadNewsList() } else if (res.status !== 18888) { window.$message.error(res.message); } }) }} >
                                <Button size={'small'} type={'danger'} style={{marginLeft: 20}} onClick={() => { }}>刪除</Button>
                            </Popconfirm>
                        </div> ); } }

 10 徽標微　　

 

import {Badge} from '@ant-design/react-native';

<Badge dot>
            <Touchable style={{position: 'relative'}}>
              <Image source={message} />
            </Touchable>
</Badge>

import {Badge} from '@ant-design/react-native';

<Badge dot>
            <Touchable style={{position: 'relative'}}>
              <Image source={message} />
            </Touchable>
</Badge>

 11. 從接口獲取交易對 / 列表數組

 getSymobls() { HttpUtils.postForm('/api/teacher/trade/exchange/symbols', {}).then(res => { if (res.status === 10000) { let arr1 = new Set(res.data.map((item) => item.symbol)) let symbol = Array.from(arr1).map(item => ({id: item, name: item})); select[2].option = symbol; //添加列表
                this.setState({ select: this.state.select, }) } }).catch((err) => { console.log(err); }) }

 12.如何看懂ant的文檔

 

 

這里提供了2中格式化方式

第一種 告訴你了 value是Date值（日期），date是字符串 ，所以  寫法如下

format={(value) => moment(value).format('YYYY.MM')}

 

 13. 圖片默認列表顯示圖片問題   （解決了，是valueProName的問題  應該要用item.dateIndex）

   

 

 一定要在Upload標簽的外面添加一個父標簽， 不然filelist里的內容無法顯示 

14. 解決單個圖片顯示問題/多個圖片顯示問題/文件顯示問題，保存原有圖片/文件 消失問題  ， 這里上傳圖片后 返回了一個圖片地址/多個圖片地址字符串，

上傳組件 

                                <Form.Item
                                    labelCol={{ span: item.labelCol }}
                                    wrapperCol={{ span: item.wrapperCol }}
                                    shouldUpdate
                                    key={item.dataIndex}
                                    label={item.name}
                                    name={item.dataIndex}
                                    valuePropName={item.dataIndex}
                                    getValueFromEvent={normFile}
                                    rules={[
                                        {
                                            required: item.required,
                                            message: item.message,
                                        },
                                    ]}
                                    dependencies={[item.dataIndex]}
                                >
                                     <Upload
                                         fileList={fileList}
                                         className='uploadImg'
                                         listType='picture-card'
                                         headers={{
                                             authorization: sessionStorage.getItem(
                                                 'token',
                                             ),
                                         }}
                                         accept='image/jpeg,image/jpg,image/png'
                                         action='/api/admin/vote/file/upload'
                                         onChange={(value) => {
                                             setVariety(true)  // 有變化和沒變化 傳的值是不同的
                                             console.log('讓我康康',value.fileList);
                                             if (item.images) {
                                                 let arr = [];
                                                 value.fileList.map((item) => {
                                                     let arr_item =
                                                         Object.keys(item)
                                                             .length > 0 && item.url?item.url :  //因為默認給的是一個對象，url在對象里，但是圖片上傳以后，返回的url在對象的response里面 ，所以這里要判斷
                                                         item.response &&  
                                                         item.response.url;  //默認上傳的圖片，會把url放在response里面
                                                     arr.push(arr_item);   
                                                     console.log(
                                                         'item',
                                                         Object.keys(item)
                                                             .length > 0 &&
                                                         item.response &&
                                                         item.response.url,
                                                     );
                                                 });
                                                 console.log('新arr',arr);
                                                 setFileList(value.fileList);
                                                 setImages(JSON.stringify(arr)); 
                                             }
                                             if (item.cover) {
                                                 let cover =
                                                     value.fileList.length > 0 &&  //封面圖因為只有一張圖，不會出現數據結構不一樣的問題，所以不用處理
                                                     value.fileList[0]
                                                         .response &&
                                                     value.fileList[0].response   
                                                         .url;
                                                 setFileList(value.fileList);  
                                                 setCover(cover);
                                             }
                                             setChange(Math.random() + 1);
                                         }}
                                         onPreview={handlePreview}
                                         disabled={item.disabled}
                                     >
                                         {fileList.length >= (item.limit || 1)
                                             ? null
                                             : uploadButton}
                                     </Upload>
                                </Form.Item>

 

打開編輯Modal進行的初始化處理

    useEffect(() => {
        if (props.values) {
            console.log('所有的數據',props.values);

            form.setFieldsValue({ ...props.values });if (props.date) {
                form.setFieldsValue({
                    vote_start: moment(props.values.vote_start * 1000), 
                });
                form.setFieldsValue({
                    vote_end: moment(props.values.vote_end * 1000),
                });
                if (props.values.vote_end === 0) {
                    form.setFieldsValue({ vote_end: null });
                }
                if (props.values.vote_start === 0) {
                    form.setFieldsValue({ vote_start: null });
                }
            }

            if(props.values.name === '封面圖'){
                setFileList([
                    {
                        uid: '-1', //只有一張圖，不用管uid
                        name: 'xxx.png',
                        status: 'done',
                        type: 'image/png',
                        url: props.values['value'],
                    },
                ]);
            }
            if(props.values.name === '輪播圖' && props.values.value.length > 0 ){ //只長度大於0才會解析，防止報錯
                console.log('abc',);

                let arr = []
                let images =  JSON.parse(props.values.value); //這里是JSON字符串，所以要解析
                images.map((item,index)=>{
                    arr.push({
                        uid:index, //uid必須不同，不然會點刪除按鈕，會把所有的圖片都刪除
                        name: 'xxx.png',
                        status: 'done',
                        type: 'image/png',
                        url: item
                    })
                })

                setFileList(arr);
            }
        }
    }, []);

 

 提交處理

    const onSubmit = (values) => {
        if (values.name === '封面圖' ) { //沒有更好的判斷方法 if(variety){ //如果發生了變化，傳自己修改的JSON字符串
                values.value = cover;
            }else { //沒有發生變化，就返回原來的
                values.value = props.values.value;
            }
        }
        if (values.name === '輪播圖' && images.length > 0) {
            if(variety){
                values.value = images;
            }else {
                values.value = props.values.value;
            }
        }
        values = onCheckValues(values);
        setLoading(true);
        Http.postForm(props.url, {
            ...props.value,
            ...values,
        })
            .then((res) => {
                setLoading(false);
                if (res.status === 10000) {
                    message.success('提交成功');
                    props.onSubmit();
                } else {
                    message.error(res.message);
                }
            })
            .catch((err) => {
                setLoading(false);
                message.error('通訊失敗');
            });
    };

 

 

 

上傳文件的組件代碼

                        case 'upload':
                            return (
                                <Form.Item
                                    shouldUpdate
                                    key={item.dataIndex}
                                    label={item.name}
                                    labelCol={{ span: item.labelCol }}
                                    wrapperCol={{ span: item.wrapperCol }}
                                    name={item.dataIndex}
                                    valuePropName={item.dataIndex}
                                    getValueFromEvent={normFile}
                                    rules={[
                                        {
                                            required: item.required,
                                            message: item.message,
                                        },
                                    ]}
                                    dependencies={[item.dataIndex]}
                                >
                             <Upload
                                 fileList={fileList2}
                                 action='/api/admin/vote/file/upload'
                                 headers={{
                                     authorization: sessionStorage.getItem(
                                         'token',
                                     ),
                                 }}
                                 onChange={(value) => {
                                     setVariety2(true);
                                     if (item.file) {
                                         let file =
                                             value.fileList.length > 0 &&
                                             value.fileList[0]
                                                 .response &&
                                             value.fileList[0].response
                                                 .url;
                                         setFile(file);
                                     }
                                     setFileList2(value.fileList);
                                     setChange(Math.random() + 1);
                                 }}
                                 disabled={item.disabled}
                             >
                                 {fileList2.length >= 1
                                     ? null
                                     :  <Button>
                                         <UploadOutlined /> 點擊上傳
                                     </Button>}
                             </Upload>
                                </Form.Item>
                            );

 

壓縮文件顯示初始化

           props.values.download_address.length > 0 &&  setFileList2([{
                uid: '-1',
                name: `${props.values.company_name}.zip`,
                status: 'done',
                type: 'application/zip',  
                url:  props.values['download_address']
            }])

 

效果圖  ：