From eb8c03d23c841f23c8dd8548bea4b56d37476258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 26 Aug 2024 16:51:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=9E=E6=98=BE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-custom/model-custom-content.vue     |  17 ++-
 src/components/model-data-magic/index.vue     | 106 +++++++++---------
 .../model-data-magic-content.vue              |   2 +-
 .../model-data-magic-styles.vue               |   4 +-
 src/layout/components/main/default/custom.ts  |   2 +
 5 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 73c39977..b0ea362f 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -9,7 +9,7 @@
                     </el-select>
                     <div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
                         <div class="re flex align-c">
-                            <image-empty v-model="form.source_list[img_key]" style="width: 10rem; height: 10rem;"></image-empty>
+                            <image-empty v-model="form.source_list[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
                             <div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
                         </div>
                         <div class="flex-1 size-14 text-line-3">{{ form.source_list.title ||  form.source_list.name }}</div>
@@ -40,7 +40,7 @@
                 </div>
             </div>
         </Dialog>
-        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="dialog_type" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
+        <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[ form.data_source ]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -81,6 +81,8 @@ const getCustominit = () => {
         const { data_source } = res.data;
         options.value = data_source;
         data_source_store.set_data_source(data_source);
+        // 数据处理
+        processing_data(form.data_source);
     });
 }
 
@@ -95,6 +97,7 @@ onBeforeMount(() => {
     }
 });
 // 处理显示的图片和传递到下去的数据结构
