Project-Annex/operationSupport/src/views/patrolManagement/popups/addPoint.vue

<template>
    <div>
        <zz-form :cols="formCols" :data="formData" :rules="formRules" labelWidth="100" ref="form">
            <el-select v-model="formData.communityId" placeholder="请选择所属社区" clearable slot="communityId" @change="communityChange">
                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
            </el-select>
            <el-select v-model="formData.buildingId" placeholder="请选择楼栋" clearable slot="buildingId" @change="buildingChange">
                <el-option v-for="(item, index) in buildingArr" :key="index" :label="item.label" :value="item.id"></el-option>
            </el-select>
            <el-select v-model="formData.unit" placeholder="请选择单元" clearable slot="unit">
                <el-option v-for="(item, index) in unitArr" :key="index" :label="item.label" :value="item.id"></el-option>
            </el-select>
            <template slot="latitude">
                <el-input v-model="formData.latitude" placeholder="请选择经纬坐标">
                    <i slot="suffix" class="zoniot_font zoniot-icon-dizhi" @click="QueryClick"></i>
                </el-input>
            </template>
        </zz-form>
    </div>
</template>
<script >
import MapPopup from '@/components/mapPopup/index.vue';
export default {
    props: ['params'],
    components: {
        MapPopup
    },
    data() {
        return {
            formData: {
                communityId: '',
                pointName: '',
                pointNo: '',
                buildingId: '',
                unit: '',
                latitude: '',
                longitude: ''
            },
            initDot: [],
            communityTre: [],
            formRules: {
                communityId: [this.$valid.selectRequired('公司')],
                pointName: [this.$valid.inputRequired('巡更点名称')],
                pointNo: [this.$valid.inputRequired('巡更点编号')],
                latitude: [this.$valid.inputRequired('经纬度坐标'), this.$valid.selectRequired('经纬度坐标')]
            },
            formCols: [
                [
                    {
                        label: '所属社区',
                        prop: 'communityId',
                        slot: 'communityId'
                    },
                    {
                        label: '楼栋',
                        prop: 'buildingId',
                        slot: 'buildingId'
                    },
                    {
                        label: '单元',
                        prop: 'unit',
                        slot: 'unit'
                    },
                    {
                        label: '巡更点名称',
                        prop: 'pointName',
                        input: true
                    },
                    {
                        label: '巡更点编号',
                        prop: 'pointNo',
                        input: true
                    },
                    {
                        label: '经纬度坐标',
                        prop: 'latitude',
                        slot: 'latitude'
                    }
                ]
            ],
            communityArr: [],
            buildingArr: [],
            unitArr: [],
            backfill: false,
            mapPopUpStatus: false //地图弹出框
        };
    },
    watch: {},
    methods: {
        QueryClick() {
            new Promise((resolve) => {
                let title = '选择坐标';
                this.$store.dispatch('addPopup', {
                    url: '/patrolManagement/popups/popMap.vue',
                    width: '500px',
                    height: '500px',
                    props: {
                        callback: resolve
                    },
                    title: title
                });
            }).then((e) => {
                this.initDot = [e.lat, e.lng];
                this.formData.latitude = `${e.lat},${e.lng}`;
                this.formData.longitude = e.lng;
            });
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        },
        nestedLoop(arr, type, thisArr, e, resolve) {
            let newArr = [];
            arr.map((item) => {
                if (item.id == e && !!item.children) {
                    item.children.map((itemUnit) => {
                        if (itemUnit.type == type) {
                            newArr.push({
                                label: this.CheckChinese(itemUnit.name, type == 'unit' ? '单元' : '楼栋'),
                                id: type == 'unit' ? itemUnit.value : Number(itemUnit.value),
                                type: itemUnit.type,
                                children: itemUnit.children
                            });
                        }
                    });
                }
            });
            this[thisArr] = newArr;
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                var loading = this.$loading();
                let url = '/sc-community/patrol/point/add';
                let initData = {
                    communityId: this.formData.communityId,
                    pointName: this.formData.pointName,
                    pointNo: this.formData.pointNo,
                    buildingId: this.formData.buildingId,
                    unit: this.formData.unit,
                    latitude: this.initDot[0],
                    longitude: this.initDot[1]
                };
                if (this.params.todo == 'edit') {
                    url = '/sc-community/patrol/point/update';
                    initData.id = this.formData.id;
                }
                this.$http
                    .post(url, initData)
                    .then(({ status, msg }) => {
                        if (status == 0) {
                            this.$message.success(msg);
                            this.params.callback();
                            this.$emit('close');
                        } else {
                            this.$message.error(msg);
                        }
                        loading.close();
                    })
                    .catch(() => {
                        loading.close();
                    });
            });
        },
        communityChange(e) {
            this.formData.buildingId = '';
            this.formData.unit = '';
            this.nestedLoop(this.communityTre, 'building', 'buildingArr', e);
        },
        buildingChange(e) {
            this.formData.unit = '';
            this.nestedLoop(this.buildingArr, 'unit', 'unitArr', e);
        }
    },
    created() {
        this.communityTre = this.params.communityTre;
        this.communityArr = this.params.communityArr;
        if (this.params.todo == 'edit') {
            let newData = this.params.data;
            this.formData = newData;
            this.nestedLoop(this.communityTre, 'building', 'buildingArr', newData.communityId);
            this.nestedLoop(this.buildingArr, 'unit', 'unitArr', newData.buildingId);
            this.initDot = [newData.latitude, newData.longitude];
            this.formData.latitude = `${newData.latitude},${newData.longitude}`;
        }
    }
};
</script>