| | |
| | | <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-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> |
| | |
| | | </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-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> |
| | |
| | | </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 |
| | | } |
| | | }, |
| | | 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}`; |
| | | } |
| | | }, |
| | | confirm () { |
| | | 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 () { |
| | | 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; |