SmartCommunity/accessControlSystem/src/views/deviceManagement/accessControlMachineManagement/index.vue

<template>
    <div class="content main">
        <organ-tree @organId="currentOrganId" :buildingType="1"></organ-tree>
        <div class="content-right">
            <div class="search">
                <el-input clearable placeholder="输入设备编号/名称" class="search-input" v-model.trim="mixins_query.name"></el-input>
                <el-select v-model="mixins_query.gateType" clearable placeholder="门禁类型" >
                    <el-option :value="1" label="围墙机"></el-option>
                    <el-option :value="2" label="单元机"></el-option>
                </el-select>
                <el-select v-model="mixins_query.deviceStatus" clearable placeholder="设备状态">
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="2" 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">
                    <el-tooltip class="item" effect="light" placement="bottom" content="添加">
                        <i class="zoniot_font zoniot-icon-tianjia2" @click="addCard()"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" placement="bottom" content="重启">
                        <i class="zoniot_font zoniot-icon-chongqi" @click="restartCard()"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" placement="bottom" content="远程开门">
                        <i class="zoniot_font zoniot-icon-yuanchengkaimen" @click="remoteDoorOpeningCard()"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                        <i class="zoniot_font zoniot-icon-shanchu2" @click="deleteCard()"></i>
                    </el-tooltip>
                </div>
            </div>
            <zz-table
                :settings="{ showCheckbox: 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="opt">
                    <div class="opt">
                        <el-tooltip class="item" effect="light" placement="bottom" content="详情">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookAccessControl(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" placement="bottom" content="替换">
                            <i class="zoniot_font zoniot-icon-tihuan" @click="replaceCard(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" placement="bottom" content="临时密码">
                            <i class="zoniot_font zoniot-icon-linshimima" @click="temporaryPasswordCard(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

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

export default {
    mixins: [list],
    data() {
        return {
            currentId: '',
            cols: [
                {
                    label: '门禁机名称',
                    prop: 'name'
                },
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '门禁位置',
                    prop: 'idNumber'
                },
                {
                    label: '门禁机类型',
                    prop: 'communityName'
                },

                {
                    label: '设备编号',
                    prop: 'roomNumber'
                },
                {
                    label: '设备状态',
                    prop: 'roomNumber'
                },
                {
                    label: 'APP开门',
                    prop: 'roomNumber'
                },
                {
                    label: '人脸开门',
                    prop: 'roomNumber'
                },
                {
                    label: '临时密码开门',
                    prop: 'roomNumber'
                },
                {
                    label: '临时密码',
                    prop: 'roomNumber'
                },
                {
                    label: '临时密码有效期',
                    prop: 'roomNumber'
                },
                {
                    label: '操作',
                    slot: 'opt',
                    width: 150
                }
            ],
            thisLeftData: {},
            selectRow: [],
            mixins_post: 'get'
        };
    },
    methods: {
        currentOrganId(data) {
            this.currentId = data || '';
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        },
        checkDateType(time) {
            return !!time ? this.$moment(new Date(time)).format('YYYY-MM-DD') : '--';
        },
        addCard() {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/deviceManagement/accessControlMachineManagement/popups/add.vue',
                    width: '548px',
                    height: '724px',
                    props: {
                        callback: resolve
                    },
                    hideStar: false,
                    title: '添加门禁机'
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        restartCard() {
            //获取选中列表的ids
            let ids = [];
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择，请选择后再操作');
                return;
            }
            this.selectRow.forEach((v) => {
                ids.push(v.id);
            });
            this.$msgBox(`门禁机重启`, '重启时无法开门，你确定继续吗?')
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '重启成功!'
                    });
                    // 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(() => {});
        },
        remoteDoorOpeningCard() {
            let ids = [];
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择，请选择后再操作');
                return;
            }
            this.selectRow.forEach((v) => {
                ids.push(v.id);
            });
            this.$msgBox(`远程开门`, `已选${ids.length}台门禁机，其中${ids.length}台在线，是否远程开门?`)
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '远程开门成功!'
                    });
                    // 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(() => {});
        },
        deleteCard() {
            //获取选中列表的ids
            let ids = [];
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择，请选择后再操作');
                return;
            }
            this.selectRow.forEach((v) => {
                ids.push(v.id);
            });

            this.$msgBox(`删除确认`, '门禁设备删除后，人员将无法正常开启门禁')
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '重启成功!'
                    });
                    // 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(() => {});
        },
        lookAccessControl(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/deviceManagement/accessControlMachineManagement/popups/details.vue',
                    width: '615px',
                    height: '724px',
                    props: {
                        callback: resolve
                    },
                    hideStar: true,
                    showCancelButton: true,
                    showConfirmButton: true,
                    title: '门禁机信息'
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        replaceCard(row) {},
        temporaryPasswordCard(row) {}
    },
    watch: {
        currentId(newValue, oldValue) {
            this.mixins_query.communityId = '';
            this.mixins_query.buildingId = '';
            this.mixins_query.unitName = '';
            this.mixins_query.roomNumber = '';
            if (newValue.type) {
                let newValueIds = newValue.id.split('-');
                if (newValue.type === 'community') {
                    this.mixins_query.communityId = newValueIds[0];
                } else if (newValue.type === 'building') {
                    this.mixins_query.buildingId = newValueIds[1];
                } else if (newValue.type === 'unit') {
                    this.mixins_query.buildingId = newValueIds[1];
                    this.mixins_query.unitName = newValueIds[2];
                } else if (newValue.type === 'room') {
                    this.mixins_query.roomNumber = newValueIds[newValueIds.length - 1];
                }
            }
            this.thisLeftData = newValue;
            this.mixins_search();
        }
    },
    created() {
        this.mixins_dataUrl = '/sc-gate-web/gate/page'; // 分页查询接口
        this.mixins_query = {};
        this.mixins_search();
    }
};
</script>