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

<template>
    <div class="main">
        <div class="search">
            <el-input placeholder="设备名称或编号" class="search-input" clearable v-model="mixins_query.deviceNo"></el-input>
            <el-select slot="status" v-model="mixins_query.deviceStatus" clearable>
                <el-option v-for="(item, index) in deviceStatus" :key="index" :label="item.label" :value="item.status">{{
                    item.label
                }}</el-option>
            </el-select>
            <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
            <div class="search-icon">
                <i class="iconfont" @click="deluserbyidFn()" v-txt-tip data-txt="删除">&#xe63b;</i>
                <i class="iconfont" @click="addOrEdit('add')" v-left-txt-tip data-txt="新增">&#xe641;</i>
            </div>
        </div>
        <div class="roles-wrap">
            <zz-table
                :cols="cols"
                :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip class="item" effect="light" placement="bottom" content="编辑">
                            <img class="optImg" @click="addOrEdit('edit', scope.row)" src="@/assets/img/btn_bianji.png" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                            <img class="optImg" @click="deluserbyidFn(scope.row.id)" src="@/assets/img/btn_shanchu.png" />
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        let _this = this;
        return {
            selectRow: [],
            // 数据列表
            deviceStatus: [
                {
                    status: 1,
                    label: '正常'
                },
                {
                    status: 2,
                    label: '告警'
                },
                {
                    status: 3,
                    label: '离线'
                },
                {
                    status: 4,
                    label: '未启用'
                },
                {
                    status: 5,
                    label: '报废'
                }
            ],
            cols: [
                {
                    label: '所属小区',
                    prop: 'communityId',
                    format(val) {
                        let va = '';
                        _this.$store.getters['getAreaSelect'].forEach((element) => {
                            if (element.id === val) {
                                va = element.communityName;
                            }
                        });
                        return va;
                    }
                },
                {
                    label: '设备类型',
                    prop: 'deviceTypeName'
                },
                {
                    label: '设备编号',
                    prop: 'deviceNo'
                },
                {
                    label: '设备名称',
                    prop: 'deviceName'
                },
                {
                    label: '设备地址',
                    prop: 'address'
                },
                {
                    label: '添加日期',
                    prop: 'createDate'
                },
                {
                    label: '设备状态',
                    prop: 'deviceStatus',
                    format(val) {
                        if (val == '1') {
                            return '正常';
                        } else if (val == '2') {
                            return '告警';
                        } else if (val == '3') {
                            return '离线';
                        } else if (val == '4') {
                            return '未启用';
                        } else if (val == '5') {
                            return '报废';
                        }
                    }
                },
                {
                    label: '二维码',
                    prop: 'deviceQrcode'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'post',
            productOptions: []
        };
    },
    created() {
        if (this.$store.getters['getAreaSelect'].length === 0) {
            this.getorgTree();
        }
        this.mixins_dataUrl = '/device/page';
        this.mixins_query = {};
        this.mixins_search();
    },
    mounted() {
        this.getProductOptions();
    },
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        deluserbyidFn(id) {
            let ids = [];
            if (!!id) {
                ids = [id];
            } else {
                if (!this.selectRow.length) {
                    this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
                    return;
                }
                this.selectRow.forEach((v) => {
                    ids.push(v.id);
                });
            }
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/facility/delete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        addOrEdit(todo, data = {}) {
            new Promise((resolve) => {
                let title = '添加设备管理';
                if (todo == 'add') {
                    // title = this.mixins_query.alarmCategory == '2' ? '添加离线规则' : '添加告警';
                } else {
                    title = '修改设备管理';
                }
                this.$store.dispatch('addPopup', {
                    url: '/deviceManagement/popups/addDeviceManagement.vue',
                    width: '500px',
                    height: '700px',
                    props: {
                        data,
                        todo,
                        productOptions: this.productOptions,
                        callback: resolve
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        getProductOptions() {
            this.$http.postForm('/devicetype/selectList', { name: '' }).then((data) => {
                this.productOptions = data;
            });
        }
    }
};
</script>

<style lang='scss' scoped>
.new-select-tree {
    vertical-align: top;
    display: inline-block;
    margin-right: 25px;
}
table i {
    cursor: pointer;
}
</style>