kede-client/js/component/manageCenter/set/projectConfigure/softwareConfigure.js

import React,{Component} from 'react';
import {Button, Input, message, Select, Spin, Table, Tag, Popconfirm, Tabs} from "antd";
import AddSoftWritingPrice from './addSoftWritingPrice'
import $ from "jquery/src/ajax";
import '../content.less';
import {ChooseList} from "../../order/orderNew/chooseList";

const TabPane = Tabs.TabPane;

class SoftwareConfigure extends Component{
    constructor(props) {
        super(props);
        this.state={
            companyName:'',        //公司名称
            urgent: undefined,            //加急
            material: undefined,          //材料
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            dataSource: [],
            columns: [
                {
                    title: '供应商名称',
                    dataIndex: 'companyName',
                    key: 'companyName',
                },
                {
                    title: '材料',
                    dataIndex: 'material',
                    key: 'material',
                    render: (text) => {
                        return text === 0 ? '无材料' : '有材料'
                    }
                },
                {
                    title: '加急天数',
                    dataIndex: 'urgent',
                    key: 'urgent',
                    render: (text) => {
                        switch (text) {
                            case 0:
                                return '无加急';
                            case 1:
                                return '加急3-5个工作日';
                            case 2:
                                return '加急6-10个工作日';
                            case 3:
                                return '加急11-15个工作日';
                            case 4:
                                return '加急16-20个工作日';
                            case 5:
                                return '加急21-25个工作日';
                            case 6:
                                return '加急26-30个工作日';
                        }
                    }
                },
                {
                    title: '价格万元/个',
                    dataIndex: 'unitPrice',
                    key: 'unitPrice',
                },
                {
                    title: '备注',
                    dataIndex: 'remarks',
                    key: 'remarks',
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    render: (text) => {
                        return text === 0 ? <Tag color="#87d068">正常</Tag> :
                            text === 1 ? <Tag>停用</Tag> :  <Tag color="#f50">删除</Tag>
                    }
                },
                {
                    title: '操作',
                    dataIndex: 'id',
                    key: 'id',
                    render: (text) => {
                        return <div>
                            <Popconfirm
                                title="是否删除?"
                                onConfirm={() => {
                                    this.deleteSoftWritingPrice(text);
                                }}
                                okText="删除"
                                cancelText="不删除"
                            >
                                <Button type="danger" onClick={(e) => {
                                    e.stopPropagation()
                                }}>
                                    删除
                                </Button>
                            </Popconfirm>
                        </div>
                    }
                },
            ],
            addSoftVisible: false,
            infor: {},
            pageNo: 1,
        }
        this.loadData = this.loadData.bind(this);
        this.tableRowClick = this.tableRowClick.bind(this);
        this.reset = this.reset.bind(this);
        this.changeList = this.changeList.bind(this);
    }

    componentDidMount() {
        this.loadData();
    }

    //搜索功能和初始列表加载
    loadData(pageNo) {
        this.setState({
            loading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/company/listSoftWritingPrice',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                companyName:this.state.companyName || undefined,       //公司名称
                urgent: this.state.urgent,    //加急
                material: this.state.material,  //材料
            },
            success: function (data) {
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                    if (data.data && data.data.list && !data.data.list.length) {
                        this.state.pagination.current = 0;
                        this.state.pagination.total = 0;
                    }
                    data.data.list.map((v,i)=>{v.key = i})
                    this.setState({
                        dataSource: data.data.list,
                        pagination: this.state.pagination,
                        pageNo: data.data.pageNo
                    });
                }

            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    tableRowClick(infor) {
        this.setState({
            addSoftVisible : true,
            infor: infor
        })
    }

    reset(){
        this.setState({
            companyName:'',       //公司名称
            urgent: undefined,    //加急
            material: undefined,  //材料
        },()=>{
            this.loadData();
        })
    }

    //删除
    deleteSoftWritingPrice(id) {
        let _this = this;
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url:globalConfig.context + '/api/admin/company/deleteSoftWritingPrice',
            data:{
                id: id
            },
        }).done(function (data) {
            _this.setState({
                loading: false
            });
            if (!data.error.length) {
                message.success('删除成功！');
                _this.loadData();
            } else {
                message.warning(data.error[0].message);
            }
        }.bind(this));
    }
    changeList(arr) {
        const newArr = [];
        this.state.columns.forEach(item => {
            arr.forEach(val => {
                if (val === item.title) {
                    newArr.push(item);
                }
            });
        });
        this.setState({
            changeList: newArr
        });
    }

