1.新增预览功能

src/components/base/qrcode/index.vue

@@ -13,7 +13,7 @@
                 </template>
             </el-image>
         </div>
-        <div v-if="src !== ''" class="flex-row align-c gap-10 size-12">
+        <div v-if="src !== '' && isSrc" class="flex-row align-c gap-10 size-12">
             {{ src }}
             <div class="copy" @click="clipboard_event">复制</div>
         </div>
@@ -27,6 +27,10 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    isSrc: {
+        type: Boolean,
+        default: true,
+    },
     isMask: {
         type: Boolean,
         default: false,

src/components/common/preview/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <el-dialog v-model="dialog_visible" class="radius-lg" width="1168" draggable :close-on-click-modal="false" append-to-body>
+        <template #header>
+            <div class="title re">
+                <div class="middle size-16 fw">预览</div>
+            </div>
+        </template>
+        <div class="flex-row pt-16 iframe-content">
+            <iframe :src="new_link" width="100%" height="100%" frameborder="0"></iframe>
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { get_cookie } from '@/utils';
+const props = defineProps({
+    dataId: {
+        type: String,
+        default: '',
+    },
+});
+const dialog_visible = defineModel({ type: Boolean, default: false });
+const new_link = ref('');
+const index = window.location.href.lastIndexOf('?s=');
+const pro_url = window.location.href.substring(0, index);
+// 如果是本地则使用静态tonken如果是线上则使用cookie的token
+const cookie = get_cookie('admin_info');
+const token = ref('');
+onMounted(async () => {
+    if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
+        let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../../../temp.d.ts' : '../../../../temp_pro.d');
+        token.value = '&token=' + temp_data.default.temp_token;
+    } else {
+        if (cookie) {
+            token.value = '&token=' + JSON.parse(cookie).token;
+        }
+    }
+});
+// 监听dialog_visible
+watch(
+    () => dialog_visible.value,
+    (newVal) => {
+        if (newVal) {
+            new_link.value = (import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url) + '?s=diy/preview/id/' + props.dataId + '&system_type=default' + token.value;
+        }
+    }
+);
+</script>
+<style lang="scss" scoped>
+.iframe-content {
+    height: 60rem;
+}
+</style>

src/components/common/upload/index.scss

@@ -154,6 +154,7 @@
         background: transparent;
         border: 1px solid #dddddd;
         display: flex;
+        border-radius: 0.2rem;
         justify-content: center;
         align-items: center;
         .upload-btn-bottom-text {
@@ -169,6 +170,8 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            border-bottom-left-radius: 0.1rem;
+            border-bottom-right-radius: 0.1rem;
         }
     }
     &-style-2 {

src/components/common/upload/index.vue

@@ -188,7 +188,7 @@
                         </div>
                     </template>
                     <template v-else>
-                        <el-image :src="item.url" fit="contain" class="w h">
+                        <el-image :src="item.url" fit="contain" class="w h radius-xs">
                             <template #error>
                                 <div class="bg-f5 img flex-row jc-c align-c radius h w">
                                     <icon name="error-img" :size="Number(size) / 2 + ''" color="9"></icon>

src/utils/index.ts

@@ -341,7 +341,7 @@ export const tabs_style = (color: string, style: string | number | boolean | und
  * @param directory {string} - 资源目录名称
  * @returns {Promise<string>} 返回一个Promise，解析为包含资源URL的字符串
  */
-export const online_url = async (directory: string) => {
+export const online_url = async (directory: string = '') => {
     if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
         let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../temp.d' : '../../temp_pro.d');
         return temp_data.default.temp_attachment_host + directory;

src/views/layout/components/navbar/index.vue

@@ -37,7 +37,7 @@
                 <el-form-item label="描述">
                     <el-input v-model="form.describe" placeholder="请输入描述" :rows="4" type="textarea" clearable />
                 </el-form-item>
-                <el-form-item label="开关">
+                <el-form-item label="状态">
                     <el-switch v-model="form.is_enable" active-value="1" inactive-value="0"></el-switch>
                 </el-form-item>
             </el-form>

src/views/layout/index.vue

@@ -2,7 +2,7 @@
     <div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
         <template v-if="!loading_content">
             <template v-if="!is_empty">
-                <navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
+                <navbar v-model="form.model" @preview="preview_event" @save="save_event" @save-close="save_close_event" />
                 <div class="app-wrapper-content flex-row">
                     <app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update" @import="import_data_event" @export="export_data_event"></app-main>
                     <settings :key="key" :value="diy_data_item"></settings>
@@ -12,6 +12,7 @@
                 <no-data height="100vh" img-width="260px" size="16px" text="编辑数据有误"></no-data>
             </template>
         </template>
+        <preview v-model="preview_dialog" :data-id="diy_id"></preview>
     </div>
 </template>
 
@@ -110,18 +111,7 @@ const import_data_event = (uploadFile: UploadFile) => {
     });
 };
 const export_data_event = () => {
-    if (get_id()) {
+    save_formmat_form_data(form.value, false, true);
-        ElMessageBox.confirm('导出前需先保存最新数据，是否继续？', '提示')
-            .then(() => {
-                const index = window.location.href.lastIndexOf('?s=');
-                const pro_url = window.location.href.substring(0, index);
-                const new_url = import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url;
-                window.open(new_url + '?s=diyapi/diydownload/id/' + get_id() + '.html', '_blank');
-            })
-            .catch(() => {});
-    } else {
-        ElMessage.warning('请先保存,再导出');
-    }
 };
 //#region 页面初始化数据 ---------------------start
 // 页面加载
@@ -172,16 +162,18 @@ const loading_event = (count: number) => {
 //#endregion 页面初始化数据 ---------------------end
 
 //#region 顶部导航回调方法 ---------------------start
-const preview = () => {
+const preview_dialog = ref(false);
-    console.log('预览');
+const diy_id = ref('');
+const preview_event = () => {
+    save_formmat_form_data(form.value, false, false, true);
 };
-const save = () => {
+const save_event = () => {
     save_formmat_form_data(form.value);
 };
-const save_close = () => {
+const save_close_event = () => {
     save_formmat_form_data(form.value, true);
 };
-const save_formmat_form_data = (data: diy_data_item, close: boolean = false) => {
+const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_export: boolean = false, is_preview: boolean = false) => {
     const clone_form = cloneDeep(data);
     clone_form.header.show_tabs = '1';
     clone_form.footer.show_tabs = '0';
@@ -206,7 +198,11 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false) =>
     // 数据改造
     const new_data = diy_data_transfor_form_data(clone_form);
     DiyAPI.save(new_data).then((res) => {
-        ElMessage.success('保存成功');
+        if (is_export || is_preview) {
+            // 如果是导出或预览模式，则不显示保存成功的消息
+        } else {
+            ElMessage.success('保存成功');
+        }
         if (close) {
             ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
                 .then(() => {
@@ -215,6 +211,17 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false) =>
                 })
                 .catch(() => {});
         } else {
+            // 判断是否需要导出
+            if (is_export) {
+                const index = window.location.href.lastIndexOf('?s=');
+                const pro_url = window.location.href.substring(0, index);
+                const new_url = import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url;
+                window.open(new_url + '?s=diyapi/diydownload/id/' + res.data + '.html', '_blank');
+            }
+            if (is_preview) {
+                preview_dialog.value = true;
+                diy_id.value = String(res.data);
+            }
             history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
         }
     });