import React from "react"; import $ from "jquery/src/ajax"; import moment from "moment"; import { Button, Form, Input, Spin, Table, Select, message, Tabs, DatePicker, Modal, Tooltip, Tag, } from "antd"; import { ChooseList } from "../../order/orderNew/chooseList"; import { ShowModal, getAccountName, getSecondaryAccountName, getClockState } from "../../../tools" import { accountType, accountStatus } from "@/dataDic"; import ShowModalDiv from "@/showModal.jsx"; import OrderDetail from '../../order/orderNew/changeComponent/orderDetail'; import './index.less'; const FormItem = Form.Item; const { RangePicker } = DatePicker; const { TabPane } = Tabs; const AccountTotal = React.createClass({ getInitialState() { return { searchValues: { targetType: 1 }, // 列表筛选条件 loading: false, //加载动画 changeList: undefined, // 更改后的表格显示数据 dataSource: [], // 列表数据 departmentArr: [], 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: "contractNo", key: "contractNo", render: (text, record) => { return ( this.state.searchValues["targetType"] == 1 ? <span> <span style={{ color: record.bidType == 1 && 'red' }}>{text}</span> {" / " + record.buyerName} </span> : <span>{record.depName}</span> ); }, }, { title: "公出/实际/超出(时)", dataIndex: "maxDuration", key: "maxDuration", render: (text, record) => { return ( <div className='receiveCount' onClick={(e) => { e.stopPropagation(); this.getListC(record.contractNo) this.setState({ visibleC: true }) // this.tableRowClick(record) }} > {text + " / " + record.actualDuration + " / " + record.exceedDuration} </div> ); }, }, { title: "合同总额/已收款(万元)", dataIndex: "totalAmount", key: "totalAmount", render: (text, record) => { return ( <div className='receiveCount' onClick={(e) => { e.stopPropagation(); this.xiangqing(record.orderNo) this.xiangmu(record.orderNo) this.jiedian(record.orderNo) this.jiedianNew(record.orderNo) this.setState({ visibleD: true, orderNo: record.orderNo, }) }} > {text + " / " + record.settlementAmount} </div> ); }, }, { title: "报销总额(元)", dataIndex: "expenseAmount", key: "expenseAmount", render: (text, record) => { return ( <div className='receiveCount' onClick={(e) => { e.stopPropagation(); this.tableRowClick(record) }} > {text} </div> ); }, }, { title: "已付成本(万元)", dataIndex: "paymentAmount", key: "paymentAmount", render: (text, record) => { return ( <div className='receiveCount' onClick={(e) => { e.stopPropagation(); this.tableRowClick(record) }} > {text} </div> ); }, }, { title: "报销人数/天数/报销次数", dataIndex: "peopleCount", key: "peopleCount", render: (text, record) => { return ( <div className='receiveCount' onClick={(e) => { e.stopPropagation(); this.tableRowClick(record) }} > {text + " / " + record.days + " / " + record.expenseCount} </div> ); }, }, { title: "报销未审核/驳回次数", dataIndex: "notExamine", key: "notExamine", render: (text, record) => { return ( <div className='receiveCount' onClick={(e) => { e.stopPropagation(); this.tableRowClick(record) }} > {text + " / " + record.rejectCount} </div> ); }, }, ], visible: false, columnsA: [ { title: "类型", dataIndex: "type", key: "type", render: (text, record) => { return ( <span> {(text == 0 && !record.typeOther) ? getAccountName(record.sonType, record.sonTypeOther) : getSecondaryAccountName(text, record.typeOther)} </span> ); }, }, { title: "报销时间", dataIndex: "releaseStart", key: "releaseStart", render: (text, record) => { return ( <div> <div style={{ textAlign: "center" }}>{text}</div> <div style={{ textAlign: "center" }}>至</div> <div style={{ textAlign: "center" }}>{record.releaseEnd}</div> </div> ); }, }, { title: "工时", dataIndex: "duration", key: "duration", }, { title: "报销金额(元)", dataIndex: "amount", key: "amount", width: 70, }, { title: "实报金额(元)", dataIndex: "realAmount", key: "realAmount", width: 70, }, { title: "天数", dataIndex: "days", key: "days", }, { title: "报销编号", dataIndex: "checkNo", key: "checkNo", }, { title: "报销合同", dataIndex: "contractNo", key: "contractNo", }, { title: "客户", dataIndex: "buyerName", key: "buyerName", }, { title: "报销人", dataIndex: "aname", key: "aname", }, { title: "财务负责人", dataIndex: "financeName", key: "financeName", }, { title: "报销公司/支付公司", dataIndex: "payDepName", key: "payDepName", render: (text, record) => { return ( <div> <div>{record.applyDepName || ""}</div> <div>{text || ""}</div> </div> ); }, }, { title: "发起时间", dataIndex: "createTimeStr", key: "createTimeStr", }, { title: "状态", dataIndex: "status", key: "status", render: (text, record) => { return ( <span style={{ color: accountStatus[text].color }}> {accountStatus[text].label} </span> ); }, }, ], dataSourceA: [], columnsC: [ { title: "编号", dataIndex: "key", key: "key", width: 45, fixed: "left", }, { title: "客户名称", dataIndex: "userName", key: "userName", width: 150, fixed: "left", render: (text, record) => { return ( <div> <div>{text}</div> <div style={{ color: ["red", "green"][record.signBills] }}> {["未签单", "已签单"][record.signBills]} {record.signBills == 1 && `(${record.signTime})`} </div> </div > ); }, }, { title: "公出地点", dataIndex: "districtName", key: "districtName", width: 120, render: (text) => { return ( <div>{text}</div> ); }, }, { title: "跟单人", dataIndex: "sname", key: "sname", width: 90, render: (text, record) => { return ( <Tooltip title={text}> <div>{text}</div> </Tooltip> ); }, }, { title: "公出人员", dataIndex: "aname", key: "aname", width: 190, render: (text, record) => { return ( <Tooltip title={text}> <div> <p style={{ color: "red" }}>[ 打卡人:{text} ]</p> {record.assist !== 0 && <p style={{ color: "#8552A1" }} >[ 协单人:{record.assistAidName}]</p>} {!!record.assistantName && <p style={{ color: "#228fbd" }} >[ 协单助手:{record.assistantName}]</p>} </div> </Tooltip> ); }, }, { title: "申请时间", dataIndex: "createTimes", key: "createTimes", width: 80, }, { title: "公出时间", dataIndex: "releaseStarts", key: "releaseStarts", width: 130, render: (text, record) => ( <div> <div>{text}</div> <div style={{ paddingLeft: "44px" }}>至</div> <div>{record.releaseEnds}</div> </div> ), }, { title: "公出时长(时)", dataIndex: "duration", key: "duration", width: 50, }, { title: "打卡时间", dataIndex: "clockInTimes", key: "clockInTimes", width: 80, render: (text, record) => ( <span> <div style={{ width: 70 }}>{text}</div> {record.alone == 2 && record.assist == 1 ? <Tag color="#58a3ff">无需打卡</Tag> : <Tag color={["#F21212", "#34DE38", "#ffd400"][record.clockIn]}>{["未打卡", "已打卡", "异常打卡"][record.clockIn]}</Tag>} </span> ) }, { title: "标签", dataIndex: "status", key: "status", width: 200, render: (text, record) => ( <div> <div style={{ display: "flex", flexDirection: "row" }}> <Tag color={["#45b97c", "#69541b", "#f47920", "#8552a1", "#228fbd"][record.type]} > { record.type === 0 ? "业务公出" : record.type === 1 ? "技术公出" : record.type === 2 ? "行政公出" : record.type === 3 ? "技术协单" : record.type === 4 ? "协单助手" : "" } </Tag> <Tag color={getClockState(text).color}> {getClockState(text).title} </Tag> {record.updateStatus == 1 && <Tag color="#1E90FF">改</Tag>} </div> {record.type === 1 && <div style={{ marginTop: 5 }}>{record.contractNo}</div>} {record.type === 1 && <div>{record.totalAmout + "(万元)"}</div>} </div> ), }, { title: "公出目标", dataIndex: "remarks", key: "remarks", width: 280, render: (text) => { return ( <div>{text}</div> ); }, }, { title: "公出计划", dataIndex: "plan", key: "plan", width: 280, render: (text) => { return ( <div>{text}</div> ); }, }, { title: "预计效果", dataIndex: "expectedEffect", key: "expectedEffect", width: 280, render: (text) => { return ( <div>{text}</div> ); }, }, { title: "本次公出目标总结", dataIndex: "supplement", key: "supplement", width: 280, render: (text) => { return ( <div>{text}</div> ); }, }, { title: "下一次公出计划", dataIndex: "nextPlan", key: "nextPlan", width: 280, render: (text) => { return ( <div>{text}</div> ); }, }, { title: "审核/指导", dataIndex: "auditInfo", key: "auditInfo", width: 200, render: (text, record) => { return <div style={{ wordBreak: "break-all" }} > {record.auditTimes && `审核时间:${record.auditTimes}`} {text} </div >; }, }, ], dataSourceC: [], paginationC: { defaultCurrent: 1, defaultPageSize: 9999, showQuickJumper: true, pageSize: 9999, onChange: function (page) { this.getListC(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; }, }, visibleC: false, visibleD: false, }; }, componentWillMount() { this.departmentList(); this.loadData(); }, // 列表接口 loadData(pageNo) { const { searchValues, pagination } = this.state; this.setState({ loading: true, }); let datas = Object.assign(searchValues, { // pageNo: pageNo || 1, // pageSize: pagination.pageSize, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/expenseCounts/getCounts", data: datas, success: function (data) { ShowModal(this); this.setState({ loading: false, }); if (data.error && data.error.length === 0) { if (data.data) { pagination.current = data.data.pageNo; pagination.total = data.data.totalCount; if (data.data && data.data && !data.data.length) { pagination.current = 0; pagination.total = 0; } this.setState({ dataSource: data.data, pagination: this.state.pagination, pageNo: data.data.pageNo, totalAmount: data.data.totalAmount, }); } } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, // 公出信息 getListC(contractNo) { const { paginationC, } = this.state; this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/release/publicReleaseAndCount", data: { pageNo: 1, pageSize: paginationC.pageSize, statusType: 1, contractNo, }, success: function (data) { setTimeout(() => { this.setState({ loading: false, }); }, 300); if (data.error && data.error.length === 0) { if (data.data.list) { paginationC.current = data.data.pageNo; paginationC.total = data.data.totalCount; if (data.data && data.data.list && !data.data.list.length) { paginationC.current = 0; paginationC.total = 0; } } this.setState({ dataSourceC: data.data.list, paginationC: this.state.paginationC, pageNoC: data.data.pageNo, peopleCount: data.data.peopleCount, count: data.data.count, durationCount: data.data.durationCount, }); } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { }.bind(this) ); }, addRowColor(record) { if (record.assist === 1 || record.assist === 2 || record.assist === 3) { return 'light' } else { return 'dark' } }, departmentList() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: {}, success: function (data) { let thedata = data.data; let theArr = []; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { thedata.map(function (item, index) { theArr.push({ key: index, name: item.name, id: item.id }); }); } this.setState({ departmentArr: theArr }); }.bind(this) }).always( function () { }.bind(this) ); }, // 搜索 search() { this.loadData(); }, // 重置 reset() { this.setState({ searchValues: { targetType: 1 }, }, () => { this.loadData(); }) }, changeList(arr) { const newArr = []; this.state.columns.forEach((item) => { arr.forEach((val) => { if (val === item.title) { newArr.push(item); } }); }); this.setState({ changeList: newArr, }); }, export() { this.setState({ exportExecLoading: true }) let loading = message.loading('加载中...'); let data = this.state.searchValues; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/expenseCounts/getCounts/Export", data, success: function (data) { if (data.error.length === 0) { this.download(data.data); } else { message.warning(data.error[0].message); } }.bind(this), }).always(function () { loading(); this.setState({ exportExecLoading: false }) }.bind(this)); }, // 下载 download(fileName) { window.location.href = globalConfig.context + "/open/download?fileName=" + fileName }, // 清理缓存 getCountsClear() { this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/expenseCounts/getCountsClear", data: {}, success: function (data) { ShowModal(this); this.setState({ loading: false, }); if (data.error && data.error.length === 0) { message.success("清除成功!") } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, tableRowClick(e) { this.setState({ visible: true, contractNo: e.contractNo, }, () => { this.getListA() }) }, getListA() { this.setState({ loading: true, }); let data = { pageNo: 1, pageSize: 9999, contractNo: this.state.contractNo, }; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/expenseAccount/detailsList", data: data, success: function (data) { ShowModal(this); this.setState({ loading: false, }); if (data.error && data.error.length === 0) { if (data.data.list) { this.setState({ dataSourceA: data.data.list, totalAmountA: data.data.totalAmount, }); } } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, //订单详情 xiangqing(orderNos) { this.setState({ orderData: {} }, () => { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail", data: { orderNo: orderNos }, success: function (data) { if (data.error.length || data.data.list == "") { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { let thisdata = data.data; this.setState({ orderUid: thisdata.uid, userName: thisdata.userName, primaryOrderNo: thisdata.primaryOrder, additionalOrder: thisdata.additionalOrder, contractNo: thisdata.contractNo, // arrears: thisdata.arrears, orderData: thisdata, isAddition: thisdata.additionalOrder ? true : false, deleteSign: thisdata.deleteSign, }); } }.bind(this) }); }); }, //项目列表 xiangmu(orderNos) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/newOrder/getOrderTask", data: { orderNo: orderNos }, 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.length; i++) { let thisdata = data.data[i]; thisdata.key = i; thisdata.sort = thisdata.cSort; theArr.push(thisdata); } } this.setState({ dataSourceX: theArr }); }.bind(this) }); }, //节点列表 jiedian(orderNos) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/newOrder/selectOrderDun", data: { orderNo: orderNos }, success: function (data) { let theArr = []; let thisData = []; 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.length; i++) { thisData = data.data[i]; theArr.push({ key: i, dunSubject: thisData.dunSubject ? thisData.dunSubject.toString() : "", //催款科目 id: thisData.id, //节点Id money: thisData.money, //催款金额 dunStatus: thisData.dunStatus //催款状态 }); } this.setState({ contactList: theArr }); } }.bind(this) }); }, jiedianNew(orderNos) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/newOrderDun/selectListNewOrderDun", data: { orderNo: orderNos }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { let theArr = []; let thisData = []; let arr = data.data || []; let totalCui = 0; for (let i = 0; i < arr.length; i++) { thisData = arr[i]; totalCui += +thisData.money; theArr.push({ key: i, dunSubject: thisData.dunSubject ? thisData.dunSubject.toString() : "", //催款科目 id: thisData.id, //节点Id money: thisData.money, //催款金额 // orderNo: record ? record.orderNo : this.props.datauser.orderNo, commodityName: thisData.commodityName, projectType: thisData.projectType, dunTypeName: thisData.dunTypeName, status: thisData.status, waitDay: thisData.waitDay, effectiveCount: thisData.effectiveCount, startDate: thisData.startDate, dunType: thisData.dunType, appropriationRatio: thisData.appropriationRatio, customizeName: thisData.customizeName, customizeTimes: thisData.customizeTimes, tid: thisData.tid, }); } if (!totalCui) { totalCui = 0; } totalCui = (Math.round(totalCui * 1000000) / 1000000).toFixed(6); this.setState({ contactListNew: theArr, totalCui }); } }.bind(this) }).always( function () { this.setState({ loading: false }); }.bind(this) ); }, getOrderLog(orderNo) { this.setState({ rizhivisible: true }); this.rizhi(orderNo); }, rizhi(orderNo) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: "/api/admin/newOrder/selectOrderLog", data: { orderNo: orderNo }, success: function (data) { let theArr = []; let thisData = data.data; if (!thisData.length) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thisData = {}; } else { for (let i = 0; i < data.data.length; i++) { let thisdata = data.data[i]; theArr.push({ processName: thisdata.processName, adminName: thisdata.adminName, createDate: thisdata.createDate, remarks: thisdata.remarks }); } } this.setState({ dataSourcerizhi: theArr }); }.bind(this) }); }, render() { const { searchValues, } = this.state return ( <div className="user-content"> <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} /> <div className="content-title" style={{ marginBottom: 10 }}> <span style={{ fontWeight: 900, fontSize: 16 }}>报销总计</span> </div> <Tabs defaultActiveKey="2" className="test"> <TabPane tab="搜索" key="2"> <div className="user-search" style={{ marginLeft: 10 }}> <Select placeholder="" style={{ width: 140 }} value={searchValues["targetType"]} onChange={(e) => { searchValues["targetType"] = e; const _this = this; this.setState({ searchValues: searchValues, }, () => { _this.search() }); }} > <Select.Option value={0} >部门</Select.Option> <Select.Option value={1} >订单</Select.Option> </Select> { searchValues["targetType"] == 1 && <Input placeholder="合同编号" value={searchValues["contactNo"] ? searchValues["contactNo"] : ""} onChange={(e) => { searchValues["contactNo"] = e.target.value; this.setState({ searchValues: searchValues, }); }} /> } <Input placeholder="客户名称" value={searchValues["buyerName"] ? searchValues["buyerName"] : ""} onChange={(e) => { searchValues["buyerName"] = e.target.value; this.setState({ searchValues: searchValues, }); }} /> <Select placeholder="所属部门" style={{ width: 200, marginRight: 10 }} value={searchValues["depId"] ? searchValues["depId"] : undefined} onChange={e => { searchValues["depId"] = e; this.setState({ searchValues: searchValues, }); }} > {this.state.departmentArr.map(function (item) { return <Select.Option key={item.id}>{item.name}</Select.Option>; })} </Select> <span>报销时间:</span> <RangePicker style={{ width: 300 }} value={[ searchValues.startTime ? moment(searchValues.startTime) : null, searchValues.endTime ? moment(searchValues.endTime) : null, ]} onChange={(data, dataString) => { this.setState({ searchValues: Object.assign(searchValues, { startTime: dataString[0], endTime: dataString[1], }), }); }} /> <Button type="primary" onClick={this.search} style={{ margin: "0 10px" }} >搜索</Button> <Button onClick={this.reset}>重置</Button> <Button type="primary" onClick={this.getCountsClear} style={{ marginLeft: 10 }} >清理缓存</Button> </div> </TabPane> <TabPane tab="更改表格显示数据" key="1"> <div style={{ marginLeft: 10 }}> <ChooseList columns={this.state.columns} changeFn={this.changeList} changeList={this.state.changeList} top={55} margin={11} /> </div> </TabPane> <TabPane tab="导出" key="3"> <div style={{ float: "left" }}> <Button type="primary" loading={this.state.exportPendingLoading} onClick={this.export} style={{ margin: 10 }} > 导出excel </Button> </div> </TabPane> </Tabs> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table bordered columns={ this.state.changeList == undefined ? this.state.columns : this.state.changeList } dataSource={this.state.dataSource} pagination={false} size="small" /> </Spin> </div> <Modal visible={this.state.visible} maskClosable={false} footer={false} width={1400} onCancel={() => { this.setState({ visible: false }) }} > <Spin spinning={this.state.loading}> <Table columns={this.state.columnsA} dataSource={this.state.dataSourceA} bordered size="middle" pagination={false} /> </Spin> </Modal> { this.state.visibleD && <Modal title="订单详情" visible={this.state.visibleD} maskClosable={false} footer={false} width={1200} onCancel={() => { this.setState({ visibleD: false }) }} > <OrderDetail orderData={this.state.orderData} orderUid={this.state.orderUid} getOrderLog={this.getOrderLog} dataSourceX={this.state.dataSourceX} contactList={this.state.contactList} orderNo={this.state.orderNo} totalCui={this.state.totalCui} contactListNew={this.state.contactListNew} /> </Modal> } <Modal title="公出详情" visible={this.state.visibleC} maskClosable={false} footer={false} width={1400} onCancel={() => { this.setState({ visibleC: false }) }} > <Spin spinning={this.state.loading}> <Table scroll={{ x: "120%" }} columns={this.state.columnsC} dataSource={this.state.dataSourceC} bordered size="middle" pagination={false} rowClassName={this.addRowColor} /> </Spin> </Modal> </div> ); }, }); export default AccountTotal;