CZC/operationSupport/src/views/businessManagement/InvestmentResources/stepPage/add.vue

<template>
  <div class="formContent">
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="formContent-item_title">房屋信息</div>
      <el-row>
        <el-col :span="10">
          <el-form-item
            label="招租房屋"
            prop="houseId"
          >
            <el-cascader
              :props="props"
              v-model="formData.houseId"
              :options="informTypes"
              @change="handleChange"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row
        :gutter="60"
        class="ma_bot"
      >
        <el-col :span="24">
          <el-col :span="8">租售类型：{{this.rentSaleType || '-'}}</el-col>
          <el-col :span="8">房屋类型：{{this.houseType || '-'}}</el-col>
          <el-col :span="8">楼层：{{this.floor || '-'}} 层</el-col>
        </el-col>
      </el-row>
      <el-row
        :gutter="60"
        class="ma_bot"
      >
        <el-col :span="24">
          <el-col :span="8">朝向：{{this.orientation || '-'}}</el-col>
          <el-col :span="8">户型：{{this.house || '-室-厅-卫'}}</el-col>
          <el-col :span="8">建筑面积：{{this.builtArea || '-'}}㎡</el-col>
        </el-col>
      </el-row>

      <div class="formContent-item_title">房屋配置</div>
      <el-form-item label="房屋配置">
        <el-row>
          <el-col
            :span="6"
            v-for="(item,index) in houseConfiguration"
            :key="index"
          >
            <el-checkbox-group v-model="formData.config">
              <el-checkbox-button
                :label="item.label"
                :key="item.value"
              >{{item.label}}</el-checkbox-button>
            </el-checkbox-group>
          </el-col>
        </el-row>

      </el-form-item>

      <el-form-item label="房屋亮点">
        <el-row>
          <el-col
            :span="6"
            v-for="(item,index) in houseHighlights"
            :key="index"
          >
            <el-checkbox-group v-model="formData.highLights">
              <el-checkbox-button
                :label="item.label"
                :key="item.value"
              >{{item.label}}</el-checkbox-button>
            </el-checkbox-group>

          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="招租要求">
        <el-row>
          <el-col
            :span="6"
            v-for="(item,index) in rentalRequirements"
            :key="index"
          >
            <el-checkbox-group v-model="formData.requirement">
              <el-checkbox-button
                :label="item.label"
                :key="item.value"
              >{{item.label}}</el-checkbox-button>
            </el-checkbox-group>

          </el-col>
        </el-row>
      </el-form-item>

      <div class="formContent-item_title">招租信息</div>
      <el-form-item
        label="招租标题："
        prop="title"
      >
        <el-col :span="24">
          <el-input
            placeholder="请输入招租标题"
            v-model="formData.title"
            clearable
          >
          </el-input>
        </el-col>
      </el-form-item>

      <el-row>
        <el-col :span="8">
          <el-form-item
            label="租赁方式："
            prop="leaseType"
          >
            <el-radio-group v-model="formData.leaseType">
              <el-radio label="1">整租</el-radio>
              <el-radio label="2">合租</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="月租金额(元)："
            prop="amount"
            label-width="120px"
          >
            <el-input v-model="formData.amount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="收租周期："
            :prop="this.formData.cyclePledge != '' ? 'cyclePress' :'cyclePledge'"
          >
            押
            <el-input
              v-model="formData.cyclePledge"
              placeholder=""
              style="width: 47px; margin-right: 5px;"
            ></el-input>
            付
            <el-input
              v-model="formData.cyclePress"
              placeholder=""
              style="width: 47px; margin-right: 5px;"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="24">
        <el-form-item
          label="房屋图片："
          prop="imageUrl"
        >
          <bz-upload-img
            type="img"
            :uploadArr="pictureArr"
            :limit="9"
          ></bz-upload-img>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item
          label="房屋视频："
          prop="videoUrl"
        >
          <bz-upload-img
            type="video"
            :uploadArr="pictureArred"
            :limit="1"
          ></bz-upload-img>
        </el-form-item>
      </el-col>

      <el-col :span="24">

        <el-form-item label="招商描述：">
          <tinymce
            v-model="formData.introduce"
            ref="endit"
            :height="150"
          />
        </el-form-item>
      </el-col>

    </el-form>
  </div>
