agilebuilder-ui 1.0.18 → 1.0.19-beta2

package/packages/fs-upload-new/index.ts

@@ -0,0 +1,6 @@
+import FsUploadNew from './src/fs-upload-new.vue'
+FsUploadNew.install = function (Vue) {
+  window.$vueApp.component(FsUploadNew.name, FsUploadNew)
+}
+
+export default FsUploadNew

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

@@ -0,0 +1,129 @@
+<template>
+  <el-upload
+    class="upload-demo"
+    :accept="accept"
+    :limit="limit"
+    :show-file-list="false"
+    auto-upload
+    :headers="headers"
+    :action="defaultAction"
+    :multiple="multiple"
+    :before-upload="handleBeforeUpload"
+    :before-remove="beforeRemove"
+    :on-success="onSuccess"
+  >
+    <el-button type="primary">{{ placeholder }}</el-button>
+    <template #tip>
+      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+    </template>
+  </el-upload>
+  <template v-if="fileList && fileList.length > 0">
+    <fs-preview-new :disabled="disabled" :file-list="fileList" :system-code="systemCode" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps } from 'vue'
+import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
+import { getToken } from '../../../src/utils/auth'
+import type { UploadFile, UploadFiles } from 'element-plus'
+import fsPreviewNew from './fs-preview-new.vue'
+const props = defineProps({
+  systemCode: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  accept: {
+    type: String,
+    default: ''
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  limit: {
+    type: Number,
+    default: 1
+  },
+  limitFileSize: {
+    type: Number,
+    default: 30
+  },
+  placeholder: {
+    type: String,
+    default: '拖拽文件 或 点击上传'
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  headers: {
+    type: Object,
+    default: () => ({ Authorization: null })
+  },
+  fileList: {
+    type: Array<{ showName: string; serverPath: string }>,
+    default: () => []
+  },
+  handleBeforeUpload: {
+    type: Function,
+    default: () => {}
+  },
+  onSuccess: {
+    type: Function,
+    default: () => {}
+  },
+  beforeRemove: {
+    type: Function,
+    default: () => {}
+  },
+  onRemove: {
+    type: Function,
+    default: () => {}
+  },
+  beforeDownload: {
+    type: Function,
+    default: () => {}
+  },
+  pageContext: {
+    type: Object,
+    default: () => ({})
+  },
+  configure: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const baseURL = window.$vueApp.config.globalProperties.baseURL
+const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+const defaultAction = ref<string>('')
+
+if (props.action) {
+  defaultAction.value = props.action
+} else {
+  let tempAction = baseURL + '/common/fs-upload'
+  if (!isPlateSys(props.systemCode)) {
+    tempAction = baseAPI + '/component/super-form/uploads'
+  }
+  defaultAction.value = tempAction
+}
+if (!props.headers || !props.headers['Authorization']) {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.headers.Authorization = getToken()
+}
+const handleBeforeUpload = (file: File) => {
+  return props.handleBeforeUpload(file)
+}
+const onSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.fileList.push({
+    showName: response.name,
+    serverPath: response.serverPath
+  })
+  props.onSuccess(response, uploadFile, uploadFiles)
+}
+</script>

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

@@ -0,0 +1,132 @@
+<template>
+  <el-upload
+    class="upload-demo"
+    :accept="accept"
+    :limit="limit"
+    :show-file-list="false"
+    drag
+    auto-upload
+    :headers="headers"
+    :action="defaultAction"
+    :multiple="multiple"
+    :before-upload="handleBeforeUpload"
+    :before-remove="beforeRemove"
+    :on-success="onSuccess"
+  >
+    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+    <div class="el-upload__text">{{ placeholder }}</div>
+    <template #tip>
+      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+    </template>
+  </el-upload>
+  <template v-if="fileList && fileList.length > 0">
+    <fs-preview-new :disabled="disabled" :file-list="fileList" :system-code="systemCode" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { UploadFilled } from '@element-plus/icons-vue'
+import { ref, defineProps } from 'vue'
+import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
+import { getToken } from '../../../src/utils/auth'
+import type { UploadFile, UploadFiles } from 'element-plus'
+import fsPreviewNew from './fs-preview-new.vue'
+const props = defineProps({
+  systemCode: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  accept: {
+    type: String,
+    default: ''
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  limit: {
+    type: Number,
+    default: 1
+  },
+  limitFileSize: {
+    type: Number,
+    default: 30
+  },
+  placeholder: {
+    type: String,
+    default: '拖拽文件 或 点击上传'
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  headers: {
+    type: Object,
+    default: () => ({ Authorization: null })
+  },
+  fileList: {
+    type: Array<{ showName: string; serverPath: string }>,
+    default: () => []
+  },
+  handleBeforeUpload: {
+    type: Function,
+    default: () => {}
+  },
+  onSuccess: {
+    type: Function,
+    default: () => {}
+  },
+  beforeRemove: {
+    type: Function,
+    default: () => {}
+  },
+  onRemove: {
+    type: Function,
+    default: () => {}
+  },
+  beforeDownload: {
+    type: Function,
+    default: () => {}
+  },
+  pageContext: {
+    type: Object,
+    default: () => ({})
+  },
+  configure: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const baseURL = window.$vueApp.config.globalProperties.baseURL
+const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+const defaultAction = ref<string>('')
+
+if (props.action) {
+  defaultAction.value = props.action
+} else {
+  let tempAction = baseURL + '/common/fs-upload'
+  if (!isPlateSys(props.systemCode)) {
+    tempAction = baseAPI + '/component/super-form/uploads'
+  }
+  defaultAction.value = tempAction
+}
+if (!props.headers || !props.headers['Authorization']) {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.headers.Authorization = getToken()
+}
+const handleBeforeUpload = (file: File) => {
+  return props.handleBeforeUpload(file)
+}
+const onSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.fileList.push({
+    showName: response.name,
+    serverPath: response.serverPath
+  })
+  props.onSuccess(response, uploadFile, uploadFiles)
+}
+</script>

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

@@ -0,0 +1,199 @@
+<template>
+  <div v-for="(file, index) in fileList" :key="index" style="width: 100%">
+    <el-tag>
+      <el-tooltip content="预览" placement="top">
+        <span style="cursor: pointer" @click="preview(file.showName, file.serverPath)">
+          <el-icon><Paperclip /></el-icon>
+          <span style="margin-left: 6.5px">{{ file.showName }}</span>
+        </span>
+      </el-tooltip>
+      <el-tooltip content="下载" placement="top">
+        <el-icon style="cursor: pointer; padding-left: 15px" @click="handleDownload(file)">
+          <Download />
+        </el-icon>
+      </el-tooltip>
+      <el-tooltip content="移除" placement="top">
+        <el-icon @click="handleOnRemove(file)"><Close /></el-icon>
+      </el-tooltip>
+    </el-tag>
+    <el-dialog v-model="dialogVisible" title="预览" width="500">
+      <el-image :preview-src-list="previewSrcList" :src="previewImageInfo.src" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Close, Paperclip, Download } from '@element-plus/icons-vue'
+import { ref, defineProps } from 'vue'
+import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
+import { getToken } from '../../../src/utils/auth'
+const props = defineProps({
+  systemCode: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  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: () => {}
+  }
+})
+const baseURL = window.$vueApp.config.globalProperties.baseURL
+const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+
+const dialogVisible = ref<boolean>(false)
+const previewImageInfo = ref<any>({})
+const previewSrcList = ref<string[]>([])
+
+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 showName = file.showName.replace('#', '~~').replace('?', '~$').replace('&', '$')
+  let url =
+    baseURL +
+    '/common/super-form/downloads?showName=' +
+    encodeURI(showName) +
+    '&serverPath=' +
+    file.serverPath +
+    '&jwt=' +
+    token
+  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) => {
+  props.beforeRemove(props.pageContext, props.configure, file)
+  const idnex = props.fileList.findIndex((item: any) => item.serverPath === file.uuid)
+  // eslint-disable-next-line vue/no-mutating-props
+  props.fileList.splice(idnex, 1)
+  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')
+
+  let isImage = false
+  if (showName && /\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF|bmp|BMP|psd|PSD|tif|TIF)$/.test(showName)) {
+    isImage = true
+  }
+  if (isImage) {
+    previewImageInfo.value.src = getPreviewSrc(showName, serverPath)
+    const srcList: string[] = []
+    props.fileList.forEach((item: any) => {
+      srcList.push(getPreviewSrc(item.showName, 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(
+      getSystemFrontendUrl(window.$vueApp.config.globalProperties.portalUrl) +
+        '/#/file-service/preview?serverPath=' +
+        serverPath +
+        '&showName=' +
+        encodeURI(showName),
+      showName
+    )
+  } else {
+    let baseUrl = window.$vueApp.config.globalProperties.baseURL
+    if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+      baseUrl = window.$vueApp.config.globalProperties.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
+      previewUrl = window.$vueApp.config.globalProperties.kkFileViewUrl + '?url=' + 1
+      // encodeURIComponent(Base64.encode(myPreviewUrl))
+      console.log('previewUrl====', previewUrl)
+    } else {
+      previewUrl = baseUrl + '/common/fs-upload/preview?jwt=' + token
+      previewUrl = previewUrl + '&showName=' + encodeURI(showName) + '&serverPath=' + serverPath
+    }
+    window.open(previewUrl, showName)
+  }
+}
+function getPreviewSrc(showName: string, serverPath: string) {
+  showName = formatName(showName)
+  const token = getToken()
+  let url = baseURL + '/common/super-form/downloads?jwt=' + token
+  if (!isPlateSys(props.systemCode)) {
+    url = baseAPI + '/component/super-form/downloads?jwt=' + token
+  }
+  return url + '&showName=' + encodeURI(showName) + '&serverPath=' + serverPath
+}
+
+const formatName = (showName: string) => {
+  if (showName) {
+    showName = showName.replace('#', '~~').replace('?', '~$').replace('&', '$')
+  }
+  return showName
+}
+</script>

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

@@ -0,0 +1,149 @@
+<template>
+  <FsUploadList
+    v-if="displayType === 'input'"
+    :value="listFileLabel"
+    :row="entity"
+    :disabled="disabled"
+    :fileInfo="fileInfo"
+    :fileSetObj="{ accept: accept, multiple: multiple, limitFileSize: limitFileSize }"
+    @upload-success="onListUploadSuccess"
+  />
+  <fs-button-upload
+    v-else-if="displayType === 'button'"
+    :disabled="disabled"
+    :fileInfo="fileInfo"
+    :systemCode="systemCode"
+    :accept="accept"
+    :multiple="multiple"
+    :limit="limit"
+    :limitFileSize="limitFileSize"
+    :placeholder="placeholder"
+    :action="action"
+    :headers="headers"
+    :file-list="fileList"
+    :handleBeforeUpload="handleBeforeUpload"
+    :onSuccess="onSuccess"
+    :beforeRemove="beforeRemove"
+    :onRemove="onRemove"
+    :beforeDownload="beforeDownload"
+    :pageContext="pageContext"
+    :configure="configure"
+  />
+  <fs-drag-upload
+    v-else-if="displayType === 'drag'"
+    :disabled="disabled"
+    :fileInfo="fileInfo"
+    :systemCode="systemCode"
+    :accept="accept"
+    :multiple="multiple"
+    :limit="limit"
+    :limitFileSize="limitFileSize"
+    :placeholder="placeholder"
+    :action="action"
+    :headers="headers"
+    :file-list="fileList"
+    :handleBeforeUpload="handleBeforeUpload"
+    :onSuccess="onSuccess"
+    :beforeRemove="beforeRemove"
+    :onRemove="onRemove"
+    :beforeDownload="beforeDownload"
+    :pageContext="pageContext"
+    :configure="configure"
+  />
+</template>
+<script setup lang="ts">
+import FsDragUpload from './fs-drag-upload.vue'
+import FsButtonUpload from './fs-button-upload.vue'
+import { ref, defineProps } from 'vue'
+const props = defineProps({
+  entity: {
+    type: Object,
+    default: () => {
+      return null
+    }
+  },
+  fileInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  systemCode: {
+    type: String,
+    default: ''
+  },
+  displayType: {
+    type: String,
+    default: 'input'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  accept: {
+    type: String,
+    default: ''
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  limit: {
+    type: Number,
+    default: 1
+  },
+  limitFileSize: {
+    type: Number,
+    default: 30
+  },
+  placeholder: {
+    type: String,
+    default: '拖拽文件 或 点击上传'
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  headers: {
+    type: Object,
+    default: () => ({ Authorization: null })
+  },
+  fileList: {
+    type: Array<{ showName: string; serverPath: string }>,
+    default: () => []
+  },
+  handleBeforeUpload: {
+    type: Function,
+    default: () => {}
+  },
+  onSuccess: {
+    type: Function,
+    default: () => {}
+  },
+  beforeRemove: {
+    type: Function,
+    default: () => {}
+  },
+  onRemove: {
+    type: Function,
+    default: () => {}
+  },
+  beforeDownload: {
+    type: Function,
+    default: () => {}
+  },
+  pageContext: {
+    type: Object,
+    default: () => ({})
+  },
+  configure: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const listFileLabel = ref<string>('')
+if (props.displayType === 'input') {
+  listFileLabel.value = props.fileInfo.showName || ''
+}
+const onListUploadSuccess = (res: any) => {
+  listFileLabel.value = res.showName
+}
+</script>

package/packages/index.js

@@ -36,6 +36,7 @@ import IntervalSelection from './IntervalSelection'
 import DepartmentTreeMobile from './department-tree-mobile'
 import DepartmentUserTreeMobile from './department-user-tree-mobile'
 import SuperIcon from './super-icon'
+import FsUploadNew from './fs-upload-new'
 import * as ElementPlusIconsVue from "@element-plus/icons-vue"
 // 将所有组件都存储起来,方便后续统一注册
 const components = [
@@ -71,7 +72,8 @@ const components = [
   IntervalSelection,
   DepartmentTreeMobile,
   DepartmentUserTreeMobile,
-  SuperIcon
+	SuperIcon,
+	FsUploadNew
 ]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
@@ -128,7 +130,8 @@ export {
   SecretInfo,
   DepartmentTreeMobile,
   DepartmentUserTreeMobile,
-  SuperIcon
+	SuperIcon,
+	FsUploadNew
 }
 
 export default {