860 lines
35 KiB
Vue
860 lines
35 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.businessType" placeholder="请选择" clearable
|
||
style="min-width: 30px;">
|
||
<el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName"
|
||
:value="item.deptName" />
|
||
</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.mediaName" 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('wl')">导入网络媒体报价</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"
|
||
@click="handleExportPPT('dd')">滴滴模板导出</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleExportPPT('yk')">优客模板导出</el-dropdown-item>
|
||
<el-dropdown-item class="dropItem"
|
||
@click="handleExportPPT('kong')">空白模板导出</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
<el-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 :src="otherbg" />
|
||
<template #reference>
|
||
<span class="mediaNameLabel" @click="handleOpenDetail(scope.row.id)">{{ scope.row.mediaName
|
||
}}</span>
|
||
</template>
|
||
</el-popover>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="媒体编号" align="left" prop="postCode" width="150" />
|
||
<el-table-column label="媒体大类" align="left" prop="postCode" width="150" />
|
||
<el-table-column label="商圈" align="left" prop="postCode" width="150" />
|
||
<el-table-column label="展示形式" align="left" prop="postCode" width="150" />
|
||
<el-table-column label="业务部门" align="left" prop="postCode" width="150" />
|
||
<el-table-column label="刊例照片" align="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" />
|
||
</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" />
|
||
</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" />
|
||
</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" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建人" align="center" prop="postCode" width="150" />
|
||
<el-table-column label="创建时间" align="center" prop="postCode" width="150" />
|
||
<el-table-column label="状态" align="center" prop="postCode" width="150" />
|
||
<el-table-column label="操作" width="58" align="center" fixed="right">
|
||
<template #default="scope">
|
||
<el-popover popper-class="my_popover" placement="left-start">
|
||
<div class="popBtns" @click="handleUpdate(scope.row)"
|
||
v-hasPermi="['problemFeedback:edit']">修改</div>
|
||
<div class="popBtns" @click="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" />
|
||
<history-data ref="historyDataRef" />
|
||
<down-files ref="downFileRef" />
|
||
<view-file-dialog ref="viewFileRef" />
|
||
<export-dialog ref="exportDialogRef" />
|
||
|
||
<!-- 废除对话框 -->
|
||
<el-dialog title="废除" v-model="abolishOpen" width="650px" class="my_dialog" align-center
|
||
:destroy-on-close="true" :close-on-click-modal="false">
|
||
<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">
|
||
<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>
|
||
<!-- 导出PPT对话框 -->
|
||
<el-dialog :title="exportPPT.title" v-model="exportPPT.open" width="1270px" class="my_dialog" align-center
|
||
:destroy-on-close="true" :close-on-click-modal="false">
|
||
<div class="my_dialog_itemHeader">已选内容</div>
|
||
<div class="chosedMediaNamsConter">
|
||
<el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag" @close="handleCloseTag(tag)"
|
||
closable>
|
||
{{ tag.mediaName }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="my_dialog_itemHeader">
|
||
<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>
|
||
<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 { 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, mediaCancel } from "@/api/mediaLibrary"
|
||
import { listDept } from "@/api/system/dept"
|
||
// 注入组件
|
||
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 { useBackgroundStore } from '@/store/modules/background'
|
||
|
||
const router = useRouter()
|
||
const bgStore = useBackgroundStore()
|
||
const { proxy } = getCurrentInstance()
|
||
const { media_status } = proxy.useDict("media_status")
|
||
|
||
// 省、市、县、镇数据
|
||
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({
|
||
abolishForm: {},
|
||
form: {},
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
mediaType: undefined,
|
||
mediaCategory: undefined,
|
||
displayForm: undefined,
|
||
belongSupplierId: undefined,
|
||
businessType: undefined,
|
||
state: undefined,
|
||
mediaType: undefined,
|
||
mediaCategory: undefined,
|
||
|
||
provinceCode: undefined,
|
||
cityCode: undefined,
|
||
areaCode: undefined,
|
||
townCode: undefined,
|
||
businessDistrictId: undefined
|
||
},
|
||
abolishRules: {
|
||
content: [{ required: true, message: "请输入废除原因", trigger: "blur" }],
|
||
}
|
||
})
|
||
const { queryParams, form, abolishForm, abolishRules } = 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)
|
||
|
||
|
||
const uploadOpen = ref(false)
|
||
const docUploadList = ref([])
|
||
const abolishOpen = ref(false)
|
||
const historyDataRef = ref(null)
|
||
const downFileRef = ref(null)
|
||
const viewFileRef = ref(null)
|
||
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' },
|
||
]
|
||
|
||
|
||
|
||
// 多选数据
|
||
const multipleChoseArr = ref([])
|
||
|
||
// 导出PPT模板参数
|
||
const exportPPT = reactive({
|
||
open: false,
|
||
title: "",
|
||
})
|
||
|
||
// 获取一级媒体类型
|
||
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 = false
|
||
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 = () => {
|
||
handleQuery()
|
||
}
|
||
|
||
|
||
|
||
// 多选事件
|
||
const handleSelectionChange = (selection) => {
|
||
multipleChoseArr.value = selection
|
||
}
|
||
// 移除选择项
|
||
const handleCloseTag = (tag) => {
|
||
|
||
}
|
||
// 新增
|
||
const handleOpenAddForm = () => {
|
||
showForm.value = true
|
||
nextTick(() => {
|
||
mediaFormRef.value.initForm('新建媒体信息', { id: null })
|
||
})
|
||
}
|
||
// 修改
|
||
const handleUpdate = (row) => {
|
||
showForm.value = true
|
||
nextTick(() => {
|
||
mediaFormRef.value.initForm('编辑媒体信息', row)
|
||
})
|
||
}
|
||
// 详情
|
||
const handleOpenDetail = (_mediaId) => {
|
||
showDetail.value = true
|
||
nextTick(() => {
|
||
mediaDetailRef.value.getMediaInfo(_mediaId)
|
||
})
|
||
}
|
||
// 关闭表单
|
||
const handleShowList = () => {
|
||
console.log('触发')
|
||
showForm.value = false
|
||
getMediaPageList()
|
||
}
|
||
// 关闭详情
|
||
const handleCloseDetail = () => {
|
||
showDetail.value = false
|
||
}
|
||
// 打开日志
|
||
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()
|
||
})
|
||
}
|
||
|
||
/** 导出Excel按钮操作 */
|
||
const handleExportExcel = () => {
|
||
exportDialogRef.value.exportOpen = true
|
||
nextTick(() => {
|
||
// historyDataRef.value.initHistoryCharLine()
|
||
})
|
||
}
|
||
/** 导出PPT按钮操作 */
|
||
const handleExportPPT = (key) => {
|
||
exportPPT.title = '导出PPT'
|
||
exportPPT.open = true
|
||
}
|
||
// 全选操作
|
||
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
|
||
}
|
||
// 导出ppt实现代码
|
||
const handleSubmitExportPPT = () => {
|
||
exportPPT.open = false
|
||
}
|
||
|
||
/** 导入按钮操作 */
|
||
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()
|
||
});
|
||
</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> |