ll

liukangdong

2025-01-20 8f03d1529c77bd91c0764e7b25e7a356a614b435

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

@@ -1,75 +1,92 @@
<template>
  <GlobalWindow width="1000px" :title="title" :visible.sync="showModal" :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>
    <template v-if="activeTabs == 0">
    <div v-show="activeTabs === 0">
      <div class="main">
        <div class="main_content">
          <el-form :model="param" ref="paramRef" :rules="rules">
          <el-form :model="form" ref="form" :rules="rules">
            <div class="m_title">基础信息</div>
            <div class="list">
              <el-form-item label="合同类型" prop="type">
                <el-select v-model="param.type" placeholder="请选择" clearable>
                  <el-option v-for="item in types" :value="item.value" :label="item.name"></el-option>
                <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-select>
              </el-form-item>
              <el-form-item label="合同编号" prop="code">
                <el-input v-model="param.code" placeholder="请输入合同编号" v-trim />
                <el-input v-model="form.code" placeholder="请输入合同编号" v-trim />
              </el-form-item>
              <el-form-item label="经办人" prop="aaa">
                <el-select v-model="param.aaa" placeholder="请选择" clearable>
                  <el-option v-for="item in agentList" :value="item.id" :label="item.name"></el-option>
              <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-select>
              </el-form-item>
              <el-form-item label="合同签订日期" prop="">
                <el-date-picker type="date" v-model="param.getDate" value-format="yyyy-MM-dd" placeholder="请选择" />
              <el-form-item label="合同签订日期" prop="signDate">
                <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="">
                <el-date-picker type="date" v-model="param.getDate" value-format="yyyy-MM-dd" placeholder="请选择" />
              <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-form-item>
              <el-form-item label="合同结束日期" prop="">
                <el-date-picker type="date" v-model="param.getDate" value-format="yyyy-MM-dd" placeholder="请选择" />
              <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-form-item>
              <el-form-item label="归属项目" prop="">
                <el-select v-model="param.aaa" placeholder="请选择" clearable>
                  <el-option v-for="item in projectList" :value="item.id" :label="item.name"></el-option>
              <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-select>
              </el-form-item>
              <el-form-item label="结果取整(四舍五入)" prop="">
                <el-select v-model="param.aaa" placeholder="请选择" clearable>
              <el-form-item label="结果取整(四舍五入)" prop="roundedUp">
                <el-select v-model="form.roundedUp" placeholder="请选择">
                  <el-option :value="0" label="否"></el-option>
                  <el-option :value="1" label="是"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属公司" prop="">
                <el-select v-model="param.aaa" placeholder="请选择" clearable>
                  <el-option v-for="item in comparyList" :value="item.id" :label="item.name"></el-option>
              <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-select>
              </el-form-item>
            </div>
            <div class="m_title">租客信息</div>
            <div class="list">
              <el-form-item label="租客" prop="">
                <el-button @click="handleRent" type="primary">选择租客</el-button>
                <el-select v-model="param.aaa" placeholder="请选择" clearable>
                  <el-option v-for="item in renterList" :value="item.id" :label="item.name"></el-option>
                </el-select>
              <el-form-item label="租客" prop="renterName">
                <div @click="handleRent">
                  <el-input v-model="form.renterName" readonly placeholder="请点击选择租客" />
                </div>
              </el-form-item>
              <el-form-item label="联系人" prop="">
                <el-select v-model="param.aaa" placeholder="请选择" clearable>
                  <el-option v-for="item in contacts" :value="item.id" :label="item.name"></el-option>
              <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>
        </div>
        <div class="main_house">
          <div class="title">请选择房源</div>
          <el-cascader style="width: 300px" v-model="value" @change="houseChange" :options="options"
            :props="{ multiple: true }" collapse-tags clearable />
          <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 }}㎡
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="file_wrap">
@@ -80,75 +97,228 @@
            <el-button icon="el-icon-plus" plain>添加附件</el-button>
          </el-upload>
        </div>
        <el-table :data="param.list" stripe>
          <el-table-column prop="" label="附件名称" align="center" min-width="100" show-overflow-tooltip />
          <el-table-column prop="" label="操作人" align="center" min-width="100" show-overflow-tooltip />
          <el-table-column prop="" label="操作时间" align="center" min-width="100" show-overflow-tooltip />
          <el-table-column prop="" label="操作" align="center" min-width="100">
            <template v-slot="scope">
              <span class="cu red">删除</span>
        <el-table :data="form.fileList" stripe>
          <el-table-column prop="originname" label="附件名称" align="center" min-width="100" show-overflow-tooltip />
          <el-table-column prop="userName" label="操作人" align="center" min-width="100" show-overflow-tooltip />
          <el-table-column prop="createTime" label="操作时间" align="center" min-width="100" show-overflow-tooltip />
          <el-table-column label="操作" align="center" min-width="100">
            <template slot-scope="{ row }">
              <span class="cu red" @click="dele(row.imgaddr)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template v-if="activeTabs == 1">
    </div>
    <div v-show="activeTabs === 1">
      <div class="tabs cost_tabs">
        <div class="tab" :class="{ active: cactiveTabs == 0 }" @click="ctabsClick(0)">租赁条款</div>
        <div class="tab" :class="{ active: cactiveTabs == 1 }" @click="ctabsClick(1)">物业条款</div>
      </div>
      <div class="main">
        <div class="main_content">
          <el-form :model="paramCost" ref="paramCostRef" :rules="rules">
            <div class="m_title">租赁信息</div>
            <div class="list">
              <el-form-item label="押金金额(元)" prop="type">
                <el-input v-model="paramCost.code" placeholder="请输入" v-trim />
              </el-form-item>
              <el-form-item label="付款方式" prop="code">
                <el-select v-model="paramCost.type" placeholder="请选择" clearable>
                  <el-option v-for="item in payMethods" :value="item.value" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="免租期" prop="aaa">
                <el-date-picker type="daterange" v-model="paramCost.getDate" value-format="yyyy-MM-dd"
                  placeholder="请选择" />
              </el-form-item>
            </div>
            <div class="m_title">租赁条款</div>
            <div class="list">
              <el-form-item label="起始日期" prop="">
                <el-date-picker type="date" v-model="paramCost.getDate" value-format="yyyy-MM-dd" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="合同单价" prop="">
                <el-input placeholder="请输入内容" v-model="paramCost.aaa">
                  <el-select v-model="paramCost.ddd" slot="append" placeholder="请选择" clearable>
                    <el-option v-for="item in unitOps" :value="item.value" :label="item.name"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item label="付款提前天数" prop="">
                <el-input v-model="paramCost.aaa" placeholder="请输入" v-trim />
              </el-form-item>
            </div>
          </el-form>
        <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>
      <el-button style="width: 100%;height: 48px;" type="primary" plain>生成账单明细</el-button>
      <el-table :data="paramCost.list" class="mt20" stripe>
        <el-table-column prop="" label="费用类型" align="center" width="160px" show-overflow-tooltip />
        <el-table-column prop="" label="指数" align="center" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="区间" align="center" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="付款日" align="center" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="应收" align="center" min-width="100" show-overflow-tooltip />
      </el-table>
      <div class="total">
        <span>总计</span>
        <div>费用应收总计：，押金应收总计：</div>
      <!--   租赁条款   -->
      <div v-show="cactiveTabs === 0">
        <div class="main">
          <div class="main_content">
            <el-form :model="form" ref="paramCostRef" :rules="rules">
              <div class="m_title">租赁信息</div>
              <div class="list">
                <el-form-item label="押金金额(元)" prop="zlDeposit">
                  <el-input v-model="form.zlDeposit" @input="clearzl" placeholder="请输入" v-trim />
                </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-select>
                </el-form-item>
                <el-form-item label="免租期" prop="zlDate">
                  <el-date-picker type="daterange" v-model="form.zlDate" @change="getZLDate" value-format="yyyy-MM-dd"
                    placeholder="请选择" />
                </el-form-item>
              </div>
              <div class="m_title">
                <span>租赁条款</span>
                <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">
                  <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-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>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="付款提前天数" :prop="'zlDetailList.' + index + '.advanceDays'" :rules="{
                    required: true, message: '请输入', trigger: 'blur'
                  }">
                    <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>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <el-button style="width: 100%;height: 48px;" type="primary" plain @click="generateZL">生成账单明细</el-button>
        <el-table :data="zlList" class="mt20" stripe>
          <el-table-column label="费用类型" align="center" show-overflow-tooltip>
            <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 label="期数" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-tag type="success" v-if="row.sortnum > 0">{{ row.sortnum }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="区间" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{ row.startDate }} ~ {{ row.endDate }}
            </template>
          </el-table-column>
          <el-table-column prop="planPayDate" 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>
      </div>
    </template>
    <!--  -->
    <MemberSearch ref="MemberSearchRef" />
      <!--   物业条款   -->
      <div v-show="cactiveTabs === 1">
        <div class="main">
          <div class="main_content">
            <el-form :model="form" ref="paramCostRef1" :rules="rules">
              <div class="m_title">物业信息</div>
              <div class="list">
                <el-form-item label="物业押金" prop="wyDeposit">
                  <el-input v-model="form.wyDeposit" @input="clearwy" placeholder="请输入" v-trim />
                </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-select>
                </el-form-item>
                <el-form-item label="免租期" prop="wyDate">
                  <el-date-picker type="daterange" v-model="form.wyDate" @change="getWYDate" value-format="yyyy-MM-dd"
                    placeholder="请选择" />
                </el-form-item>
              </div>
              <div class="m_title">
                <span>物业条款</span>
                <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">
                  <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-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>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="付款提前天数" :prop="'wyDetailList.' + index + '.advanceDays'" :rules="{
                    required: true, message: '请输入', trigger: 'blur'
                  }">
                    <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>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <el-button style="width: 100%;height: 48px;" type="primary" plain @click="generateWY">生成账单明细</el-button>
        <el-table :data="wyList" class="mt20" stripe>
          <el-table-column label="费用类型" align="center" show-overflow-tooltip>
            <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 label="期数" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-tag type="success" v-if="row.sortnum > 0">{{ row.sortnum }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="区间" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{ row.startDate }} ~ {{ row.endDate }}
            </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>
            <template slot-scope="{row}">
              {{ row.receivableFee }}元
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          <span>总计</span>
          <div>费用应收总计：{{ wyPrice }}元，押金应收总计：{{ form.wyDeposit }}元</div>
        </div>
      </div>
    </div>
    <div class="window__footer">
      <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" />
  </GlobalWindow>
