107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||
|
|
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
|
||
|
|
import { getInputValue } from "@/utils/parseSQL";
|
||
|
|
import { formatDate } from "@/utils/filters";
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
dataResult?: any;
|
||
|
|
dataType?: any;
|
||
|
|
dataQuery?: any;
|
||
|
|
layout?: string;
|
||
|
|
label?: string;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const LAYOUT_PARSE = computed(() => {
|
||
|
|
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
|
||
|
|
return Object.assign({}, designObject);
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits(["selectComponent", "dropData"]);
|
||
|
|
|
||
|
|
const selectComponent = () => {
|
||
|
|
emit("selectComponent");
|
||
|
|
};
|
||
|
|
|
||
|
|
const parseData = computed(() => {
|
||
|
|
if (!props.dataResult) return;
|
||
|
|
const result = getInputValue(props.dataResult, "OBJECT");
|
||
|
|
return result;
|
||
|
|
});
|
||
|
|
|
||
|
|
const drop = (e: any) => {
|
||
|
|
if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
|
||
|
|
const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
|
||
|
|
const { dataType, dataResult } = JSON.parse(data);
|
||
|
|
const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
|
||
|
|
emit("dropData", {
|
||
|
|
dataType,
|
||
|
|
dataResult,
|
||
|
|
dataQuery: dataQuery,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
|
||
|
|
<div class="article_miss">
|
||
|
|
<template v-if="parseData">
|
||
|
|
<div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
|
||
|
|
<div class="article_miss_content">
|
||
|
|
<h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
|
||
|
|
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div v-else class="empty-box"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-html="LAYOUT_PARSE.styleClasses"></div>
|
||
|
|
</article>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.article_miss {
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
.article_miss_thumb {
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
position: relative;
|
||
|
|
border-radius: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.article_miss_content {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
bottom: -30px;
|
||
|
|
background-color: rgba(255, 93, 2, 0.7);
|
||
|
|
backdrop-filter: blur(2px);
|
||
|
|
width: 80%;
|
||
|
|
left: 10%;
|
||
|
|
padding: 16px 10px;
|
||
|
|
border-radius: 8px;
|
||
|
|
h3 {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 130%;
|
||
|
|
text-align: center;
|
||
|
|
// margin-bottom: 12px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.empty-box {
|
||
|
|
background-color: #409eff;
|
||
|
|
min-height: 60px;
|
||
|
|
height: 100%;
|
||
|
|
i {
|
||
|
|
font-size: 60px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|