Project-Annex/operationSupport/src/views/ownerManagement/stepPage/add.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 v-if="islooks">
                            <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>
                        <!-- 添加编辑 -->
                        <template v-else>
                            <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>{{ !islooks ? '点击添加人脸照片' : '无人脸图片' }}</div>
                                </template>
                            </div>
                            <el-upload
                                v-if="!islooks"
                                :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 v-if="islooks">
                        <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 }}</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>
                    <!-- 添加编辑 -->
                    <template v-else>
                        <template slot="idType">
                            <el-select v-model="formData.idType" clearable>
                                <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>
                                <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>
                                <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>
                                <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
                                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
                                v-model="effectiveDate"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="选择开始日期"
                                end-placeholder="选择结束日期"
                                :picker-options="pickerOptions"
                                @change="effectiveDateToggle"
                                :editable="false"
                            ></el-date-picker>
                        </template>
                    </template>
                </zz-form>
            </div>

            <div class="formContent-item">
                <div class="formContent-item_title">绑定房产</div>
                <div class="formContent-formList" v-for="(item, index) in formData.houseList" :key="index">
                    <div class="block-title">
                        <div class="floor list-title" v-if="!isAdd && !!item.id">
                            {{ `${item.buildingName} ${item.unitName}${item.roomNumber}` }}
                        </div>
                        <div class="floor list-title" v-else>{{ item.name || item.unitName }}</div>
                        <span class="remove list-title" v-if="!islooks" @click="removeHouse(index, 'houseList')">移除</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" ref="form2">
                        <!-- 查看审核 -->
                        <template v-if="islooks">
                            <template slot="householdType">{{ item.householdType | matchingVal(householdTypeArray) }}</template>
                            <template slot="checkInDate">{{ item.checkInDate }}</template>
                        </template>
                        <!-- 添加编辑 -->
                        <template v-else>
                            <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"
                                    :picker-options="pickerOptions"
                                    placeholder="选择日期"
                                >
                                </el-date-picker> </template
                        ></template>
                    </zz-form>
                </div>

                <div class="addHouse add-block" v-if="!islooks" @click="addHouse(1, 'houseList')">
                    <img src="@/assets/img/ownerManagement/btn_add@2x.png" />
                </div>
                <div class="formContent-item_title">绑定车位</div>
                <div class="addCat">
                    <div class="block-title" v-for="(item, index) in formData.parkingList" :key="index">
                        <div class="floor list-title" v-if="!isAdd && !!item.id">{{ item.parkingId }}</div>
                        <div class="floor list-title" v-else>{{ item.name || item.parkingNumber }}</div>
                        <span class="remove list-title" v-if="!islooks" @click="removeHouse(index, 'parkingList')">移除</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 add-block" v-if="!islooks" @click="addHouse(2, 'parkingList')">
                        <img src="@/assets/img/ownerManagement/btn_add@2x.png" />
                    </div>
                </div>
            </div>
        </div>

        <div class="buttons" v-if="islooks">
            <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 class="buttons" v-else>
            <el-button @click="closes">取消</el-button>
            <el-button type="primary" @click="addEdit()">保存</el-button>
        </div>
    </div>
