From e375ae8574de2849cf666d7a18a7c21d15d34840 Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Mon, 19 Feb 2024 16:38:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=89=8D=E7=BD=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=20=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Business/index.ts               |  26 +++
 src/views/pms/Business/terminal/pre.vue | 286 ++++++++++++++++++++++++
 2 files changed, 312 insertions(+)
 create mode 100644 src/api/Business/index.ts
 create mode 100644 src/views/pms/Business/terminal/pre.vue

diff --git a/src/api/Business/index.ts b/src/api/Business/index.ts
new file mode 100644
index 00000000..98cac984
--- /dev/null
+++ b/src/api/Business/index.ts
@@ -0,0 +1,26 @@
+import createAxios from '@/utils/request'
+
+// 新增菜单接口
+export function addNode(data: any) {
+    return createAxios({
+        url: '/device-boot/node/addNode',
+        method: 'post',
+        data: data
+    })
+}
+//修改前置机
+export function updateNode(data: any) {
+    return createAxios({
+        url: '/device-boot/node/updateNode',
+        method: 'put',
+        data: data
+    })
+}
+//删除前置机
+export function delNode(data: any) {
+    return createAxios({
+        url: '/device-boot/node/delNode',
+        method: 'post',
+        params: { id: data }
+    })
+}
diff --git a/src/views/pms/Business/terminal/pre.vue b/src/views/pms/Business/terminal/pre.vue
new file mode 100644
index 00000000..e2a6f170
--- /dev/null
+++ b/src/views/pms/Business/terminal/pre.vue
@@ -0,0 +1,286 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label="前置等级">
+                    <el-select v-model="tableStore.table.params.nodeGrade" clearable placeholder="请选择前置等级">
+                        <el-option v-for="item in fontdveoption" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="状态">
+                    <el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择状态">
+                        <el-option v-for="item in statusoption" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef"></Table>
+
+        <el-dialog
+            :title="dialogTitle"
+            v-model="dialogFormVisible"
+            :close-on-click-modal="false"
+            class="cn-operate-dialog"
+            :before-close="resetForm"
+        >
+            <el-form :model="formData" label-width="120px" :rules="rules" ref="ruleFormRef">
+                <el-form-item label="名称:" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+                <el-form-item label="IP:" prop="ip" class="top">
+                    <el-input v-model="formData.ip" placeholder="请输入Ip"></el-input>
+                </el-form-item>
+                <el-form-item label="等级:" prop="nodeGrade" class="top">
+                    <el-select v-model="formData.nodeGrade" placeholder="请选择等级" style="width: 100%">
+                        <el-option
+                            v-for="item in fontdveoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="最大装置数:" prop="nodeDevNum" class="top">
+                    <el-input
+                        v-model="formData.nodeDevNum"
+                        onkeyup="value = value.replace(/[^0-9]/g,'')"
+                        maxlength="5"
+                        placeholder="请输入最大装置数"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="排序:" prop="sort" class="top">
+                    <el-input v-model="formData.sort" placeholder="请输入排序"></el-input>
+                </el-form-item>
+                <el-form-item label="描述:" prop="remark" class="top">
+                    <el-input
+                        v-model="formData.remark"
+                        :autosize="{ minRows: 2, maxRows: 4 }"
+                        type="textarea"
+                        placeholder="请输入描述"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="resetForm">取 消</el-button>
+                <el-button type="primary" @click="onSubmit">确 定</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, nextTick } from 'vue'
+import { addNode, delNode, updateNode } from '@/api/Business'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+defineOptions({
+    name: 'govern/log/debug'
+})
+
+const fontdveoption: any = ref([
+    { id: 0, name: '极重要' },
+    { id: 1, name: '普通' },
+    { id: 2, name: '备用' }
+])
+const statusoption: any = ref([
+    { id: 0, name: '未启用' },
+    { id: 1, name: '启用' }
+])
+
+const ruleFormRef = ref()
+
+const formData: any = ref({
+    name: '',
+    ip: '',
+    nodeGrade: '',
+    nodeDevNum: '',
+    sort: '',
+    remark: ''
+})
+const rules = reactive({
+    name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
+    ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
+    nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
+    nodeDevNum: [{ required: true, message: '最大装置数不可为空', trigger: 'blur' }],
+    sort: [{ required: true, message: '排序不可为空', trigger: 'blur' }],
+    remark: [{ required: true, message: '描述不可为空', trigger: 'blur' }]
+})
+const dialogFormVisible = ref(false)
+const dialogTitle = ref('新增前置机')
+
+const tableStore = new TableStore({
+    url: '/device-boot/node/nodeList',
+    method: 'POST',
+    column: [
+        { title: '名称', field: 'name' },
+        { title: 'IP', field: 'ip' },
+        {
+            title: '等级',
+            field: 'nodeGrade',
+            render: 'tag',
+            custom: {
+                0: 'success',
+                1: 'warning',
+                2: 'info'
+            },
+            replaceValue: {
+                0: '极重要',
+                1: '普通',
+                2: '备用'
+            }
+        },
+        {
+            title: '最大监测点数量',
+            field: 'nodeDevNum'
+        },
+        {
+            title: '排序',
+            field: 'sort'
+        },
+        {
+            title: '状态',
+            field: 'state',
+            render: 'tag',
+            custom: {
+                0: 'warning',
+                1: 'success'
+            },
+            replaceValue: {
+                0: '未启用',
+                1: '启用'
+            }
+        },
+        { title: '描述', field: 'remark' },
+
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+
+                    click: async row => {
+                        dialogFormVisible.value = true
+                        dialogTitle.value = '前置机修改'
+                        formData.value = JSON.parse(JSON.stringify(row))
+                    }
+                },
+
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        delNode(row.id).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
+        }
+    }
+})
+tableStore.table.params.orderBy = 'desc'
+
+// 新增
+const add = () => {
+    dialogFormVisible.value = true
+    dialogTitle.value = '新增前置机'
+}
+
+// 确认
+const onSubmit = () => {
+    ruleFormRef.value.validate((valid: any) => {
+        if (valid) {
+            if (dialogTitle.value == '新增前置机') {
+                addNode(formData.value).then(res => {
+                    ElMessage.success('新增前置机')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            } else {
+                updateNode(formData.value).then(res => {
+                    ElMessage.success('修改成功')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            }
+        }
+    })
+}
+// 清空表格
+const resetForm = () => {
+    dialogFormVisible.value = false
+    formData.value = {
+        name: '',
+        ip: '',
+        nodeGrade: '',
+        nodeDevNum: '',
+        sort: '',
+        remark: ''
+    }
+}
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
+})
+
+const addMenu = () => {}
+</script>
+<style lang="scss" scoped>
+.qrcode-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 180px;
+    height: 180px;
+    padding: 10px;
+    background: #fff;
+    flex-direction: column;
+
+    .qrcode-label-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+    .qrcode-label-img {
+        width: 140px;
+        height: 140px;
+    }
+}
+</style>