diff --git a/src/assets/images/chart/photos/upload.png b/src/assets/images/chart/photos/upload.png new file mode 100644 index 00000000..8b8633ea Binary files /dev/null and b/src/assets/images/chart/photos/upload.png differ diff --git a/src/enums/storageEnum.ts b/src/enums/storageEnum.ts index b0818a24..4482f069 100644 --- a/src/enums/storageEnum.ts +++ b/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' } diff --git a/src/packages/components/Photos/My/index.ts b/src/packages/components/Photos/My/index.ts index 460a90ad..df6db7e4 100644 --- a/src/packages/components/Photos/My/index.ts +++ b/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 = { - ...ImageConfig, - category: ChatCategoryEnum.MY, - categoryName: ChatCategoryEnumName.MY, - package: PackagesCategoryEnum.PHOTOS, - title: '20052Q04040923.png', - image: 'https://img.phb123.com/uploads/allimg/200528/47-20052Q04040923.png', - dataset: 'https://img.phb123.com/uploads/allimg/200528/47-20052Q04040923.png', - virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径,尾部不跟 ‘/’,相对于 /packages/index.ts 文件的位置 +const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS + +/** + * 上传完成事件类型 + */ +type UploadCompletedEventType = { + fileName: string + url: string +} + +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: '增加新项', - image: 'https://img.51miz.com/Element/00/62/75/91/d5453102_E627591_3bbace6f.png', + title: '上传新项', + 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] diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index affdb1d2..cb0cbbad 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -27,6 +27,7 @@ export type ConfigType = { virtualComponent?: string // 虚拟组件Path,指定后创建该组件时,从指定路径创建 dataset?: any // 组件预设的 dataset 值 disabled?: boolean // 禁用的 + clickHandle?: Function // 单击事件 } // 数据请求 diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index 1dfcbee1..cf45e904 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/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)" >