|
@@ -0,0 +1,971 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+import { Form, Input, Button, message, Modal, Spin, Table } from "antd";
|
|
|
+import { ShowModal, splitUrl, getAccountName, 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;
|
|
|
+
|
|
|
+class AccountDetails extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ isTable: true,
|
|
|
+ loading: false,
|
|
|
+ visible: "",
|
|
|
+ data: {},
|
|
|
+ logvisible: false,
|
|
|
+ logdataSour: [],
|
|
|
+ logcolumns: [
|
|
|
+ {
|
|
|
+ title: "审核人",
|
|
|
+ dataIndex: "auditorName",
|
|
|
+ key: "auditorName"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ dataIndex: "status",
|
|
|
+ key: "status",
|
|
|
+ width: 120,
|
|
|
+ render: (text, record) => {
|
|
|
+ return (
|
|
|
+ <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][text] }}>
|
|
|
+ {["【发起】", "【通过】", "【完成】", "【驳回】", "【重新发起】"][text]}
|
|
|
+ {this.state.processStatus == record.processStatus && !record.id &&
|
|
|
+ <span style={{ color: "#FFA500" }}> 审核中...</span>}
|
|
|
+ </span>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作时间",
|
|
|
+ dataIndex: "createTimeStr",
|
|
|
+ key: "createTimeStr",
|
|
|
+ width: 88,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "备注",
|
|
|
+ dataIndex: "remarks",
|
|
|
+ key: "remarks",
|
|
|
+ render: (text, record) => {
|
|
|
+ return (
|
|
|
+ <div style={{ minWidth: 250 }}>{text}</div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ 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/selectById",
|
|
|
+ data: { id, },
|
|
|
+ success: function (data) {
|
|
|
+ ShowModal(this);
|
|
|
+ this.setState({
|
|
|
+ loading: false,
|
|
|
+ });
|
|
|
+ if (data.error.length === 0) {
|
|
|
+ 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.loadData()
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { TextArea } = Input
|
|
|
+ const { data, visible, list = [], newList, total, logdataSour, } = this.state
|
|
|
+ const { onCancel } = this.props
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: { span: 5 },
|
|
|
+ wrapperCol: { span: 18 },
|
|
|
+ };
|
|
|
+ const logArray = logdataSour.filter((item, index, arr) => {
|
|
|
+ return arr.findLastIndex((t) => t.auditorName === item.auditorName) === index;
|
|
|
+ });
|
|
|
+ const reimbursement = [
|
|
|
+ {
|
|
|
+ title: !!data.contractNo ? `报销至订单:${data.contractNo}` : `报销至部门`,
|
|
|
+ dataIndex: "head",
|
|
|
+ key: "head",
|
|
|
+ width: 275,
|
|
|
+ render: (text, row, index) => {
|
|
|
+ if (index < newList.length - 2) {
|
|
|
+ return <span>{text}</span>;
|
|
|
+ } else if (index == newList.length - 2) {
|
|
|
+ return {
|
|
|
+ children: <div style={{ display: "flex", justifyContent: "space-between" }}>
|
|
|
+ <span>金额合计(大写):{data.type == 5 ? dealBigMoney(total) : (dealBigMoney((total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0))}</span>
|
|
|
+ <span>¥ {data.type == 5 ? total : (total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0} </span>
|
|
|
+ </div>,
|
|
|
+ props: {
|
|
|
+ colSpan: 3,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else if (index == newList.length - 1) {
|
|
|
+ return {
|
|
|
+ children: <div>
|
|
|
+ <div>
|
|
|
+ {data.type == 3 && newList.map((item, index) => !!item.invoiceNo && <div key={index}>付款方式:{"公对公转账"} 发票类型:{["普票", "专票"][item.invoiceType]} 发票号:{item.invoiceNo}</div>)}
|
|
|
+ {data.type == 3
|
|
|
+ ? newList.map((item, index) => !!item.payerName && <div key={index}>收款方式:{item.payerName} {item.openBank} {item.bankAccounts} {item.openBankAddress}</div>)
|
|
|
+ : data.type != 5 && <div>收款方式:{data.bank} {data.accounts} {data.name}</div>}
|
|
|
+ </div>
|
|
|
+ </div>,
|
|
|
+ props: {
|
|
|
+ colSpan: 3,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报销数',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: '付款项目',
|
|
|
+ dataIndex: "type",
|
|
|
+ key: "type",
|
|
|
+ width: 120,
|
|
|
+ render: (value, row, index) => {
|
|
|
+ if (index == newList.length - 2) {
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ rowSpan: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else if (index == newList.length - 1) {
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ rowSpan: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return <div>
|
|
|
+ {data.type == 1 &&
|
|
|
+ // 差旅费显示
|
|
|
+ <div>
|
|
|
+ {!!row.other
|
|
|
+ ? row.other
|
|
|
+ : value == 1
|
|
|
+ ? <span>{`交通费(${getVehicleName(row.vehicle, row.vehicleOther)})`}</span>
|
|
|
+ : <span>{getTypeName(row.type)}</span>}
|
|
|
+ </div>}
|
|
|
+ {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
|
|
|
+ <span>{value == 4 ? "预借支金额" : value == 5 ? "抵扣金额" : !!row.other ? row.other : "申请金额"}</span>
|
|
|
+ }
|
|
|
+ {data.type == 3 &&
|
|
|
+ <span>{!!row.other ? row.other : "申请金额"}</span>
|
|
|
+ }
|
|
|
+
|
|
|
+ </div>;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '金额(元)',
|
|
|
+ dataIndex: "amount",
|
|
|
+ key: "amount",
|
|
|
+ width: 80,
|
|
|
+ render: (value, row, index) => {
|
|
|
+ if (index == newList.length - 2) {
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ rowSpan: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else if (index == newList.length - 1) {
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ rowSpan: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return <span>{value}</span>;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '审核意见',
|
|
|
+ dataIndex: "shyj",
|
|
|
+ key: "shyj",
|
|
|
+ width: 270,
|
|
|
+ render: (value, row, index) => {
|
|
|
+ if (index == 0) {
|
|
|
+ return {
|
|
|
+ children: <div>
|
|
|
+ <ul
|
|
|
+ style={{
|
|
|
+ overflow: "hidden",
|
|
|
+ position: "relative",
|
|
|
+ }}
|
|
|
+ >{logArray.map((item, index) => {
|
|
|
+ return (
|
|
|
+ // 要求只显示通过的审核
|
|
|
+ (item.status == 1 || item.status == 2) &&
|
|
|
+ <li
|
|
|
+ key={item.auditorName}
|
|
|
+ style={{
|
|
|
+ height: "auto",
|
|
|
+ wordBreak: "break-all",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <span>{item.auditorName}:</span>
|
|
|
+ <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][item.status] }}>
|
|
|
+ {["【发起】,", "【通过】,", "【完成】,", "【驳回】,", "【重新发起】,"][item.status]}
|
|
|
+ {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
|
|
|
+ <span style={{ color: "#FFA500" }}> 审核中...</span>}
|
|
|
+ </span>
|
|
|
+ <span>{item.remarks}</span>
|
|
|
+ {/* <span> {item.createTimeStr}</span> */}
|
|
|
+ </li>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </ul>
|
|
|
+ </div>,
|
|
|
+ props: {
|
|
|
+ rowSpan: newList.length - 2,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else if (index == newList.length - 2) {
|
|
|
+ return data.type != 0 && <span>要求付款时间:{data.type == 1 ? moment(data.agreeTimeStr).format('YYYY-MM-DD') : moment(newList[0].agreeTimeStr).format('YYYY-MM-DD')}</span>;
|
|
|
+ } else if (index < newList.length - 1) {
|
|
|
+ return {
|
|
|
+ props: {
|
|
|
+ rowSpan: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ maskClosable={false}
|
|
|
+ visible={true}
|
|
|
+ onOk={false}
|
|
|
+ onCancel={onCancel}
|
|
|
+ width="790px"
|
|
|
+ title={<span style={{ fontWeight: "bold" }}>{"报销详情-" + getAccountName(data.type, data.typeOther)}
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ style={{ marginLeft: 30 }}
|
|
|
+ onClick={() => { this.setState({ isTable: !this.state.isTable }) }}
|
|
|
+ >{this.state.isTable ? "切换列表显示" : "切换表格显示"}</Button>
|
|
|
+ </span>}
|
|
|
+ footer=""
|
|
|
+ >
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ <div className="m_body"
|
|
|
+ ref={(e) => {
|
|
|
+ this.refs.all = e;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {this.state.isTable
|
|
|
+ ? <div className="m_table">
|
|
|
+ <div className="m_title">
|
|
|
+ {getAccountName(data.type, data.typeOther)}
|
|
|
+ {getAccountName(data.type, data.typeOther).indexOf("报销") == -1 ? "报销清单" : "清单"}
|
|
|
+ </div>
|
|
|
+ <div className="m_head">
|
|
|
+ <div>申请部门:{data.appDepName}</div>
|
|
|
+ <div>报销日期:{moment(data.createTimeStr).format('YYYY年MM月DD日')}</div>
|
|
|
+ </div>
|
|
|
+ <Table
|
|
|
+ columns={reimbursement}
|
|
|
+ dataSource={newList}
|
|
|
+ bordered
|
|
|
+ size="middle"
|
|
|
+ pagination={false}
|
|
|
+ />
|
|
|
+ <div className="m_head">
|
|
|
+ <div>报销公司:{data.appDepName}</div>
|
|
|
+ <div>报销人:{data.aname}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ : <Form layout="horizontal" id="demand-form">
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ {data.type == 1 &&
|
|
|
+ <div>
|
|
|
+ <div style={{ fontSize: 13, fontWeight: "bold" }}>公出信息</div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="公出企业"
|
|
|
+ >
|
|
|
+ <span>{data.userNames}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="公出地点"
|
|
|
+ >
|
|
|
+ <span>{data.districtName}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="时间"
|
|
|
+ >
|
|
|
+ <span>{data.releaseStartStr} 至 {data.releaseEndStr}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="公出时长"
|
|
|
+ >
|
|
|
+ <span>{data.duration}小时</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>}
|
|
|
+ <div style={{ fontSize: 13, fontWeight: "bold" }}>申请类型</div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="申请类型"
|
|
|
+ >
|
|
|
+ <span>{getAccountName(data.type, data.typeOther)}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="报销至订单"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div>{data.buyerName}</div>
|
|
|
+ <div>{data.contractNo}</div>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="报销人"
|
|
|
+ >
|
|
|
+ <span>{data.aname}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="报销公司"
|
|
|
+ >
|
|
|
+ <span>{data.appDepName}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+
|
|
|
+ {...formItemLayout}
|
|
|
+ label="支付公司"
|
|
|
+ >
|
|
|
+ <span>{data.payDepName}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
+ wrapperCol={{ span: 18 }}
|
|
|
+ label="报销事由"
|
|
|
+ >
|
|
|
+ <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
|
|
|
+ {data.remarks}
|
|
|
+ </p>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div style={{ fontSize: 13, fontWeight: "bold" }}>费用详细</div>
|
|
|
+ {/* 差旅费显示 */}
|
|
|
+ {data.type == 1 &&
|
|
|
+ list.length > 0 && list.map(item =>
|
|
|
+ item.type == 1
|
|
|
+ ? <div>
|
|
|
+ <div className="clearfix" >
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="交通工具"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ {getVehicleName(item.vehicle, item.vehicleOther)}
|
|
|
+ {/* */}
|
|
|
+ {/* {!!item.startDistrict && <span>({item.startDistrict} ⇀ {item.endDistrict})</span>} */}
|
|
|
+ </span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix" >
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="地点"
|
|
|
+ >
|
|
|
+ <span>{item.startDistrict}
|
|
|
+ <span> ⇀ </span>
|
|
|
+ {item.endDistrict}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
+ wrapperCol={{ span: 18 }}
|
|
|
+ label="时间"
|
|
|
+ >
|
|
|
+ <span>{item.startTimeStr} 至 {item.endTimeStr}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="交通费"
|
|
|
+ >
|
|
|
+ <span>{item.amount}(元)</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ : <div className="clearfix" >
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label={getTypeName(item.type)}
|
|
|
+ >
|
|
|
+ <span>{item.amount}(元)</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ {/* 通用 */}
|
|
|
+ {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
|
|
|
+ list.length > 0 && list.map(item =>
|
|
|
+ <div className="clearfix" >
|
|
|
+ {!!item.agreeTimeStr &&
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label={data.type == 5 ? "支付时间:" : "需付款时间:"}
|
|
|
+ >
|
|
|
+ <span>{item.agreeTimeStr.slice(0, 10)}</span>
|
|
|
+ </FormItem>}
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label={data.type == 4
|
|
|
+ ? "预借支金额:" : data.type == 5
|
|
|
+ ? "抵扣金额:" : "金额:"}
|
|
|
+ >
|
|
|
+ <span>{item.amount}(元)</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ {/* 第三方付款 */}
|
|
|
+ {data.type == 3 &&
|
|
|
+ list.length > 0 && list.map(item =>
|
|
|
+ <div className="clearfix" >
|
|
|
+ {!!item.agreeTimeStr &&
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="需付款时间"
|
|
|
+ >
|
|
|
+ <span>{item.agreeTimeStr.slice(0, 10)}</span>
|
|
|
+ </FormItem>
|
|
|
+ }
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="付款方式"
|
|
|
+ >
|
|
|
+ <span>{["公对公转账"][item.payType]}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="发票类型"
|
|
|
+ >
|
|
|
+ <span>{["普票", "专票"][item.invoiceType]}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="发票号"
|
|
|
+ >
|
|
|
+ <span>{item.invoiceNo}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="付款单位"
|
|
|
+ >
|
|
|
+ <span>{item.payerName}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="开户银行"
|
|
|
+ >
|
|
|
+ <span>{item.openBank}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="银行账户"
|
|
|
+ >
|
|
|
+ <span>{item.bankAccounts}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="开户行地址"
|
|
|
+ >
|
|
|
+ <span>{item.openBankAddress}</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="金额(元)"
|
|
|
+ >
|
|
|
+ <span>{item.amount}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ {data.type != 4 && data.debitTotalAmount &&
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="预借支"
|
|
|
+ >
|
|
|
+ <span style={{ color: "red" }}>{data.debitTotalAmount}(元)</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>}
|
|
|
+
|
|
|
+ {data.type != 4 && data.type != 5 &&
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="总金额"
|
|
|
+ >
|
|
|
+ <span style={{ color: "red" }}>{total}(元)</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>}
|
|
|
+
|
|
|
+ {data.type != 4 && data.type != 5 &&
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="实报金额"
|
|
|
+ >
|
|
|
+ <span style={{ color: "red" }}>{(total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0}(元)</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>}
|
|
|
+
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="附件"
|
|
|
+ >
|
|
|
+ <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
|
|
|
+ {this.state.imgs ? <ImgList fileList={this.state.imgs} ItemWidth={'96px'} /> : <div />}
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div style={{ fontSize: 13, fontWeight: "bold" }}>收款详情</div>
|
|
|
+ {data.type != 3 && data.type != 5 &&
|
|
|
+ <div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="收款人"
|
|
|
+ >
|
|
|
+ <span>{data.name}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="收款银行"
|
|
|
+ >
|
|
|
+ <span>{data.bank}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="收款账户"
|
|
|
+ >
|
|
|
+ <span>{data.accounts}</span>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>}
|
|
|
+ <div style={{ fontSize: 13, fontWeight: "bold" }}>审核意见</div>
|
|
|
+ <ul
|
|
|
+ style={{
|
|
|
+ width: "560px",
|
|
|
+ overflow: "hidden",
|
|
|
+ paddingLeft: "90px",
|
|
|
+ position: "relative",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {logdataSour.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <li
|
|
|
+ key={index}
|
|
|
+ style={{
|
|
|
+ width: "100%",
|
|
|
+ height: "auto",
|
|
|
+ wordBreak: "break-all",
|
|
|
+ marginBottom: "10px",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {/* {item.auditorName + ":" + item.status + item.remarks + "(" + item.createTimeStr + ")"} */}
|
|
|
+ <span>{item.auditorName}:</span>
|
|
|
+ <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][item.status] }}>
|
|
|
+ {["【发起】,", "【通过】,", "【完成】,", "【驳回】,", "【重新发起】,"][item.status]}
|
|
|
+ {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
|
|
|
+ <span style={{ color: "#FFA500" }}> 审核中...</span>}
|
|
|
+ </span>
|
|
|
+ <span>{item.remarks}</span>
|
|
|
+ <span> {item.createTimeStr}</span>
|
|
|
+ </li>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div className="clearfix" style={{ marginTop: 20 }}>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ style={{
|
|
|
+ float: "right",
|
|
|
+ }}
|
|
|
+ onClick={() => {
|
|
|
+ this.setState({
|
|
|
+ logvisible: true
|
|
|
+ })
|
|
|
+ this.getLogData(data.id)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 查看日志
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {this.props.isOperate && data.examine == 1 &&
|
|
|
+ <div className="clearfix"
|
|
|
+ style={{ width: 500, margin: "20px auto" }}>
|
|
|
+ <TextArea
|
|
|
+ rows={4}
|
|
|
+ value={this.state.reason}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({
|
|
|
+ reason: e.target.value,
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ placeholder="请填写审核内容"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ width: 250,
|
|
|
+ display: "flex",
|
|
|
+ justifyContent: "space-between",
|
|
|
+ margin: "20px auto 0"
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Button type="primary"
|
|
|
+ style={{ margin: 4 }}
|
|
|
+ onClick={(e) => {
|
|
|
+ this.setState({
|
|
|
+ checkData: data
|
|
|
+ }, () => {
|
|
|
+ this.toExamine(1)
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >同意</Button>
|
|
|
+ <Button type="danger"
|
|
|
+ style={{ margin: 4 }}
|
|
|
+ onClick={(e) => {
|
|
|
+ this.setState({
|
|
|
+ checkData: data
|
|
|
+ }, () => {
|
|
|
+ this.toExamine(3)
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >驳回</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </Spin>
|
|
|
+ </Form>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </Spin>
|
|
|
+
|
|
|
+ <ReactToPrint
|
|
|
+ trigger={() => (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ style={{
|
|
|
+ float: "right",
|
|
|
+ marginTop: 10,
|
|
|
+ position: "absolute",
|
|
|
+ top: 0,
|
|
|
+ right: 50,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 打印
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ content={() => this.refs.all}
|
|
|
+ bodyClass="print-body"
|
|
|
+ />
|
|
|
+
|
|
|
+ {
|
|
|
+ //审核弹窗
|
|
|
+ this.state.visible != "" &&
|
|
|
+ <Modal
|
|
|
+ width="400px"
|
|
|
+ maskClosable={false}
|
|
|
+ title="审核"
|
|
|
+ confirmLoading={this.state.loading}
|
|
|
+ visible={this.state.visible != ""}
|
|
|
+ onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
|
|
|
+ okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
|
|
|
+ onCancel={() => {
|
|
|
+ this.setState({
|
|
|
+ visible: '',
|
|
|
+ reason: "",
|
|
|
+ checkData: {},
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <TextArea
|
|
|
+ rows={4}
|
|
|
+ value={this.state.reason}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({
|
|
|
+ reason: e.target.value,
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ placeholder="请填写审核内容"
|
|
|
+ />
|
|
|
+ </Modal>
|
|
|
+ }
|
|
|
+
|
|
|
+ {
|
|
|
+ // 审核日志
|
|
|
+ this.state.logvisible &&
|
|
|
+ <Modal
|
|
|
+ visible={this.state.logvisible}
|
|
|
+ className="admin-desc-content"
|
|
|
+ width="800px"
|
|
|
+ maskClosable={false}
|
|
|
+ title="审核日志"
|
|
|
+ footer={null}
|
|
|
+ onCancel={() => {
|
|
|
+ this.setState({
|
|
|
+ logvisible: false,
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div className="patent-table">
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ <Table
|
|
|
+ columns={this.state.logcolumns}
|
|
|
+ dataSource={this.state.logdataSour}
|
|
|
+ pagination={false}
|
|
|
+ bordered
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </Spin>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ }
|
|
|
+
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default AccountDetails;
|