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

<template>
    <div class="pd-16">
        <div class="f-s-16 c-333 f-w-6 mb-16">设置事件</div>
        <el-form ref="enentFormRef" :model="form" label-position="left" :rules="rules" label-width="auto">
            <el-form-item label="触发事件" prop="eventName">
                <el-select v-model="form.eventName" @change="changeEventName" placeholder="请选择事件类型">
                    <el-option v-for="item in page_event" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <template v-if="form.eventName === 'callEvent'">
                <el-form-item label="电话号码" prop="params.phone">
                    <el-input v-model="form.params.phone" placeholder="请输入电话号码"></el-input>
                </el-form-item>
            </template>
            <template v-if="form.eventName === 'msgEvent'">
                <el-form-item label="提示内容" prop="params.msg">
                    <el-input v-model="form.params.msg" placeholder="请输入提示内容"></el-input>
                </el-form-item>
            </template>
            <template v-if="form.eventName === 'viewEvent'">
                <el-form-item label="文件上传" prop="params.file" label-position="top">
                    <FileUpload v-model="form.params.file" format="object" :fileSize="100"></FileUpload>
                </el-form-item>
            </template>
            <template v-if="form.eventName === 'gotoEvent'">
                <el-form-item label="页面" prop="params.pageId" label-position="top">
                    <el-button v-if="!form.params.pageId" type="primary" @click="showSelectMeeting = true">选择页面</el-button>
                    <div v-if="form.params.pageId" class="pt-10">
                        <div class="w-160 p-rtv">
                            <div class="delete-icon-tpl c-s-p c-danger f-s-20" @click="form.params.pageId = null; selectPageInfo = null;">
                                <el-icon><CircleCloseFilled /></el-icon>
                            </div>
                            <div class="h-180 bg-#ccc bg-img-item_view" :style="{ backgroundImage: 'url('+ selectPageInfo?.img +')' }"></div>
                            <div class="f-s-14 pd2-10-0 btm-text">{{ selectPageInfo?.label }}</div>
                        </div>
                    </div>
                </el-form-item>
            </template>
            <template v-if="form.eventName === 'navigateEvent'">
                <el-form-item label="地址导航" prop="params.wepArea">
                    <SelectWepArea v-model="form.params.wepArea" placeholder="选择地址"></SelectWepArea>
                </el-form-item>
            </template>
            <template v-if="form.eventName === 'linkEvent'">
                <el-form-item label="跳转链接" prop="params.linkType">
                    <el-radio-group v-model="form.params.linkType">
                        <el-radio label="内链">内部链接</el-radio>
                        <el-radio label="外链">外链链接</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="链接地址" prop="params.url">
                    <el-input v-model="form.params.url" placeholder="请输入链接地址"></el-input>
                </el-form-item>
            </template>
            <el-form-item>
                <div class="flex1 d-flex j-ed pt-40">
                    <el-button @click="clearForm">清除</el-button>
                    <el-button @click="save" type="primary">保存</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
    <SelectMeetingTplPage v-model:show="showSelectMeeting" :list="list" :pageId="form.params.pageId" @success="selectSuccess"></SelectMeetingTplPage>
</template>
<script setup lang="ts">
import { SelectMeetingTplPage } from '.';
const props = defineProps<{
    modelValue: any;
    dict: any;
    list: any[];
}>();
const { page_event } = toRefs<any>(props.dict);
const enentFormRef = ref<any>(null);
const showSelectMeeting = ref(false);
const emit = defineEmits<{
    (e: 'update:modelValue', value: any): void;
    (e: 'save', value: any): void;
}>();
const rules = ref<any>({
    eventName: [{ required: true, message: '请选择触发事件', trigger: 'change' }],
    'params.phone': [
        { required: true, message: '请输入电话号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
    ],
    'params.file': [{ required: true, message: '请上传文件', trigger: 'change' }],
    'params.msg': [{ required: true, message: '请输入提示内容', trigger: 'change' }],
    'params.pageId': [{ required: true, message: '请选择页面', trigger: 'change' }],
    'params.wepArea': [{ required: true, message: '请选择地址', trigger: 'change' }],
    'params.linkType': [{ required: true, message: '请选择链接类型', trigger: 'change' }],
    'params.url': [
        { required: true, message: '请输入跳转链接', trigger: 'blur' },
        { type: 'url', message: '请输入正确的链接地址', trigger: 'blur' }
    ]
});
const form = ref<any>(props.modelValue || {});
const save = async () => {
    await enentFormRef.value.validate();
    const value = {  ...form.value, id: form.value?.id || new Date().getTime() + '_btn_drap', isSave: '1' };
    emit('update:modelValue', value);
    emit('save', value);
};
const selectPageInfo = computed<any>(() => {
    if (!form.value.params || !form.value.params.pageId) return null;
    return props.list.find((item) => item.id === form.value.params.pageId) || null;
});
const selectSuccess = (pageId: string) => {
    form.value.params.pageId = pageId;
};

const changeEventName = (val: string) => {
    form.value.params = {};
};
const clearForm = () => {
    enentFormRef.value.resetFields();
};
watch(
    () => props.modelValue,
    (val) => {
        form.value = val || {};
    },
    { deep: true }
);
</script>
<style lang="scss" scoped>
.bg-img-item_view {
    background-size: cover;
    background-position: center top;
    border: 1px solid transparent;
}
.delete-icon-tpl {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>