sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.模版导入

v1.0.0
sws 2024-09-29 18:38:06 +08:00
parent 8256a1c22c
commit 1059790d2a
6 changed files with 152 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/common/template-import/index.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<!-- 模版导入 -->
<el-dialog v-model="dialogVisible" class="radius-lg" width="1168" draggable append-to-body :close-on-click-modal="false" @close="close_event">
<template #header>
<div class="title center re">
<div class="tc size-16 fw">模版导入</div>
</div>
</template>
<div class="url-value-content ptb-16 flex-row">
<el-tabs v-model="temp_active" class="wh flex-1">
<el-tab-pane label="本地导入" name="1" class="h flex-row jc-c align-c">
<div class="import-content">
<el-upload action="#" :accept="exts_text" :show-file-list="false" :auto-upload="false" :on-change="upload_change">
<template #trigger>
<div class="import-btn">
<icon name="upload" color="error"></icon>
</div>
</template>
</el-upload>
<div class="cr-c size-12 flex-col gap-10 mt-20">
<p>1. 选择已下载的diy设计zip包</p>
<p>2. 导入将自动新增一条数据</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="模版市场" name="2"> </el-tab-pane>
</el-tabs>
</div>
<template v-if="temp_active == '1'" #footer>
<span class="dialog-footer">
<el-button class="plr-28 ptb-10" @click="close_event">取消</el-button>
<el-button class="plr-28 ptb-10" type="primary" @click="confirm_event">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type { UploadFile, UploadFiles } from 'element-plus';
const app = getCurrentInstance();
/**
* @description: 模版导入
* @param dialogVisible {Boolean} 弹窗显示
* @param type{String} 链接类型为空数组则表示无限制，全部可用，传过来则表示传的值可用
* @param multiple{Boolean} 是否多选 默认单选 只生效 商品页面 goods/ 文章页面 article/ DIY页面 diy/ 设计页面 design/ 自定义页面 custom-view/ 品牌页面 brand
* @return {*} update:dialogVisible
*/
const props = defineProps({
type: {
type: Array as PropType<string[]>,
default: () => [],
},
});
const dialogVisible = defineModel({ type: Boolean, default: false });
const temp_active = ref('1');
//导入
const exts_text = ref('.zip');
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const upload_change = async (uploadFile: UploadFile) => {
console.log('文件状态改变时的钩子', uploadFile);
};
// 取消回调
const emit = defineEmits(['close']);
const close_event = () => {
dialogVisible.value = false;
};
// 确认回调
const confirm_event = () => {};
</script>
<style lang="scss" scoped>
.url-value-content {
height: 57.3rem;
}
.import-content {
text-align: center;
.import-btn {
width: 14rem;
height: 14rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 7rem;
color: $cr-primary;
background: #e1f0ff;
border-radius: 0.2rem;
border: 0.1rem dashed $cr-primary;
}
}
</style>

31
src/components/common/url-value/index.scss
View File

@ -1,31 +0,0 @@
.url-value-input {
width: 100%;
height: 3.2rem;
line-height: 3.2rem;
cursor: pointer;
position: relative;
.value-input-icon {
position: absolute;
right: 0;
width: 3.4rem;
z-index: 1;
text-align: center;
}
}
.url-value-content {
height: 57.3rem;
gap: 6rem;
.left-content {
width: 22.5rem;
.el-menu-item {
height: 4rem;
line-height: 4rem;
&.is-active {
background: var(--el-menu-hover-bg-color);
color: #333;
}
}
}
.right-content {
}
}

15
src/components/common/url-value/index.vue
View File

@ -58,5 +58,18 @@ const model_value_call_back = (value: any[]) => {
};
</script>
<style lang="scss" scoped>
@import 'index.scss';
.url-value-input {
width: 100%;
height: 3.2rem;
line-height: 3.2rem;
cursor: pointer;
position: relative;
.value-input-icon {
position: absolute;
right: 0;
width: 3.4rem;
z-index: 1;
text-align: center;
}
}
</style>

16
src/components/common/url-value/url-value-dialog.vue
View File

