SmartCommunity/energyManagement/src/views/instrumentManagement/popups/addDeviceManagement.vue

<template>
    <div class="alert-body__main_content">
        <zz-form :cols="formCols" :data="formData" :rules="formRules" :errors="formErrors" labelWidth="120" ref="form">
            <template slot="communityId">
                <el-select v-model="formData.communityId">
                    <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
                </el-select>
            </template>
            <template slot="useType">
                <el-select v-model="formData.useType" placeholder="选择用途" clearable>
                    <el-option label="房间表" :value="1"></el-option>
                    <el-option label="公摊表" :value="2"></el-option>
                </el-select>
            </template>

            <template slot="address">
                <el-input v-model="formData.address" clearable>
                    <i slot="suffix" class="zoniot_font zoniot-icon-dizhi" @click="addressQueryClick"></i>
                </el-input>
            </template>

            <template slot="productId">
                <el-cascader
                    v-model="formData.productId"
                    :options="productOptions"
                    :props="defaultProps"
                    clearable
                    placeholder="设备类型"
                ></el-cascader>
            </template>
        </zz-form>
    </div>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            formData: {
                productId: '',
                communityId: '',
                deviceNo: '',
                deviceName: '',
                useType: '',
                beginDegree: '',
                address: '',
                categoryId: ''
            },
            formCols: [
                [
                    {
                        label: '选择社区',
                        prop: 'communityId',
                        slot: 'communityId'
                    },
                    {
                        label: '设备类型',
                        prop: 'productId',
                        slot: 'productId'
                    },
                    {
                        label: '设备编号',
                        prop: 'deviceNo',
                        input: true
                    },
                    {
                        label: '设备名称',
                        prop: 'deviceName',
                        input: true
                    },
                    {
                        label: '用途',
                        prop: 'useType',
                        slot: 'useType'
                    },
                    {
                        label: '起始读数',
                        prop: 'beginDegree',
                        input: true
                    },
                    {
                        label: '地址',
                        prop: 'address',
                        slot: 'address'
                    }
                ]
            ],
            addressTree: [],
            formRules: {
                communityId: [this.$valid.selectRequired('选择社区')],
                productId: [this.$valid.selectRequired('设备类型')],
                deviceNo: [this.$valid.selectRequired('设备编号')],
                deviceName: [this.$valid.inputRequired('设备名称')],
                useType: [this.$valid.selectRequired('用途')],
                beginDegree: [this.$valid.inputRequired('起始读数')]
            },
            formErrors: {},
            productOptions: [],
            defaultProps: {
                value: 'value', // 唯一标识
                label: 'name', // 标签显示
                children: 'children' // 子级
            }
        };
    },
    watch: {
        'formData.communityId'(val, old) {
            if (val) {
                this.getTenantsTree(val);
            }
        }
    },
    computed: {
        communityArr() {
            return this.$store.getters['getAreaSelect'];
        }
    },
    methods: {
        getTenantsTree(va) {
            this.$http.get('/sc-energy/assets/tree/community/findByFloor').then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    data.forEach((element) => {
                        if (element.value == va) {
                            this.addressTree = element.children;
                        }
                    });
                }
            });
        },

        addressQueryClick() {
            if (!this.formData.communityId) {
                this.$message.error('请先选择社区');
                return;
            }
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/instrumentManagement/popups/poptreeSelect.vue',
                    width: '300px',
                    height: '400px',
                    props: {
                        tenantsTree: this.addressTree,
                        callback: resolve
                    },
                    hideStar: true,
                    title: '楼栋信息'
                });
            }).then((e) => {
                debugger;
                let address = '';
                if (!!e.roomId) {
                    this.formData.addressType = 5;
                    this.formData.buildingId = e.buildingId;
                    this.formData.unitName = e.unitId;
                    this.formData.floorName = e.floorId;
                    this.formData.houseId = e.roomId;
                    address = e.buildingName + '-' + e.unitName + '-' + e.floor + '-' + e.roomName;
                } else if (!!e.floorId) {
                    this.formData.addressType = 4;
                    this.formData.buildingId = e.buildingId;
                    this.formData.unitName = e.unitId;
                    this.formData.floorName = e.floorId;
                    this.formData.houseId = '';
                    address = e.buildingName + '-' + e.unitName + '-' + e.floor;
                } else if (!!e.unitId) {
                    this.formData.addressType = 3;
                    this.formData.buildingId = e.buildingId;
                    this.formData.unitName = e.unitId;
                    this.formData.floorName = '';
                    this.formData.houseId = '';
                    address = e.buildingName + '-' + e.unitName;
                } else if (!!e.buildingId) {
                    this.formData.addressType = 2;
                    this.formData.buildingId = e.buildingId;

                    this.formData.unitName = '';
                    this.formData.floorName = '';
                    this.formData.houseId = '';
                    address = e.buildingName;
                }
                // console.log(e);
                // debugger;
                // if (e.ids.length) {
                //     let lengthSum = e.ids.length;
                //     switch (lengthSum) {
                //         case 1:
                //             this.formData.addressType = 1;
                //             break;
                //         case 2:
                //             this.formData.addressType = 2;
                //             this.formData.buildingId = e.ids[1];
                //             break;
                //         case 3:
                //             this.formData.addressType = 3;
                //             this.formData.buildingId = e.ids[1];
                //             this.formData.unitName = e.ids[2];
                //             break;
                //         case 4:
                //             this.formData.addressType = 4;
                //             this.formData.buildingId = e.ids[1];
                //             this.formData.unitName = e.ids[2];
                //             this.formData.floorName = e.ids[3];
                //             break;
                //         case 5:
                //             this.formData.addressType = 5;
                //             this.formData.buildingId = e.ids[1];
                //             this.formData.unitName = e.ids[2];
                //             this.formData.floorName = e.ids[3];
                //             this.formData.houseId = e.ids[4];
                //             break;
                //         default:
                //             break;
                //     }
                // }
                this.formData.address = address;
            });
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                var loading = this.$loading();
                let url = '/sc-energy/device/add';
                if (this.params.todo == 'edit') {
                    url = '/sc-energy/device/edit';
                }
                let params = JSON.parse(JSON.stringify(this.formData));
                params.productId = _.last(params.productId);
                this.$http
                    .post(url, params)
                    .then(({ status, msg }) => {
                        if (status == 0) {
                            this.$message.success(msg);
                            this.params.callback();
                            this.$emit('close');
                        }
                        loading.close();
                    })
                    .catch(() => {
                        loading.close();
                    });
            });
        }
    },
    created() {
        this.formData.categoryId = this.params.mixins_query.categoryId;
        this.getTenantsTree();
        this.productOptions = this.params.productOptions;
        if (this.params.todo == 'edit') {
            this.formData = JSON.parse(JSON.stringify(this.params.data));
            this.formData.productId = [null, null, this.formData.productId + ''];
        }
    }
};
</script>