kede-client/js/component/manageCenter/order/orderNew/changeComponent/searchInput.js

import React, { Component } from "react";
import { Input, Button, Select, DatePicker } from "antd";
import moment from "moment";
import $ from "jquery/src/ajax";
import Cascaders from "../../../../common/cascaders";

// 搜索输入框
class PrimaryInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.searchInputData.defaultValue
    };
    this.reset = this.reset.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.reset) {
      this.reset();
    }
  }

  reset() {
    this.setState(
      {
        // value: this.props.searchInputData.defaultValue
        value: undefined
      },
      () => {
        this.props.searchInputData.getValue(this.state.value);
      }
    );
  }

  render() {
    const Datas = this.props.searchInputData;
    return (
      <Input
        style={{ width: Datas.width, marginRight: 10 }}
        placeholder={Datas.placeholder}
        value={this.state.value}
        onChange={e => {
          Datas.getValue(e.target.value);
          this.setState({ value: e.target.value });
        }}
      />
    );
  }
}

// 搜索选择框
class PrimarySelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.searchSelectData.defaultValue
    };
    this.reset = this.reset.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.reset) {
      this.reset();
    }
  }

  reset() {
    this.setState(
      {
        value: this.props.searchSelectData.defaultValue
      },
      () => {
        this.props.searchSelectData.getValue(this.state.value);
      }
    );
  }

  render() {
    const Datas = this.props.searchSelectData;
    const newShiroList = window.adminData.shiroList.split(",") || [];
    return (
      <Select
        style={{ width: Datas.width, marginRight: 10 }}
        placeholder={Datas.placeholder}
        disabled={!newShiroList.includes("99") && this.props.shiroList == "yxgly" && Datas.placeholder == "审核状态"}
        value={this.state.value}
        onChange={e => {
          Datas.getValue(e);
          this.setState({
            value: e
          });
        }}
      >
        {Datas.content.map((item, index) => {
          return (
            <Option value={item.id} key={index}>
              {item.name}
            </Option>
          );
        })}
      </Select>
    );
  }
}

// 时间搜索框
class PrimaryRangePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.searchRangePickerData.defaultValue
    };
    this.reset = this.reset.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.reset) {
      this.reset();
    }
  }

  reset() {
    this.setState(
      {
        value: this.props.searchRangePickerData.defaultValue
      },
      () => {
        this.props.searchRangePickerData.getValue(this.state.value);
      }
    );
  }

  render() {
    const { RangePicker } = DatePicker;
    const Datas = this.props.searchRangePickerData;
    return (
      <RangePicker
        style={{ width: Datas.width, marginRight: 10 }}
        value={[
          this.state.value[0] ? moment(this.state.value[0]) : null,
          this.state.value[1] ? moment(this.state.value[1]) : null
        ]}
        onChange={(_data, dataString) => {
          Datas.getValue(dataString);
          this.setState({
            value: dataString
          });
        }}
      />
    );
  }
}

