wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0df2319062
YouKeChuanMei_VUE/src/views/mediaLibrary/index.vue

793 lines
39 KiB
Vue
Raw Normal View History

提交媒体库代码
2025-08-08 18:02:09 +08:00
<template>
<div class="app-container">
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<div v-if="!showForm && !showDetail && !showLogs">
提交媒体库代码
2025-08-08 18:02:09 +08:00
<div class="searchPanel">
<div class="more-search-pane">
<div class="search-where-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
<el-form-item label="媒体类型:">
<el-select v-model="queryParams.mediaTypeOne" placeholder="请选择"
@change="getMediaTypeTwo" clearable style="min-width: 30px">
<el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
:value="item.id" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</el-select>
</el-form-item>
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
<el-form-item label="媒体大类">
<el-select v-model="queryParams.mediaTypeTwo" placeholder="请选择"
@change="getMediaTypeThree" clearable style="min-width: 30px">
<el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="展示形式">
<el-select v-model="queryParams.mediaTypeThree" placeholder="请选择" clearable
style="min-width: 30px">
<el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
:value="item.id" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</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>
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
<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"
提交媒体库代码
2025-08-08 18:02:09 +08:00
:value="dict.value" />
</el-select>
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
</el-form-item>
<el-form-item label="状态:">
<el-select v-model="queryParams.media_status" placeholder="请选择" style="min-width: 30px;"
提交媒体库代码
2025-08-08 18:02:09 +08:00
clearable>
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
<el-option v-for="dict in media_status" :key="dict.value" :label="dict.label"
提交媒体库代码
2025-08-08 18:02:09 +08:00
: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="城市:">
补充媒体库界面
2025-08-12 20:14:41 +08:00
<el-select v-model="queryParams.provinceId" placeholder="请选择" @change="getCityList" clearable
style="min-width: 30px">
<el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</el-select>
</el-form-item>
<el-form-item label="">
补充媒体库界面
2025-08-12 20:14:41 +08:00
<el-select v-model="queryParams.cityId" placeholder="请选择" @change="getCountyList" clearable
style="min-width: 30px">
<el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</el-select>
</el-form-item>
<el-form-item label="">
补充媒体库界面
2025-08-12 20:14:41 +08:00
<el-select v-model="queryParams.countyId" placeholder="请选择" @change="getTownList" clearable
style="min-width: 30px">
<el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</el-select>
</el-form-item>
<el-form-item label="">
补充媒体库界面
2025-08-12 20:14:41 +08:00
<el-select v-model="queryParams.townId" placeholder="请选择" clearable style="min-width: 30px">
<el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</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>
更改比稿模板
2025-09-01 14:06:19 +08:00
<el-dropdown placement="bottom-start" style="margin-left: 12px;">
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
<el-button type="primary" class="primaryBtn">导入报价</el-button>
更改比稿模板
2025-09-01 14:06:19 +08:00
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="dropItem"
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
@click="handleImport('ys')">导入优势媒体报价</el-dropdown-item>
更改比稿模板
2025-09-01 14:06:19 +08:00
<el-dropdown-item class="dropItem"
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
@click="handleImport('wl')">导入网络媒体报价</el-dropdown-item>
更改比稿模板
2025-09-01 14:06:19 +08:00
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown placement="bottom-start" style="margin: 0 12px;">
提交媒体库代码
2025-08-08 18:02:09 +08:00
<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>
更改比稿模板
2025-09-01 14:06:19 +08:00
<el-button type="primary" class="primaryBtn" @click="handleExportExcel">导出excel</el-button>
<el-button type="primary" class="primaryBtn">媒体可视化地图</el-button>
提交媒体库代码
2025-08-08 18:02:09 +08:00
</el-col>
</el-row>
<el-table v-loading="loading" :data="mediaList" @selection-change="handleSelectionChange"
调整UI样式
2025-08-11 16:33:08 +08:00
:height="unfoldFlag ? 'calc(100vh - 382px)' : 'calc(100vh - 338px)'">
提交媒体库代码
2025-08-08 18:02:09 +08:00
<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
更改比稿模板
2025-09-01 14:06:19 +08:00
}}</span>
提交媒体库代码
2025-08-08 18:02:09 +08:00
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="媒体编号" align="left" prop="postCode" width="150" />
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
<el-table-column label="媒体大类" align="left" prop="postCode" width="150" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
<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"
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
@mouseleave="scope.row.currentCataloguePhotoSrc = defaultViewFileSrc"
@click="handleViewPhoto" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</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"
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
@mouseleave="scope.row.currentMediaChainSrc = defaultViewFileSrc"
@click="handleViewPhoto" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</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"
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
@mouseleave="scope.row.currentQualificationFileSrc = defaultViewFileSrc"
@click="handleViewPhoto" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</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"
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
@mouseleave="scope.row.currentStampedPublicationSrc = defaultViewFileSrc"
@click="handleViewPhoto" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
</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>
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<div class="popBtns" @click="handleHistoryChart(scope.row)"
提交媒体库代码
2025-08-08 18:02:09 +08:00
v-hasPermi="['problemFeedback:edit']">历史数据</div>
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<div class="popBtns" @click="handleAbolish(scope.row)"
提交媒体库代码
2025-08-08 18:02:09 +08:00
v-hasPermi="['problemFeedback:edit']">废除</div>
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<div class="popBtns" @click="handleLogs(scope.row)"
提交媒体库代码
2025-08-08 18:02:09 +08:00
v-hasPermi="['problemFeedback:edit']">日志</div>
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<div class="popBtns" @click="handleDownFiles(scope.row)"
提交媒体库代码
2025-08-08 18:02:09 +08:00
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>
补充媒体库界面
2025-08-12 20:14:41 +08:00
<media-form ref="mediaFormRef" v-if="showForm" @handleShowList="handleShowList" />
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<media-detail ref="mediaDetailRef" v-if="showDetail" @handleShowList="handleCloseDetail" />
<media-logs ref="mediaLogsRef" v-if="showLogs" @handleShowList="handleCloseLogs" />
<history-data ref="historyDataRef" />
<down-files ref="downFileRef" />
<view-file-dialog ref="viewFileRef" />
补充媒体导出界面
2025-08-26 14:27:35 +08:00
<export-dialog ref="exportDialogRef" />
提交媒体库代码
2025-08-08 18:02:09 +08:00
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<!-- 废除对话框 -->
<el-dialog title="废除" v-model="abolishOpen" width="650px" class="my_dialog" align-center
提交媒体库代码
2025-08-08 18:02:09 +08:00
:destroy-on-close="true" :close-on-click-modal="false">
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<el-form ref="abolishRef" :model="abolishForm" :rules="abolishRules" label-width="120px"
label-position="top" class="myFeedBackForm">
<el-form-item label="输入废除原因" prop="content">
<el-input v-model="abolishForm.content" style="width: 100%" :rows="5" type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button class="my-cancel-btn" @click="abolishOpen = false">取 消</el-button>
<el-button class="my-confirm-btn" type="primary" @click="handleSubmitAbolish">确 定</el-button>
</div>
</template>
</el-dialog>
<!-- 导入对话框 -->
<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">
提交媒体库代码
2025-08-08 18:02:09 +08:00
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<div class="el-upload__text">
将文件拖曳至此区域，或 <em>点击上传</em>
</div>
<!-- <div class="el-upload__text">
支持扩展名：.xlsx, .xls
</div> -->
提交媒体库代码
2025-08-08 18:02:09 +08:00
<template #tip>
<div class="el-upload__tip text-center">
<span>仅允许导入xls、xlsx格式文件。</span>
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<el-link type="primary" underline="never" style="font-size: 12px; vertical-align: baseline"
@click="importTemplate">下载模板</el-link>
提交媒体库代码
2025-08-08 18:02:09 +08:00
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
<el-button class="my-cancel-btn" @click="uploadOpen = false">取 消</el-button>
提交媒体库代码
2025-08-08 18:02:09 +08:00
</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">
补充媒体库界面
2025-08-12 20:14:41 +08:00
<el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag" @close="handleCloseTag(tag)"
closable>
{{ tag.mediaName }}
</el-tag>
提交媒体库代码
2025-08-08 18:02:09 +08:00
</div>
补充媒体导出界面
2025-08-26 14:27:35 +08:00
<div class="my_dialog_itemHeader">
<el-row :gutter="10">
<el-col :span="12">选择需要写入方案的媒体字段</el-col>
<el-col :span="12" style="text-align: right;">
<el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
@change="handleCheckAllChange">
全选
</el-checkbox>
</el-col>
</el-row>
</div>
<el-checkbox-group class="checkAllChose" style="margin-top: 30px;" v-model="checkedCities"
@change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
{{ city.label }}
</el-checkbox>
</el-checkbox-group>
提交媒体库代码
2025-08-08 18:02:09 +08:00
<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 { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
补充媒体库界面
2025-08-12 20:14:41 +08:00
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
提交媒体库代码
2025-08-08 18:02:09 +08:00
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'
补充媒体库界面
2025-08-12 20:14:41 +08:00
import mediaForm from "./mediaForm.vue";
import mediaDetail from "./mediaDetail.vue";
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
import mediaLogs from "./mediaLogs.vue";
import historyData from "./historyData.vue"
import downFiles from './downFiles.vue';
import viewFileDialog from '@/components/ViewFile/index.vue'
补充媒体导出界面
2025-08-26 14:27:35 +08:00
import exportDialog from './exportDialog.vue';
补充媒体库界面
2025-08-12 20:14:41 +08:00
提交媒体库代码
2025-08-08 18:02:09 +08:00
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")
补充媒体库界面
2025-08-12 20:14:41 +08:00
// 省、市、县、镇数据
const province = ref([])
const city = ref([])
const county = ref([])
const town = ref([])
// 媒体类型数据
const mediaTypeOne = ref([])
const mediaTypeTwo = ref([])
const mediaTypeThree = ref([])
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
const uploadOpen = ref(false)
const docUploadList = ref([])
提交媒体库代码
2025-08-08 18:02:09 +08:00
const showForm = ref(false)
补充媒体库界面
2025-08-12 20:14:41 +08:00
const mediaFormRef = ref(null)
提交媒体库代码
2025-08-08 18:02:09 +08:00
const showDetail = ref(false)
补充媒体库界面
2025-08-12 20:14:41 +08:00
const mediaDetailRef = ref(null)
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
const showLogs = ref(false)
const mediaLogsRef = ref(null)
const abolishOpen = ref(false)
const historyDataRef = ref(null)
const downFileRef = ref(null)
const viewFileRef = ref(null)
补充媒体导出界面
2025-08-26 14:27:35 +08:00
const exportDialogRef = ref(null)
// 导出PPT勾选字段
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai'])
const cities = [
{ label: '字段名', value: 'Shanghai' },
{ label: '字段名', value: 'begnjing' },
{ label: '字段名', value: 'chongq' },
{ label: '字段名', value: 'sdag' },
{ label: '字段名', value: 'Shanghai1' },
{ label: '字段名', value: 'begnjing2' },
{ label: '字段名', value: 'chongq3' },
{ label: '字段名', value: 'sdag4' },
{ label: '字段名', value: 'Shanghai5' },
{ label: '字段名', value: 'begnjing6' },
{ label: '字段名', value: 'chongq7' },
{ label: '字段名', value: 'sdag8' },
{ label: '字段名', value: 'Shanghai9' },
{ label: '字段名', value: 'begnjing10' },
{ label: '字段名', value: 'chongq11' },
{ label: '字段名', value: 'sdag12' },
]
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
提交媒体库代码
2025-08-08 18:02:09 +08:00
// 归属选项
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 }
])
// 导出PPT模板参数
const exportPPT = reactive({
open: false,
title: "",
})
const loading = ref(true)
const total = ref(0)
const data = reactive({
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
abolishForm: {},
提交媒体库代码
2025-08-08 18:02:09 +08:00
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
},
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
abolishRules: {
content: [{ required: true, message: "请输入废除原因", trigger: "blur" }],
提交媒体库代码
2025-08-08 18:02:09 +08:00
}
})
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
const { queryParams, form, abolishForm, abolishRules } = toRefs(data)
提交媒体库代码
2025-08-08 18:02:09 +08:00
补充媒体库界面
2025-08-12 20:14:41 +08:00
// 获取一级媒体类型
const getMediaTypeOne = () => {
sysMediaTypeListByPid({ parentId: 0 }).then(res => {
mediaTypeOne.value = res.data
})
}
// 获取二级媒体类型
const getMediaTypeTwo = (value) => {
sysMediaTypeListByPid({ parentId: value }).then(res => {
queryParams.value.mediaTypeTwo = undefined
queryParams.value.mediaTypeThree = undefined
mediaTypeTwo.value = res.data
})
}
// 获取三级媒体类型
const getMediaTypeThree = (value) => {
sysMediaTypeListByPid({ parentId: value }).then(res => {
queryParams.value.mediaTypeThree = undefined
mediaTypeThree.value = res.data
})
}
// 获取省/直辖市数据
const getProvinceList = () => {
sysRegionListByPid({ parentId: '0' }).then(res => {
province.value = res.data
})
}
// 获取地级市/区数据
const getCityList = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
queryParams.value.cityId = undefined
queryParams.value.countyId = undefined
queryParams.value.townId = undefined
city.value = res.data
})
}
// 获取区/县数据
const getCountyList = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
queryParams.value.countyId = undefined
queryParams.value.townId = undefined
county.value = res.data
})
}
// 获取镇数据
const getTownList = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
queryParams.value.townId = undefined
town.value = res.data
})
}
提交媒体库代码
2025-08-08 18:02:09 +08:00
// 折叠展开
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 handleOpenAddForm = () => {
showForm.value = true
nextTick(() => {
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
mediaFormRef.value.initForm('新建媒体信息', { supplierId: null })
提交媒体库代码
2025-08-08 18:02:09 +08:00
})
}
// 修改
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
const handleUpdate = (row) => {
提交媒体库代码
2025-08-08 18:02:09 +08:00
showForm.value = true
nextTick(() => {
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
mediaFormRef.value.initForm('编辑媒体信息', row)
提交媒体库代码
2025-08-08 18:02:09 +08:00
})
}
// 详情
const handleOpenDetail = () => {
showDetail.value = true
nextTick(() => {
补充媒体库界面
2025-08-12 20:14:41 +08:00
// mediaDetailRef.value.formTitle = '编辑供应商'
提交媒体库代码
2025-08-08 18:02:09 +08:00
})
}
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
// 关闭表单
提交媒体库代码
2025-08-08 18:02:09 +08:00
const handleShowList = () => {
console.log('触发')
showForm.value = false
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
}
// 关闭详情
const handleCloseDetail = () => {
提交媒体库代码
2025-08-08 18:02:09 +08:00
showDetail.value = false
}
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
// 打开日志
const handleLogs = (row) => {
showLogs.value = true
nextTick(() => {
// supplierLogsRef.value.initForm('编辑供应商', row)
})
}
// 关闭日志
const handleCloseLogs = () => {
showLogs.value = false
}
// 打开废除
const handleAbolish = (row) => {
abolishOpen.value = true
}
// 提交废除
const handleSubmitAbolish = () => {
proxy.$refs["abolishRef"].validate(valid => {
if (valid) {
// addSysReaddBusProblemFeedbackgion(form.value).then(response => {
// proxy.$modal.msgSuccess("反馈成功")
// openFeedBack.value = false
// form.value = {
// feedbackUser: undefined,
// content: undefined
// }
// proxy.resetForm("feedBackRef")
// })
}
})
}
// 打开历史数据
const handleHistoryChart = (row) => {
historyDataRef.value.historyDataOpen = true
nextTick(() => {
historyDataRef.value.initHistoryCharLine()
})
}
// 打开文件下载
const handleDownFiles = (row) => {
downFileRef.value.downFileOpen = true
nextTick(() => {
// historyDataRef.value.initHistoryCharLine()
})
}
// 查看文件
const handleViewPhoto = () => {
viewFileRef.value.viewFileOpen = true
nextTick(() => {
// historyDataRef.value.initHistoryCharLine()
})
}
提交媒体库代码
2025-08-08 18:02:09 +08:00
/** 导出Excel按钮操作 */
const handleExportExcel = () => {
补充媒体导出界面
2025-08-26 14:27:35 +08:00
exportDialogRef.value.exportOpen = true
nextTick(() => {
// historyDataRef.value.initHistoryCharLine()
})
提交媒体库代码
2025-08-08 18:02:09 +08:00
}
/** 导出PPT按钮操作 */
const handleExportPPT = (key) => {
exportPPT.title = '导出PPT'
exportPPT.open = true
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
}
补充媒体导出界面
2025-08-26 14:27:35 +08:00
// 全选操作
const handleCheckAllChange = (val) => {
checkedCities.value = []
if (val) {
cities.forEach(element => {
checkedCities.value.push(element.value)
});
}
isIndeterminate.value = false
}
// 单个选择字段
const handleCheckedCitiesChange = (value) => {
console.log('单选操作', value)
const checkedCount = value.length
checkAll.value = checkedCount === cities.length
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
提交媒体库代码
2025-08-08 18:02:09 +08:00
// 导出ppt实现代码
const handleSubmitExportPPT = () => {
exportPPT.open = false
}
/** 导入按钮操作 */
调整媒体库管理界面
2025-09-01 15:29:22 +08:00
const handleImport = (val) => {
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
uploadOpen.value = true
提交媒体库代码
2025-08-08 18:02:09 +08:00
}
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
// 自定义上传文件资料
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;
}
提交媒体库代码
2025-08-08 18:02:09 +08:00
}
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
// 移除已上传文件列表
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)
// })
提交媒体库代码
2025-08-08 18:02:09 +08:00
}
// 初始化
onMounted(() => {
bgStore.setBgImage(otherbg)
getList()
补充媒体库界面
2025-08-12 20:14:41 +08:00
getMediaTypeOne()
getProvinceList()
提交媒体库代码
2025-08-08 18:02:09 +08:00
});
</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%;
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
height: 36px;
background: #1a75e630;
padding: 6px 20px;
提交媒体库代码
2025-08-08 18:02:09 +08:00
font-family: Microsoft YaHei;
font-weight: 600;
添加及调整优势媒体界面
2025-08-25 22:18:21 +08:00
font-size: 18px;
提交媒体库代码
2025-08-08 18:02:09 +08:00
color: #000000;
}
.chosedMediaNamsConter {
width: 100%;
min-height: 60px;
background: #ffffff;
padding: 10px 0;
}
补充媒体导出界面
2025-08-26 14:27:35 +08:00
.checkAllChose .el-checkbox__label {
display: inline-block;
font-size: var(--el-checkbox-font-size);
line-height: 1;
padding-left: 8px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #1E1E1E;
}
.checkAllChose .el-checkbox__input.is-checked .el-checkbox__inner,
.checkAllChose .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #1A75E6;
border-color: #1A75E6;
}
.checkAllChose .el-checkbox__inner {
background: #ffffff;
border: 1px solid #ACACAC;
border-radius: 2px;
box-sizing: border-box;
display: inline-block;
height: 16px;
width: 16px;
}
.checkAllChose .el-checkbox__inner:after {
height: 8px;
left: 5px;
}
.checkAllChose .el-checkbox__input.is-checked+.el-checkbox__label {
color: #1E1E1E;
}
提交媒体库代码
2025-08-08 18:02:09 +08:00
</style>
Reference in New Issue Copy Permalink