136 lines
5.0 KiB
Vue
136 lines
5.0 KiB
Vue
<template>
|
|
<!-- 导出PPT对话框 -->
|
|
<el-dialog :title="exportTitle" v-model="exportOpen" 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 chosedMediaList" :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="pptFieldCheckAll"
|
|
:indeterminate="pptFieldIsIndeterminate" @change="handleCheckAllPPTFieldChange">
|
|
全选
|
|
</el-checkbox>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-checkbox-group class="checkAllChose" style="margin-top: 30px;" v-model="checkedPPTFields"
|
|
@change="handleCheckedPPTFieldChange">
|
|
<el-checkbox v-for="itemPPTField in pptFields" :key="itemPPTField.propertyPath"
|
|
:label="itemPPTField.displayName" :value="itemPPTField.propertyPath">
|
|
{{ itemPPTField.displayName }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button class="my-cancel-btn" @click="exportOpen = false">取 消</el-button>
|
|
<el-button class="my-confirm-btn" type="primary" @click="handleSubmitExportPPT">确 定</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { mediaPPTField, exportMediaPPT } from "@/api/mediaLibrary"
|
|
|
|
const exportTitle = ref('导出PPT')
|
|
const exportOpen = ref(false)
|
|
// 已选媒体
|
|
const chosedMediaList = ref([])
|
|
// 导出提交信息
|
|
const exportForm = ref({
|
|
mediaIds: undefined,
|
|
templateId: undefined,
|
|
exportFields: undefined
|
|
})
|
|
// ppt字段是否全选
|
|
const pptFieldCheckAll = ref(false)
|
|
const pptFieldIsIndeterminate = ref(true)
|
|
// ppt字段
|
|
const pptFields = ref([])
|
|
// 已选择的ppt字段
|
|
const checkedPPTFields = ref([])
|
|
|
|
// 移除已选媒体
|
|
const handleCloseTag = (tag) => {
|
|
const rowIndex = chosedMediaList.value.findIndex(item => item.id == tag.id)
|
|
chosedMediaList.value.splice(rowIndex, 1)
|
|
// 重新计算导出媒体id
|
|
exportForm.value.mediaIds = chosedMediaList.value.map(item => item.id);
|
|
}
|
|
|
|
// PPT字段全选操作
|
|
const handleCheckAllPPTFieldChange = (val) => {
|
|
checkedPPTFields.value = []
|
|
if (val) {
|
|
pptFields.value.forEach(element => {
|
|
checkedPPTFields.value.push(element.propertyPath)
|
|
});
|
|
}
|
|
pptFieldIsIndeterminate.value = false
|
|
}
|
|
// 单个选择PPT字段
|
|
const handleCheckedPPTFieldChange = (value) => {
|
|
const checkedCount = value.length
|
|
pptFieldCheckAll.value = checkedCount === pptFields.value.length
|
|
pptFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < pptFields.value.length
|
|
}
|
|
|
|
// 导出ppt实现代码
|
|
const handleSubmitExportPPT = () => {
|
|
exportForm.value.exportFields = checkedPPTFields
|
|
exportMediaPPT(exportForm.value).then(res => {
|
|
const downLoadName = '媒体信息_' + getCurrentTime() + '.pptx'
|
|
// 通过a标签打开新页面下载文件
|
|
const a = document.createElement('a')
|
|
a.href = URL.createObjectURL(res)
|
|
// a标签里有download属性可以自定义文件名
|
|
a.setAttribute('download', downLoadName)
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
exportOpen.value = false
|
|
})
|
|
}
|
|
|
|
const getCurrentTime = () => {
|
|
//获取当前时间并打印
|
|
var getTime = new Date().getTime(); //获取到当前时间戳
|
|
var time = new Date(getTime); //创建一个日期对象
|
|
var year = time.getFullYear(); // 年
|
|
var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
|
|
var date = time.getDate().toString().padStart(2, '0'); // 日
|
|
var hour = time.getHours().toString().padStart(2, '0'); // 时
|
|
var minute = time.getMinutes().toString().padStart(2, '0'); // 分
|
|
var second = time.getSeconds().toString().padStart(2, '0'); // 秒
|
|
var gettime = year + month + date + hour + minute + second
|
|
return gettime
|
|
}
|
|
|
|
// 获取ppt信息字段
|
|
const getMediaExcelPPTField = () => {
|
|
mediaPPTField().then(res => {
|
|
pptFields.value = res.data
|
|
})
|
|
}
|
|
// 初始化
|
|
const initExportPPT = (_tempId, _mediaIds, multipleChoseArr) => {
|
|
exportForm.value.templateId = _tempId
|
|
exportForm.value.mediaIds = _mediaIds
|
|
chosedMediaList.value = JSON.parse(JSON.stringify(multipleChoseArr))
|
|
getMediaExcelPPTField()
|
|
exportOpen.value = true
|
|
}
|
|
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
initExportPPT
|
|
});
|
|
</script> |