开发

MrShi

2024-12-03 7921cb918b9dd75f68ee9b59772dc85d7bbee125

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

@@ -1,9 +1,15 @@
<template>
  <GlobalWindow width="100%" :title="title" :visible.sync="visible" :confirm-working="isWorking" @close="close"
    @confirm="confirm">
    <div class="tabs">
      <div class="tab" :class="{ active: activeTabs === 0 }" @click="tabsClick(0)">1、基本信息</div>
      <div class="tab" :class="{ active: activeTabs === 1 }" @click="tabsClick(1)">2、费用条款</div>
  <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>
    </div>
    <div v-show="activeTabs === 0">
      <div class="main">
@@ -25,16 +31,16 @@
                </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" 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" 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" 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" placeholder="请选择">
                <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-select>
              </el-form-item>
@@ -57,8 +63,11 @@
                  <el-input v-model="form.renterName" readonly placeholder="请点击选择租客" />
                </div>
              </el-form-item>
              <el-form-item label="联系人" prop="memberName">
                <el-input v-model="form.memberName" readonly placeholder="请点击选择租客" />
              <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-select>
<!--                <el-input v-model="form.memberName" readonly placeholder="请点击选择租客" />-->
              </el-form-item>
            </div>
          </el-form>
@@ -126,13 +135,13 @@
                <el-button type="text" size="medium" @click="addZl">增加</el-button>
              </div>
              <div class="list">
                <template v-for="(item, index) in form.zlDetailList" :key="index">
                <div style="width: 100%; display: flex; flex-wrap: wrap;" v-for="(item, index) in form.zlDetailList" :key="index">
                  <el-form-item label="起始日期" prop="time">
                    <el-date-picker type="daterange" v-model="item.time" @change="getDate1($event, index)" value-format="yyyy-MM-dd" placeholder="请选择" />
                  </el-form-item>
                  <el-form-item label="合同单价" prop="price">
                    <el-input placeholder="请输入" v-model="item.price">
                      <el-select v-model="item.circleType" slot="append" placeholder="请选择">
                    <el-input placeholder="请输入" v-model="item.price" class="input-with-select">
                      <el-select v-model="item.circleType" 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>
@@ -143,7 +152,7 @@
                      <el-link :underline="false" type="danger" @click="deleZl(index)" style="margin-left: 20px; flex-shrink: 0;">删除</el-link>
                    </div>
                  </el-form-item>
                </template>
                </div>
              </div>
            </el-form>
          </div>
@@ -173,11 +182,15 @@
            </template>
          </el-table-column>
          <el-table-column prop="planPayDate" label="付款日" align="center" show-overflow-tooltip />
          <el-table-column prop="receivableFee" label="应收" align="center" show-overflow-tooltip />
          <el-table-column label="应收" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{row.receivableFee}}元
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <span>总计</span>
          <div>费用应收总计：{{zlPrice}}，押金应收总计：{{form.zlDeposit}}</div>
          <div>费用应收总计：{{zlPrice}}元，押金应收总计：{{form.zlDeposit}}元</div>
        </div>
      </div>
      <!--   物业条款   -->
@@ -205,13 +218,13 @@
                <el-button type="text" size="medium" @click="addWy">增加</el-button>
              </div>
              <div class="list">
                <template v-for="(item, index) in form.wyDetailList" :key="index">
                <div style="width: 100%; display: flex; flex-wrap: wrap;" v-for="(item, index) in form.wyDetailList" :key="index">
                  <el-form-item label="起始日期" prop="time">
                    <el-date-picker type="daterange" v-model="item.time" @change="getDate2($event, index)" value-format="yyyy-MM-dd" placeholder="请选择" />
                  </el-form-item>
                  <el-form-item label="合同单价" prop="price">
                    <el-input placeholder="请输入" v-model="item.price">
                      <el-select v-model="item.circleType" slot="append" placeholder="请选择">
                      <el-select v-model="item.circleType" 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>
