提交媒体库代码

src/assets/styles/ruoyi.scss

@@ -465,6 +465,54 @@ h6 {
   background: #1a75e6;
 }
 
+.my_popover {
+  width: 96px !important;
+  min-width: 96px !important;
+  padding: 10px 20px !important;
+
+  .el-popper__arrow,
+  .el-popper__arrow:before {
+    display: none;
+  }
+}
+
+.myImg_popover {
+  width: 476px !important;
+  height: 284px !important;
+  border-radius: 6px !important;
+  padding: 8px !important;
+  background: #d1e3f9cc !important;
+  box-shadow: 0 0 6px 0 #0731597a !important;
+
+  .el-popper__arrow,
+  .el-popper__arrow:before {
+    display: none;
+  }
+
+  img {
+    width: 460px;
+    height: 268px;
+    border-radius: 6px;
+    background: #000000;
+  }
+}
+
+.popBtns {
+  width: 100%;
+  line-height: 30px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  text-align: left;
+  color: #000000;
+  cursor: pointer;
+}
+
+.popBtns:hover {
+  font-weight: 700;
+  color: #1C88FB;
+}
+
 .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before,
 .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before {
   color: #FF2A00;
@@ -524,6 +572,70 @@ h6 {
   padding: 0 20px;
 }
 
+.choseResultPanel {
+  width: 100%;
+  min-height: 40px;
+  line-height: 40px;
+}
+
+.choseResultPanel .el-form-item--default {
+  margin-bottom: 0px;
+}
+
+.choseResultPanel .el-form-item--default .el-form-item__content {
+  line-height: 40px;
+}
+
+.choseResultTag {
+  height: 26px;
+  padding: 5px 11px;
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #1E1E1E;
+  margin-right: 10px;
+  margin-top: 5px;
+}
+
+.choseResultTag .el-tag__close {
+  color: #a7bcdc !important;
+}
+
+.choseResultTag .el-tag__close:hover {
+  background: transparent !important;
+}
+
+.choseResultTag .el-icon {
+  font-size: 14px;
+}
+ 
+.exportPPTTag {
+  height: 26px;
+  padding: 16px 20px;
+  border-radius: 4px;
+  border: none;
+  background: #ffffff;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #1E1E1E;
+  margin-right: 10px; 
+}
+.exportPPTTag .el-tag__close {
+  color: #9CA6B2 !important;
+  background: #EEEEEE !important;
+}
+
+.exportPPTTag .el-tag__close:hover {
+  background: #EEEEEE !important;
+}
+
+.exportPPTTag .el-icon {
+  font-size: 14px;
+}
+
 .el-button.is-text {
   background-color: transparent;
   border: 0 solid transparent;
@@ -820,12 +932,16 @@ h6 {
   width: 100%;
   height: calc(100vh - 165px);
 }
-.myDetailCard .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
+
+.myDetailCard .el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
   background: #ffffff !important;
 }
+
 .myDetailCard .el-table thead th {
   font-weight: 400;
 }
+
 .myDetailCard .el-table .el-table__cell {
   color: #000000 !important;
 }
@@ -877,7 +993,7 @@ h6 {
 }
 
 .my_dialog .el-dialog__body {
-  padding: 20px;
+  padding: 30px;
 }
 
 .my_dialog .el-dialog__footer {

src/layout/components/Navbar.vue

@@ -137,7 +137,9 @@ const submitForm = () => {
   width: 100%;
   overflow: hidden;
   position: fixed;
-  background: transparent;
+  background-image: url(../../assets/images/bg_top.png);
+  background-size: cover;
+  // background: transparent;
   box-shadow: none;
   padding: 0 36px;
 

src/layout/index.vue

@@ -75,7 +75,8 @@ function setLayout() {
   @include mix.clearfix;
   position: relative;
   width: 100%;
-  height: 100vh;
+  // height: 100vh;
+  min-height: 100%;
   background-position: top;
   /* 顶部对齐 */
   background-repeat: no-repeat;

src/views/mediaLibrary/index.vue

@@ -0,0 +1,582 @@
+<template>
+    <div class="app-container">
+        <div v-if="!showForm && !showDetail">
+            <div class="searchPanel">
+                <div class="more-search-pane">
+                    <div class="search-where-container">
+                        <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
+                            <el-form-item label="媒介形式:">
+                                <el-select v-model="queryParams.media_form" placeholder="请选择" style="min-width: 30px;"
+                                    clearable>
+                                    <el-option v-for="dict in media_form" :key="dict.value" :label="dict.label"
+                                        :value="dict.value" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="展示形式:">
+                                <el-select v-model="queryParams.display_form" placeholder="请选择" style="min-width: 30px;"
+                                    clearable>
+                                    <el-option v-for="dict in display_form" :key="dict.value" :label="dict.label"
+                                        :value="dict.value" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="归属:">
+                                <el-select v-model="queryParams.supplier" placeholder="请选择" style="min-width: 30px;"
+                                    clearable>
+                                    <el-option v-for="dict in supplierList" :key="dict.value" :label="dict.label"
+                                        :value="dict.value" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="关键词:">
+                                <el-select v-model="queryParams.key_words" placeholder="请选择" style="min-width: 30px;"
+                                    clearable>
+                                    <el-option v-for="dict in key_words" :key="dict.value" :label="dict.label"
+                                        :value="dict.value" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="媒体档期:">
+                                <el-select v-model="queryParams.media_schedule" placeholder="请选择"
+                                    style="min-width: 30px;" clearable>
+                                    <el-option v-for="dict in media_schedule" :key="dict.value" :label="dict.label"
+                                        :value="dict.value" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="媒体形式:">
+                                <el-select v-model="queryParams.media_format" placeholder="请选择" style="min-width: 30px;"
+                                    clearable>
+                                    <el-option v-for="dict in media_format" :key="dict.value" :label="dict.label"
+                                        :value="dict.value" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="销售方式:">
+                                <el-select v-model="queryParams.sales_method" placeholder="请选择" style="min-width: 30px;"
+                                    clearable>
+                                    <el-option v-for="dict in sales_method" :key="dict.value" :label="dict.label"
+                                        :value="dict.value" />
+                                </el-select>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                    <div class="search-more-button">
+                        <el-button v-if="!unfoldFlag" text class="foladText" @click="handleFlod">展开
+                            <svg-icon icon-class="unfold" class="ml10" />
+                        </el-button>
+                        <el-button v-else text class="foladText" @click="handleFlod">收起
+                            <svg-icon icon-class="packUp" class="ml10" />
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+            <div class="searchSmallPanel" v-show="unfoldFlag">
+                <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchSmallPanelForm">
+                    <el-form-item label="业务:">
+                        <el-select v-model="queryParams.business" placeholder="请选择" clearable style="min-width: 30px;">
+                            <el-option v-for="dict in business" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="状态:">
+                        <el-select v-model="queryParams.media_status" placeholder="请选择" style="min-width: 30px;"
+                            clearable>
+                            <el-option v-for="dict in media_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="批文情况:">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="媒介类型:">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="城市:">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="商圈">
+                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="choseResultPanel">
+                <el-form :inline="true" class="searchSmallPanelForm">
+                    <el-form-item label="已选媒体:">
+                        <div v-if="multipleChoseArr.length == 0" class="noChoseLabel">未选择媒体</div>
+                        <template v-else>
+                            <el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="choseResultTag"
+                                @close="handleCloseTag(tag)" closable>
+                                {{ tag.mediaName }}
+                            </el-tag>
+                        </template>
+                    </el-form-item>
+                </el-form>
+            </div>
+
+            <el-card class="mt10">
+                <el-row :gutter="10" class="my_row"><el-col :span="8">
+                        <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
+                            <el-form-item label="">
+                                <el-input v-model="form.postCode" placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search"
+                                    style="width: 400px;" />
+                            </el-form-item>
+                        </el-form>
+                    </el-col>
+                    <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" @click="handleOpenAddForm">新增</el-button>
+                        <el-dropdown style="margin: 0 12px;">
+                            <el-button type="primary" class="primaryBtn">导入excel</el-button>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item class="dropItem" @click="handleImport">导入优势数据</el-dropdown-item>
+                                    <el-dropdown-item class="dropItem" @click="handleImport">导入网络数据</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                        <el-button type="primary" class="primaryBtn" @click="handleExportExcel">导出excel</el-button>
+                        <el-button type="primary" class="primaryBtn">媒体可视化地图</el-button>
+                        <el-dropdown style="margin-left: 12px;">
+                            <el-button type="primary" class="primaryBtn">
+                                导出PPT
+                            </el-button>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item class="dropItem"
+                                        @click="handleExportPPT('dd')">滴滴模板导出</el-dropdown-item>
+                                    <el-dropdown-item class="dropItem"
+                                        @click="handleExportPPT('yk')">优客模板导出</el-dropdown-item>
+                                    <el-dropdown-item class="dropItem"
+                                        @click="handleExportPPT('kong')">空白模板导出</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </el-col>
+                </el-row>
+
+                <el-table v-loading="loading" :data="mediaList" @selection-change="handleSelectionChange"
+                    :height="unfoldFlag ? 'calc(100vh - 382px)' : 'calc(100vh - 348px)'">
+                    <el-table-column type="selection" width="55" align="center" />
+                    <el-table-column label="媒体名称" align="left" prop="mediaName" width="320">
+                        <template #default="scope">
+                            <el-popover popper-class="myImg_popover" placement="right-start">
+                                <img :src="otherbg" />
+                                <template #reference>
+                                    <span class="mediaNameLabel" @click="handleOpenDetail">{{ scope.row.mediaName
+                                        }}</span>
+                                </template>
+                            </el-popover>
+
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="媒体编号" align="left" prop="postCode" width="150" />
+                    <el-table-column label="媒介形式" align="left" prop="postCode" width="150" />
+                    <el-table-column label="商圈" align="left" prop="postCode" width="150" />
+                    <el-table-column label="展示形式" align="left" prop="postCode" width="150" />
+                    <el-table-column label="刊例价（元）" align="left" prop="postCode" width="150" />
+                    <el-table-column label="业务部门" align="left" prop="postCode" width="150" />
+                    <el-table-column label="刊例照片" align="center" prop="cataloguePhoto" width="90">
+                        <template #default="scope">
+                            <img style="cursor: pointer;" :src="scope.row.currentCataloguePhotoSrc"
+                                @mouseenter="scope.row.currentCataloguePhotoSrc = hoverViewFileSrc"
+                                @mouseleave="scope.row.currentCataloguePhotoSrc = defaultViewFileSrc" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="媒体链条" align="center" prop="mediaChain" width="90">
+                        <template #default="scope">
+                            <img style="cursor: pointer;" :src="scope.row.currentMediaChainSrc"
+                                @mouseenter="scope.row.currentMediaChainSrc = hoverViewFileSrc"
+                                @mouseleave="scope.row.currentMediaChainSrc = defaultViewFileSrc" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="资质文件" align="center" prop="qualificationFile" width="90">
+                        <template #default="scope">
+                            <img style="cursor: pointer;" :src="scope.row.currentQualificationFileSrc"
+                                @mouseenter="scope.row.currentQualificationFileSrc = hoverViewFileSrc"
+                                @mouseleave="scope.row.currentQualificationFileSrc = defaultViewFileSrc" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="盖章刊例" align="center" prop="stampedPublication" width="90">
+                        <template #default="scope">
+                            <img style="cursor: pointer;" :src="scope.row.currentStampedPublicationSrc"
+                                @mouseenter="scope.row.currentStampedPublicationSrc = hoverViewFileSrc"
+                                @mouseleave="scope.row.currentStampedPublicationSrc = defaultViewFileSrc" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="创建人" align="center" prop="postCode" width="150" />
+                    <el-table-column label="创建时间" align="center" prop="postCode" width="150" />
+                    <el-table-column label="状态" align="center" prop="postCode" width="150" />
+                    <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="handleUpdate(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">修改</div>
+                                <div class="popBtns" @click="handleUpdate(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">历史数据</div>
+                                <div class="popBtns" @click="handleUpdate(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">废除</div>
+                                <div class="popBtns" @click="handleUpdate(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">日志</div>
+                                <div class="popBtns" @click="handleUpdate(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">下载</div>
+                                <template #reference>
+                                    <img style="cursor: pointer;" :src="scope.row.currentImageSrc"
+                                        @mouseenter="scope.row.currentImageSrc = hoverImageSrc"
+                                        @mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
+                                </template>
+                            </el-popover>
+                        </template>
+                    </el-table-column>
+                </el-table>
+
+                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+                    @pagination="getList" />
+            </el-card>
+        </div>
+
+        <!-- 导入对话框 -->
+        <el-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" align-center
+            :destroy-on-close="true" :close-on-click-modal="false">
+            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <template #tip>
+                    <div class="el-upload__tip text-center">
+                        <!-- <div class="el-upload__tip">
+                            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+                        </div> -->
+                        <span>仅允许导入xls、xlsx格式文件。</span>
+                        <!-- <el-link type="primary" :underline="false" 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="upload.open = false">取 消</el-button>
+                    <el-button class="my-confirm-btn" type="primary" @click="submitFileForm">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <!-- 导出PPT对话框 -->
+        <el-dialog :title="exportPPT.title" v-model="exportPPT.open" width="1270px" class="my_dialog" align-center
+            :destroy-on-close="true" :close-on-click-modal="false">
+            <div class="my_dialog_itemHeader">已选内容</div>
+            <div class="chosedMediaNamsConter">
+                <el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag"
+                                @close="handleCloseTag(tag)" closable>
+                                {{ tag.mediaName }}
+                            </el-tag>
+            </div>
+             <div class="my_dialog_itemHeader">选择需要写入方案的媒体字段</div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button class="my-cancel-btn" @click="exportPPT.open = false">取 消</el-button>
+                    <el-button class="my-confirm-btn" type="primary" @click="handleSubmitExportPPT">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup name="Post">
+import { getToken } from "@/utils/auth"
+import { onMounted, ref } from 'vue';
+import { Search } from '@element-plus/icons-vue'
+import optionIcon from '@/assets/images/optionIcon.png'
+import optionIconHover from '@/assets/images/optionIconHover.png'
+import viewFile from '@/assets/images/viewFile.png'
+import viewFileHover from '@/assets/images/viewFileHover.png'
+import { useBackgroundStore } from '@/store/modules/background'
+import otherbg from '@/assets/images/otherbg.png'
+
+const bgStore = useBackgroundStore()
+const { proxy } = getCurrentInstance()
+const { media_form, display_form, key_words, media_schedule, media_format, sales_method, business, media_status, approval_document_status } = proxy.useDict("media_form", "display_form", "key_words", "media_schedule", "media_format", "sales_method", "business", "media_status", "approval_document_status")
+
+const showForm = ref(false)
+const supplierFormRef = ref(null)
+const showDetail = ref(false)
+const supplierDetailRef = ref(null)
+// 归属选项
+const supplierList = ref([])
+// 多选数据
+const multipleChoseArr = ref([])
+// 媒体库操作图标
+const defaultImageSrc = ref(optionIcon);
+const hoverImageSrc = ref(optionIconHover);
+// 文件查看
+const defaultViewFileSrc = ref(viewFile);
+const hoverViewFileSrc = ref(viewFileHover);
+const mediaList = ref([
+    { id: 1, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 2, mediaName: '遵义市海风井铁路桥跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 3, mediaName: '遵义市海风井铁路桥跨街大牌2', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 4, mediaName: '遵义市海风井铁路桥跨街大牌3', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 5, mediaName: '遵义市海风井铁路桥(华南大酒店旁)跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 6, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 7, mediaName: '遵义市海风井铁路桥跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 8, mediaName: '遵义市海风井铁路桥跨街大牌2', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 9, mediaName: '遵义市海风井铁路桥跨街大牌3', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 10, mediaName: '遵义市海风井铁路桥(华南大酒店旁)跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 11, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 12, mediaName: '遵义市海风井铁路桥跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 13, mediaName: '遵义市海风井铁路桥跨街大牌2', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 14, mediaName: '遵义市海风井铁路桥跨街大牌3', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 15, mediaName: '遵义市海风井铁路桥(华南大酒店旁)跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 16, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 17, mediaName: '遵义市海风井铁路桥跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 18, mediaName: '遵义市海风井铁路桥跨街大牌2', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 19, mediaName: '遵义市海风井铁路桥跨街大牌3', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
+    { id: 20, mediaName: '遵义市海风井铁路桥(华南大酒店旁)跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value }
+])
+/*** 导入参数 */
+const upload = reactive({
+    // 是否显示弹出层（用户导入）
+    open: false,
+    // 弹出层标题（用户导入）
+    title: "",
+    // 是否禁用上传
+    isUploading: false,
+    // 是否更新已经存在的用户数据
+    updateSupport: 0,
+    // 设置上传的请求头部
+    headers: { Authorization: "Bearer " + getToken() },
+    // 上传的地址
+    url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
+})
+// 导出PPT模板参数
+const exportPPT = reactive({
+    // 是否显示弹出层（用户导入）
+    open: false,
+    // 弹出层标题（用户导入）
+    title: "",
+})
+const loading = ref(true)
+const total = ref(0)
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+    },
+    rules: {
+        postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
+        postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
+        postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
+    }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+// 折叠展开
+const unfoldFlag = ref(false)
+const handleFlod = () => {
+    unfoldFlag.value = !unfoldFlag.value
+}
+// 多选事件
+const handleSelectionChange = (selection) => {
+    multipleChoseArr.value = selection
+}
+// 移除选择项
+const handleCloseTag = (tag) => {
+
+}
+/** 查询岗位列表 */
+const getList = () => {
+    loading.value = false
+    // listPost(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    //     postList.value = response.rows
+    //     total.value = response.total
+    //     loading.value = false
+    // })
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    queryParams.value.pageNum = 1
+    getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+    proxy.resetForm("queryRef")
+    handleQuery()
+}
+/** 废除按钮操作 */
+const handleDelete = (row) => {
+    const postIds = row.postId
+    const supplierName = row.supplierName
+    proxy.$modal.confirm('是否确认删除名称为"' + supplierName + '"的供应商数据？').then(function () {
+        return delPost(postIds)
+    }).then(() => {
+        getList()
+        proxy.$modal.msgSuccess("删除成功")
+    }).catch(() => { })
+}
+// 新增
+const handleOpenAddForm = () => {
+    showForm.value = true
+    nextTick(() => {
+        supplierFormRef.value.formTitle = '新建供应商'
+    })
+}
+// 修改
+const handleUpdate = () => {
+    showForm.value = true
+    nextTick(() => {
+        supplierFormRef.value.formTitle = '编辑供应商'
+    })
+}
+// 详情
+const handleOpenDetail = () => {
+    showDetail.value = true
+    nextTick(() => {
+        // supplierFormRef.value.formTitle = '编辑供应商'
+    })
+}
+const handleShowList = () => {
+    console.log('触发')
+    showForm.value = false
+    showDetail.value = false
+}
+/** 导出Excel按钮操作 */
+const handleExportExcel = () => {
+
+}
+/** 导出PPT按钮操作 */
+const handleExportPPT = (key) => {
+    exportPPT.title = '导出PPT'
+    exportPPT.open = true
+}
+// 导出ppt实现代码
+const handleSubmitExportPPT = () => {
+    exportPPT.open = false
+}
+
+/** 导入按钮操作 */
+const handleImport = () => {
+    upload.title = "导入"
+    upload.open = true
+}
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+    upload.isUploading = true
+}
+
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+    upload.open = false
+    upload.isUploading = false
+    proxy.$refs["uploadRef"].handleRemove(file)
+    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+}
+/** 提交上传文件 */
+const submitFileForm = () => {
+    proxy.$refs["uploadRef"].submit()
+}
+// 初始化
+onMounted(() => {
+    bgStore.setBgImage(otherbg)
+    getList()
+}); 
+</script>
+<style lang="scss">
+.mediaNameLabel {
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #1A75E6;
+    cursor: pointer;
+}
+
+.mediaNameLabel:hover {
+    text-decoration: underline solid #1A75E6 1px;
+    text-underline-offset: 4px;
+}
+
+.dropItem {
+    font-weight: 400;
+    font-size: 16px;
+}
+
+.noChoseLabel {
+    height: 24px;
+    line-height: 24px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #ffffff90;
+}
+
+.my_dialog_itemHeader {
+    width: 100%;
+    height: 16px;
+    line-height: 16px;
+    border-left: 3px solid #ffc63d;
+    padding-left: 10px;
+    font-family: Microsoft YaHei;
+    font-weight: 600;
+    font-size: 16px;
+    color: #000000;
+}
+
+.chosedMediaNamsConter {
+    width: 100%;
+    min-height: 60px;
+    border-radius: 4px;
+    background: #ffffff;
+    border: 1px solid #EEEEEE;
+    margin-top: 10px; 
+    margin-bottom: 30px;
+    padding: 10px 0;
+}
+</style>

src/views/supplier/index.vue

@@ -129,7 +129,8 @@
                     </el-table-column>
                     <el-table-column label="供应商名称" align="center" prop="supplierName" width="230">
                         <template #default="scope">
-                            <span class="supplierNameLabel" @click="handleOpenDetail">{{ scope.row.supplierName }}</span>
+                            <span class="supplierNameLabel" @click="handleOpenDetail">{{ scope.row.supplierName
+                                }}</span>
                         </template>
                     </el-table-column>
                     <el-table-column label="城市" align="center" prop="postCode" width="150" />
@@ -151,14 +152,21 @@
                         <span>{{ parseTime(scope.row.createTime) }}</span>
                     </template>
                 </el-table-column> -->
-                    <el-table-column label="操作" width="180" align="center" fixed="right">
+                    <el-table-column label="操作" width="58" align="center" fixed="right">
                         <template #default="scope">
-                            <el-button link type="primary" @click="handleUpdate(scope.row)"
-                                v-hasPermi="['problemFeedback:edit']">修改</el-button>
-                            <el-button link type="primary" @click="handleDelete(scope.row)"
-                                v-hasPermi="['problemFeedback:remove']">删除</el-button>
-                            <el-button link type="primary" @click="handleDelete(scope.row)"
-                                v-hasPermi="['problemFeedback:remove']">日志</el-button>
+                            <el-popover popper-class="my_popover" placement="left-start">
+                                <div class="popBtns" @click="handleUpdate(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">修改</div>
+                                <div class="popBtns" @click="handleDelete(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">删除</div>
+                                <div class="popBtns" @click="handleUpdate(scope.row)"
+                                    v-hasPermi="['problemFeedback:edit']">日志</div>
+                                <template #reference>
+                                    <img style="cursor: pointer;" :src="scope.row.currentImageSrc"
+                                        @mouseenter="scope.row.currentImageSrc = hoverImageSrc"
+                                        @mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
+                                </template>
+                            </el-popover> 
                         </template>
                     </el-table-column>
                 </el-table>
@@ -201,8 +209,9 @@
 <script setup name="Post">
 import { getToken } from "@/utils/auth"
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router'
 import { Search } from '@element-plus/icons-vue'
+import optionIcon from '@/assets/images/optionIcon.png'
+import optionIconHover from '@/assets/images/optionIconHover.png'
 import { useBackgroundStore } from '@/store/modules/background'
 import otherbg from '@/assets/images/otherbg.png'
 
@@ -210,14 +219,16 @@ import supplierForm from "./supplierForm.vue";
 import supplierDetail from "./supplierDetail.vue";
 
 const bgStore = useBackgroundStore()
-const router = useRouter()
 const { proxy } = getCurrentInstance()
 const { invoice_type, media_ownership, personnel_size, main_media_types, media_quality, history_cooperation, supplier_level, supplier_cooperation_degree, main_business, business_department } = proxy.useDict("invoice_type", "media_ownership", "personnel_size", "main_media_types", "media_quality", "history_cooperation", "supplier_level", "supplier_cooperation_degree", "main_business", "business_department")
 
-const showForm = ref(false) 
+const showForm = ref(false)
 const supplierFormRef = ref(null)
-const showDetail = ref(false) 
+const showDetail = ref(false)
 const supplierDetailRef = ref(null)
+
+const defaultImageSrc = ref(optionIcon);
+const hoverImageSrc = ref(optionIconHover);
 /*** 导入参数 */
 const upload = reactive({
     // 是否显示弹出层（用户导入）
@@ -235,7 +246,7 @@ const upload = reactive({
 })
 
 const supplierList = ref([
-    { supplierName: 'xxxx供应商' }
+    { supplierName: 'xxxx供应商', currentImageSrc: defaultImageSrc.value }
 ])
 const loading = ref(true)
 const total = ref(0)
@@ -356,4 +367,9 @@ onMounted(() => {
     color: #1A75E6;
     cursor: pointer;
 }
+
+.supplierNameLabel:hover {
+    text-decoration: underline solid #1A75E6 1px;
+    text-underline-offset: 4px;
+}
 </style>