mky-vent-base/src/components/jeecg/comment/useComment.ts

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 { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { createImgPreview } from '/@/components/Preview';

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 });

/**
 * 查询单条记录
 * @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 = {
      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();
        }
      });
    });
  }

  async function uploadFiles(fileList) {
    if (fileList && fileList.length > 0) {
      for (let i = 0; i < fileList.length; i++) {
        let file = toRaw(fileList[i]);
        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,
  };
   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 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<any[]>([]);
  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(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 = 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')
        //如果集成的KkFileview-v3.3.0+ 需要对url再做一层base64编码 encodeURIComponent(encryptByBase64(url))
        window.open(onlinePreviewDomain+'?officePreviewType=pdf&url='+encodeURIComponent(url));
      }
    }
  }

  /**
   * 初始化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
  };
}

/**
 * 用于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 `<span style="width: 24px" class="emoji-mart-emoji"><span class="my-emoji-icon emoji-set-apple emoji-type-image" style="${style}"> </span> </span>`
  }
  
  return {
    globalEmojiIndex,
    getHtml
  }
}

/**
 * 获取modal窗体高度
 */
export function getModalHeight(){
  return window.innerHeight;
}