From 633bf987abaf6d3a1bc49bb0886822064ca958ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 26 Jun 2022 15:35:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=8D=E8=83=BD=E5=8A=A8=E6=80=81=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mock/index.ts                         |  2 +-
 src/api/mock/test.mock.ts                     |  6 +-
 .../Informations/Mores/Image/config.vue       |  2 +-
 .../Informations/Mores/Image/index.vue        | 57 ++++++++++++-------
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/api/mock/index.ts b/src/api/mock/index.ts
index 6d090ea4..ecfe7dbc 100644
--- a/src/api/mock/index.ts
+++ b/src/api/mock/index.ts
@@ -41,7 +41,7 @@ const mockObject: MockMethod[] = [
   {
     url: imageUrl,
     method: RequestHttpEnum.GET,
-    response: () => test.fetchImage,
+    response: () => test.fetchImage(Math.round(Math.random()*10)),
   },
 ]
 
diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts
index d6b19d14..54688c58 100644
--- a/src/api/mock/test.mock.ts
+++ b/src/api/mock/test.mock.ts
@@ -80,10 +80,10 @@ export default {
     msg: '请求成功',
     data: '@paragraph(1, 10)',
   },
-  fetchImage: {
+  fetchImage: (num: number) => ({
     code: 0,
     status: 200,
     msg: '请求成功',
-    data: `https://robohash.org/${Math.round(Math.random()*10)}`,
-  },
+    data: `https://robohash.org/${num}`,
+  }),
 }
diff --git a/src/packages/components/Informations/Mores/Image/config.vue b/src/packages/components/Informations/Mores/Image/config.vue
index 58c0a42b..83836728 100644
--- a/src/packages/components/Informations/Mores/Image/config.vue
+++ b/src/packages/components/Informations/Mores/Image/config.vue
@@ -1,5 +1,5 @@
 <template>
-  <collapse-item name="图片" :expanded="true">
+  <collapse-item name="属性" :expanded="true">
     <setting-item-box name="路径" :alone="true">
       <setting-item>
         <n-input v-model:value="optionData.dataset" size="small"></n-input>
diff --git a/src/packages/components/Informations/Mores/Image/index.vue b/src/packages/components/Informations/Mores/Image/index.vue
index 85311a89..fc3b98f4 100644
--- a/src/packages/components/Informations/Mores/Image/index.vue
+++ b/src/packages/components/Informations/Mores/Image/index.vue
@@ -1,42 +1,57 @@
 <template>
-  <div class="go-packages-image">
-    <div :style="getStyle(borderRadius)">
-      <n-image
-        :object-fit="fit"
-        preview-disabled
-        :src="dataset"
-        :fallback-src="requireErrorImg()"
-        :width="w"
-        :height="h"
-      ></n-image>
-    </div>
+  <div :style="getStyle(borderRadius)">
+    <n-image
+      :object-fit="fit"
+      preview-disabled
+      :src="option.dataset"
+      :fallback-src="requireErrorImg()"
+      :width="w"
+      :height="h"
+    ></n-image>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
+import { PropType, shallowReactive, watch, toRefs } from 'vue'
 import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
+    required: true
+  }
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
 
+const option = shallowReactive({
+  dataset: ''
+})
+
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,
-    overflow: 'hidden',
+    overflow: 'hidden'
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.go-packages-image {
-}
-</style>
\ No newline at end of file
+// 编辑更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>