修改资料库

src/views/pqs/database/case/components/annex.vue

@@ -1,40 +1,73 @@
 <template>
-    <el-dialog v-model="dialogVisible" title="附件" width="600">
-        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
+    <el-dialog v-model="dialogVisible" draggable title="详情" width="1300">
+
+        <el-descriptions :column="2" border>
+
+            <el-descriptions-item label="电能质量事件名称">{{ tableData.name }}</el-descriptions-item>
+            <el-descriptions-item label="事件经过">{{ tableData.process }}</el-descriptions-item>
+            <el-descriptions-item label="处理措施">{{ tableData.measures }}</el-descriptions-item>
+            <el-descriptions-item label="治理效果">{{ tableData.effect }}</el-descriptions-item>
+            <el-descriptions-item label="附件"  :span="3">
+                <div v-for="item in tableData.urlList">
+                    <div style="display: flex;align-items: center;">
+                        <div>{{ item.name }}</div>
+
+                        <el-icon class="elView" v-if="item.name" @click="view(item)">
+                            <View />
+                        </el-icon>
+                        <el-icon class="elView" v-if="item.name" @click="download(item)">
+                            <Download />
+                        </el-icon>
+                    </div>
+                </div>
+            </el-descriptions-item>]
+            <div>
+                <el-descriptions-item label="事件简介">
+                    <div v-html="tableData.summary"></div>
+                </el-descriptions-item>
+            </div>
+        </el-descriptions>
+
+
+
+
+
+
+
+        <!-- <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
             <vxe-column field="name" title="名称"></vxe-column>
             <vxe-column title="操作" width="150">
                 <template #default="{ row }">
                     <el-button type="primary" link @click="view(row)">查看</el-button>
                     <el-button type="primary" link @click="download(row)">下载</el-button>
                 </template>
-            </vxe-column>
-        </vxe-table>
+</vxe-column>
+</vxe-table> -->
     </el-dialog>
 </template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
-
+import { Download, View } from '@element-plus/icons-vue'
 const dialogVisible = ref(false)
-const tableData: any = ref([])
-const open = (row: any) => {
-    tableData.value = []
-    row.split(',').map((v: any) => {
-        tableData.value.push({ name: v.split('/supervision/')[1], url: v })
-    })
-    console.log('🚀 ~ row.split ~  tableData.value:', tableData.value)
+const tableData: any = ref({
 
+})
+const open = (row: any) => {
+    tableData.value = {}
+    tableData.value = row
+    tableData.value.urlList = []
+    row.url.split(',').map((v: any) => {
+        tableData.value.urlList.push({ name: v.split('/supervision/')[1], url: v })
+    })
     dialogVisible.value = true
-    // console.log('🚀 ~ open ~ row:', row)
-    // url.value = row
 }
 const view = (row: any) => {
     window.open(window.location.origin + '/#/previewFile?' + row.url)
 }
 const download = (row: any) => {
     let url = row.url
-
     let urls = url
     let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
     downloadFile({ filePath: url }).then((res: any) => {
@@ -42,18 +75,18 @@ const download = (row: any) => {
             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'
-                : ''
+                    ? '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')
@@ -66,4 +99,14 @@ const download = (row: any) => {
 }
 defineExpose({ open })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-descriptions__label) {
+    width: 160px;
+}
+
+.elView {
+    cursor: pointer;
+    margin-left: 10px;
+    color: #0000EE;
+}
+</style>