205 lines
7.7 KiB
Vue
205 lines
7.7 KiB
Vue
<template>
|
|
<!-- 导出对话框 -->
|
|
<el-dialog :title="exportTitle" v-model="exportOpen" width="800px" class="my_dialog" align-center
|
|
:destroy-on-close="true" :close-on-click-modal="false">
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
<el-tab-pane label="媒体基础信息" name="first">
|
|
<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="baseFieldCheckAll"
|
|
:indeterminate="baseFieldIsIndeterminate" @change="handleCheckAllBaseFieldChange">
|
|
全选
|
|
</el-checkbox>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedBaseFields"
|
|
@change="handleCheckedBaseFieldChange">
|
|
<el-checkbox v-for="itemBaseField in baseFields" :key="itemBaseField.propertyPath"
|
|
:label="itemBaseField.displayName" :value="itemBaseField.propertyPath">
|
|
{{ itemBaseField.displayName }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
|
|
<div class="my_dialog_itemHeader">附件选项</div>
|
|
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedHasFiles"
|
|
@change="handleCheckedHasFileChange">
|
|
<el-checkbox v-for="(item, index) in hasFilesList" :key="index" :label="item.label"
|
|
:value="item.value">
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="媒体报价信息" name="second">
|
|
<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="priceFieldCheckAll"
|
|
:indeterminate="priceFieldIsIndeterminate" @change="handleCheckAllPriceFieldChange">
|
|
全选
|
|
</el-checkbox>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedPriceFields"
|
|
@change="handleCheckedPriceFieldChange">
|
|
<el-checkbox v-for="itemPriceField in priceFields" :key="itemPriceField.propertyPath"
|
|
:label="itemPriceField.displayName" :value="itemPriceField.propertyPath">
|
|
{{ itemPriceField.displayName }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<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="handleSubmitExport">确 定</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
import { mediaExcelBaseField, mediaExcelPriceField, exportMediaExcel } from "@/api/mediaLibrary"
|
|
|
|
const exportTitle = ref('导出')
|
|
const exportOpen = ref(false)
|
|
const activeName = ref('first')
|
|
|
|
// 导出提交信息
|
|
const exportForm = ref({
|
|
ids: undefined,
|
|
exportBaseFields: undefined,
|
|
exportPriceFields: false,
|
|
hasFiles: false
|
|
})
|
|
|
|
// 基础字段是否全选
|
|
const baseFieldCheckAll = ref(false)
|
|
const baseFieldIsIndeterminate = ref(true)
|
|
// 基础字段
|
|
const baseFields = ref([])
|
|
// 已选择的基础字段
|
|
const checkedBaseFields = ref([])
|
|
|
|
// 报价字段是否全选
|
|
const priceFieldCheckAll = ref(false)
|
|
const priceFieldIsIndeterminate = ref(true)
|
|
// 报价字段
|
|
const priceFields = ref([])
|
|
// 已选择的报价字段
|
|
const checkedPriceFields = ref([])
|
|
|
|
// 是否包含附件，选中的值
|
|
const checkedHasFiles = ref([])
|
|
const hasFilesList = [
|
|
{ label: '包含附件', value: true },
|
|
]
|
|
|
|
// 基础字段全选操作
|
|
const handleCheckAllBaseFieldChange = (val) => {
|
|
checkedBaseFields.value = []
|
|
if (val) {
|
|
baseFields.value.forEach(element => {
|
|
checkedBaseFields.value.push(element.propertyPath)
|
|
});
|
|
}
|
|
baseFieldIsIndeterminate.value = false
|
|
}
|
|
// 单个选择基础字段
|
|
const handleCheckedBaseFieldChange = (value) => {
|
|
const checkedCount = value.length
|
|
baseFieldCheckAll.value = checkedCount === baseFields.value.length
|
|
baseFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < baseFields.value.length
|
|
}
|
|
// 报价字段全选操作
|
|
const handleCheckAllPriceFieldChange = (val) => {
|
|
checkedPriceFields.value = []
|
|
if (val) {
|
|
priceFields.value.forEach(element => {
|
|
checkedPriceFields.value.push(element.propertyPath)
|
|
});
|
|
}
|
|
priceFieldIsIndeterminate.value = false
|
|
}
|
|
// 单个选择报价字段
|
|
const handleCheckedPriceFieldChange = (value) => {
|
|
const checkedCount = value.length
|
|
priceFieldCheckAll.value = checkedCount === priceFields.value.length
|
|
priceFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < priceFields.value.length
|
|
}
|
|
|
|
// 选择是否包含附件
|
|
const handleCheckedHasFileChange = (value) => {
|
|
if (value.length > 0) exportForm.value.hasFiles = value[0]
|
|
else exportForm.value.hasFiles = false
|
|
}
|
|
|
|
// 切换选项卡
|
|
const handleClick = (tab, event) => {
|
|
activeName.value = tab
|
|
}
|
|
// 执行导出
|
|
const handleSubmitExport = () => {
|
|
exportForm.value.exportBaseFields = checkedBaseFields
|
|
exportForm.value.exportPriceFields = checkedPriceFields
|
|
exportMediaExcel(exportForm.value).then(res => {
|
|
const downLoadName = '媒体信息_' + getCurrentTime() + '.xlsx'
|
|
// 通过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
|
|
}
|
|
|
|
// 获取基础信息字段
|
|
const getMediaExcelBaseField = () => {
|
|
mediaExcelBaseField().then(res => {
|
|
baseFields.value = res.data
|
|
})
|
|
}
|
|
// 获取报价信息字段
|
|
const getMediaExcelPriceField = () => {
|
|
mediaExcelPriceField().then(res => {
|
|
priceFields.value = res.data
|
|
})
|
|
}
|
|
// 初始化
|
|
const initExportExcel = (_mediaIds) => {
|
|
exportForm.value.ids = _mediaIds
|
|
exportOpen.value = true
|
|
getMediaExcelBaseField()
|
|
getMediaExcelPriceField()
|
|
}
|
|
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
initExportExcel
|
|
});
|
|
</script> |