新增设备类型

祖安之光

2026-03-25 66900bcf11faa01ea740ee14ee8d8a59a13a8e26

 src/views/monitorAlert/storeAreaManage/components/deviceDialog.vue

@@ -1,38 +1,104 @@
<template>
    <el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false" title="设备管理" center width="75%">
        <el-button type="primary" style="margin-bottom: 20px" @click="openAdd('新增设备',{})">绑定设备</el-button>
    <el-dialog
        :visible.sync="dialogVisible"
        append-to-body
        :close-on-click-modal="false"
        title="设备管理"
        center
        width="75%"
    >
        <el-button
            type="primary"
            style="margin-bottom: 20px"
            @click="openAdd('新增设备', {})"
            >绑定设备</el-button
        >
        <el-table
            :data="deviceList"
            border
            :stripe="false"
            style="width: 100%;"
        >
            <el-table-column label="序号" type="index" align="center"></el-table-column>
            <el-table-column label="设备名称" prop="deviceName" align="center"></el-table-column>
            <el-table-column label="设备ID" prop="deviceId" align="center"></el-table-column>
            <el-table-column
                label="序号"
                type="index"
                align="center"
            ></el-table-column>
            <el-table-column
                label="设备名称"
                prop="deviceName"
                align="center"
            ></el-table-column>
            <el-table-column
                label="设备ID"
                prop="deviceId"
                align="center"
            ></el-table-column>
            <!-- <el-table-column label="设备类型" prop="deviceId" align="center">
                <template slot-scope="scope">
                    {{scope.row.deviceType == 1?'温湿度':'摄像头'}}
                </template>
            </el-table-column>
            <el-table-column label="分组ID" prop="groupId" align="center"></el-table-column> -->
            <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
            <el-table-column
                label="操作"
                align="center"
                width="180"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button type="text" @click="openAdd('修改设备',scope.row)">修改</el-button>
                    <el-button type="text" style="color: red" @click="delDevice(scope.row)">删除</el-button>
                    <el-button
                        type="text"
                        @click="openAdd('修改设备', scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        type="text"
                        style="color: red"
                        @click="delDevice(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            <el-button type="primary" @click="dialogVisible = false"
                >关 闭</el-button
            >
        </span>
        <el-dialog :visible.sync="addVisible" append-to-body :close-on-click-modal="false" :title="title" center width="50%" @close="reset()">
            <el-form ref="form" :rules="formRules" :model="deviceForm" label-width="140px" class="form">
        <el-dialog
            :visible.sync="addVisible"
            append-to-body
            :close-on-click-modal="false"
            :title="title"
            center
            width="50%"
            @close="reset()"
        >
            <el-form
                ref="form"
                :rules="formRules"
                :model="deviceForm"
                label-width="140px"
                class="form"
            >
                <el-form-item label="设备类型:" prop="deviceType">
                    <el-radio-group v-model="deviceForm.deviceType">
                        <el-radio :label="1">AI盒子</el-radio>
                        <el-radio :label="2">AI摄像头</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="设备名称:" prop="deviceName">
                    <el-input v-model.trim="deviceForm.deviceName"/>
                    <el-input v-model.trim="deviceForm.deviceName" />
                </el-form-item>
                <el-form-item label="设备ID:" prop="deviceId">
                    <el-input v-model.trim="deviceForm.deviceId"/>
                    <el-input v-model.trim="deviceForm.deviceId" />
                </el-form-item>
                <el-form-item v-if="deviceForm.deviceType == 2" label="云端用户名:" prop="accessKey">
                    <el-input v-model.trim="deviceForm.accessKey" :disabled="title == '修改设备'"/>
                </el-form-item>
                <el-form-item v-if="deviceForm.deviceType == 2" label="云端密码:" prop="accessSecret">
                    <el-input v-model.trim="deviceForm.accessSecret" :disabled="title == '修改设备'"/>
                </el-form-item>
                <!-- <el-form-item label="类型:" prop="deviceType">
                    <el-select v-model="deviceForm.deviceType" placeholder="请选择类型">
@@ -53,194 +119,233 @@
</template>

