788 lines
33 KiB
Vue
788 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.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.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.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="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.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="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" 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 placement="bottom-start" style="margin-left: 12px;">
|
||
<el-button type="primary" class="primaryBtn">导入报价</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('ys')">导入优势媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('mj')">导入网络-门禁媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('hct')">导入网络-候车厅媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('dz')">导入网络-道闸媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('dt')">导入网络-地铁媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('gt')">导入网络-高铁媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('xzl')">导入网络-写字楼媒体报价</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleImport('ckdx')">导入网络-车库灯箱媒体报价</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
<el-dropdown placement="bottom-start" style="margin: 0 12px;">
|
||
<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" @click="handleExportExcel">导出excel</el-button>
|
||
<el-button type="primary" class="primaryBtn" @click="handleGoMediaMap">媒体可视化地图</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-table 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="['problemFeedback:edit']">修改</div>
|
||
<div class="popBtns" @click="handleHistoryChart(scope.row)"
|
||
v-hasPermi="['problemFeedback:edit']">历史数据</div>
|
||
<div class="popBtns" @click="handleAbolish(scope.row)"
|
||
v-hasPermi="['problemFeedback:edit']">废除</div>
|
||
<div class="popBtns" @click="handleLogs(scope.row)"
|
||
v-hasPermi="['problemFeedback:edit']">日志</div>
|
||
<div class="popBtns" @click="handleDownFiles(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="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" />
|
||
<view-file-dialog ref="viewFileRef" />
|
||
<export-dialog ref="exportDialogRef" />
|
||
<export-p-p-t-dialog ref="exportPPTDialogRef" />
|
||
<!-- 导入对话框 -->
|
||
<el-dialog title="导入" v-model="uploadOpen" width="650px" class="my_dialog" align-center :destroy-on-close="true"
|
||
:close-on-click-modal="false">
|
||
<el-upload ref="uploadRef" class="upload-demo" drag action="#" :http-request="requestDocUpload"
|
||
:file-list="docUploadList" :before-upload="beforeDocUpload" :on-remove="removeDocUpload">
|
||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||
<div class="el-upload__text">
|
||
将文件拖曳至此区域，或 <em>点击上传</em>
|
||
</div>
|
||
<!-- <div class="el-upload__text">
|
||
支持扩展名：.xlsx, .xls
|
||
</div> -->
|
||
<template #tip>
|
||
<div class="el-upload__tip text-center">
|
||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||
<el-link type="primary" underline="never" style="font-size: 12px; vertical-align: baseline"
|
||
@click="importTemplate">下载模板</el-link>
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button class="my-cancel-btn" @click="uploadOpen = false">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
<script setup name="Post">
|
||
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 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 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 { 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 uploadOpen = ref(false)
|
||
const docUploadList = ref([])
|
||
const abolishRef = ref(null)
|
||
const historyDataRef = ref(null)
|
||
const downFileRef = ref(null)
|
||
const viewFileRef = ref(null)
|
||
const exportDialogRef = ref(null)
|
||
const exportPPTDialogRef = ref(null)
|
||
|
||
|
||
|
||
// 获取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 unfoldFlag = ref(false)
|
||
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
|
||
})
|
||
}
|
||
/** 搜索按钮操作 */
|
||
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.value = selection
|
||
}
|
||
// 移除选择项
|
||
const handleCloseTag = (tag) => {
|
||
const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
|
||
multipleChoseArr.value.splice(rowIndex, 1)
|
||
}
|
||
// 新增
|
||
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) => {
|
||
historyDataRef.value.historyDataOpen = true
|
||
nextTick(() => {
|
||
historyDataRef.value.initHistoryCharLine()
|
||
})
|
||
}
|
||
// 打开文件下载
|
||
const handleDownFiles = (row) => {
|
||
downFileRef.value.initFileList(true, row.id)
|
||
}
|
||
|
||
// 查看文件
|
||
const handleViewPhoto = (_fileType, row) => {
|
||
viewFileRef.value.initFileList(_fileType, row.id)
|
||
}
|
||
|
||
/** 导出Excel按钮操作 */
|
||
const handleExportExcel = () => {
|
||
if (multipleChoseArr.value.length == 0) {
|
||
proxy.$modal.msgWarning("请选择要导出的媒体!!!")
|
||
return false
|
||
}
|
||
const mediaIds = multipleChoseArr.value.map(item => item.id);
|
||
exportDialogRef.value.initExportExcel(mediaIds)
|
||
}
|
||
/** 导出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) => {
|
||
uploadOpen.value = true
|
||
}
|
||
|
||
// 自定义上传文件资料
|
||
const requestDocUpload = (options) => {
|
||
proxy.$modal.loading('正在上传文件，请耐心等待...')
|
||
const { file } = options
|
||
var formData = new FormData();
|
||
formData.append('file', file);
|
||
importSupplier(formData).then(res => {
|
||
if (res.code == 200) {
|
||
proxy.$modal.msgSuccess("导入成功")
|
||
proxy.$modal.closeLoading()
|
||
uploadOpen.value = false
|
||
getSupplierPageList()
|
||
} else {
|
||
proxy.$modal.closeLoading()
|
||
proxy.$modal.msgError(res.msg);
|
||
}
|
||
})
|
||
}
|
||
//自定义上传文件资料校验
|
||
const beforeDocUpload = (file) => {
|
||
const type = [
|
||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||
'application/vnd.ms-excel'
|
||
];
|
||
const isXlsx = type.includes(file.type);
|
||
// 检验文件格式
|
||
if (!isXlsx) {
|
||
proxy.$modal.msgError("文件格式错误，请上传.xls；.xlsx后缀的文件。");
|
||
return false;
|
||
}
|
||
}
|
||
// 移除已上传文件列表
|
||
const removeDocUpload = (file, fileList) => {
|
||
docUploadList.value = docUploadList.value.filter(
|
||
item => item.name != file.name
|
||
);
|
||
}
|
||
// 下载导入模板操作
|
||
const importTemplate = () => {
|
||
// exportTemplate().then(res => {
|
||
// // 通过a标签打开新页面下载文件
|
||
// const a = document.createElement('a')
|
||
// a.href = URL.createObjectURL(res)
|
||
// // a标签里有download属性可以自定义文件名
|
||
// const downLoadName = '供应商导入模板_' + Date.now() + '.xlsx'
|
||
// a.setAttribute('download', downLoadName)
|
||
// document.body.appendChild(a)
|
||
// a.click()
|
||
// document.body.removeChild(a)
|
||
// })
|
||
}
|
||
// 打开媒体地图
|
||
const handleGoMediaMap = () => {
|
||
router.push('/mediaMap')
|
||
}
|
||
// 初始化
|
||
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;
|
||
}
|
||
|
||
.my_dialog_itemHeader {
|
||
width: 100%;
|
||
height: 36px;
|
||
background: #1a75e630;
|
||
padding: 6px 20px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
}
|
||
|
||
.chosedMediaNamsConter {
|
||
width: 100%;
|
||
min-height: 60px;
|
||
background: #ffffff;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style> |