feat: 扩展 ConfigType 添加 clickHandle 属性，为上传图片组件增加点击事件，完善点击上传（暂时不走网络，读取其base64）

src/enums/storageEnum.ts

@@ -12,5 +12,7 @@ export enum StorageEnum {
   // 工作台布局配置
   GO_CHART_LAYOUT_STORE = 'GO_CHART_LAYOUT',
   // 工作台需要保存的数据
-  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST'
+  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST',
+  // 用户存储的图片媒体
+  GO_USER_MEDIA_PHOTOS = 'GO_USER_MEDIA_PHOTOS'
 }

src/packages/components/Photos/My/index.ts

@@ -1,16 +1,37 @@
-import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+import { setLocalStorage, getLocalStorage } from '@/utils'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { StorageEnum } from '@/enums/storageEnum'
 
-const photoConfig = {
+const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
-  ...ImageConfig,
+
-  category: ChatCategoryEnum.MY,
+/**
-  categoryName: ChatCategoryEnumName.MY,
+ * 上传完成事件类型
-  package: PackagesCategoryEnum.PHOTOS,
+ */
-  title: '20052Q04040923.png',
+type UploadCompletedEventType = {
-  image: 'https://img.phb123.com/uploads/allimg/200528/47-20052Q04040923.png',
+  fileName: string
-  dataset: 'https://img.phb123.com/uploads/allimg/200528/47-20052Q04040923.png',
+  url: string
-  virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+}
+
+const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
+
+const uploadFile = (callback: Function | null = null) => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = 'image/*' // 这里只允许图片类型
+  input.onchange = async () => {
+    if (!input.files || !input.files.length) return
+    const file = input.files[0]
+    const reader = new FileReader()
+    reader.onload = () => {
+      const eventObj: UploadCompletedEventType = { fileName: file.name, url: reader.result as string }
+      callback && callback(eventObj)
+    }
+    reader.readAsDataURL(file)
+  }
+  input.click()
 }
 
 const addConfig = {
@@ -18,10 +39,28 @@ const addConfig = {
   category: ChatCategoryEnum.MY,
   categoryName: ChatCategoryEnumName.MY,
   package: PackagesCategoryEnum.PHOTOS,
-  title: '增加新项',
+  title: '上传新项',
-  image: 'https://img.51miz.com/Element/00/62/75/91/d5453102_E627591_3bbace6f.png',
+  image: 'upload.png',
   virtualComponent: './components/Informations/Mores/Image', // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
-  disabled: true
+  disabled: true,
+  clickHandle: (photoConfig: ConfigType) => {
+    uploadFile((e: UploadCompletedEventType) => {
+      // 和上传组件一样配置，更换标题，图片，预设数据
+      const newPhoto = {
+        ...ImageConfig,
+        category: ChatCategoryEnum.MY,
+        categoryName: ChatCategoryEnumName.MY,
+        package: PackagesCategoryEnum.PHOTOS,
+        title: e.fileName,
+        image: e.url,
+        dataset: e.url
+      }
+      userPhotosList.push(newPhoto)
+      setLocalStorage(StoreKey, userPhotosList)
+      const { getPackagesList } = usePackagesStore()
+      getPackagesList.Photos.splice(getPackagesList.Photos.length - 1, 0, newPhoto) // 插入到上传按钮前的位置
+    })
+  }
 }
 
-export default [photoConfig, photoConfig, photoConfig, photoConfig, photoConfig, addConfig]
+export default [...userPhotosList, addConfig]

src/packages/index.d.ts

@@ -27,6 +27,7 @@ export type ConfigType = {
   virtualComponent?: string // 虚拟组件Path，指定后创建该组件时，从指定路径创建
   dataset?: any // 组件预设的 dataset 值
   disabled?: boolean // 禁用的
+  clickHandle?: Function // 单击事件
 }
 
 // 数据请求

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -14,6 +14,7 @@
         @dragstart="!item.disabled && dragStartHandle($event, item)"
         @dragend="!item.disabled && dragendHandle"
         @dblclick="dblclickHandle(item)"
+        @click="clickHandle(item)"
       >
         <div class="list-header">
           <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
@@ -109,6 +110,9 @@ const dblclickHandle = async (item: ConfigType) => {
   }
 }
 
+// 单击事件
+const clickHandle = (item: ConfigType) => item.clickHandle && item.clickHandle(item)
+
 watch(
   () => chartMode.value,
   (newValue: ChartModeEnum) => {