CZC/operationSupport/src/views/assetManagement/housingManagement/add.vue

<template>
  <div class="main">
    <!-- <div class="blockName">{{ !isAdd ? '编辑' : '新增' }}房屋（<span class="show-required-icon-star"></span>为必填项）</div> -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="130px"
    >
      <div class="formContent">
        <div class="formContent-item">
          <el-form-item
            label="社区名称"
            prop="communityId"
          >
            <el-select
              v-model="ruleForm.communityId"
              placeholder="请选择社区名称"
              class="width100"
              @change="communityIdChange"
            >
              <el-option
                v-for="(item, index) in communityList"
                :label="item.communityName"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单元">
            <el-select
              v-model="ruleForm.unitName"
              placeholder="请选择单元"
              class="width100"
              @change="unitNameChange"
            >
              <el-option
                v-for="(item, index) in resunitList"
                :label="item.unitName"
                :value="item.unitName"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="房屋号"
            prop="roomNumber"
          >
            <el-input
              v-model="ruleForm.roomNumber"
              placeholder="请输入房屋号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="住宅类型"
            prop="residenceType"
          >
            <el-select
              v-model="ruleForm.residenceType"
              placeholder="请选择住宅类型"
              class="width100"
            >
              <el-option
                v-for="(item, index) in residenceTypeArr"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋编号">
            <el-input
              v-model="ruleForm.assetNumber"
              placeholder="请输入房屋编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="使用面积">
            <el-input
              v-model="ruleForm.useArea"
              placeholder="请输入使用面积"
            ></el-input>
          </el-form-item>
          <el-form-item label="房屋朝向">
            <el-select
              v-model="ruleForm.orientationOfRoom"
              placeholder="请选择房屋朝向"
              class="width100"
            >
              <el-option
                label="东"
                :value="1"
              ></el-option>
              <el-option
                label="南"
                :value="2"
              ></el-option>
              <el-option
                label="西"
                :value="3"
              ></el-option>
              <el-option
                label="北"
                :value="4"
              ></el-option>
              <el-option
                label="东南"
                :value="5"
              ></el-option>
              <el-option
                label="西南"
                :value="6"
              ></el-option>
              <el-option
                label="西北"
                :value="7"
              ></el-option>
              <el-option
                label="东北"
                :value="8"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋户型">
            <el-input
              v-model="housingType.roomNumber"
              placeholder=""
              style="width: 47px; margin-right: 5px;"
            ></el-input>室
            <el-input
              v-model="housingType.officeNumber"
              placeholder=""
              style="width:47px; margin: 5px;"
            ></el-input>厅
            <el-input
              v-model="housingType.guardNumber"
              placeholder=""
              style="width: 47px; margin-right: 5px;"
            ></el-input>卫
          </el-form-item>
        </div>
        <div class="formContent-item">
          <el-form-item
            label="楼栋"
            prop="buildingId"
          >
            <el-select
              v-model="ruleForm.buildingId"
              placeholder="请选择楼栋"
              class="width100"
              @change="buildingIdChange"
            >
              <el-option
                v-for="(item, index) in buildingList"
                :label="item.buildingName"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="楼层"
            prop="floorNumber"
          >
            <el-select
              v-model="ruleForm.floorNumber"
              placeholder="请选择楼层"
              class="width100"
              @change="floorNumberChange"
            >
              <el-option
                v-for="(items, indexs) in floorNumberList"
                :label="items"
                :value="items"
                :key="indexs"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="房屋类型"
            prop="buildingType"
          >
            <el-select
              v-model="ruleForm.buildingType"
              disabled
              placeholder="请选择房屋类型"
              class="width100"
            >
              <el-option
                label="住宅"
                :value="1"
              ></el-option>
              <el-option
                label="商用"
                :value="2"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="租售类型"
            prop="salesType"
          >
            <el-select
              v-model="ruleForm.salesType"
              placeholder="请选择租售类型"
              class="width100"
            >
              <el-option
                label="可租可售"
                :value="1"
              ></el-option>
              <el-option
                label="只租"
                :value="2"
              ></el-option>
              <el-option
                label="只售"
                :value="3"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="租售状态"
            prop="salesStatus"
          >
            <el-select
              v-model="ruleForm.salesStatus"
              placeholder="请选择租售状态"
              class="width100"
            >
              <el-option
                label="未租售"
                :value="0"
              ></el-option>
              <el-option
                label="已售"
                :value="1"
              ></el-option>
              <el-option
                label="已租"
                :value="2"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="建筑面积">
            <el-input
              v-model="ruleForm.buildingArea"
              placeholder="请输入建筑面积"
            ></el-input>
          </el-form-item>
          <el-form-item label="公摊面积">
            <el-input
              v-model="ruleForm.publicArea"
              placeholder="请输入公摊面积"
            ></el-input>
          </el-form-item>
          <el-form-item label="装修性质">
            <el-select
              v-model="ruleForm.decorateProperties"
              placeholder="请选择装修性质"
              class="width100"
            >
              <el-option
                label="毛胚"
                :value="1"
              ></el-option>
              <el-option
                label="简单装修"
                :value="2"
              ></el-option>
              <el-option
                label="中等装修"
                :value="3"
              ></el-option>
              <el-option
                label="精装修"
                :value="4"
              ></el-option>
              <el-option
                label="豪华装修"
                :value="5"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>

      <el-form-item label="备注信息">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入备注信息"
          v-model="ruleForm.remarks"
          maxlength="300"
          show-word-limit
        >
        </el-input>
      </el-form-item>

    </el-form>
    <!-- <div style="text-align: right">
      <el-button @click="cancelSaving">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
      >保存</el-button>
    </div> -->
  </div>