@@ -222,7 +235,7 @@
                      <el-link :underline="false" type="danger" @click="deleWy(index)" style="margin-left: 20px; flex-shrink: 0;">删除</el-link>
                    </div>
                  </el-form-item>
                </template>
                </div>
              </div>
            </el-form>
          </div>
@@ -252,13 +265,24 @@
            </template>
          </el-table-column>
          <el-table-column prop="planPayDate" label="付款日" align="center" show-overflow-tooltip />
          <el-table-column prop="receivableFee" label="应收" align="center" show-overflow-tooltip />
          <el-table-column prop="receivableFee" label="应收" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{row.receivableFee}}元
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <span>总计</span>
          <div>费用应收总计：{{wyPrice}}，押金应收总计：{{form.wyDeposit}}</div>
          <div>费用应收总计：{{wyPrice}}元，押金应收总计：{{form.wyDeposit}}元</div>
        </div>
      </div>
    </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>
        <slot name="btns" />
        <el-button @click="close">{{activeTabs === 0 ? '返回' : '上一步'}}</el-button>
      </slot>
    </div>
    <!-- 选择租客 -->
    <MemberSearch ref="MemberSearchRef" @select="getTenant" />
@@ -271,6 +295,7 @@
import MemberSearch from '@/components/common/MemberSearch'
import { rules } from './config'
import { create, getBillList } from '@/api/contract'
import { ywList } from '@/api/customer'
import { getUserList } from '@/api/system/user'
import { getProjectList, tree } from '@/api/project/ywProject'
import { companyList } from '@/api/company'
@@ -312,6 +337,7 @@
        zlDate: [],
        zlDetailList: [
          {
            circleType: 0,
            startDate: '',
            endDate: '',
            time: [],
@@ -327,6 +353,7 @@
        wyDate: [],
        wyDetailList: [
          {
            circleType: 0,
            startDate: '',
            endDate: '',
            time: [],
@@ -344,6 +371,8 @@
      wyList: [],
      
      rules,
  
      contactsList: [],

      loadingInstance: null,
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
@@ -365,7 +394,7 @@
        { name: '一次性付款', value: 0 },
        { name: '3个月一付', value: 1 },
        { name: '6个月一付', value: 2 },
        { name: '1年一付', value: 2 },
        { name: '1年一付', value: 3 },
      ],
      unitOps: [
        { name: '元/m²·天', value: 0 },
@@ -384,20 +413,61 @@
    open (title, target) {
      this.title = title
      this.ids = []
      this.houseList = []
      this.getUser()
      this.getProject()
      this.getCompany()
      this.getHouseTree()
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        for (const key in this.form) {
          if (['roomIds', 'fileList', 'wyDate', 'zlDate'].includes(key)) {
            this.form[key] = []
          } else {
            this.form[key] = target[key]
            this.form[key] = ''
          }
        }
        this.form.zlDetailList = [
          {
            circleType: 0,
            startDate: this.form.startDate,
            endDate: this.form.endDate,
            time: [this.form.startDate, this.form.endDate],
            price: '',
            advanceDays: ''
          }
        ]
        this.form.wyDetailList = [
          {
            circleType: 0,
            startDate: this.form.startDate,
            endDate: this.form.endDate,
            time: [this.form.startDate, this.form.endDate],
            price: '',
            advanceDays: ''
          }
        ]
        this.wyList = []
        this.zlList = []
        this.form.userId = this.userInfo.id
        this.form.signDate = this.getDayTime()
        this.form.startDate = this.getDayTime()
        this.form.endDate = this.getDayTime(1)
        // this.getHouseTree()
      })
    },
    // 获取联系人
    getYwList () {
      ywList({
        customerId: this.form.renterId
      }).then(res => {
        this.contactsList = res
      })
    },
    getHouseData () {
      if (this.form.startDate && this.form.endDate) {
        this.getHouseTree()
      }
    },
    changeType (e) {
      if (e === 0 || e === 2) {
@@ -406,11 +476,48 @@
        this.cactiveTabs = 1
      }
    },
    confirm () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
    getDayTime (num) {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth() + 1; // 月份是从 0 开始的，因此需要加 1
      const day = today.getDate();
      if (!num) {
        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 : day}`;
      }
    },
    clearData () {
      this.form.zlDetailList = [
        {
          circleType: 0,
          startDate: this.form.startDate,
          endDate: this.form.endDate,
          time: [this.form.startDate, this.form.endDate],
          price: '',
          advanceDays: ''
        }
      ]
      this.form.wyDetailList = [
        {
          circleType: 0,
          startDate: this.form.startDate,
          endDate: this.form.endDate,
          time: [this.form.startDate, this.form.endDate],
          price: '',
          advanceDays: ''
        }
      ]
    },
    confirm () {
      if (this.activeTabs === 0) {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          if (this.form.roomIds.length === 0) return this.$message.warning('请选择房源！')
          this.clearData()
          this.activeTabs = 1
        })
      } else if (this.activeTabs === 1) {
        if (this.form.type === 0) {
          this.$refs.paramCostRef.validate((valid1) => {
            if (!valid1) {
@@ -438,7 +545,7 @@
            this.submit()
          })
        }
      })
      }
    },
    submit () {
      // 调用新建接口
@@ -471,7 +578,11 @@
      this.form.roomIds = arr.filter(item => item !== undefined);
    },
    getHouseTree () {
      tree({})
      tree({
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        projectId: this.form.projectId
      })
        .then(res => {
          res.forEach(item => {
            item.disabled = true
@@ -490,30 +601,30 @@
      }
    },
    generateZL () {
      getBillList({ ...this.form })
      getBillList({ ...this.form, billType: 0 })
        .then(res => {
          let zlPrice = 0
          let arr = []
          res.forEach(item => {
            if (item.costType === 0) {
              zlPrice += item.receivableFee
              arr.push(item)
            }
            arr.push(item)
          })
          this.zlPrice = zlPrice
          this.zlList = arr
        })
    },
    generateWY () {
      getBillList({ ...this.form })
      getBillList({ ...this.form, billType: 1 })
        .then(res => {
          let zlPrice = 0
          let arr = []
          res.forEach(item => {
            if (item.costType === 1) {
              zlPrice += item.receivableFee
              arr.push(item)
            }
            arr.push(item)
          })
          this.wyPrice = zlPrice
          this.wyList = arr
@@ -521,18 +632,20 @@
    },
    addZl () {
      this.form.zlDetailList.push({
        startDate: '',
        endDate: '',
        time: [],
        circleType: 0,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        time: [this.form.startDate, this.form.endDate],
        price: '',
        advanceDays: ''
      })
    },
    addWy () {
      this.form.wyDetailList.push({
        startDate: '',
        endDate: '',
        time: [],
        circleType: 0,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        time: [this.form.startDate, this.form.endDate],
        price: '',
        advanceDays: ''
      })
@@ -556,8 +669,9 @@
    getTenant (row) {
      this.form.renterId = row.id
      this.form.renterName = row.name
      this.form.memberId = row.memberId
      this.form.memberName = row.memberName
      this.form.memberId = ''
      this.form.memberName = ''
      this.getYwList()
    },
    dele (imgaddr) {
      this.form.fileList.forEach((item, index) => {
@@ -582,6 +696,7 @@
      companyList({ type: 2 })
        .then(res => {
          this.comparyList = res
          this.form.companyId = res[0].id
        })
    },
    tabsClick (val) {
@@ -631,7 +746,11 @@
      this.form.fileList.push({ ...item, fileurl: item.imgaddr, name: item.originname, userName: this.userInfo.realname, createTime: this.getDay() })
    },
    close () {
      this.$emit('close')
      if (this.activeTabs === 0) {
        this.$emit('close')
      } else {
        this.activeTabs = 0
      }
    }
  }
}
@@ -639,7 +758,13 @@

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

.fixed {
  background: #ffffff;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}
.tabs {
  border-bottom: 1px solid #DFE2E8;
  display: flex;