import React, { Component } from "react"; import Taro, { getCurrentInstance } from "@tarojs/taro"; import { Button, Picker, Text, View } from "@tarojs/components"; import dayjs from "dayjs"; import ImagePicker from "../../components/common/imagePicker"; import InquiryModal from "../../components/common/inquiryModal"; import AccountModal from "../../components/common/accountModal"; import Select from "../applyreimbursement/select"; import { AtButton, AtInput, AtModal, AtTextarea, AtModalHeader, AtModalContent, AtRadio, AtModalAction, AtIcon, } from "taro-ui"; import { getPridDetail, getAccountList, selectList, detailsDelete, subAccount, getDepartmentList, } from "../../utils/servers/servers"; import { getNumHourse, getAccountName, getTypeName, getVehicleName, commonAdd, getNewOptions, removeNull, } from "../../utils/tools"; import { resourceAddress } from "../../utils/config"; import "taro-ui/dist/style/components/form.scss"; import "taro-ui/dist/style/components/button.scss"; import "taro-ui/dist/style/components/loading.scss"; import "taro-ui/dist/style/components/icon.scss"; import "taro-ui/dist/style/components/textarea.scss"; import "taro-ui/dist/style/components/input.scss"; import "./index.less"; import NewModal from "./modal" class Drafts extends Component { $instance = getCurrentInstance(); constructor(props) { super(props); this.state = { imgs: [], data: {}, visible: "", list: [], total: 0, reality: 0, accountvisible: "", typeVisible: "", bankData: {}, upaccount: false, accountsList: [], isShow: false, }; this.onChange = this.onChange.bind(this); this.getNumHourse = this.getNumHourse.bind(this); } componentDidMount() { this.getDepartmentList() this.$instance.router.params && this.$instance.router.params.id && ( this.getDetail(), this.state.data.type != 2 && this.getMyList() ) } componentDidShow() { // 对应onShow,只有在onShow中才会监听到当前页面的改变 let pages = Taro.getCurrentPages(); let currPage = pages[pages.length - 1]; // 获取当前页面 // this.setState({ // orderName: currPage.data.name, // contractNo: currPage.data.contractNo, // orderNo: currPage.data.orderNo, // debitId: currPage.data.debitId, // totalAmount: currPage.data.totalAmount || 0, // }) const { data } = this.state const obj = { buyerName: currPage.data.name || data.buyerName, contractNo: currPage.data.contractNo || data.contractNo, orderNo: currPage.data.orderNo || data.orderNo, debitId: currPage.data.debitId || data.debitId, debitTotalAmount: currPage.data.totalAmount || data.debitTotalAmount || 0, } this.setState({ data: { ...this.state.data, ...obj }, }) this.getAccountList(); } // 部门数据 getDepartmentList() { getDepartmentList({}).then(v => { let thedata = v.data; let theArr = []; if (!thedata) { if (v.error && v.error.length) { Taro.showToast({ title: v.error[0].message, icon: 'none' }) } } else { thedata.map(function (item, index) { theArr.push({ key: index, name: item.name, id: item.id }); }); } this.setState({ departmentArr: theArr }); }).catch(() => { Taro.showToast({ title: '系统错误,请稍后再试', icon: 'none' }) }) } // 图片上传操作 onChange(value, type) { let arr = this.state.imgs.concat([]); if (type === "add") { arr.push(value); } else if (type === "remove") { arr.splice(value, 1); } this.setState({ imgs: arr, }); } onInputChange(title, value) { } // 取消添加 onAccountClose() { this.setState({ accountvisible: "", }) } // 添加收款账户 onAccountOk() { this.setState({ accountvisible: "", }, () => { this.getMyList() }) } // 类型修改 取消 onTypeClose() { this.setState({ typeVisible: "", }) } // 类型修改 确定 onTypeOk(type, typeOther) { const oldType = this.state.data.type const oldTypeOther = this.state.data.typeOther if ((oldType == type) && (typeOther == oldTypeOther)) { this.setState({ typeVisible: "", }) } else { let data = { updateType: 1, id: this.$instance.router.params.id, type, typeOther, } subAccount(removeNull(data)) .then((v) => { if (v.error.length === 0) { this.getAccountList() // 手动刷新 const obj = { type, typeOther } this.setState({ data: { ...this.state.data, ...obj }, typeVisible: "", }) Taro.showToast({ title: "修改成功!", icon: "none", }); } else { Taro.showToast({ title: v.error[0].message, icon: "none", }); } }) .catch(() => { }); } } // 费用弹窗 onClose() { this.setState({ visible: "", }) this.getAccountList() } // 报销账户列表 getMyList(sta) { let data1 = { status: 1 } let data2 = { pageNo: 1, pageSize: 99, } selectList(sta ? data2 : data1).then(v => { if (v.error.length === 0) { let list = v.data.list || [] if (list?.length > 0) { if (sta) { this.setState({ accountsList: list }) } else { this.setState({ bankData: list[0], }) } } } else { Taro.showToast({ title: v.error[0].message, icon: 'none' }) } }).catch(() => { Taro.showToast({ title: '系统错误,请稍后再试', icon: 'none' }) }) } // 确认收款账户 selectOn() { let list = this.state.accountsList for (var i = 0; i < list.length; i++) { if (list[i].id == this.state.aid) { this.setState({ upaccount: false, bankData: list[i] }) } } } // 报销单详情 getDetail() { getPridDetail({ id: this.$instance.router.params.id, }).then(v => { if (v.error.length === 0) { let list = []; for (let i of (v.data.attachmentUrl || '').split(',')) { if (i) { list.push({ 'url': resourceAddress + i }) } } this.setState({ data: v.data, rangeStartMinuteVal: v.data.releaseStartStr, rangeEndMinuteVal: v.data.releaseEndStr, totalDuration: v.data.duration, imgs: list, }) this.getAccountList() } else { Taro.showToast({ title: v.error[0].message, icon: 'none' }) } }).catch(() => { Taro.showToast({ title: '系统错误,请稍后再试', icon: 'none' }) }) } // 报销详情金额列表 getAccountList() { const { data } = this.state getAccountList({ eaid: this.$instance.router.params.id, }).then(v => { if (v.error.length === 0) { let sum = 0 for (var i = 0; i < v.data.length; i++) { // sum += v.data[i].amount sum = commonAdd(sum, v.data[i].amount) } let reality = (sum > data.debitTotalAmount) ? commonAdd(sum, -data.debitTotalAmount) : 0 this.setState({ list: v.data, total: sum, reality, }) } else { Taro.showToast({ title: v.error[0].message, icon: 'none' }) } }).catch(() => { Taro.showToast({ title: '系统错误,请稍后再试', icon: 'none' }) }).finally(() => { console.log("zzz") this.setState({ isShow: true }) }) } // 删除报销详情 detailsDelete(id) { detailsDelete({ id, }).then(v => { if (v.error.length === 0) { Taro.showToast({ title: "操作成功", icon: 'none' }) this.getAccountList() } else { Taro.showToast({ title: v.error[0].message, icon: 'none' }) } }).catch(() => { Taro.showToast({ title: '系统错误,请稍后再试', icon: 'none' }) }) } onSubmit() { const { data, bankData } = this.state if (data.type == 1) { if (!data.userNames) { Taro.showToast({ title: "请填写公出客户名称", icon: "none" }); return; } if (!data.districtName) { Taro.showToast({ title: "请填写公出地点", icon: "none" }); return; } if (!this.state.rangeStartMinuteVal) { Taro.showToast({ title: "请选择公出时间", icon: "none" }); return; } if (!this.state.rangeEndMinuteVal) { Taro.showToast({ title: "请选择公出时间", icon: "none" }); return; } } if (!data.remarks) { Taro.showToast({ title: "请填写报销事由", icon: "none" }); return; } this.setState({ loading: true, }); let comData = { updateType: 0, id: this.$instance.router.params.id, status: 1, // 提交审核 type: data.type, // 报销类型 typeOther: data.type == 0 ? data.typeOther : undefined, // 其他类型 remarks: data.remarks, // 报销事由 applyDep: data.applyDep, // 申请部门 attachmentUrl: this.state.imgs.length === 0 ? "" : this.state.imgs.join(","), // 附件 payDep: (data.type == 4 || data.type == 5) ? undefined : data.payDep, // 支付部门(借支抵扣不需要) orderNo: (data.type == 4 || data.type == 5) ? undefined : data.orderNo, // 订单编号(借支抵扣不需要) debitId: (data.type == 4 || data.type == 5) ? undefined : data.debitId, // 预支单 eaaid: data.type != 3 ? bankData.id : undefined, // 报销账户(第三方付款不需要) // 差旅费 userNames: data.type == 1 ? data.userNames : undefined, // 公出客户名称 districtName: data.type == 1 ? data.districtName : undefined, // 公出地点 releaseStart: data.type == 1 ? this.state.rangeStartMinuteVal : undefined, // 开始时间 releaseEnd: data.type == 1 ? this.state.rangeEndMinuteVal : undefined, // 结束时间 duration: data.type == 1 ? this.state.totalDuration : undefined, // 公出时长 } subAccount(removeNull(comData)) .then((v) => { this.setState({ loading: false, }) if (v.error.length === 0) { Taro.showToast({ title: "提交成功!", icon: "none", }); Taro.switchTab({ url: "/pages/recordlist/index", }); } else { Taro.showToast({ title: v.error[0].message, icon: "none", }); } }) .catch(() => { this.setState({ loading: false, }); }); } getNumHourse(startTime, endTime) { this.setState({ totalDuration: getNumHourse( startTime, endTime, this.state.validDates.length ), }); } onPickerHide() { this.setState({ isPickerRender: false, }); } onSetPickerTime(val) { let data = val.detail; this.setState({ rangeStartMinuteVal: data.selectStartTime, rangeEndMinuteVal: data.selectEndTime, }); let arr = []; if (data.startTime && data.endTime) { let a = dayjs(data.startTime); let b = dayjs(data.endTime); let num; if (a.hour() <= b.hour()) { num = b.diff(a, "day") + 1; } else { num = b.diff(a, "day") + 2; } let strAdd = data.startTime; for (let i = 0; i < num; i++) { let time = dayjs(strAdd).add(i, "days").format("YYYY-MM-DD"); arr.push({ value: time }); } } this.setState({ rangeEndVal: dayjs(data.endTime).format("YYYY-MM-DD"), rangeStartVal: dayjs(data.startTime).format("YYYY-MM-DD"), validDates: arr, }, () => { let a1 = dayjs(dayjs(data.endTime).format("YYYY-MM-DD HH:mm:ss")); let b1 = dayjs(dayjs(data.startTime).format("YYYY-MM-DD HH:mm:ss")); this.getNumHourse(b1, a1); }); } render() { const { data, list, total, bankData, } = this.state const departmentArr = this.state.departmentArr || []; return ( {getAccountName(data.type, data.typeOther)} {data.type == 1 && { data.userNames = e }} /> } {data.type == 1 && { data.districtName = e }} /> } {data.type == 1 && 公出时间: { this.setState({ isPickerRender: true, }); }} > {this.state.rangeStartMinuteVal && this.state.rangeEndMinuteVal ? ( {this.state.rangeStartMinuteVal}   至   {this.state.rangeEndMinuteVal} ) : ( "请选择时间" )} { let a = dayjs( dayjs(v.detail.endTime) .second(0) .format("YYYY-MM-DD HH:mm:ss") ); }} onhidepicker={() => { this.onPickerHide(); }} onsetpickertime={(v) => { this.onSetPickerTime(v); }} /> } {data.type == 1 && 公出时长: {this.state.totalDuration}小时 } 申请类型: { this.setState({ isInquiryOpened: true, inquiryTitle: "温馨提示", inquiryContent: "您是否需要重新选择费用类型?原报销数据将清空后,需重新填写!!!", inquiryFn: () => { this.setState({ typeVisible: "edit" }) }, }); }}> {getAccountName(data.type, data.typeOther)} {data.type != 4 && data.type != 5 && 报销至订单: { Taro.navigateTo({ url: "/pages/dataindex/index" }) }}> {data.buyerName} {data.contractNo} } 报销详细 申请人: {data.aname} { data.type != 4 && data.type != 5 && 报销公司: item.id === data.applyDep)} range={departmentArr} rangeKey='name' mode='selector' onChange={(e) => { const obj = { applyDep: departmentArr[e.detail.value].id, appDepName: departmentArr[e.detail.value].name } this.setState({ data: { ...data, ...obj }, }) }}> {data.appDepName} } 支付公司: item.id === data.payDep)} range={departmentArr} rangeKey='name' mode='selector' onChange={(e) => { const obj = { payDep: departmentArr[e.detail.value].id, payDepName: departmentArr[e.detail.value].name } this.setState({ data: { ...data, ...obj }, }) }}> {data.payDepName} 报销事由: { const obj = { remarks: e } this.setState({ data: { ...data, ...obj } }) }} height={75} maxLength={50} placeholder="请填写报销事由" /> 报销费用详细 {this.state.visible != "" && } {/* 差旅费显示 */} {data.type == 1 && list?.map(item => item.type == 1 ? { this.setState({ isInquiryOpened: true, inquiryTitle: "提醒", inquiryContent: "您确定要删除吗?", inquiryFn: () => { this.detailsDelete(item.id); }, }); }} >删除 {/* 编辑 */} 交通工具: {getVehicleName(item.vehicle, item.vehicleOther)} 时间: {item.startTimeStr}   至   {item.endTimeStr} 地点: {item.startDistrict}   至   {item.endDistrict} 金额: {item.amount}(元) : (元) { this.setState({ isInquiryOpened: true, inquiryTitle: "提醒", inquiryContent: "您确定要删除吗?", inquiryFn: () => { this.detailsDelete(item.id); }, }); }} >删除 ) } {/* 通用 */} {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) && list?.map(item => { this.setState({ isInquiryOpened: true, inquiryTitle: "提醒", inquiryContent: "您确定要删除吗?", inquiryFn: () => { this.detailsDelete(item.id); }, }); }} >删除 {/* 编辑 */} 需付款时间: {item.agreeTimeStr.slice(0, 10)} 金额: {item.amount}(元) ) } {/* 第三方付款 */} {data.type == 3 && list?.map(item => { this.setState({ isInquiryOpened: true, inquiryTitle: "提醒", inquiryContent: "您确定要删除吗?", inquiryFn: () => { this.detailsDelete(item.id); }, }); }} >删除 {/* 编辑 */} 需付款时间: {item.agreeTimeStr.slice(0, 10)} 付款方式: {["公对公转账"][item.payType]} 发票类型: {["普票", "专票"][item.invoiceType]} 发票号: {item.invoiceNo} 付款单位: {item.payerName} 开户银行: {item.openBank} 银行账户: {item.bankAccounts} 开户行地址: {item.openBankAddress} 金额: {item.amount} ) } { data.type != 4 && data.type != 5 && 预借支: { Taro.navigateTo({ url: `/pages/debitnote/index?depId=${data.applyDep}` }) }} > {!data.debitId ? : {`已选择${data.debitTotalAmount}元借支订单`}} } 总金额: {total}(元) 实报金额: {this.state.reality}(元) 附件: {this.state.isShow && (this.imagePickerRef = ref)} url="/api/admin/release/upload" onChange={this.onChange} />} 上传附件要求 ①需要提供发票报销 ②需要填写报销明细表 ③招待费需要提供报备截图 {data.type != 3 && 报销收款账户 } {data.type != 3 && {(!bankData.id) ? { this.setState({ accountvisible: true }) }}> 暂未有收款账户 去添加 > : { this.setState({ upaccount: true, aid: bankData.id, }, () => { this.getMyList(true) }) }} >修改 收款人:{bankData.name} 收款银行:{bankData.bank} 收款账户:{bankData.accounts} } } { this.onSubmit() }} > {data.status == 0 ? "提交申请" : data.status == 3 && "重新发起"} {/* 二级确认弹窗 */} { this.setState({ isInquiryOpened: false, inquiryTitle: "", inquiryContent: "", isNo: true, }); }} onDetermine={() => { this.state.inquiryFn(); this.setState({ isInquiryOpened: false, inquiryTitle: "", inquiryContent: "", isNo: true, inquiryFn: () => { }, }); }} /> {/* 收款账户添加 */} {this.state.accountvisible != "" && } {/* 收款账户列表 */} 请选择收款账户 { this.setState({ aid: e }) }} /> {/* 申请类型修改 */} {this.state.typeVisible != "" &&