1

MrShi

2025-01-06 d7dca690cedd12e271f0ee0b9050679d73796f5c

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

@@ -1,140 +1,433 @@
<template>
  <GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @close="close"
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :withFooter="false"
    :confirm-working="isWorking"
    @close="close"
    @confirm="confirm">
    <div class="home_title">
      <div class="left">
        <span class="mr10">单位名称：xxx</span>
        <span class="status">status</span>
    <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">退租</el-button>
      <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="remark">合同摘要：xxxx</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 class="main">
    <div class="main" v-if="activeTabs === 0 && info">
      <div class="title">基础信息</div>
      <div class="list">
        <div class="item">
          <div class="la">合同编号</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.code }}</div>
        </div>
        <div class="item">
          <div class="la">经办人</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.userName }}</div>
        </div>
        <div class="item">
          <div class="la">创建人</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.creatorName }}</div>
        </div>
        <div class="item">
          <div class="la">合同租赁数</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.totalArea }}㎡</div>
        </div>
        <div class="item">
          <div class="la">所属公司</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.companyName }}</div>
        </div>
        <div class="item">
          <div class="la">签订日期</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.signDate }}</div>
        </div>
        <div class="item">
          <div class="la">开始日期</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.startDate }}</div>
        </div>
        <div class="item">
          <div class="la">结束日期</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.endDate }}</div>
        </div>
        <div class="item">
          <div class="la">所属项目</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.projectName }}</div>
        </div>
        <div class="item">
          <div class="la">结果取整(四舍五入)</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.roundedUp === 1 ? '是' : '否' }}</div>
        </div>
      </div>
      <div class="title">房源信息</div>
      <div class="list">
        <div class="item">
          <div class="la">项目名称</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">楼宇名称</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">楼层/房号</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">面积</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <el-table :data="info.roomList" stripe>
          <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip />
          <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}}
            </template>
          </el-table-column>
          <el-table-column prop="area" label="面积" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{row.area}}㎡
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="title">租客信息</div>
      <div class="list">
        <div class="item">
          <div class="la">租客</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.renterName }}</div>
        </div>
        <div class="item">
          <div class="la">经办人</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">{{ info.userName }}</div>
        </div>
      </div>
      <div class="title">租赁条款</div>
      <div class="list">
      <div class="title" v-if="info.type === 2 || info.type === 0">租赁条款</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.aaa }}</div>
          <div class="val">{{ info.zlDeposit }}元</div>
        </div>
        <div class="item">
          <div class="la">付款方式</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val" v-if="info.zlPayType === 0">一次性付款</div>
          <div class="val" v-if="info.zlPayType === 1">每三个月一付</div>
          <div class="val" v-if="info.zlPayType === 2">六个月一付</div>
          <div class="val" v-if="info.zlPayType === 3">一年一付</div>
        </div>
        <div class="item">
          <div class="la">免租期</div>
          <div class="val">{{ info.aaa }}</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.list" stripe>
        <el-table-column prop="" label="开始日期" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="结束日期" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="合同单价" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="付款提前天数" min-width="100" show-overflow-tooltip />
      <el-table :data="info.zlDetailList" stripe style="margin-bottom: 20px;" v-if="info.type === 2 || info.type === 0">
        <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>
        <div class="item">
          <div class="la">付款方式</div>
          <div class="val" v-if="info.wyPayType === 0">一次性付款</div>
          <div class="val" v-if="info.wyPayType === 1">每三个月一付</div>
          <div class="val" v-if="info.wyPayType === 2">六个月一付</div>
          <div class="val" v-if="info.wyPayType === 3">一年一付</div>
        </div>
        <div class="item">
          <div class="la">免租期</div>
          <div class="val">{{ info.wyFreeStartDate }} ~ {{ info.wyFreeEndDate }}</div>
        </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="开始日期" :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 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>
      </div>
    </div>
    <div class="main" v-if="activeTabs === 1 && info">
      <el-radio-group v-model="type" @change="changeType" style="margin-bottom: 20px;">
        <el-radio-button :label="0">收款账单</el-radio-button>
        <el-radio-button :label="1">付款账单</el-radio-button>
      </el-radio-group>
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          label="费用类型">
          <template slot-scope="{row}">
            <span v-if="row.costType === 0">租赁费</span>
            <span v-if="row.costType === 1">物业费</span>
            <span v-if="row.costType === 2">租赁押金</span>
            <span v-if="row.costType === 3">物业押金</span>
            <span v-if="row.costType === 4">水电费</span>
            <span v-if="row.costType === 5">杂项费</span>
            <span v-if="row.costType === 6">其他</span>
            <span v-if="row.costType === 7">保证金</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="totleFee"
          label="账单金额">
        </el-table-column>
        <el-table-column
          :key="Date.now()"
          prop="receivableFee"
          :label="`应${type === 0 ? '收' : '付'}金额`">
        </el-table-column>
        <el-table-column
          prop="actReceivableFee"
          :label="`实${type === 0 ? '收' : '付'}金额`">
        </el-table-column>
        <el-table-column
          :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 slot-scope="{row}">
            <span v-if="row.type === 0">合同账单</span>
            <span v-else>自建账单</span>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          label="计费周期">
          <template slot-scope="{row}">
            {{ row.startDate }} ~ {{ row.endDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="planPayDate"
          label="应收日期">
        </el-table-column>
        <el-table-column
          label="是否逾期">
          <template slot-scope="{row}">
            <span v-if="row.isOverdue === 0">否</span>
            <span v-if="row.isOverdue === 1">是</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="状态">
          <template slot-scope="{row}">
            <span v-if="row.payStatus === 0">待收款</span>
            <span v-if="row.payStatus === 1">已结清</span>
            <span v-if="row.payStatus === 2">部分结清</span>
            <span v-if="row.payStatus === 3">待付款</span>
            <span v-if="row.payStatus === 4">待退款</span>
            <span v-if="row.payStatus === 5">已关闭</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div class="main" v-if="activeTabs === 2 && info">
      <div class="title">操作记录</div>
      <el-table
        :data="info.logList"
        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>
            <span v-if="row.objType === 1">指派</span>
            <span v-if="row.objType === 2">处理</span>
            <span v-if="row.objType === 3">合同创建</span>
            <span v-if="row.objType === 4">合同变更</span>
            <span v-if="row.objType === 5">合同退租</span>
          </template>
        </el-table-column>
        <el-table-column
          :key="Date.now()"
          prop="content"
          label="操作内容">
        </el-table-column>
      </el-table>
    </div>
    <!--  退租  -->
    <TerminateLease ref="terminateLease" @success="getData" />
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import TerminateLease from './terminateLease'
import { getById } from '@/api/contract'
import { fetchList } from '@/api/bill'
export default {
  components: {
    GlobalWindow
    GlobalWindow,
    TerminateLease
  },
  extends: BaseOpera,
  data() {
    return {
      id: '',
      visible: false,
      activeTabs: '',
      info: {}
      activeTabs: 0,
      type: 0,
      info: null,
      pageSize: 10,
      page: 1,
      total: 0,
      tableData: [],

      loading: false
    }
  },
  methods: {
    open (title, id) {
      this.title = title
      this.activeTabs = 0
      this.type = 0
      this.page = 1
      this.pageSize = 10
      this.tableData = []
      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 => {
          this.info = res
          this.getList()
          this.visible = true
        })
    },
    refund () {
      this.$refs.terminateLease.open('新建退租协议', JSON.parse(JSON.stringify(this.info)))
    },
    getList () {
      this.loading = true
      fetchList({
        capacity: this.pageSize,
        page: this.page,
        model: {
          status: 0,
          billType: this.type,
          contractId: this.info.id
        }
      }).then(res => {
        this.loading = false
        this.tableData = res.records
        this.total = res.total
      })
    },
    changeType (e) {
      this.type = e
      this.page = 1
      this.pageSize = 10
      this.tableData = []
      this.getList()
    },
    tabsClick(val) {
      this.activeTabs = val
    },
    getDetail() {

    },
    handleSizeChange (e) {
      this.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.page = e
      this.getList()
    }
  }
}
@@ -207,9 +500,9 @@
  .list {
    display: flex;
    flex-wrap: wrap;
    background: #F7F7F7;
    /*background: #F7F7F7;*/
    border-radius: 2px;
    padding: 15px 20px;
    /*padding: 15px 20px;*/
    margin-bottom: 20px;

    .item {
@@ -218,7 +511,7 @@

      .la {
        color: #7f7f7f;
        margin-top: 2px;
        margin-bottom: 10px;
      }
    }
  }