对接媒体报价导入接口

src/api/mediaLibrary.js

@@ -23,7 +23,7 @@ export function updateMedia(query) {
     method: 'post',
     data: query
   })
-} 
+}
 // 查看单条媒体信息
 export function mediaDetail(query) {
   return request({
@@ -143,4 +143,16 @@ export function outMediaPageList(query) {
     method: 'get',
     params: query
   })
+}
+
+// 导入媒体报价
+export function importPriceByExcel(query) {
+  return request({
+    url: '/media/import/price/Excel',
+    method: 'post',
+    data: query,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
 }

src/components/FileUpload/PdfPreview.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="pdf-viewer">
+    <div class="pdf-viewer" v-loading="loading">
         <vue-pdf-embed :source="pdfUrl" :page="currentPage" :style="`transform: scale(${scale})`"
-            class="pdf-document" />
+             @loaded="handlePdfLoaded" @progress="handleProgress" class="pdf-document" />
 
         <div class="pdf-controls">
             <el-button @click="prevPage" :disabled="currentPage <= 1">上一页</el-button>
@@ -28,17 +28,35 @@ const props = defineProps({
     }
 })
 
+
 const currentPage = ref(1)
+const pageCount = ref(1)
 const scale = ref(1)
 
+const progress = ref(0)
+const loading = ref(false)
+
+const handlePdfLoaded = (pdf) => {
+    console.log('PDF 加载完成', pdf)
+    loading.value = false
+    pageCount.value = pdf.numPages
+}
+
+const handleProgress = (progressData) => {
+    progress.value = Math.round(progressData.loaded / progressData.total * 100)
+    console.log(progress.value)
+    if(progress.value < 100) loading.value = true 
+    else loading.value = false
+}
+
 const prevPage = () => {
     if (currentPage.value > 1) currentPage.value--
 }
 
 const nextPage = () => {
-    if (currentPage.value < props.pageCount) currentPage.value++
+    if (currentPage.value < pageCount.value) currentPage.value++
 }
-
+ 
 const zoomIn = () => {
     scale.value += 0.1
 }

src/views/mediaLibrary/importPrice.vue

@@ -0,0 +1,162 @@
+<template>
+    <el-dialog :title="title" v-model="open" width="650px" class="my_dialog" align-center :destroy-on-close="true"
+        :close-on-click-modal="false">
+        <el-upload ref="uploadRef" class="upload-demo" drag action="#" :limit="1" :http-request="requestDocUpload"
+            :file-list="docUploadList" :before-upload="beforeDocUpload" :on-remove="removeDocUpload">
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+                将文件拖曳至此区域，或 <em>点击上传</em>
+            </div>
+            <!-- <div class="el-upload__text">
+                    支持扩展名：.xlsx, .xls
+                </div> -->
+            <template #tip>
+                <div class="el-upload__tip text-center">
+                    <span>仅允许导入xls、xlsx格式文件。</span>
+                    <el-link type="primary" underline="never" style="font-size: 12px; vertical-align: baseline"
+                        @click="downloadImportTemplate">下载模板</el-link>
+                </div>
+            </template>
+        </el-upload>
+        <!-- <template #footer>
+            <div class="dialog-footer">
+                <el-button class="my-cancel-btn" @click="open = false">取 消</el-button>
+            </div>
+        </template> -->
+    </el-dialog>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+
+import { importPriceByExcel } from "@/api/mediaLibrary"
+
+const { proxy } = getCurrentInstance()
+const title = ref('导入报价')
+const open = ref(false)
+const mediaType = ref(null)
+
+const docUploadList = ref([])
+
+// 自定义上传文件资料
+const requestDocUpload = (options) => {
+    console.log('options', options)
+    proxy.$modal.loading('正在上传文件，请耐心等待...')
+    const { file } = options
+    var formData = new FormData();
+    formData.append('mediaType', mediaType.value);
+    formData.append('file', file);
+    console.log('formData', formData)
+    importPriceByExcel(formData).then(res => {
+        if (res.code == 200) {
+            proxy.$modal.msgSuccess("导入成功")
+            proxy.$modal.closeLoading()
+            open.value = false
+        } else {
+            proxy.$modal.closeLoading()
+            proxy.$modal.msgError(res.msg);
+        }
+    })
+}
+//自定义上传文件资料校验
+const beforeDocUpload = (file) => {
+    const type = [
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'application/vnd.ms-excel'
+    ];
+    const isXlsx = type.includes(file.type);
+    // 检验文件格式
+    if (!isXlsx) {
+        proxy.$modal.msgError("文件格式错误，请上传.xls；.xlsx后缀的文件。");
+        return false;
+    }
+}
+// 移除已上传文件列表
+const removeDocUpload = (file, fileList) => {
+    docUploadList.value = docUploadList.value.filter(
+        item => item.name != file.name
+    );
+}
+// 下载导入模板操作
+const downloadImportTemplate = () => {
+    const link = document.createElement('a')
+    switch (mediaType.value) {
+        case 0:
+            link.href = '/优势媒体报价导入模板.xlsx'
+            link.download = '优势媒体报价导入模板.xlsx' // 设置下载文件名
+            break;
+        case 1:
+            link.href = '/ES任职资格表.docx'
+            link.download = 'ES任职资格表.docx' // 设置下载文件名
+            break;
+        case 2:
+            link.href = '/ES任职资格表.docx'
+            link.download = 'ES任职资格表.docx' // 设置下载文件名
+            break;
+        case 3:
+            link.href = '/ES任职资格表.docx'
+            link.download = 'ES任职资格表.docx' // 设置下载文件名
+            break;
+        case 4:
+            link.href = '/ES任职资格表.docx'
+            link.download = 'ES任职资格表.docx' // 设置下载文件名
+            break;
+        case 5:
+            link.href = '/ES任职资格表.docx'
+            link.download = 'ES任职资格表.docx' // 设置下载文件名
+            break;
+        case 6:
+            link.href = '/ES任职资格表.docx'
+            link.download = 'ES任职资格表.docx' // 设置下载文件名
+            break;
+        case 7:
+            link.href = '/ES任职资格表.docx'
+            link.download = 'ES任职资格表.docx' // 设置下载文件名
+            break;
+        default:
+            break;
+    }
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+}
+
+// 初始化
+const initImportPriceExcel = (_mediaType) => {
+    mediaType.value = _mediaType
+    switch (_mediaType) {
+        case 0:
+            title.value = '导入优势媒体报价'
+            break;
+        case 1:
+            title.value = '导入门禁报价'
+            break;
+        case 2:
+            title.value = '导入候车厅报价'
+            break;
+        case 3:
+            title.value = '导入道闸报价'
+            break;
+        case 4:
+            title.value = '导入地铁报价'
+            break;
+        case 5:
+            title.value = '导入高铁报价'
+            break;
+        case 6:
+            title.value = '导入写字楼报价'
+            break;
+        case 7:
+            title.value = '导入车库灯箱报价'
+            break;
+        default:
+            break;
+    }
+    open.value = true
+}
+
+// 暴露方法\属性给父组件
+defineExpose({
+    initImportPriceExcel
+});
+</script>

src/views/mediaLibrary/index.vue

@@ -127,21 +127,21 @@
                             <template #dropdown>
                                 <el-dropdown-menu>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('ys')">导入优势媒体报价</el-dropdown-item>
+                                        @click="handleImport(0)">导入优势媒体报价</el-dropdown-item>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('mj')">导入网络-门禁媒体报价</el-dropdown-item>
+                                        @click="handleImport(1)">导入门禁媒体报价</el-dropdown-item>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('hct')">导入网络-候车厅媒体报价</el-dropdown-item>
+                                        @click="handleImport(2)">导入候车厅媒体报价</el-dropdown-item>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('dz')">导入网络-道闸媒体报价</el-dropdown-item>
+                                        @click="handleImport(3)">导入道闸媒体报价</el-dropdown-item>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('dt')">导入网络-地铁媒体报价</el-dropdown-item>
+                                        @click="handleImport(4)">导入地铁媒体报价</el-dropdown-item>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('gt')">导入网络-高铁媒体报价</el-dropdown-item>
+                                        @click="handleImport(5)">导入高铁媒体报价</el-dropdown-item>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('xzl')">导入网络-写字楼媒体报价</el-dropdown-item>
+                                        @click="handleImport(6)">导入写字楼媒体报价</el-dropdown-item>
                                     <el-dropdown-item class="dropItem"
-                                        @click="handleImport('ckdx')">导入网络-车库灯箱媒体报价</el-dropdown-item>
+                                        @click="handleImport(7)">导入车库灯箱媒体报价</el-dropdown-item>
                                 </el-dropdown-menu>
                             </template>
                         </el-dropdown>
@@ -263,32 +263,8 @@
         <view-file-dialog ref="viewFileRef" />
         <export-dialog ref="exportDialogRef" />
         <export-p-p-t-dialog ref="exportPPTDialogRef" />
-        <!-- 导入对话框 -->
+        <importPrice ref="importPriceRef" />
-        <el-dialog title="导入" v-model="uploadOpen" width="650px" class="my_dialog" align-center :destroy-on-close="true"
+     
-            :close-on-click-modal="false">
-            <el-upload ref="uploadRef" class="upload-demo" drag action="#" :http-request="requestDocUpload"
-                :file-list="docUploadList" :before-upload="beforeDocUpload" :on-remove="removeDocUpload">
-                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-                <div class="el-upload__text">
-                    将文件拖曳至此区域，或 <em>点击上传</em>
-                </div>
-                <!-- <div class="el-upload__text">
-                    支持扩展名：.xlsx, .xls
-                </div> -->
-                <template #tip>
-                    <div class="el-upload__tip text-center">
-                        <span>仅允许导入xls、xlsx格式文件。</span>
-                        <el-link type="primary" underline="never" style="font-size: 12px; vertical-align: baseline"
-                            @click="importTemplate">下载模板</el-link>
-                    </div>
-                </template>
-            </el-upload>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button class="my-cancel-btn" @click="uploadOpen = false">取 消</el-button>
-                </div>
-            </template>
-        </el-dialog>
 
     </div>
 </template>
@@ -318,6 +294,7 @@ import viewFileDialog from '@/components/ViewFile/index.vue'
 import exportDialog from './exportDialog.vue';
 import abolishDialog from './abolishDialog.vue';
 import exportPPTDialog from './exportPPTDialog.vue';
+import importPrice from './importPrice.vue';
 import { useBackgroundStore } from '@/store/modules/background'
 
 
@@ -385,11 +362,10 @@ const mediaLogsRef = ref(null)
 // ppt模板数据
 const templateList = ref([])
 // 媒体多选数据
-const multipleChoseArr = ref([])
+const multipleChoseArr = ref([]) 
-
+const unfoldFlag = ref(false)
-
+ 
-const uploadOpen = ref(false)
+const importPriceRef = ref(null)
-const docUploadList = ref([])
 const abolishRef = ref(null)
 const historyDataRef = ref(null)
 const downFileRef = ref(null)
@@ -397,8 +373,6 @@ const viewFileRef = ref(null)
 const exportDialogRef = ref(null)
 const exportPPTDialogRef = ref(null)
 
-
-
 // 获取PPT模板
 const getpptTemplatePageList = () => {
     pptTemplatePage(queryParams.value).then(res => {
@@ -495,11 +469,9 @@ const getbusinessAreaList = (val) => {
     })
 }
 // 折叠展开
-const unfoldFlag = ref(false)
 const handleFlod = () => {
     unfoldFlag.value = !unfoldFlag.value
-}
+} 
-
 /** 查询媒体信息列表 */
 const getMediaPageList = () => {
     loading.value = true
@@ -520,8 +492,7 @@ const getMediaPageList = () => {
 const handleQuery = () => {
     queryParams.value.pageNum = 1
     getMediaPageList()
-}
+} 
-
 /** 重置按钮操作 */
 const resetQuery = () => {
     queryParams.value = {
@@ -541,8 +512,7 @@ const resetQuery = () => {
         businessDistrictId: undefined
     }
     handleQuery()
-}
+} 
-
 // 选择媒体事件
 const handleSelectionChange = (selection) => {
     multipleChoseArr.value = selection
@@ -608,13 +578,11 @@ const handleHistoryChart = (row) => {
 // 打开文件下载
 const handleDownFiles = (row) => {
     downFileRef.value.initFileList(true, row.id)
-}
+} 
-
 // 查看文件
 const handleViewPhoto = (_fileType, row) => {
     viewFileRef.value.initFileList(_fileType, row.id)
-}
+} 
-
 /** 导出Excel按钮操作 */
 const handleExportExcel = () => {
     if (multipleChoseArr.value.length == 0) {
@@ -632,64 +600,11 @@ const handleExportPPT = (tempId) => {
     }
     const mediaIds = multipleChoseArr.value.map(item => item.id); 
     exportPPTDialogRef.value.initExportPPT(tempId, mediaIds, multipleChoseArr.value)
-}
+} 
-
 /** 导入按钮操作 */
 const handleImport = (val) => {
-    uploadOpen.value = true
+    importPriceRef.value.initImportPriceExcel(val)
-}
+} 
-
-// 自定义上传文件资料
-const requestDocUpload = (options) => {
-    proxy.$modal.loading('正在上传文件，请耐心等待...')
-    const { file } = options
-    var formData = new FormData();
-    formData.append('file', file);
-    importSupplier(formData).then(res => {
-        if (res.code == 200) {
-            proxy.$modal.msgSuccess("导入成功")
-            proxy.$modal.closeLoading()
-            uploadOpen.value = false
-            getSupplierPageList()
-        } else {
-            proxy.$modal.closeLoading()
-            proxy.$modal.msgError(res.msg);
-        }
-    })
-}
-//自定义上传文件资料校验
-const beforeDocUpload = (file) => {
-    const type = [
-        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        'application/vnd.ms-excel'
-    ];
-    const isXlsx = type.includes(file.type);
-    // 检验文件格式
-    if (!isXlsx) {
-        proxy.$modal.msgError("文件格式错误，请上传.xls；.xlsx后缀的文件。");
-        return false;
-    }
-}
-// 移除已上传文件列表
-const removeDocUpload = (file, fileList) => {
-    docUploadList.value = docUploadList.value.filter(
-        item => item.name != file.name
-    );
-}
-// 下载导入模板操作
-const importTemplate = () => {
-    // exportTemplate().then(res => {
-    //     // 通过a标签打开新页面下载文件
-    //     const a = document.createElement('a')
-    //     a.href = URL.createObjectURL(res)
-    //     // a标签里有download属性可以自定义文件名
-    //     const downLoadName = '供应商导入模板_' + Date.now() + '.xlsx'
-    //     a.setAttribute('download', downLoadName)
-    //     document.body.appendChild(a)
-    //     a.click()
-    //     document.body.removeChild(a)
-    // })
-}
 // 打开媒体地图
 const handleGoMediaMap = () => {
     router.push('/mediaMap')

src/views/mediaLibrary/mediaForm.vue

@@ -629,7 +629,7 @@ const data = reactive({
         mediaSize: [{ required: true, message: "媒体尺寸不能为空", trigger: "blur" }],
         mediaOrientation: [{ required: true, message: "媒体朝向不能为空", trigger: "blur" }],
         mediaCity: [{ required: true, message: "城市不能为空", trigger: "change" }],
-        businessDistrictId: [{ required: true, message: "商圈不能为空", trigger: "change" }],
+        // businessDistrictId: [{ required: true, message: "商圈不能为空", trigger: "change" }],
         firstInstallFee: [{ required: true, message: "首次制作安装费不能为空", trigger: "blur" }],
         changeInstallFee: [{ required: true, message: "换刊制作安装费不能为空", trigger: "blur" }],
     },