</template>
<script>
// import { residenceTypeArr } from '../housPublic';
export default {
  props: ['params'],
  data () {
    return {
      buildingList: [], //楼栋下拉选择列表
      unitList: [], //单元下拉选择列表
      floorNumberList: [],
      resunitList: [],
      addEditState: '',
      housingType: {
        //房屋户型，roomNumber为室，officeNumber为厅，guardNumber为卫
        roomNumber: '',
        officeNumber: '',
        guardNumber: ''
      },
      ruleForm: {
        communityId: '', //社区id
        buildingId: '', //楼栋id
        unitName: '', //单元
        floorNumber: '', //单元楼层
        roomNumber: '', //房屋号
        assetNumber: '',
        buildingType: 1, //房屋类型
        useArea: '', //使用面积
        buildingArea: '', //建筑面积
        orientationOfRoom: '', //房屋朝向
        publicArea: '', //公摊面积
        housingType: '', //房屋户型
        decorateProperties: '', //装修性质
        salesStatus: '', //租售状态
        residenceType: '', //商业住户类型
        salesType: '', //租售类型
        remarks: '' //备注
      },
      res: '',
      rules: {
        communityId: [this.$valid.selectRequired('社区')],
        roomNumber: [this.$valid.inputRequired('房屋号')],
        buildingId: [this.$valid.selectRequired('楼栋')],
        floorNumber: [this.$valid.selectRequired('楼层')],
        buildingType: [this.$valid.selectRequired('房屋类型')],
        residenceType: [this.$valid.selectRequired('住宅类型')],
        salesStatus: [this.$valid.selectRequired('租售状态')],
        salesType: [this.$valid.selectRequired('租售类型')]
      },
      // residenceTypeArr: residenceTypeArr.residence
      residenceTypeArr: [],
    };
  },
  components: {},

  computed: {
    communityList () {
      return this.$store.getters['getCommunityArray'];
    }
  },
  watch: {
    'ruleForm.communityId' (newValue, oldValue) {

      if (newValue !== oldValue) {
        this.buildingNameList();

        if (this.ruleForm.floorNumber == '') {
          this.ruleForm.buildingId = '';
          this.ruleForm.unitName = '';
          this.ruleForm.floorNumber = '';
          this.ruleForm.roomNumber = '';
        }

      }
    },
    'ruleForm.buildingId' (newValue, oldValue) {

      if (newValue !== oldValue) {

        this.unitNameList();
        this.unitChoice(newValue);

        if (this.ruleForm.floorNumber == '') {

          this.ruleForm.unitName = '';
          this.ruleForm.floorNumber = '';
          this.ruleForm.roomNumber = '';
        }

      }
    },
    'ruleForm.unitName' (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.unitChoice(newValue);
        if (this.ruleForm.roomNumber == '') {
          this.ruleForm.floorNumber = '';
          this.ruleForm.roomNumber = '';
        }

      }
    },
    unitList (val) {
      if (val.length !== 0) {
        this.unitChoice(this.ruleForm.unitName);
      }
    }
  },
  methods: {
    communityIdChange () {
      this.ruleForm.buildingId = '';
      this.ruleForm.unitName = '';
      this.ruleForm.floorNumber = '';
      this.ruleForm.roomNumber = '';
    },
    buildingIdChange () {
      this.ruleForm.unitName = '';
      this.ruleForm.floorNumber = '';
      this.ruleForm.roomNumber = '';
    },
    unitNameChange () {
      this.ruleForm.floorNumber = '';
      this.ruleForm.roomNumber = '';
    },
    floorNumberChange () {
      this.ruleForm.roomNumber = '';
    },

    submit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ruleForm.housingType =
            this.housingType.roomNumber + ':' + this.housingType.officeNumber + ':' + this.housingType.guardNumber;
          let url = '/czc-community/assets/house/add';
          if (!this.isAdd) {
            url = '/czc-community/assets/house/update';
          }
          this.$http
            .post(url, this.ruleForm)
            .then(({ status, msg }) => {
              if (status == 0) {
                this.$emit('close');
                this.$message.success(msg);
                this.cancelSaving();
              } else {
                this.$message.error(msg);
              }
            })
            .catch(() => { });
        }
      });
    },
    // cancelSaving () {
    //   this.$emit('clerOwnerStatus');
    // },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },

    //查询楼栋下拉列表
    buildingNameList () {
      this.buildingList = [];

      this.$http
        .post('/czc-community/assets/building/list/building', { communityId: this.ruleForm.communityId })
        .then(({ data, status, msg }) => {
          if (0 === status) {
            this.buildingList = data;
          }
        });
    },
    unitNameList () {

      this.unitList = [];
      this.resunitList = [];
      this.$http.get('/czc-community/assets/building/house/find', { id: this.ruleForm.buildingId }).then((res) => {

        if (res.status == 0) {
          if (res.data.buildingUnitList.length != 0) {

            for (let i = 0; i < res.data.buildingUnitList.length; i++) {
              if (res.data.buildingUnitList[i].unitName != null && res.data.buildingUnitList[i].unitName != '') {
                this.resunitList.push(res.data.buildingUnitList[i])
              }
            }
            this.unitList = res.data.buildingUnitList;
          }
        }
      });
    },

    unitChoice (e) {

      this.floorNumberList = [];

      this.unitList.map((item) => {
        this.floorNumberList.push(item.unitFloorList[0].floorNumber);
      });

      this.floorNumberList = Array.from(new Set(this.floorNumberList))
    },

    getDetails (id) {
      this.$http.get('/czc-community/assets/house/find/' + id, {}).then((res) => {
        if (res.status == 0) {

          this.ruleForm = res.data;


          // this.ruleForm.buildingId = res.data.buildingId;
          console.log('this.ruleForm', this.ruleForm);
          if (!!this.ruleForm.housingType) {

            var housingTypes = this.ruleForm.housingType.split(':');
            this.housingType.roomNumber = housingTypes[0];
            this.housingType.officeNumber = housingTypes[1];
            this.housingType.guardNumber = housingTypes[2];
          }
        }
      });
    },

    async housingManagement () {
      this.residenceTypeArr = [];
      var housing = {};
      housing = await this.$http.get('/czc-user-center/dict/selectListByPCodes', { parentDictCodes: 'CZC_HOUSING_MANAGEMENT' });
      for (var k in housing) {
        this.residenceTypeArr.push({
          label: housing[k],
          value: Number(k)
        })
      }
    },


  },
  created () {
    this.housingManagement();
    if (!!this.params.row.id) {
      this.getDetails(this.params.row.id);
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.main {
    padding: 20px;
    background: white;
    .blockName {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e1e3;
    }
}
.formContent {
    display: flex;
    justify-content: space-between;
    .formContent-item {
        width: 49%;
    }
}
.show-required-icon-star {
    &:before {
        content: '*';
        color: #f56c6c;
    }
}
</style>