|  |  |  | 
|---|
|  |  |  | <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="success" 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(info.billType === 0 ? '创建收款账单' : '创建付款账单', { | 
|---|
|  |  |  | billType: info.billType, | 
|---|
|  |  |  | billId: info.id, | 
|---|
|  |  |  | costType: info.costType, | 
|---|
|  |  |  | 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">应收金额(元)</div> | 
|---|
|  |  |  | <div class="val" style="margin-top: 10px;">{{info.receivableFee}}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item" style="flex: 1;"> | 
|---|
|  |  |  | <div class="la">实收金额(元)</div> | 
|---|
|  |  |  | <div class="val" style="margin-top: 10px;">{{info.actReceivableFee}}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item" style="flex: 1;"> | 
|---|
|  |  |  | <div class="la">需付金额(元)</div> | 
|---|
|  |  |  | <div class="val" style="margin-top: 10px;">{{info.needReceivableFee}}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item" style="flex: 1;"> | 
|---|
|  |  |  | <div class="la">应收日期</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 class="list" style="background: rgba(0,0,0,0); padding: 0;"> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <div class="la">账单类型</div> | 
|---|
|  |  |  | <div class="val" v-if="info.billType === 0">收款</div> | 
|---|
|  |  |  | <div class="val" v-if="info.billType === 1">付款</div> | 
|---|
|  |  |  | <div class="la">费用类型</div> | 
|---|
|  |  |  | <div class="val">{{returnText(info.costType)}}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <div class="la">计费周期</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> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <div class="la">经办人</div> | 
|---|
|  |  |  | <div class="val">张三</div> | 
|---|
|  |  |  | <div class="val">{{info.realname}}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <div class="la">所属公司</div> | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="area" | 
|---|
|  |  |  | label="面积"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | {{row.area}}㎡ | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <!--      <div class="title">账单明细</div>--> | 
|---|
|  |  |  | <!--      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">--> | 
|---|
|  |  |  | <!--        <el-table--> | 
|---|
|  |  |  | <!--          :data="tableData"--> | 
|---|
|  |  |  | <!--          border--> | 
|---|
|  |  |  | <!--          style="width: 100%">--> | 
|---|
|  |  |  | <!--          <el-table-column--> | 
|---|
|  |  |  | <!--            prop="date"--> | 
|---|
|  |  |  | <!--            label="费用类型">--> | 
|---|
|  |  |  | <!--          </el-table-column>--> | 
|---|
|  |  |  | <!--          <el-table-column--> | 
|---|
|  |  |  | <!--            prop="name"--> | 
|---|
|  |  |  | <!--            label="应收/付金额">--> | 
|---|
|  |  |  | <!--          </el-table-column>--> | 
|---|
|  |  |  | <!--          <el-table-column--> | 
|---|
|  |  |  | <!--            prop="address"--> | 
|---|
|  |  |  | <!--            label="实收金额">--> | 
|---|
|  |  |  | <!--          </el-table-column>--> | 
|---|
|  |  |  | <!--          <el-table-column--> | 
|---|
|  |  |  | <!--            prop="address"--> | 
|---|
|  |  |  | <!--            label="需收金额">--> | 
|---|
|  |  |  | <!--          </el-table-column>--> | 
|---|
|  |  |  | <!--          <el-table-column--> | 
|---|
|  |  |  | <!--            prop="address"--> | 
|---|
|  |  |  | <!--            label="计费周期">--> | 
|---|
|  |  |  | <!--          </el-table-column>--> | 
|---|
|  |  |  | <!--          <el-table-column--> | 
|---|
|  |  |  | <!--            prop="address"--> | 
|---|
|  |  |  | <!--            label="应收/付日期">--> | 
|---|
|  |  |  | <!--          </el-table-column>--> | 
|---|
|  |  |  | <!--          <el-table-column--> | 
|---|
|  |  |  | <!--            prop="address"--> | 
|---|
|  |  |  | <!--            label="备注">--> | 
|---|
|  |  |  | <!--          </el-table-column>--> | 
|---|
|  |  |  | <!--        </el-table>--> | 
|---|
|  |  |  | <!--      </div>--> | 
|---|
|  |  |  | <div class="title">收支流水</div> | 
|---|
|  |  |  | <div class="list" style="background: rgba(0,0,0,0); padding: 0;"> | 
|---|
|  |  |  | <el-table | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="payDateEnd" | 
|---|
|  |  |  | prop="actPayDate" | 
|---|
|  |  |  | label="入账日期"> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <!--  创建流水  --> | 
|---|
|  |  |  | <FlowingWater ref="flowingWater" @success="getDetails" /> | 
|---|
|  |  |  | <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') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tabsClick(val) { | 
|---|
|  |  |  | this.activeTabs = val | 
|---|
|  |  |  | }, | 
|---|