5 changed files with 431 additions and 184 deletions
@ -0,0 +1,130 @@ |
|||||
|
<template> |
||||
|
<div class=''> |
||||
|
<el-form :inline="true" class="communityHeight" ref="ref_searchform" :label-width="'100px'"> |
||||
|
<el-form-item label="房主姓名" prop="ownerName"> |
||||
|
<el-input v-model.trim="form.ownerName" class="u-item-width-normal" size="small" clearable |
||||
|
placeholder="请输入内容"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系电话" prop="ownerPhone"> |
||||
|
<el-input v-model.trim="form.ownerPhone" class="u-item-width-normal" size="small" clearable |
||||
|
placeholder="请输入联系电话"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="房屋状态" prop="rentFlag"> |
||||
|
<el-select class="u-item-width-normal" v-model.trim="form.rentFlag" placeholder="请选择" size="small" clearable> |
||||
|
<el-option v-for="item in rentList" :key="item.value" :label="item.label" :value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="房屋用途" prop="purpose"> |
||||
|
<el-select v-model.trim="form.purpose" class="u-item-width-normal" placeholder="请选择" size="small" clearable> |
||||
|
<el-option v-for="item in purposeArr" :key="item.dictValue" :label="item.dictName" |
||||
|
:value="item.dictValue"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="更新时间" prop="updateStartDate"> |
||||
|
<el-date-picker v-model.trim="form.updateStartDate" :picker-options="startPickerOptions" |
||||
|
class="u-item-width-daterange" size="small" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
value="yyyy-MM-dd" placeholder="开始时间"> |
||||
|
</el-date-picker> |
||||
|
<span class="u-data-tag">至</span> |
||||
|
<el-date-picker v-model.trim="form.updateEndDate" :picker-options="endPickerOptions" |
||||
|
class="u-item-width-daterange u-data-tag" size="small" type="datetime" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd" placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="居住人数" prop="resiNumber"> |
||||
|
<el-select v-model.trim="form.resiNumber" class="u-item-width-normal" placeholder="请选择" size="small" |
||||
|
clearable> |
||||
|
<el-option v-for="(item, index) in 7" :key="index" :label="index" :value="index"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model.trim="form.remark" class="u-item-width-normal" size="small" clearable placeholder="请输入备注"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
let endDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now(); |
||||
|
if (this.updateStartDate) { |
||||
|
let startTime = new Date(this.updateStartDate); |
||||
|
return ( |
||||
|
time.getTime() > nowData || |
||||
|
time.getTime() < startTime || |
||||
|
time.getTime() === startTime |
||||
|
); |
||||
|
} else { |
||||
|
return time.getTime() > nowData; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
let startDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now(); |
||||
|
return time.getTime() > nowData; |
||||
|
}; |
||||
|
return { |
||||
|
endPickerOptions: { |
||||
|
disabledDate: endDisabledDate, |
||||
|
}, |
||||
|
startPickerOptions: { |
||||
|
disabledDate: startDisabledDate, |
||||
|
}, |
||||
|
form: { |
||||
|
ownerName: "", |
||||
|
ownerPhone: "", |
||||
|
rentFlag: "", |
||||
|
purpose: "", |
||||
|
remark: "", |
||||
|
updateStartDate: "", |
||||
|
updateEndDate: "", |
||||
|
resiNumber: "", |
||||
|
}, |
||||
|
rentList: [ |
||||
|
{ |
||||
|
value: "1", |
||||
|
label: "出租", |
||||
|
}, |
||||
|
{ |
||||
|
value: "2", |
||||
|
label: "闲置", |
||||
|
}, |
||||
|
{ |
||||
|
value: "0", |
||||
|
label: "自住", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3", |
||||
|
label: "未出售", |
||||
|
}, |
||||
|
], |
||||
|
purposeArr: [ |
||||
|
{ dictValue: "1", dictName: "住宅" }, |
||||
|
{ dictValue: "2", dictName: "商业" }, |
||||
|
{ dictValue: "3", dictName: "办公" }, |
||||
|
{ dictValue: "4", dictName: "工业" }, |
||||
|
{ dictValue: "5", dictName: "仓储" }, |
||||
|
{ dictValue: "6", dictName: "商住混用" }, |
||||
|
{ dictValue: "7", dictName: "其他" }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
created() { }, |
||||
|
methods: {}, |
||||
|
components: {}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped></style> |
||||
Loading…
Reference in new issue