完成户外媒体对接

src/views/mediaLibrary/exportPPTDialog.vue

@@ -61,7 +61,9 @@ const checkedPPTFields = ref([])
 // 移除已选媒体
 const handleCloseTag = (tag) => {
     const rowIndex = chosedMediaList.value.findIndex(item => item.id == tag.id)
-    chosedMediaList.value.splice(rowIndex, 1)
+    chosedMediaList.value.splice(rowIndex, 1) 
+    // 重新计算导出媒体id
+    exportForm.value.mediaIds = chosedMediaList.value.map(item => item.id);
 }
 
 // PPT字段全选操作

src/views/mediaLibrary/index.vue

@@ -630,7 +630,7 @@ const handleExportPPT = (tempId) => {
         proxy.$modal.msgWarning("请选择要导出的媒体!!!")
         return false
     }
-    const mediaIds = multipleChoseArr.value.map(item => item.id);
+    const mediaIds = multipleChoseArr.value.map(item => item.id); 
     exportPPTDialogRef.value.initExportPPT(tempId, mediaIds, multipleChoseArr.value)
 }
 

src/views/outdoorMedia/detail.vue

@@ -2,7 +2,8 @@
     <!-- 导出对话框 -->
     <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-form ref="detailFormRef" :model="detailForm" label-width="100px" class="mySmailDetailForm"
+            v-loading="loading">
             <el-row :gutter="20" class="my_form_row">
                 <el-col :span="6" v-for="itemFile in fileList">
                     <img :src="baseUrl + itemFile.fileName" fit="fill"
@@ -33,7 +34,7 @@
             <div class="splineBar" />
             <el-row :gutter="20" class="my_form_row">
                 <el-col :span="24">
-                    <el-form-item label="媒体尺寸" >
+                    <el-form-item label="媒体尺寸">
                         {{ detailForm.mediaSize }}
                     </el-form-item>
                 </el-col>
@@ -41,9 +42,9 @@
             <div class="splineBar" />
             <el-row :gutter="20" class="my_form_row">
                 <el-col :span="24">
-                    <el-form-item label="商圈" >
+                    <el-form-item label="商圈">
                         {{ detailForm.provinceName }}{{ detailForm.cityName }}{{ detailForm.areaName }}{{
-                        detailForm.townName }}-{{ detailForm.businessDistrictName }}
+                            detailForm.townName }}-{{ detailForm.businessDistrictName }}
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -78,14 +79,17 @@ const title = ref('户外媒介数据详情')
 const open = ref(false)
 const detailForm = ref({})
 const fileList = ref([])
+const loading = ref(false)
 
 const getMediaDetail = (_mediaId) => {
+    loading.value = true
     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)
         }
+        loading.value = false
     })
 }
 

src/views/outdoorMedia/index.vue

@@ -99,7 +99,7 @@
                 <el-col :span="16" style="text-align: right;">
                     <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
                     <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
-                    <el-button type="primary" class="primaryBtn">PPT批量导出</el-button>
+                    <el-button type="primary" class="primaryBtn" @click="handleExportMore">PPT批量导出</el-button>
                     <el-button type="primary" class="primaryBtn" @click="handleClearChoseMedia">清空所选媒体</el-button>
                 </el-col>
             </el-row>
@@ -125,7 +125,7 @@
                                     <div class="popBtns" @click="handleViewMedia(scope.row.id)"
                                         v-hasPermi="['problemFeedback:edit']">查看
                                     </div>
-                                    <div class="popBtns" @click="handleDownFiles(scope.row)"
+                                    <div class="popBtns" @click="handleDownPPT(scope.row)"
                                         v-hasPermi="['problemFeedback:edit']">下载PPT</div>
                                     <template #reference>
                                         <img style="cursor: pointer;" :src="scope.row.currentImageSrc"
@@ -156,6 +156,8 @@ import { sysRegionListByPid } from "@/api/system/administrativeRegion"
 import { sysMediaTypeListByPid } from "@/api/system/mediaType"
 import { busTradingAreaPage } from "@/api/system/businessArea"
 import { outMediaPageList } from "@/api/mediaLibrary"
+import { pptTemplatePage } from "@/api/system/pptTemplate"
+import { exportMediaPPT } from "@/api/mediaLibrary"
 import AMapLoader from "@amap/amap-jsapi-loader";  // 引入地图服务
 import optionIcon from '@/assets/images/optionIcon.png'
 import optionIconHover from '@/assets/images/optionIconHover.png'
@@ -217,6 +219,71 @@ const isFullscreen = ref(false)
 // 地图数据点
 const points = ref([])
 
+// 导出提交信息
+const exportForm = ref({
+    mediaIds: undefined,
+    templateId: undefined,
+    exportFields: [
+        'mediaName',
+        'address',
+        'mediaSize',
+        'mediaOrientation',
+        'businessDistrictName',
+        'dailyAvgVehicleFlow',
+        'advantages'
+    ]
+})
+
+// 获取PPT模板ID
+const getpptTemplatePageList = () => {
+    pptTemplatePage(queryParams.value).then(res => {
+        const pptTemplate = res.data.list.filter(item => item.type == 3)
+        if (pptTemplate.length == 1) exportForm.value.templateId = pptTemplate[0].id
+    })
+}
+// 下载ppt
+const handleDownPPT = (row) => {
+    exportForm.value.mediaIds = [row.id]
+    handleSubmitExportPPT()
+}
+// 批量下载PPT
+const handleExportMore = () => {
+    if (multipleChoseArr.value.length == 0) {
+        proxy.$modal.msgWarning("请选择要导出的媒体!!!")
+        return false
+    }
+    exportForm.value.mediaIds = multipleChoseArr.value.map(item => item.id);
+    handleSubmitExportPPT()
+}
+// 导出ppt实现代码
+const handleSubmitExportPPT = () => {
+    exportMediaPPT(exportForm.value).then(res => {
+        const downLoadName = '媒体信息_' + getCurrentTime() + '.pptx'
+        // 通过a标签打开新页面下载文件
+        const a = document.createElement('a')
+        a.href = URL.createObjectURL(res)
+        // a标签里有download属性可以自定义文件名
+        a.setAttribute('download', downLoadName)
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+    })
+}
+
+const getCurrentTime = () => {
+    //获取当前时间并打印 
+    var getTime = new Date().getTime(); //获取到当前时间戳
+    var time = new Date(getTime); //创建一个日期对象
+    var year = time.getFullYear(); // 年
+    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
+    var date = time.getDate().toString().padStart(2, '0'); // 日
+    var hour = time.getHours().toString().padStart(2, '0'); // 时
+    var minute = time.getMinutes().toString().padStart(2, '0'); // 分
+    var second = time.getSeconds().toString().padStart(2, '0'); // 秒 
+    var gettime = year + month + date + hour + minute + second
+    return gettime
+}
+
 // 获取一级媒体类型
 const getMediaTypeOne = () => {
     sysMediaTypeListByPid({ parentId: 0 }).then(res => {
@@ -607,6 +674,8 @@ onUnmounted(() => {
 // 初始化
 onMounted(() => {
     bgStore.setBgImage(otherbg)
+    // 获取模板id
+    getpptTemplatePageList()
     getOutMediaPageList()
     getMediaTypeOne()
     getProvinceList()