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" @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" :style="{ backgroundImage: 'url('+ item?.img +')' }"></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">
                    <span class="c-666 f-s-14 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
}>();
const props = defineProps<{
    meetid: string,
    list: any[]
}>()
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
});
const addMeetingTpls = async () => {
   emit('addMeetingTpls');
};
const clickItem = (item: any) => {
    emit('selectItem', item);
};
// 更换页面名称
const changeLabel = async (item: any) => {
   emit('changeLabel', item);
};
</script>
<style scoped lang="scss">
.item-hover:hover {
    background-color: #fff;
}
.bg-img-item_view {
    background-size: cover;
    background-position: center;
}
</style>