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

<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width" :z-index="1002">
        <div class="ov-hd">
            <el-row :gutter="30">
                <template v-for="(item, index) in list" :key="index">
                    <el-col :span="4">
                        <div class="pd-10 w-160 c-s-p item-hover mb-30" @click="clickItem(item)" :class="{ checked: checkedid === item.id }">
                            <div class="h-180 bg-#ccc bg-img-item_view" :style="{ backgroundImage: 'url('+ item?.img +')' }"></div>
                            <div class="f-s-14 pd2-10-0 btm-text">{{ item?.label }}</div>
                        </div>
                    </el-col>
                </template>
            </el-row>
        </div>
        <template #footer>
            <div class="d-flex a-c j-ed">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="save" type="primary">保存</el-button>
            </div>
        </template>
    </vxe-modal>
</template>

<script setup name="lmmeeting-meeting-add" lang="ts">
import { cloneDeep } from 'lodash';
import { onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
// 需要添加以下导入
import { propTypes } from '@/utils/propTypes';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
    show: propTypes.bool.def(false),
    info: propTypes.array.def([]),
    dict: propTypes.object.def({}),
    width: propTypes.number.def(1100),
    title: propTypes.string.def('选择跳转页面'),
    list: propTypes.any.def([]),
    pageId: propTypes.string.def('')
});
const dialogVisible = ref(false);
const emit = defineEmits(['update:show', 'close', 'success', 'update:info']);
const close = () => {
    emit('update:show', false);
    emit('close', false);
};
const checkedid = ref(props.pageId || '');
const formRef = ref();
const cancel = () => {
    emit('update:show', false);
    emit('close', false);
};
const save = () => {
    console.log('----');
    emit('success', checkedid.value);
    emit('update:show', false);
};
const clickItem = (item: any) => {
    checkedid.value = item.id || '';
};
onMounted(() => {});
watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    },
    { immediate: true }
);
watch(
    () => props.pageId,
    (val) => {
        checkedid.value = val || '';
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.bg-img-item_view {
    background-size: cover;
    background-position: center top;
    border: 1px solid transparent;
}
.item-hover {
    cursor: pointer;
    &:hover {
        background-color: rgba(#2A6D52, .3);
        .bg-img-item_view {
            border-color: var(--el-color-primary);
        }
        .btm-text {
            color: var(--el-color-primary);
        }
    }
    &.checked {
        background-color: rgba(#2A6D52, .3);
        .bg-img-item_view {
            border-color: var(--el-color-primary);
        }
        .btm-text {
            font-weight: 600;
            color: var(--el-color-primary);
        }
    }
}
</style>