import React, { Component } from "react"; import { Form, Input, Button, message, Modal, Spin, Table, Radio, Select, AutoComplete } from "antd"; import { ShowModal, splitUrl, getAccountName, getSecondaryAccountName, getVehicleName, getTypeName, commonAdd, dealBigMoney } from "../../../tools" import ImgList from "../../../common/imgList"; import ReactToPrint from "react-to-print"; import moment from "moment"; import $ from "jquery/src/ajax"; import './accountReview.less'; const FormItem = Form.Item; const RadioGroup = Radio.Group; class AccountDetails extends Component { constructor(props) { super(props); this.state = { editA: "", isTable: true, sloading: false, loading: false, visible: "", data: {}, logvisible: false, logdataSour: [], logcolumns: [ { title: "审核人", dataIndex: "auditorName", key: "auditorName" }, { title: "操作", dataIndex: "status", key: "status", width: 120, render: (text, record) => { return ( {["【发起】", "【通过】", "【完成】", "【驳回】", "【撤销】", "【修改】"][text]} {this.state.processStatus == record.processStatus && !record.id &&  审核中...} ); }, }, { title: "操作时间", dataIndex: "createTimeStr", key: "createTimeStr", width: 88, }, { title: "备注", dataIndex: "remarks", key: "remarks", render: (text, record) => { return (
{text}
) } } ], columns: [ { title: "序号", dataIndex: "a", key: "a", width: 40, render: (text, record, index) => { return (
{index + 1}
) } }, { title: "费用时间", dataIndex: "agreeTime", key: "agreeTime", width: "10%", render: (text, record) => { return (
{record.types == 1 ? (moment(record.releaseStart).format("YYYY-MM-DD HH:mm") + " 至 " + moment(record.releaseEnd).format("YYYY-MM-DD HH:mm")) : !!text ? text : record.startTime}
) } }, { title: "时长", dataIndex: "duration", key: "duration", width: 40, render: (text, record) => { return (
{record.types == 1 ? text : ""}
) } }, { title: "出差地址", dataIndex: "districtName", key: "districtName", width: "10%", render: (text, record) => { return (
{text}
) } }, { title: "出差企业", dataIndex: "userNames", key: "userNames", width: "10%", render: (text, record) => { return (
{text}
) } }, { title: "合同编号", dataIndex: "contractNo", key: "contractNo", width: "8%", render: (text, record) => { return (
{ this.setState({ editA: "contractNo", editTit: "修改合同编号", upId: record.erid, // upUserNames: record.userNames, }) }} >{text}
) } }, { title: "类型", dataIndex: "types", key: "types", width: "6%", render: (text, record) => { return (
{ text == 0 && this.setState({ editA: "typesOther", editTit: "修改其他类型说明", upId: record.erid, upTypesOther: record.typesOther, }) }} > {getAccountName(text, record.typesOther)}
) } }, { title: "详细", dataIndex: "cost", key: "cost", width: "8%", render: (text, record) => { return (
{ !text && !record.vehicle && record.type != 1 && this.setState({ editA: "detTypeOther", editTit: "修改其他详细说明", upId: record.id, detTypeOther: record.typeOther, }) }} >{!!text ? text : (!!record.vehicle && record.type == 1 ? ( getVehicleName(record.vehicle, record.vehicleOther) + "(" + record.startDistrict + " - " + record.endDistrict + ")" ) : getTypeName(record.type, record.typeOther))}
) } }, { title: "费用", dataIndex: "amount", key: "amount", width: "5%", render: (text, record) => { return (
{text}
) } }, { title: "实报", dataIndex: "realAmount", key: "realAmount", width: "5%", render: (text, record) => { return (
{ !record.noEdit && this.props.isOperate && this.setState({ editA: "amount", editTit: "修改金额", upAmount: text, upId: record.id, }) }} >{text}
) } }, { title: "出差事由", dataIndex: "plan", key: "plan", // width: "10%", render: (text, record) => { return (
{text}
) } }, { title: "报销订单/部门", dataIndex: "orderNo", key: "orderNo", // width: "10%", render: (text, record) => { return (
{text}
{record.applyDepName}
) } }, // { // title: "报销事由", // dataIndex: "remarks", // key: "remarks", // // width: "10%", // render: (text, record) => { // return ( //
{text}
// ) // } // }, ] }; } componentDidMount() { const { id } = this.props !!id && this.getDetails(id) } // 报销信息详情 getDetails(id) { this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/expenseAccount/mainExpense", data: { id, }, success: function (data) { ShowModal(this); this.setState({ loading: false, }); if (data.error.length === 0) { let allData = data.data; let allList = []; for (var i = 0; i < allData.sonList.length; i++) { let dlist = allData.sonList[i].detList for (var j = 0; j < dlist.length; j++) { let obj = dlist[j] allData.sonList[0].detList[0].applyDepName = allData.applyDepName; // 部门 allData.sonList[0].detList[0].remarks = allData.remarks; // 报销事由 dlist[0].contractNo = allData.sonList[i].contractNo; // 合同编号 dlist[0].orderNo = allData.sonList[i].orderNo; // 订单号 dlist[0].releaseStart = allData.sonList[i].releaseStart; dlist[0].releaseEnd = allData.sonList[i].releaseEnd; // 公出时间 dlist[0].duration = allData.sonList[i].duration; // 费用时间 dlist[0].districtName = allData.sonList[i].districtName; // 出差地址 dlist[0].userNames = allData.sonList[i].userNames; // 出差企业 dlist[0].plan = allData.sonList[i].plan; // 出差事由 dlist[0].publicReleaseType = allData.sonList[i].publicReleaseType; // 公出关联 dlist[0].types = allData.sonList[i].type; // 报销类型 dlist[0].erid = allData.sonList[i].id; // 二级报销id dlist[0].typesOther = allData.sonList[i].typeOther; if (allData.sonList[i].type == 2) { // 非业务报销 obj.type = allData.sonList[i].secondaryType; obj.typeOther = allData.sonList[i].secondaryTypeOther; } else if (allData.sonList[i].type == 3 || allData.sonList[i].type == 0) { // 第三方付款 其他 obj.cost = "费用" } else if (allData.sonList[i].type == 4) { // 申请借支 obj.cost = "借支费用" } else if (allData.sonList[i].type == 4) { // 申请抵扣 obj.cost = "抵扣费用" } allList.push(obj) } allData.sonList[i].settlementAmount != 0 && allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "抵扣", amount: allData.sonList[i].settlementAmount, realAmount: " " }) allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "小计", amount: allData.sonList[i].amount, realAmount: allData.sonList[i].realAmount }) } allList.push({ noEdit: true, id: allData.id, cost: "合计", amount: allData.amount, realAmount: allData.realAmount }) this.setState({ data: data.data, newList: allList, }) // this.setState({ // data: data.data, // imgs: data.data.attachmentUrl // ? splitUrl(data.data.attachmentUrl, ",", globalConfig.avatarHost + "/upload") // : [], // }) // this.getAccountList(id) this.getLogData(id) } else { message.warning(data.error[0].message) } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } // 报销费用详情 // getAccountList(eaid) { // const { data } = this.state // $.ajax({ // method: "get", // dataType: "json", // crossDomain: false, // url: globalConfig.context + "/api/admin/expenseAccount/details/list", // data: { eaid, }, // success: function (datas) { // if (datas.error.length === 0) { // let sum = 0 // for (var i = 0; i < datas.data.length; i++) { // sum = commonAdd(sum, datas.data[i].amount) // } // let leftList = JSON.parse(JSON.stringify(datas.data)) || [] // let jsonArray = [] // if (data.type != 4 && data.type != 5 && data.debitTotalAmount) { // leftList.push({ "other": "预借支", "amount": data.debitTotalAmount },) // } // if (data.type != 4 && data.type != 5) { // leftList.push( // { "other": "总金额", "amount": sum }, // { "other": "实报金额", "amount": (sum > data.debitTotalAmount) ? commonAdd(sum, -data.debitTotalAmount) : 0 }) // } // if (data.type == 1) { // // 差旅费 // jsonArray = [ // { "head": `支付公司:${data.payDepName}` }, // { "head": `事由:${data.remarks}` }, // { "head": `公出企业:${data.userNames}` }, // { "head": `公出地点:${data.districtName}` }, // { "head": `时间:${moment(data.releaseStartStr).format('YYYY-MM-DD HH:mm') + " 至 " + moment(data.releaseEndStr).format('YYYY-MM-DD HH:mm')}` }, // { "head": `公出时长:${data.duration}` }, // ] // } else if (data.type == 3) { // // 第三方付款 // jsonArray = [ // { "head": `支付公司:${data.payDepName}` }, // { "head": `事由:${data.remarks}` }, // ] // } else { // // 通用 // jsonArray = [ // { "head": `事由:${data.remarks}` }, // ] // } // let newArray = [] // if (jsonArray.length >= leftList.length) { // for (var i = 0; i < leftList.length; i++) { // jsonArray[i] = Object.assign(jsonArray[i], leftList[i]) // } // newArray = jsonArray // } else { // for (var i = 0; i < jsonArray.length; i++) { // leftList[i] = Object.assign(jsonArray[i], leftList[i]) // } // newArray = leftList // } // newArray.push({}, {}) // this.setState({ // list: datas.data || [], // newList: newArray, // total: sum, // }) // } else { // message.warning(datas.error[0].message); // } // }.bind(this), // }).always( // function () { // this.setState({ // loading: false, // }); // }.bind(this) // ); // } isHere(list = []) { for (var i = 0; i < list.length; i++) { if (!list[i].id) { this.setState({ processStatus: list[i].processStatus }) return } } } // 日志 getLogData(eaid) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/expenseAccount/log/list", data: { eaid }, success: function (data) { if (data.error.length === 0) { this.setState({ logdataSour: data.data || [] }); this.isHere(data.data || []) } else { message.warning(data.error[0].message); } }.bind(this) }).always( function () { }.bind(this) ); } // 审核 toExamine(num) { const { checkData, reason } = this.state if (!reason) { message.warning("请填写审核说明~"); return; } this.setState({ loading: true, }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/expenseAccount/examine", data: { id: checkData.id, reason, status: num,//1同意 3驳回 }, }).done( function (data) { if (!data.error.length) { message.success("审核成功!"); this.setState({ visible: "", reason: "", showDetails: false, checkData: {}, }); this.getDetails(this.state.data.id) this.getLogData(this.state.data.id) } else { message.warning(data.error[0].message); } }.bind(this) ); } distinct(arr, key) { let hash = {}; let result = []; for (let i = arr.length - 1; i >= 0; i--) { let value = arr[i][key]; if (!hash[value]) { hash[value] = true; result.unshift(arr[i]); } } return result; } // 修改 updateRealAmount() { const { editA } = this.state this.setState({ upLoading: true, }) if (editA == "typesOther" && !this.state.upTypesOther) { message.warn("其他类型说明不能为空!"); return } if (editA == "remarks" && !this.state.upRemarks) { message.warn("报销事由不能为空!"); return } if (editA == "contractNo" && !this.state.upOrderNo) { message.warn("请选择合同编号!"); return } if (editA == "detTypeOther" && !this.state.detTypeOther) { message.warn("其他类型说明不能为空!"); return } let obj1 = { id: this.state.upId, amount: this.state.upAmount, } let obj2 = { id: this.state.upId, remarks: this.state.upRemarks, } let obj3 = { id: this.state.upId, typeOther: this.state.upTypesOther, } let obj4 = { id: this.state.upId, orderNo: this.state.upOrderNo, } let obj5 = { id: this.state.upId, typeOther: this.state.detTypeOther, } $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + editA == "amount" ? "/api/admin/expenseAccount/updateRealAmount" : editA == "detTypeOther" ? "/api/admin/expenseAccount/updateDetailsTypeOther" : "/api/admin/expenseAccount/updateTypeOther", data: editA == "amount" ? obj1 : editA == "remarks" ? obj2 : editA == "typesOther" ? obj3 : editA == "contractNo" ? obj4 : editA == "detTypeOther" && obj5, }).done( function (data) { this.setState({ upLoading: false, }) if (!data.error.length) { message.success("修改成功!"); this.setState({ editA: "", upId: "", upUserNames: "", upUserId: "", upList: [], }); this.getDetails(this.state.data.id) } else { message.warning(data.error[0].message); } }.bind(this) ); } // 查询合同编号 selectOrderByUid() { this.setState({ sloading: true }) $.ajax({ method: "GET", dataType: "json", crossDomain: false, url: "/api/admin/release/selectOrderByUid", data: { uid: this.state.upUserId, }, }).done( function (data) { this.setState({ sloading: false }) if (!data.error.length) { this.setState({ upList: data.data }) } else { message.warning(data.error[0].message); } }.bind(this) ); } // 查询企业 httpChange(e) { this.setState({ upUserNames: e, }); if (e.length >= 1) { this.supervisor(e); } } // supervisor(e) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/getUserByNames", data: { name: e, type: 1, pageNo: 1, pageSize: 10, }, success: function (data) { let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thedata = {}; } this.setState({ customerArr: thedata.list, }); }.bind(this), }).always( function () { }.bind(this) ); } selectAuto(value) { const { customerArr } = this.state this.setState({ upUserId: customerArr.find((item) => item.name == value).id, }); } render() { const { TextArea } = Input const { data, visible, newList, logdataSour, columns, customerArr = [] } = this.state const { onCancel } = this.props const formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 18 }, }; const radioStyle = { display: 'block', height: '30px', lineHeight: '30px', }; const options = customerArr.map((group) => ( {group.name} )); return ( 报销详情 } footer="" >
{ this.refs.all = e; }} > {this.state.isTable ?
报销明细表
报销编号:{data.checkNo}
申请部门:{data.applyDepName}
报销人:{data.aname}
报销日期:{moment(data.createTimeStr).format('YYYY年MM月DD日')}
{ this.setState({ editA: "remarks", editTit: "修改报销事由", upId: data.id, upRemarks: data.remarks, }) }} >报销事由:{data.remarks}
收款方式:{!data.name ? "" : (data.bank + " " + data.accounts + " " + data.name)}
审核日志: { this.state.logdataSour.map(item => item.showStatus == 0 && 【{item.auditorName}  {item.createTimeStr}  {item.remarks}】   ) }
:
{data.checkNo}
{/*
{data.totalAmount}
*/} {/*
{data.buyerName}
{data.contractNo}
*/}
{data.createTimeStr}
{data.type == 1 &&
公出信息
{data.userNames}
{data.districtName}
{data.releaseStartStr} 至 {data.releaseEndStr}
{data.duration}小时
}
报销详细
{data.aname}
{data.applyDepName}
{data.payDepName}

