digital-medicine-front/src/views/training/models/meeting-tpl-h5.vue

<template>
    <template v-if="form.img">
        <div class="flex1" style="overflow: auto;">
            <TelViewTem @selectArea="selectArea" :enableDraw="enableDraw" bgColor="#f7f7f7" :bgSrc="form.img">
                <template v-for="(item, index) in form?.events" :key="index">
                    <DragResizeRotate v-model="form.events[index]" @activated="activated" @deactivated="deactivated"></DragResizeRotate>
                </template>
            </TelViewTem>
        </div>
    </template>
    <template v-else>
        <div @click="addImgBg" class="bg-#f7f7f7 flex1 w-750 mb-10 c-s-p d-flex a-c j-c">
            <div class="c-666 f-s-18 u-s-n">点击此处上传图片</div>
        </div>
    </template>
</template>
<script setup lang="ts">
import { importFileGetUrls } from '@/utils/models';

const props = defineProps<{
    modelValue: any
}>();
const form = ref<any>(props.modelValue || { img: '', events: []});
const enableDraw = ref(true);
const addInfo = () => {
    form.value.events.push({ id: new Date().getTime() + '_btn_drap' });
}
const selectArea = (area: any) => {
    if (area.rect.w < 20 || area.rect.h < 20) {
        return;
    }
    form.value.events.push({ id: new Date().getTime() + '_btn_drap', ...area.rect });
}
const activated = () => {
    enableDraw.value = false;
}
const deactivated = () => {
    enableDraw.value = true;
}
const clickInfo = () => {
    console.log(form.value);
}
const addImgBg = async () => {
  const res: any[] = await importFileGetUrls(['png', 'jpg', 'jpeg'], false);
  if (res.length) {
     res.forEach(element => {
        if (element.data?.url) {
            form.value.img = element.data.url;
        }
     });
  }
}
</script>
<style scoped lang="scss"></style>