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";


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, //订单编号
        depId: 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 ? "未触发" : "已触发"
            });
          }
          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"
      },
      {
        title: "合同编号",
        dataIndex: "contractNo",
        key: "contractNo"
      },
      {
        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: "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.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;
    },
	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.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 });
                }}
              />
              <Input
                placeholder="订单编号"
                style={{ width: "150px", marginRight: 10 }}
                value={this.state.orderNo}
                onChange={(e) => {
                  this.setState({ orderNo: e.target.value });
                }}
              />
            <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: "32px",
                        }}
                        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;