devicesmgt/sgzb-ui/src/views/iotDevice/index.vue

<template>
    <div class="app-container">
        <!-- 查询 -->
        <el-form inline>
            <el-form-item>
                <el-input
                    placeholder="请输入关键字"
                    v-model="queryParams.keyWords"
                />
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="handelQuery()"
                    >搜索</el-button
                >
                <el-button size="mini" type="primary" @click="addDevice()"
                    >添加设备</el-button
                >
                <el-button size="mini" type="primary" @click="uploadCode()"
                    >下载二维码</el-button
                >
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table
            border
            :data="deviceList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column
                align="center"
                type="index"
                width="55"
                label="序号"
            />
            <el-table-column
                prop="iotTypeName"
                align="center"
                label="设备类型"
            />
            <el-table-column prop="iotCode" align="center" label="设备编号" />
            <el-table-column align="center" label="设备状态">
                <template slot-scope="{ row }">
                    <el-tag
                        size="mini"
                        type="success"
                        v-if="row.iotStatus === 0"
                        >在线</el-tag
                    >
                    <el-tag
                        size="mini"
                        type="warning"
                        v-if="row.iotStatus === 1"
                        >离线</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column align="center" label="二维码">
                <template slot-scope="{ row }">
                    <el-button type="text" size="small" @click="showQrCode(row)"
                        >查看</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column align="center" label="绑定状态">
                <template slot-scope="{ row }">
                    <el-tag
                        size="mini"
                        type="success"
                        v-if="row.bindStatus === 0"
                        >已绑定</el-tag
                    >
                    <el-tag
                        size="mini"
                        type="warning"
                        v-if="row.bindStatus === 1"
                        >未绑定</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column prop="deviceName" align="center" label="操作">
                <template slot-scope="{ row }">
                    <el-button
                        type="text"
                        icon="el-icon-tickets"
                        @click="handleViewRecord(row.iotId)"
                        >记录</el-button
                    >
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        style="color: #f56c6c"
                        @click="handleDeleteAndUnbind(row.iotId, 1)"
                        >删除</el-button
                    >
                    <el-button
                        type="text"
                        icon="el-icon-document-delete"
                        style="color: #e6a23c"
                        @click="handleDeleteAndUnbind(row.iotId, 2)"
                        v-if="row.bindStatus === 0"
                        >解绑</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getDeviceList"
        />

        <!-- 弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <!-- 设备添加表单 -->
            <template slot="outerContent">
                <template v-if="dialogConfig.outerTitle === '添加设备'">
                    <el-form
                        label-width="80px"
                        :model="addDeviceParams"
                        :rules="addDeviceRules"
                        ref="addDeviceParamsRef"
                    >
                        <el-form-item label="设备类型" prop="iotType">
                            <el-select
                                style="width: 100%"
                                placeholder="请选择设备类型"
                                clearable
                                v-model="addDeviceParams.iotType"
                            >
                                <el-option :value="125" label="定位设备" />
                                <el-option :value="126" label="其他设备" />
                                <el-option :value="127" label="其他设备" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备编号" prop="iotCode">
                            <el-input
                                placeholder="请输入设备编号"
                                clearable
                                v-model="addDeviceParams.iotCode"
                            />
                        </el-form-item>
                    </el-form>

                    <el-row style="margin-top: 20px; text-align: right">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleSubmit()"
                            >确 定</el-button
                        >
                        <el-button
                            size="mini"
                            type="warning"
                            @click="handleCancel()"
                            >取 消</el-button
                        >
                    </el-row>
                </template>
                <TableModel
                    :config="dialogConfig"
                    :sendParams="sendParams"
                    :sendApi="getDeviceBindRecordApi"
                    v-else
                />
            </template>
        </DialogModel>
    </div>
</template>