</template>

@@ -157,131 +327,505 @@
import BaseOpera from '@/components/base/BaseOpera'
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 {companyListConstract as companyList } from '@/api/company'
import { Message, Loading } from 'element-ui'
import { mapState } from 'vuex'
export default {
  components: {
    GlobalWindow,
    MemberSearch
  },
  extends: BaseOpera,
  computed: {
    ...mapState(['userInfo'])
  },
  data() {
    return {
      showModal: false,
      title: '创建合同',
      activeTabs: '0',
      param: {},
      activeTabs: 0,
      form: {
        type: '',
        code: '',
        userId: '',
        signDate: '',
        startDate: '',
        endDate: '',
        projectId: '',
        roundedUp: 0,
        companyId: '',
        renterId: '',
        renterName: '',
        memberId: '',
        memberName: '',
        fileList: [],

        zlDeposit: '',
        zlPayType: '',
        zlFreeStartDate: '',
        zlFreeEndDate: '',
        zlDate: [],
        zlDetailList: [
          {
            circleType: 0,
            startDate: '',
            endDate: '',
            time: [],
            price: '',
            advanceDays: ''
          }
        ],


        wyDeposit: '',
        wyPayType: '',
        wyFreeStartDate: '',
        wyFreeEndDate: '',
        wyDate: [],
        wyDetailList: [
          {
            circleType: 0,
            startDate: '',
            endDate: '',
            time: [],
            price: '',
            advanceDays: ''
          }
        ],

        roomIds: []
      },

      ids: [],

      zlList: [],
      wyList: [],

      rules,

      contactsList: [],

      loadingInstance: null,
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
      fileList: [],
      uploadData: {
        folder: 'HIDDEN_DANGER_FILE'
        folder: 'YW_CONTRACT_FILE'
      },

      types: [
        { name: '物业+租赁合同', value: 0 },
        { name: '租赁合同', value: 1 },
        { name: '物业合同', value: 2 },
        { name: '租赁合同', value: 2 },
        { name: '物业合同', value: 1 }
      ],
      agentList: [], //经办人
      agentList: [], // 经办人
      projectList: [],
      comparyList: [], // 公司
      renterList: [], // 租客
      contacts: [], // 联系人
      value: [],
      options: [
        {
          value: 1,
          label: '东南',
          children: [{
            value: 2,
            label: '上海',
            children: [
              { value: 3, label: '普陀' },
              { value: 4, label: '黄埔' },
              { value: 5, label: '徐汇' }
            ]
          }, {
            value: 7,
            label: '江苏',
            children: [
              { value: 8, label: '南京' },
              { value: 9, label: '苏州' },
              { value: 10, label: '无锡' }
            ]
          }, {
            value: 12,
            label: '浙江',
            children: [
              { value: 13, label: '杭州' },
              { value: 14, label: '宁波' },
              { value: 15, label: '嘉兴' }
            ]
          }]
        },
        {
          value: 17,
          label: '西北',
          children: [{
            value: 18,
            label: '陕西',
            children: [
              { value: 19, label: '西安' },
              { value: 20, label: '延安' }
            ]
          }, {
            value: 21,
            label: '新疆维吾尔族自治区',
            children: [
              { value: 22, label: '乌鲁木齐' },
              { value: 23, label: '克拉玛依' }
            ]
          }]
        }
      ],
      houseList: [],
      cactiveTabs: 0,
      paramCost: {},
      payMethods: [
        { name: '一次性付款', value: 0 },
        { name: '3个月一付', value: 1 },
        { name: '6个月一付', value: 2 },
        { name: '1年一付', value: 2 },
        { name: '1年一付', value: 3 },
      ],
      unitOps: [
        { name: '元/m²·天', value: 0 },
        { name: '元/m²·月', value: 1 },
        { name: '元/天', value: 2 },
        { name: '元/月', value: 3 },
        { name: '元/年', value: 4 },
        { name: '元/m²·年', value: 5 },
        { name: '元/天', value: 3 },
        { name: '元/月', value: 4 },
        { name: '元/年', value: 5 },
        { name: '元/m²·年', value: 2 },
        { name: '元/场', value: 6 },
      ],
      unitOps1: [
        { name: '元/m²·天', value: 0 },
        { name: '元/m²·月', value: 1 },
        { name: '元/天', value: 3 },
        { name: '元/月', value: 4 },
        { name: '元/年', value: 5 },
        { name: '元/m²·年', value: 2 },
        { name: '元/场', value: 6 },
      ],


      houseLvThree: []
    }
  },
  methods: {
    open(title, target) {
      this.title = title
      this.ids = []
      this.houseList = []
      this.zlPrice = ''
      this.wyPrice = ''
      this.getUser()
      this.getProject()
      this.getCompany()
      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] = ''
          }
        }
        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.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.form.roundedUp = 0
        // this.getHouseTree()
      })
    },
    changePayType(e) {
      if (e === 0) {
        this.unitOps = [
          { name: '元/m²·天', value: 0 },
          { name: '元/m²·月', value: 1 },
          { name: '元/天', value: 3 },
          { name: '元/月', value: 4 },
          { name: '元/年', value: 5 },
          { name: '元/m²·年', value: 2 },
          { name: '元/场', value: 6 },
        ]
      } else {
        this.form.zlDetailList.forEach(item => {
          if (item.circleType === 6) {
            item.circleType = 0
          }
        })
        this.unitOps = [
          { name: '元/m²·天', value: 0 },
          { name: '元/m²·月', value: 1 },
          { name: '元/天', value: 3 },
          { name: '元/月', value: 4 },
          { name: '元/年', value: 5 },
          { name: '元/m²·年', value: 2 }
        ]
      }
      this.clearzl()
    },
    changePayType1(e) {
      if (e === 0) {
        this.unitOps1 = [
          { name: '元/m²·天', value: 0 },
          { name: '元/m²·月', value: 1 },
          { name: '元/天', value: 3 },
          { name: '元/月', value: 4 },
          { name: '元/年', value: 5 },
          { name: '元/m²·年', value: 2 },
          { name: '元/场', value: 6 },
        ]
      } else {
        this.form.wyDetailList.forEach(item => {
          if (item.circleType === 6) {
            item.circleType = 0
          }
        })
        this.unitOps1 = [
          { name: '元/m²·天', value: 0 },
          { name: '元/m²·月', value: 1 },
          { name: '元/天', value: 3 },
          { name: '元/月', value: 4 },
          { name: '元/年', value: 5 },
          { name: '元/m²·年', value: 2 }
        ]
      }
      this.clearwy()
    },
    // 获取联系人
    getYwList() {
      ywList({
        customerId: this.form.renterId
      }).then(res => {
        this.contactsList = res
      })
    },
    getHouseData() {
      if (this.form.startDate && this.form.endDate) {
        this.getHouseTree()
        if (this.form.zlDetailList.length === 1) {
          this.form.zlDetailList[0].startDate = this.form.startDate
          this.form.zlDetailList[0].endDate = this.form.endDate
          this.form.zlDetailList[0].time = [this.form.startDate, this.form.endDate]
        }
        if (this.form.wyDetailList.length === 1) {
          this.form.wyDetailList[0].startDate = this.form.startDate
          this.form.wyDetailList[0].endDate = this.form.endDate
          this.form.wyDetailList[0].time = [this.form.startDate, this.form.endDate]
        }
      }
    },
    changeType(e) {
      if (e === 0 || e === 2) {
        this.cactiveTabs = 0
      } else if (e === 0 || e === 1) {
        this.cactiveTabs = 1
      }
    },
    getDayTime(num) {
      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}`
      } else {
        return `${year + 1}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day - 1 : day - 1}`
      }
    },
    clearzl() {
      this.zlList = []
      this.zlPrice = ''
    },
    clearwy() {
      this.wyList = []
      this.wyPrice = ''
    },
    confirm() {
      var that = this
      if (this.activeTabs === 0) {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          if (this.form.roomIds.length === 0) return this.$message.warning('请选择房源！')
          this.activeTabs = 1
        })
      } else if (this.activeTabs === 1) {
        if (this.form.type === 0) {
          this.$refs.paramCostRef.validate((valid1) => {
            if (!valid1) {
              return
            }
            this.$refs.paramCostRef1.validate((valid2) => {
              if (!valid2) {
                return
              }
              if (that.zlList.length === 0) return that.$message.warning('请先生成租赁账单！')
              if (that.wyList.length === 0) return that.$message.warning('请先生成物业账单！')
              this.submit()
            })
          })
        } else if (this.form.type === 2) {
          this.$refs.paramCostRef.validate((valid1) => {
            if (!valid1) {
              return
            }
            if (that.zlList.length === 0) return that.$message.warning('请先生成租赁账单！')
            this.submit()
          })
        } else if (this.form.type === 1) {
          this.$refs.paramCostRef1.validate((valid2) => {
            if (!valid2) {
              return
            }
            if (that.wyList.length === 0) return that.$message.warning('请先生成物业账单！')
            this.submit()
          })
        }
      }
    },
    submit() {
      // 调用新建接口
      this.isWorking = true
      create({ ...this.form })
        .then(res => {
          this.visible = false
          this.$tip.apiSuccess('创建成功')
          this.$emit('success')
        })
        .finally(() => {
          this.isWorking = false
        })
    },
    getDate1(e, index) {
      this.form.zlDetailList[index].startDate = e[0]
      this.form.zlDetailList[index].endDate = e[1]
      this.clearzl()
    },
    getDate2(e, index) {
      this.form.wyDetailList[index].startDate = e[0]
      this.form.wyDetailList[index].endDate = e[1]
      this.clearwy()
    },
    checkHouseRoom(a, b) {
      this.ids = b.checkedKeys
      let arr = b.checkedKeys.map(item => {
        if (item.split('-')[0] == 3) {
          return Number(item.split('-')[1])
        }
      })
      this.form.roomIds = arr.filter(item => item !== undefined)
    },
    getHouseTree() {
      tree({
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        projectId: this.form.projectId
      })
        .then(res => {
          res.forEach(item => {
            item.disabled = true
          })
          this.addParamToArray(res)
          this.houseList = res
        })
    },
    addParamToArray(arr) {
      for (let i = 0; i < arr.length; i++) {
        const currentItem = arr[i].projectDataVOList
        arr[i].idd = arr[i].lv + '-' + arr[i].id
        if (currentItem.length > 0) {
          this.addParamToArray(currentItem)
        }
      }
    },
    generateZL() {
      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)
          })
          this.zlPrice = zlPrice
          this.zlList = arr
        })
    },
    generateWY() {
      getBillList({ ...this.form, billType: 1 })
        .then(res => {
          this.wy = true
          let zlPrice = 0
          let arr = []
          res.forEach(item => {
            if (item.costType === 1) {
              zlPrice += item.receivableFee
            }
            arr.push(item)
          })
          this.wyPrice = zlPrice
          this.wyList = arr
        })
    },
    addZl() {
      this.form.zlDetailList.push({
        circleType: 0,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        time: [this.form.startDate, this.form.endDate],
        price: '',
        advanceDays: ''
      })
    },
    addWy() {
      this.form.wyDetailList.push({
        circleType: 0,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        time: [this.form.startDate, this.form.endDate],
        price: '',
        advanceDays: ''
      })
    },
    deleZl(index) {
      if (this.form.zlDetailList.length === 1) return Message.warning('至少保留一条！')
      this.form.zlDetailList.splice(index, 1)
      this.clearzl()
    },
    deleWy(index) {
      if (this.form.wyDetailList.length === 1) return Message.warning('至少保留一条！')
      this.form.wyDetailList.splice(index, 1)
      this.clearwy()
    },
    getZLDate(e) {
      this.form.zlFreeStartDate = e[0]
      this.form.zlFreeEndDate = e[1]
      this.clearzl()
    },
    getWYDate(e) {
      this.form.wyFreeStartDate = e[0]
      this.form.wyFreeEndDate = e[1]
      this.clearwy()
    },
    getTenant(row) {
      this.form.renterId = row.id
      this.form.renterName = row.name
      this.form.memberId = ''
      this.form.memberName = ''
      this.getYwList()
    },
    dele(imgaddr) {
      this.form.fileList.forEach((item, index) => {
        if (imgaddr === item.imgaddr) {
          this.form.fileList.splice(index, 1)
        }
      })
    },
    getUser() {
      getUserList({})
        .then(res => {
          this.agentList = res
        })
    },
    getProject() {
      getProjectList({})
        .then(res => {
          this.projectList = res || []
          if (this.projectList.length > 0) {
            this.$set(this.form, 'projectId', this.projectList[0].id)
            this.getHouseTree()
          }
        })
    },
    getCompany() {
      companyList({ type: 2 })
        .then(res => {
          this.comparyList = res
          this.form.companyId = res[0].id
        })
    },
    tabsClick(val) {
      this.activeTabs = val
    },
    ctabsClick(val) {
      this.cactiveTabs = val
    },
    getDetail() {

    },
    handleRent() {
      this.$refs.MemberSearchRef.openModal()
      this.$refs.MemberSearchRef.open()
    },
    houseChange(e) {
      console.log(e)
      console.log(this.value)

    },
    beforeUpload(file) {
      // if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'].indexOf(file.type) == -1) {
      //   this.$message.error('请上传正确的视频/图片格式')
      //   return false
      // }
      this.loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
@@ -296,34 +840,34 @@
        }
      })
    },
    getDay() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1 // 加1使其从1开始
      const day = now.getDate()
      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')}`
    },
    uploadAvatarSuccess(file) {
      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
      this.$nextTick(() => {
        if (this.loadingInstance) {
          this.loadingInstance.close()
        }
      })
      console.log('file', file)
      const item = file.data[0]
      if (['.mp4', '.avi', '.flv', '.wmv'].some(char => item.imgaddr.includes(char))) {
        this.fileList.push({
          type: 1,
          fileurl: item.imgaddr,
          fileurlFull: item.url
        })
      } else {
        this.fileList.push({
          type: 0,
          fileurl: item.imgaddr,
          fileurlFull: item.url
        })
      }
      console.log('file', this.fileList)
      // this.$set(this.param, 'faceImg', file.imgurl)
      // this.$set(this.param, 'faceImgUrl', file.imgurlfull)
      this.form.fileList.push({ ...item, fileurl: item.imgaddr, name: item.originname, userName: this.userInfo.realname, createTime: this.getDay() })
    },
    close() {
      this.showModal = false
      this.$emit('close')
      if (this.activeTabs === 0) {
        this.$emit('close')
        this.visible = false
      } else {
        this.activeTabs = 0
        this.zlList = []
        this.wyList = []
      }
    }
  }
}
@@ -332,6 +876,26 @@
<style lang="scss" scoped>
@import '@/assets/style/variables.scss';

.fixed {
  background: #ffffff;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}
.window__footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  user-select: none;
  border-top: 1px solid #eee;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.tabs {
  border-bottom: 1px solid #DFE2E8;
  display: flex;
@@ -431,5 +995,14 @@
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  span {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 15px;
  }
}
</style>