|
@@ -1,7 +1,10 @@
|
|
|
import getMD5 from '@/components/MD5';
|
|
|
import { useAjax } from '@/Hook/useAjax';
|
|
|
-import { bdSysMediaListImg, bdSysMediaListVideo, bdSysMediaAdd, delMedia, bdSysMediaEdit, getFileUrl, syncMedia, getMedia, configSortApi, syncForSend, wxSysMediaAdd, editWxlist, getFolderTreeImg, getFolderTreeVideo, editMediaFolder } from '@/services/launchAdq/material';
|
|
|
+import { bdSysMediaListImg, bdSysMediaListVideo, bdSysMediaAdd, delMedia, bdSysMediaEdit, getFileUrl, getMedia, configSortApi, getFolderTreeImg, getFolderTreeVideo, editMediaFolder } from '@/services/launchAdq/material';
|
|
|
+import { blobToBase64, dataURLtoFile, videoMessage } from '@/utils/compress';
|
|
|
+import { getImgSize } from '@/utils/utils';
|
|
|
import { message } from 'antd';
|
|
|
+import { compressAccurately } from 'image-conversion';
|
|
|
import { Dispatch, useCallback, useReducer, useState } from 'react'
|
|
|
import { request } from 'umi';
|
|
|
|
|
@@ -29,7 +32,11 @@ type State = {
|
|
|
file?: File,//素材文件
|
|
|
selectItem?: any,//单选素材时存放选中的素材
|
|
|
knewsdefaultData?: any,//k图文编辑时的默认内容
|
|
|
- sortVisible?:boolean,//排序弹窗
|
|
|
+ sortVisible?: boolean,//排序弹窗
|
|
|
+
|
|
|
+
|
|
|
+ size?: number, // 需要上传素材的大小
|
|
|
+ upLoadLoading?: boolean, // 上传loading
|
|
|
}
|
|
|
export type Action = {
|
|
|
type: 'set' | 'init',
|
|
@@ -71,30 +78,26 @@ const initData: State = {
|
|
|
path: [{ title: '个人本地', number: '0' }],
|
|
|
imgVisrible: false,
|
|
|
newsVisrible: false,
|
|
|
- sortVisible:false,
|
|
|
- sort: 0
|
|
|
+ sortVisible: false,
|
|
|
+ sort: 0,
|
|
|
}
|
|
|
/**本地素材管理器 */
|
|
|
function useBdMediaPup() {
|
|
|
const [state, dispatch]: [State, Dispatch<Action>] = useReducer(reducer, initData)
|
|
|
- const { fileName, sort, belongUser, mediaType, parentId, selectFile, delPupId, rightClickPup, actionItem, path, publicPath, file, videoTitle, videoDescription } = state
|
|
|
+ const { fileName, sort, belongUser, mediaType, parentId, selectFile, delPupId, rightClickPup, actionItem, path, publicPath, size, videoTitle, videoDescription } = state
|
|
|
const listImg = useAjax((params) => bdSysMediaListImg(params))
|
|
|
const listVideo = useAjax((params) => bdSysMediaListVideo(params))
|
|
|
const add = useAjax((params) => bdSysMediaAdd(params), { msgNmae: '新增' })
|
|
|
- const addWx = useAjax((params) => wxSysMediaAdd(params), { msgNmae: '新增' })
|
|
|
const del = useAjax((params) => delMedia(params), { msgNmae: '删除' })
|
|
|
const edit = useAjax((params) => bdSysMediaEdit(params), { msgNmae: '编辑' })
|
|
|
- const sync = useAjax((params) => syncMedia(params), { msgNmae: '同步' })
|
|
|
- const syncId = useAjax((params) => syncForSend(params), { msgNmae: '同步' })
|
|
|
const configSort = useAjax((params) => configSortApi(params), { msgNmae: '排序' })
|
|
|
const get_folder_tree_img = useAjax((params: any) => getFolderTreeImg(params))
|
|
|
const get_folder_tree_video = useAjax((params: any) => getFolderTreeVideo(params))
|
|
|
const edit_media_folder = useAjax((params: any) => editMediaFolder(params))
|
|
|
- const get = useAjax((params) => getMedia(params))//获取图文详情
|
|
|
- const eidtWxlists = useAjax((params) => editWxlist(params))
|
|
|
+ const get = useAjax((params) => getMedia(params))//获取本地素材详情
|
|
|
const [isOk, setIsOk] = useState<boolean>(true)
|
|
|
//请求上传地址
|
|
|
- const fileUrl = useAjax((params: { type: string }) => getFileUrl(params), {
|
|
|
+ const fileUrl = useAjax((params: { type: string, fileType: 'video' | 'image' }) => getFileUrl(params), {
|
|
|
manual: true,
|
|
|
})
|
|
|
/**初始化数据 */
|
|
@@ -109,130 +112,128 @@ function useBdMediaPup() {
|
|
|
dispatch({ type: 'set', params })
|
|
|
}
|
|
|
}, [])
|
|
|
- /**新增K-客服模板消息 */
|
|
|
- const knewsOk = useCallback((props: any) => {
|
|
|
- let { title, knewsThumbUrl, knewsLink, description, knewsThumbId } = props?.newsList[0]
|
|
|
- let obj = {
|
|
|
- parentId,
|
|
|
- belongUser: belongUser === '0' ? false : true,
|
|
|
- folder: false,
|
|
|
- mediaType,
|
|
|
- title: title,
|
|
|
- knewsThumbUrl: knewsThumbUrl,
|
|
|
- knewsLink: knewsLink,
|
|
|
- description: description,
|
|
|
- sort: props.sort
|
|
|
- }
|
|
|
- if (knewsThumbId) {//数据中存在封面图本地ID加入本地ID
|
|
|
- obj['knewsThumbId'] = knewsThumbId
|
|
|
- }
|
|
|
- if (rightClickPup?.id && rightClickPup?.id !== 'all') {//编辑时传入ID
|
|
|
- obj['sysMediaId'] = rightClickPup?.id
|
|
|
- edit.run(obj).then((res) => {
|
|
|
- if (res) {
|
|
|
- if (mediaType === 'IMG') {
|
|
|
- listImg.refresh()
|
|
|
- } else if (mediaType === 'VIDEO') {
|
|
|
- listVideo.refresh()
|
|
|
- }
|
|
|
- set({ knewsVisrible: false, knewsdefaultData: null })
|
|
|
+ /**新增文件夹 */
|
|
|
+ const addFolder = () => {
|
|
|
+ if (fileName) {
|
|
|
+ let obj = { title: fileName, mediaType, folder: true, parentId, belongUser: belongUser === '0' ? false : true, sort }
|
|
|
+ add.run(obj).then((res) => {
|
|
|
+ if (mediaType === 'IMG') {
|
|
|
+ get_folder_tree_img.refresh()
|
|
|
+ } else if (mediaType === 'VIDEO') {
|
|
|
+ get_folder_tree_video.refresh()
|
|
|
}
|
|
|
- })
|
|
|
- eidtWxlists.run({ sysMediaId: rightClickPup?.id, mpIds: props?.mpIds || [] }).then((res) => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- } else {
|
|
|
- add.run({ ...obj, mpIds: props?.mpIds || [] }).then((res) => {
|
|
|
- if (res) {
|
|
|
- if (mediaType === 'IMG') {
|
|
|
- listImg.refresh()
|
|
|
- } else if (mediaType === 'VIDEO') {
|
|
|
- listVideo.refresh()
|
|
|
- }
|
|
|
- set({ knewsVisrible: false, knewsdefaultData: null })
|
|
|
+
|
|
|
+ if (mediaType === 'IMG') {
|
|
|
+ listImg.refresh()
|
|
|
+ } else if (mediaType === 'VIDEO') {
|
|
|
+ listVideo.refresh()
|
|
|
}
|
|
|
+ offEditFile()//关闭弹窗并清空相关数据
|
|
|
})
|
|
|
}
|
|
|
- }, [add, edit, listImg, listVideo, parentId, belongUser, mediaType, rightClickPup])
|
|
|
- /**新增文件夹,非图文素材 */
|
|
|
- const fileOk = useCallback((e: any, fnc?: () => Promise<any>, selectWx?: number[]) => {
|
|
|
- e?.stopPropagation()
|
|
|
- if (fnc) {//存在代表素材
|
|
|
- fnc().then(res => {
|
|
|
- console.log('11111111--->', res)
|
|
|
- if (!res) {
|
|
|
- return
|
|
|
+ }
|
|
|
+ /** 新增图片 视频 */
|
|
|
+ const addFile = async (data: any) => {
|
|
|
+ if (data) {//存在代表素材
|
|
|
+ if (!data) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (data?.file) {
|
|
|
+ let file = data.file
|
|
|
+ let fileSize = size || 0
|
|
|
+ if (!size) {
|
|
|
+ if (mediaType === 'IMG') {
|
|
|
+ fileSize = 307200
|
|
|
+ } else {
|
|
|
+ fileSize = 104857600
|
|
|
+ }
|
|
|
}
|
|
|
- if (res?.file && file) {
|
|
|
- /**修改文件名以用户设置的文件title命名*/
|
|
|
- let newFile = new File([file], res?.fileName ? res?.fileName + '.' + file?.name?.split('.')[1] : file?.name, { type: file?.type })
|
|
|
- let formData = new FormData();
|
|
|
- if (mediaType === 'VIDEO' || mediaType === 'IMG') {
|
|
|
- if (newFile.size > 10485760) {
|
|
|
- message.error('请上传小于10M的素材')
|
|
|
- return
|
|
|
+
|
|
|
+ if (mediaType === 'IMG') {
|
|
|
+ if (file?.size > fileSize) { // 大于300kb进入压缩
|
|
|
+ let bole = await compressAccurately(file, 250)
|
|
|
+ if (bole?.size > 300000) {
|
|
|
+ bole = await compressAccurately(file, 200)
|
|
|
+ }
|
|
|
+ if (bole?.size > 300000) {
|
|
|
+ bole = await compressAccurately(file, 150)
|
|
|
}
|
|
|
+ if (bole?.size > 300000) {
|
|
|
+ bole = await compressAccurately(file, 100)
|
|
|
+ }
|
|
|
+ let newFile = await blobToBase64(bole)
|
|
|
+ message.warning({
|
|
|
+ content: `选择的图片大于${fileSize / 1024}KB,图片已压缩`,
|
|
|
+ duration: 3
|
|
|
+ })
|
|
|
+ file = await dataURLtoFile(newFile, file?.name)
|
|
|
}
|
|
|
-
|
|
|
- /**向阿里云请求上传地址*/
|
|
|
- fileUrl.run({ type: newFile.type }).then(res1 => {
|
|
|
- Object.keys(res1).forEach((key: string) => {
|
|
|
- if (key !== 'url') {
|
|
|
- formData.append(key, res1[key])
|
|
|
- }
|
|
|
+ } else if (mediaType === 'VIDEO') {
|
|
|
+ if (file?.size > fileSize) { // 大于100mb进入压缩
|
|
|
+ message.error({
|
|
|
+ content: `选择的视频大于${fileSize / 1024 / 1024}MB,请重新选择提交`,
|
|
|
+ duration: 3
|
|
|
})
|
|
|
- formData.append('file', newFile)
|
|
|
- /**向阿里云返回的上传地址上传文件*/
|
|
|
- request(res1?.ossUrl, { method: 'post', body: formData }).then(async (res2: { code: number, data: { url: string } }) => {
|
|
|
- if (res2.code === 200) {
|
|
|
- message.success('上传成功')
|
|
|
- if (res) {
|
|
|
- /**取到返回的文件地址向后端发送具体数据*/
|
|
|
- if (res2?.data?.url) {
|
|
|
- let fileMd5 = await getMD5(file)
|
|
|
- let obj = { title: res?.fileName, mediaType, folder: false, parentId, belongUser: belongUser === '0' ? false : true, url: res2?.data?.url, mpIds: selectWx, sort: res?.sort, fileMd5, fileSize: newFile?.size }
|
|
|
- if (mediaType === 'VIDEO') {
|
|
|
- obj['videoTitle'] = res?.videoTitle || res?.title
|
|
|
- obj['videoDescription'] = res?.videoDescription
|
|
|
- }
|
|
|
- add.run(obj).then((res) => {
|
|
|
- console.log(res)
|
|
|
- if (mediaType === 'IMG') {
|
|
|
- listImg.refresh()
|
|
|
- } else if (mediaType === 'VIDEO') {
|
|
|
- listVideo.refresh()
|
|
|
- }
|
|
|
- offEditFile()//关闭弹窗并清空相关数据
|
|
|
- })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ set({ upLoadLoading: true })
|
|
|
+ let width = 0
|
|
|
+ let height = 0
|
|
|
+ if (mediaType === 'IMG') {
|
|
|
+ let imgData = await getImgSize(file)
|
|
|
+ width = imgData.width
|
|
|
+ height = imgData.height
|
|
|
+ } else if (mediaType === "VIDEO") {
|
|
|
+ let videoInfo: any = await videoMessage([file])
|
|
|
+ width = videoInfo[0].width
|
|
|
+ height = videoInfo[0].height
|
|
|
+ }
|
|
|
+ /**修改文件名以用户设置的文件title命名*/
|
|
|
+ let newFile = new File([file], data?.title ? data?.title + '.' + file?.name?.split('.')[1] : file?.name, { type: file?.type })
|
|
|
+ let formData = new FormData();
|
|
|
+
|
|
|
+ /**向阿里云请求上传地址*/
|
|
|
+ fileUrl.run({ type: newFile.type, fileType: mediaType === 'VIDEO' ? 'video' : 'image' }).then(res1 => {
|
|
|
+ Object.keys(res1).forEach((key: string) => {
|
|
|
+ if (key !== 'url') {
|
|
|
+ formData.append(key, res1[key])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ formData.append('file', newFile)
|
|
|
+ /**向阿里云返回的上传地址上传文件*/
|
|
|
+ request(res1?.ossUrl, { method: 'post', body: formData }).then(async (res2: { code: number, data: { url: string } }) => {
|
|
|
+ if (res2.code === 200) {
|
|
|
+ message.success('上传成功')
|
|
|
+ if (data) {
|
|
|
+ /**取到返回的文件地址向后端发送具体数据*/
|
|
|
+ if (res2?.data?.url) {
|
|
|
+ let fileMd5 = await getMD5(newFile)
|
|
|
+ let obj = { title: data.title, mediaType, folder: false, parentId, width, height, fileMd5, belongUser: belongUser === '0' ? false : true, url: res2?.data?.url, sort: data?.sort, fileSize: newFile?.size, fileMime: newFile.type }
|
|
|
+ if (mediaType === 'VIDEO') {
|
|
|
+ obj['videoTitle'] = data?.videoTitle || data?.title
|
|
|
+ obj['videoDescription'] = data?.videoDescription
|
|
|
}
|
|
|
+ add.run(obj).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (mediaType === 'IMG') {
|
|
|
+ listImg.refresh()
|
|
|
+ } else if (mediaType === 'VIDEO') {
|
|
|
+ listVideo.refresh()
|
|
|
+ }
|
|
|
+ offEditFile()//关闭弹窗并清空相关数据
|
|
|
+ set({ upLoadLoading: false })
|
|
|
+ }).catch(() => set({ upLoadLoading: false }))
|
|
|
}
|
|
|
- } else {
|
|
|
- message.error('上传失败!')
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- if (fileName) {
|
|
|
- let obj = { title: fileName, mediaType, folder: true, parentId, belongUser: belongUser === '0' ? false : true, mpIds: selectWx, sort }
|
|
|
- add.run(obj).then((res) => {
|
|
|
- if (mediaType === 'IMG') {
|
|
|
- get_folder_tree_img.refresh()
|
|
|
- } else if (mediaType === 'VIDEO') {
|
|
|
- get_folder_tree_video.refresh()
|
|
|
- }
|
|
|
-
|
|
|
- if (mediaType === 'IMG') {
|
|
|
- listImg.refresh()
|
|
|
- } else if (mediaType === 'VIDEO') {
|
|
|
- listVideo.refresh()
|
|
|
- }
|
|
|
- offEditFile()//关闭弹窗并清空相关数据
|
|
|
- })
|
|
|
+ } else {
|
|
|
+ message.error('上传失败!')
|
|
|
+ }
|
|
|
+ }).catch(() => set({ upLoadLoading: false }))
|
|
|
+ }).catch(() => set({ upLoadLoading: false }))
|
|
|
}
|
|
|
}
|
|
|
- }, [fileName, mediaType, parentId, belongUser, listImg, listVideo, file])
|
|
|
+ }
|
|
|
/**编辑非图文素材名称*/
|
|
|
const nameOk = useCallback((selectWx?: any) => {
|
|
|
if (fileName && actionItem) {
|
|
@@ -250,10 +251,6 @@ function useBdMediaPup() {
|
|
|
offEditFile()//关闭弹窗并清空相关数据
|
|
|
})
|
|
|
}
|
|
|
- //
|
|
|
- eidtWxlists.run({ sysMediaId: actionItem?.id, mpIds: selectWx || [] }).then((res) => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
}, [fileName, actionItem, edit, belongUser, mediaType, videoTitle, videoDescription])
|
|
|
/**删除文件 */
|
|
|
const dels = useCallback((id?: any) => {
|
|
@@ -261,19 +258,21 @@ function useBdMediaPup() {
|
|
|
let len = arr?.length || 0
|
|
|
if (len) {
|
|
|
arr?.map((id, index) => {
|
|
|
- del.run(id).then(() => {
|
|
|
+ del.run({ sysMediaId: id, mediaType }).then(() => {
|
|
|
set({ selectFile: selectFile?.filter(i => i !== id) })//清理已删除文件
|
|
|
if (index === len - 1) {
|
|
|
if (mediaType === 'IMG') {
|
|
|
listImg.refresh()
|
|
|
+ get_folder_tree_img.refresh()
|
|
|
} else if (mediaType === 'VIDEO') {
|
|
|
listVideo.refresh()
|
|
|
+ get_folder_tree_video.refresh()
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
- }, [listImg, listVideo, selectFile])
|
|
|
+ }, [listImg, listVideo, selectFile, mediaType])
|
|
|
/**获取本地素材数据列表 */
|
|
|
const getList = useCallback((props?: any) => {
|
|
|
let obj = { pageSize: 20, pageNum: 1, belongUser: belongUser === '0' ? false : true, parentId, ...props }
|
|
@@ -409,12 +408,12 @@ function useBdMediaPup() {
|
|
|
}, [rightClickPup])
|
|
|
/**取消编辑后清空选中存放的数据并关闭弹窗*/
|
|
|
const offEditFile = useCallback(() => {
|
|
|
- set({ fileVisible: false, imgVisrible: false,sortVisible:false, actionItem: '', fileName: '', selectFile: selectFile?.filter(id => id !== actionItem?.id), sort: 0 })
|
|
|
+ set({ fileVisible: false, imgVisrible: false, sortVisible: false, actionItem: '', fileName: '', selectFile: selectFile?.filter(id => id !== actionItem?.id), sort: 0 })
|
|
|
}, [selectFile, actionItem])
|
|
|
/**全选反选文件*/
|
|
|
const allFile = useCallback(() => {
|
|
|
let allArr: any[] = []
|
|
|
-
|
|
|
+
|
|
|
if (mediaType === 'IMG') {
|
|
|
listImg?.data?.records?.forEach((item: { id: any }) => {
|
|
|
allArr.push(item.id)
|
|
@@ -426,15 +425,12 @@ function useBdMediaPup() {
|
|
|
}
|
|
|
set({ selectFile: allArr.filter((i) => selectFile?.every(id => id !== i)) })
|
|
|
}, [selectFile, listImg, listVideo, mediaType])
|
|
|
- /**图文素材弹窗开关 */
|
|
|
- const showNews = useCallback(() => {
|
|
|
-
|
|
|
- }, [])
|
|
|
return {
|
|
|
state,
|
|
|
init,
|
|
|
set,
|
|
|
- fileOk,
|
|
|
+ addFile,
|
|
|
+ addFolder,
|
|
|
getList,
|
|
|
dels,
|
|
|
onFile,
|
|
@@ -448,19 +444,14 @@ function useBdMediaPup() {
|
|
|
fileClick,
|
|
|
treeClick,
|
|
|
pathClick,
|
|
|
- knewsOk,
|
|
|
configSort,
|
|
|
fileUrl,
|
|
|
- addWx,
|
|
|
listImg,
|
|
|
listVideo,
|
|
|
add,
|
|
|
- sync,
|
|
|
get,
|
|
|
edit,
|
|
|
- syncId,
|
|
|
typeEnum,
|
|
|
- eidtWxlists,
|
|
|
get_folder_tree_img,
|
|
|
get_folder_tree_video,
|
|
|
edit_media_folder
|