ll

liukangdong

2024-12-23 5c53a09ff28e5be90af9c1bc0534a4320fc5aec0

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

@@ -1,12 +1,6 @@
<template>
  <GlobalWindow
    width="100%"
    :title="title"
    :withFooter="false"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
    @close="close">
  <GlobalWindow width="100%" :title="title" :withFooter="false" :visible.sync="visible" :confirm-working="isWorking"
    @confirm="confirm" @close="close">
    <div class="tabs fixed">
      <div class="tab" :class="{ active: activeTabs === 0 }">1、基本信息</div>
      <div class="tab" :class="{ active: activeTabs === 1 }">2、费用条款</div>
@@ -19,7 +13,8 @@
            <div class="list">
              <el-form-item label="合同类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择" @change="changeType">
                  <el-option v-for="(item, index) in types" :key="index" :value="item.value" :label="item.name"></el-option>
                  <el-option v-for="(item, index) in types" :key="index" :value="item.value"
                    :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合同编号" prop="code">
@@ -27,21 +22,26 @@
              </el-form-item>
              <el-form-item label="经办人" prop="userId">
                <el-select v-model="form.userId" filterable placeholder="请选择">
                  <el-option v-for="(item, index) in agentList" :key="index" :value="item.id" :label="item.realname"></el-option>
                  <el-option v-for="(item, index) in agentList" :key="index" :value="item.id"
                    :label="item.realname"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合同签订日期" prop="signDate">
                <el-date-picker type="date" v-model="form.signDate" value-format="yyyy-MM-dd" :clearable="false" placeholder="请选择" />
                <el-date-picker type="date" v-model="form.signDate" value-format="yyyy-MM-dd" :clearable="false"
                  placeholder="请选择" />
              </el-form-item>
              <el-form-item label="合同开始日期" prop="startDate">
                <el-date-picker type="date" v-model="form.startDate" @change="getHouseData" :clearable="false" value-format="yyyy-MM-dd" placeholder="请选择" />
                <el-date-picker type="date" v-model="form.startDate" @change="getHouseData" :clearable="false"
                  value-format="yyyy-MM-dd" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="合同结束日期" prop="endDate">
                <el-date-picker type="date" v-model="form.endDate" @change="getHouseData" :clearable="false" value-format="yyyy-MM-dd" placeholder="请选择" />
                <el-date-picker type="date" v-model="form.endDate" @change="getHouseData" :clearable="false"
                  value-format="yyyy-MM-dd" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="归属项目" prop="projectId">
                <el-select v-model="form.projectId" @change="getHouseTree" placeholder="请选择">
                  <el-option v-for="(item, index) in projectList" :key="index" :value="item.id" :label="item.name"></el-option>
                  <el-option v-for="(item, index) in projectList" :key="index" :value="item.id"
                    :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="结果取整(四舍五入)" prop="roundedUp">
@@ -52,7 +52,8 @@
              </el-form-item>
              <el-form-item label="所属公司" prop="companyId">
                <el-select v-model="form.companyId" placeholder="请选择">
                  <el-option v-for="(item, index) in comparyList" :key="index" :value="item.id" :label="item.name"></el-option>
                  <el-option v-for="(item, index) in comparyList" :key="index" :value="item.id"
                    :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </div>
@@ -65,7 +66,8 @@
              </el-form-item>
              <el-form-item label="联系人" prop="memberId">
                <el-select v-model="form.memberId" placeholder="请选择">
                  <el-option v-for="(item, index) in contactsList" :key="index" :value="item.id" :label="item.name"></el-option>
                  <el-option v-for="(item, index) in contactsList" :key="index" :value="item.id"
                    :label="item.name"></el-option>
                </el-select>
<!--                <el-input v-model="form.memberName" readonly placeholder="请点击选择租客" />-->
              </el-form-item>
@@ -74,15 +76,11 @@
        </div>
        <div class="main_house">
          <div class="title">请选择房源</div>
          <el-tree
            :data="houseList"
            show-checkbox
            node-key="idd"
            @check="checkHouseRoom"
            :default-expanded-keys="ids"
            :default-checked-keys="ids"
            :props="{ children: 'projectDataVOList', label: 'name' }">
            <span class="custom-tree-node" style="width: 100%; display: flex; align-items: center; justify-content: space-between;" slot-scope="{ node, data }">
          <el-tree :data="houseList" show-checkbox node-key="idd" @check="checkHouseRoom" :default-expanded-keys="ids"
            :default-checked-keys="ids" :props="{ children: 'projectDataVOList', label: 'name' }">
            <span class="custom-tree-node"
              style="width: 100%; display: flex; align-items: center; justify-content: space-between;"
              slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
              <span style="color: #2080f7;" v-if="data.lv === 3">
                {{ data.area }}㎡
