SmartCommunity/operationSupport/src/views/parkingLotAdministration/parkingSpaceList.vue

<template>
    <div class="main">
        <div class="search">
            <el-input placeholder="车位号" class="search-input" clearable v-model="mixins_query.parkingNumber"></el-input>
            <el-select v-model="mixins_query.communityId" clearable placeholder="请选择社区名称">
                <el-option
                    v-for="(item, index) in communityList"
                    :label="item.label"
                    :value="item.id"
                    @change="communityChoice"
                    :key="index"
                ></el-option>
            </el-select>
            <el-select v-model="mixins_query.garageId" clearable placeholder="请选择车库名称">
                <el-option v-for="(item, index) in garageList" :label="item.label" :value="item.id" :key="index"></el-option>
            </el-select>
            <el-button type="primary" @click="mixins_search" class="search-btn" icon="el-icon-search"
                >查询
                <!-- <i class="iconfont">&#xe6fc;</i> -->
            </el-button>
            <div class="search-icon">
                <el-tooltip class="item" effect="light" placement="bottom" content="新增">
                    <i class="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                    <i class="zoniot_font zoniot-icon-shanchu2" @click="deleteRow"></i>
                </el-tooltip>
            </div>
        </div>
        <div>
            <zz-table
                :cols="cols"
                :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
                :data="mixins_list"
                :loading="mixins_onQuery"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="opt" class="opt">
                    <div class="opt">
                        <el-tooltip effect="light" placement="bottom" content="编辑">
                            <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope)"></i>
                        </el-tooltip>
                        <el-tooltip effect="light" placement="bottom" content="删除">
                            <i class="zoniot_font zoniot-icon-shanchu redText" @click="deleteOne(scope.row.id)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            communityList: [], //社区名称下拉列表
            garageList: [], //车库名称下拉列表
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '车库名称',
                    prop: 'garageName'
                },
                {
                    label: '车库区域',
                    prop: 'garageAreaName'
                },
                {
                    label: '车位号',
                    prop: 'parkingNumber'
                },
                {
                    label: '车位类别',
                    prop: 'parkingType',
                    format(val) {
                        if (val == 1) {
                            return '公共车位';
                        } else {
                            return '私人车位';
                        }
                    }
                },
                {
                    label: '车位面积',
                    prop: 'parkingArea'
                },
                {
                    label: '操作',
                    prop: 'opt',
                    slot: 'opt'
                }
            ],
            selectRow: [],
            mixins_post: 'post'
        };
    },
    methods: {
        //获取社区名称下拉列表
        communityNameList() {
            this.communityList = [];
            let onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                console.log(res);
                res.data.map((res) => {
                    onOption = {
                        label: res.communityName,
                        id: res.id
                    };
                    this.communityList.push(onOption);
                });
            });
        },
        communityChoice(e) {
            this.garageNameList();
        },
        //获取车库名称下拉列表
        garageNameList() {
            this.garageList = [];
            let onOption = '';
            this.$http.post('/sc-community/assets/garage/list', {}).then((res) => {
                res.data.map((res) => {
                    onOption = {
                        label: res.garageName,
                        id: res.id
                    };
                    this.garageList.push(onOption);
                });
            });
        },
        addOrEdit(todo, scope) {
            let self = this;
            new Promise((resolve) => {
                let row,
                    title = '编辑车位';
                if ('add' == todo) {
                    title = '新增车位';
                    this.addEditPopUps(title, row, todo);
                } else {
                    this.$http.get('/sc-community/assets/garage/parking/find/' + scope.row.id, {}).then((res) => {
                        // sessionStorage.setItem('communityInformation',JSON.stringify(data))
                        row = res.data;
                        this.addEditPopUps(title, row, todo);
                    });
                }
            }).then(() => {
                this.mixins_search();
            });
        },
        addEditPopUps(title, row, todo) {
            this.$store.dispatch('addPopup', {
                url: '/parkingLotAdministration/pageJump/parkingLotSaveEdits.vue',
                title: title,
                width: '850px',
                height: '470px',
                props: {
                    data: row,
                    todo: todo,
                    callback: this.mixins_search
                }
            });
        },
        //单个删除
        deleteOne(id) {
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then((_) => {
                    this.$http.post('/sc-community/assets/garage/parking/delete', [id]).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        deleteRow() {
            // 获取选中列表的ids
            let ids = [];
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
                return;
            }
            this.selectRow.forEach((v) => {
                ids.push(v.id);
            });
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then((_) => {
                    this.$http.post('/sc-community/assets/garage/parking/delete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        selectionChange(val) {
            this.selectRow = val;
        }
    },
    mounted() {},
    created() {
        this.communityNameList();
        this.garageNameList();
        this.mixins_dataUrl = '/sc-community/assets/garage/parking/page';
        this.mixins_query = {};
        this.mixins_search();
    }
};
</script>