|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | <!--  :text="activeTabs === 0 ? '下一步' : '提交'"--> | 
|---|
|  |  |  | <!--  :backText="activeTabs === 0 ? '返回' : '上一步'"--> | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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-button type="text" size="medium" @click="addZl">增加</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <template v-for="(item, index) in form.zlDetailList" :key="index"> | 
|---|
|  |  |  | <div 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> | 
|---|
|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  | <!--   物业条款   --> | 
|---|
|  |  |  | 
|---|
|  |  |  | <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 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> | 
|---|
|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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" /> | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 = [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | startDate: '', | 
|---|
|  |  |  | endDate: '', | 
|---|
|  |  |  | time: [], | 
|---|
|  |  |  | price: '', | 
|---|
|  |  |  | advanceDays: '' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | this.form.wyDetailList = [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | startDate: '', | 
|---|
|  |  |  | endDate: '', | 
|---|
|  |  |  | time: [], | 
|---|
|  |  |  | 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() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getHouseData () { | 
|---|
|  |  |  | if (this.form.startDate && this.form.endDate) { | 
|---|
|  |  |  | this.getHouseTree() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeType (e) { | 
|---|
|  |  |  | if (e === 0 || e === 2) { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.cactiveTabs = 1 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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}`; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | confirm () { | 
|---|
|  |  |  | this.$refs.form.validate((valid) => { | 
|---|
|  |  |  | if (!valid) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (this.activeTabs === 0) { | 
|---|
|  |  |  | this.$refs.form.validate((valid) => { | 
|---|
|  |  |  | if (!valid) return | 
|---|
|  |  |  | this.activeTabs = 1 | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } else if (this.activeTabs === 1) { | 
|---|
|  |  |  | if (this.form.type === 0) { | 
|---|
|  |  |  | this.$refs.paramCostRef.validate((valid1) => { | 
|---|
|  |  |  | if (!valid1) { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.submit() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | submit () { | 
|---|
|  |  |  | // 调用新建接口 | 
|---|
|  |  |  | 
|---|
|  |  |  | this.form.roomIds = arr.filter(item => item !== undefined); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getHouseTree () { | 
|---|
|  |  |  | tree({}) | 
|---|
|  |  |  | tree({ | 
|---|
|  |  |  | startDate: this.form.startDate, | 
|---|
|  |  |  | endDate: this.form.endDate | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | res.forEach(item => { | 
|---|
|  |  |  | item.disabled = true | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | 
|---|
|  |  |  | companyList({ type: 2 }) | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | this.comparyList = res | 
|---|
|  |  |  | this.form.companyId = res[0].id | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tabsClick (val) { | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | @import '@/assets/style/variables.scss'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .fixed { | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | position: sticky; | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | left: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .tabs { | 
|---|
|  |  |  | border-bottom: 1px solid #DFE2E8; | 
|---|
|  |  |  | display: flex; | 
|---|