+const model_data_source = ref<data_list[]>([])
 const processing_data = (key: string) => {
     const list = options.value.filter(item => item.type == key);
     if (list.length > 0) {
@@ -103,14 +106,11 @@ const processing_data = (key: string) => {
         const field_list = list[0].data.filter(item => item.type == 'images');
         // 取出图片的key
         if (field_list.length > 0) {
-            img_key.value = field_list[0].field;
+            form.img_key = field_list[0].field;
         }
     } else {
         model_data_source.value = [];
     }
-    if (!isEmpty(key)) {
-        dialog_type.value = [ key ];
-    }
 };
 //#endregion
 //#region 自定义编辑的内部处理逻辑
@@ -152,9 +152,6 @@ const accomplish = () => {
 };
 //#endregion
 //#region 数据源更新逻辑处理
-const model_data_source = ref<data_list[]>([])
-const dialog_type = ref<string[]>([]);
-const img_key = ref('');
 // 打开弹出框
 const url_value_dialog_visible = ref(false);
 const changeDataSource = (key: string) => {
@@ -181,7 +178,7 @@ const url_value_close = () => {
 }
 // 替换数据
 const replace_data = () => {
-    if (!isEmpty(dialog_type.value)) {
+    if (!isEmpty(form.data_source)) {
         url_value_dialog_visible.value = true;
     }
 }
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index c965a0ca..75af1c91 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -149,6 +149,57 @@ const percentage = (num: number) => {
 };
 //#endregion
 //#region 组装页面显示的数据
+// 指示器的样式
+const indicator_style = (item: any) => {
+    let styles = '';
+    if (!isEmpty(item.indicator_radius)) {
+        styles += radius_computer(item.indicator_radius)
+    }
+    const size = item?.indicator_size || 5;
+    if (item.indicator_style == 'num') {
+        styles += `color: ${item?.color || '#DDDDDD'};`;
+        styles += `font-size: ${size}px;`;
+    } else if (item.indicator_style == 'elliptic') {
+        styles += `background: ${item?.color || '#DDDDDD'};`;
+        styles += `width: ${size * 3}px; height: ${size}px;`;
+    } else {
+        styles += `background: ${item?.color || '#DDDDDD'};`;
+        styles += `width: ${size}px; height: ${size}px;`;
+    }
+    return styles;
+};
+const background_style = (item: any) => {
+    return gradient_computer(item) + background_computer(item);
+};
+const style_actived_color = (item: any, index: number) => {
+   return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
+}
+/*
+** 组装产品的数据
+** @param {Array} list 商品列表
+** @param {Number} num 显示数量
+** @return {Array}
+*/
+const commodity_list = (list: any[], num: number) => {
+    if (list.length > 0) {
+        // 深拷贝一下，确保不会出现问题
+        const goods_list = cloneDeep(list).map((item: any) => ({
+            ...item.data,
+            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
+            new_cover: item.new_cover,
+        }));
+        // 存储数据显示
+        let nav_list = [];
+        // 拆分的数量
+        const split_num = Math.ceil(goods_list.length / num);
+        for (let i = 0; i < split_num; i++) {
+            nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
+        }
+        return nav_list;
+    } else {
+        return [];
+    }
+}
 const old_list = ref<any>({});
 const data_magic_list = ref<data_magic[]>([]);
 watch(props.value.content, (val) => {
@@ -195,33 +246,7 @@ watch(props.value.content, (val) => {
         }
     });
     data_magic_list.value = data;
-})
-
-const background_style = (item: any) => {
-    return gradient_computer(item) + background_computer(item);
-};
-// 指示器的样式
-const indicator_style = (item: any) => {
-    let indicator_styles = '';
-    if (!isEmpty(item.indicator_radius)) {
-        indicator_styles += radius_computer(item.indicator_radius)
-    }
-    const size = item?.indicator_size || 5;
-    if (item.indicator_style == 'num') {
-        indicator_styles += `color: ${item?.color || '#DDDDDD'};`;
-        indicator_styles += `font-size: ${size}px;`;
-    } else if (item.indicator_style == 'elliptic') {
-        indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
-        indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
-    } else {
-        indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
-        indicator_styles += `width: ${size}px; height: ${size}px;`;
-    }
-    return indicator_styles;
-};
-const style_actived_color = (item: any, index: number) => {
-   return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
-}
+}, {immediate: true, deep: true})
 //#endregion
 const carousel_change = (index: number, key: number) => {
     if (data_magic_list.value[key]) {
@@ -235,32 +260,7 @@ const trends_config = (style: any, key: string) => {
 const text_style = (typeface: string, size: number, color: string) => {
     return `font-weight:${ typeface }; font-size: ${ size }px; color: ${ color };`;
 } 
-/*
-** 组装产品的数据
-** @param {Array} list 商品列表
-** @param {Number} num 显示数量
-** @return {Array}
-*/
-const commodity_list = (list: any[], num: number) => {
-    if (list.length > 0) {
-        // 深拷贝一下，确保不会出现问题
-        const goods_list = cloneDeep(list).map((item: any) => ({
-            ...item.data,
-            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
-            new_cover: item.new_cover,
-        }));
-        // 存储数据显示
-        let nav_list = [];
-        // 拆分的数量
-        const split_num = Math.ceil(goods_list.length / num);
-        for (let i = 0; i < split_num; i++) {
-            nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
-        }
-        return nav_list;
-    } else {
-        return [];
-    }
-}
+
 // 不属于第9个，并且第9个的第一个和第二个
 const spacing_processing = (index: number) => {
     return form.value.style_actived !== 8 || (form.value.style_actived === 8 && [0, 1].includes(index))
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 1b62c20a..0537a211 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="auxiliary-line common-content-height">
-        <el-form :model="form" label-width="60">
+        <el-form :model="form" label-width="80">
             <card-container class="mb-8">
                 <div class="mb-12">展示风格</div>
                 <el-form-item label="选择风格">
diff --git a/src/components/model-data-magic/model-data-magic-styles.vue b/src/components/model-data-magic/model-data-magic-styles.vue
index cfc04e93..8e430ebe 100644
--- a/src/components/model-data-magic/model-data-magic-styles.vue
+++ b/src/components/model-data-magic/model-data-magic-styles.vue
@@ -2,8 +2,8 @@
     <div class="w">
         <el-form :model="form" label-width="70">
             <card-container class="mb-8">
-                <div class="mb-12">图片魔方</div>
-                <el-form-item label="图片间距">
+                <div class="mb-12">数据魔方</div>
+                <el-form-item label="数据间距">
                     <slider v-model="form.image_spacing" :max="100"></slider>
                 </el-form-item>
                 <el-form-item label="数据圆角">
diff --git a/src/layout/components/main/default/custom.ts b/src/layout/components/main/default/custom.ts
index a3c330bd..7dab387a 100644
--- a/src/layout/components/main/default/custom.ts
+++ b/src/layout/components/main/default/custom.ts
@@ -3,6 +3,7 @@ import defaultCommon from "./index";
 interface defaultSearch {
     content: {
         height: number;
+        img_key: string;
         data_source: string;
         source_list: string[];
         custom_list: string[];
@@ -14,6 +15,7 @@ interface defaultSearch {
 const defaultSearch: defaultSearch = {
     content: {
         height: 390,
+        img_key: '',
         source_list: [],
         data_source:'',
         custom_list: []