|  |  | 
 |  |  |   <GlobalWindow | 
 |  |  |     :title="title" | 
 |  |  |     :visible.sync="visible" | 
 |  |  |     :withFooter="false" | 
 |  |  |     :confirm-working="isWorking" | 
 |  |  |     @close="close" | 
 |  |  |     @confirm="confirm"> | 
 |  |  |     <div class="home_title" v-if="info"> | 
 |  |  |       <div class="left"> | 
 |  |  |         <span class="mr10">单位名称:{{info.renterName}}</span> | 
 |  |  |         <el-tag type="success" v-if="info.status === 0">待执行</el-tag> | 
 |  |  |         <el-tag type="success" v-if="info.status === 1">执行中</el-tag> | 
 |  |  |         <el-tag type="success" v-if="info.status === 2">已到期</el-tag> | 
 |  |  |         <el-tag type="success" v-if="info.status === 3">已退租</el-tag> | 
 |  |  |     <div style="width: 100%; position: sticky; top: 0; left: 0; z-index: 999; background: #ffffff;"> | 
 |  |  |       <div class="home_title" v-if="info"> | 
 |  |  |         <div class="left"> | 
 |  |  |           <span class="mr10">单位名称:{{info.renterName}}</span> | 
 |  |  |           <el-tag type="success" v-if="info.status === 0">待执行</el-tag> | 
 |  |  |           <el-tag type="success" v-if="info.status === 1">正常执行中</el-tag> | 
 |  |  |           <el-tag type="info" v-if="info.status === 2">已到期</el-tag> | 
 |  |  |           <el-tag type="info" v-if="info.status === 3">退租结算中</el-tag> | 
 |  |  |           <el-tag type="info" v-if="info.status === 4">已退租</el-tag> | 
 |  |  |         </div> | 
 |  |  |         <el-button plain type="danger" v-if="[0, 1, 2].includes(info.status)" @click="refund">退租</el-button> | 
 |  |  |       </div> | 
 |  |  |       <el-button plain type="danger" v-if="[0, 1, 2].includes(info.status)" @click="refund">退租</el-button> | 
 |  |  |     </div> | 
 |  |  |     <div class="remark" v-if="info">{{info.remark}}</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="remark" v-if="info">{{info.remark}}</div> | 
 |  |  |       <div class="remark" v-if="info && info.status === 3">{{info.btRemark}}</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> | 
 |  |  |     </div> | 
 |  |  |     <div class="main" v-if="activeTabs === 0 && info"> | 
 |  |  |       <div class="title">基础信息</div> | 
 |  |  | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">合同租赁数</div> | 
 |  |  |           <div class="val">{{ info.totalArea }}</div> | 
 |  |  |           <div class="val">{{ info.totalArea }}㎡</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">所属公司</div> | 
 |  |  | 
 |  |  |       <div class="list" style="background: #F7F7F7; padding: 15px 20px;" v-if="info.type === 2 || info.type === 0"> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">押金金额</div> | 
 |  |  |           <div class="val">{{ info.zlDeposit }}</div> | 
 |  |  |           <div class="val">{{ info.zlDeposit }}元</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">付款方式</div> | 
 |  |  | 
 |  |  |       <el-table :data="info.zlDetailList" stripe style="margin-bottom: 20px;" v-if="info.type === 2 || info.type === 0"> | 
 |  |  |         <el-table-column prop="startDate" label="开始日期" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="endDate" label="结束日期" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="price" label="合同单价" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="advanceDays" label="付款提前天数" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column label="合同单价" min-width="100" show-overflow-tooltip> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             {{row.price}} {{returnUnit(row.circleType)}} | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column label="付款提前天数" min-width="100" show-overflow-tooltip> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             {{row.advanceDays}}天 | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |       </el-table> | 
 |  |  |       <div class="title" v-if="info.type === 1 || info.type === 0">物业费条款</div> | 
 |  |  |       <div class="list" style="background: #F7F7F7; padding: 15px 20px;" v-if="info.type === 1 || info.type === 0"> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">押金金额</div> | 
 |  |  |           <div class="val">{{ info.wyDeposit }}</div> | 
 |  |  |           <div class="val">{{ info.wyDeposit }}元</div> | 
 |  |  |         </div> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="la">付款方式</div> | 
 |  |  | 
 |  |  |       <el-table :data="info.wyDetailList" stripe style="margin-bottom: 20px;" v-if="info.type === 1 || info.type === 0"> | 
 |  |  |         <el-table-column prop="startDate" label="开始日期" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="endDate" label="结束日期" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="price" label="合同单价" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="advanceDays" label="付款提前天数" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column label="合同单价" min-width="100" show-overflow-tooltip> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             {{row.price}} {{returnUnit(row.circleType)}} | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column label="付款提前天数" min-width="100" show-overflow-tooltip> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             {{row.advanceDays}}天 | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |       </el-table> | 
 |  |  |       <div class="title">合同附件</div> | 
 |  |  |       <div class="list"> | 
 |  |  |         <el-table :data="info.fileList" stripe> | 
 |  |  |           <el-table-column prop="name" label="附件名称" show-overflow-tooltip /> | 
 |  |  |           <el-table-column label="附件名称" show-overflow-tooltip> | 
 |  |  |             <template slot-scope="{row}"> | 
 |  |  |               <u style="color: #0c6ce3; cursor: pointer;" @click="xiazai(row.fileurlFull)">{{row.name}}</u> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column prop="userName" label="操作人" show-overflow-tooltip /> | 
 |  |  |           <el-table-column prop="createDate" label="操作时间" show-overflow-tooltip /> | 
 |  |  |         </el-table> | 
 |  |  | 
 |  |  |           label="账单金额"> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           :key="Date.now()" | 
 |  |  |           prop="receivableFee" | 
 |  |  |           label="应收金额"> | 
 |  |  |           :label="`应${type === 0 ? '收' : '付'}金额`"> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           prop="actReceivableFee" | 
 |  |  |           label="实收金额"> | 
 |  |  |           :label="`实${type === 0 ? '收' : '付'}金额`"> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           prop="needReceivableFee" | 
 |  |  |           label="需收金额"> | 
 |  |  |           :label="`需${type === 0 ? '收' : '付'}金额`"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <template v-if="type === 0"> | 
 |  |  |               <el-tag type="success" v-if="row.needReceivableFee > 0">收</el-tag> | 
 |  |  |               <el-tag type="warning" v-else-if="row.needReceivableFee < 0">付</el-tag> | 
 |  |  |             </template> | 
 |  |  |             <template v-else> | 
 |  |  |               <el-tag type="warning" v-if="row.needReceivableFee !== 0">付</el-tag> | 
 |  |  |             </template> | 
 |  |  |             <span style="margin-left: 10px;">{{Math.abs(row.needReceivableFee)}}</span> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           label="账单来源"> | 
 |  |  | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           width="200" | 
 |  |  |           label="计费周期"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             {{ row.startDate }} ~ {{ row.endDate }} | 
 |  |  | 
 |  |  |         border | 
 |  |  |         style="width: 100%"> | 
 |  |  |         <el-table-column | 
 |  |  |           :key="Date.now()" | 
 |  |  |           width="200" | 
 |  |  |           prop="param1" | 
 |  |  |           label="操作人"> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           :key="Date.now()" | 
 |  |  |           width="200" | 
 |  |  |           prop="createDate" | 
 |  |  |           label="操作时间"> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           :key="Date.now()" | 
 |  |  |           width="150" | 
 |  |  |           label="操作"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <span v-if="row.objType === 0">工单创建</span> | 
 |  |  | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           :key="Date.now()" | 
 |  |  |           prop="content" | 
 |  |  |           label="操作内容"> | 
 |  |  |         </el-table-column> | 
 |  |  | 
 |  |  |       this.id = id | 
 |  |  |       this.getData() | 
 |  |  |     }, | 
 |  |  |     xiazai (url) { | 
 |  |  |       window.open(url) | 
 |  |  |     }, | 
 |  |  |     returnUnit (type) { | 
 |  |  |       switch (type) { | 
 |  |  |         case 0: | 
 |  |  |           return '元/m²·天' | 
 |  |  |         case 1: | 
 |  |  |           return '元/m²·月' | 
 |  |  |         case 2: | 
 |  |  |           return '元/m²·年' | 
 |  |  |         case 3: | 
 |  |  |           return '元/天' | 
 |  |  |         case 4: | 
 |  |  |           return '元/月' | 
 |  |  |         case 5: | 
 |  |  |           return '元/年' | 
 |  |  |         case 6: | 
 |  |  |           return '元/场' | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     getData () { | 
 |  |  |       getById(this.id) | 
 |  |  |         .then(res => { | 
 |  |  | 
 |  |  |         capacity: this.pageSize, | 
 |  |  |         page: this.page, | 
 |  |  |         model: { | 
 |  |  |           status: 0, | 
 |  |  |           billType: this.type, | 
 |  |  |           contractId: this.info.id | 
 |  |  |         } |