<script>
import DialogModel from '@/components/DialogModel' // 弹框组件
import TableModel from '@/components/TableModel' // 表格组件
import { dialogConfig } from './config'
import {
    addDeviceInfoApi,
    getDeviceListApi,
    deleteDeviceApi,
    unbindDeviceApi,
    getDeviceBindRecordApi,
    getDeviceBindDetailsApi,
} from '@/api/iotDevice'
export default {
    components: {
        DialogModel,
        TableModel,
    },
    data() {
        return {
            deviceList: [],
            total: 0,
            // 弹框的参数
            dialogConfig,
            // 列表查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWords: '',
            },
            // 新增给设备数据源
            addDeviceParams: {
                iotType: '',
                iotCode: '',
            },
            // 新增设备表单校验
            addDeviceRules: {
                iotType: [
                    {
                        required: true,
                        message: '请选择设备类型',
                        trigger: 'change',
                    },
                ],
                iotCode: [
                    {
                        required: true,
                        message: '请输入11位的设备编号',
                        trigger: 'blur',
                        min: 11,
                        max: 11,
                    },
                ],
            },
            // 查看绑定记录时的参数
            sendParams: {
                iotId: '',
            },
            // 复选框选中的数据
            selectList: [],
            // 绑定记录Api
            getDeviceBindRecordApi,
        }
    },

    created() {
        this.getDeviceList()
    },

    methods: {
        /** 获取设备列表 */
        async getDeviceList() {
            const res = await getDeviceListApi()
            this.deviceList = res.rows
            this.total = res.total
        },
        /** 搜索按钮 */
        handelQuery() {
            this.getDeviceList()
        },
        /** 添加设备 */
        addDevice() {
            this.dialogConfig.outerWidth = '40%'
            this.dialogConfig.outerTitle = '添加设备'
            this.dialogConfig.outerVisible = true
        },

        /** 二维码下载 */
        uploadCode() {
            if (this.selectList.length < 1) {
                this.$message.error('请勾选需要下载的设备！')
                return
            }
        },
        /** 复选框选择事件 */
        handleSelectionChange(list) {
            this.selectList = list
        },
        /** 确定按钮 */
        handleSubmit() {
            this.$refs.addDeviceParamsRef.validate(async (valid) => {
                if (valid) {
                    // 1. 校验通过调后台Api
                    const res = await addDeviceInfoApi(this.addDeviceParams)

                    if (res.code === 200) {
                        this.$message.success('新增成功！')
                        this.dialogConfig.outerVisible = false
                        this.addDeviceParams.iotType = ''
                        this.addDeviceParams.iotCode = ''
                        this.getDeviceList()
                    }
                }
            })
        },
        /** 取消按钮 */
        handleCancel() {
            this.addDeviceParams.iotType = ''
            this.addDeviceParams.iotCode = ''
            this.dialogConfig.outerVisible = false
        },

        /** 查看记录 */
        handleViewRecord(id) {
            this.dialogConfig.outerWidth = '70%'
            this.dialogConfig.outerTitle = '绑定记录'
            this.sendParams.iotId = id
            this.dialogConfig.outerVisible = true
        },

        /** 关闭弹框 */
        closeDialogOuter() {
            this.dialogConfig.outerVisible = false
        },

        /** 删除和解绑设备 */
        handleDeleteAndUnbind(id, type) {
            const title = type === 1 ? '删除' : '解绑'
            this.$confirm(`是否确定${title}当前设备, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                let ApiFun =
                    type === 1 ? deleteDeviceApi : getDeviceBindDetailsApi
                let params = type === 1 ? id : { iotId: id }
                const res = await ApiFun(params)
                if (type === 1 && res.code === 200) {
                    this.$message.success(`${title}成功！`)
                    this.getDeviceList()
                }
                if (type === 2 && res.code === 200) {
                    const unbindParams = {
                        maCode: '',
                        iotId: id,
                        id: '',
                        typeId: '',
                    }
                    res.data.map((e) => {
                        if (!e.unBindTime) {
                            unbindParams.maCode = e.maCode
                            unbindParams.id = e.id
                            unbindParams.typeId = e.typeId
                        }
                    })
                    unbindDeviceApi(unbindParams).then((res) => {
                        this.$message.success(`${title}成功！`)
                        this.getDeviceList()
                    })
                }
            })
        },
        /** 查看二维码 */
        showQrCode() {},
    },
}
</script>