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

import React from 'react';
import { Form, Table, Spin, message, Modal, Button, Select } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

const Detail = React.createClass({
  getInitialState() {
    return {
      visible: false,
      loading: false,
      dataSource: [],
      gdataSource: [],
      columns: [
        {
          title: '业务名称',
          dataIndex: 'businessProjectName',
          key: 'businessProjectName',
        },
        {
          title: '签单时间',
          dataIndex: 'lockTime',
          key: 'lockTime',
        },
        {
          title: '营销员',
          dataIndex: 'salesmanName',
          key: 'salesmanName',
        }
      ],
      gcolumns: [
        {
          title: '限定项目',
          dataIndex: 'projectName',
          key: 'projectName',
        },
        {
          title: '状态',
          dataIndex: 'type',
          key: 'type',
          render: (text) =>
            <span>
              {["公共", "私有", "签单"][text]}
            </span>
        },
        {
          title: '营销员',
          dataIndex: 'adminName',
          key: 'adminName',
        },
        {
          title: '操作',
          dataIndex: 'op',
          key: 'op',
          render: (text, record) =>
            (record.type == 0 && this.props.data.shareType == 2) &&
            <Button
              type="primary"
              onClick={() => {
                this.setState({
                  visible: true,
                  pid: record.pid,
                  pName: record.projectName,
                })
              }}
            >
              领取
            </Button>
        },
      ],
      followList: [
        { key: "已发项目介绍资料", value: 0 },
        { key: "已约面谈", value: 1 },
        { key: "已发合同计划书", value: 2 },
        { key: "已报价", value: 3 },
        { key: "已发合同", value: 4 },
        { key: "已签合同", value: 5 },
        { key: "面谈中", value: 6 },
        { key: "已面签", value: 7 },
        { key: "无进度", value: 8 },
      ],
      customerList: [
        { key: "新客户", value: 0 },
        { key: "意向客户", value: 1 },
        { key: "重点客户", value: 2 },
        { key: "面谈客户", value: 3 },
        { key: "签单客户", value: 4 },
        { key: "被拒客户", value: 5 },
        { key: "停止跟进", value: 6 },
      ],
      followSituation: 6,
      customerStatus: 4,
    }
  },


  loadData(data, apiUrl) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + apiUrl,
      data: {
        uid: data.id,
      },
      success: function (data) {
        let listArr = [];
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
          thedata = {};
          return;
        };
        for (let i = 0; i < data.data.length; i++) {
          let thisdata = data.data[i];
          listArr.push({
            id: thisdata.id,
            businessProjectName: thisdata.businessProjectName,
            salesmanName: thisdata.salesmanName,
            lockTime: thisdata.lockTime && thisdata.lockTime.split(' ')[0],
          });
        };
        this.setState({
          dataSource: listArr,
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },

  gloadData(id) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/restrict/Project/list',
      data: {
        uid: id,
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
        } else {
          this.setState({
            gdataSource: thedata
          })
        }
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },

  visitCancel() {
    this.setState({
      visitModul: false
    })
    this.props.closeDesc(false);
  },

  add() {
    if (!this.state.followSituation && this.state.followSituation != 0) {
      message.warning("请选择跟进进度！")
      return
    }
    if (!this.state.customerStatus && this.state.customerStatus != 0) {
      message.warning("请选择客户状态！")
      return
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/restrict/Project/add",
      data: {
        pid: this.state.pid,
        uid: this.state.uid,
        followSituation: this.state.followSituation,
        customerStatus: this.state.customerStatus,
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          Modal.success({
            title: '领取成功！',
            content: (
              <div>
                本次领取的项目为
                <span style={{ color: "red" }}>【{this.state.pName}】</span>
                ，请在我的“客户管理-限定项目列表“查看
              </div>),
          });
          this.setState({
            visible: false,
            followSituation: 6,
            customerStatus: 4,
          })
          this.gloadData(this.state.uid)
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.visitModul) {
      this.setState({
        visitModul: true,
        uid: nextProps.data.id,
      })
      this.loadData(nextProps.data, nextProps.detailApi);
      this.gloadData(nextProps.data.id)
    }
  },


  render() {
    const FormItem = Form.Item
    return (
      <Modal
        className="customeDetails"
        footer=''
        title=""
        width='800px'
        visible={this.state.visitModul}
        onOk={this.visitCancel}
        onCancel={this.visitCancel}
      >
        <Spin spinning={this.state.loading}>
          <div style={{ fontSize: "16px", fontWeight: "bold" }}>限定项目</div>
          <Table
            size="middle"
            columns={this.state.gcolumns}
            dataSource={this.state.gdataSource}
            pagination={false}
          />
          <div style={{ marginTop: 50, fontSize: "16px", fontWeight: "bold" }}>已签业务</div>
          <Table
            size="middle"
            columns={this.state.columns}
            dataSource={this.state.dataSource}
            pagination={false}
          />
        </Spin>
        <Modal
          title="领取限定项目"
          visible={this.state.visible}
          onOk={this.add}
          onCancel={() => {
            this.setState({
              visible: false,
              followSituation: 6,
              customerStatus: 4,
            })
          }}
        >
          <FormItem
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 10 }}
            label="跟进进度"
          >
            <Select
              placeholder="跟进进度"
              value={this.state.followSituation}
              style={{ width: 200 }}
              onChange={(e) => {
                this.setState({ followSituation: e });
              }}
            >
              {this.state.followList.map(function (item) {
                return (
                  <Select.Option key={item.value} value={item.value}>
                    {item.key}
                  </Select.Option>
                );
              })}
            </Select>
          </FormItem>

          <FormItem
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 10 }}
            label="客户状态"
          >
            <Select
              placeholder="客户状态"
              value={this.state.customerStatus}
              style={{ width: 200 }}
              onChange={(e) => {
                this.setState({ customerStatus: e });
              }}
            >
              {this.state.customerList.map(function (item) {
                return (
                  <Select.Option key={item.value} value={item.value}>
                    {item.key}
                  </Select.Option>
                );
              })}
            </Select>
          </FormItem>

        </Modal>
      </Modal>
    )
  }
})
export default Detail;