户外媒介数据添加详情

src/assets/styles/ruoyi.scss

@@ -1245,16 +1245,19 @@ h6 {
   padding-bottom: 0px;
 }
 
+.mySmailDetailForm .el-form-item--default,
 .myDetailForm .el-form-item--default {
   margin-bottom: 0px;
 }
 
+.mySmailDetailForm .el-form--inline .el-form-item,
 .myDetailForm .el-form--inline .el-form-item {
   display: inline-flex;
   margin-right: 26px;
   vertical-align: middle;
 }
 
+.mySmailDetailForm .el-form-item__content,
 .myDetailForm .el-form-item__content {
   font-family: Microsoft YaHei;
   font-weight: 400;
@@ -1273,6 +1276,63 @@ h6 {
   /* 限制宽度 */
 }
 
+.mySmailDetailForm .el-form-item__content {
+  font-family: Microsoft YaHei;
+  font-weight: 600;
+  font-size: 16px;
+  color: #1E1E1E;
+  display: block;
+  line-height: 60px;
+  padding-left: 20px;
+  overflow: hidden;
+  /* 隐藏溢出的内容 */
+  text-overflow: ellipsis;
+  /* 以省略号代替超出部分 */
+  white-space: nowrap;
+  /* 强制在一行内显示，不允许自动换行 */
+  width: 100%;
+  /* 限制宽度 */
+}
+ 
+// 多行内容显示
+.mySmailDetailForm .moreRowContent .el-form-item__label {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #002866;
+  justify-content: start;
+  height: auto;
+  min-height: 120px;
+  line-height: 120px;
+  padding-left: 17px;
+  background: #EDF2F960;
+}
+
+.mySmailDetailForm .moreRowContent .el-form-item__content {
+  font-family: Microsoft YaHei;
+  font-weight: 600;
+  font-size: 16px;
+  color: #1E1E1E;
+  display: block;
+  line-height: 20px;
+  padding: 24px 20px;
+  white-space: normal;
+  min-height: 120px;
+}
+
+
+.mySmailDetailForm .el-form-item__label {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #002866;
+  justify-content: start;
+  min-height: 60px;
+  line-height: 60px;
+  padding-left: 17px;
+  background: #EDF2F960;
+}
+
 .myDetailForm .el-form-item__label {
   font-family: Microsoft YaHei;
   font-weight: 400;

src/views/outdoorMedia/detail.vue

@@ -0,0 +1,112 @@
+<template>
+    <!-- 导出对话框 -->
+    <el-dialog :title="title" v-model="open" width="688px" class="my_dialog" align-center :destroy-on-close="true"
+        :close-on-click-modal="false">
+        <el-form ref="detailFormRef" :model="detailForm" label-width="100px" class="mySmailDetailForm">
+            <el-row :gutter="20" class="my_form_row">
+                <el-col :span="6" v-for="itemFile in fileList">
+                    <img :src="baseUrl + itemFile.fileName" fit="fill"
+                        style="width: 142px;height: 80px; border-radius: 4px; border: 1px solid #d2d2d2; margin-bottom: 20px;" />
+                </el-col>
+            </el-row>
+            <div class="splineBar" />
+            <el-row :gutter="20" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="媒体名称">
+                        {{ detailForm.mediaName }}
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="splineBar" />
+            <el-row :gutter="20" class="my_form_row">
+                <el-col :span="12">
+                    <el-form-item label="媒体大类">
+                        {{ detailForm.mediaCategoryStr }}
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="展示形式">
+                        {{ detailForm.displayFormStr }}
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="splineBar" />
+            <el-row :gutter="20" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="媒体尺寸" >
+                        {{ detailForm.mediaSize }}
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="splineBar" />
+            <el-row :gutter="20" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="商圈" >
+                        {{ detailForm.provinceName }}{{ detailForm.cityName }}{{ detailForm.areaName }}{{
+                        detailForm.townName }}-{{ detailForm.businessDistrictName }}
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="splineBar" />
+            <el-row :gutter="20" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="地址">
+                        {{ detailForm.address }}
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="splineBar" />
+            <el-row :gutter="20" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="优势" class="moreRowContent">
+                        {{ detailForm.advantages }}
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="splineBar" />
+        </el-form>
+    </el-dialog>
+</template>
+
+<script setup>
+import { onMounted, defineExpose, nextTick, ref } from 'vue'
+import { mediaDetail } from "@/api/mediaLibrary"
+
+const { proxy } = getCurrentInstance()
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+const title = ref('户外媒介数据详情')
+const open = ref(false)
+const detailForm = ref({})
+const fileList = ref([])
+
+const getMediaDetail = (_mediaId) => {
+    mediaDetail({ mediaId: _mediaId }).then(res => {
+        detailForm.value = res.data
+        if (detailForm.value.mediaFile && detailForm.value.mediaFile.length > 0) {
+            fileList.value = detailForm.value.mediaFile.filter(item => item.fileType == 6)
+            console.log('图片', fileList.value)
+        }
+    })
+}
+
+// 对外暴漏方法
+const initMediaDetail = (_mediaId) => {
+    open.value = true
+    nextTick(() => {
+        getMediaDetail(_mediaId)
+    })
+}
+
+// 暴露方法\属性给父组件
+defineExpose({
+    initMediaDetail
+});
+</script>
+<style lang='scss'>
+// 分割线
+.splineBar {
+    width: 100%;
+    height: 1px;
+    background: #D9DFE5;
+}
+</style>

src/views/outdoorMedia/index.vue

@@ -122,7 +122,7 @@
                         <el-table-column label="操作" width="58" align="center" fixed="right">
                             <template #default="scope">
                                 <el-popover popper-class="my_popover" placement="left-start">
-                                    <div class="popBtns" @click="handleLogs(scope.row)"
+                                    <div class="popBtns" @click="handleViewMedia(scope.row.id)"
                                         v-hasPermi="['problemFeedback:edit']">查看
                                     </div>
                                     <div class="popBtns" @click="handleDownFiles(scope.row)"
@@ -145,6 +145,8 @@
                 </el-col>
             </el-row>
         </el-card>
+
+        <detail ref="detailFormRef" />
     </div>
 </template>
 <script setup name="Post">
@@ -160,10 +162,13 @@ import optionIconHover from '@/assets/images/optionIconHover.png'
 import { useBackgroundStore } from '@/store/modules/background'
 import otherbg from '@/assets/images/otherbg.png'
 
+import detail from './detail.vue';
+
 const bgStore = useBackgroundStore()
 const { proxy } = getCurrentInstance()
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 const { apiKey, secretKey } = window._CONFIG
+const detailFormRef = ref(null)
 // 操作图标
 const defaultImageSrc = ref(optionIcon);
 const hoverImageSrc = ref(optionIconHover);
@@ -336,7 +341,10 @@ const handleCloseTag = (tag) => {
 const handleClearChoseMedia = () => {
     multipleChoseArr.value = []
 }
-
+// 查看媒体详情
+const handleViewMedia = (_mediaId) => {
+    detailFormRef.value.initMediaDetail(_mediaId)
+}
 
 
 
@@ -395,7 +403,6 @@ const loadMap = () => {
         });
     });
 }
-
 // 处理地图缩放事件
 const handleZoomChange = () => {
     const currentZoomLevel = mapInstance.value.getZoom();
@@ -579,6 +586,7 @@ const renderMassMarks = () => {
     // 添加点击事件
     massMarks.value.on('click', function (e) {
         console.log('点击了节点', e.data)
+        handleViewMedia(e.data.mediaId)
     });
 }
 // 隐藏Logo的函数