    render() {
        return(
            <div className="user-content" >
                <div className="content-title">
                    <Tabs defaultActiveKey="1" className="test">
                        <TabPane tab="搜索" key="1">
                            <div className="user-search" style={{display:'flex',flexFlow:'row'}}>
                                <Input placeholder="公司名称" style={{width:'150px',marginRight:'10px',marginBottom:'10px',marginLeft:10}}
                                       value={this.state.companyName}
                                       onChange={(e) => { this.setState({ companyName: e.target.value }); }} />
                                <div style={{display:'flex',flexFlow:'row nowrap'}}>
                                    <div style={{marginLeft:10,marginRight:10}}>材料:</div>
                                    <Select
                                        placeholder="材料"
                                        style={{ width:'200px',marginRight:'10px' }}
                                        value={this.state.material}
                                        onChange={(e) => {this.setState({ material: e }) }}>
                                        <Select.Option value={0}>无</Select.Option>
                                        <Select.Option value={1}>有</Select.Option>
                                    </Select>
                                </div>
                                <div style={{display:'flex',flexFlow:'row nowrap'}}>
                                    <div style={{marginLeft:10,marginRight:10}}>加急天数:</div>
                                    <Select placeholder="加急天数"
                                            style={{ width:'200px',marginRight:'10px' }}
                                            value={this.state.urgent}
                                            onChange={(e) => { this.setState({ urgent: e }) }}>
                                        <Select.Option value={0}>无加急</Select.Option>
                                        <Select.Option value={1}>加急3-5个工作日</Select.Option>
                                        <Select.Option value={2}>加急6-10个工作日</Select.Option>
                                        <Select.Option value={3}>加急11-15个工作日</Select.Option>
                                        <Select.Option value={4}>加急16-20个工作日</Select.Option>
                                        <Select.Option value={5}>加急21-25个工作日</Select.Option>
                                        <Select.Option value={6}>加急26-30个工作日</Select.Option>
                                    </Select>
                                </div>
                                <Button type="primary" onClick={()=>{
                                    this.loadData();
                                }} style={{marginRight:'10px'}}>搜索</Button>
                                <Button onClick={this.reset} style={{marginRight:'10px'}}>重置</Button>
                                <span style={{marginLeft: 'auto'}}>
                            <Button type="primary" size={'middle'} onClick={()=>{
                                this.setState({
                                    addSoftVisible : true
                                })
                            }}>
                                增加
                            </Button>
                        </span>
                            </div>
                        </TabPane>
                        <TabPane tab="更改表格显示数据" key="2">
                            <div style={{ marginLeft: 10 }}>
                                <ChooseList
                                    columns={this.state.columns}
                                    changeFn={this.changeList}
                                    changeList={this.state.changeList}
                                    top={55}
                                    margin={11}
                                />
                            </div>
                        </TabPane>
                    </Tabs>
                    <div className="patent-table">
                        <Spin spinning={this.state.loading}>
                            <Table size="middle" columns={
                                this.state.changeList
                                    ? this.state.changeList
                                    : this.state.columns
                                    }
                                   style={{
                                       cursor: 'pointer',
                                   }}
                                   dataSource={this.state.dataSource}
                                   pagination={this.state.pagination}
                                   onRowClick={this.tableRowClick}/>
                        </Spin>
                    </div>
                </div>
                {this.state.addSoftVisible ? <AddSoftWritingPrice
                    infor={this.state.infor}
                    visible={this.state.addSoftVisible}
                    onCancel={()=>{
                        this.setState({
                            addSoftVisible : false,
                            infor: {},
                        })
                    }}
                    successFn={()=>{
                        this.loadData(this.state.pageNo);
                        this.setState({
                            addSoftVisible : false,
                            infor: {}
                        })
                    }}/> : <div/>}
            </div>
        )
    }
}

export default SoftwareConfigure