|  | @@ -0,0 +1,660 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +    <div class="main">
 | 
	
		
			
				|  |  | +        <div></div>
 | 
	
		
			
				|  |  | +        <div class="formContent">
 | 
	
		
			
				|  |  | +            <div class="formContent-item">
 | 
	
		
			
				|  |  | +                <div class="formContent-item_title">基础信息</div>
 | 
	
		
			
				|  |  | +                <div class="formContent-formList">
 | 
	
		
			
				|  |  | +                    <zz-form :cols="formCols" :data="formData" :rules="formRules" :errors="formErrors" labelWidth="70" ref="form">
 | 
	
		
			
				|  |  | +                        <!-- 添加编辑 -->
 | 
	
		
			
				|  |  | +                        <template>
 | 
	
		
			
				|  |  | +                            <template slot="sex">
 | 
	
		
			
				|  |  | +                                <el-radio v-model="formData.sex" :label="0">未知</el-radio>
 | 
	
		
			
				|  |  | +                                <el-radio v-model="formData.sex" :label="1">男</el-radio>
 | 
	
		
			
				|  |  | +                                <el-radio v-model="formData.sex" :label="2">女</el-radio>
 | 
	
		
			
				|  |  | +                            </template>
 | 
	
		
			
				|  |  | +                            <template slot="remarks">
 | 
	
		
			
				|  |  | +                                <el-input type="textarea" v-model="formData.remark" maxlength="50" placeholder="请输入备注"> </el-input>
 | 
	
		
			
				|  |  | +                            </template>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                    </zz-form>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    <template>
 | 
	
		
			
				|  |  | +                        <div class="clickUpload">
 | 
	
		
			
				|  |  | +                            <div class="clickUpText">
 | 
	
		
			
				|  |  | +                                <img class="dataImg" v-if="!!formData.facePictureUrl" :src="formData.facePictureUrl" />
 | 
	
		
			
				|  |  | +                                <template v-else>
 | 
	
		
			
				|  |  | +                                    <img class="bg-img" src="@/assets/img/ownerManagement/img_zhaopian2@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                                    <div>点击添加人脸照片</div>
 | 
	
		
			
				|  |  | +                                </template>
 | 
	
		
			
				|  |  | +                            </div>
 | 
	
		
			
				|  |  | +                            <el-upload
 | 
	
		
			
				|  |  | +                                :headers="token"
 | 
	
		
			
				|  |  | +                                ref="uploaduserlogo"
 | 
	
		
			
				|  |  | +                                class="mini-upload"
 | 
	
		
			
				|  |  | +                                limit="1"
 | 
	
		
			
				|  |  | +                                action="/sc-community/upload/uploadFile"
 | 
	
		
			
				|  |  | +                                :on-success="uploadsuccess"
 | 
	
		
			
				|  |  | +                                :before-upload="beforeAvatarUpload"
 | 
	
		
			
				|  |  | +                                :auto-upload="true"
 | 
	
		
			
				|  |  | +                                name="file"
 | 
	
		
			
				|  |  | +                            >
 | 
	
		
			
				|  |  | +                            </el-upload>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                    </template>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            <div class="formContent-item">
 | 
	
		
			
				|  |  | +                <div class="formContent-item_title">证件信息</div>
 | 
	
		
			
				|  |  | +                <zz-form :cols="formCols2" :data="formData" :errors="formErrors" labelWidth="70">
 | 
	
		
			
				|  |  | +                    <!-- 添加编辑 -->
 | 
	
		
			
				|  |  | +                    <template>
 | 
	
		
			
				|  |  | +                        <template slot="idType">
 | 
	
		
			
				|  |  | +                            <el-select v-model="formData.idType" clearable class="width100">
 | 
	
		
			
				|  |  | +                                <el-option v-for="(item, index) in idTypeArray" :key="index" :label="item.label" :value="item.status">{{
 | 
	
		
			
				|  |  | +                                    item.label
 | 
	
		
			
				|  |  | +                                }}</el-option>
 | 
	
		
			
				|  |  | +                            </el-select>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        <template slot="nationality">
 | 
	
		
			
				|  |  | +                            <el-select v-model="formData.nationality" clearable class="width100">
 | 
	
		
			
				|  |  | +                                <el-option
 | 
	
		
			
				|  |  | +                                    v-for="(item, index) in nationalityArray"
 | 
	
		
			
				|  |  | +                                    :key="index"
 | 
	
		
			
				|  |  | +                                    :label="item.label"
 | 
	
		
			
				|  |  | +                                    :value="item.status"
 | 
	
		
			
				|  |  | +                                    >{{ item.label }}</el-option
 | 
	
		
			
				|  |  | +                                >
 | 
	
		
			
				|  |  | +                            </el-select>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                        <template slot="nativePlace">
 | 
	
		
			
				|  |  | +                            <el-select v-model="formData.nativePlace" clearable class="width100">
 | 
	
		
			
				|  |  | +                                <el-option v-for="(item, index) in nativePlaceArray" :key="index" :label="item.name" :value="item.code">{{
 | 
	
		
			
				|  |  | +                                    item.name
 | 
	
		
			
				|  |  | +                                }}</el-option>
 | 
	
		
			
				|  |  | +                            </el-select>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        <template slot="nation">
 | 
	
		
			
				|  |  | +                            <el-select v-model="formData.nation" clearable class="width100">
 | 
	
		
			
				|  |  | +                                <el-option v-for="(item, index) in nationArray" :key="index" :label="item.name" :value="item.code">{{
 | 
	
		
			
				|  |  | +                                    item.name
 | 
	
		
			
				|  |  | +                                }}</el-option>
 | 
	
		
			
				|  |  | +                            </el-select>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                        <template slot="birthDate">
 | 
	
		
			
				|  |  | +                            <el-date-picker
 | 
	
		
			
				|  |  | +                                class="width100"
 | 
	
		
			
				|  |  | +                                v-model="formData.birthDate"
 | 
	
		
			
				|  |  | +                                value-format="yyyy-MM-dd HH:mm:ss"
 | 
	
		
			
				|  |  | +                                type="date"
 | 
	
		
			
				|  |  | +                                :picker-options="pickerOptions"
 | 
	
		
			
				|  |  | +                                placeholder="选择日期"
 | 
	
		
			
				|  |  | +                            >
 | 
	
		
			
				|  |  | +                            </el-date-picker>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        <template slot="effectiveDate">
 | 
	
		
			
				|  |  | +                            <el-date-picker
 | 
	
		
			
				|  |  | +                                class="width100"
 | 
	
		
			
				|  |  | +                                v-model="effectiveDate"
 | 
	
		
			
				|  |  | +                                value-format="yyyy-MM-dd HH:mm:ss"
 | 
	
		
			
				|  |  | +                                type="daterange"
 | 
	
		
			
				|  |  | +                                range-separator="至"
 | 
	
		
			
				|  |  | +                                start-placeholder="选择开始日期"
 | 
	
		
			
				|  |  | +                                end-placeholder="选择结束日期"
 | 
	
		
			
				|  |  | +                                @change="effectiveDateToggle"
 | 
	
		
			
				|  |  | +                                :editable="false"
 | 
	
		
			
				|  |  | +                            ></el-date-picker>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                    </template>
 | 
	
		
			
				|  |  | +                </zz-form>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            <div class="formContent-item">
 | 
	
		
			
				|  |  | +                <div class="formContent-item_title"><span class="show-required-icon-star"></span> 绑定房产和车位</div>
 | 
	
		
			
				|  |  | +                <div class="formContent-formList house" v-for="(item, index) in formData.houseList" :key="index">
 | 
	
		
			
				|  |  | +                    <div class="block-title">
 | 
	
		
			
				|  |  | +                        <div class="floor list-title">
 | 
	
		
			
				|  |  | +                            {{
 | 
	
		
			
				|  |  | +                                `${item.buildingName} ${
 | 
	
		
			
				|  |  | +                                    item.unitName.indexOf('单元') !== -1 ? item.unitName : !!item.unitName ? item.unitName + '单元' : ''
 | 
	
		
			
				|  |  | +                                }${item.roomNumber}`
 | 
	
		
			
				|  |  | +                            }}
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                        <span class="remove list-title" @click="removeHouse(index)">移除</span>
 | 
	
		
			
				|  |  | +                        <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                        <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_building@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    <zz-form :cols="formCols3" :data="item" :rules="formRules" :errors="formErrors" labelWidth="70">
 | 
	
		
			
				|  |  | +                        <!-- 添加编辑 -->
 | 
	
		
			
				|  |  | +                        <template>
 | 
	
		
			
				|  |  | +                            <template slot="householdType">
 | 
	
		
			
				|  |  | +                                <el-select v-model="item.householdType" clearable>
 | 
	
		
			
				|  |  | +                                    <el-option
 | 
	
		
			
				|  |  | +                                        v-for="(item, index) in householdTypeArray"
 | 
	
		
			
				|  |  | +                                        :key="index"
 | 
	
		
			
				|  |  | +                                        :label="item.label"
 | 
	
		
			
				|  |  | +                                        :value="item.status"
 | 
	
		
			
				|  |  | +                                        >{{ item.label }}</el-option
 | 
	
		
			
				|  |  | +                                    >
 | 
	
		
			
				|  |  | +                                </el-select>
 | 
	
		
			
				|  |  | +                            </template>
 | 
	
		
			
				|  |  | +                            <template slot="checkInDate">
 | 
	
		
			
				|  |  | +                                <el-date-picker
 | 
	
		
			
				|  |  | +                                    v-model="item.checkInDate"
 | 
	
		
			
				|  |  | +                                    value-format="yyyy-MM-dd HH:mm:ss"
 | 
	
		
			
				|  |  | +                                    type="date"
 | 
	
		
			
				|  |  | +                                    placeholder="选择日期"
 | 
	
		
			
				|  |  | +                                >
 | 
	
		
			
				|  |  | +                                </el-date-picker> </template
 | 
	
		
			
				|  |  | +                        ></template>
 | 
	
		
			
				|  |  | +                    </zz-form>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    <div class="block-title car" v-for="(items, indexs) in item.parkingList" :key="indexs">
 | 
	
		
			
				|  |  | +                        <div class="floor list-title">{{ `${items.garageName}${items.partitionName}-${items.parkingNumber}` }}</div>
 | 
	
		
			
				|  |  | +                        <span class="remove list-title" @click="removeCard(indexs, item)">移除</span>
 | 
	
		
			
				|  |  | +                        <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                        <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_car@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <div class="addHouse block-title" v-if="!!formData.houseList.length" @click="addCard(item)">
 | 
	
		
			
				|  |  | +                        <div class="floor list-title">绑定车位</div>
 | 
	
		
			
				|  |  | +                        <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                        <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_car@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                        <img class="add" src="@/assets/img/ownerManagement/btn_add@2x.png" />
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <el-button class="removeHouseButton" type="primary" @click="removeHouse(index)" v-if="formData.houseList.length !== 0"
 | 
	
		
			
				|  |  | +                        >删除房产</el-button
 | 
	
		
			
				|  |  | +                    >
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="addHouse block-title" v-if="formData.houseList.length == 0" @click="addHouse()">
 | 
	
		
			
				|  |  | +                    <div class="floor list-title">绑定房产</div>
 | 
	
		
			
				|  |  | +                    <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                    <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_building@2x.png" alt="" />
 | 
	
		
			
				|  |  | +                    <img class="add" src="@/assets/img/ownerManagement/btn_add@2x.png" />
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <el-button class="addHouseButton" type="primary" @click="addHouse()" v-if="formData.houseList.length !== 0"
 | 
	
		
			
				|  |  | +                    >新增房产</el-button
 | 
	
		
			
				|  |  | +                >
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        <div class="buttons">
 | 
	
		
			
				|  |  | +            <el-button @click="closes">取消</el-button>
 | 
	
		
			
				|  |  | +            <el-button type="primary" @click="addEdit()">保存</el-button>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +    name: 'ownerManagementAdd',
 | 
	
		
			
				|  |  | +    props: {
 | 
	
		
			
				|  |  | +        params: {
 | 
	
		
			
				|  |  | +            type: Object
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        islook: {
 | 
	
		
			
				|  |  | +            type: Boolean,
 | 
	
		
			
				|  |  | +            default: false
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        isAdd: {
 | 
	
		
			
				|  |  | +            type: Boolean,
 | 
	
		
			
				|  |  | +            default: true
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    filters: {
 | 
	
		
			
				|  |  | +        matchingVal(val, arr) {
 | 
	
		
			
				|  |  | +            let v = '';
 | 
	
		
			
				|  |  | +            if (!!val) {
 | 
	
		
			
				|  |  | +                arr.forEach((item) => {
 | 
	
		
			
				|  |  | +                    if (!!item.status && item.status === val) {
 | 
	
		
			
				|  |  | +                        v = item.label;
 | 
	
		
			
				|  |  | +                    } else if (!!item.code && item.code === val) {
 | 
	
		
			
				|  |  | +                        v = item.name;
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                });
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            return v;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    data() {
 | 
	
		
			
				|  |  | +        return {
 | 
	
		
			
				|  |  | +            token: {
 | 
	
		
			
				|  |  | +                [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            pickerOptions: {
 | 
	
		
			
				|  |  | +                disabledDate(val) {
 | 
	
		
			
				|  |  | +                    // return val.getTime() < Date.now() - 8.64e7;
 | 
	
		
			
				|  |  | +                    return +new Date(val) > +new Date();
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            effectiveDate: [],
 | 
	
		
			
				|  |  | +            formData: {
 | 
	
		
			
				|  |  | +                name: '',
 | 
	
		
			
				|  |  | +                phone: '',
 | 
	
		
			
				|  |  | +                personnelNumber: '',
 | 
	
		
			
				|  |  | +                sex: 0,
 | 
	
		
			
				|  |  | +                remarks: '',
 | 
	
		
			
				|  |  | +                facePictureUrl: '',
 | 
	
		
			
				|  |  | +                id: 0,
 | 
	
		
			
				|  |  | +                idType: '',
 | 
	
		
			
				|  |  | +                idNumber: '',
 | 
	
		
			
				|  |  | +                permanentAddress: '',
 | 
	
		
			
				|  |  | +                issuingAuthority: '',
 | 
	
		
			
				|  |  | +                effectiveDateStart: '',
 | 
	
		
			
				|  |  | +                effectiveDateEnd: '',
 | 
	
		
			
				|  |  | +                nationality: 1,
 | 
	
		
			
				|  |  | +                nativePlace: '',
 | 
	
		
			
				|  |  | +                nation: '',
 | 
	
		
			
				|  |  | +                birthDate: '',
 | 
	
		
			
				|  |  | +                houseList: []
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            formCols: [
 | 
	
		
			
				|  |  | +                [
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '姓名',
 | 
	
		
			
				|  |  | +                        prop: 'name',
 | 
	
		
			
				|  |  | +                        slot: 'name',
 | 
	
		
			
				|  |  | +                        input: true
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '手机号',
 | 
	
		
			
				|  |  | +                        prop: 'phone',
 | 
	
		
			
				|  |  | +                        slot: 'phone',
 | 
	
		
			
				|  |  | +                        input: true
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '人员编号',
 | 
	
		
			
				|  |  | +                        prop: 'personnelNumber',
 | 
	
		
			
				|  |  | +                        slot: 'personnelNumber',
 | 
	
		
			
				|  |  | +                        input: true
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '性别',
 | 
	
		
			
				|  |  | +                        prop: 'sex',
 | 
	
		
			
				|  |  | +                        slot: 'sex'
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '备注',
 | 
	
		
			
				|  |  | +                        prop: 'remarks',
 | 
	
		
			
				|  |  | +                        slot: 'remarks'
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                ]
 | 
	
		
			
				|  |  | +            ],
 | 
	
		
			
				|  |  | +            formCols2: [
 | 
	
		
			
				|  |  | +                [
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '证件类型',
 | 
	
		
			
				|  |  | +                        prop: 'idType',
 | 
	
		
			
				|  |  | +                        slot: 'idType'
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '证件号码',
 | 
	
		
			
				|  |  | +                        prop: 'idNumber',
 | 
	
		
			
				|  |  | +                        slot: 'idNumber',
 | 
	
		
			
				|  |  | +                        input: true
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '户籍地址',
 | 
	
		
			
				|  |  | +                        prop: 'permanentAddress',
 | 
	
		
			
				|  |  | +                        slot: 'permanentAddress',
 | 
	
		
			
				|  |  | +                        input: true
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '签发机关',
 | 
	
		
			
				|  |  | +                        prop: 'issuingAuthority',
 | 
	
		
			
				|  |  | +                        slot: 'issuingAuthority',
 | 
	
		
			
				|  |  | +                        input: true
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '有效期',
 | 
	
		
			
				|  |  | +                        prop: 'effectiveDate',
 | 
	
		
			
				|  |  | +                        slot: 'effectiveDate'
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '国籍',
 | 
	
		
			
				|  |  | +                        prop: 'nationality',
 | 
	
		
			
				|  |  | +                        slot: 'nationality'
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '籍贯',
 | 
	
		
			
				|  |  | +                        prop: 'nativePlace',
 | 
	
		
			
				|  |  | +                        slot: 'nativePlace'
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '民族',
 | 
	
		
			
				|  |  | +                        prop: 'nation',
 | 
	
		
			
				|  |  | +                        slot: 'nation'
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '出生日期',
 | 
	
		
			
				|  |  | +                        prop: 'birthDate',
 | 
	
		
			
				|  |  | +                        slot: 'birthDate'
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                ]
 | 
	
		
			
				|  |  | +            ],
 | 
	
		
			
				|  |  | +            formCols3: [
 | 
	
		
			
				|  |  | +                [
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '类型',
 | 
	
		
			
				|  |  | +                        prop: 'householdType',
 | 
	
		
			
				|  |  | +                        slot: 'householdType',
 | 
	
		
			
				|  |  | +                        showRequired: true
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '入住时间',
 | 
	
		
			
				|  |  | +                        prop: 'checkInDate',
 | 
	
		
			
				|  |  | +                        slot: 'checkInDate'
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                ]
 | 
	
		
			
				|  |  | +            ],
 | 
	
		
			
				|  |  | +            nationalityArray: [
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 1,
 | 
	
		
			
				|  |  | +                    label: '中国'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 2,
 | 
	
		
			
				|  |  | +                    label: '其他'
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            ],
 | 
	
		
			
				|  |  | +            idTypeArray: [
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 1,
 | 
	
		
			
				|  |  | +                    label: '居民身份证'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 2,
 | 
	
		
			
				|  |  | +                    label: '居民户口簿'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 3,
 | 
	
		
			
				|  |  | +                    label: '暂住证'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 4,
 | 
	
		
			
				|  |  | +                    label: '其他'
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            ],
 | 
	
		
			
				|  |  | +            householdTypeArray: [
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 1,
 | 
	
		
			
				|  |  | +                    label: '业主'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 2,
 | 
	
		
			
				|  |  | +                    label: '亲属'
 | 
	
		
			
				|  |  | +                },
 | 
	
		
			
				|  |  | +                {
 | 
	
		
			
				|  |  | +                    status: 3,
 | 
	
		
			
				|  |  | +                    label: '租客'
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            ],
 | 
	
		
			
				|  |  | +            formRules: {
 | 
	
		
			
				|  |  | +                name: [this.$valid.selectRequired('填写姓名')],
 | 
	
		
			
				|  |  | +                phone: [this.$valid.selectRequired('填写手机号')],
 | 
	
		
			
				|  |  | +                householdType: [this.$valid.selectRequired('填写类型')]
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            communityArr: [],
 | 
	
		
			
				|  |  | +            garageArr: []
 | 
	
		
			
				|  |  | +        };
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    created() {
 | 
	
		
			
				|  |  | +        this.$store.dispatch('collapse', true);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        if (!!this.params.id) {
 | 
	
		
			
				|  |  | +            this.getDetails(this.params.id);
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +            if (this.$parent.thisLeftData.type == 'room') {
 | 
	
		
			
				|  |  | +                this.formData.houseList = [
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        checkInDate: '',
 | 
	
		
			
				|  |  | +                        householdType: 1,
 | 
	
		
			
				|  |  | +                        buildingName: this.$parent.thisLeftData.buildingName,
 | 
	
		
			
				|  |  | +                        unitName: this.$parent.thisLeftData.unitName,
 | 
	
		
			
				|  |  | +                        roomNumber: this.$parent.thisLeftData.houseName,
 | 
	
		
			
				|  |  | +                        houseId: this.$parent.thisLeftData.houseId,
 | 
	
		
			
				|  |  | +                        parkingList: []
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                ];
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        this.getTenantsTree();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    beforeDestroy() {
 | 
	
		
			
				|  |  | +        this.$store.dispatch('collapse', false);
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    computed: {
 | 
	
		
			
				|  |  | +        nationArray() {
 | 
	
		
			
				|  |  | +            return this.$store.getters['getNationArray'];
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        nativePlaceArray() {
 | 
	
		
			
				|  |  | +            return this.$store.getters['getNativeArray'];
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    methods: {
 | 
	
		
			
				|  |  | +        getDetails(id) {
 | 
	
		
			
				|  |  | +            let url = '/sc-community/scResident/find/' + id;
 | 
	
		
			
				|  |  | +            this.$http
 | 
	
		
			
				|  |  | +                .get(url)
 | 
	
		
			
				|  |  | +                .then(({ data, status, msg }) => {
 | 
	
		
			
				|  |  | +                    if (0 === status) {
 | 
	
		
			
				|  |  | +                        let { effectiveDateStart, effectiveDateEnd } = data;
 | 
	
		
			
				|  |  | +                        if (effectiveDateStart == null || effectiveDateEnd == null) {
 | 
	
		
			
				|  |  | +                            effectiveDateStart = '';
 | 
	
		
			
				|  |  | +                            effectiveDateEnd = '';
 | 
	
		
			
				|  |  | +                        }
 | 
	
		
			
				|  |  | +                        this.effectiveDate = [effectiveDateStart, effectiveDateEnd];
 | 
	
		
			
				|  |  | +                        this.formData = data;
 | 
	
		
			
				|  |  | +                    } else {
 | 
	
		
			
				|  |  | +                        this.$message.error(msg);
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                })
 | 
	
		
			
				|  |  | +                .catch(() => {});
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        lookFormCols(cols) {
 | 
	
		
			
				|  |  | +            this[cols][0].forEach((item, index) => {
 | 
	
		
			
				|  |  | +                if (!!item.input) {
 | 
	
		
			
				|  |  | +                    item.input = false;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        uploadsuccess(response, file, fileList) {
 | 
	
		
			
				|  |  | +            this.$refs.uploaduserlogo.clearFiles();
 | 
	
		
			
				|  |  | +            if (0 === response.status) {
 | 
	
		
			
				|  |  | +                this.formData.facePictureUrl = response.data;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        beforeAvatarUpload(file) {
 | 
	
		
			
				|  |  | +            const isJPG = file.type === 'image/jpeg';
 | 
	
		
			
				|  |  | +            const isLt2M = file.size / 1024 / 1024 < 2;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            if (!isJPG) {
 | 
	
		
			
				|  |  | +                this.$message.error('上传头像图片只能是 JPG 格式!');
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            if (!isLt2M) {
 | 
	
		
			
				|  |  | +                this.$message.error('上传头像图片大小不能超过 2MB!');
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            return isJPG && isLt2M;
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        effectiveDateToggle(va) {
 | 
	
		
			
				|  |  | +            let arr = va;
 | 
	
		
			
				|  |  | +            if (!arr) {
 | 
	
		
			
				|  |  | +                arr = ['', ''];
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            this.formData.effectiveDateStart = arr[0];
 | 
	
		
			
				|  |  | +            this.formData.effectiveDateEnd = arr[1];
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        addHouse() {
 | 
	
		
			
				|  |  | +            new Promise((resolve) => {
 | 
	
		
			
				|  |  | +                this.$store.dispatch('addPopup', {
 | 
	
		
			
				|  |  | +                    url: '/ownerManagement/stepPage/poptreeSelect.vue',
 | 
	
		
			
				|  |  | +                    width: '500px',
 | 
	
		
			
				|  |  | +                    height: '400px',
 | 
	
		
			
				|  |  | +                    props: {
 | 
	
		
			
				|  |  | +                        num: 1,
 | 
	
		
			
				|  |  | +                        list: this.formData.houseList,
 | 
	
		
			
				|  |  | +                        tenantsTree: this.communityArr,
 | 
	
		
			
				|  |  | +                        callback: resolve
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    title: '选择房产',
 | 
	
		
			
				|  |  | +                    notip: true
 | 
	
		
			
				|  |  | +                });
 | 
	
		
			
				|  |  | +            }).then((res) => {
 | 
	
		
			
				|  |  | +                if (res.length > 0) {
 | 
	
		
			
				|  |  | +                    res.forEach((item, index) => {
 | 
	
		
			
				|  |  | +                        let newObj = {
 | 
	
		
			
				|  |  | +                            checkInDate: '',
 | 
	
		
			
				|  |  | +                            householdType: 1,
 | 
	
		
			
				|  |  | +                            buildingName: item.buildingName,
 | 
	
		
			
				|  |  | +                            unitName: item.unitName,
 | 
	
		
			
				|  |  | +                            roomNumber: item.roomNumber,
 | 
	
		
			
				|  |  | +                            houseId: item.houseId,
 | 
	
		
			
				|  |  | +                            parkingList: []
 | 
	
		
			
				|  |  | +                        };
 | 
	
		
			
				|  |  | +                        let isExit = this.formData['houseList'].some((is) => {
 | 
	
		
			
				|  |  | +                            return is.houseId == item.houseId;
 | 
	
		
			
				|  |  | +                        });
 | 
	
		
			
				|  |  | +                        if (!isExit) {
 | 
	
		
			
				|  |  | +                            this.formData['houseList'].push(newObj);
 | 
	
		
			
				|  |  | +                        }
 | 
	
		
			
				|  |  | +                    });
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        addCard(itemObj) {
 | 
	
		
			
				|  |  | +            new Promise((resolve) => {
 | 
	
		
			
				|  |  | +                this.$store.dispatch('addPopup', {
 | 
	
		
			
				|  |  | +                    url: '/ownerManagement/stepPage/poptreeSelect.vue',
 | 
	
		
			
				|  |  | +                    width: '500px',
 | 
	
		
			
				|  |  | +                    height: '400px',
 | 
	
		
			
				|  |  | +                    props: {
 | 
	
		
			
				|  |  | +                        num: 2,
 | 
	
		
			
				|  |  | +                        list: itemObj.parkingList,
 | 
	
		
			
				|  |  | +                        tenantsTree: this.garageArr,
 | 
	
		
			
				|  |  | +                        callback: resolve
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    title: '选择车位',
 | 
	
		
			
				|  |  | +                    notip: true
 | 
	
		
			
				|  |  | +                });
 | 
	
		
			
				|  |  | +            }).then((res) => {
 | 
	
		
			
				|  |  | +                if (res.length > 0) {
 | 
	
		
			
				|  |  | +                    res.forEach((item, index) => {
 | 
	
		
			
				|  |  | +                        let newObj = {
 | 
	
		
			
				|  |  | +                            parkingId: item.parkingId,
 | 
	
		
			
				|  |  | +                            parkingNumber: item.parkingNumber,
 | 
	
		
			
				|  |  | +                            partitionName: item.partitionName,
 | 
	
		
			
				|  |  | +                            garageName: item.garageName
 | 
	
		
			
				|  |  | +                        };
 | 
	
		
			
				|  |  | +                        let isExit = itemObj['parkingList'].some((is) => {
 | 
	
		
			
				|  |  | +                            return is.parkingId == item.parkingId;
 | 
	
		
			
				|  |  | +                        });
 | 
	
		
			
				|  |  | +                        if (!isExit) {
 | 
	
		
			
				|  |  | +                            itemObj['parkingList'].push(newObj);
 | 
	
		
			
				|  |  | +                        }
 | 
	
		
			
				|  |  | +                    });
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        removeHouse(index) {
 | 
	
		
			
				|  |  | +            this.formData['houseList'].splice(index, 1);
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        removeCard(index, itemObj) {
 | 
	
		
			
				|  |  | +            itemObj['parkingList'].splice(index, 1);
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        closes() {
 | 
	
		
			
				|  |  | +            this.$emit('clerOwnerStatus');
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        addEdit() {
 | 
	
		
			
				|  |  | +            let _this = this;
 | 
	
		
			
				|  |  | +            if (this.formData.houseList.length === 0) {
 | 
	
		
			
				|  |  | +                this.$message.error('房产必须绑定');
 | 
	
		
			
				|  |  | +                return;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            new Promise((resolve) => {
 | 
	
		
			
				|  |  | +                this.$refs.form.validate(resolve);
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +                .then(() => {
 | 
	
		
			
				|  |  | +                    let url = '/sc-community/scResident/add';
 | 
	
		
			
				|  |  | +                    let params = this.formData;
 | 
	
		
			
				|  |  | +                    if (!_this.isAdd) {
 | 
	
		
			
				|  |  | +                        url = '/sc-community/scResident/update';
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                    this.$http
 | 
	
		
			
				|  |  | +                        .post(url, params)
 | 
	
		
			
				|  |  | +                        .then(({ status, msg }) => {
 | 
	
		
			
				|  |  | +                            if (status == 0) {
 | 
	
		
			
				|  |  | +                                this.$message.success(msg);
 | 
	
		
			
				|  |  | +                                this.closes();
 | 
	
		
			
				|  |  | +                            } else {
 | 
	
		
			
				|  |  | +                                this.$message.error(msg);
 | 
	
		
			
				|  |  | +                            }
 | 
	
		
			
				|  |  | +                        })
 | 
	
		
			
				|  |  | +                        .catch(() => {});
 | 
	
		
			
				|  |  | +                })
 | 
	
		
			
				|  |  | +                .catch(() => {});
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        getTenantsTree() {
 | 
	
		
			
				|  |  | +            this.$http.get('/sc-community/assets/tree/community/find', { buildingType: 1 }).then(({ status, data, msg }) => {
 | 
	
		
			
				|  |  | +                if (status === 0 && data) {
 | 
	
		
			
				|  |  | +                    this.dimension(data);
 | 
	
		
			
				|  |  | +                    this.communityArr = data;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +            this.$http.get('/sc-community/assets/tree/garage/find').then(({ status, data, msg }) => {
 | 
	
		
			
				|  |  | +                if (status === 0 && data) {
 | 
	
		
			
				|  |  | +                    this.garageArr = data;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        dimension(arr) {
 | 
	
		
			
				|  |  | +            arr.map((item, index) => {
 | 
	
		
			
				|  |  | +                if (!!item.children & (item.type !== 'unit')) {
 | 
	
		
			
				|  |  | +                    this.dimension(item.children);
 | 
	
		
			
				|  |  | +                } else {
 | 
	
		
			
				|  |  | +                    if (item.name.indexOf('单元') === -1 && item.type === 'unit') {
 | 
	
		
			
				|  |  | +                        item.name = item.name + '单元';
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang='scss' scoped >
 | 
	
		
			
				|  |  | +@import '../style.scss';
 | 
	
		
			
				|  |  | +.addHouse {
 | 
	
		
			
				|  |  | +    cursor: pointer;
 | 
	
		
			
				|  |  | +    img.add {
 | 
	
		
			
				|  |  | +        margin-left: 20px;
 | 
	
		
			
				|  |  | +        width: 13px;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.formContent .formContent-item .block-title.car {
 | 
	
		
			
				|  |  | +    margin-bottom: 20px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.formContent-formList.house {
 | 
	
		
			
				|  |  | +    flex-wrap: wrap;
 | 
	
		
			
				|  |  | +    &::after {
 | 
	
		
			
				|  |  | +        content: '';
 | 
	
		
			
				|  |  | +        width: 100%;
 | 
	
		
			
				|  |  | +        height: 1px;
 | 
	
		
			
				|  |  | +        background: #e0e1e3;
 | 
	
		
			
				|  |  | +        margin-bottom: 20px;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    .el-form {
 | 
	
		
			
				|  |  | +        width: calc(100% - 220px);
 | 
	
		
			
				|  |  | +        /deep/ .el-date-editor.el-input {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.removeHouseButton {
 | 
	
		
			
				|  |  | +    width: 80px;
 | 
	
		
			
				|  |  | +    height: 32px;
 | 
	
		
			
				|  |  | +    margin-bottom: 20px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |