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

<template>
    <div class="main">
        <div class="search">
            <el-input v-model="query.garageName" placeholder="车位号" class="search-input"></el-input>
            <el-select v-model="query.communityName" placeholder="请选择社区名称">
                <el-option v-for="(item, index) in communityList" :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">
                <!-- 删除 新增 -->
                <i class="iconfont" @click="deleteRow" v-txt-tip data-txt="删除">&#xe63b;</i>
                <i class="iconfont" @click="addOrEdit('add')" v-left-txt-tip data-txt="新增">&#xe641;</i>
            </div>
        </div>
        <div>
            <zz-table
                :cols="cols"
                :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
                :loading="mixins_onQuery"
                :data="tableData"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="opt">
                    <i
                        @click="addOrEdit('edit', scope)"
                        class="iconfont"
                        style="color: #2787f1; margin-right: 30px"
                        v-txt-tip
                        data-txt="编辑"
                        >&#xe645;</i
                    >
                    <i
                        @click="deleteOne(scope.row.id)"
                        class="iconfont"
                        style="color: #ff7272; margin-right: 30px"
                        v-txt-tip
                        data-txt="删除"
                        >&#xe63a;</i
                    >
                </template>
                <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>

                        <el-tooltip effect="light" placement="bottom" content="分区管理">
                            <i class="zoniot_font zoniot-icon-bianji" @click="partitionManagement(scope)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            parkingNumber: '',
            communityList: [], //社区名称下拉列表
            communityId: '', //社区id
            selectName: 'parkingLot',
            query: {
                communityName: '', //社区名称
                garageName: '' //车库名称
            },
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '车库名称',
                    prop: 'garageName'
                },
                {
                    label: '车位数量',
                    prop: 'parkingNumber'
                },
                {
                    label: '备注',
                    prop: 'remarks'
                },
                {
                    label: '操作',
                    prop: 'opt',
                    slot: 'opt'
                }
            ],
            // tableData: []
            selectRow: []
        };
    },
    props: {
        tableData: {
            type: Array,
            default: ''
        },
        tableTotal: {
            type: Number,
            default: ''
        }
    },
    methods: {
        //获取社区名称下拉列表
        communityNameList() {
            this.communityList = [];
            let onOption = '';
            this.$http.get('/assets/community/list', {}).then((res) => {
                res.data.map((res) => {
                    onOption = {
                        label: res.communityName,
                        id: res.id
                    };
                    this.communityList.push(onOption);
                });
            });
        },

        mixins_search() {
            console.log(this.query.communityName);
            this.communityId = this.query.communityName;
            this.garageLotList();
        },

        //获取列表数据
        garageLotList() {
            let submitData = {
                communityId: this.communityId,
                garageName: this.query.garageName,
                pageNum: 1,
                pageSize: 10
            };
            this.$http
                .post('/sc-community/assets/garage/page', submitData)
                .then((res) => {
                    this.tableData = res.data.list;
                    this.mixins_pageset = {
                        total: parseInt(res.data.total)
                        // pageNum: this.mixins_pageset.pageNum,
                        // pageSize: this.mixins_pageset.pageSize
                    };
                    this.mixins_onQuery = false;
                    // this.mixins_list=data.data.list;
                    // this.mixins_onQuery=false;
                })
                .catch(function () {});
        },
        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-web/assets/garage/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('openModal', {
                url: '/parkingLotAdministration/pageJump/garageSaveEdits.vue',
                title: title,
                width: '500px',
                height: '420px',
                props: {
                    data: row,
                    communityList:this.communityList,
                    todo: todo,
                    callback: this.mixins_search
                }
            });
        },

        //分区管理
        partitionManagement(scope) {
            sessionStorage.setItem('communityId', scope.row.communityId);
            sessionStorage.setItem('garageId', scope.row.id);
            this.$router.push({ name: '/parkingLotAdministration/pageJump/partitionManagement' });
        },
        //单个删除
        deleteOne(ids) {
            this.$msgBox(`刪除字典`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/dict/delete', [ids]).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        } else {
                            this.$message.error('删除失败!');
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        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-web/assets/garage/delete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        selectionChange(val) {
            this.selectRow = val;
        }
    },
    created() {
        this.communityNameList();
        this.mixins_onQuery = false;
    },
    watch: {
        tableTotal(item) {
            this.mixins_pageset = {
                total: item
                // pageNum: this.mixins_pageset.pageNum,
                // pageSize: this.mixins_pageset.pageSize
            };
        }
    }
};
</script>