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 { getMaterialStatus } from "@/tools";
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, record) => {
            return getMaterialStatus(text)
          },
        },
        {
          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个工作日';
              case 7:
                return '加急45个工作日';
              case 8:
                return '加急60个工作日';
            }
          }
        },
        {
          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.Option value={7}>加急45个工作日</Select.Option>
                    <Select.Option value={8}>加急60个工作日</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