开发更新

jiangping

2024-12-23 f3ce3a1f136f359ae872a223aada9e0d23afa9a0

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

@@ -6,22 +6,25 @@
    :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>
        <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>
@@ -40,7 +43,7 @@
        </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>
@@ -99,7 +102,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 +113,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 +156,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>
@@ -182,18 +212,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 +235,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 }}
@@ -310,7 +345,7 @@
      page: 1,
      total: 0,
      tableData: [],
      

      loading: false
    }
  },
@@ -324,6 +359,27 @@
      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)
@@ -342,6 +398,7 @@
        capacity: this.pageSize,
        page: this.page,
        model: {
          status: 0,
          billType: this.type,
          contractId: this.info.id
        }
@@ -352,7 +409,6 @@
      })
    },
    changeType (e) {
      console.log(e)
      this.type = e
      this.page = 1
      this.pageSize = 10