bns_zhgd_web/src/views/perception-devices/equipment-manage/components/project-details.vue

<template>
    <!-- 感知设备 ---- 设备管理  -->
    <div class="app-container">
        <TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
            <template slot="btn">
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
                    新增
                </el-button>
            </template>
            <template slot="handle" slot-scope="{ data }">
                <el-button size="mini" type="primary" @click="handleAddOrOther(data, 2)" icon="el-icon-edit">
                    修改
                </el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data)">
                    删除
                </el-button>
            </template>

            <template slot="status" slot-scope="{ data }">
                <el-tag size="mini">状态 </el-tag>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
            <template slot="outerContent">
                <el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef">
                    <el-form-item label="监测名称" prop="jc_name">
                        <el-input placeholder="请输入监测名称" v-model="addOrEditForm.jc_name" clearable />
                    </el-form-item>
                    <el-form-item label="设备类型：" prop="deviceType">
                        <el-select v-model="addOrEditForm.deviceType" clearable filterable style="width: 100%">
                            <el-option v-for="type in typeList" :key="type.id" :label="type.label" :value="type.id" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="采集值" prop="cj_data">
                        <el-input placeholder="请输入采集值" v-model="addOrEditForm.cj_data" clearable />
                    </el-form-item>

                    <el-form-item label="采集值类型" prop="cj_type">
                        <el-input placeholder="请输入采集值类型" v-model="addOrEditForm.cj_type" clearable />
                    </el-form-item>
                    <el-form-item label="采集值单位：">
                        <el-input placeholder="请输入采集值单位" v-model="addOrEditForm.cj_unit" clearable />
                    </el-form-item>
                    <el-form-item label="是否告警" prop="is_warning">
                        <el-select v-model="addOrEditForm.is_warning" clearable filterable style="width: 100%">
                            <el-option label="是" value="1" />
                            <el-option label="否" value="2" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="变化值：" prop="change_data">
                        <el-input placeholder="请输入变化值" v-model="addOrEditForm.change_data" clearable />
                    </el-form-item>

                    <el-form-item label="最大阈值：" prop="max_data">
                        <el-input placeholder="请输入最大阈值" v-model="addOrEditForm.max_data" clearable />
                    </el-form-item>
                    <el-form-item label="最小阈值：" prop="min_data">
                        <el-input placeholder="请输入最小阈值" v-model="addOrEditForm.min_data" clearable />
                    </el-form-item>
                    <el-form-item label="设备级联编码：" prop="code">
                        <el-input placeholder="请输入设备级联编码" v-model="addOrEditForm.code" clearable />
                    </el-form-item>

                    <el-form-item class="handle">
                        <el-button @click="onCancel"> 取消 </el-button>
                        <el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
                    </el-form-item>
                </el-form>
            </template>
        </DialogModel>
    </div>
</template>

<script>
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'

import { formLabel, columnsList, dialogConfig } from './config'
import { getProjectListAPI } from '@/api/project-manage/index.js'
export default {
    components: {
        TableModel,
        DialogModel,
    },
    data() {
        return {
            formLabel,
            columnsList,
            dialogConfig,
            getProjectListAPI,
            dialogType: 1,
            // 新增或修改接口
            addOrEditForm: {
                jc_name: '', // 监测名称
                createTime: '', // 创建时间
                cj_data: '', //采集值
                cj_type: '', // 采集值类型
                cj_unit: '', // 采集值单位
                is_warning: '', // 是否告警
                change_data: '', // 变化值
                max_data: '', // 最大阈值
                min_data: '', // 最小阈值
                code: '', // 设备级联编码
            },
            addOrEditFormRules: {
                jc_name: [
                    {
                        required: true,
                        message: '请输入监测名称',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        handleAddOrOther(data, type) {
            const titleType = {
                1: '新增',
                2: '修改',
            }
            this.dialogType = type
            this.dialogConfig.outerTitle = titleType[type]
            this.dialogConfig.outerVisible = true
        },
        handleDeleteData(data) {
            this.$modal
                .confirm(`是否确认删除该条数据`)
                .then(async () => {
                    this.$refs.tableRef.getTableList()
                })
                .catch(() => {})
        },
        /** 关闭外侧弹框 */
        closeDialogOuter() {
            this.$refs.addOrEditFormRef.resetFields()
            this.dialogConfig.outerVisible = false
        },

        // 表单提交
        onSubmitForm() {
            this.$refs.addOrEditFormRef.validate(async (valid) => {
                if (valid) {
                    this.dialogConfig.outerVisible = false
                }
            })
        },

        // 取消按钮
        onCancel() {
            this.$refs.addOrEditFormRef.resetFields()
            this.dialogConfig.outerVisible = false
        },
    },
}
</script>

<style></style>