@kyfe/fms-vue2-components 0.0.8 → 0.0.11

package/src/components/fms-ks-uploader/fms-ks-uploader.vue

@@ -0,0 +1,570 @@
+<template>
+  <component
+    :is="component"
+    class="uploader-wrapper"
+    v-bind="attrs"
+  >
+    <div v-for="(item, index) in fileList" :key="item.url" class="preview-item">
+      <img :class="{ pdf: getFileType(item) === 'pdf' }" :src="getImg(item)" alt="img" />
+      <div v-if="!disabled" class="close-icon" @click.prevent="onDeleteFile(item, index)"></div>
+      <div v-if="!isImage(item)" class="preview-text">
+        {{ item.name }}
+      </div>
+    </div>
+    <div v-if="!isHideUploadBtn" class="upload-button" @click="chooseSelectMode">
+      <van-icon name="plus" />
+    </div>
+    <van-action-sheet
+      v-model="isShowAction"
+      :actions="actions"
+      @select="onActionSelect"
+    />
+  </component>
+</template>
+
+<script>
+import { isIos } from '@kyfe/fms-utils/device'
+import { isEqual, get, invoke, merge } from 'lodash'
+
+/** 文件选择的方式 */
+const ALLOW_METHODS = {
+  /** 从相册选择 */
+  ALBUM: 0,
+  /** 从文件选择 */
+  FILE: 1,
+  /** 拍照 */
+  CAMERA: 2,
+}
+
+const MODE = {
+  /** 使用腾讯云上传 */
+  TENCENT: 0,
+  /** 使用基础服务部的上传 */
+  KYE: 1,
+}
+
+export default {
+  name: "FmsKsUploader",
+  props: {
+    sortable: Boolean,
+    disabled: Boolean,
+    isHideUploadBtn: Boolean,
+    component: {
+      type: [String, Object, Function],
+      default: 'div'
+    },
+    mode: {
+      type: Number,
+      default: MODE.KYE,
+    },
+    accept: {
+      type: Array,
+      default: () => [],
+    },
+    limit: {
+      type: Number,
+      default: 9,
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    /** 最大上传MB */
+    maxSize: Number,
+    /** action面板显示之前的回调，返回true就不展示面板 */
+    beforeActionSheetShow: Function,
+    /** 配置actionSheet允许的方式, 0从相册选择, 1从文件选择, 2拍照 */
+    allowMethods: {
+      type: Array,
+      default: () => [ALLOW_METHODS.ALBUM, ALLOW_METHODS.FILE, ALLOW_METHODS.CAMERA],
+    },
+    /** 上传之前的函数，返回true则忽略本次上传 */
+    beforeUpload: Function,
+    /** 获取原生方法的参数 */
+    getNativeFnParams: Function,
+    /** 根据文件信息获取文件类型的方法 */
+    getFileTypeFn: Function,
+    /** 获取腾讯云upload配置的方法 */
+    getTencentUploadConfig: Function,
+    /** 基础服务部上传的bizCode */
+    bizCode: String,
+    /** 基础服务部上传的bizId */
+    bizId: String,
+    /** 如果需要根据id进行排序则需要传此属性 */
+    fileIdSortList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      fileList: [...this.value],
+      isShowAction: false,
+      insetBizId: '',
+      tokenConfig: {},
+      uploadId: String(Date.now()),
+    }
+  },
+  computed: {
+    attrs() {
+      return merge({
+        list: this.fileList,
+        handle: '.preview-item',
+        ghostClass: 'ghost',
+        disabled: !this.sortable || this.disabled,
+        options: {
+          delay: 100
+        }
+      }, this.$attrs)
+    },
+    actions() {
+      const allActions = [
+        { name: '从相册选择', id: ALLOW_METHODS.ALBUM },
+        { name: '从文件选择', id: ALLOW_METHODS.FILE },
+        { name: '拍照', id: ALLOW_METHODS.CAMERA },
+      ]
+      return this.allowMethods.map((idx) => allActions[idx])
+    },
+    actionFnMap() {
+      return [this.getFileFromAlbum, this.getFileFromFolder, this.getFileFromCamera]
+    },
+    /**
+     * 是否上传到基础服务部
+     */
+    ifToKye() {
+      return this.mode === MODE.KYE
+    },
+  },
+  watch: {
+    value(v) {
+      const { fileList } = this
+      const isSame = isEqual(
+        v.map((it) => it.id),
+        fileList.map((it) => it.id)
+      )
+      if (isSame) {
+        return
+      }
+      this.fileList = v
+    },
+    fileList() {
+      this.$emit('input', this.fileList)
+    },
+    bizId() {
+      this.getFilesByBizId()
+    },
+    bizCode() {
+      this.getFilesByBizId()
+    },
+  },
+  mounted() {
+    if (this.ifToKye) {
+      this.getFilesByBizId()
+    }
+  },
+  methods: {
+    async getSortedFiledList(bizId, bizCode) {
+      const params = this.fileIdSortList.map((sourceFileId) => ({
+        sourceBizId: bizId,
+        sourceBizCode: bizCode,
+        sourceFileId,
+        targetBizId: this.insetBizId,
+        targetBizCode: bizCode,
+      }))
+      const fileList = await this.$http('file.file.copyBucketFile', '10214', params)
+      this.fileList = fileList
+    },
+    async getDefaultFieldList(bizId, bizCode) {
+      const fileList = await this.$http('file.file.copyBucket', '10214', [
+        {
+          sourceBizId: bizId,
+          sourceBizCode: bizCode,
+          targetBizId: this.insetBizId,
+          targetBizCode: bizCode,
+        },
+      ])
+      this.fileList = fileList
+    },
+    async getFilesByBizId() {
+      const { bizId, bizCode } = this
+      if (!bizId || !bizCode) {
+        return
+      }
+      await this.getBizId()
+      if (this.fileIdSortList.length) {
+        this.getSortedFiledList(bizId, bizCode)
+      } else {
+        this.getDefaultFieldList(bizId, bizCode)
+      }
+    },
+    async getUploadToken() {
+      const isNeedReGet = get(this.tokenConfig, 'expiredTime', 0) * 1000 < Date.now()
+      if (!isNeedReGet) {
+        return this.tokenConfig
+      }
+      const res = await this.getTencentUploadConfig()
+      this.tokenConfig = res
+      return this.tokenConfig
+    },
+    async onDeleteFile(item, index) {
+      if (this.ifToKye) {
+        const loading = window.vant.Toast.loading({ forbidClick: true, duration: 0 })
+        try {
+          await this.$http('file.deleteByIds', '10147', { ids: [item.id] })
+        } catch (e) {
+          console.log(e)
+        } finally {
+          if (loading.type === 'loading') {
+            window.vant.Toast.clear()
+          }
+        }
+      }
+      this.fileList.splice(index, 1)
+    },
+    getFileType(fileInfo) {
+      if (typeof this.getFileTypeFn === 'function') {
+        return this.getFileTypeFn(fileInfo)
+      }
+      const extendName = fileInfo.extendName.toLowerCase()
+      if (extendName === 'pdf') {
+        return 'pdf'
+      }
+      if (['doc', 'docx', 'xls', 'xlsx'].includes(extendName)) {
+        return 'doc'
+      }
+      if (extendName === 'mp4') {
+        return 'video'
+      }
+      return 'img'
+    },
+    isImage(fileInfo) {
+      const fileType = this.getFileType(fileInfo)
+      return fileType === 'img'
+    },
+    getImg(fileInfo) {
+      const imgMap = {
+        pdf: 'https://erphostjs.kye-erp.com/fms/fms-deposit-new/introduce/PDF.svg',
+        doc: 'https://erphostjs.kye-erp.com/fms/fms-deposit-new/introduce/word-icon.png',
+        img: fileInfo.url,
+        video:
+          'https://erphostjs.kye-erp.com/fms/fms-deposit-new/introduce/video-icon.webp',
+      }
+      const fileType = this.getFileType(fileInfo)
+      return imgMap[fileType] || imgMap.pdf
+    },
+    async getFileFromAlbum() {
+      const loading = window.vant.Toast.loading({ forbidClick: true, duration: 0 })
+      try {
+        const params = {
+          totalCount: this.limit,
+          usedOriginal: true,
+        }
+        if (isIos) {
+          // 640 960 1280 1920 3840
+          params.presetName = '1280'
+        } else {
+          /**
+           * 视频分辨率的压缩比例
+           * 0：默认跟原视频一致
+           * 1：原视频分辨率的一半
+           * 2：原视频分辨率的0.35
+           */
+          params.ratioOfCompressionOfVideoResolution = '0'
+        }
+        const fileList = await window.ks.callFunc({
+          method: 'pickAssets',
+          params: invoke(this, 'getNativeFnParams', 'pickAssets', params) || params,
+        })
+        this.uploadFile(fileList)
+      } finally {
+        if (loading.type === 'loading') {
+          window.vant.Toast.clear()
+        }
+      }
+    },
+    async getFileFromFolder() {
+      const loading = window.vant.Toast.loading({ forbidClick: true, duration: 0 })
+      try {
+        const fileInfo = await window.ks.callFunc({
+          method: 'pickerSystemFile',
+          params: invoke(this, 'getNativeFnParams', 'pickerSystemFile', {}) || {},
+        })
+        this.uploadFile([fileInfo])
+      } finally {
+        if (loading.type === 'loading') {
+          window.vant.Toast.clear()
+        }
+      }
+    },
+    async getFileFromCamera() {
+      const defaultParams = {
+        take_photo_or_record_or_both: 2,
+      }
+      const fileInfo = await window.ks.callFunc({
+        method: 'takeByCamera',
+        params:
+          invoke(this, 'getNativeFnParams', 'takeByCamera', defaultParams) ||
+          defaultParams,
+      })
+      this.uploadFile(fileInfo)
+    },
+    validateLimit(fileList) {
+      const isBiggerThanLimit = fileList.length + this.fileList.length > this.limit
+      if (isBiggerThanLimit) {
+        window.vant.Toast(`最多只能上传${this.limit}个文件`)
+      }
+      return isBiggerThanLimit
+    },
+    validateFileType(fileList) {
+      // 选择的文件是否满足类型
+      const { accept } = this
+      if (!accept.length) {
+        return false
+      }
+      const typeNotMatch = fileList.some((it) => {
+        return !accept.some(
+          (extendName) => extendName.toLowerCase() === it.extendName.toLowerCase()
+        )
+      })
+      if (typeNotMatch) {
+        window.vant.Toast(`只能上传${accept.join('、')}格式的文件`)
+      }
+      return typeNotMatch
+    },
+    validateMaxSize(fileList) {
+      const { maxSize } = this
+      if (!maxSize) {
+        return false
+      }
+      const isTooBig = fileList.some((it) => +it.fileSize > maxSize * 1024 * 1024)
+      if (isTooBig) {
+        window.vant.Toast(`最大只能上传${maxSize}M`)
+      }
+      return isTooBig
+    },
+    async beforeUploadFn(fileList) {
+      const validateFns = [
+        this.validateLimit,
+        this.validateFileType,
+        this.validateMaxSize,
+        this.beforeUpload,
+      ]
+      for (let fn of validateFns) {
+        if (typeof fn !== 'function') {
+          continue
+        }
+        const isBreak = await fn(fileList)
+        if (isBreak) {
+          return true
+        }
+      }
+      return false
+    },
+    async uploadToTencent(fileList) {
+      const tokenConfig = await this.getUploadToken()
+      if (!tokenConfig.uploadId) {
+        tokenConfig.uploadId = this.uploadId
+      }
+      const promises = fileList.map(async (it) => {
+        const cosPath = `resource/upload/deposit/${process.env.NODE_ENV}/${Date.now()}/${
+          it.fileName
+        }`
+        const defaultParams = {
+          srcPath: it.filePath,
+          cosPath,
+          ...tokenConfig,
+        }
+        const params =
+          invoke(this, 'getNativeFnParams', 'uploadTencentCos', defaultParams, it) ||
+          defaultParams
+        return ks.callFunc({ method: 'uploadTencentCos', params }).then((url) => {
+          return {
+            url,
+            extendName: it.extendName,
+            size: it.fileSize,
+            name: it.fileName,
+            cosPath,
+          }
+        })
+      })
+      window.vant.Toast.loading({ forbidClick: true, duration: 0 })
+      const res = await Promise.allSettled(promises)
+      window.vant.Toast.clear()
+      const fileResult = res
+        .filter((item) => item.status === 'fulfilled')
+        .map((item) => item.value)
+      this.fileList = [...this.fileList, ...fileResult]
+    },
+    async getBizId() {
+      if (this.insetBizId) {
+        return
+      }
+      this.insetBizId = await this.$http('system.idcenter.get', '10147', {
+        random: Math.random(),
+      })
+    },
+    async uploadToKye(fileList) {
+      await this.getBizId()
+      // 记录上传前的id，用于保证排序稳定不变
+      const fileIdsMap = this.fileList
+        .map((it) => it.id)
+        .reduce((memo, cur, index) => {
+          memo[cur] = index + 1
+          return memo
+        }, {})
+      const fileInfos = await window.ks.callFunc({
+        method: 'uploadAssets',
+        params: {
+          filePaths: fileList.map((it) => it.filePath),
+          fileNames: fileList.map((it) => it.fileName),
+          bizCode: this.bizCode,
+          bizId: this.insetBizId,
+        },
+      })
+      this.fileList = fileInfos.sort((a, b) => {
+        const idxA = fileIdsMap[a.id] || Number.MAX_SAFE_INTEGER
+        const idxB = fileIdsMap[b.id] || Number.MAX_SAFE_INTEGER
+        return idxA - idxB
+      })
+    },
+    async uploadFile(fileList) {
+      const addFileExtend = (fileInfo) => {
+        const { filePath } = fileInfo
+        const extNameSignIndex = filePath.lastIndexOf('.')
+        let extendName = extNameSignIndex > -1 ? filePath.slice(extNameSignIndex) : ''
+        extendName = extendName.toLowerCase()
+        fileInfo.extendName = extendName.slice(1)
+        if (!fileInfo.fileName.endsWith(extendName)) {
+          fileInfo.fileName += extendName
+        }
+      }
+      fileList.forEach(addFileExtend)
+      const isBreak = await this.beforeUploadFn(fileList)
+      if (isBreak) {
+        return
+      }
+      const uploadFn = {
+        [MODE.KYE]: this.uploadToKye,
+        [MODE.TENCENT]: this.uploadToTencent,
+      }
+      invoke(uploadFn, this.mode, fileList)
+    },
+
+    onActionSelect(item) {
+      invoke(this.actionFnMap, item.id)
+      this.isShowAction = false
+    },
+    async chooseSelectMode() {
+      if (this.disabled) {
+        return
+      }
+      const { beforeActionSheetShow } = this
+      if (beforeActionSheetShow) {
+        const isBreak = await beforeActionSheetShow()
+        if (isBreak) {
+          return
+        }
+      }
+      if (this.actions.length !== 1) {
+        this.isShowAction = true
+        return
+      }
+      invoke(this.actionFnMap, this.actions[0].id)
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+.uploader-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 52px);
+  grid-auto-rows: 52px;
+  flex: 1;
+  border-radius: 4px;
+  gap: 12px;
+}
+.upload-button {
+  width: 52px;
+  height: 52px;
+  border-radius: 4px;
+  border: 1px dashed #e3e3e8;
+  display: grid;
+  place-items: center;
+}
+
+.preview-item {
+  border-radius: 4px;
+  position: relative;
+  background: #f7f8fa;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  img.pdf {
+    width: 26px;
+    height: 26px;
+    margin: auto;
+    margin-top: 12px;
+  }
+}
+/deep/ .van-uploader {
+  padding: 0;
+}
+
+.close-icon {
+  position: absolute;
+  right: 0;
+  top: -1px;
+  transform: translateX(50%);
+  border: 1px solid #fff;
+  background: #b0b3bf;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    width: 60%;
+    margin: auto;
+    height: 2px;
+    border-radius: 999px;
+    background: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
+
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+    transform-origin: center center;
+  }
+
+  &::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+    transform-origin: center center;
+  }
+}
+
+.preview-text {
+  line-height: 12px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 0 0 4px 4px;
+  font-size: 8px;
+  color: #fff;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 4px;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>

package/src/components/fms-ks-uploader/index.js

@@ -0,0 +1,7 @@
+import FmsKsUploader from './fms-ks-uploader.vue'
+
+FmsKsUploader.install = function(Vue) {
+  Vue.component(FmsKsUploader.name, FmsKsUploader)
+}
+
+export default FmsKsUploader

package/src/index.js

@@ -1,5 +1,12 @@
 
 import FmsCopyBox from './components/fms-copy-box/index'
+import FmsKsClampText from './components/fms-ks-clamp-text/index'
+import FmsKsMoreLines from './components/fms-ks-more-lines/index'
+import FmsKsPagePopup from './components/fms-ks-page-popup/index'
+import FmsKsSelect from './components/fms-ks-select/index'
+import FmsKsSelectBox from './components/fms-ks-select-box/index'
+import FmsKsBlockTitle from './components/fms-ks-block-title/index'
+import FmsKsWarnDrawer from './components/fms-ks-warn-drawer/index'
 import FmsEmpty from './components/fms-empty/index'
 import FmsKsDecrypt from './components/fms-ks-decrypt/index'
 import FmsKsFileUpload from './components/fms-ks-file-upload/index'
@@ -7,10 +14,21 @@ import FmsKsFileView from './components/fms-ks-file-view/index'
 import FmsScrollList from './components/fms-scroll-list/index'
 import FmsKsFormGrid from './components/fms-ks-form-grid'
 import FmsKsSearchTips from './components/fms-ks-search-tips'
+import FmsKsSearchTipsNew from './components/fms-ks-search-tips-new'
 import FmsKsUpload from './components/fms-ks-upload/index'
+import FmsKsPicker from './components/fms-ks-picker/index'
+import FmsKsUploader from './components/fms-ks-uploader/index'
+import FmsApprovalHeader from './components/fms-approval-header/index'
 
 const components = [
   FmsCopyBox,
+  FmsKsClampText,
+  FmsKsMoreLines,
+  FmsKsPagePopup,
+  FmsKsSelect,
+  FmsKsSelectBox,
+  FmsKsBlockTitle,
+  FmsKsWarnDrawer,
   FmsEmpty,
   FmsKsDecrypt,
   FmsKsFileUpload,
@@ -18,7 +36,10 @@ const components = [
   FmsScrollList,
   FmsKsFormGrid,
   FmsKsSearchTips,
-  FmsKsUpload
+  FmsKsUpload,
+  FmsKsSearchTipsNew,
+  FmsKsPicker,
+  FmsApprovalHeader,
 ]
 
 const install = function(Vue) {
@@ -30,6 +51,13 @@ const install = function(Vue) {
 // 按需导出
 export {
   FmsCopyBox,
+  FmsKsClampText,
+  FmsKsMoreLines,
+  FmsKsPagePopup,
+  FmsKsSelect,
+  FmsKsSelectBox,
+  FmsKsBlockTitle,
+  FmsKsWarnDrawer,
   FmsEmpty,
   FmsKsDecrypt,
   FmsKsFileUpload,
@@ -37,7 +65,11 @@ export {
   FmsScrollList,
   FmsKsFormGrid,
   FmsKsSearchTips,
-  FmsKsUpload
+  FmsKsUpload,
+  FmsKsSearchTipsNew,
+  FmsKsPicker,
+  FmsKsUploader,
+  FmsApprovalHeader,
 }
 // 全量导出
 export default {