admin-sjzx/src/views/pqs/database/standard/index.vue

<template>
    <div class="default-main" :style="height">
        <!-- 标准库 -->

        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <standardTree
                    ref="treeRef"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></standardTree>
            </pane>
            <pane style="background: #fff" :style="height">
                <div class="pd10" style="display: flex; justify-content: end">
                    <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>
                    <el-button icon="el-icon-Download" type="primary" @click="download" v-if="flag">下载</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>
            </pane>
        </splitpanes>
        <!-- 新增 -->

        <addTree ref="addTreeRef" @onSubmit="treeRef.loadData(dotList.id)"></addTree>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import standardTree from '@/components/tree/pqs/standardTree.vue'
import { mainHeight } from '@/utils/layout'
import addTree from './components/addTree.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getFileNameAndFilePath, downloadFile } 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 treeRef = ref()
const addTreeRef = ref()
const url = ref('')
const dotList: any = ref({})
const flag: any = ref(false)
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 100)
    }
})

const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
    url.value = ''
    flag.value = false
    if (data?.url != null && data?.url != '') {
        flag.value = true
        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)
}
// 下载
const download = () => {
    let url = dotList.value.url
    let urls = url
    let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
    downloadFile({ filePath: url }).then((res: any) => {
        let blob = new Blob([res], {
            type: urls.includes('.pdf')
                ? 'application/pdf'
                : urls.includes('.docx')
                ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                : urls.includes('.xls')
                ? 'application/vnd.ms-excel'
                : urls.includes('.xlsx')
                ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                : urls.includes('.png')
                ? 'image/png'
                : urls.includes('.jpeg')
                ? 'image/jpeg'
                : urls.includes('.jpg')
                ? 'image/jpg'
                : ''
        })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = name
        document.body.appendChild(link)
        link.click()
        link.remove()
    })
}
</script>
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.grid-content {
    text-align: center;
}
.divBox {
    width: 250px;
    height: 31px;
    margin: auto;
    line-height: 32px;
    border: 1px solid #c9c9c9;
    &:hover {
        border: 1px solid #002255;
    }
}
.box {
    padding: 10px;
    // margin-top: 10px;
    overflow-y: auto;
    font-size: 15px;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.mTop {
    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>