kede-client/js/component/manageCenter/order/orderNew/pressList.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,//订单编号
				contractNo: this.state.contractNo,
				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
							 contractNo: thisdata.contractNo,
							 orderNo: thisdata.orderNo,//订单编号
							 totalAmount:thisdata.totalAmount,//签单金额
							 settlementAmount:thisdata.settlementAmount,//已收款
							 accountsReceivable:thisdata.accountsReceivable,//应收款
							 uncollectedAmount:thisdata.uncollectedAmount,//应收款
							 appropriationRatio:thisdata.appropriationRatio,//拨款比例
							 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,//部门名称
	             			 dunStatus: thisdata.dunStatus == 0 ? "未触发" : "已触发"
						});
					};
				    this.state.pagination.total = data.data.totalCount;
					this.state.pagination.current = data.data.pageNo;
				};
				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",
		  width: 150,
		  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: "appropriationRatio",
		  key: "appropriationRatio"
	  	},
        {
          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({
			noVisible:false
		})
	},
	//搜索
	search() {
    	this.setState({
    		//signBillVisible:false
    	})
        this.loadData();
    },
    //重置
    reset() {
    	this.setState({
    		signBillVisible:false
    	})
    	this.state.orderNo='';
		this.state.contractNo='';
    	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.contractNo='';
    	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,//订单编号
			contractNo: this.state.contractNo?this.state.contractNo:undefined,
            starTime: this.state.releaseDate[0]?this.state.releaseDate[0]:undefined,
            endTime: this.state.releaseDate[1]?this.state.releaseDate[1]:undefined,
            depId: this.state.departmenttSearch ? this.state.departmenttSearch : 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">
          <span>催款节点统计</span>
        </div>
        <div className="user-search">

        <Tabs
          defaultActiveKey="1"
          onChange={this.callback}
          className="test">
          <TabPane tab="导出催款列表" key="2">
          <Button
            type="primary"
            onClick={this.exportExec}
            style={{ float: "left", marginTop: 10,marginBottom: 10,marginLeft:10,marginRight:10}}
          >
            导出催款列表
          </Button>
          </TabPane>
          <TabPane tab="搜索" key="1">
          <Input
            placeholder="客户名称"
            style={{ width: "150px", marginBottom: "10px" ,marginRight:10,marginLeft: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",marginBottom: "10px" ,marginRight:10 }}
            value={this.state.orderNo}
            onChange={e => {
              this.setState({ orderNo: e.target.value });
            }}
          />
		  <Input
			  placeholder="合同编号"
			  style={{ width: "150px",marginBottom: "10px" ,marginRight:10 }}
			  value={this.state.contractNo}
			  onChange={e => {
				  this.setState({ contractNo: 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",marginRight: 10}}
          >
            搜索
          </Button>
          <Button onClick={this.reset}>重置</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>
          <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}
                scroll={{ x: "max-content", y: 0 }}
                onRowClick={this.tableRowClick}
                bordered
                size="small"
              />
            </Spin>
          <Modal
			maskClosable={false}
            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.visitCancel}
                      style={{ marginLeft: "50px" }}
                    >
                      取消
                    </Button>
                  </div>
                </div>
              </Spin>
            </Form>
          </Modal>
          <Modal
			maskClosable={false}
            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;