Project-Annex/operationSupport/src/views/buildingManagement/index.vue

<template>
    <div class="main">
        <div class="search" v-if="!ownerStatus">
            <el-input v-model="mixins_query.buildingName" clearable placeholder="请输入楼栋名称" class="search-input"></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" :key="index"></el-option>
            </el-select>
            <el-button type="primary" @click="mixins_search" class="search-btn" icon="el-icon-search">查询</el-button>

            <div class="search-icon">
                <!-- <el-dropdown type="primary" @command="addCommand">
                    <span class="iconfont">&#xe641;</span>
                    <el-dropdown-menu slot="dropdown" hide-on-click="false" class="device-search-dropdown">
                        <el-dropdown-item command="add">单个添加</el-dropdown-item>
                        <el-dropdown-item command="batchAdd"
                            >批量添加
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->
                <el-tooltip class="item" effect="light" placement="bottom" content="新增">
                    <i class="iconfont" @click="addOrEdit('add')">&#xe641;</i>
                </el-tooltip>
                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel()"></i>
                </el-tooltip>
            </div>
        </div>
        <div class="dictionarys-wrap" v-if="!ownerStatus">
            <zz-table
                :cols="cols"
                :settings="{ showIndex: true, stripe: true }"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
            >
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip effect="light" placement="bottom" content="编辑">
                            <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.row)"></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>
        <addplan v-else :params="activeData" @clerOwnerStatus="clerOwnerStatus" :isAdd="isAdd"></addplan>
    </div>
</template>

<script>
import list from '@utils/list.js';
import addplan from './pageJump/addoredit.vue';
export default {
    mixins: [list],
    components: { addplan },
    name:'buildingManagement',
    data() {
        return {
            ownerStatus: '',
            activeData: {},
            isAdd: true,
            communityList: [], //社区名称下拉列表
            query: {
                buildingName: '', //楼栋名称
                communityName: '' //社区名称
            },
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '楼栋名称',
                    prop: 'buildingName'
                },
                {
                    label: '单元数',
                    prop: 'unitNumber'
                },
                {
                    label: '楼栋类型',
                    prop: 'buildingTypeDict'
                },
                {
                    label: '建筑结构',
                    prop: 'buildingStructureDict'
                },
                {
                    label: '楼层',
                    prop: 'floorsNumber'
                },
                {
                    label: '楼栋用途',
                    prop: 'buildingPurposeDict'
                },
                {
                    label: '建成日期',
                    prop: 'builtDate'
                },
                {
                    label: '验收日期',
                    prop: 'acceptanceDate'
                },
                {
                    label: '建筑面积',
                    prop: 'buildingArea'
                },
                {
                    label: '使用面积',
                    prop: 'useArea'
                },
                {
                    label: '操作',
                    prop: 'opt',
                    slot: 'opt'
                }
            ]
        };
    },
    methods: {
        clerOwnerStatus() {
            this.ownerStatus = '';
            this.activeData = {};
            this.isAdd = true;
            this.mixins_search();
        },
        //获取社区名称下拉列表
        communityNameList() {
            this.communityList = [];
            let onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                res.data.map((res) => {
                    onOption = {
                        label: res.communityName,
                        id: res.id
                    };

                    this.communityList.push(onOption);
                });
                this.$store.commit('setCommunityArray', res.data);
            });
        },
        addCommand(command) {
            if (command === 'add') {
                this.addOrEdit('add');
            }
            if (command === 'batchAdd') {
                this.$router.push('/buildingManagement/pageJump/batchAddoredit');
                return;
            }
        },

        addOrEdit(todo, row) {
            if (todo == 'edit') {
                this.activeData = row;
                this.isAdd = false;
            }
            this.ownerStatus = todo;
        },

        exportExcel() {
            this.__exportExcel('/sc-community/assets/building/export/excel');
        },

        //单个删除
        deleteOne(ids) {
            this.$msgBox(`刪除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.get('/sc-community/assets/building/delete', { id: ids }).then(({ status }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        } else {
                            this.$message.error('删除失败!');
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    },
    created() {
        this.communityNameList();
        // this.mixins_search();
        this.mixins_dataUrl = '/sc-community/assets/building/page';
        this.mixins_post = 'post';

        this.mixins_search();
    }
};
</script>

<style lang="scss" scoped>
</style>