开发更新

jiangping

2025-06-06 a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea

 admin/src/views/contract/components/contractDetail.vue

@@ -6,22 +6,29 @@
    :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="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 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>
        <div>
          <el-button type="primary" @click="$refs.pendingBills.open('待处理账单', id)" v-if="info.status === 3">查看待处理账单</el-button>
          <el-button @click="$refs.terminationAgreement.open('退租协议', id)" v-if="[3,4].includes(info.status)">查看退租协议</el-button>
          <el-button plain type="danger" v-if="[0, 1, 2].includes(info.status)" @click="refund">退租</el-button>
        </div>
      </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>
@@ -39,8 +46,8 @@
          <div class="val">{{ info.creatorName }}</div>
        </div>
        <div class="item">
          <div class="la">合同租赁数</div>
          <div class="val">{{ info.totalArea }}</div>
          <div class="la">合同租赁面积</div>
          <div class="val">{{ info.totalArea }}㎡</div>
        </div>
        <div class="item">
          <div class="la">所属公司</div>
@@ -74,12 +81,12 @@
          <el-table-column prop="buildingName" label="楼宇名称" show-overflow-tooltip />
          <el-table-column prop="" label="楼层/房号" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{row.floorName}}/{{row.code}}
              {{row.floorName}}/{{row.roomNum}}
            </template>
          </el-table-column>
          <el-table-column prop="area" label="面积" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{row.area}}㎡
              {{row.rentArea}}㎡
            </template>
          </el-table-column>
        </el-table>
@@ -99,7 +106,7 @@
      <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>
@@ -110,20 +117,35 @@
        </div>
        <div class="item">
          <div class="la">免租期</div>
          <div class="val">{{ info.zlFreeStartDate }} ~ {{ info.zlFreeEndDate }}</div>
          <div class="val" v-if="info.zlFreeStartDate && info.zlFreeEndDate">
            {{ info.zlFreeStartDate }} ~ {{ info.zlFreeEndDate }}
          </div>
          <div class="val" v-else>
            -
          </div>
        </div>
      </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 prop="startDate" label="开始日期" :key="Date.now()" min-width="100" show-overflow-tooltip />
        <el-table-column prop="endDate" label="结束日期" :key="Date.now()" 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}">
            <template v-if="row.advanceDays">
              {{row.advanceDays}}天
            </template>
          </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>
@@ -138,15 +160,27 @@
        </div>
      </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 prop="startDate" label="开始日期" :key="Date.now()" min-width="100" show-overflow-tooltip />
        <el-table-column prop="endDate" label="结束日期" :key="Date.now()" 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>
@@ -162,6 +196,13 @@
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          width="150"
          label="账单编号">
          <template slot-scope="{row}">
            <el-button type="text" @click="openBill(row.id)">{{row.code}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="费用类型">
          <template slot-scope="{row}">
@@ -182,18 +223,22 @@
        <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}">
            <el-tag type="success" v-if="row.needReceivableFee > 0">收</el-tag>
            <el-tag type="warning" v-else>付</el-tag>
            <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>
@@ -201,10 +246,11 @@
          label="账单来源">
          <template slot-scope="{row}">
            <span v-if="row.type === 0">合同账单</span>
            <span v-if="row.type === 1">自建账单</span>
            <span v-else>自建账单</span>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          label="计费周期">
          <template slot-scope="{row}">
            {{ row.startDate }} ~ {{ row.endDate }}
@@ -284,6 +330,12 @@
    </div>
    <!--  退租  -->
    <TerminateLease ref="terminateLease" @success="getData" />
    <!--  待处理账单  -->
    <PendingBills ref="pendingBills" />
    <!--  退租协议  -->
    <TerminationAgreement ref="terminationAgreement" />
    <!--  账单详情  -->
    <BullDetail ref="bullDetail" />
  </GlobalWindow>
</template>

@@ -291,12 +343,18 @@
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import TerminateLease from './terminateLease'
import PendingBills from './pendingBills'
import TerminationAgreement from './terminationAgreement'
import BullDetail from '../../finance/components/bullDetail'
import { getById } from '@/api/contract'
import { fetchList } from '@/api/bill'
export default {
  components: {
    GlobalWindow,
    TerminateLease
    TerminateLease,
    PendingBills,
    TerminationAgreement,
    BullDetail
  },
  extends: BaseOpera,
  data() {
@@ -310,7 +368,7 @@
      page: 1,
      total: 0,
      tableData: [],
      

      loading: false
    }
  },
@@ -324,6 +382,30 @@
      this.tableData = []
      this.id = id
      this.getData()
    },
    xiazai (url) {
      window.open(url)
    },
    openBill(id) {
      this.$refs.bullDetail.open('账单详情', id)
    },
    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)
@@ -342,6 +424,7 @@
        capacity: this.pageSize,
        page: this.page,
        model: {
          status: 0,
          billType: this.type,
          contractId: this.info.id
        }
@@ -352,7 +435,6 @@
      })
    },
    changeType (e) {
      console.log(e)
      this.type = e
      this.page = 1
      this.pageSize = 10