拓扑图配置

src/views/govern/manage/gplot/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:operation>
+                <el-upload
+                    action=""
+                    class="upload-demo"
+                    :show-file-list="false"
+                    :auto-upload="false"
+                    :on-change="chooseImage"
+                >
+                    <el-button type="primary" icon="el-icon-Plus">新增拓扑图</el-button>
+                </el-upload>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <popupEdit ref="popupRef"></popupEdit>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import popupEdit from './popupEdit.vue'
+import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
+import { ElMessage } from 'element-plus'
+
+defineOptions({
+    name: 'govern/manage/gplot'
+})
+const tableRef = ref()
+const popupRef = ref()
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/cs-device-boot/topologyTemplate/queryImage',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', width: 60 },
+        { title: '拓扑图模版名称', field: 'name', align: 'center' },
+        { title: '监测点数量', field: 'pointNum', align: 'center' },
+        { title: '拓扑图', field: 'filePath', align: 'center', render: 'image' },
+        {
+            title: '操作',
+            align: 'center',
+            width: '130',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('编辑菜单', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该菜单吗？'
+                    },
+                    click: row => {
+                        deleteTopoTemplate(row.id).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.pointNum = item.csLineTopologyTemplateVOList.length
+        })
+    }
+})
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.table.ref = tableRef.value
+    tableStore.index()
+    tableStore.table.loading = false
+})
+const addMenu = () => {
+    console.log(popupRef)
+    popupRef.value.open('新增菜单')
+}
+const chooseImage = e => {
+    console.warn(e)
+    uploadTopo(e.raw).then(res => {
+        ElMessage.success('新增成功')
+        tableStore.index()
+    })
+}
+</script>