111

operationSupport/src/views/ownerManagement/stepPage/newAdd.vue

@@ -1,24 +1,30 @@
 <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-form ref="ruleForm" :model="formData" label-width="100px" :rules="formRules">
+            <div class="formContent">
+                <div class="formContent-item">
+                    <div class="formContent-item_title">基础信息</div>
+                    <div class="formContent-formList">
+                        <div>
+                            <el-form-item label="姓名" prop="name">
+                                <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
+                            </el-form-item>
+                            <el-form-item label="手机号" prop="phone">
+                                <el-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11"></el-input>
+                            </el-form-item>
+                            <el-form-item label="人员编号">
+                                <el-input v-model="formData.personnelNumber" placeholder="请输入人员编号"></el-input>
+                            </el-form-item>
+                            <el-form-item label="性别" required>
                                 <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>
+                            </el-form-item>
+                            <el-form-item label="备注">
+                                <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注"></el-input>
+                            </el-form-item>
+                        </div>
 
-                    <template>
                         <div class="clickUpload">
                             <div class="clickUpText">
                                 <img class="dataImg" v-if="!!formData.facePictureUrl" :src="formData.facePictureUrl" />
@@ -40,94 +46,94 @@
                             >
                             </el-upload>
                         </div>
-                    </template>
+                    </div>
                 </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>
+                <div class="formContent-item">
+                    <div class="formContent-item_title">证件信息</div>
 
-                        <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>
+                    <el-form-item label="证件类型" required>
+                        <el-select v-model="formData.idType" class="width100">
+                            <el-option v-for="(item, index) in idTypeArray" :key="index" :label="item.label" :value="item.status">{{
+                                item.label
+                            }}</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="证件号码" prop="idNumber" class="width100">
+                        <el-input v-model="formData.idNumber" placeholder="请输入证件号码" maxlength="18"></el-input>
+                    </el-form-item>
+                    <el-form-item label="户籍地址" class="width100">
+                        <el-input v-model="formData.permanentAddress" placeholder="请输入户籍地址"></el-input>
+                    </el-form-item>
+                    <el-form-item label="签发机关" class="width100">
+                        <el-input v-model="formData.issuingAuthority" placeholder="请输入签发机关"></el-input>
+                    </el-form-item>
+                    <el-form-item label="有效期">
+                        <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>
+                    </el-form-item>
+                    <el-form-item label="国籍">
+                        <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>
+                    </el-form-item>
 
-                        <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>
+                    <el-form-item label="籍贯">
+                        <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>
+                    </el-form-item>
+                    <el-form-item label="名族">
+                        <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>
+                    </el-form-item>
+                    <el-form-item label="出生日期">
+                        <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>
+                    </el-form-item>
+                </div>
 
-            <div class="formContent-item">
-                <div class="formContent-item_title"><span class="show-required-icon-star"></span> 绑定房产和车位</div>
-                <div class="ownerScroll">
-                    <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 ? CheckChinese(item.unitName, '单元') : ''}${item.roomNumber}` }}
+                <div class="formContent-item">
+                    <div class="formContent-item_title"><span class="show-required-icon-star"></span> 绑定房产和车位</div>
+                    <div class="ownerScroll">
+                        <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 ? CheckChinese(item.unitName, '单元') : ''}${
+                                            item.roomNumber
+                                        }`
+                                    }}
+                                </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="" />
                             </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">
+                            <div class="el-form">
+                                <el-form-item label="类型" required label-width="70px">
                                     <el-select v-model="item.householdType" clearable @change="householdTypeHide(item)">
                                         <el-option
                                             v-for="(item, index) in householdTypeArray"
@@ -137,52 +143,53 @@
                                             >{{ item.label }}</el-option
                                         >
                                     </el-select>
-                                </template>
-                                <template slot="checkInDate">
+                                </el-form-item>
+                                <el-form-item label="入住时间" label-width="70px">
                                     <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>
+                                    </el-date-picker>
+                                </el-form-item>
+                            </div>
 
-                        <div class="block-title car" v-for="(items, indexs) in item.parkingList" :key="indexs">
-                            <div class="floor list-title">
-                                {{ `${items.garageName}${items.areaName || items.partitionName || ''}-${items.parkingNumber}` }}
+                            <div class="block-title car" v-for="(items, indexs) in item.parkingList" :key="indexs">
+                                <div class="floor list-title">
+                                    {{ `${items.garageName}${items.areaName || 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>
-                            <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 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" @click="addCard(item)">
-                            <div class="floor list-title">绑定车位</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_car@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="removeHouseButton"
-                            type="primary"
-                            @click="removeHouse(index)"
-                            v-if="formData.houseList.length !== 0"
-                            >删除房产</el-button
+                        <el-button class="addHouseButton" type="primary" @click="addHouse()" 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>
+        </el-form>
 
         <div class="buttons">
             <el-button @click="closes">取消</el-button>
@@ -241,7 +248,7 @@ export default {
                 remarks: '',
                 facePictureUrl: '',
                 id: 0,
-                idType: '',
+                idType: 1,
                 idNumber: '',
                 permanentAddress: '',
                 issuingAuthority: '',
@@ -397,7 +404,7 @@ export default {
             formRules: {
                 name: [this.$valid.selectRequired('填写姓名')],
                 phone: [this.$valid.patternPhone('填写手机号')],
-                householdType: [this.$valid.selectRequired('填写类型')]
+                idNumber: [this.$valid.inputRequired('证件号码')]
             },
             communityArr: [],
             garageArr: []
@@ -580,10 +587,10 @@ export default {
                 this.$message.error('房产必须绑定');
                 return;
             }
-            new Promise((resolve) => {
-                this.$refs.form.validate(resolve);
-            })
-                .then(() => {
+
+            this.$refs['ruleForm'].validate((valid) => {
+                debugger;
+                if (valid) {
                     let url = '/sc-community/scResident/add';
                     let params = this.formData;
                     if (!_this.isAdd) {
@@ -600,8 +607,10 @@ export default {
                             }
                         })
                         .catch(() => {});
-                })
-                .catch(() => {});
+                } else {
+                    return false;
+                }
+            });
         },
         getTenantsTree() {
             this.$http.get('/sc-community/assets/tree/community/find', { buildingType: 1 }).then(({ status, data, msg }) => {