</template>
<script>
import envConfig from '@/config';
export default {
    props: {
        params: {
            type: Object
        },
        islook: {
            type: Boolean,
            default: false
        },
        isAdd: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        islooks() {
            if (this.islook) {
                this.lookFormCols('formCols');
                this.lookFormCols('formCols2');
                this.lookFormCols('formCols3');
            }
            return this.islook;
        }
    },
    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 {
            envConfig: envConfig,
            token: {
                [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
            },
            pickerOptions: {
                disabledDate(val) {
                    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: [],
                parkingList: []
            },
            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'
                    },
                    {
                        label: '入住时间',
                        prop: 'checkInDate',
                        slot: 'checkInDate'
                    }
                ]
            ],
            nationalityArray: [
                {
                    status: 1,
                    label: '中国'
                },
                {
                    status: 2,
                    label: '其他'
                }
            ],
            nativePlaceArray: [],
            nationArray: [],
            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() {
        if (!!this.params.id) {
            this.getDetails(this.params.id);
        }
        this.getNationArray('nation');
        this.getNationArray('native');
        this.getTenantsTree();
    },
    methods: {
        getDetails(id) {
            let url = '/scResident/find/' + id;
            if (this.islooks) {
                url = '/scResident/audit/find/' + id;
            }
            this.$http
                .get(url)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        const { effectiveDateStart, effectiveDateEnd } = data;
                        this.effectiveDate = [effectiveDateStart, effectiveDateEnd];
                        this.formData = data;
                        console.log(data);
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        getNationArray(type) {
            this.$http.postForm('/scResident/option', { type: type }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    if (type == 'nation') {
                        this.nativePlaceArray = data;
                    } else if (type == 'native') {
                        this.nationArray = data;
                    }
                }
            });
        },
        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) {
            this.formData.effectiveDateStart = va[0];
            this.formData.effectiveDateEnd = va[1];
        },
        addHouse(num, arr, todo) {
            new Promise((resolve) => {
                let title = '',
                    tenantsTree;
                if (num === 1) {
                    title = '选择房产';
                } else {
                    title = '选择车位';
                }
                if (num === 1) {
                    tenantsTree = this.communityArr;
                } else {
                    tenantsTree = this.garageArr;
                }

                this.$store.dispatch('addPopup', {
                    url: '/ownerManagement/stepPage/poptreeSelect.vue',
                    width: '500px',
                    height: '700px',
                    props: {
                        todo,
                        tenantsTree,
                        callback: resolve
                    },
                    title: title
                });
            }).then((res) => {
                if (res.length > 0) {
                    res.forEach((item, index) => {
                        if (item.children === null || item.children === undefined) {
                            let newObj = {};
                            if (num === 1) {
                                newObj = {
                                    checkInDate: '',
                                    householdType: 1,
                                    name: item.name,
                                    houseId: item.value
                                };
                            } else {
                                newObj = {
                                    parkingId: item.value,
                                    name: item.name
                                };
                            }
                            this.formData[arr].push(newObj);
                        }
                    });
                }
            });
        },
        removeHouse(index, arr) {
            this.formData[arr].splice(index, 1);
        },
        closes() {
            this.$emit('clerOwnerStatus');
        },
        close() {
            let activeRout = this.$route;
            let tagsList = this.$store.getters['getTagsList'];
            tagsList.forEach((item, index) => {
                if (item.title == activeRout.meta.title || item.path == activeRout.path) {
                    tagsList.splice(index, 1);
                    history.go(-1);
                    return true;
                }
            });
        },
        addEdit() {
            let _this = this;
            if (this.formData.houseList.length === 0) {
                this.$message.error('房产必须绑定');
                return;
            }
            new Promise((resolve) => {
                this.$refs.form.validate();
                let vali = false;
                if (
                    this.$refs.form.$children[0].$children[0].validateState == 'success' &&
                    this.$refs.form.$children[0].$children[1].validateState == 'success'
                ) {
                    vali = true;
                }
                this.formData.houseList.forEach((item, index) => {
                    this.$refs.form2[index].validate();
                    if (this.$refs.form2[index].$children[0].$children[0].validateState == 'success') {
                        vali = true;
                    } else {
                        vali = false;
                    }
                });
                if (vali) {
                    resolve();
                }
            })
                .then(() => {
                    let url = '/scResident/add';
                    let params = this.formData;
                    if (!_this.isAdd) {
                        url = '/scResident/update';
                    }
                    this.$http
                        .post(url, params)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.closes();
                                // this.close();
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        passOK(status) {
            this.$http
                .get('/scResident/audit', { id: this.params.id, auditStatus: status })
                .then(({ status, msg }) => {
                    if (0 === status) {
                        this.$message.success(msg);
                        this.closes();
                        // this.mixins_search('del');
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        getTenantsTree() {
            this.$http.get('/assets/tree/community/find').then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.communityArr = data;
                }
            });
            this.$http.get('/assets/tree/garage/find').then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.garageArr = data;
                }
            });
        }
    }
};
</script>
<style lang='scss' scoped >
@import '../style.scss';
</style>