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

<template>
    <div>
        <template v-for="(item, index) in list" :key="index">
            <div class="border-bottom pd-10 c-s-p item-hover" :class="{ 'checked': selectTplId === item.id }"  @click="clickItem(item)">
                <div v-if="+item.homeFlag" class="f-s-14 f-w-6 c-333 mb-10">门户页面</div>
                <div class="d-flex">
                    <div class="w-140 h-180 bg-#ccc bg-img-item_view p-rtv" :style="{ backgroundImage: 'url('+ item?.img +')' }">
                        <img v-if="+item?.homeFlag" class="has_page_index_icon" src="@/assets/images/has_page_index_icon.png" />
                        <img @click.stop="clickSetIndex(item)" v-else class="set_index_icon" src="@/assets/images/set_index_icon.png" />
                    </div>
                    <div class="flex1 ov-hd d-flex flex-cln j-sb">
                        <div class="pd-10">
                            <el-icon v-if="item?.events?.some(item => item.eventName)"><Sunny /></el-icon>
                        </div>
                        <div class="f-s-18 c-danger u-s-n c-s-p pd2-0-10" @click.stop="$emit('delete', item)">
                            <el-icon><DeleteFilled /></el-icon>
                        </div>
                    </div>
                </div>
                <div @click.stop="changeLabel(item)" class="c-666 f-s-14 pd2-10-0 u-s-n c-s-p d-flex a-c c-666 f-s-14 btm-text">
                    <span class="mr-6">{{ item?.label }}</span>
                    <el-icon><EditPen /></el-icon>
                </div>
            </div>
        </template>
        <div class="pd-16 d-flex a-c j-c">
            <el-button @click.stop="addMeetingTpls" plain type="primary">
                <el-icon><Plus /></el-icon>
                添加页面
            </el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { httpRequests } from '@/utils/httpRequests';
const emit = defineEmits<{
    (e: 'selectItem', value: any): void,
    (e: 'addMeetingTpls'): void,
    (e: 'delete', value: any): void,
    (e: 'changeLabel', value: any): void,
    // 设置首页
    (e: 'setIndex', value: any): void,
}>();
const props = defineProps<{
    meetid: string,
    list: any[]
}>()
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
});
const addMeetingTpls = async () => {
   emit('addMeetingTpls');
};
const selectTplId = ref<string>('');
const clickItem = (item: any) => {
    selectTplId.value = item.id;
    emit('selectItem', item);
};
// 更换页面名称
const changeLabel = async (item: any) => {
   emit('changeLabel', item);
};
const clickSetIndex = async (item: any) => {
    if (+item.homeFlag) {
        return;
    }
    emit('setIndex', item)
};
</script>
<style scoped lang="scss">
.item-hover:hover {
    background-color: #fff;
}
.bg-img-item_view {
    background-size: cover;
    background-position: center;
    border: 1px solid transparent;
}
.item-hover {
    cursor: pointer;
    &:hover {
        .bg-img-item_view {
            border-color: var(--el-color-primary);
        }
        .btm-text {
            color: var(--el-color-primary);
        }
    }
    &.checked {
        .bg-img-item_view {
            border-color: var(--el-color-primary);
        }
        .btm-text {
            font-weight: 600;
            color: var(--el-color-primary);
        }
    }
}
.has_page_index_icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}
.set_index_icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
</style>