762 lines
33 KiB
Vue
762 lines
33 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div v-if="!showForm && !showDetail && !showLogs">
|
||
<div class="searchPanel">
|
||
<div class="more-search-pane">
|
||
<div class="search-where-container">
|
||
<el-form :model="queryParams" :inline="true" class="searchPanelForm">
|
||
<el-form-item label="业务部门:">
|
||
<el-select v-model="queryParams.dataScopeDeptId" placeholder="请选择" clearable
|
||
style="min-width: 30px;">
|
||
<el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName"
|
||
:value="item.deptId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="城市:">
|
||
<el-select v-model="queryParams.provinceCode" placeholder="请选择" @change="getCityList"
|
||
clearable style="min-width: 30px">
|
||
<el-option v-for="item in province" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-select v-model="queryParams.cityCode" placeholder="请选择" @change="getCountyList"
|
||
clearable style="min-width: 30px">
|
||
<el-option v-for="item in city" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-select v-model="queryParams.areaCode" placeholder="请选择" @change="getTownList"
|
||
clearable style="min-width: 30px">
|
||
<el-option v-for="item in county" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-select v-model="queryParams.townCode" placeholder="请选择"
|
||
@change="getbusinessAreaList" clearable style="min-width: 30px">
|
||
<el-option v-for="item in town" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商圈:">
|
||
<el-select v-model="queryParams.businessDistrictId" placeholder="请选择" clearable
|
||
style="min-width: 30px;">
|
||
<el-option v-for="item in businessAreaList" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</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" :inline="true" class="searchSmallPanelForm">
|
||
<el-form-item label="媒体类型:">
|
||
<el-select v-model="queryParams.mediaType" placeholder="请选择" @change="getMediaTypeTwo" clearable
|
||
style="min-width: 30px">
|
||
<el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="媒体大类:">
|
||
<el-select v-model="queryParams.mediaCategory" 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.displayForm" placeholder="请选择" clearable
|
||
style="min-width: 30px">
|
||
<el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="归属:">
|
||
<el-select class="filterSelect" v-model="queryParams.belongSupplierId" filterable remote
|
||
reserve-keyword :remote-method="getSupplierList" :loading="selectLoading" placeholder="请输入"
|
||
remote-show-suffix clearable style="min-width: 70px;">
|
||
<el-option v-for="item in supplierList" :key="item.supplierId" :label="item.supplierName"
|
||
:value="item.supplierId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="状态:">
|
||
<el-select v-model="queryParams.state" 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>
|
||
</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" :inline="true" class="searchInputForm">
|
||
<el-form-item label="">
|
||
<el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
|
||
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" v-hasPermi="['mediaLibrary:query']"
|
||
@click="handleQuery">查询</el-button>
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:reset']"
|
||
@click="resetQuery">重置</el-button>
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:add']"
|
||
@click="handleOpenAddForm">新增</el-button>
|
||
<el-dropdown placement="bottom-start" style="margin-left: 12px;"
|
||
v-hasPermi="['mediaLibrary:importQuotation']">
|
||
<el-button type="primary" class="primaryBtn">导入报价</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(0)">导入优势媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(1)">导入门禁媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(2)">导入候车厅媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(3)">导入道闸媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(4)">导入地铁媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(5)">导入高铁媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(6)">导入写字楼媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport(7)">导入车库灯箱媒体报价</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
<el-dropdown placement="bottom-start" style="margin: 0 12px;"
|
||
v-hasPermi="['mediaLibrary:exportPPT']">
|
||
<el-button type="primary" class="primaryBtn">
|
||
导出PPT
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item class="dropItem" v-for="temp in templateList"
|
||
@click="handleExportPPT(temp.id)">
|
||
<span v-if="temp.type == 3">优客模板导出</span>
|
||
<span v-if="temp.type == 2">滴滴模板导出</span>
|
||
<span v-if="temp.type == 1">空白模板导出</span>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:exportExcel']"
|
||
@click="handleExportExcel">导出excel</el-button>
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:mediaMap']"
|
||
@click="handleGoMediaMap">媒体可视化地图</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-table ref="tableRef" v-loading="loading" :data="mediaList" @selection-change="handleSelectionChange"
|
||
:height="unfoldFlag ? 'calc(100vh - 372px)' : 'calc(100vh - 338px)'">
|
||
<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 v-if="scope.row.mediaFileList.length > 0"
|
||
:src="baseUrl + scope.row.mediaFileList[0].fileName" />
|
||
<template #reference>
|
||
<span class="mediaNameLabel" @click="handleOpenDetail(scope.row)">{{
|
||
scope.row.mediaName
|
||
}}</span>
|
||
</template>
|
||
</el-popover>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="媒体编号" align="left" prop="mediaCode" width="180" />
|
||
<el-table-column label="媒体大类" align="left" prop="mediaCategoryStr" width="150" />
|
||
<el-table-column label="商圈" align="left" prop="businessDistrictName" width="150" />
|
||
<el-table-column label="展示形式" align="left" prop="displayFormStr" width="150" />
|
||
<el-table-column label="业务部门" align="left" prop="dataScopeDeptName" 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"
|
||
@click="handleViewPhoto(11, scope.row)" />
|
||
</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"
|
||
@click="handleViewPhoto(10, scope.row)" />
|
||
</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"
|
||
@click="handleViewPhoto(9, scope.row)" />
|
||
</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"
|
||
@click="handleViewPhoto(8, scope.row)" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建人" align="center" prop="createBy" width="150" />
|
||
<el-table-column label="创建时间" align="center" prop="createTime" width="150" />
|
||
<el-table-column label="状态" align="center" prop="state" width="150">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.state == 1">生效中</span>
|
||
<span v-if="scope.row.state == 2">已作废</span>
|
||
</template>
|
||
</el-table-column>
|
||
<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="['mediaLibrary:update']">修改</div>
|
||
<div class="popBtns" @click="handleHistoryChart(scope.row)"
|
||
v-hasPermi="['mediaLibrary:historicalData']">历史数据</div>
|
||
<div class="popBtns" @click="handleAbolish(scope.row)"
|
||
v-hasPermi="['mediaLibrary:abolish']">废除</div>
|
||
<div class="popBtns" @click="handleLogs(scope.row)" v-hasPermi="['mediaLibrary:log']">日志
|
||
</div>
|
||
<div class="popBtns" @click="handleDownFiles(scope.row)"
|
||
v-hasPermi="['mediaLibrary:download']">下载</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="getMediaPageList" />
|
||
</el-card>
|
||
</div>
|
||
<media-form ref="mediaFormRef" v-if="showForm" @handleShowList="handleShowList" />
|
||
<media-detail ref="mediaDetailRef" v-if="showDetail" @handleShowList="handleCloseDetail" />
|
||
<media-logs ref="mediaLogsRef" v-if="showLogs" @handleShowList="handleCloseLogs" />
|
||
<abolish-dialog ref="abolishRef" @handleReloadList="getMediaPageList" />
|
||
<history-data ref="historyDataRef" />
|
||
<down-files ref="downFileRef" @downBack="handleDownBack" />
|
||
<view-file-dialog ref="viewFileRef" />
|
||
<export-dialog ref="exportDialogRef" />
|
||
<export-p-p-t-dialog ref="exportPPTDialogRef" />
|
||
<importPrice ref="importPriceRef" />
|
||
<down-records ref="downRecordsRef" />
|
||
</div>
|
||
</template>
|
||
<script setup name="Post">
|
||
import { onMounted, nextTick, ref } from 'vue';
|
||
import { useRouter } from 'vue-router'
|
||
import { ElMessageBox } from 'element-plus'
|
||
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 otherbg from '@/assets/images/otherbg.png'
|
||
import { listBusSupplier } from "@/api/supplier"
|
||
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
||
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
|
||
import { busTradingAreaPage } from "@/api/system/businessArea"
|
||
import { mediaPageList } from "@/api/mediaLibrary"
|
||
import { listDept } from "@/api/system/dept"
|
||
import { pptTemplatePage } from "@/api/system/pptTemplate"
|
||
import { busDownloadRecordPage } from "@/api/mediaDownRecord"
|
||
// 注入组件
|
||
import mediaForm from "./mediaForm.vue";
|
||
import mediaDetail from "./mediaDetail.vue";
|
||
import mediaLogs from "./mediaLogs.vue";
|
||
import historyData from "./historyData.vue"
|
||
import downFiles from './downFiles.vue';
|
||
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 downRecords from './downRecords.vue';
|
||
import { useBackgroundStore } from '@/store/modules/background'
|
||
|
||
const router = useRouter()
|
||
const bgStore = useBackgroundStore()
|
||
const { proxy } = getCurrentInstance()
|
||
const { media_status } = proxy.useDict("media_status")
|
||
|
||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||
// 省、市、县、镇数据
|
||
const province = ref([])
|
||
const city = ref([])
|
||
const county = ref([])
|
||
const town = ref([])
|
||
// 商圈信息列表
|
||
const businessAreaList = ref([])
|
||
// 媒体类型数据
|
||
const mediaTypeOne = ref([])
|
||
const mediaTypeTwo = ref([])
|
||
const mediaTypeThree = ref([])
|
||
// 归属选项
|
||
const supplierList = ref([])
|
||
const selectLoading = ref(false)
|
||
// 业务部门
|
||
const deptList = ref([])
|
||
// 操作列图标
|
||
const defaultImageSrc = ref(optionIcon);
|
||
const hoverImageSrc = ref(optionIconHover);
|
||
// 列表文件缩略图标
|
||
const defaultViewFileSrc = ref(viewFile);
|
||
const hoverViewFileSrc = ref(viewFileHover);
|
||
// 媒体列表
|
||
const mediaList = ref([])
|
||
// 媒体信息查询条件
|
||
const loading = ref(true)
|
||
const total = ref(0)
|
||
const data = reactive({
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
keyword: undefined,
|
||
mediaType: undefined,
|
||
mediaCategory: undefined,
|
||
displayForm: undefined,
|
||
belongSupplierId: undefined,
|
||
dataScopeDeptId: undefined,
|
||
state: undefined,
|
||
provinceCode: undefined,
|
||
cityCode: undefined,
|
||
areaCode: undefined,
|
||
townCode: undefined,
|
||
businessDistrictId: undefined
|
||
},
|
||
})
|
||
const { queryParams } = toRefs(data)
|
||
// 表单
|
||
const showForm = ref(false)
|
||
const mediaFormRef = ref(null)
|
||
// 详情
|
||
const showDetail = ref(false)
|
||
const mediaDetailRef = ref(null)
|
||
// 日志
|
||
const showLogs = ref(false)
|
||
const mediaLogsRef = ref(null)
|
||
// ppt模板数据
|
||
const templateList = ref([])
|
||
// 媒体多选数据
|
||
const multipleChoseArr = ref([])
|
||
const unfoldFlag = ref(false)
|
||
|
||
const importPriceRef = ref(null)
|
||
const abolishRef = ref(null)
|
||
const historyDataRef = ref(null)
|
||
const downFileRef = ref(null)
|
||
const viewFileRef = ref(null)
|
||
const exportDialogRef = ref(null)
|
||
const exportPPTDialogRef = ref(null)
|
||
const downRecordsRef = ref(null)
|
||
// 添加表格引用
|
||
const tableRef = ref(null)
|
||
// 添加一个标志位来区分是用户操作还是程序设置
|
||
const isSettingSelection = ref(false)
|
||
|
||
// 获取PPT模板
|
||
const getpptTemplatePageList = () => {
|
||
pptTemplatePage(queryParams.value).then(res => {
|
||
templateList.value = res.data.list
|
||
})
|
||
}
|
||
// 获取一级媒体类型
|
||
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 getSupplierList = (queryText) => {
|
||
if (queryText) {
|
||
selectLoading.value = true
|
||
listBusSupplier({ keyword: queryText }).then(res => {
|
||
supplierList.value = res.data
|
||
selectLoading.value = false
|
||
})
|
||
} else {
|
||
selectLoading.value = false
|
||
supplierList.value = []
|
||
}
|
||
}
|
||
// 获取业务部门
|
||
const getDepList = () => {
|
||
listDept({ businessFlag: 1 }).then(response => {
|
||
deptList.value = response.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
|
||
})
|
||
getbusinessAreaList()
|
||
}
|
||
// 获取区/县数据
|
||
const getCountyList = (value) => {
|
||
sysRegionListByPid({ parentId: value }).then(res => {
|
||
queryParams.value.countyId = undefined
|
||
queryParams.value.townId = undefined
|
||
county.value = res.data
|
||
})
|
||
getbusinessAreaList()
|
||
}
|
||
// 获取镇数据
|
||
const getTownList = (value) => {
|
||
sysRegionListByPid({ parentId: value }).then(res => {
|
||
queryParams.value.townId = undefined
|
||
town.value = res.data
|
||
})
|
||
getbusinessAreaList()
|
||
}
|
||
// 依据省市县镇查询商圈
|
||
const getbusinessAreaList = (val) => {
|
||
const _params = {
|
||
pageIndex: 1,
|
||
pageSize: 200,
|
||
provinceId: queryParams.value.provinceCode,
|
||
cityId: queryParams.value.cityCode,
|
||
countyId: queryParams.value.areaCode,
|
||
townId: queryParams.value.townCode,
|
||
}
|
||
busTradingAreaPage(_params).then(res => {
|
||
if (res.code == 200) {
|
||
businessAreaList.value = res.data.list
|
||
}
|
||
})
|
||
}
|
||
// 折叠展开
|
||
const handleFlod = () => {
|
||
unfoldFlag.value = !unfoldFlag.value
|
||
}
|
||
/** 查询媒体信息列表 */
|
||
const getMediaPageList = () => {
|
||
loading.value = true
|
||
mediaPageList(queryParams.value).then(res => {
|
||
res.data.rows.forEach(element => {
|
||
element.currentImageSrc = defaultImageSrc.value;
|
||
element.currentCataloguePhotoSrc = defaultViewFileSrc.value;
|
||
element.currentMediaChainSrc = defaultViewFileSrc.value;
|
||
element.currentQualificationFileSrc = defaultViewFileSrc.value;
|
||
element.currentStampedPublicationSrc = defaultViewFileSrc.value;
|
||
});
|
||
mediaList.value = res.data.rows
|
||
total.value = res.data.total
|
||
loading.value = false
|
||
|
||
// 数据加载完成后，设置选中状态
|
||
nextTick(() => {
|
||
setTableSelection()
|
||
})
|
||
})
|
||
}
|
||
/** 搜索按钮操作 */
|
||
const handleQuery = () => {
|
||
queryParams.value.pageNum = 1
|
||
getMediaPageList()
|
||
}
|
||
/** 重置按钮操作 */
|
||
const resetQuery = () => {
|
||
queryParams.value = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
keyword: undefined,
|
||
mediaType: undefined,
|
||
mediaCategory: undefined,
|
||
displayForm: undefined,
|
||
belongSupplierId: undefined,
|
||
businessType: undefined,
|
||
state: undefined,
|
||
provinceCode: undefined,
|
||
cityCode: undefined,
|
||
areaCode: undefined,
|
||
townCode: undefined,
|
||
businessDistrictId: undefined
|
||
}
|
||
handleQuery()
|
||
}
|
||
// 选择媒体事件
|
||
const handleSelectionChange = (selection) => {
|
||
// 如果是程序设置的选中状态，不更新 multipleChoseArr
|
||
if (isSettingSelection.value) {
|
||
return
|
||
}
|
||
|
||
// 获取当前页所有行的ID
|
||
const currentPageIds = mediaList.value.map(item => item.id)
|
||
|
||
// 如果当前页没有选中的数据，说明是页面切换导致的清空，不处理
|
||
if (selection.length === 0 && currentPageIds.length > 0) {
|
||
// 检查当前页是否有应该选中的数据
|
||
const shouldHaveSelections = currentPageIds.some(id =>
|
||
multipleChoseArr.value.some(item => item.id === id)
|
||
)
|
||
|
||
// 如果当前页有应该选中的数据但selection为空，说明是页面切换，不处理
|
||
if (shouldHaveSelections) {
|
||
return
|
||
}
|
||
}
|
||
|
||
// 移除当前页中已取消选中的项目
|
||
const currentSelectedIds = selection.map(item => item.id)
|
||
multipleChoseArr.value = multipleChoseArr.value.filter(item =>
|
||
!currentPageIds.includes(item.id) || currentSelectedIds.includes(item.id)
|
||
)
|
||
|
||
// 添加新选中的项目（去重）
|
||
selection.forEach(newItem => {
|
||
if (!multipleChoseArr.value.some(item => item.id === newItem.id)) {
|
||
multipleChoseArr.value.push(newItem)
|
||
}
|
||
})
|
||
}
|
||
// 设置表格选中状态 - 完善版本
|
||
const setTableSelection = () => {
|
||
if (tableRef.value && mediaList.value.length > 0) {
|
||
// 设置标志位，避免触发 handleSelectionChange
|
||
isSettingSelection.value = true
|
||
|
||
// 使用 nextTick 确保DOM已更新
|
||
nextTick(() => {
|
||
// 先清除所有选中状态
|
||
tableRef.value.clearSelection()
|
||
|
||
// 延迟设置选中状态，确保清除操作完成
|
||
setTimeout(() => {
|
||
mediaList.value.forEach(row => {
|
||
const isSelected = multipleChoseArr.value.some(item => item.id === row.id)
|
||
if (isSelected) {
|
||
tableRef.value.toggleRowSelection(row, true)
|
||
}
|
||
})
|
||
|
||
// 恢复标志位
|
||
setTimeout(() => {
|
||
isSettingSelection.value = false
|
||
}, 100)
|
||
}, 50)
|
||
})
|
||
}
|
||
}
|
||
// 移除选择项
|
||
const handleCloseTag = (tag) => {
|
||
const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
|
||
multipleChoseArr.value.splice(rowIndex, 1)
|
||
|
||
// 清除对应行的复选框选中状态
|
||
if (tableRef.value) {
|
||
// 设置标志位，避免触发 handleSelectionChange
|
||
isSettingSelection.value = true
|
||
|
||
// 找到对应的行数据
|
||
const row = mediaList.value.find(item => item.id === tag.id)
|
||
if (row) {
|
||
tableRef.value.toggleRowSelection(row, false)
|
||
}
|
||
|
||
// 恢复标志位
|
||
setTimeout(() => {
|
||
isSettingSelection.value = false
|
||
}, 100)
|
||
}
|
||
}
|
||
// 新增
|
||
const handleOpenAddForm = () => {
|
||
showForm.value = true
|
||
nextTick(() => {
|
||
mediaFormRef.value.initForm('新建媒体信息', { id: null })
|
||
})
|
||
}
|
||
// 修改
|
||
const handleUpdate = (row) => {
|
||
showForm.value = true
|
||
nextTick(() => {
|
||
mediaFormRef.value.initForm('编辑媒体信息', row)
|
||
})
|
||
}
|
||
// 详情
|
||
const handleOpenDetail = (row) => {
|
||
showDetail.value = true
|
||
nextTick(() => {
|
||
mediaDetailRef.value.initForm(row)
|
||
})
|
||
}
|
||
// 关闭表单
|
||
const handleShowList = () => {
|
||
showForm.value = false
|
||
getMediaPageList()
|
||
}
|
||
// 关闭详情
|
||
const handleCloseDetail = () => {
|
||
showDetail.value = false
|
||
}
|
||
// 打开日志
|
||
const handleLogs = (row) => {
|
||
showLogs.value = true
|
||
nextTick(() => {
|
||
mediaLogsRef.value.initLog(row)
|
||
})
|
||
}
|
||
// 关闭日志
|
||
const handleCloseLogs = () => {
|
||
showLogs.value = false
|
||
}
|
||
// 打开废除
|
||
const handleAbolish = (row) => {
|
||
if (row.state == 1) abolishRef.value.openDialog(row.id)
|
||
else proxy.$modal.notify("该媒体已被废除，无需重复操作!")
|
||
}
|
||
// 打开历史数据
|
||
const handleHistoryChart = (row) => {
|
||
const isReadonly = row.dataScopeDeptId == 220 ? true : false
|
||
historyDataRef.value.initHistoryData(row.id, isReadonly)
|
||
}
|
||
// 打开文件下载
|
||
const handleDownFiles = (row) => {
|
||
busDownloadRecordPage({ pageIndex: 1, pageSize: 1, state: 0 }).then(res => {
|
||
if (res.code == 200) {
|
||
if (res.data.list.length == 0) downFileRef.value.initFileList(true, row.id)
|
||
else {
|
||
ElMessageBox.alert('您有待下载的文件等待下载...', '系统消息', {
|
||
confirmButtonText: '查看下载任务',
|
||
callback: (action) => {
|
||
downRecordsRef.value.initDownList()
|
||
},
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
// 全部下载回调
|
||
const handleDownBack = () => {
|
||
downRecordsRef.value.initDownList()
|
||
}
|
||
// 查看文件
|
||
const handleViewPhoto = (_fileType, row) => {
|
||
viewFileRef.value.initFileList(_fileType, row.id)
|
||
}
|
||
/** 导出Excel按钮操作 */
|
||
const handleExportExcel = () => {
|
||
if (multipleChoseArr.value.length == 0) {
|
||
proxy.$modal.msgWarning("请选择要导出的媒体!!!")
|
||
return false
|
||
}
|
||
const mediaIds = multipleChoseArr.value.map(item => item.id);
|
||
const uniqueDeptIds = [...new Set(multipleChoseArr.value.map(item => item.dataScopeDeptId))];
|
||
exportDialogRef.value.initExportExcel(mediaIds, uniqueDeptIds)
|
||
}
|
||
/** 导出PPT按钮操作 */
|
||
const handleExportPPT = (tempId) => {
|
||
if (multipleChoseArr.value.length == 0) {
|
||
proxy.$modal.msgWarning("请选择要导出的媒体!!!")
|
||
return false
|
||
}
|
||
const mediaIds = multipleChoseArr.value.map(item => item.id);
|
||
exportPPTDialogRef.value.initExportPPT(tempId, mediaIds, multipleChoseArr.value)
|
||
}
|
||
/** 导入按钮操作 */
|
||
const handleImport = (val) => {
|
||
importPriceRef.value.initImportPriceExcel(val)
|
||
}
|
||
// 打开媒体地图
|
||
const handleGoMediaMap = () => {
|
||
router.push('/mediaMap')
|
||
}
|
||
// 初始化
|
||
onMounted(() => {
|
||
bgStore.setBgImage(otherbg)
|
||
getMediaPageList()
|
||
getDepList()
|
||
getMediaTypeOne()
|
||
getProvinceList()
|
||
getpptTemplatePageList()
|
||
});
|
||
</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;
|
||
}
|
||
</style> |