<script setup lang="ts">
|
import { computed } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { urlToBase64 } from '@jnpf/utils';
|
|
const props = defineProps(['floatImage']);
|
|
const globSetting = useGlobSetting();
|
const getActionPrefix = computed(() => globSetting.reportApiURL);
|
const imageSourceList = [
|
{ fullName: '本地上传', id: 1 },
|
{ fullName: 'URL路径', id: 2 },
|
];
|
|
function onSourceChange(type) {
|
props.floatImage.imageType = Number(type) === 2 ? 'URL' : 'BASE64';
|
props.floatImage.option.src = '';
|
}
|
function onChange(val) {
|
urlToBase64(getActionPrefix.value + val).then((base64) => {
|
props.floatImage.imageType = 'BASE64';
|
props.floatImage.option.src = base64;
|
});
|
}
|
</script>
|
|
<template>
|
<a-collapse-panel>
|
<template #header>基础设置</template>
|
<a-form-item label="图片来源">
|
<jnpf-radio
|
v-model:value="floatImage.option.source"
|
:options="imageSourceList"
|
option-type="button"
|
button-style="solid"
|
@change="onSourceChange"
|
class="right-radio-more" />
|
</a-form-item>
|
<a-form-item v-if="floatImage.option.source == 2">
|
<template #label>图片地址<BasicHelp text="地址以http://或https://为开头" /></template>
|
<a-input v-model:value="floatImage.option.src" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item label="上传图片" v-else>
|
<JnpfUploadImgSingle v-model:value="floatImage.option.src" :action-prefix="getActionPrefix" action="/api/Report/data/upload/file" @change="onChange" />
|
</a-form-item>
|
</a-collapse-panel>
|
</template>
|