|
@@ -0,0 +1,575 @@
|
|
|
+<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>
|