@ -223,5 +223,19 @@ const confirm_event = () => {
//#endregion 链接确认回调 -----------------------------------------------end
</script>
<style lang="scss" scoped>
@import 'index.scss';
.url-value-content {
height: 57.3rem;
gap: 6rem;
.left-content {
width: 22.5rem;
.el-menu-item {
height: 4rem;
line-height: 4rem;
&.is-active {
background: var(--el-menu-hover-bg-color);
color: #333;
}
}
}
}
</style>

30
src/views/layout/components/main/index.vue
View File

@ -7,7 +7,7 @@
<VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" handle=".is-drag" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :sort="false" :force-fallback="true">
<template v-for="item in com.data" :key="item.key">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="该组件只可以点击添加, 并且只能添加一次" placement="top" :disabled="!['tabs', 'tabs-carousel'].includes(item.key)">
<div :class="['item', {'is-drag': !['tabs', 'tabs-carousel'].includes(item.key) }]" @click.stop="draggable_click(item)">
<div :class="['item', { 'is-drag': !['tabs', 'tabs-carousel'].includes(item.key) }]" @click.stop="draggable_click(item)">
<div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
<div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
<img class="img radius-xs" :src="url_computer(item.key)" />
@ -51,14 +51,15 @@
<div class="model">
<div class="model-content">
<div class="acticons">
<el-button size="large" class="" @click="page_settings">页面设置</el-button>
<el-button size="large" class="" @click="export_click">导出</el-button>
<el-upload ref="uploadRef" class="upload-demo" action="#" :accept="exts_text" :show-file-list="false" :auto-upload="false" :on-change="upload_change">
<el-button size="large" @click="page_settings">页面设置</el-button>
<el-button size="large" @click="export_click">导出</el-button>
<!-- <el-upload action="#" :accept="exts_text" :show-file-list="false" :auto-upload="false" :on-change="upload_change">
<template #trigger>
<el-button size="large">导入</el-button>
</template>
</el-upload>
<el-button size="large" class="" @click="clear_click">清空</el-button>
</el-upload> -->
<el-button size="large" @click="import_click">导入</el-button>
<el-button size="large" @click="clear_click">清空</el-button>
</div>
<!-- 拖拽区 -->
<div ref="scrollTop" class="model-drag">
@ -66,7 +67,7 @@
<page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" @page_settings="page_settings"></page-settings>
<div class="model-wall" :style="content_style">
<div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
<div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true);" @del="del"></div-content>
<div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true)" @del="del"></div-content>
<div v-if="tabs_data.length > 0" class="seat"></div>
<VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
<div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
@ -84,8 +85,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, get_math, gradient_computer, padding_computer, radius_computer } from '@/utils';
import type { UploadFile, UploadFiles } from 'element-plus';
import { background_computer, get_math, gradient_computer, padding_computer } from '@/utils';
import { cloneDeep, isEmpty } from 'lodash';
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
import defaultSettings from './index';
@ -227,7 +227,7 @@ const draggable_click = (item: componentsData) => {
ElMessage.error('选项卡轮播不能与选项卡同时存在');
}
}
}
};
// 复制
const clone_item_com_data = (item: commonComponentData) => {
return {
@ -459,13 +459,9 @@ const set_tabs_event = (choose: Boolean) => {
const export_click = () => {
emits('export');
};
//导入
const exts_text = ref('.zip');
// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const upload_change = async (uploadFile: UploadFile) => {
// console.log('文件状态改变时的钩子', uploadFile);
emits('import', uploadFile);
// 导入
const import_click = () => {
emits('import');
};
// 清空列表
const clear_click = () => {

33
src/views/layout/index.vue
View File

@ -13,6 +13,7 @@
</template>
</template>
<preview v-model="preview_dialog" :data-id="diy_id"></preview>
<template-import v-model="import_temp_visible_dialog" @confirm="handleImportConfirm"></template-import>
</div>
</template>
@ -98,21 +99,27 @@ const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, foo
// 生成随机id
key.value = Math.random().toString(36).substring(2);
};
const import_temp_visible_dialog = ref(false);
// 导入数据
const import_data_event = (uploadFile: UploadFile) => {
// 截取document.location.search字符串内id/后面的所有字段
const form_data = new FormData();
if (get_id()) {
form_data.append('id', get_id());
}
if (uploadFile && uploadFile.raw) {
form_data.append('file', uploadFile?.raw);
}
DiyAPI.import(form_data).then((res: any) => {
ElMessage.success(res.msg);
history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
init();
});
// // 截取document.location.search字符串内id/后面的所有字段
// const form_data = new FormData();
// if (get_id()) {
// form_data.append('id', get_id());
// }
// if (uploadFile && uploadFile.raw) {
// form_data.append('file', uploadFile?.raw);
// }
// DiyAPI.import(form_data).then((res: any) => {
// ElMessage.success(res.msg);
// history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
// init();
// });
import_temp_visible_dialog.value = true;
};
const handleImportConfirm = () => {
// 导入成功
console.log('handleImportConfirm');
};
// 导出数据
const export_data_event = () => {