agilebuilder-ui 1.1.65-tmp8 → 1.1.65-tmp9

package/packages/fs-upload-new/src/fs-preview-new.vue

@@ -1,380 +0,0 @@
-<template>
-  <div>
-    <div v-if="!isMobile">
-      <div v-for="(file, index) in fileList" :key="index" style="width: 100%">
-        <el-tag color="white" size="large" class="amb-fs-preview-tag">
-          <template #default>
-            <div style="display: flex; align-items: center">
-              <!-- 'amb-color-icon-XLS' -->
-              <super-icon :iconValue="getFileIconByName(file.showName)" />
-              <template v-if="disabled && disabledNoPreview">
-                <span style="cursor: no-drop">
-                  <span style="margin-left: 6.5px">{{ file.showName }}</span>
-                </span>
-              </template>
-              <template v-if="!disabled || !disabledNoPreview">
-                <el-tooltip :content="t('fsUpload.preview')" placement="top">
-                  <span style="cursor: pointer" @click="preview(file.showName, file.serverPath)">
-                    <span style="margin-left: 6.5px">{{ file.showName }}</span>
-                  </span>
-                </el-tooltip>
-              </template>
-              <el-tooltip v-if="!disabled || !disabledNoDownload" :content="t('fsUpload.download')" placement="top">
-                <!-- <el-icon style="margin-left: 10px" @click="handleDownload(file)">
-                  <Download />
-                </el-icon> -->
-                <super-icon class="fs-preview-icon" @click="handleDownload(file)" iconValue="amb-color-icon-xiazai" />
-              </el-tooltip>
-              <el-tooltip v-if="!disabled" :content="t('fsUpload.delete')" placement="top">
-                <super-icon class="fs-preview-icon" @click="handleOnRemove(file)" iconValue="amb-color-icon-shanchu" />
-              </el-tooltip>
-            </div>
-          </template>
-        </el-tag>
-      </div>
-    </div>
-    <span v-else class="el-upload-list__item-actions mobile-item-action">
-      <span
-        v-if="isPreview(file.showName ? file.showName : file.name)"
-        class="el-upload-list__item-preview"
-        @click="preview(file.showName ? file.showName : file.name, file.serverPath)"
-      >
-        <el-icon><zoom-in /></el-icon>
-      </span>
-      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
-        <el-icon><Download /></el-icon>
-      </span>
-      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleOnRemove(file)">
-        <el-icon><Delete /></el-icon>
-      </span>
-    </span>
-    <el-dialog v-model="dialogVisible" :title="t('fsUpload.preview')" width="500">
-      <el-image :preview-src-list="previewSrcList" :src="previewImageInfo.src" />
-    </el-dialog>
-  </div>
-</template>
-<style scoped>
-/* .el-upload-list--picture-card .el-upload-list__item-actions, */
-.mobile-item-action {
-  z-index: 2000;
-}
-</style>
-<script setup lang="ts">
-import { Close, Paperclip, Download } from '@element-plus/icons-vue'
-import { ref, defineProps } from 'vue'
-import {
-  getSystemFrontendUrlWith,
-  isPlateSys,
-  isMobileBrowser,
-  getReplaceUrlDomain,
-  getRelativeBaseUrl,
-  getKkFilePreviewUrl
-} from '../../../src/utils/common-util'
-import { getToken } from '../../../src/utils/auth'
-import { isImage } from '../../../src/utils/util'
-import { Base64 } from 'js-base64'
-import { getFileIconByName } from '../../../src/utils/file-util'
-import { useI18n } from 'vue-i18n'
-import { getWatermarkSetting } from '../../../src/utils/watermark'
-const { t } = useI18n()
-const props = defineProps({
-  systemCode: {
-    type: String,
-    default: ''
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  // 可下载
-  downloadable: {
-    type: Boolean,
-    default: true
-  },
-  fileList: {
-    type: Array<{ showName: string; serverPath: string }>,
-    default: () => []
-  },
-  pageContext: {
-    type: Object,
-    default: () => ({})
-  },
-  configure: {
-    type: Object,
-    default: () => ({})
-  },
-  beforeRemove: {
-    type: Function,
-    default: () => {}
-  },
-  onRemove: {
-    type: Function,
-    default: () => {}
-  },
-  beforeDownload: {
-    type: Function,
-    default: () => {}
-  },
-  file: {
-    type: Object,
-    default: null
-  },
-  baseURL: {
-    type: String,
-    default: null
-  },
-  // 是否禁用时也可预览
-  disabledNoPreview: {
-    type: Boolean,
-    default: false
-  },
-  // 是否禁用时也可下载
-  disabledNoDownload: {
-    type: Boolean,
-    default: false
-  },
-  // 水印配置{isShowWatermark:true/false,content:'xxxxx'}
-  watermark: {
-    type: Object,
-    default: () => ({})
-  }
-})
-let baseURL = props.baseURL ? props.baseURL : window.$vueApp.config.globalProperties.baseURL
-let baseAPI = window.$vueApp.config.globalProperties.baseAPI
-baseURL = getRelativeBaseUrl(baseURL)
-baseAPI = getRelativeBaseUrl(baseAPI)
-if (!props.watermark.content) {
-  // 如果没有传水印配置，从按钮配置configure中获取
-  props.watermark.isShowWatermark =
-    props.configure.props?.watermark?.isShowWatermark === undefined
-      ? 'true'
-      : props.configure.props?.watermark.isShowWatermark + ''
-  props.watermark.content = props.configure.props?.watermark?.content
-}
-const dialogVisible = ref<boolean>(false)
-const previewImageInfo = ref<any>({})
-const previewSrcList = ref<string[]>([])
-const isMobile = ref(isMobileBrowser())
-const emits = defineEmits(['remove'])
-let watermarkCache = null
-getWatermarkSetting().then((data) => {
-  watermarkCache = data
-})
-const handleDownload = (file: any) => {
-  if (isPromise(props.beforeDownload)) {
-    props.beforeDownload(props.pageContext, props.configure, file).then((res: any) => {
-      if (res === false) {
-        console.log('beforeDownload=false')
-      } else {
-        download(file)
-      }
-    })
-  } else {
-    if (props.beforeDownload(props.pageContext, props.configure, file) === false) {
-      console.log('beforeDownload=false')
-    } else {
-      download(file)
-    }
-  }
-}
-const download = (file: any) => {
-  const token = getToken()
-  const fileName = file.showName ? file.showName : file.name
-  const showName = fileName.replace('#', '~~').replace('?', '~$').replace('&', '$')
-  let isShowWatermark = false
-  if (watermarkCache && watermarkCache.useRange && watermarkCache.useRange.indexOf('annex') >= 0) {
-    isShowWatermark = props.watermark?.isShowWatermark
-  }
-  let watermarkContent = props.watermark?.content
-  if (!watermarkContent) {
-    watermarkContent = ''
-  }
-  let url =
-    baseURL +
-    '/common/super-form/downloads?showName=' +
-    encodeURI(showName) +
-    '&serverPath=' +
-    file.serverPath +
-    '&jwt=' +
-    token +
-    '&isShowWatermark=' +
-    isShowWatermark +
-    '&watermark=' +
-    encodeURI(watermarkContent)
-  if (isPlateSys(props.systemCode)) {
-    url =
-      baseAPI +
-      '/component/super-form/downloads?showName=' +
-      encodeURI(showName) +
-      '&serverPath=' +
-      file.serverPath +
-      '&jwt=' +
-      token
-  }
-  window.location.href = url
-}
-const handleOnRemove = (file: any) => {
-  let isCanRemove = true
-  if (props.beforeRemove && typeof props.beforeRemove === 'function') {
-    const isMobile = true
-    isCanRemove = props.beforeRemove(props.pageContext, props.configure, file, isMobile)
-  }
-  if (isCanRemove !== undefined && !isCanRemove) {
-    // 不能删除文件
-    return
-  }
-  const index = props.fileList.findIndex(
-    (item: any) => item.serverPath === file.uuid || item.serverPath === file.serverPath
-  )
-  console.log('handleOnRemove----props.fileList=', props.fileList, 'index=', index)
-  props.fileList.splice(index, 1)
-  emits('remove', { file, index: index })
-  props.onRemove(file)
-}
-
-const isPromise = (p: any) => {
-  return p && Object.prototype.toString.call(p) === '[object Promise]'
-}
-const preview = (showName: string, serverPath: string) => {
-  console.log('preview----props.fileList=', props.fileList)
-  if (props.disabled && props.disabledNoPreview) {
-    return
-  }
-  let isImg = false
-  if (showName && isImage(showName)) {
-    isImg = true
-  }
-  if (isImg) {
-    previewImageInfo.value.src = getPreviewSrc(showName, serverPath)
-    const srcList: string[] = []
-    props.fileList.forEach((item: any) => {
-      const fileName = item.showName ? item.showName : item.name
-      srcList.push(getPreviewSrc(fileName, item.serverPath))
-    })
-    previewSrcList.value = srcList
-    dialogVisible.value = true
-  } else {
-    // 移动端时不能预览文档
-    previweDoc(showName, serverPath)
-  }
-}
-
-const previweDoc = (showName: string, serverPath: string) => {
-  const token = getToken()
-  showName = showName = formatName(showName)
-  if (window.$vueApp.config.globalProperties.customPreviewUrl) {
-    window.open(
-      getSystemFrontendUrlWith(window.$vueApp.config.globalProperties.portalUrl) +
-        '/#/file-service/preview?serverPath=' +
-        serverPath +
-        '&showName=' +
-        encodeURI(showName),
-      showName
-    )
-  } else {
-    let baseUrl = baseURL
-    if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
-      baseUrl = baseAPI
-    }
-    let previewUrl
-    if (window.$vueApp.config.globalProperties.kkFileViewUrl) {
-      const originUrl =
-        baseUrl +
-        '/common/super-form/downloads?jwt=' +
-        token +
-        '&showName=' +
-        encodeURI(showName) +
-        '&serverPath=' +
-        serverPath
-      //要预览文件的访问地址
-      const myPreviewUrl = originUrl + '&fullfilename=' + showName
-      console.log('myPreviewUrl====', myPreviewUrl)
-      // http://127.0.0.1:8012/onlinePreview
-      getKkFilePreviewUrl(myPreviewUrl).then((url) => {
-        window.open(url, showName)
-      })
-      // previewUrl =
-      //   window.$vueApp.config.globalProperties.kkFileViewUrl + '?url=' + encodeURIComponent(Base64.encode(myPreviewUrl))
-      console.log('previewUrl====', previewUrl)
-    } else {
-      previewUrl = baseUrl + '/common/fs-upload/preview?jwt=' + token
-      previewUrl = previewUrl + '&showName=' + encodeURI(showName) + '&serverPath=' + serverPath
-      previewUrl = getRelativeBaseUrl(previewUrl)
-      window.open(previewUrl, showName)
-    }
-  }
-}
-function getPreviewSrc(showName: string, serverPath: string) {
-  showName = formatName(showName)
-  const token = getToken()
-  let isShowWatermark = false
-  if (watermarkCache && watermarkCache.useRange && watermarkCache.useRange.indexOf('annex') >= 0) {
-    isShowWatermark = props.watermark?.isShowWatermark
-  }
-  let watermarkContent = props.watermark?.content
-  if (!watermarkContent) {
-    watermarkContent = ''
-  }
-  let url =
-    baseURL +
-    '/common/super-form/downloads?jwt=' +
-    token +
-    '&isShowWatermark=' +
-    isShowWatermark +
-    '&watermark=' +
-    encodeURI(watermarkContent)
-  if (isPlateSys(props.systemCode)) {
-    url =
-      baseAPI +
-      '/component/super-form/downloads?jwt=' +
-      token +
-      '&isShowWatermark=' +
-      isShowWatermark +
-      '&watermark=' +
-      encodeURI(watermarkContent)
-  }
-  url = getReplaceUrlDomain(url)
-  return url + '&showName=' + encodeURI(showName) + '&serverPath=' + serverPath
-}
-
-const formatName = (showName: string) => {
-  if (showName) {
-    showName = showName.replace('#', '~~').replace('?', '~$').replace('&', '$')
-  }
-  return showName
-}
-
-const isPreview = (fileName: string) => {
-  if (isMobile.value) {
-    if (fileName && isImage(fileName)) {
-      // 移动端时，只能预览图片
-      return true
-    }
-  } else {
-    return true
-  }
-  return false
-}
-</script>
-<style lang="scss" scoped>
-.amb-color-iconfont {
-  width: 25px;
-  height: 25px;
-}
-.fs-preview-icon {
-  font-size: 15px !important;
-  display: inline-block;
-  width: 1em !important;
-  height: 1em !important;
-  line-height: 1em;
-  cursor: pointer;
-
-  &:not(:first-of-type) {
-    margin-left: 20px;
-  }
-
-  & + & {
-    margin-left: 5px;
-  }
-}
-</style>