<script>
    import {mapGetters} from "vuex";
    import {getCityListData, getProvinceListData} from "../../../../api/area";
    // import {saveReserveInfo, getInfoById, editReserveInfo, delStore} from '../../../api/warehouse'
    import Cookies from 'js-cookie'
    import {MessageBox} from "_element-ui@2.14.1@element-ui";
    import {
        addOrUpdateStoreroomDevice, deleteStoreroomDevice,
        getDeviceList,
        getDevicePageList,
        getStoreroomPage,
        getStoreroomPageV2
    } from "../../../../api/monitorAlert";
    export default {
        name: "deviceDialog",
        data() {
            return {
                dialogVisible: false,
                title: '',
                addVisible: false,
                deviceQuery: {
                    companyCode: '',
                    storeNum: '',
                    storeroomNum: '',
                },
                deviceList: [],
                deviceForm: {
                    id: '',
                    companyCode: '',
                    deviceId: '',
                    deviceName: '',
                    deviceType: null,
                    groupId: '',
                    storeNum: '',
                    storeroomNum: ''
                },
                formRules:{
                    deviceName:[{ required: true, message: '请输入设备名称', trigger: 'change' },],
                    deviceId:[{ required: true, message: '请输入设备id', trigger: 'change' },]
                }
            }
        },
        created() {
            const t = this
        },
        computed: {
            ...mapGetters([
                'userType',
                'username'
            ])
        },
        methods: {
            open(data){
                const {companyCode,storeNum,storeroomNum} = data
                this.deviceQuery = {companyCode,storeNum,storeroomNum}
                this.getDataList()
                this.dialogVisible = true
import { mapGetters } from "vuex";
import { getCityListData, getProvinceListData } from "../../../../api/area";
// import {saveReserveInfo, getInfoById, editReserveInfo, delStore} from '../../../api/warehouse'
import Cookies from "js-cookie";
import { MessageBox } from "_element-ui@2.14.1@element-ui";
import {
    addOrUpdateStoreroomDevice,
    deleteStoreroomDevice,
    getDeviceList,
    getDevicePageList,
    getStoreroomPage,
    getStoreroomPageV2
} from "../../../../api/monitorAlert";
export default {
    name: "deviceDialog",
    data() {
        return {
            dialogVisible: false,
            title: "",
            addVisible: false,
            deviceQuery: {
                companyCode: "",
                storeNum: "",
                storeroomNum: ""
            },
            isKey(key,obj){
                return key in obj
            deviceList: [],
            deviceForm: {
                id: "",
                companyCode: "",
                deviceId: "",
                deviceName: "",
                deviceType: null,
                groupId: "",
                storeNum: "",
                storeroomNum: "",
                accessKey: "",
                accessSecret: ""
            },
            async getDataList() {
                let res = await getDeviceList({
                    filter: this.deviceQuery
                })
                if (res.data.code === "200") {
                    if(Array.isArray(res.data.result)){
                        this.deviceList = res.data.result
                    }else{
                        this.dataList = []
            formRules: {
                deviceType: [
                    {
                        required: true,
                        message: "请选择设备类型",
                        trigger: "blur"
                    }
                ],
                deviceName: [
                    {
                        required: true,
                        message: "请输入设备名称",
                        trigger: "blur"
                    }
                ],
                deviceId: [
                    {
                        required: true,
                        message: "请输入设备id",
                        trigger: "blur"
                    }
                ],
                accessKey: [
                    {
                        required: true,
                        message: "请输入云端用户名",
                        trigger: "blur"
                    }
                ],
                accessSecret: [
                    {
                        required: true,
                        message: "请输入云端密码",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        const t = this;
    },
    computed: {
        ...mapGetters(["userType", "username"])
    },
    methods: {
        open(data) {
            const { companyCode, storeNum, storeroomNum } = data;
            this.deviceQuery = { companyCode, storeNum, storeroomNum };
            this.getDataList();
            this.dialogVisible = true;
        },
        isKey(key, obj) {
            return key in obj;
        },
        async getDataList() {
            let res = await getDeviceList({
                filter: this.deviceQuery
            });
            if (res.data.code === "200") {
                if (Array.isArray(res.data.result)) {
                    this.deviceList = res.data.result;
                } else {
                    this.$message({
                        type: 'warning',
                        message: res.data.message
                    })
                    this.dataList = [];
                }
                this.listLoading = false
            },

            openAdd(type,data){
                this.addVisible = true
                this.title = type
                this.deviceForm.companyCode = this.deviceQuery.companyCode
                this.deviceForm.storeNum = this.deviceQuery.storeNum
                this.deviceForm.storeroomNum = this.deviceQuery.storeroomNum

                console.log(data,'data')
                if(type == '修改设备'){
                    for(let i in this.deviceForm){
                        if(this.isKey(i,data)){
                            this.deviceForm[i] =data[i]
                        }
                    }
                }
            },

            confirm(){
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        const {id,...data} = this.deviceForm
                        const res = await addOrUpdateStoreroomDevice(this.title == '新增设备'?data:this.deviceForm)
                        if(res.data.code == 200){
                            if(this.title == '新增设备'){
                                this.$message.success('设备新增成功')
                            }else{
                                this.$message.success('设备修改成功')
                            }
                        }else{
                            this.$message.warning(res.data.message)
                        }
                        this.addVisible = false
                        await this.getDataList()
                    }
                })
            },
            delDevice(data){
                const t = this
                t.$confirm('此操作将删除该设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await deleteStoreroomDevice({id: data.id})
                    console.log(res,'res')
                    if(res.data.code == 200){
                        t.$message.success('设备删除成功')
                    }else{
                        t.$message.warning(res.data.message)
                    }
                    await this.getDataList()
                })
            },
            reset(){
                this.deviceForm={
                    id: '',
                    companyCode: '',
                    deviceId: '',
                    deviceName: '',
                    deviceType: null,
                    groupId: '',
                    storeNum: '',
                    storeroomNum: ''
                }
                this.$refs.form.clearValidate()
            } else {
                this.$message({
                    type: "warning",
                    message: res.data.message
                });
            }
            this.listLoading = false;
        },

        openAdd(type, data) {
            this.addVisible = true;
            this.title = type;
            this.deviceForm.companyCode = this.deviceQuery.companyCode;
            this.deviceForm.storeNum = this.deviceQuery.storeNum;
            this.deviceForm.storeroomNum = this.deviceQuery.storeroomNum;
            if (type == "修改设备") {
                for (let i in this.deviceForm) {
                    if (this.isKey(i, data)) {
                        this.deviceForm[i] = data[i];
                    }
                }
            }
        },

        confirm() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    if(this.deviceForm.deviceType == 1){
                        this.deviceForm.accessKey = ''
                        this.deviceForm.accessSecret = ''
                    }
                    const { id, ...data } = this.deviceForm;
                    const res = await addOrUpdateStoreroomDevice(
                        this.title == "新增设备" ? data : this.deviceForm
                    );
                    if (res.data.code == 200) {
                        if (this.title == "新增设备") {
                            this.$message.success("设备新增成功");
                        } else {
                            this.$message.success("设备修改成功");
                        }
                    } else {
                        this.$message.warning(res.data.message);
                    }
                    this.addVisible = false;
                    await this.getDataList();
                }
            });
        },
        delDevice(data) {
            const t = this;
            t.$confirm("此操作将删除该设备, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                const res = await deleteStoreroomDevice({ id: data.id });
                console.log(res, "res");
                if (res.data.code == 200) {
                    t.$message.success("设备删除成功");
                } else {
                    t.$message.warning(res.data.message);
                }
                await this.getDataList();
            });
        },
        reset() {
            this.deviceForm = {
                id: "",
                companyCode: "",
                deviceId: "",
                deviceName: "",
                deviceType: null,
                groupId: "",
                storeNum: "",
                storeroomNum: "",
                accessKey: "",
                accessSecret: ""
            };
            this.$refs.form.clearValidate();
        }
    }
};
</script>

<style lang="scss" scoped>
    .part-title{
        font-size: 16px;
        font-weight: bolder;
.part-title {
    font-size: 16px;
    font-weight: bolder;
}
.selector {
    /deep/ .el-form-item__content {
        margin-left: 0 !important;
    }
    .selector{
        /deep/ .el-form-item__content{
            margin-left: 0 !important;
        }
}
.editForm {
    .el-form-item {
        display: flex !important;
    }
    .editForm{
        .el-form-item{
            display: flex !important;
        }
        /deep/ .el-form-item__content{
            width: 100%;
            margin-left: 0 !important;
        }
    /deep/ .el-form-item__content {
        width: 100%;
        margin-left: 0 !important;
    }
}

    .numInput{
        /deep/ .el-input__inner{
            padding-right: 0;
        }
.numInput {
    /deep/ .el-input__inner {
        padding-right: 0;
    }
    tr{
}
tr {
    display: flex;
    td {
        flex: 1;
        display: flex;
        td{
            flex: 1;
            display: flex;
            justify-content: center;
            padding: 5px;
            align-items: center;
        }
        .w-12{
            flex: 0.5;
        }
        .w-20{
            flex: 2;
        }
        justify-content: center;
        padding: 5px;
        align-items: center;
    }
    .w-12 {
        flex: 0.5;
    }
    .w-20 {
        flex: 2;
    }
}
</style>