Project-Annex/operationSupport/src/views/assetManagement/shopManagement/index.vue

<template>
    <div class="content">
        <building-tree @buildingInformation="buildingInformation" :buildingType="2"></building-tree>
        <div class="content-right">
            <div class="search">
                <el-input clearable placeholder="房屋号" class="search-input" v-trim v-model="mixins_query.roomNumber"></el-input>
                <el-select v-model="mixins_query.useStatus" clearable placeholder="请选择社区名称">
                    <el-option v-for="item in statusOptions" :label="item.label" :value="item.val" :key="item">{{ item.label }}</el-option>
                </el-select>
                <el-button
                    class="search-btn"
                    type="primary"
                    @click="mixins_search"
                    :disabled="mixins_onQuery"
                    :loading="mixins_onQuery"
                    icon="el-icon-search"
                    >搜索
                </el-button>

                <div class="search-icon">
                    <template>
                        <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">
                                    <div class="upload_div">
                                        <xk-upload class="upload_class" @callback="mixins_search" :params="{ importType: 'HOUSE' }">
                                            <span class="upload_text" slot="content">批量添加</span>
                                        </xk-upload>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item command="template">下载模板</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                        <i class="iconfont" @click="deluserbyidsFn">&#xe63b;</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>
            <zz-table
                :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
                :cols="cols"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="useStatus">
                    <span v-if="scope.row.useStatus == 0">空置</span>
                    <span v-if="scope.row.useStatus == 1">居住</span>
                </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.row)"></i>
                        </el-tooltip>
                        <el-tooltip effect="light" placement="bottom" content="删除">
                            <i class="zoniot_font zoniot-icon-shanchu redText" @click="deleteRow(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" placement="bottom" content="查看">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
        <!-- <save-edits v-else :params="activeData" @clerOwnerStatus="clerOwnerStatus" :isAdd="isAdd"></save-edits> -->
    </div>
</template>

<script>
import list from '@utils/list.js';
import saveEdits from './saveEdits.vue';

export default {
    mixins: [list],
    data() {
        return {
            statusOptions: [
                { label: '空置', val: 0 },
                { label: '居住', val: 1 }
            ],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName',
                    width: 120
                },
                {
                    label: '楼栋名称',
                    prop: 'buildingName'
                },
                {
                    label: '单元',
                    prop: 'unitName'
                },
                {
                    label: '房屋号',
                    prop: 'roomNumber'
                },
                {
                    label: '建筑面积',
                    prop: 'buildingArea',
                    format(val) {
                        if (!!val) {
                            return val + '㎡';
                        } else {
                            return '--';
                        }
                    }
                },
                {
                    label: '使用面积',
                    prop: 'useArea',
                    format(val) {
                        if (!!val) {
                            return val + '㎡';
                        } else {
                            return '--';
                        }
                    }
                },
                {
                    label: '房屋类型',
                    prop: 'buildingType',
                    format(val) {
                        if (val == 1) {
                            return '住宅';
                        } else if (val == 2) {
                            return '商用';
                        } else {
                            return '--';
                        }
                    }
                },
                {
                    label: '使用状态',
                    slot: 'useStatus'
                },
                {
                    label: '操作',
                    slot: 'opt',
                    width: 150
                }
            ],
            showaddDialog: '',
            selectRow: [],
            mixins_post: 'post',
            isAdd: true,
            activeData: {}
        };
    },
    components: {
        saveEdits
    },
    methods: {
        lookPage(row) {
            this.$router.push({
                path: '/shopManagement/details',
                query: {
                    id: row.id
                }
            });
        },
        addCommand(command) {
            if (command === 'add') {
                this.addOrEdit('add');
            }
            if (command === 'template') {
                this.__exportExcel('/sc-community/excel/download/template', { importType: 'HOUSE' });
                return;
            }
        },
        clerOwnerStatus() {
            this.showaddDialog = '';
            this.activeData = {};
            this.isAdd = true;
            this.mixins_search();
        },
        addOrEdit(todo, data = {}) {
            new Promise((resolve) => {
                let title = '新增商铺';
                if (todo !== 'add') {
                    title = '修改商铺';
                }
                this.$store.dispatch('addPopup', {
                    url: '/assetManagement/shopManagement/saveEdits.vue',
                    width: '850px',
                    height: '500px',
                    props: {
                        data,
                        todo,
                        productOptions: this.productOptions,
                        callback: resolve
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });

            // addPopup;
            // if (todo == 'edit') {
            //     this.activeData = row;
            //     this.isAdd = false;
            // }
            // this.showaddDialog = todo;
        },
        deleteRow(row) {
            const { communityName, buildingName, unitName, roomNumber } = row;
            let title = `您确定要删除“${communityName}${buildingName}${unitName}${roomNumber}”号房间`;
            this.$msgBox(title)
                .then(() => {
                    this.$http
                        .post('/sc-community/assets/house/delete', [row.id])
                        .then(({ status, msg }) => {
                            if (0 === status) {
                                this.$message.success(msg);
                                this.mixins_search();
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        deluserbyidsFn() {
            //获取选中列表的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/house/delete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        } else {
                            this.$message.error(msg);
                        }
                    });
                })
                .catch(() => {});
        },
        buildingInformation(data) {
            if (!!data.type && data.type == 'community') {
                this.mixins_query.communityId = data.val;
            } else {
                this.mixins_query.communityId = data.communityId;
                this.mixins_query.id = data.roomId;
                this.mixins_query.buildingId = data.buildingId;
                this.mixins_query.unitName = data.unitId;
            }

            this.mixins_search();
        },
        //导出
        exportExcel() {
            this.__exportExcel('/sc-community/assets/house/export/excel', this.mixins_query);
        },
        communityNameList() {
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                this.$store.commit('setCommunityArray', res.data);
            });
        }
    },
    created() {
        this.mixins_dataUrl = '/sc-community/assets/house/page'; // 分页查询接口
        this.mixins_query = {
            buildingType: 2
        };

        this.communityNameList();
        this.mixins_search('search');
    }
};
</script>
<style lang="scss" scoped>
.content {
    .content-right {
        width: calc(100% - 280px);
        float: right;
    }
}
</style>