</template>




<script>
import Tinymce from '@/components/Tinymce';
export default {
  components: { Tinymce },
  props: ['params'],
  data () {
    return {
      props: { value: 'value', label: 'name', children: 'children', },
      token: {
        [localStorage.getItem('CZC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('CZC_token')
      },
      formData: {
        houseId: '',
        config: [],
        highLights: [],
        requirement: [],
        title: '',
        leaseType: '1',
        cycle: '',
        cyclePledge: '',
        cyclePress: '',
        amount: '',
        imageUrl: '',
        videoUrl: '',
        introduce: '',
        residentId: ''
      },
      pictureArr: [],//房屋图片
      pictureArred: [],//房屋视频
      informTypes: [],//招租房屋
      rentSaleType: '',//租售类型
      houseType: '',//房屋类型
      floor: '',//楼层
      orientation: '',//朝向
      house: '',//户型
      builtArea: '',//建筑面积
      houseConfiguration: [],//房屋配置
      houseHighlights: [],//房屋亮点
      rentalRequirements: [],//招租要求
      rules: {
        houseId: [
          { required: true, message: '请选择招租房屋', trigger: 'change' },
        ],

        title: [
          { required: true, message: '请输入招租标题', trigger: 'blur' },
        ],
        leaseType: [
          { required: true, message: '请选择租赁方式', trigger: 'change' },
        ],
        amount: [
          { required: true, message: '请输入月租金额', trigger: 'blur' },
        ],
        cyclePledge: [
          { required: true, message: '请输入收租周期', trigger: 'blur' },
        ],
        cyclePress: [
          { required: true, message: '请输入收租周期', trigger: 'blur' },
        ],
        imageUrl: [
          { required: true, message: '请选择图片', trigger: 'change' }
        ],
        videoUrl: [
          { required: true, message: '请选择视频', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    pictureArr (val) {
      this.formData.imageUrl = val.join();
    },
    pictureArred (val) {
      this.formData.videoUrl = val.join();
    }
  },
  methods: {
    submit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.formData.houseId = this.formData.houseId[this.formData.houseId.length - 1];
          this.formData.config = this.formData.config.toString();
          this.formData.highLights = this.formData.highLights.toString();
          this.formData.requirement = this.formData.requirement.toString();
          this.formData.cycle = this.formData.cyclePledge + ':' + this.formData.cyclePress;
          let url;
          url = '/czc-community/house/rent/out/add'
          if (this.params.title == 'edit') {
            url = '/czc-community/house/rent/out/update'
          }
          this.$http.post(url, this.formData).then(({ status, data, msg }) => {
            if (status == 0) {
              this.$emit('close');
              this.params.callback()
              this.$message.success(msg);
            }
          })
        } else {

        }
      })
    },
    configuration () {
      this.$api.common.getDictionaryData('CZC_INVESTMENT_CONFIGURATION').then(({ msg, status, data }) => {
        if (status == 0) {
          this.houseConfiguration = [];
          data.map((item, index) => {
            this.houseConfiguration.push({
              label: item.dictValue,
              value: item.dictCode
            })
          })
        }
      })
    },
    highlights () {
      this.$api.common.getDictionaryData('CZC_INVESTMENT_HIGHLIGHTS').then(({ msg, status, data }) => {
        if (status == 0) {
          this.houseHighlights = [];
          data.map((item, index) => {
            this.houseHighlights.push({
              label: item.dictValue,
              value: item.dictCode
            })
          })
        }
      })
    },
    requirements () {
      this.$api.common.getDictionaryData('CZC_INVESTMENT_REQUIREMENTS').then(({ msg, status, data }) => {
        if (status == 0) {
          this.rentalRequirements = [];
          data.map((item, index) => {
            this.rentalRequirements.push({
              label: item.dictValue,
              value: item.dictCode
            })
          })
        }
      })
    },
    handleChange (value) {
      if (value.length != 0) {
        this.$http.get('/czc-community/assets/house/find/' + value[value.length - 1]).then(({ status, data, msg }) => {
          if (status == 0) {
            this.formData.residentId = data.residentId;
            this.rentSaleType = data.salesType == 1 ? '可租可售' : data.salesType == 2 ? '只租' : '只售';
            this.houseType = data.buildingType == 1 ? '住宅' : '商用';
            this.floor = data.floorNumber;
            this.orientation = data.orientationOfRoom == 1 ? '东' : data.orientationOfRoom == 2 ? '南' : data.orientationOfRoom == 3 ? '西' : data.orientationOfRoom == 4 ? '北' : data.orientationOfRoom == 5 ? '东南' : data.orientationOfRoom == 6 ? '西南' : data.orientationOfRoom == 7 ? '西北' : '东北';
            if (data.housingType != null) {
              let housingTypes = data.housingType.split(':');
              this.house = (housingTypes[0] == '' ? '-' : housingTypes[0]) + '室' + (housingTypes[1] == '' ? '-' : housingTypes[1]) + '厅' + (housingTypes[2] == '' ? '-' : housingTypes[2]) + '卫'
            } else {
              this.house = '';
            }
            this.builtArea = data.buildingArea == null ? '-' : data.buildingArea;
          }
        })
      } else {
        this.rentSaleType = '';
        this.houseType = '';
        this.floor = '';
        this.orientation = '';
        this.house = '';
        this.builtArea = '';
      }


    },
    // 获取招租房屋
    getOrgTreeList () {
      this.$http.get('/czc-community/assets/tree/community/find', { buildingType: 1 }).then(({ status, data, msg }) => {
        if (status == 0) {
          this.informTypes = data;
        }
      })
    },
    houseRentFind () {
      this.$http.post(`/czc-community/house/rent/out/find/${this.params.data.rentOutId}`).then(({ status, data, msg }) => {
        if (status == 0) {
          // debugger
          var dataHouseId = data.houseId;
          this.formData = data;

          this.formData.config = (data.config).split(',');
          this.formData.highLights = (data.highLights).split(',');
          this.formData.requirement = (data.requirement).split(',');

          this.formData.cycle = (data.cycle).split(':');
          this.formData.cyclePledge = this.formData.cycle[0];
          this.formData.cyclePress = this.formData.cycle[1];
          this.formData.leaseType = this.formData.leaseType + '';

          this.formData.houseId = [];
          if (data.unitName != null) {
            this.formData.houseId.push(data.communityId + '');
            this.formData.houseId.push(data.buildingId + '');
            this.formData.houseId.push(data.unitName);
            this.formData.houseId.push(dataHouseId + '');
            this.handleChange(this.formData.houseId);
          } else {
            this.formData.houseId.push(data.communityId + '');
            this.formData.houseId.push(data.buildingId + '');
            this.formData.houseId.push(dataHouseId + '');
            this.handleChange(this.formData.houseId);
          }
          this.pictureArr = (this.formData.imageUrl).split(',');
          this.pictureArred = (this.formData.videoUrl).split(',');
        }
      })
    }
  },
  created () {
    this.getOrgTreeList();
    this.configuration();
    this.highlights();
    this.requirements();

    if (this.params.title == "edit") {
      this.houseRentFind();
    }
  }
}


</script>



<style lang="scss" scoped>
.ma_bot {
    margin-bottom: 20px;
}
/deep/ .el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 0px !important;
    margin-bottom: 20px;
    width: 130px;
}
.clickUpload {
    display: flex;
    .clickUpText {
        height: 76px;
        width: 76px;
        border: 1px solid #e0e1e3;
        box-sizing: border-box;
        background: white;
        border-radius: 5px;
        margin-right: 5px;
        z-index: 1;
        img.dataImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }
        .addImg {
            line-height: 76px;
            text-align: center;
            cursor: pointer;
            & > i {
                font-size: 30px;
            }
        }
        video {
            width: 100%;
            height: 100%;
        }
    }
}
</style>