| | |
| | | <template> |
| | | <GlobalWindow :title="'账单详情'" :visible.sync="visible" :confirm-working="isWorking" @close="close" |
| | | @confirm="confirm"> |
| | | <div class="home_title"> |
| | | <div class="left"> |
| | | <span class="mr10">付款方:{{info.customerName}}</span> |
| | | <el-tag type="success" v-if="info.status === 0">开启</el-tag> |
| | | <el-tag type="info" v-if="info.status === 1">关闭</el-tag> |
| | | <div style="width: 100%; position: sticky; top: 0; left: 0; z-index: 999; background: #ffffff;"> |
| | | <div class="home_title"> |
| | | <div class="left"> |
| | | <span class="mr10">付款方:{{info.customerName}}</span> |
| | | <el-tag type="success" v-if="info.status === 0">开启</el-tag> |
| | | <el-tag type="info" v-if="info.status === 1">关闭</el-tag> |
| | | </div> |
| | | <el-button plain type="primary" v-if="![1].includes(info.payStatus)" @click="$refs.flowingWater.open('创建收支流水', { |
| | | billType: returnBillType(), |
| | | billId: info.id, |
| | | costType: info.costType, |
| | | receivableFee: Math.abs(info.needReceivableFee), |
| | | costTypeName: returnText(info.costType), |
| | | contractCode: info.contractCode, |
| | | contractId: info.contractId, |
| | | startDate: info.startDate, |
| | | endDate: info.endDate, |
| | | multifileList: [], |
| | | date: `${info.startDate} ~ ${info.endDate}`, |
| | | companyId: info.companyId, |
| | | companyName: info.companyName, |
| | | actReceivableFee: Math.abs(info.needReceivableFee), |
| | | needReceivableFeeCopy: info.needReceivableFee |
| | | })">新建收支流水</el-button> |
| | | </div> |
| | | <el-button plain type="primary" @click="$refs.flowingWater.open('创建收支流水', { |
| | | billType: info.billType, |
| | | billId: info.id, |
| | | costType: info.costType, |
| | | receivableFee: info.needReceivableFee, |
| | | costTypeName: returnText(info.costType), |
| | | contractCode: info.contractCode, |
| | | contractId: info.contractId, |
| | | startDate: info.startDate, |
| | | endDate: info.endDate, |
| | | multifileList: [], |
| | | date: `${info.startDate} ~ ${info.endDate}`, |
| | | companyId: info.companyId, |
| | | companyName: info.companyName, |
| | | actReceivableFee: info.actReceivableFee |
| | | })">新建收支流水</el-button> |
| | | </div> |
| | | <div class="line"></div> |
| | | <div class="main"> |
| | | <div class="list" style="background: rgba(0,0,0,0); padding: 0; margin-bottom: 0;"> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">结清状态</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 0">待收款</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 1">已结清</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 2">部分结清</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 3">待付款</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 4">待退款</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 5">已关闭</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">应{{info.billType === 0 ? '收' : '付'}}金额(元)</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.receivableFee}}</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">实{{info.billType === 0 ? '收' : '付'}}金额(元)</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.actReceivableFee}}</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">需{{info.billType === 0 ? '收' : '付'}}金额(元)</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.needReceivableFee}}</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">应{{info.billType === 0 ? '收' : '付'}}日期</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.planPayDate}}</div> |
| | | <div class="line"></div> |
| | | <div class="main"> |
| | | <div class="list" style="background: rgba(0,0,0,0); padding: 0; margin-bottom: 0;"> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">结清状态</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 0">待收款</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 1">已结清</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 2">部分结清</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 3">待付款</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 4">待退款</div> |
| | | <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 5">已关闭</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">应{{info.billType === 0 ? '收' : '付'}}金额(元)</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.receivableFee}}</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">实{{info.billType === 0 ? '收' : '付'}}金额(元)</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.actReceivableFee}}</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <template v-if="info.billType === 1"> |
| | | <div class="la">需付金额(元)</div> |
| | | </template> |
| | | <div class="la" v-else>需{{info.needReceivableFee > 0 ? '收' : '付'}}金额(元)</div> |
| | | <div class="val" style="margin-top: 10px;">{{Math.abs(info.needReceivableFee)}}</div> |
| | | </div> |
| | | <div class="item" style="flex: 1;"> |
| | | <div class="la">应{{info.billType === 0 ? '收' : '付'}}日期</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.planPayDate}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">基础信息</div> |
| | | <!-- <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">账单明细</div>--> |
| | | <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">基础信息</div> |
| | | <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div> |
| | | </div> |
| | | </div> |
| | | <div class="main"> |
| | | <div class="title">基础信息</div> |
| | |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">合同编号</div> |
| | | <div class="val">{{info.contractCode}}</div> |
| | | <div class="val" style="color: #2080f7; cursor: pointer;" @click="handleDetail(info.contractId)">{{info.contractCode}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">创建时间</div> |
| | |
| | | </div> |
| | | <!-- 创建流水 --> |
| | | <FlowingWater ref="flowingWater" @success="getDetails" @refresh="Refresh" /> |
| | | <!-- 合同详情 --> |
| | | <ContractDetail ref="ContractDetailRef" /> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import FlowingWater from './flowingWater' |
| | | import ContractDetail from '../../contract/components/contractDetail' |
| | | import { getYwContractBillById } from '@/api/contract' |
| | | export default { |
| | | components: { |
| | | GlobalWindow, |
| | | FlowingWater |
| | | FlowingWater, |
| | | ContractDetail |
| | | }, |
| | | extends: BaseOpera, |
| | | data() { |
| | |
| | | this.id = id |
| | | this.getDetails() |
| | | }, |
| | | handleDetail (id) { |
| | | this.$refs.ContractDetailRef.open('合同详情', id) |
| | | }, |
| | | getDetails () { |
| | | getYwContractBillById(this.id) |
| | | .then(res => { |
| | |
| | | this.visible = true |
| | | }) |
| | | }, |
| | | returnBillType () { |
| | | if (this.info.payStatus === 0) { |
| | | return 0 |
| | | } else if (this.info.payStatus === 2) { |
| | | return this.info.billType |
| | | } else if ([3,4].includes(this.info.payStatus)) { |
| | | return 1 |
| | | } |
| | | }, |
| | | Refresh () { |
| | | this.$emit('success') |
| | | }, |