<script lang="ts" setup>
|
import { reactive, toRefs, unref, watch } from 'vue';
|
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
|
import { getOcrData } from '#/api/onlineDev/visualDev';
|
|
import { ocrProps } from './props';
|
|
interface State {
|
imageUrl: any;
|
loading: boolean;
|
}
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfOcr' });
|
const props = defineProps(ocrProps);
|
const emit = defineEmits(['update:value', 'change']);
|
const state = reactive<State>({
|
imageUrl: '',
|
loading: false,
|
});
|
const { imageUrl, loading } = toRefs(state);
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
state.imageUrl = val;
|
},
|
{ immediate: true },
|
);
|
|
function onChange(url) {
|
if (!url) {
|
emit('update:value', '');
|
emit('change', '');
|
return;
|
}
|
state.loading = true;
|
const data = { url, type: props.ocrType };
|
getOcrData(data)
|
.then((res) => {
|
emit('update:value', url);
|
emit('change', url, res.data);
|
state.loading = false;
|
})
|
.catch(() => {
|
state.loading = false;
|
});
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-ocr">
|
<div class="loading" v-show="loading">
|
<LoadingOutlined />
|
</div>
|
<JnpfUploadImgSingle v-model:value="imageUrl" :disabled="disabled" tip-text="点击上传" @change="onChange" />
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.jnpf-ocr {
|
position: relative;
|
width: 100%;
|
|
.loading {
|
position: absolute;
|
top: 1px;
|
left: 1px;
|
z-index: 999;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 98px;
|
height: 98px;
|
|
.anticon {
|
font-size: 26px;
|
color: #8c939d;
|
}
|
}
|
}
|
</style>
|
