OfficeApp/components/newArchives/houseRepair.vue

<template>
  <view>
    <view class="tit">
    	<text v-if="readonly">更新时间: {{update_time}}</text>
    	<text>修房</text>
    </view>
    <view class="card">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="breedingForm">
        <u-form-item labelWidth="auto" label="修房类型" required prop="construction_type" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.construction_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 labelWidth="auto" label="建设面积(m²)" required prop="construction_area" borderBottom>
          <u--input :readonly="readonly" type="number" v-model="formData.construction_area" placeholder="请输入建设面积(m²)"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="房屋风格" required prop="house_style" borderBottom>
          <u--input :readonly="readonly" v-model="formData.house_style" placeholder="请输入房屋风格"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="修建地址" required prop="construction_site" borderBottom>
          <u--input :readonly="readonly" v-model="formData.construction_site" placeholder="请输入修建地址"></u--input>
        </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="afforest" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.afforest" 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="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="house_type" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.house_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 labelWidth="auto" label="修建地照片" required prop="construction_site_img" borderBottom>
          	<u-upload :fileList="formData.construction_site_img?[{url:formData.construction_site_img}]:[]"
          		@afterRead="afterReadAvatar" @delete="formData.construction_site_img=''" :deletable="!readonly" :maxCount="1" width="250rpx" height="180rpx">
              <view class="uplode">
              	<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
              	上传照片
              	<view class="up" style="opacity: 0;">
              	</view>
              </view>
          	</u-upload>
        </u-form-item>
      </u--form>
    
    </view>
  </view>
</template>

<script>
  import {
  	upLoadImage
  } from "@/api/file.js"
  export default {
    props: {
      readonly: {
        type: Boolean,
        default: false
      },
      datas: {
        type: Object,
        default: null
      },
      update_time: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        formData: {
          construction_type: '',
          construction_area: '',
          house_style: '',
          construction_site: '',
          budget: '',
          afforest: '',
          fitment: '',
          house_type: '',
          construction_site_img: ''
        },
        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();;
      },
     // 上传图片
     afterReadAvatar(event) {
     	upLoadImage({
     		filePath: event.file.url,
     		name: 'file'
     	}).then(res => {
     		this.formData.construction_site_img = res.data.uri
     	})
     },
    },
  }
</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;
  }
  
  .uplode {
  	width: 250rpx;
  	height: 180rpx;
  	box-sizing: border-box;
  	padding-top: 30rpx;
  	border-radius: 15rpx;
  	border: 1px solid $theme-oa-color;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: space-around;
  	color: $theme-oa-color;
  	position: relative;
  
  	.up {
  		position: absolute;
  		color: transparent;
  	}
  }
</style>