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;