@@ -113,8 +111,12 @@
    </div>
    <div v-show="activeTabs === 1">
      <div class="tabs cost_tabs">
        <div class="tab" :class="{ active: cactiveTabs === 0 }" @click="ctabsClick(0)" v-if="[0,2].includes(form.type)">租赁条款</div>
        <div class="tab" :class="{ active: cactiveTabs === 1 }" @click="ctabsClick(1)" v-if="[0,1].includes(form.type)">物业条款</div>
        <div class="tab" :class="{ active: cactiveTabs === 0 }" @click="ctabsClick(0)" v-if="[0, 2].includes(form.type)">
          租赁条款
        </div>
        <div class="tab" :class="{ active: cactiveTabs === 1 }" @click="ctabsClick(1)" v-if="[0, 1].includes(form.type)">
          物业条款
        </div>
      </div>
      <!--   租赁条款   -->
      <div v-show="cactiveTabs === 0">
@@ -128,7 +130,8 @@
                </el-form-item>
                <el-form-item label="付款方式" prop="zlPayType">
                  <el-select v-model="form.zlPayType" @change="changePayType" placeholder="请选择">
                    <el-option v-for="(item, index) in payMethods" :key="index" :value="item.value" :label="item.name"></el-option>
                    <el-option v-for="(item, index) in payMethods" :key="index" :value="item.value"
                      :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="免租期" prop="zlDate">
@@ -141,18 +144,22 @@
                <el-button type="text" size="medium" @click="addZl">增加</el-button>
              </div>
              <div class="list">
                <div style="width: 100%; display: flex; flex-wrap: wrap;" v-for="(zlDetailList, index) in form.zlDetailList" :key="index">
                <div style="width: 100%; display: flex; flex-wrap: wrap;"
                  v-for="(zlDetailList, index) in form.zlDetailList" :key="index">
                  <el-form-item label="起始日期" :prop="'zlDetailList.' + index + '.time'" :rules="{
                    required: true, message: '请选择', trigger: 'blur'
                  }">
                    <el-date-picker type="daterange" v-model="zlDetailList.time" @change="getDate1($event, index)" value-format="yyyy-MM-dd" placeholder="请选择" />
                    <el-date-picker type="daterange" v-model="zlDetailList.time" @change="getDate1($event, index)"
                      value-format="yyyy-MM-dd" placeholder="请选择" />
                  </el-form-item>
                  <el-form-item label="合同单价" :prop="'zlDetailList.' + index + '.price'" :rules="{
                    required: true, message: '请输入', trigger: 'blur'
                  }">
                    <el-input placeholder="请输入" v-model="zlDetailList.price" @input="clearzl" class="input-with-select">
                      <el-select v-model="zlDetailList.circleType" @change="clearzl" style="width: 150px;" slot="append" placeholder="请选择">
                        <el-option v-for="(item, index) in unitOps" :key="index" :value="item.value" :label="item.name"></el-option>
                      <el-select v-model="zlDetailList.circleType" @change="clearzl" style="width: 150px;" slot="append"
                        placeholder="请选择">
                        <el-option v-for="(item, index) in unitOps" :key="index" :value="item.value"
                          :label="item.name"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
@@ -161,7 +168,8 @@
                  }">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                      <el-input v-model="zlDetailList.advanceDays" @input="clearzl" placeholder="请输入" v-trim />
                      <el-link :underline="false" type="danger" @click="deleZl(index)" style="margin-left: 20px; flex-shrink: 0;">删除</el-link>
                      <el-link :underline="false" type="danger" @click="deleZl(index)"
                        style="margin-left: 20px; flex-shrink: 0;">删除</el-link>
                    </div>
                  </el-form-item>
                </div>
@@ -217,7 +225,8 @@
                </el-form-item>
                <el-form-item label="付款方式" prop="wyPayType">
                  <el-select v-model="form.wyPayType" @change="changePayType1" placeholder="请选择">
                    <el-option v-for="(item, index) in payMethods" :key="index" :value="item.value" :label="item.name"></el-option>
                    <el-option v-for="(item, index) in payMethods" :key="index" :value="item.value"
                      :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="免租期" prop="wyDate">
