158 lines
5.2 KiB
Vue
158 lines
5.2 KiB
Vue
<template>
|
||
<div class="export-data">
|
||
<popup
|
||
ref="popupRef"
|
||
title="导出设置"
|
||
width="500px"
|
||
confirm-button-text="确认导出"
|
||
@confirm="handleConfirm"
|
||
:async="true"
|
||
@open="getData"
|
||
>
|
||
<template #trigger>
|
||
<el-button>导出</el-button>
|
||
</template>
|
||
<div>
|
||
<p v-if="props.exportHint" class="text-sm text-gray-500 mb-3 leading-relaxed">{{ props.exportHint }}</p>
|
||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
||
<el-form-item label="数据量：">
|
||
预计导出{{ exportData.count }}条数据， 共{{ exportData.sum_page }}页，每页{{
|
||
exportData.page_size
|
||
}}条数据
|
||
</el-form-item>
|
||
<el-form-item label="导出限制：">
|
||
每次导出最大允许{{ exportData.max_page }}页，共{{
|
||
exportData.all_max_size
|
||
}}条数据
|
||
</el-form-item>
|
||
<el-form-item prop="page_type" label="导出范围：" required>
|
||
<el-radio-group v-model="formData.page_type">
|
||
<el-radio :value="0">全部导出</el-radio>
|
||
<el-radio :value="1">分页导出</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="分页范围：" v-if="formData.page_type == 1">
|
||
<div class="flex">
|
||
<el-form-item prop="page_start">
|
||
<el-input
|
||
style="width: 140px"
|
||
v-model.number="formData.page_start"
|
||
placeholder=""
|
||
></el-input>
|
||
</el-form-item>
|
||
<span class="flex-none ml-2 mr-2">页，至</span>
|
||
<el-form-item prop="page_end">
|
||
<el-input
|
||
style="width: 140px"
|
||
v-model.number="formData.page_end"
|
||
placeholder=""
|
||
></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="导出文件名称：" prop="file_name">
|
||
<el-input
|
||
v-model="formData.file_name"
|
||
placeholder="请输入导出文件名称"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</popup>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import type { FormInstance } from 'element-plus'
|
||
|
||
import Popup from '@/components/popup/index.vue'
|
||
import feedback from '@/utils/feedback'
|
||
|
||
const formRef = shallowRef<FormInstance>()
|
||
const props = defineProps({
|
||
params: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
pageSize: {
|
||
type: Number,
|
||
default: 25
|
||
},
|
||
fetchFun: {
|
||
type: Function,
|
||
required: true
|
||
},
|
||
/** 可选：导出弹窗内提示文案（如说明与列表筛选一致） */
|
||
exportHint: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||
const formData = reactive({
|
||
page_type: 0,
|
||
page_start: 1,
|
||
page_end: 200,
|
||
file_name: ''
|
||
})
|
||
|
||
const formRules = {
|
||
page_start: [
|
||
{ required: true, message: '请输入起始页码' },
|
||
{ type: 'number', message: '页码必须是整数' },
|
||
{
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (value <= 0) return callback(new Error('页码必须大于0'))
|
||
callback()
|
||
}
|
||
}
|
||
],
|
||
page_end: [
|
||
{ required: true, message: '请输入结束页码' },
|
||
{ type: 'number', message: '页码必须是整数' },
|
||
{
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (value <= 0) return callback(new Error('页码必须大于0'))
|
||
callback()
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
const exportData = reactive({
|
||
count: 0,
|
||
sum_page: 0,
|
||
page_size: 0,
|
||
max_page: 0,
|
||
all_max_size: 0
|
||
})
|
||
|
||
const getData = async () => {
|
||
const res = await props.fetchFun({
|
||
...props.params,
|
||
page_size: props.pageSize,
|
||
export: 1
|
||
})
|
||
Object.assign(exportData, res)
|
||
formData.file_name = res.file_name
|
||
formData.page_end = res.page_end
|
||
formData.page_start = res.page_start
|
||
}
|
||
const handleConfirm = async () => {
|
||
await formRef.value?.validate()
|
||
feedback.loading('正在导出中...')
|
||
try {
|
||
await props.fetchFun({
|
||
...props.params,
|
||
...formData,
|
||
page_size: props.pageSize,
|
||
export: 2
|
||
})
|
||
popupRef.value?.close()
|
||
feedback.closeLoading()
|
||
} catch (error) {
|
||
feedback.closeLoading()
|
||
}
|
||
}
|
||
getData()
|
||
</script>
|