// 搜索重置组件
class SearchInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reset: false,
      departmentArr: [],
      releaseDate: [],
      timeTypeSearch: "1",
      completeSearch: "1"
    };
    this.departmentList = this.departmentList.bind(this);
  }

  departmentList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id
            });
          });
        }
        this.setState({
          departmentArr: theArr
        });
      }.bind(this)
    });
  }

  componentWillMount() {
    // this.departmentList();
  }

  render() {
    // 输入框数据
    const SearchInputData = [
      {
        placeholder: "订单编号",
        width: 150,
        defaultValue: "",
        getValue: value => {
          this.setState({
            orderNoSearch: value,
            reset: false
          });
        }
      },
      {
        placeholder: "合同编号",
        width: 150,
        defaultValue: "",
        getValue: value => {
          this.setState({
            contractNoSearch: value,
            reset: false
          });
        }
      },
      {
        placeholder: "客户名称",
        width: 150,
        defaultValue: "",
        getValue: value => {
          this.setState({
            userNameSearch: value,
            reset: false
          });
        }
      },
      {
        placeholder: "订单负责人",
        width: 150,
        defaultValue: "",
        getValue: value => {
          this.setState({
            salesmanNameSearch: value,
            reset: false
          });
        }
      }
    ];

    // 选择框数据
    const SearchSelectData = [
      // {
      //   placeholder: "订单部门",
      //   width: 200,
      //   defaultValue: undefined,
      //   content: this.state.departmentArr,
      //   getValue: value => {
      //     this.setState({
      //       depIdSearch: value,
      //       reset: false
      //     });
      //   }
      // },
      {
        placeholder: "审核状态",
        width: 120,
        defaultValue: this.props.default || "1",
        content: [
          {
            name: "所有",
            id: "0"
          },
          {
            name: "未审核",
            id: "1"
          },
          {
            name: "已审核",
            id: "2"
          },
          {
            name: "退票中",
            id: "3"
          },
          {
            name: "待上传附件",
            id: "6"
          },
          {
            name: "已完成",
            id: "4"
          },
          {
            name: "已驳回",
            id: "5"
          },

        ],
        getValue: value => {
          this.setState({
            completeSearch: value,
            reset: false
          });
        }
      },
      {
        placeholder: "变更类型",
        width: 120,
        defaultValue: undefined,
        content: [
          {
            name: "退单退款",
            id: "0"
          },
          {
            name: "项目及金额变更",
            id: "1"
          },
          {
            name: "仅项目变更",
            id: "2"
          },
          {
            name: "仅金额变更",
            id: "3"
          },
          {
            name: "重报",
            id: "4"
          },
          {
            name: "赠送",
            id: "5"
          },
          {
            name: "退单不退款",
            id: "6",
          },
          {
            name: "仅变更合同",
            id: "7",
          },
          {
            name: "框架协议（仅已签框架合同适用）",
            id: "8",
          },
        ],
        getValue: value => {
          this.setState({
            changeSearch: value,
            reset: false
          });
        }
      },
      {
        placeholder: "时间",
        width: 80,
        defaultValue: "1",
        content: [
          {
            name: "提交时间",
            id: "0"
          },
          {
            name: "下单时间",
            id: "1"
          }
        ],
        getValue: value => {
          this.setState({
            timeTypeSearch: value,
            reset: false
          });
        }
      }
    ];

    // 时间框数据
    const SearchRangePickerData = [
      {
        width: 200,
        defaultValue: [],
        getValue: value => {
          this.setState({
            releaseDate: value,
            reset: false
          });
        }
      }
    ];
    return (
      <div style={{ display: "inline-block", marginBottom: 10 }}>
        {SearchInputData.map((item, index) => {
          return (
            <PrimaryInput
              searchInputData={item}
              key={index}
              reset={this.state.reset}
            />
          );
        })}

        <Cascaders
          ref={node => this.Cascaders = node}
          placeholder="订单部门"
          id="id"
          name="name"
          children="list"
          height={28}
          onSel={(e) => {
            this.setState({
              deps: JSON.stringify(e)
            })
          }}
        />

        {SearchSelectData.map((item, index) => {
          if (this.props.isYxy) {
            if (item.placeholder == "审核状态") {
              item.content.splice(item.content.length - 1, 1)
            }
          }
          return (
            <PrimarySelect
              shiroList={this.props.shiroList}
              searchSelectData={item}
              key={index}
              reset={this.state.reset}
            />
          );
        })}
        {SearchRangePickerData.map((item, index) => {
          return (
            <PrimaryRangePicker
              searchRangePickerData={item}
              key={index}
              reset={this.state.reset}
            />
          );
        })}
        <Button
          type="primary"
          style={{ marginRight: 10, marginTop: 10 }}
          onClick={() => {
            this.props.search(this.state)
          }}
        >
          搜索
        </Button>
        <Button
          onClick={_e => {
            this.setState({
              reset: true,
              deps: undefined,
            }, () => {
              this.Cascaders.empty();
              this.props.search(this.state)
            })
          }}
          style={{ marginTop: 10 }}
        >
          重置
        </Button>
      </div>
    );
  }
}

export { SearchInput, PrimaryInput, PrimarySelect, PrimaryRangePicker };