<template>
|
<el-card shadow="never">
|
<template #header>
|
<div><el-text tag="b" size="large">数据产品下载</el-text></div>
|
</template>
|
<el-form :inline="false" label-position="left" label-width="150px">
|
<el-form-item label="区县">
|
<el-text>{{ opts.districtName }}</el-text>
|
</el-form-item>
|
<el-form-item label="时间范围">
|
<el-text>{{ opts.startTime }} 至 {{ opts.endTime }}</el-text>
|
</el-form-item>
|
<el-form-item label="场景类型">
|
<el-text>{{ opts.sceneTypeName }}</el-text>
|
</el-form-item>
|
<el-form-item label="产品形式">
|
<el-radio-group v-model="downloadType">
|
<el-radio
|
v-for="item in _downloadTypeOptions"
|
:key="item.value"
|
:value="item.value"
|
:disabled="item.disabled"
|
>
|
{{ item.label }}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-row justify="end">
|
<el-button
|
type="primary"
|
size="default"
|
:loading="loading"
|
@click="submit"
|
icon="Download"
|
>下载</el-button
|
>
|
</el-row>
|
</template>
|
</el-card>
|
</template>
|
<script setup>
|
import { ref, computed } from 'vue';
|
import dayjs from 'dayjs';
|
import scene_1 from '@/assets/image/scene_1.png';
|
|
const props = defineProps({
|
// 数据产品生成选项
|
queryOpt: {
|
type: Object,
|
default: () => {}
|
},
|
loading: {
|
type: Boolean,
|
default: false
|
},
|
downloadTypeOptions: {
|
type: Array,
|
default: () => [
|
{
|
value: '1',
|
label: 'Excel表单'
|
},
|
{
|
value: '2',
|
label: 'Word文档'
|
}
|
]
|
},
|
// 下载类型是否有效
|
downloadTypeValid: {
|
type: Array,
|
default: () => ['1']
|
},
|
defaultDownloadType: {
|
type: String,
|
default: '1'
|
}
|
});
|
const emit = defineEmits(['submit']);
|
|
const downloadType = ref(props.defaultDownloadType);
|
const opts = computed(() => {
|
if (props.queryOpt instanceof Array && props.queryOpt.length > 0) {
|
return props.queryOpt[0];
|
} else {
|
return props.queryOpt;
|
}
|
});
|
|
const _downloadTypeOptions = computed(() => {
|
return props.downloadTypeOptions.map((item) => ({
|
...item,
|
disabled: !props.downloadTypeValid.includes(item.value)
|
}));
|
});
|
|
const submit = () => {
|
emit('submit', {
|
downloadType: downloadType.value
|
});
|
};
|
</script>
|
<style scoped>
|
/* .image {
|
width: 200px;
|
height: 200px;
|
} */
|
</style>
|
