| | |
| | | @confirm="confirm"> |
| | | <div class="home_title"> |
| | | <div class="left"> |
| | | <span class="mr10">付款方:xxx</span> |
| | | <el-tag type="success">status</el-tag> |
| | | <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> |
| | | <el-button plain type="primary" @click="$refs.flowingWater.open('创建收支流水')">新建收支流水</el-button> |
| | | <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;">已结清</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;">1,000.00</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;">1,000.00</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;">1,000.00</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;">2024-11-16</div> |
| | | <div class="val" style="margin-top: 10px;">{{info.planPayDate}}</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 == 1 }" @click="tabsClick(1)">账单明细</div>--> |
| | | <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div> |
| | | </div> |
| | | <div class="main"> |
| | |
| | | <div class="list" style="background: rgba(0,0,0,0); padding: 0;"> |
| | | <div class="item"> |
| | | <div class="la">账单类型</div> |
| | | <div class="val">租金</div> |
| | | <div class="val" v-if="info.billType === 0">收款</div> |
| | | <div class="val" v-if="info.billType === 1">付款</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">计费周期</div> |
| | | <div class="val">2024-11-17 ~ 2025-11-17</div> |
| | | <div class="val">{{info.startDate}} ~ {{info.endDate}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">账单金额(元)</div> |
| | | <div class="val">10000.00</div> |
| | | <div class="val">{{info.totleFee}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">账单编号</div> |
| | | <div class="val">ZD20241117-0002</div> |
| | | <div class="val">{{info.code}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">合同编号</div> |
| | | <div class="val">202411-0017</div> |
| | | <div class="val">{{info.contractCode}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">创建时间</div> |
| | | <div class="val">2024-11-16 15:17:01</div> |
| | | <div class="val">{{info.createDate}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">付款方</div> |
| | | <div class="val">XX公司</div> |
| | | <div class="val">{{info.customerName}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">经办人</div> |
| | |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">所属公司</div> |
| | | <div class="val">XXX有限公司</div> |
| | | <div class="val">{{info.companyName}}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">账单备注</div> |
| | | <div class="val">这是备注内容</div> |
| | | <div class="val">{{info.remark}}</div> |
| | | </div> |
| | | <div class="item"></div> |
| | | <div class="item"></div> |
| | |
| | | <div class="title">房源信息</div> |
| | | <div class="list" style="background: rgba(0,0,0,0); padding: 0;"> |
| | | <el-table |
| | | :data="tableData" |
| | | :data="info.ywContractRoomList" |
| | | border |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="date" |
| | | prop="projectName" |
| | | label="项目名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | prop="floorName" |
| | | label="楼宇名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="楼层/房号"> |
| | | <template slot-scope="{row}"> |
| | | {{row.buildingName}}/{{row.roomName}} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="area" |
| | | 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 |
| | | :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--> |
| | | <!-- :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 |
| | | :data="tableData" |
| | | :data="info.ywContractRevenueList" |
| | | border |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="流水类型"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.revenueType === 0">收入</span> |
| | | <span v-if="row.revenueType === 1">支出</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | prop="customerName" |
| | | label="对方单位名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="费用类型"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.payType === 0">现金</span> |
| | | <span v-if="row.payType === 1">网银转账</span> |
| | | <span v-if="row.payType === 2">POS机</span> |
| | | <span v-if="row.payType === 3">支付宝</span> |
| | | <span v-if="row.payType === 4">微信</span> |
| | | <span v-if="row.payType === 5">转账支票</span> |
| | | <span v-if="row.payType === 6">其他</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="payDateEnd" |
| | | label="入账日期"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="actReceivableFee" |
| | | label="发生额"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="createDate" |
| | | label="创建时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="remark" |
| | | label="备注"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <!-- 创建流水 --> |
| | | <FlowingWater ref="flowingWater" /> |
| | | <FlowingWater ref="flowingWater" @success="getDetails" /> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import FlowingWater from './flowingWater' |
| | | import { getYwContractBillById } from '@/api/contract' |
| | | export default { |
| | | components: { |
| | | GlobalWindow, |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | open (title, id) { |
| | | this.title = title |
| | | this.id = id |
| | | this.getDetails() |
| | | }, |
| | | getDetails () { |
| | | getYwContractBillById(this.id) |
| | | .then(res => { |
| | | this.info = res |
| | | this.visible = true |
| | | }) |
| | | }, |
| | | tabsClick(val) { |
| | | this.activeTabs = val |
| | | }, |
| | | getDetail() { |
| | | |
| | | returnText (e) { |
| | | if (e === 0) { |
| | | return '租赁费' |
| | | } else if (e === 1) { |
| | | return '物业费' |
| | | } else if (e === 2) { |
| | | return '租赁押金' |
| | | } else if (e === 3) { |
| | | return '物业押金' |
| | | } else if (e === 4) { |
| | | return '水电费' |
| | | } else if (e === 5) { |
| | | return '杂项费' |
| | | } else if (e === 6) { |
| | | return '其他' |
| | | } else if (e === 7) { |
| | | return '保证金' |
| | | } |
| | | } |
| | | } |
| | | } |