huimv.cloud.client/src/views/deviceManagement/SubDeviceAdmin.vue

<template>
    <!-- 子设备管理页 -->
    <div class="SubDeviceAdmin">
        <header id="header">
            <el-page-header @back="goBack" :content="mainDeviceInfo.name" />
            <el-button @click="showAddSubDevice=true" type="primary" icon="el-icon-document-add">添加</el-button>
        </header>

        <el-table :data="subDeviceList" style="width: 100%">
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="communicationId" label="通讯序号"></el-table-column>
            <el-table-column prop="deviceNo" label="型号"></el-table-column>
            <el-table-column prop="channelNo" label="通道"></el-table-column>
            <el-table-column label="最后一次">
                <template slot-scope="scope">
                    <span>{{ new Date(scope.row.updated).toLocaleDateString() }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                    <!-- <el-button @click="del(scope.row)">删除</el-button> -->
                    <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                        <el-button slot="reference" type="text" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加子设备信息 -->
        <el-dialog title="添加/编辑子设备信息" :visible.sync="showAddSubDevice">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="设备型号">
                    <el-input v-model="form.deviceNo"></el-input>
                </el-form-item>
                <el-form-item label="通讯序号">
                    <el-input v-model="form.communicationId"></el-input>
                </el-form-item>
                <el-form-item label="通道">
                    <el-input v-model="form.channelNo"></el-input>
                </el-form-item>
                <!-- <el-form-item label="硬件型号">
                    <el-input v-model="form.hardTypeId"></el-input>
                </el-form-item> -->
                <el-form-item label="硬件型号">
                    <el-select v-model="form.hardTypeId" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="设备是否可用">
                    <el-input v-model="form.enable"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addSubDevice">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions } from "vuex";

export default {
    name: "SubDeviceAdmin",
    data() {
        return {
            mainDeviceInfo: {},
            subDeviceList: [], // 子设备信息列表
            showAddSubDevice: false,
            form: {
                deviceNo: "",
				communicationId: null,
				channelNo: "",
				hardTypeId: null,
				enable: 0
            }
        };
    },
    created() {
        this.mainDeviceInfo = this.$route.query;
        console.log(this.$route.query);
    },
    mounted() {
        // 获取子设备信息列表
        this.doSubDeviceList();
    },
    methods: {
        ...mapActions(["fetch"]),
        // 获取子设备信息列表
        doSubDeviceList() {
            this.fetch({
                api: "/device/device-slave/list",
                method: "GET",
                data: {
                    communicationId: this.mainDeviceInfo.id
                },
                success: res => {
                    this.subDeviceList = res;
                }
            });
        },
        // 编辑
        edit(row) {
            console.log("编辑", row);
            this.showAddSubDevice = true;
        },
        // 删除
        del(row) {
            console.log("删除 未完成", row);
        },
        // 保存 添加子设备信息
        addSubDevice() {
            console.log("保存 添加子设备信息", this.form);
        },

        goBack() {
            this.$router.back();
        }
    }
};
</script>

<style lang="scss" scoped>
.SubDeviceAdmin {
    #header {
        display: flex;
        justify-content: space-between;
    }
}
</style>