<template>
|
<div class="template-import">
|
<el-form
|
ref="templateImportForm"
|
class="de-form-item"
|
:model="state.templateInfo"
|
:rules="state.templateInfoRules"
|
label-position="top"
|
>
|
<el-form-item :label="t('template_manage.template_name')" prop="name">
|
<div class="flex-template">
|
<el-input
|
v-model="state.templateInfo.name"
|
:placeholder="t('template_manage.enter_template_name_hint')"
|
clearable
|
/>
|
<el-button style="margin-left: 10px" icon="Upload" secondary @click="goFile">
|
{{ t('template_manage.import_template') }}
|
</el-button>
|
<input
|
id="input"
|
ref="filesRef"
|
type="file"
|
accept=".DET2,.DET2APP"
|
hidden
|
@change="handleFileChange"
|
/>
|
</div>
|
</el-form-item>
|
<el-row v-show="!!state.templateInfo.snapshot" class="preview" :style="classBackground" />
|
<el-form-item
|
:label="t('template_manage.select_catalog')"
|
prop="categories"
|
style="margin-top: 16px"
|
>
|
<el-select
|
v-model="state.templateInfo.categories"
|
multiple
|
style="width: 100%"
|
:popper-class="
|
templateCategories.length
|
? 'custom-category-padding'
|
: 'custom-category-empty custom-category-padding'
|
"
|
>
|
<el-option
|
v-for="option in templateCategories"
|
:key="option.id"
|
:label="option.name"
|
:value="option.id"
|
/>
|
<div class="custom-dropdown__empty">
|
<span>{{ t('template_manage.no_selectable_catalog') }}</span>
|
</div>
|
<div class="custom-option-line">
|
<div @click="doAddCategory" class="flex-align-center">
|
<el-icon>
|
<Plus></Plus>
|
</el-icon>
|
{{ t('template_manage.add_catalog') }}
|
</div>
|
</div>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<el-row> </el-row>
|
<el-row class="de-root-class">
|
<el-button secondary @click="cancel()">{{ t('commons.cancel') }}</el-button>
|
<el-button type="primary" @click="saveTemplate()">{{ t('commons.confirm') }}</el-button>
|
</el-row>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { save, nameCheck, findOne, categoryTemplateNameCheck } from '@/api/template'
|
import { computed, reactive, ref } from 'vue'
|
import { imgUrlTrans } from '@/utils/imgUtils'
|
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
|
import { useI18n } from '@/hooks/web/useI18n'
|
const emits = defineEmits(['closeEditTemplateDialog', 'refresh', 'addCategoryInfo'])
|
const { t } = useI18n()
|
const filesRef = ref(null)
|
const maxImageSize = 35000000
|
const props = defineProps({
|
pid: {
|
type: String,
|
required: true
|
},
|
templateCategories: {
|
type: Array,
|
required: true
|
},
|
optType: {
|
type: String,
|
required: true,
|
default: 'insert'
|
},
|
templateId: {
|
type: String,
|
required: false
|
}
|
})
|
|
const state = reactive({
|
categories: [],
|
nameList: [],
|
importTemplateInfo: {
|
snapshot: ''
|
},
|
templateInfoRules: {
|
name: [
|
{
|
required: true,
|
message: t('commons.input_content'),
|
trigger: 'change'
|
},
|
{
|
max: 50,
|
message: t('commons.char_can_not_more_50'),
|
trigger: 'change'
|
}
|
],
|
categories: [
|
{
|
required: true,
|
message: t('commons.input_content'),
|
trigger: 'change'
|
}
|
]
|
},
|
recover: false,
|
templateInfo: {
|
id: null,
|
level: '1',
|
pid: props.pid,
|
categories: [],
|
dvType: 'dashboard',
|
nodeType: 'template',
|
name: '',
|
templateStyle: null,
|
templateData: null,
|
dynamicData: null,
|
appData: null,
|
staticResource: null,
|
snapshot: '',
|
version: null
|
}
|
})
|
|
const classBackground = computed(() => {
|
if (state.templateInfo.snapshot) {
|
return {
|
background: `url(${imgUrlTrans(state.templateInfo.snapshot)}) no-repeat`
|
}
|
} else {
|
return {}
|
}
|
})
|
|
const cancel = () => {
|
emits('closeEditTemplateDialog')
|
}
|
|
const saveTemplate = () => {
|
if (!state.templateInfo.name) {
|
ElMessage.warning(t('chart.name_can_not_empty'))
|
return false
|
}
|
if (state.templateInfo.name.length > 50) {
|
ElMessage.warning(t('commons.char_can_not_more_50'))
|
return false
|
}
|
if (!state.templateInfo.templateData) {
|
ElMessage.warning(t('chart.template_can_not_empty'))
|
return false
|
}
|
|
if (!state.templateInfo.categories.length) {
|
ElMessage.warning(t('template_manage.please_select_catalog'))
|
return false
|
}
|
|
if (props.optType === 'insert') {
|
importTemplate()
|
} else {
|
editTemplate()
|
}
|
}
|
|
const editTemplate = () => {
|
const nameCheckRequest = {
|
pid: state.templateInfo.pid,
|
id: state.templateInfo.id,
|
name: state.templateInfo.name,
|
categories: state.templateInfo.categories,
|
optType: props.optType
|
}
|
// 全局名称校验
|
nameCheck(nameCheckRequest).then(response => {
|
if (response.data.indexOf('exist') > -1) {
|
ElMessage.warning(t('template_manage.exists_name_hint'))
|
} else {
|
save(state.templateInfo).then(() => {
|
ElMessage.success(t('template_manage.edit_success'))
|
emits('refresh', getRefreshPInfo())
|
emits('closeEditTemplateDialog')
|
})
|
}
|
})
|
}
|
|
const getRefreshPInfo = () => {
|
const refreshPid = state.templateInfo.categories[0]
|
let refreshPName = ''
|
props.templateCategories.forEach(category => {
|
if (category.id === refreshPid) {
|
refreshPName = category.name
|
}
|
})
|
return {
|
optType: 'refresh',
|
refreshPid: refreshPid,
|
refreshPName: refreshPName
|
}
|
}
|
|
const importTemplate = () => {
|
const nameCheckRequest = {
|
pid: state.templateInfo.pid,
|
name: state.templateInfo.name,
|
categories: state.templateInfo.categories,
|
optType: props.optType
|
}
|
categoryTemplateNameCheck(nameCheckRequest).then(response => {
|
if (response.data.indexOf('exist') > -1) {
|
ElMessageBox.confirm(t('template_manage.hint'), {
|
tip: t('template_manage.cover_exists_hint'),
|
confirmButtonType: 'danger',
|
type: 'warning',
|
autofocus: false,
|
showClose: false
|
}).then(() => {
|
save(state.templateInfo).then(() => {
|
ElMessage.success(t('template_manage.cover_success'))
|
emits('refresh', getRefreshPInfo())
|
emits('closeEditTemplateDialog')
|
})
|
})
|
} else {
|
// 全局名称校验
|
nameCheck(nameCheckRequest).then(response => {
|
if (response.data.indexOf('exist') > -1) {
|
ElMessage.warning(t('template_manage.exists_name_hint'))
|
} else {
|
save(state.templateInfo).then(() => {
|
ElMessage.success(t('template_manage.import_success'))
|
emits('refresh', getRefreshPInfo())
|
emits('closeEditTemplateDialog')
|
})
|
}
|
})
|
}
|
})
|
}
|
|
const handleFileChange = e => {
|
const file = e.target.files[0]
|
const reader = new FileReader()
|
if (file.size > maxImageSize) {
|
ElMessage.success(t('template_manage.template_size_hint'))
|
return
|
}
|
reader.onload = res => {
|
const result = res.target.result as string
|
state.importTemplateInfo = JSON.parse(result)
|
state.templateInfo.name = state.importTemplateInfo['name']
|
state.templateInfo.dvType = state.importTemplateInfo['dvType']
|
state.templateInfo.templateStyle = state.importTemplateInfo['canvasStyleData']
|
state.templateInfo.templateData = state.importTemplateInfo['componentData']
|
state.templateInfo.snapshot = state.importTemplateInfo.snapshot
|
state.templateInfo.dynamicData = state.importTemplateInfo['dynamicData']
|
state.templateInfo.appData = state.importTemplateInfo['appData']
|
state.templateInfo.staticResource = state.importTemplateInfo['staticResource']
|
state.templateInfo['nodeType'] = state.importTemplateInfo['nodeType'] || 'template'
|
state.templateInfo['version'] = state.importTemplateInfo['version']
|
}
|
reader.readAsText(file)
|
}
|
const goFile = () => {
|
filesRef.value.click()
|
}
|
|
const doAddCategory = () => {
|
emits('refresh', { optType: 'addCategory' })
|
}
|
|
if (props.templateId) {
|
findOne(props.templateId).then(rsp => {
|
state.templateInfo = rsp.data
|
})
|
}
|
</script>
|
|
<style scoped lang="less">
|
.my_table :deep(.el-table__row > td) {
|
/* 去除表格线 */
|
border: none;
|
padding: 0 0;
|
}
|
.my_table :deep(.el-table th.is-leaf) {
|
/* 去除上边框 */
|
border: none;
|
}
|
.my_table :deep(.el-table::before) {
|
/* 去除下边框 */
|
height: 0;
|
}
|
|
.de-root-class {
|
margin-top: 24px;
|
justify-content: flex-end;
|
}
|
.preview {
|
margin-top: -8px;
|
border: 1px solid #e6e6e6;
|
height: 300px !important;
|
overflow: auto;
|
background-size: 100% 100% !important;
|
border-radius: 4px;
|
}
|
.preview-show {
|
border-left: 1px solid #e6e6e6;
|
height: 300px;
|
background-size: 100% 100% !important;
|
}
|
</style>
|
|
<style lang="less">
|
.flex-template {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.el-input {
|
margin-right: 2px;
|
flex: 1;
|
}
|
}
|
|
.custom-option-line {
|
width: 100%;
|
position: absolute;
|
bottom: 0;
|
height: 42px;
|
display: flex;
|
align-items: center;
|
background: #fff;
|
|
&::before {
|
content: '';
|
position: absolute;
|
height: 1px;
|
width: calc(100% - 22px);
|
left: 11px;
|
top: 0;
|
background-color: #1f232926;
|
}
|
|
.flex-align-center {
|
width: 100%;
|
height: 32px;
|
color: var(--el-input-icon-color);
|
cursor: pointer;
|
padding-left: 11px;
|
font-size: 14px;
|
font-weight: 400;
|
line-height: 22px;
|
|
&:hover {
|
background-color: var(--ed-fill-color-light);
|
}
|
.ed-icon {
|
font-size: 16px;
|
margin: 0 8px 0 0;
|
}
|
}
|
}
|
|
.custom-category-empty {
|
.ed-scrollbar {
|
display: inherit !important;
|
}
|
|
.custom-dropdown__empty {
|
display: inherit !important;
|
}
|
|
.ed-select-dropdown__empty {
|
display: none !important;
|
}
|
}
|
|
.custom-category-padding {
|
.ed-select-dropdown__list {
|
padding-bottom: 42px !important;
|
}
|
}
|
|
.custom-dropdown__empty {
|
display: none;
|
margin-left: 12px;
|
font-size: 14px;
|
height: 32px;
|
line-height: 32px;
|
color: rgba(143, 149, 158, 1);
|
}
|
</style>
|
