Project-Annex/operationSupport/src/views/parkingLotAdministration/pageJump/partitionManagement.vue

<template>
    <div class="main">
        <div class="search">
            <el-input v-model="mixins_query.areaName" clearable placeholder="分区名称" class="search-input"></el-input>
            <el-button type="primary" @click="mixins_search" clearable class="search-btn" icon="el-icon-search">查询 </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>
                <el-tooltip class="item" effect="light" placement="bottom" content="返回">
                    <i class="zoniot_font zoniot-icon-fanhui" @click="close()"></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 {
            areaName: '',
            communityId: '', //社区id
            garageId: '', //车库id
            selectName: 'parkingLot',
            cols: [
                {
                    label: '车库名称',
                    prop: 'garageName'
                },
                {
                    label: '分区名称',
                    prop: 'areaName'
                },
                {
                    label: '车位数量',
                    prop: 'parkingNumber'
                },
                {
                    label: '备注',
                    prop: 'remarks'
                },
                {
                    label: '操作',
                    prop: 'opt',
                    slot: 'opt'
                }
            ],
            tableData: [],
            selectRow: [],
            mixins_post: 'post'
        };
    },
    methods: {
        //新增与编辑弹出框
        addOrEdit(todo, scope) {
            new Promise((resolve) => {
                let row,
                    title = '分区编辑';
                if ('add' == todo) {
                    title = '分区添加';
                    row = {
                        communityId: this.communityId,
                        garageId: this.garageId
                    };
                    this.addEditPopUps(title, row, todo);
                } else {
                    this.$http
                        .get('/sc-community/assets/garage/area/find/' + scope.row.id, {})
                        .then((res) => {
                            row = res.data;
                            this.addEditPopUps(title, row, todo);
                        })
                        .catch(function () {});
                }
            }).then(() => {});
        },

        addEditPopUps(title, row, todo) {
            this.$store.dispatch('addPopup', {
                url: '/parkingLotAdministration/pageJump/zoneAddEdit.vue',
                title: title,
                width: '850px',
                height: '600px',
                props: {
                    data: row,
                    todo: todo,
                    callback: this.mixins_search
                }
            });
        },
        //单个删除
        deleteOne(ids) {
            this.$msgBox(`刪除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/sc-community-web/assets/garage/area/delete', [ids]).then(({ status }) => {
                        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/area/delete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        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;
                }
            });
        }
    },
    created() {
        this.communityId = parseInt(sessionStorage.getItem('communityId'));
        this.garageId = parseInt(sessionStorage.getItem('garageId'));

        this.mixins_dataUrl = '/sc-community/assets/garage/area/page';
        this.mixins_query = {
            garageId: this.garageId
        };
        this.mixins_search();
    }
};
</script>