Project-Annex/operationSupport/src/views/ownerManagement/ownerReview/toExamine.vue

<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="name">{{ formData.name }}</template>
                            <template slot="phone">{{ formData.phone }}</template>
                            <template slot="personnelNumber">{{ formData.personnelNumber }}</template>
                            <template slot="sex" v-if="formData.sex === 0">未知</template>
                            <template slot="sex" v-else>{{ formData.sex === 1 ? '男' : '女' }}</template>
                            <template slot="remarks">{{ formData.remarks }}</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>
                        </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">{{ formData.idType | matchingVal(idTypeArray) }}</template>
                        <template slot="idNumber">{{ formData.idNumber }}</template>
                        <template slot="permanentAddress">{{ formData.permanentAddress }}</template>
                        <template slot="issuingAuthority">{{ formData.issuingAuthority }}</template>
                        <template slot="effectiveDate">{{
                            !!formData.effectiveDateStart ? formData.effectiveDateStart + '  ——  ' + formData.effectiveDateStart : ''
                        }}</template>
                        <template slot="nationality">{{ formData.nationality | matchingVal(nationalityArray) }}</template>
                        <template slot="nativePlace">{{ formData.nativePlace | matchingVal(nativePlaceArray) }}</template>
                        <template slot="nation">{{ formData.nation | matchingVal(nationArray) }}</template>
                        <template slot="birthDate">{{ formData.birthDate }}</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 ? 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>

                    <zz-form :cols="formCols3" :data="item" :rules="formRules" :errors="formErrors" labelWidth="70">
                        <!-- 查看审核 -->
                        <template>
                            <template slot="householdType">{{ item.householdType | matchingVal(householdTypeArray) }}</template>
                            <template slot="checkInDate">{{ item.checkInDate }}</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>
                        <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>
            </div>
        </div>

        <div class="buttons">
            <el-button @click="closes">取消</el-button>
            <el-button type="primary" @click="passOK(2)">审核不通过</el-button>
            <el-button type="primary" @click="passOK(1)">审核通过</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'toExamine',
    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 {
            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('填写类型')]
            }
        };
    },
    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: []
                    }
                ];
            }
        }
    },
    beforeDestroy() {
        this.$store.dispatch('collapse', false);
    },
    computed: {
        nationArray() {
            return this.$store.getters['getNationArray'];
        },
        nativePlaceArray() {
            return this.$store.getters['getNativeArray'];
        },
        islooks() {
            if (this.islook) {
                this.lookFormCols('formCols');
                this.lookFormCols('formCols2');
                this.lookFormCols('formCols3');
            }
            return this.islook;
        }
    },
    methods: {
        getDetails(id) {
            let url = '/sc-community/scResident/audit/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.formData = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        lookFormCols(cols) {
            this[cols][0].forEach((item, index) => {
                if (!!item.input) {
                    item.input = false;
                }
            });
        },
        closes() {
            this.$emit('clerOwnerStatus');
        },
        passOK(status) {
            this.$http
                .get('/sc-community/scResident/audit', { id: this.params.id, auditStatus: status })
                .then(({ status, msg }) => {
                    if (0 === status) {
                        this.$message.success(msg);
                        this.closes();
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        dimension(arr) {
            arr.map((item, index) => {
                if (!!item.children) {
                    this.dimension(item.children);
                    if (item.type == 'unit') {
                        item.name = this.CheckChinese(item.name, '单元');
                    } else if (item.type == 'building') {
                        item.name = this.CheckChinese(item.name, '楼栋');
                    }
                }
            });
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        }
    }
};
</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>