| | |
| | | <template> |
| | | <GlobalWindow |
| | | width="100%" |
| | | :title="title" |
| | | :withFooter="false" |
| | | :visible.sync="visible" |
| | | :confirm-working="isWorking" |
| | | @confirm="confirm" |
| | | @close="close"> |
| | | <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 class="list"> |
| | | <el-form-item label="合同类型" prop="type"> |
| | | <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-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-form-item> |
| | | <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-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="signDate"> |
| | | <el-date-picker type="date" v-model="form.signDate" value-format="yyyy-MM-dd" :clearable="false" 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" @change="getHouseData" :clearable="false" 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" @change="getHouseData" :clearable="false" 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" @change="getHouseTree" placeholder="请选择"> |
| | | <el-option v-for="(item, index) in projectList" :key="index" :value="item.id" :label="item.name"></el-option> |
| | | <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="roundedUp"> |
| | |
| | | </el-form-item> |
| | | <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-option v-for="(item, index) in comparyList" :key="index" :value="item.id" |
| | | :label="item.name"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | |
| | | </el-form-item> |
| | | <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-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-input v-model="form.memberName" readonly placeholder="请点击选择租客" />--> |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | <div class="main_house"> |
| | | <div class="title">请选择房源</div> |
| | | <el-tree |
| | | :data="houseList" |
| | | show-checkbox |
| | | node-key="idd" |
| | | @check="checkHouseRoom" |
| | | :default-expanded-keys="ids" |
| | | :default-checked-keys="ids" |
| | | :props="{ children: 'projectDataVOList', label: 'name' }"> |
| | | <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> |
| | | <div v-show="activeTabs === 1"> |
| | | <div class="tabs cost_tabs"> |
| | | <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 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> |
| | | <!-- 租赁条款 --> |
| | | <div v-show="cactiveTabs === 0"> |
| | |
| | | <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-option v-for="(item, index) in payMethods" :key="index" :value="item.value" :label="item.name"></el-option> |
| | | <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-button type="text" size="medium" @click="addZl">增加</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <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="请选择" /> |
| | | <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-option v-for="(item, index) in unitOps" :key="index" :value="item.value" :label="item.name"></el-option> |
| | | <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-link :underline="false" type="danger" @click="deleZl(index)" style="margin-left: 20px; flex-shrink: 0;">删除</el-link> |
| | | <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> |
| | |
| | | </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> |
| | | <template slot-scope="{row}"> |
| | | {{row.startDate}} ~ {{row.endDate}} |
| | | {{ 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}}元 |
| | | {{ 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> |
| | | <!-- 物业条款 --> |
| | |
| | | <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-option v-for="(item, index) in payMethods" :key="index" :value="item.value" :label="item.name"></el-option> |
| | | <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-button type="text" size="medium" @click="addWy">增加</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <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="请选择" /> |
| | | <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-link :underline="false" type="danger" @click="deleWy(index)" style="margin-left: 20px; flex-shrink: 0;">删除</el-link> |
| | | <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> |
| | |
| | | </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> |
| | | <template slot-scope="{row}"> |
| | | {{row.startDate}} ~ {{row.endDate}} |
| | | {{ 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}}元 |
| | | {{ 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> |
| | | <el-button @click="confirm" :loading="confirmWorking" type="primary">{{ activeTabs === 0 ? '下一步' : |
| | | '提交'}}</el-button> |
| | | <slot name="btns" /> |
| | | <el-button @click="close">{{activeTabs === 0 ? '返回' : '上一步'}}</el-button> |
| | | <el-button @click="close">{{ activeTabs === 0 ? '返回' : '上一步' }}</el-button> |
| | | </slot> |
| | | </div> |
| | | <!-- 选择租客 --> |
| | |
| | | computed: { |
| | | ...mapState(['userInfo']) |
| | | }, |
| | | data () { |
| | | data() { |
| | | return { |
| | | title: '创建合同', |
| | | activeTabs: 0, |
| | |
| | | startDate: '', |
| | | endDate: '', |
| | | projectId: '', |
| | | roundedUp: '', |
| | | roundedUp: 0, |
| | | companyId: '', |
| | | renterId: '', |
| | | renterName: '', |
| | | memberId: '', |
| | | memberName: '', |
| | | fileList: [], |
| | | |
| | | |
| | | zlDeposit: '', |
| | | zlPayType: '', |
| | | zlFreeStartDate: '', |
| | |
| | | advanceDays: '' |
| | | } |
| | | ], |
| | | |
| | | |
| | | wyDeposit: '', |
| | | wyPayType: '', |
| | | wyFreeStartDate: '', |
| | |
| | | advanceDays: '' |
| | | } |
| | | ], |
| | | |
| | | |
| | | roomIds: [] |
| | | }, |
| | | |
| | | |
| | | ids: [], |
| | | |
| | | |
| | | zlList: [], |
| | | wyList: [], |
| | | |
| | | |
| | | rules, |
| | | |
| | | |
| | | contactsList: [], |
| | | |
| | | loadingInstance: null, |
| | |
| | | { 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: 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) { |
| | | open(title, target) { |
| | | 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 () { |
| | | getYwList() { |
| | | ywList({ |
| | | customerId: this.form.renterId |
| | | }).then(res => { |
| | | this.contactsList = res |
| | | }) |
| | | }, |
| | | getHouseData () { |
| | | 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) { |
| | | 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; // 月份是从 0 开始的,因此需要加 1 |
| | | const day = today.getDate(); |
| | | 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}`; |
| | | 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 = '' |
| | | }, |
| | | confirm () { |
| | | 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() |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | submit () { |
| | | submit() { |
| | | // 调用新建接口 |
| | | this.isWorking = true |
| | | create({ ...this.form }) |
| | |
| | | this.isWorking = false |
| | | }) |
| | | }, |
| | | getDate1 (e, index) { |
| | | getDate1(e, index) { |
| | | this.form.zlDetailList[index].startDate = e[0] |
| | | this.form.zlDetailList[index].endDate = e[1] |
| | | this.clearzl() |
| | | }, |
| | | getDate2 (e, index) { |
| | | getDate2(e, index) { |
| | | this.form.wyDetailList[index].startDate = e[0] |
| | | this.form.wyDetailList[index].endDate = e[1] |
| | | this.clearwy() |
| | | }, |
| | | checkHouseRoom (a, b) { |
| | | 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); |
| | | this.form.roomIds = arr.filter(item => item !== undefined) |
| | | }, |
| | | getHouseTree () { |
| | | getHouseTree() { |
| | | tree({ |
| | | startDate: this.form.startDate, |
| | | endDate: this.form.endDate, |
| | |
| | | }, |
| | | addParamToArray(arr) { |
| | | for (let i = 0; i < arr.length; i++) { |
| | | const currentItem = arr[i].projectDataVOList; |
| | | const currentItem = arr[i].projectDataVOList |
| | | arr[i].idd = arr[i].lv + '-' + arr[i].id |
| | | if (currentItem.length > 0) { |
| | | this.addParamToArray(currentItem); |
| | | this.addParamToArray(currentItem) |
| | | } |
| | | } |
| | | }, |
| | | generateZL () { |
| | | generateZL() { |
| | | getBillList({ ...this.form, billType: 0 }) |
| | | .then(res => { |
| | | let zlPrice = 0 |
| | |
| | | this.zlList = arr |
| | | }) |
| | | }, |
| | | generateWY () { |
| | | generateWY() { |
| | | getBillList({ ...this.form, billType: 1 }) |
| | | .then(res => { |
| | | this.wy = true |
| | | let zlPrice = 0 |
| | | let arr = [] |
| | | res.forEach(item => { |
| | |
| | | this.wyList = arr |
| | | }) |
| | | }, |
| | | addZl () { |
| | | addZl() { |
| | | this.form.zlDetailList.push({ |
| | | circleType: 0, |
| | | startDate: this.form.startDate, |
| | |
| | | advanceDays: '' |
| | | }) |
| | | }, |
| | | addWy () { |
| | | addWy() { |
| | | this.form.wyDetailList.push({ |
| | | circleType: 0, |
| | | startDate: this.form.startDate, |
| | |
| | | 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) { |
| | | getZLDate(e) { |
| | | this.form.zlFreeStartDate = e[0] |
| | | this.form.zlFreeEndDate = e[1] |
| | | this.clearzl() |
| | | }, |
| | | getWYDate (e) { |
| | | getWYDate(e) { |
| | | this.form.wyFreeStartDate = e[0] |
| | | this.form.wyFreeEndDate = e[1] |
| | | this.clearwy() |
| | | }, |
| | | getTenant (row) { |
| | | getTenant(row) { |
| | | this.form.renterId = row.id |
| | | this.form.renterName = row.name |
| | | this.form.memberId = '' |
| | | this.form.memberName = '' |
| | | this.getYwList() |
| | | }, |
| | | dele (imgaddr) { |
| | | dele(imgaddr) { |
| | | this.form.fileList.forEach((item, index) => { |
| | | if (imgaddr === item.imgaddr) { |
| | | this.form.fileList.splice(index, 1) |
| | | } |
| | | }) |
| | | }, |
| | | getUser () { |
| | | getUser() { |
| | | getUserList({}) |
| | | .then(res => { |
| | | this.agentList = res |
| | | }) |
| | | }, |
| | | getProject () { |
| | | getProject() { |
| | | getProjectList({}) |
| | | .then(res => { |
| | | this.projectList = res |
| | | this.projectList = res || [] |
| | | if (this.projectList.length > 0) { |
| | | this.$set(this.form, 'projectId', this.projectList[0].id) |
| | | this.getHouseTree() |
| | | } |
| | | }) |
| | | }, |
| | | getCompany () { |
| | | getCompany() { |
| | | companyList({ type: 2 }) |
| | | .then(res => { |
| | | this.comparyList = res |
| | | this.form.companyId = res[0].id |
| | | }) |
| | | }, |
| | | tabsClick (val) { |
| | | tabsClick(val) { |
| | | this.activeTabs = val |
| | | }, |
| | | ctabsClick (val) { |
| | | ctabsClick(val) { |
| | | this.cactiveTabs = val |
| | | }, |
| | | handleRent () { |
| | | handleRent() { |
| | | this.$refs.MemberSearchRef.open() |
| | | }, |
| | | houseChange (e) { |
| | | houseChange(e) { |
| | | console.log(e) |
| | | }, |
| | | beforeUpload (file) { |
| | | beforeUpload(file) { |
| | | this.loadingInstance = Loading.service({ |
| | | lock: true, |
| | | text: 'Loading', |
| | |
| | | background: 'rgba(0, 0, 0, 0.7)' |
| | | }) |
| | | }, |
| | | uploadError () { |
| | | uploadError() { |
| | | this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭 |
| | | if (this.loadingInstance) { |
| | | this.loadingInstance.close() |
| | | } |
| | | }) |
| | | }, |
| | | getDay () { |
| | | getDay() { |
| | | const now = new Date() |
| | | const year = now.getFullYear() |
| | | const month = now.getMonth() + 1 // 加1使其从1开始 |
| | |
| | | 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')}`; |
| | | 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) { |
| | | uploadAvatarSuccess(file) { |
| | | this.$nextTick(() => { |
| | | if (this.loadingInstance) { |
| | | this.loadingInstance.close() |
| | |
| | | const item = file.data[0] |
| | | this.form.fileList.push({ ...item, fileurl: item.imgaddr, name: item.originname, userName: this.userInfo.realname, createTime: this.getDay() }) |
| | | }, |
| | | close () { |
| | | close() { |
| | | if (this.activeTabs === 0) { |
| | | this.$emit('close') |
| | | } else { |
| | | this.activeTabs = 0 |
| | | this.zlList = [] |
| | | this.wyList = [] |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | @import '@/assets/style/variables.scss'; |
| | | |
| | | .fixed { |
| | | background: #ffffff; |
| | | position: sticky; |
| | |
| | | left: 0; |
| | | z-index: 999; |
| | | } |
| | | |
| | | .tabs { |
| | | border-bottom: 1px solid #DFE2E8; |
| | | display: flex; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | span { |
| | | font-weight: 500; |
| | | font-size: 14px; |