@@ -230,18 +239,22 @@
                <el-button type="text" size="medium" @click="addWy">增加</el-button>
              </div>
              <div class="list">
                <div style="width: 100%; display: flex; flex-wrap: wrap;" v-for="(wyDetailList, index) in form.wyDetailList" :key="index">
                <div style="width: 100%; display: flex; flex-wrap: wrap;"
                  v-for="(wyDetailList, index) in form.wyDetailList" :key="index">
                  <el-form-item label="起始日期" :prop="'wyDetailList.' + index + '.time'" :rules="{
                    required: true, message: '请输入', trigger: 'blur'
                  }">
                    <el-date-picker type="daterange" v-model="wyDetailList.time" @change="getDate2($event, index)" value-format="yyyy-MM-dd" placeholder="请选择" />
                    <el-date-picker type="daterange" v-model="wyDetailList.time" @change="getDate2($event, index)"
                      value-format="yyyy-MM-dd" placeholder="请选择" />
                  </el-form-item>
                  <el-form-item label="合同单价" :prop="'wyDetailList.' + index + '.price'" :rules="{
                    required: true, message: '请输入', trigger: 'blur'
                  }">
                    <el-input placeholder="请输入" @input="clearwy" v-model="wyDetailList.price">
                      <el-select v-model="wyDetailList.circleType" @change="clearwy" style="width: 150px;" slot="append" placeholder="请选择">
                        <el-option v-for="(item, index) in unitOps1" :key="index" :value="item.value" :label="item.name"></el-option>
                      <el-select v-model="wyDetailList.circleType" @change="clearwy" style="width: 150px;" slot="append"
                        placeholder="请选择">
                        <el-option v-for="(item, index) in unitOps1" :key="index" :value="item.value"
                          :label="item.name"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
@@ -250,7 +263,8 @@
                  }">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                      <el-input v-model="wyDetailList.advanceDays" @input="clearwy" placeholder="请输入" v-trim />
                      <el-link :underline="false" type="danger" @click="deleWy(index)" style="margin-left: 20px; flex-shrink: 0;">删除</el-link>
                      <el-link :underline="false" type="danger" @click="deleWy(index)"
                        style="margin-left: 20px; flex-shrink: 0;">删除</el-link>
                    </div>
                  </el-form-item>
                </div>
@@ -297,7 +311,8 @@
    </div>
    <div class="window__footer" style="position: sticky; bottom: 0; left: 0; z-index: 9; background: #ffffff;">
      <slot name="footer">
        <el-button @click="confirm" :loading="confirmWorking" type="primary">{{activeTabs === 0 ? '下一步' : '提交'}}</el-button>
        <el-button @click="confirm" :loading="confirmWorking" type="primary">{{ activeTabs === 0 ? '下一步' :
          '提交'}}</el-button>
        <slot name="btns" />
        <el-button @click="close">{{activeTabs === 0 ? '返回' : '上一步'}}</el-button>
      </slot>
@@ -573,14 +588,14 @@
      }
    },
    getDayTime (num) {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth() + 1;
      const day = today.getDate();
      const today = new Date()
      const year = today.getFullYear()
      const month = today.getMonth() + 1
      const day = today.getDate()
      if (!num) {
        return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
        return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
      } else {
        return `${year + 1}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day - 1 : day - 1}`;
        return `${year + 1}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day - 1 : day - 1}`
      }
    },
    clearzl () {
@@ -663,7 +678,7 @@
          return Number(item.split('-')[1])
        }
      })
      this.form.roomIds = arr.filter(item => item !== undefined);
      this.form.roomIds = arr.filter(item => item !== undefined)
    },
    getHouseTree () {
      tree({
@@ -681,10 +696,10 @@
    },
    addParamToArray(arr) {
      for (let i = 0; i < arr.length; i++) {
        const currentItem = arr[i].projectDataVOList;
        const currentItem = arr[i].projectDataVOList
        arr[i].idd = arr[i].lv + '-' + arr[i].id
        if (currentItem.length > 0) {
          this.addParamToArray(currentItem);
          this.addParamToArray(currentItem)
        }
      }
    },
@@ -782,7 +797,11 @@
    getProject () {
      getProjectList({})
        .then(res => {
          this.projectList = res
          this.projectList = res || []
          if (this.projectList.length > 0) {
            this.$set(this.form, 'projectId', this.projectList[0].id)
            this.getHouseTree()
          }
        })
    },
    getCompany () {
@@ -827,7 +846,7 @@
      const hours = now.getHours()
      const minutes = now.getMinutes()
      const seconds = now.getSeconds()
      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    },
    uploadAvatarSuccess (file) {
      this.$nextTick(() => {
@@ -853,6 +872,7 @@

<style lang="scss" scoped>
@import '@/assets/style/variables.scss';

.fixed {
  background: #ffffff;
  position: sticky;
@@ -860,6 +880,7 @@
  left: 0;
  z-index: 999;
}

.tabs {
  border-bottom: 1px solid #DFE2E8;
  display: flex;
@@ -962,6 +983,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;

  span {
    font-weight: 500;
    font-size: 14px;