YouKeChuanMei_VUE/src/views/mediaLibrary/index.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(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;">
                            <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" @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, 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)

// 获取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
    })
}
/** 搜索按钮操作 */
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) => {
    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);
    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) => {
    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;
}

.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>