联调案例库

src/views/pqs/database/standard/index.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="default-main" :style="height">
         <!-- 标准库 -->
+
         <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
             <pane :size="size">
                 <standardTree
-                    :default-expand-all="false"
+                    ref="treeRef"
                     :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                     :current-node-key="monitoringPoint.state.lineId"
                     @node-click="handleNodeClick"
@@ -13,13 +14,32 @@
             </pane>
             <pane style="background: #fff" :style="height">
                 <div class="pd10" style="display: flex; justify-content: end">
-                    <el-button icon="el-icon-Plus" type="primary">新增</el-button>
-                    <el-button icon="el-icon-Edit" type="primary">修改</el-button>
-                    <el-button icon="el-icon-Delete" type="primary">删除</el-button>
+                    <el-button icon="el-icon-Plus" type="primary" @click="addUser">新增</el-button>
+                    <el-button icon="el-icon-Edit" type="primary" @click="editUser">修改</el-button>
+                    <el-button icon="el-icon-Delete" type="primary" @click="deleteEven">删除</el-button>
+                </div>
+                <el-empty
+                    v-if="url.length == 0"
+                    description="暂无数据"
+                    class="custom-empty"
+                    :style="`height: calc(${height.height} - 60px);`"
+                />
+                <div :style="`height: calc(${height.height} - 60px);overflow: auto;`" v-else>
+                    <vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
+                    <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" />
+                    <vue-office-pdf v-if="url.includes('.pdf')" :src="url" />
+                    <img
+                        v-if="
+                            url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')
+                        "
+                        :src="url"
+                    />
                 </div>
-                <div :style="`height: calc(${height.height} - 60px) `"></div>
             </pane>
         </splitpanes>
+        <!-- 新增 -->
+
+        <addTree ref="addTreeRef" @onSubmit="treeRef.loadData(dotList.id)"></addTree>
     </div>
 </template>
 <script setup lang="ts">
@@ -28,22 +48,29 @@ import 'splitpanes/dist/splitpanes.css'
 import { Splitpanes, Pane } from 'splitpanes'
 import standardTree from '@/components/tree/pqs/standardTree.vue'
 import { mainHeight } from '@/utils/layout'
-import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
+import addTree from './components/addTree.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getFileNameAndFilePath } from '@/api/system-boot/file'
+//引入相关样式
+import '@vue-office/excel/lib/index.css'
+//引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+import VueOfficeExcel from '@vue-office/excel'
+//引入VueOfficePdf组件
+import VueOfficePdf from '@vue-office/pdf'
+import { deleteyLibstandard } from '@/api/supervision-boot/database/index'
+
 defineOptions({
     name: 'database/standard'
 })
 const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(20)
 const size = ref(0)
-
-const TableHeaderRef = ref()
-const dotList: any = ref({
-    name: monitoringPoint.state.lineName.split('>')[3],
-    id: monitoringPoint.state.lineId,
-    level: 6
-})
+const treeRef = ref()
+const addTreeRef = ref()
+const url = ref('')
+const dotList: any = ref({})
 
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
@@ -54,9 +81,37 @@ onMounted(() => {
 
 const handleNodeClick = (data: any, node: any) => {
     dotList.value = data
+    url.value = ''
+    if (data?.url != null && data?.url != '') {
+        getFileNameAndFilePath({ filePath: data.url }).then(res => {
+            url.value = res.data.url
+        })
+    }
+}
+// 删除
+const deleteEven = () => {
+    ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        deleteyLibstandard({ id: dotList.value.id }).then(() => {
+            ElMessage({
+                type: 'success',
+                message: '删除成功！'
+            })
+            treeRef.value.loadData()
+        })
+    })
+}
+const addUser = () => {
+    addTreeRef.value.open('新增')
+}
+const editUser = () => {
+    addTreeRef.value.open('修改', dotList.value)
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .splitpanes.default-theme .splitpanes__pane {
     background: #eaeef1;
 }
@@ -86,4 +141,19 @@ const handleNodeClick = (data: any, node: any) => {
     margin-top: 5px;
     margin-bottom: 5px;
 }
+/* 自定义 el-empty 的样式 */
+:deep(.custom-empty) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%; /* 调整高度 */
+    padding: 20px; /* 调整内边距 */
+    .el-empty__image {
+        display: none; /* 隐藏默认图片 */
+    }
+    .el-empty__description {
+        font-size: 14px; /* 调整字体大小 */
+        color: var(--vxe-font-color);
+    }
+}
 </style>