<template xmlns:el-col="http://www.w3.org/1999/html">
|
<div class="de-template-list">
|
<el-empty
|
v-if="!templateListComputed.length && state.templateFilterText === ''"
|
:image="NoneImage"
|
:description="t('template_manage.no_catalog')"
|
/>
|
<el-empty
|
v-if="!templateListComputed.length && state.templateFilterText !== ''"
|
:image="NothingImage"
|
:description="t('template_manage.relevant_content_found')"
|
/>
|
<ul>
|
<li
|
v-for="ele in templateListComputed"
|
:key="ele.name"
|
:class="[{ select: state.activeTemplate === ele.id }]"
|
@click="nodeClick(ele)"
|
>
|
<span class="text-template-overflow" :title="ele.name">{{ ele.name }}</span>
|
<span class="more" @click.stop>
|
<el-dropdown trigger="click" @command="type => clickMore(type, ele)">
|
<el-icon class="el-icon-more"><MoreFilled /></el-icon>
|
<template #dropdown>
|
<el-dropdown-menu class="de-template-dropdown">
|
<el-dropdown-item command="edit">
|
<el-icon class="opt-icon"><EditPen /></el-icon>
|
<span class="opt-name">{{ t('visualization.rename') }}</span>
|
</el-dropdown-item>
|
<el-dropdown-item command="delete">
|
<el-icon class="opt-icon"><Delete /></el-icon>
|
<span class="opt-name">{{ t('visualization.delete') }}</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { computed, reactive } from 'vue'
|
import NoneImage from '@/assets/none.png'
|
import NothingImage from '@/assets/nothing.png'
|
import { ElMessageBox } from 'element-plus-secondary'
|
const { t } = useI18n()
|
|
const emits = defineEmits([
|
'showCurrentTemplate',
|
'showTemplateEditDialog',
|
'categoryDelete',
|
'categoryEdit',
|
'templateImport'
|
])
|
|
const props = defineProps({
|
templateType: {
|
type: String,
|
default: ''
|
},
|
templateList: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
}
|
})
|
|
const state = reactive({
|
templateFilterText: '',
|
activeTemplate: '',
|
noneImg: '@/assets/none.png',
|
nothingImg: '@/assets/nothing.png'
|
})
|
|
const templateListComputed = computed(() => {
|
return props.templateList.filter(ele => ele['id'] !== '1')
|
})
|
|
const clickMore = (type, data) => {
|
switch (type) {
|
case 'edit':
|
categoryEdit(data)
|
break
|
case 'delete':
|
categoryDelete(data)
|
break
|
case 'import':
|
templateImport(data)
|
break
|
}
|
}
|
const nodeClick = ({ id, name }) => {
|
state.activeTemplate = id
|
emits('showCurrentTemplate', id, name)
|
}
|
|
const categoryDelete = template => {
|
ElMessageBox.confirm(t('template_manage.delete_catalog_hint'), {
|
tip: t('template_manage.delete_catalog_tip'),
|
confirmButtonType: 'danger',
|
confirmButtonText: t('common.delete'),
|
type: 'warning',
|
autofocus: false,
|
showClose: false
|
}).then(() => {
|
emits('categoryDelete', template.id)
|
})
|
}
|
const categoryEdit = template => {
|
emits('categoryEdit', template)
|
}
|
const templateImport = template => {
|
emits('templateImport', template.id)
|
}
|
|
defineExpose({
|
nodeClick
|
})
|
</script>
|
|
<style scoped lang="less">
|
.de-template-list {
|
height: 100%;
|
position: relative;
|
|
ul {
|
margin: 0px 0 0 0;
|
padding: 0;
|
overflow-y: auto;
|
max-height: 100%;
|
}
|
|
li {
|
list-style: none;
|
width: 100%;
|
box-sizing: border-box;
|
height: 40px;
|
padding: 0 30px 0 12px;
|
display: flex;
|
align-items: center;
|
border-radius: 4px;
|
color: var(--deTextPrimary, #1f2329);
|
font-family: var(--de-custom_font, 'PingFang');
|
font-style: normal;
|
font-weight: 500;
|
font-size: 14px;
|
cursor: pointer;
|
position: relative;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
.text-template-overflow {
|
display: inline-block;
|
max-width: 87%;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.folder {
|
color: #8f959e;
|
margin-right: 9px;
|
}
|
|
.more {
|
position: absolute;
|
top: 50%;
|
right: 10px;
|
transform: translateY(-50%);
|
display: none;
|
|
.el-icon-more {
|
width: 24px;
|
height: 24px;
|
line-height: 24px;
|
text-align: center;
|
font-size: 12px;
|
color: #646a73;
|
cursor: pointer;
|
}
|
|
.el-icon-more:hover {
|
background: rgba(31, 35, 41, 0.1);
|
border-radius: 4px;
|
}
|
|
.el-icon-more:active {
|
background: rgba(31, 35, 41, 0.2);
|
border-radius: 4px;
|
}
|
}
|
|
&:hover {
|
background: rgba(31, 35, 41, 0.1);
|
|
.more {
|
display: block;
|
}
|
}
|
}
|
|
li.select {
|
background: var(--ed-color-primary-1a, #e0eaff) !important;
|
color: var(--ed-color-primary, #3370ff) !important;
|
}
|
|
.de-btn-fix {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
}
|
|
.de-template-dropdown {
|
margin-top: 0 !important;
|
|
.popper__arrow {
|
display: none !important;
|
}
|
}
|
|
.sense {
|
width: 20px;
|
height: 20px;
|
}
|
|
.custom-line {
|
margin: 4px;
|
background: rgba(31, 35, 41, 0.15);
|
border: 0;
|
height: 1px;
|
}
|
|
.opt-icon {
|
font-size: 16px;
|
color: rgba(100, 106, 115, 1);
|
}
|
.opt-name {
|
font-weight: 400;
|
font-size: 14px;
|
line-height: 22px;
|
margin-left: 3px;
|
color: rgba(31, 35, 41, 1);
|
}
|
</style>
|
