| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704 | 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],//结束时间        specially: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,//应收款	             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;					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: "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.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,            depId: this.state.departmenttSearch ? this.state.departmenttSearch : undefined,//订单部门            specially:1,            pageSize: 9999,            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" }}            value={this.state.adminName}            onChange={e => {              this.setState({ adminName: e.target.value });            }}          />          <Input            placeholder="订单编号"            style={{ width: "150px" }}            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",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;
 |