import { useMessage } from '/@/hooks/web/useMessage'; import { defHttp } from '/@/utils/http/axios'; import { useGlobSetting } from '/@/hooks/setting'; const globSetting = useGlobSetting(); const baseUploadUrl = globSetting.uploadUrl; import { ref, toRaw, unref, reactive } from 'vue'; import { uploadMyFile } from '/@/api/common/api'; import excel from '/@/assets/svg/fileType/excel.svg'; import other from '/@/assets/svg/fileType/other.svg'; import pdf from '/@/assets/svg/fileType/pdf.svg'; import txt from '/@/assets/svg/fileType/txt.svg'; import word from '/@/assets/svg/fileType/word.svg'; import image from '/@/assets/svg/fileType/image.png'; import { getFileAccessHttpUrl } from '/@/utils/common/compUtils'; import { createImgPreview } from '/@/components/Preview'; import data from "emoji-mart-vue-fast/data/apple.json"; import { EmojiIndex } from "emoji-mart-vue-fast/src"; import { encryptByBase64 } from '/@/utils/cipher'; enum Api { list = '/sys/comment/listByForm', addText = '/sys/comment/addText', deleteOne = '/sys/comment/deleteOne', fileList = '/sys/comment/fileList', logList = '/sys/dataLog/queryDataVerList', queryById = '/sys/comment/queryById', getFileViewDomain = '/sys/comment/getFileViewDomain', } // 文件预览地址的domain 在后台配置的 let onlinePreviewDomain = ''; /** * 获取文件预览的domain */ const getViewFileDomain = () => defHttp.get({ url: Api.getFileViewDomain }); /** * 列表接口 * @param params */ export const list = (params) => defHttp.get({ url: Api.list, params }); export function getGloablEmojiIndex(){ if(window['myEmojiIndex']){ console.log("----走window['myEmojiIndex']缓存,不new新对象!") return window['myEmojiIndex']; } window['myEmojiIndex'] = new EmojiIndex(data, { function() { return true; }, exclude:['recent','people','nature','foods','activity','places','objects','symbols','flags'] }); return window['myEmojiIndex']; } /** * 查询单条记录 * @param params */ export const queryById = (id) => { let params = { id: id }; return defHttp.get({ url: Api.queryById, params },{ isTransformResponse: false }); }; /** * 文件列表接口 * @param params */ export const fileList = (params) => defHttp.get({ url: Api.fileList, params }); /** * 删除单个 */ export const deleteOne = (params) => { return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }); }; /** * 保存 * @param params */ export const saveOne = (params) => { let url = Api.addText; return defHttp.post({ url: url, params }, { isTransformResponse: false }); }; /** * 数据日志列表接口 * @param params */ export const getLogList = (params) => defHttp.get({ url: Api.logList, params }, {isTransformResponse: false}); /** * 文件上传接口 */ export const uploadFileUrl = `${baseUploadUrl}/sys/comment/addFile`; export function useCommentWithFile(props) { let uploadData = { biz: 'comment', commentId: '', }; const { createMessage } = useMessage(); const buttonLoading = ref(false); //确定按钮触发 async function saveCommentAndFiles(obj, fileList) { buttonLoading.value = true; setTimeout(() => { buttonLoading.value = false; }, 500); await saveComment(obj); await uploadFiles(fileList); } /** * 保存评论 */ async function saveComment(obj) { const {fromUserId, toUserId, commentId, commentContent} = obj; let commentData = { tableId: props.tableId, tableName: props.tableName, tableDataId: props.dataId, fromUserId, commentContent, toUserId: '', commentId: '' }; if(toUserId){ commentData.toUserId = toUserId; } if(commentId){ commentData.commentId = commentId; } uploadData.commentId = ''; const res = await saveOne(commentData); if (res.success) { uploadData.commentId = res.result; } else { createMessage.warning(res.message); return Promise.reject('保存评论失败'); } } async function uploadOne(file) { let url = uploadFileUrl; const formData = new FormData(); formData.append('file', file); formData.append('tableName', props.tableName); formData.append('tableDataId', props.dataId); Object.keys(uploadData).map((k) => { formData.append(k, uploadData[k]); }); return new Promise((resolve, reject) => { uploadMyFile(url, formData).then((res: any) => { console.log('uploadMyFile', res); if (res && res.data) { if (res.data.result == 'success') { resolve(1); } else { createMessage.warning(res.data.message); reject(); } } else { reject(); } }); }); } /** * QQYUN-4310【文件】从文件库选择文件功能未做 * @param file */ async function saveSysFormFile(file){ let url = '/sys/comment/addFile'; let params = { fileId: file.id, commentId: uploadData.commentId } await defHttp.post({url, params}, { joinParamsToUrl: true, isTransformResponse: false }); } async function uploadFiles(fileList) { if (fileList && fileList.length > 0) { for (let i = 0; i < fileList.length; i++) { let file = toRaw(fileList[i]); if(file.exist === true){ await saveSysFormFile(file); }else{ await uploadOne(file.originFileObj); } } } } return { saveCommentAndFiles, buttonLoading, }; } export function uploadMu(fileList) { const formData = new FormData(); // let arr = [] for(let file of fileList){ formData.append('files[]', file.originFileObj); } console.log(formData) let url = `${baseUploadUrl}/sys/comment/addFile2`; uploadMyFile(url, formData).then((res: any) => { console.log('uploadMyFile', res); }); } /** * 显示文件列表 */ export function useFileList() { const imageSrcMap = reactive({}); const typeMap = { xls: excel, xlsx: excel, pdf: pdf, txt: txt, docx: word, doc: word, image }; function getBackground(item) { console.log('获取文件背景图', item); if (isImage(item)) { return 'none' } else { const name = item.name; if(!name){ return 'none'; } const suffix = name.substring(name.lastIndexOf('.') + 1); console.log('suffix', suffix) let bg = typeMap[suffix]; if (!bg) { bg = other; } return bg; } } function getImageTypeIcon() { return typeMap['image']; } function getBase64(file, id){ return new Promise((resolve, reject) => { //声明js的文件流 let reader = new FileReader(); if(file){ //通过文件流将文件转换成Base64字符串 reader.readAsDataURL(file); //转换成功后 reader.onload = function () { let base = reader.result; console.log('base', base) imageSrcMap[id] = base; console.log('imageSrcMap', imageSrcMap) resolve(base) } }else{ reject(); } }) } function handleImageSrc(file){ if(isImage(file)){ let id = file.uid; getBase64(file, id); } } function downLoad(file) { let url = getFileAccessHttpUrl(file.url); if (url) { window.open(url); } } function getFileSize(item) { let size = item.fileSize; if (!size) { return '0B'; } let temp = Math.round(size / 1024); return temp + ' KB'; } const selectFileList = ref([]); function beforeUpload(file) { handleImageSrc(file); selectFileList.value = [...selectFileList.value, file]; console.log('selectFileList', unref(selectFileList)); return false } function handleRemove(file) { const index = selectFileList.value.indexOf(file); const newFileList = selectFileList.value.slice(); newFileList.splice(index, 1); selectFileList.value = newFileList; } function isImage(item){ const type = item.type||''; if (type.indexOf('image') >= 0) { return true; } return false; } function getImageSrc(file){ if(file.exist){ return getFileAccessHttpUrl(file.url); } if(isImage(file)){ let id = file.uid; if(id){ if(imageSrcMap[id]){ return imageSrcMap[id]; } }else if(file.url){ //数据库中地址 let url = getFileAccessHttpUrl(file.url); return url; } } return '' } /** * 显示图片 * @param item */ function getImageAsBackground(item){ let url; if(item.exist){ url = getFileAccessHttpUrl(item.url); }else{ url = getImageSrc(item); } if(url){ return { "backgroundImage": "url('"+url+"')" } } return {} } /** * 预览列表 cell 图片 * @param text */ async function viewImage(file) { if(isImage(file)){ let text = getImageSrc(file) if (text) { let imgList = [text]; createImgPreview({ imageList: imgList }); } }else{ if(file.url){ //数据库中地址 let url = getFileAccessHttpUrl(file.url); await initViewDomain(); //本地测试需要将文件地址的localhost/127.0.0.1替换成IP, 或是直接修改全局domain //url = url.replace('localhost', '192.168.1.100') //update-begin---author:scott ---date:2024-06-03 for:【TV360X-952】升级到kkfileview4.1.0--- let previewUrl = encodeURIComponent(encryptByBase64(url)); window.open(onlinePreviewDomain+'?url='+previewUrl); //update-end---author:scott ---date::2024-06-03 for:【TV360X-952】升级到kkfileview4.1.0---- } } } /** * 初始化domain */ async function initViewDomain(){ if(!onlinePreviewDomain){ onlinePreviewDomain = await getViewFileDomain(); } if(!onlinePreviewDomain.startsWith('http')){ onlinePreviewDomain = 'http://'+ onlinePreviewDomain; } } return { selectFileList, getBackground, getFileSize, downLoad, beforeUpload, handleRemove, isImage, getImageSrc, getImageAsBackground, viewImage, getImageTypeIcon }; } /** * 用于emoji渲染 */ export function useEmojiHtml(globalEmojiIndex){ const COLONS_REGEX = new RegExp('([^:]+)?(:[a-zA-Z0-9-_+]+:(:skin-tone-[2-6]:)?)','g'); function getHtml(text) { if(!text){ return '' } return text.replace(COLONS_REGEX, function (match, p1, p2) { const before = p1 || '' if (endsWith(before, 'alt="') || endsWith(before, 'data-text="')) { return match } let emoji = globalEmojiIndex.findEmoji(p2) if (!emoji) { return match } return before + emoji2Html(emoji) }) return text; } function endsWith(str, temp){ return str.endsWith(temp) } function emoji2Html(emoji) { let style = `position: absolute;top: -3px;left: 3px;width: 18px; height: 18px;background-position: ${emoji.getPosition()}` return ` ` } return { globalEmojiIndex, getHtml } } /** * 获取modal窗体高度 */ export function getModalHeight(){ return window.innerHeight; }