kede-client/js/component/manageCenter/customer/NEW/query/queryCutomer.jsx

import React from 'react';
import { Button, Modal, Input, Select, Spin, Table, Tabs, message, Form, Tooltip } from 'antd';
import $ from 'jquery/src/ajax';
import { ShowModal } from '../../../../tools.js'
import { provinceList } from '@/NewDicProvinceList';
import ShowModalDiv from "@/showModal.jsx";
import ZhuanjiaoDetail from "@/zhuanjiaoDetail.jsx";
import Detaile from './detail.jsx';
import { ChooseList } from "../../../order/orderNew/chooseList";
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";

const confirm = Modal.confirm;

const { TabPane } = Tabs
const QueryCustomer = React.createClass({
  //
  loadData(pageNo, apiUrl) {
    if (!this.state.nameSearch) {
      return
    }
    // 新需求 除湖南和内蒙古外 不让其他省操作
    if (adminData.province != "21" && adminData.province != "11") {
      return
    }
    this.setState({
      visitModul: false,
      loading: true,
      modalVisible: false,
    });
    let api = apiUrl ? apiUrl : this.props.ApiUrl;
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + api,
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        name: this.state.nameSearch,
        departmentId: this.state.departmenttSearch,
        aid: this.state.theTypes,
      },
      success: function (data) {
        ShowModal(this);
        let theArr = [];
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.list.length; i++) {
            let thisdata = data.data.list[i];
            let diqu =
              (thisdata.province == null ? "" : thisdata.province) +
              (thisdata.city == null ? "" : "-" + thisdata.city) +
              (thisdata.area == null ? "" : "-" + thisdata.area);
            thisdata.key = i;
            thisdata.id = thisdata.uid;
            thisdata.signBills = thisdata.signBills;
            thisdata.createTime = thisdata.createTime && thisdata.createTime.split(" ")[0];
            thisdata.locationProvince = diqu;
            theArr.push(thisdata);
          }
          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;
        }
        this.setState({
          dataSource: theArr,
          pagination: this.state.pagination,
          selectedRowKeys: [],
          ispage: data.data.pageNo,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  //部门
  departmentList() {
    this.setState({
      loading: true,
    });
    $.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);
          }
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id,
            });
          });
        }
        this.setState({
          departmentArr: theArr,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  //
  getInitialState() {
    return {
      addressSearch: [],
      dataSource: [],
      zhuanjiaoVisible: false,
      zhuanjiaoData: [],
      loading: false,
      departmentArr: [],
      selectedRowKeys: [],
      selectedRowKey: [],
      selectedRows: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        {
          title: "客户名称",
          dataIndex: "name",
          key: "name",
          render: (text, record) => {
            return (
              <span style={{ display: 'flex', alignItems: 'flex-start' }}>
                {record.channel === 1 ? <div style={{
                  whiteSpace: 'nowrap',
                  background: '#ef7207',
                  color: '#FFF',
                  padding: '1px 7px',
                  borderRadius: '5px',
                  fontSize: '12px',
                  display: 'inline-block',
                  marginRight: '10px'
                }}>
                  外联
                </div> : null}
                <Tooltip title={text}>
                  <div>{text}</div>
                </Tooltip>
              </span>
            )
          }
        },
        {
          title: "统一社会信用代码",
          dataIndex: "orgCode",
          key: "orgCode",
        },
        {
          title: "共享类型",
          dataIndex: "shareType",
          key: "shareType",
          //0-私有 1-公共 2 签单
          render: (text, record) => {
            return (
              <span>
                {
                  text === '0' ? '私有' :
                    text === '1' ? '公共' :
                      text === '2' ? '签单' : ''
                }
                {
                  record.newChannel == "1"
                    ? "渠道" : ""
                }
              </span>
            )
          }
        },
        {
          title: "地区",
          dataIndex: "locationProvince",
          key: "locationProvince",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 80,
        },
        {
          title: "客户所属人",
          dataIndex: "adminName",
          key: "adminName",
        },
        {
          title: "资料所属人",
          dataIndex: "informationMaintainer",
          key: "informationMaintainer",
        },
        {
          title: "操作",
          dataIndex: "abc",
          key: "abc",
          render: (text, record) => {
            return (
              <div>
                <Button
                  disabled={record.signBills === 0}
                  onClick={(e) => {
                    e.stopPropagation(), this.seeDetail(record);
                  }}
                  // type="primary"
                  style={{ marginRight: 10, color: "#fff", background: record.signBills === 0 ? "#58A3FF" : "green" }}
                >
                  {record.signBills === 0 ? '暂未签单' : '已签，查看详细'}
                </Button>
                <Button
                  onClick={(e) => {
                    e.stopPropagation(), this.zhuanjiaoLog(record);
                  }}
                  type="primary"
                >
                  查看转交记录
                </Button>
                <EnterpriseNameChange
                  type='journal'
                  style={{ marginLeft: 10 }}
                  enterpriseId={record.uid} />
                {record.shareType === '1' &&
                  <Button style={{ marginLeft: 10 }} onClick={(e) => {
                    e.stopPropagation();
                    let _this = this;
                    confirm({
                      title: '提醒！',
                      content: '确定要领取此客户吗？',
                      onOk() {
                        _this.receive(record);
                      },
                      onCancel() { },
                    });
                  }} type="primary">领取</Button>
                }
              </div>
            );
          },
        },
      ],
    };
  },
  //
  receive(e) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/receiveCustomer",
      data: {
        uid: e.id,
      }
    }).done(function (data) {
      this.setState({
        loading: false,
      });
      if (data.error.length === 0) {
        message.success(e.signBills == 1 ? '领取成功！客户为签单客户，请在【签单单位客户】列表中查询' : '领取成功！客户为私有客户，请在【私有单位客户】列表中查询');
        this.loadData(this.state.ispage);
      } else {
        message.warning(data.error[0].message);
      };
    }.bind(this));
  },
  //
  zhuanjiaoDetailCancel() {
    this.setState({
      zhuanjiaoVisible: false,
    });
  },
  //
  zhuanjiaoLog(record) {
    this.setState({
      zhuanjiaoVisible: true,
      zhuanjiaoId: record.id,
    });
  },
  //
  seeDetail(record) {
    this.setState({
      data: record,
      visitModul: true,
    });
  },
  //
  closeDesc(e) {
    this.state.visitModul = e;
  },
  //
  search() {
    this.loadData();
  },
  //
  reset() {
    this.setState({
      nameSearch: undefined,
      departmenttSearch: undefined,
      theTypes: undefined,
      auto: undefined,
      provinceSearch: undefined,
      addressSearch: [],
      dataSource: []
    })
    // this.loadData();
  },


  componentWillReceiveProps(nextProps) {
    if (nextProps.ApiUrl != this.props.ApiUrl) {
      this.state.nameSearch = "";
      this.state.provinceSearch = undefined;
      this.state.addressSearch = [];
      this.loadData(null, nextProps.ApiUrl);
    }
  },

  componentWillMount() {
    // this.departmentList();
    //城市
    let Province = [];
    provinceList.map(function (item) {
      var id = String(item.id);
      Province.push(
        <Select.Option value={id} key={item.name}>
          {item.name}
        </Select.Option>
      );
    });
    this.state.Provinces = Province;
    this.loadData();
  },
  //指定转交人自动补全
  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          customerArr: thedata,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  //输入转交人输入框失去焦点是判断客户是否存在
  selectAuto(value, options) {
    this.setState({
      auto: value,
    });
  },
  blurChange(e) {
    let theType = "";
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes: theType,
    });
  },
  //值改变时请求客户名称
  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      auto: e,
    });
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  render() {
    let departmentArr = this.state.departmentArr || [];
    const intentionState = this.props.intentionState;
    const FormItem = Form.Item;
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          modalVisible: false,
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1),
        });
      },
      onSelect: (recordt, selected, selectedRows) => {
        this.setState({
          modalVisible: false,
          recordt: recordt.id,
        });
      },
    };
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const hasSelected = this.state.selectedRowKeys.length > 0;
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>{!intentionState ? "单位客户查询" : "个人客户查询"}</span>
        </div>
        <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
          <TabPane tab="搜索" key="1">
            <div className="user-search">
              <Input
                style={{ width: 240 }}
                placeholder="请输入精确客户全称或统一社会信用代码"
                value={this.state.nameSearch}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              {/* <Select placeholder="选择部门"
                style={{ width: 150, marginRight: '10px', marginLeft: '10px' }}
                value={this.state.departmenttSearch}
                onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
                {
                  departmentArr.map(function (item) {
                    return <Select.Option key={item.id} >{item.name}</Select.Option>
                  })
                }
              </Select> */}
              {/* <AutoComplete
                className="certain-category-search"
                dropdownClassName="certain-category-search-dropdown"
                dropdownMatchSelectWidth={false}
                dropdownStyle={{ width: 120 }}
                style={{ width: '120px' }}
                dataSource={options}
                placeholder="客户所有人姓名"
                value={this.state.auto}
                onChange={this.httpChange}
                filterOption={true}
                onBlur={this.blurChange}
                onSelect={this.selectAuto}
              >
                <Input />
              </AutoComplete> */}
              <Button type="primary" onClick={this.search}>搜索</Button>
              <Button onClick={this.reset}>重置</Button>
            </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
              }
              dataSource={this.state.dataSource}
              rowSelection={rowSelection}
              pagination={this.state.pagination}
            />
          </Spin>
        </div>
        <Detaile
          visitModul={this.state.visitModul}
          data={this.state.data}
          detailApi={this.props.detailApi}
          closeDesc={this.closeDesc}
        />
        {this.state.zhuanjiaoVisible ? (
          <ZhuanjiaoDetail
            cancel={this.zhuanjiaoDetailCancel}
            visible={this.state.zhuanjiaoVisible}
            id={this.state.zhuanjiaoId}
          />
        ) : (
          ""
        )}
      </div>
    );
  },
});
export default QueryCustomer;