kede-client/js/component/manageCenter/order/orderNew/press.jsx

import React from 'react';
import { Button, Input, Select, Spin, Table, message, DatePicker, Form, Modal, Tabs, Tooltip } from 'antd';
import $ from 'jquery/src/ajax';
import moment from 'moment';
import { getLiquidationStatus, getjiedian, getNewOrderStatus, getProjectStatus } from '@/tools.js';
import './customer.less';
import { ChooseList } from "./chooseList";
import { getProjectName } from "../../../tools";
import DepartmentList from "../../../common/departmentList";
import Cascaders from "../../../common/cascaders";

const IntentionCustomer = Form.create()(React.createClass({
  loadData(pageNo) {
    this.setState({
      visitModul: false,
      loading: true,
      ispage: pageNo,
      modalVisible: false
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/dunOrderNewList",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        name: this.state.customerName, //名称
        orderNo: this.state.orderNo, //订单编号
        deps: this.state.departmenttSearch, //订单部门
        adminName: this.state.adminName, //责任人名称
        starTime: this.state.releaseDate[0], //开始时间
        endTime: this.state.releaseDate[1], //结束时间
        newStatus: this.state.newStatus
      },
      success: function (data) {
        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];
            theArr.push({
              key: i + 1,
              id: thisdata.id, //ID
              orderNo: thisdata.orderNo, //订单编号
              totalAmount: thisdata.totalAmount, //签单金额
              settlementAmount: thisdata.settlementAmount, //已收款
              accountsReceivable: thisdata.accountsReceivable, //应收款
              uncollectedAmount: thisdata.uncollectedAmount, //应收款
              orderStatus: thisdata.orderStatus, //订单状态
              projectStatus: thisdata.projectStatus, //项目状态
              liquidationStatus: thisdata.liquidationStatus, //结算状态
              signDate: thisdata.signDate, //签单时间
              userName: thisdata.userName, //客户名称
              salesmanName: thisdata.salesmanName, //营销员名称
              dunSubject: thisdata.dunSubject, //催收科目
              startDate: thisdata.startDate, //催收启动时间
              depName: thisdata.depName, //部门名称
              contractNo: thisdata.contractNo,
              dunStatus: thisdata.dunStatus == 0 ? "未触发" : "已触发",
              commodityName: thisdata.commodityName,
            });
          }
          this.state.pagination.total = data.data.totalCount;
        }
        if (data.data && data.data.list && !data.data.list.length) {
          this.state.pagination.total = 0;
        }
        this.setState({
          dataSource: theArr,
          pageNo: pageNo,
          pagination: this.state.pagination,
          selectedRowKeys: []
        });
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  loadDatas(dunId) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/selectDunLogList",
      data: {
        dunId: dunId,
      },
      success: function (data) {
        let theArr = [];
        if (data.error.length || data.data == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            theArr.push({
              key: i,
              id: thisdata.id,//ID
              dunId: thisdata.dunId,//催款ID
              dumBy: thisdata.dumBy,//催款人
              dumTime: thisdata.dumDate,//催款时间
              remarks: thisdata.remarks,//备注
            });
          };
        };
        this.setState({
          dataSources: theArr,
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  getInitialState() {
    return {
      newStatus: 1,
      page: 1,
      releaseDate: [],
      selectedRowKeys: [],
      orgCodeUrl: [],
      paginations: false,
      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: "key",
          key: "key",
          fixed: 'left'
        },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          fixed: 'left'
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo"
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          render: text => {
            return (
              <Tooltip title={text}>
                <div 
                // style={{
                //   maxWidth: '150px',
                //   overflow: 'hidden',
                //   textOverflow: "ellipsis",
                //   whiteSpace: 'nowrap',
                // }}
                >{text}</div>
              </Tooltip>
            )
          }
        },
        {
          title: "订单负责人",
          dataIndex: "salesmanName",
          key: "salesmanName"
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName"
        },
        {
          title: "订单状态",
          dataIndex: "orderStatus",
          key: "orderStatus",
          render: text => {
            return getNewOrderStatus(text);
          }
        },
        {
          title: "项目名称",
          dataIndex: "commodityName",
          key: "commodityName",
          // render: text => {
          //   return getNewOrderStatus(text);
          // }
        },
        {
          title: "项目状态",
          dataIndex: "projectStatus",
          key: "projectStatus",
          render: text => {
            return getProjectName(text);
          }
        },
        {
          title: "签单金额(万元)",
          dataIndex: "totalAmount",
          key: "totalAmount"
        },
        {
          title: "已收款(万元)",
          dataIndex: "settlementAmount",
          key: "settlementAmount"
        },
        {
          title: "未收款(万元)",
          dataIndex: "uncollectedAmount",
          key: "uncollectedAmount"
        },
        {
          title: "结算状态",
          dataIndex: "liquidationStatus",
          key: "liquidationStatus",
          render: text => {
            return getLiquidationStatus(text);
          }
        },
        {
          title: "催收科目",
          dataIndex: "dunSubject",
          key: "dunSubject"
          //   render: text => {
          //     return getjiedian(text);
          //   }
        },
        {
          title: "应收款(万元)",
          dataIndex: "accountsReceivable",
          key: "accountsReceivable"
        },
        {
          title: "催款状态",
          dataIndex: "dunStatus",
          key: "dunStatus"
        },
        {
          title: "催款启动日期",
          dataIndex: "startDate",
          key: "startDate"
        },
        {
          title: "签单时间",
          dataIndex: "signDate",
          key: "signDate"
        }
        // {
        //   title: "催收操作",
        //   dataIndex: "abc",
        //   key: "abc",
        //   render: (text, record) => {
        //     return (
        //       <div>
        //         <Button
        //           onClick={e => {
        //             e.stopPropagation(), this.visit(record);
        //           }}
        //           type="primary"
        //         >
        //           添加催款记录
        //         </Button>
        //       </div>
        //     );
        //   }
        // }
      ],
      data: [],
      dataSource: [],
      columnsX: [
        {
          title: "催款人",
          dataIndex: "dumBy",
          key: "dumBy"
        },
        {
          title: "催款时间",
          dataIndex: "dumTime",
          key: "dumTime"
        },
        {
          title: "催款情况",
          dataIndex: "remarks",
          key: "remarks"
        }
      ],
      dataSources: []
    };
  },

  //页面加载函数
  componentWillMount() {
    this.loadData();
  },
  //进入新增拜访记录
  visit(record) {
    this.setState({
      visible: true,
      dunId: record.id
    })
  },
  //	//整行点击
  tableRowClick(record) {
    this.setState({
      visibles: true,
    });
    this.loadDatas(record.id);
  },



  //新增催款记录
  examOk() {
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/createDunLog",
      data: {
        dunId: this.state.dunId,
        dumTime: this.state.dumTime,
        remarks: this.state.remarks,
      },
      success: function (data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
        } else {
          message.success("新增催款记录成功~");
          this.setState({
            visible: false,
          });
          this.loadData();
          this.resets();
        };

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


  //关闭输入理由框
  noCancel() {
    this.setState({
      visible: false
    })
  },
  //搜索
  search() {
    this.setState({
      //signBillVisible:false
    })
    this.loadData();
  },
  //重置
  reset() {
    this.setState({
      signBillVisible: false
    })
    this.state.orderNo = '';
    this.state.customerName = '';
    this.state.adminName = '';
    this.state.departmenttSearch = undefined;
    this.state.releaseDate[0] = undefined;
    this.state.releaseDate[1] = undefined;
    this.Cascaders.empty();
    this.loadData();
  },
  resets() {
    this.state.orderNo = '';
    this.state.customerName = '';
    this.state.adminName = '';
    this.state.departmenttSearch = undefined;
    this.state.releaseDate[0] = undefined;
    this.state.releaseDate[1] = undefined;
    this.Cascaders.empty();
  },
  getOrgCodeUrl(e) {
    this.setState({ orgCodeUrl: e });
  },
  //关闭详情
  visitCancel() {
    this.setState({
      visible: false
    })
    this.resets();
  },
  visitOk() {
    this.setState({
      visible: false
    })
    this.resets();
  },
  //关闭详情
  visitCancels() {
    this.setState({
      visibles: false
    })
    this.resets();
  },
  //导出
  exportExec() {
    var data = {
      name: this.state.customerName ? this.state.customerName : undefined,//客户名称
      adminName: this.state.adminName ? this.state.adminName : undefined,//订单负责人
      orderNo: this.state.orderNo ? this.state.orderNo : undefined,//订单编号
      starTime: this.state.releaseDate[0] ? this.state.releaseDate[0] : undefined,
      endTime: this.state.releaseDate[1] ? this.state.releaseDate[1] : undefined,
      pageSize: 9999999,
      newStatus: this.state.newStatus
    }
    window.location.href = (globalConfig.context + '/api/admin/newOrder/exportOrderDunData?' + $.param(data));
  },
  visitOks() {
    this.setState({
      visibles: false
    })
    this.resets();
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const FormItem = Form.Item;
    const { RangePicker } = DatePicker;
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          modalVisible: false,
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1)
        });
      },
      onSelect: (recordt) => {
        this.setState({
          modalVisible: false,
          recordt: recordt.id
        })
      },
    };
    const { TabPane } = Tabs;
    return (
      <div className="user-content">
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>催款节点统计</span>
        </div>
        <div className="user-search">
          <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
            <TabPane tab="搜索" key="1">
              <Input
                placeholder="订单编号"
                style={{
                  width: "150px",
                  marginBottom: "10px",
                  marginLeft: 10,
                  marginRight: 10,
                }}
                value={this.state.orderNo}
                onChange={(e) => {
                  this.setState({ orderNo: e.target.value });
                }}
              />
              <Input
                placeholder="客户名称"
                style={{ width: "150px", marginRight: 10 }}
                value={this.state.customerName}
                onChange={(e) => {
                  this.setState({ customerName: e.target.value });
                }}
              />
              <Input
                placeholder="营销员名称"
                style={{
                  width: "150px",
                  marginBottom: "10px",
                  marginRight: 10,
                }}
                value={this.state.adminName}
                onChange={(e) => {
                  this.setState({ adminName: e.target.value });
                }}
              />
              <Cascaders
                ref={node => this.Cascaders = node}
                placeholder="订单部门"
                id="id"
                name="name"
                children="list"
                height={28}
                onSel={(e) => {
                  this.setState({
                    departmenttSearch: JSON.stringify(e),
                  });
                }}
              />
              {/* <DepartmentList
                value={this.state.departmenttSearch}
                onChange={e => {
                  this.setState({ departmenttSearch: e });
                }} /> */}
              <Select
                placeholder="选择催款节点类型"
                style={{ width: 150, marginRight: "10px" }}
                value={this.state.newStatus == 0 ? "旧催款节点" : "新催款节点"}
                onChange={(e) => {
                  this.setState({ newStatus: e });
                }}
              >
                <Select.Option key={0}>{"旧催款节点"}</Select.Option>
                <Select.Option key={1}>{"新催款节点"}</Select.Option>
              </Select>
              <span style={{ marginRight: "10px" }}>下单时间 :</span>
              <RangePicker
                value={[
                  this.state.releaseDate[0]
                    ? moment(this.state.releaseDate[0])
                    : null,
                  this.state.releaseDate[1]
                    ? moment(this.state.releaseDate[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ releaseDate: dataString });
                }}
              />
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: "10px" }}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </TabPane>
            <TabPane tab="导出催款列表" key="2">
              <Button
                type="primary"
                onClick={this.exportExec}
                style={{ marginBottom: 10, marginTop: 10, marginLeft: 10 }}
              >
                导出催款列表
              </Button>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="3">
              <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
                columns={
                  this.state.changeList
                    ? this.state.changeList
                    : this.state.columns
                }
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
                onRowClick={this.tableRowClick}
                scroll={{ x: "max-content", y: 0 }}
                bordered
                size="small"
              />
            </Spin>
          </div>
          <Modal
            className="customeDetails"
            footer=""
            title="新增催款记录"
            width="500px"
            visible={this.state.visible}
            onOk={this.visitOk}
            onCancel={this.visitCancel}
          >
            <Form
              layout="horizontal"
              onSubmit={this.handleSubmit}
              id="demand-form"
              style={{ paddingBottom: "40px" }}
            >
              <Spin spinning={this.state.loading}>
                <div className="clearfix">
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      {...formItemLayout}
                      label="催款时间"
                    >
                      <DatePicker
                        style={{
                          marginTop: "2px",
                          width: "240px",
                          height: "27px",
                        }}
                        showTime
                        format="YYYY-MM-DD"
                        onOk={() => { }}
                        value={
                          this.state.dumTime ? moment(this.state.dumTime) : null
                        }
                        onChange={(data, dataString) => {
                          this.setState({ dumTime: dataString });
                        }}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 16 }}
                      label="催款情况"
                    >
                      <Input
                        type="textarea"
                        placeholder="请输入催款情况"
                        rows={4}
                        value={this.state.remarks}
                        onChange={(e) => {
                          this.setState({ remarks: e.target.value });
                        }}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <Button
                      className="cancel"
                      type="primary"
                      onClick={this.examOk}
                      style={{ marginLeft: "50px" }}
                      htmlType="submit"
                    >
                      添加
                    </Button>
                    <Button
                      className="cancel"
                      type="ghost"
                      onClick={this.noCancel}
                      style={{ marginLeft: "50px" }}
                    >
                      取消
                    </Button>
                  </div>
                </div>
              </Spin>
            </Form>
          </Modal>
          <Modal
            className="customeDetails"
            footer=""
            title="催款记录查看"
            width="500px"
            visible={this.state.visibles}
            onOk={this.visitOks}
            onCancel={this.visitCancels}
          >
            <div className="user-content">
              <div className="patent-table">
                <Spin spinning={this.state.loading}>
                  <Table
                    columns={this.state.columnsX}
                    dataSource={this.state.dataSources}
                    rowSelection={rowSelection}
                    pagination={this.state.paginations}
                  // onRowClick={this.tableRowClick}
                  />
                </Spin>
              </div>
            </div>
          </Modal>
        </div>
      </div>
    );
  }
}));
export default IntentionCustomer;