OfficeApp/components/newArchives/houseTransaction.vue
2023-09-06 15:55:17 +08:00

198 lines
6.3 KiB
Vue

<template>
<view>
<view class="tit">
<text v-if="readonly">更新时间: {{update_time}}</text>
<text>买卖房</text>
</view>
<view class="card">
<!-- <view class="title">买卖房</view> -->
<u--form labelPosition="left" :model="formData" :rules="rules" ref="breedingForm">
<u-form-item labelWidth="auto" label="地点" required prop="place" borderBottom>
<u--input :readonly="readonly" v-model="formData.place" placeholder="请输入房屋地点"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="房型" required prop="house_type" borderBottom>
<u--input :readonly="readonly" v-model="formData.house_type" placeholder="请输入房型"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="几房" required prop="rooms" borderBottom>
<u--input :readonly="readonly" v-model="formData.rooms" placeholder="请输入几房"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="面积(m²)" required prop="house_area" borderBottom>
<u--input :readonly="readonly" v-model="formData.house_area" type="number" placeholder="请输入房屋面积(m²)"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="朝向" required prop="orientation" borderBottom>
<u--input :readonly="readonly" v-model="formData.orientation" placeholder="请输入房屋朝向"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="楼层" required prop="floor" borderBottom>
<u--input :readonly="readonly" v-model="formData.floor" type="number" placeholder="请输入楼层"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="装修类型" required prop="fitment" borderBottom>
<u-radio-group :disabled="readonly" v-model="formData.fitment" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'精装'},{value:0,label:'清水'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" label="预算" required prop="budget" borderBottom>
<u--input :readonly="readonly" v-model="formData.budget" placeholder="请输入预算"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="付款类型" required prop="payment_type" borderBottom>
<u-radio-group :disabled="readonly" v-model="formData.payment_type" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'按揭'},{value:0,label:'全款'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
</u-form-item>
</u--form>
</view>
</view>
</template>
<script>
export default {
props: {
readonly: {
type: Boolean,
default: false
},
datas: {
type: Object,
default: null
},
update_time: {
type: String,
default: null
}
},
data() {
return {
formData: {
place: "",
house_type: "",
rooms: "",
house_area: "",
orientation:"",
floor: "",
fitment: "",
budget: "",
payment_type: ""
},
rules: {
}
}
},
created() {
this.initRules();
if (this.$props.readonly && this.$props.datas) {
this.formData = this.$props.datas;
let keys = Object.keys(this.formData);
keys.forEach(item => {
if (!isNaN(this.formData[item]) && this.formData[item] != '' && this.formData[item] != null && this
.formData[item] != undefined) {
parseFloat(this.formData[item]) != 'NaN' ? this.formData[item] = parseFloat(this.formData[item]) : null;
}
})
}
},
watch: {
datas(newValue, oldValue) {
if (this.$props.readonly && newValue) {
this.formData = this.$props.datas;
let keys = Object.keys(this.formData);
keys.forEach(item => {
if (!isNaN(this.formData[item]) && this.formData[item] != '' && this.formData[item] != null && this
.formData[item] != undefined) {
parseFloat(this.formData[item]) != 'NaN' ? this.formData[item] = parseFloat(this.formData[item]) :
null;
}
})
}
}
},
methods: {
// 初始化校验
initRules() {
let arr = Object.keys(this.formData);
arr.forEach(key => {
this.rules[key] = {
validator: (rule, value, callback) => {
this.$refs.breedingForm.clearValidate(rule.field);
value.trim() !== '' ? callback() : callback('不能为空');
},
trigger: ['change', 'blur']
}
})
},
// 校验
async validate() {
return await this.$refs.breedingForm.validate();;
},
},
}
</script>
<style lang="scss">
.card {
background-color: #fff;
margin: 28rpx;
padding: 28rpx;
margin-top: 0;
padding-top: 0;
border-radius: 0 0 14rpx 14rpx;
}
.tit {
margin: 28rpx 28rpx 0 28rpx;
padding: 28rpx 28rpx 0 28rpx;
border-radius: 14rpx 14rpx 0 0;
background-color: $theme-oa-color;
color: white;
height: 100rpx;
display: flex;
justify-content: space-between;
}
.title {
font-weight: 500;
font-size: 34rpx;
&::before {
width: 8rpx;
height: 26rpx;
border-radius: 4rpx;
background-color: #0122c7;
content: "";
display: inline-block;
margin-right: 8rpx;
}
}
.delete {
margin: 22rpx 0;
// margin-bottom: 40rpx;
width: 100%;
height: 64rpx;
line-height: 64rpx;
background: #f56c6c;
border-radius: 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
}
.plus {
margin: 22rpx 0;
// margin-bottom: 40rpx;
width: 100%;
height: 64rpx;
line-height: 64rpx;
background: $theme-oa-color;
border-radius: 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
}
</style>