From 1059790d2a687da5772d576687dc5dd198c50284 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Sun, 29 Sep 2024 18:38:06 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=A8=A1=E7=89=88=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/template-import/index.vue          | 90 +++++++++++++++++++
 src/components/common/url-value/index.scss    | 31 -------
 src/components/common/url-value/index.vue     | 15 +++-
 .../common/url-value/url-value-dialog.vue     | 16 +++-
 src/views/layout/components/main/index.vue    | 30 +++----
 src/views/layout/index.vue                    | 33 ++++---
 6 files changed, 152 insertions(+), 63 deletions(-)
 create mode 100644 src/components/common/template-import/index.vue
 delete mode 100644 src/components/common/url-value/index.scss

diff --git a/src/components/common/template-import/index.vue b/src/components/common/template-import/index.vue
new file mode 100644
index 00000000..496468eb
--- /dev/null
+++ b/src/components/common/template-import/index.vue
@@ -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>
diff --git a/src/components/common/url-value/index.scss b/src/components/common/url-value/index.scss
deleted file mode 100644
index 9784237a..00000000
--- a/src/components/common/url-value/index.scss
+++ /dev/null
@@ -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 {
-    }
-}
diff --git a/src/components/common/url-value/index.vue b/src/components/common/url-value/index.vue
index d859c757..c7ed30d1 100644
--- a/src/components/common/url-value/index.vue
+++ b/src/components/common/url-value/index.vue
@@ -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>
diff --git a/src/components/common/url-value/url-value-dialog.vue b/src/components/common/url-value/url-value-dialog.vue
index fe8ed0be..cbc8197a 100644
--- a/src/components/common/url-value/url-value-dialog.vue
+++ b/src/components/common/url-value/url-value-dialog.vue
@@ -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>
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 5f3285da..51658776 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -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 = () => {
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index b56b7a63..512f9e0b 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -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 = () => {