{data.remarks}

报销费用详细
{ data.sonList.map(it =>
{it.amount}(元)
{getAccountName(it.type, it.typeOther)} {it.type == 2 && (" - " + getSecondaryAccountName(it.secondaryType, it.secondaryTypeOther))}
{ !!it.publicReleaseType &&
{["业务公出", "技术公出", "行政公出", "技术协单", "技术助手"][it.publicReleaseType]}
} { !!it.contractNo ?
{it.contractNo}
: 报销至部门 } {/* 差旅费显示 */} {it.type == 1 && it.detList.map(item => item.type == 1 ?
{getVehicleName(item.vehicle, item.vehicleOther)} ({item.startDistrict + " - " + item.endDistrict}) {item.amount}(元)
:
{item.amount}(元)
) } {/* 通用 */} {(it.type == 0 || it.type == 2 || it.type == 4 || it.type == 5) && it.detList.map(item =>
{!!item.agreeTimeStr && {item.agreeTimeStr.slice(0, 10)} } {item.amount}(元)
) } {/* 第三方付款 */} {it.type == 3 && it.detList.map(item =>
{!!item.agreeTimeStr && {item.agreeTimeStr.slice(0, 10)} } {["公对公转账"][item.payType]} {["普票", "专票"][item.invoiceType]} {item.invoiceNo} {item.payerName} {item.openBank} {item.bankAccounts} {item.openBankAddress} {item.amount}
) } { it.settlementAmount != 0 && it.type != 4 && it.type != 5 &&
{it.settlementAmount}(元)
}
{!!it.attachmentUrl ? :
}
) } {data.type != 4 && data.debitTotalAmount &&
{data.debitTotalAmount}(元)
} {data.type != 4 && data.type != 5 &&
{data.amount}(元)
} {data.type != 4 && data.type != 5 &&
{data.realAmount}(元)
}
收款详情
{data.type != 3 && data.type != 5 &&
{!!data.name && data.name}
{!!data.bank && data.bank}
{!!data.accounts && data.accounts}
}
审核意见
    {logdataSour.map((item, index) => { return (
  • {item.auditorName}: {["【发起】,", "【通过】,", "【完成】,", "【驳回】,", "【撤销】,", "【修改】,"][item.status]} {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&  审核中...} {item.remarks}    {item.createTimeStr}
  • ); })}
{false && this.props.isOperate && data.examine == 1 &&