| | |
| | | :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="m_title">租赁信息</div> |
| | | <div class="list"> |
| | | <el-form-item label="押金金额(元)" prop="zlDeposit"> |
| | | <el-input v-model="form.zlDeposit" placeholder="请输入" v-trim /> |
| | | <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" placeholder="请选择"> |
| | | <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-button type="text" size="medium" @click="addZl">增加</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <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="请选择" /> |
| | | <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="price"> |
| | | <el-input placeholder="请输入" v-model="item.price" class="input-with-select"> |
| | | <el-select v-model="item.circleType" style="width: 150px;" slot="append" placeholder="请选择"> |
| | | <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="advanceDays"> |
| | | <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="item.advanceDays" placeholder="请输入" v-trim /> |
| | | <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> |
| | |
| | | </el-table-column> |
| | | <el-table-column label="期数" align="center" show-overflow-tooltip> |
| | | <template slot-scope="{row}"> |
| | | <el-tag type="success">{{row.sortnum}}</el-tag> |
| | | <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> |
| | |
| | | <div class="m_title">物业信息</div> |
| | | <div class="list"> |
| | | <el-form-item label="物业押金" prop="wyDeposit"> |
| | | <el-input v-model="form.wyDeposit" placeholder="请输入" v-trim /> |
| | | <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" placeholder="请选择"> |
| | | <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-button type="text" size="medium" @click="addWy">增加</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <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="请选择" /> |
| | | <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="price"> |
| | | <el-input placeholder="请输入" v-model="item.price"> |
| | | <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-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="advanceDays"> |
| | | <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="item.advanceDays" placeholder="请输入" v-trim /> |
| | | <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> |
| | |
| | | </el-table-column> |
| | | <el-table-column label="期数" align="center" show-overflow-tooltip> |
| | | <template slot-scope="{row}"> |
| | | <el-tag type="success">{{row.sortnum}}</el-tag> |
| | | <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> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="window__footer" style="position: sticky; bottom: 0; left: 0; z-index: 9; background: #ffffff;"> |
| | | <div class="window__footer"> |
| | | <slot name="footer"> |
| | | <el-button @click="confirm" :loading="confirmWorking" type="primary">{{activeTabs === 0 ? '下一步' : '提交'}}</el-button> |
| | | <slot name="btns" /> |
| | |
| | | startDate: '', |
| | | endDate: '', |
| | | projectId: '', |
| | | roundedUp: '', |
| | | roundedUp: 0, |
| | | companyId: '', |
| | | renterId: '', |
| | | renterName: '', |
| | |
| | | { 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: [] |
| | | } |
| | |
| | | this.title = title |
| | | this.ids = [] |
| | | this.houseList = [] |
| | | this.zlPrice = '' |
| | | this.wyPrice = '' |
| | | this.getUser() |
| | | this.getProject() |
| | | this.getCompany() |
| | |
| | | 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, |
| | |
| | | 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.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 () { |
| | |
| | | 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) { |
| | |
| | | getDayTime (num) { |
| | | const today = new Date(); |
| | | const year = today.getFullYear(); |
| | | const month = today.getMonth() + 1; // 月份是从 0 开始的,因此需要加 1 |
| | | 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 : day}`; |
| | | return `${year + 1}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day - 1 : day - 1}`; |
| | | } |
| | | }, |
| | | 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: '' |
| | | } |
| | | ] |
| | | 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.clearData() |
| | | this.activeTabs = 1 |
| | | }) |
| | | } else if (this.activeTabs === 1) { |
| | |
| | | if (!valid2) { |
| | | return |
| | | } |
| | | if (that.zlList.length === 0) return that.$message.warning('请先生成租赁账单!') |
| | | if (that.wyList.length === 0) return that.$message.warning('请先生成物业账单!') |
| | | this.submit() |
| | | }) |
| | | }) |
| | |
| | | if (!valid1) { |
| | | return |
| | | } |
| | | if (that.zlList.length === 0) return that.$message.warning('请先生成租赁账单!') |
| | | this.submit() |
| | | }) |
| | | } else if (this.form.type === 1) { |
| | |
| | | if (!valid2) { |
| | | return |
| | | } |
| | | if (that.wyList.length === 0) return that.$message.warning('请先生成物业账单!') |
| | | this.submit() |
| | | }) |
| | | } |
| | |
| | | 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 |
| | |
| | | generateWY () { |
| | | getBillList({ ...this.form, billType: 1 }) |
| | | .then(res => { |
| | | this.wy = true |
| | | let zlPrice = 0 |
| | | let arr = [] |
| | | res.forEach(item => { |
| | |
| | | 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 |
| | |
| | | close () { |
| | | if (this.activeTabs === 0) { |
| | | this.$emit('close') |
| | | this.visible = false |
| | | } else { |
| | | this.activeTabs = 0 |
| | | this.zlList = [] |
| | | this.wyList = [] |
| | | } |
| | | } |
| | | } |
| | |
| | | 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; |