@kyfe/fms-vue2-components 0.0.2-beta.0

package/src/components/fms-ks-file-view/components/attachment.vue

@@ -0,0 +1,343 @@
+<script lang="jsx">
+// 附件展示（只展示不上传）
+import IconWord from '../assets/icon_word_new.png'
+import IconPpt from '../assets/icon_ppt_new.png'
+import IconExcel from '../assets/icon_excel_new.png'
+import IconDefault from '../assets/icon_default_new.png'
+import IconFile from '../assets/icon_file.png'
+import IconPdf from '../assets/icon_pdf_new.png'
+import IconXmind from '../assets/icon_xmind.png'
+import IconTxt from '../assets/icon_txt.png'
+import IconPreviewFile from '../assets/icon_preview_file.png'
+// 转换显示文件大小
+import { changeFileSize } from '../utils/index'
+
+const { ImagePreview } = window.vant
+const ks = window.ks
+const IconMap = new Map()
+// word
+IconMap.set('doc', IconWord)
+IconMap.set('docx', IconWord)
+// ppt
+IconMap.set('ppt', IconPpt)
+IconMap.set('pptx', IconPpt)
+IconMap.set('pps', IconPpt)
+IconMap.set('ppsx', IconPpt)
+// excel
+IconMap.set('xls', IconExcel)
+IconMap.set('xlsx', IconExcel)
+// pdf
+IconMap.set('pdf', IconPdf)
+// xmind
+IconMap.set('xmind', IconXmind)
+// txt
+IconMap.set('txt', IconTxt)
+
+export default {
+  name: 'attachment-view',
+  props: {
+    // 文件数组
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+    // 是否开启循环播放,默认：true
+    loop: {
+      type: Boolean,
+      default: true,
+    },
+    // 标题
+    titleName: {
+      type: String,
+      default: '附件',
+    },
+  },
+  computed: {
+    imgList: function () {
+      const { fileList } = this
+      let imgs = (fileList || []).filter((f) => this.isImageType(f.extendName))
+      if (!imgs || !imgs.length) return []
+      let left = 5 - (imgs.length % 5) // 一行5个，算出剩余几个
+      // 填充，为了更灵活的justify-content: space-between;样式
+      while (left) {
+        imgs.push(null)
+        left--
+      }
+      return imgs
+    },
+    otherFileList: function () {
+      const { fileList } = this
+      return (fileList || []).filter((f) => !this.isImageType(f.extendName))
+    },
+    fileCount: function () {
+      const { fileList } = this
+      return fileList.length
+    },
+  },
+  methods: {
+    // 文件扩展名是否是图片
+    // 图片直接展示
+    isImageType(extend) {
+      return /^(jpe?g)|(png)|(gif)$/i.test(extend)
+    },
+    // 受支持的文件类型(有对应icon)
+    // 目前只有word，excel，ppt
+    isSupportFileType(extend) {
+      return /^$/i.test(extend)
+    },
+    // 其他文件类型
+    otherFileType(extend) {
+      return !this.isImageType(extend) && !this.isSupportFileType(extend)
+    },
+    // 文件名去除后缀名
+    splitFileName(name) {
+      return name.substr(0, name.lastIndexOf('.'))
+    },
+    // 文件图标
+    getFileIcon(extend) {
+      const iconUrl = IconMap.get(extend)
+      return iconUrl || IconDefault
+    },
+    // renders
+    // head
+    renderHead() {
+      const { fileCount, titleName } = this
+      return (
+        <div class="att-head">
+          <img src={IconFile} class="file-icon" />
+          <div class="att-title">
+            {titleName}({fileCount})
+          </div>
+        </div>
+      )
+    },
+    // img list
+    renderImages() {
+      const { imgList } = this
+      return imgList && imgList.length ? (
+        <div class="att-imgs">
+          <div class="att-img-content">
+            {imgList.map((img, index) => {
+              return img ? (
+                <div
+                  class="att-img"
+                  onClick={() => this.previewAssets(index, imgList)}
+                  style={{ backgroundImage: `url(${img.url})` }}
+                ></div>
+              ) : (
+                <div class="att-img-hidden"></div>
+              )
+            })}
+          </div>
+        </div>
+      ) : null
+    },
+    // 其他文件
+    renderOtherFiles() {
+      const { otherFileList } = this
+      return otherFileList && otherFileList.length ? (
+        <div class="att-files">
+          {otherFileList.map((f) => {
+            return (
+              <div class="att-file" onClick={() => this.previewFile(f)}>
+                <div class="att-file-icon">
+                  <img src={this.getFileIcon(f.extendName)} width="32" height="32" />
+                </div>
+                <div class="att-file-info-wrap">
+                  <div class="att-file-fullname">
+                    <div class="att-file-name">{this.splitFileName(f.name)}</div>
+                    {f.extendName ? (
+                      <div class="att-file-extend">.{f.extendName}</div>
+                    ) : null}
+                  </div>
+                  <div class="att-file-size">{changeFileSize(f.size)}</div>
+                </div>
+                <div class="preview-icon-wrap">
+                  <img width="16" height="16" src={IconPreviewFile} />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      ) : null
+    },
+    /**
+     * @description: 预览图片
+     * @param {*} index 序号
+     * @param {*} list 图片列表
+     * @return {*}
+     */
+    previewAssets(index, list) {
+      let filePaths = list
+        .map((item) => item && item['url'] && item.url)
+        .filter((f) => !!f)
+      // PC跨声环境，用ks方法
+      if (window.isKsPcMiniProgram) {
+        // NOTE: 此处原代码为 this.$store.commit('setPreviewFile', true)
+        this.$emit('preview', list[index])
+        window.ks.previewAssets({
+          index, // 默认从第几个资源开始浏览 index不能大于assetsPaths的长度
+          filePaths, // 接口返回的文件系统路径，或者本地路径
+        })
+      } else {
+        // 默认使用vant的图片预览，不存在的情况下才使用ks的
+        if (ImagePreview) {
+          window.ks.setCloseButton({ isShow: false })
+          ImagePreview({
+            images: filePaths,
+            startPosition: index,
+            loop: this.loop,
+            onClose() {
+              window.ks.setCloseButton({ isShow: true })
+            },
+          })
+        } else {
+          ks.previewAssets({
+            index, // 默认从第几个资源开始浏览 index不能大于assetsPaths的长度
+            filePaths, // 接口返回的文件系统路径，或者本地路径
+          })
+        }
+      }
+    },
+    // 预览文档
+    previewFile(file) {
+      // NOTE: 此处原代码为 this.$store.commit('setPreviewFile', true)
+      this.$emit('preview', file)
+      window.ks.callFunc({
+        method: 'previewFile',
+        params: {
+          filePath: file.url,
+          fileName: file.name,
+          fileSize: String(file.size), // 跨声原生方法预览文件，fileSize转string类型，否则iPhone预览不了
+        },
+      })
+    },
+  },
+  render() {
+    return (
+      <div class="att-view">
+        {this.$slots.header ? this.$slots.header : this.renderHead()}
+        {this.renderImages()}
+        {this.renderOtherFiles()}
+      </div>
+    )
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.att-view {
+  position: relative;
+  padding: 12px 16px 0 16px;
+  font-size: 14px;
+  color: #333;
+  &::after {
+    position: absolute;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    top: 0;
+    left: 16px;
+    right: 16px;
+    border-bottom: 1px solid #f2f2f2;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+  .att-head {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    .file-icon {
+      width: 14px;
+      height: 14px;
+    }
+    .att-title {
+      font-size: 14px;
+      text-align: left;
+      color: #6e6d72;
+      margin-left: 4px;
+    }
+    .att-head-tips {
+      font-size: 12px;
+      color: #999;
+    }
+  }
+  .att-imgs {
+    margin-top: 12px;
+    .att-img-content {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      .att-img {
+        margin: 0 12px 10px 0;
+        width: 52px;
+        height: 52px;
+        border: 0.5px solid #cacaca;
+        border-radius: 4px;
+        background-position: center;
+        background-size: cover;
+      }
+      .att-img-hidden {
+        width: 60px;
+        height: 0;
+      }
+    }
+  }
+  .att-files {
+    .att-file {
+      display: flex;
+      width: 100%;
+      height: 52px;
+      background: #f7f8fa;
+      border: 0.5px solid #ebedf5;
+      border-radius: 4px;
+      margin-bottom: 10px;
+      &:first-child {
+        .att-file-fullname {
+          &::before {
+            display: none;
+          }
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .att-file-icon {
+        padding: 10px 0 10px 10px;
+        width: 42px;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+      }
+      .att-file-info-wrap {
+        padding: 6px 0 6px 10px;
+        width: calc(100% - 90px);
+        .att-file-fullname {
+          display: flex;
+          position: relative;
+          width: 100%;
+          font-size: 14px;
+          color: #03050d;
+          line-height: 20px;
+          .att-file-name {
+            overflow: hidden; //超出的文本隐藏
+            text-overflow: ellipsis; //溢出用省略号显示
+            white-space: nowrap;
+          }
+        }
+        .att-file-size {
+          font-size: 12px;
+          color: #858793;
+          line-height: 18px;
+        }
+      }
+      .preview-icon-wrap {
+        padding: 18px 16px 18px 16px;
+        width: 48px;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

package/src/components/fms-ks-file-view/fms-ks-file-view.vue

@@ -0,0 +1,165 @@
+<!--
+ * @Description: 附件预览通用组件
+-->
+<template>
+  <div class="flow-fms-file-view" @preview="(fileInfo) => $emit('preview', fileInfo)">
+    <van-collapse v-model="activeNames">
+      <van-collapse-item name="1" class="collapse-title--expend_border-bottom-hidden">
+        <template #title v-if="$slots.title">
+          <slot name="title" />
+        </template>
+        <template #title v-else>
+          <div>
+            <strong>附件</strong>
+          </div>
+        </template>
+        <div class="file-wrap" v-if="fileList.length > 0">
+          <!-- 使用公共的附件预览组件 -->
+          <attachment-view :fileList="fileList" :onPreview="onPreview"></attachment-view>
+        </div>
+        <div v-else class="no-file">暂无附件</div>
+      </van-collapse-item>
+    </van-collapse>
+  </div>
+</template>
+<script>
+import AttachmentView from './components/attachment.vue'
+
+export default {
+  name: 'FmsKsFileView',
+  components: {
+    AttachmentView: {
+      extends: AttachmentView,
+      props: {
+        onPreview: Function,
+      },
+      methods: {
+        // 覆盖公共的方法，添加权限
+        previewAssets(index, list) {
+          // onPreview方法校验是否可以预览，返回true时终止预览
+          const flag = this.onPreview?.(list[index])
+          if (flag) return
+          AttachmentView.methods.previewAssets.call(this, index, list)
+        },
+        // 预览文档
+        previewFile(file) {
+          // onPreview方法校验是否可以预览，返回true时终止预览
+          const flag = this.onPreview?.(file)
+          if (flag) return
+          AttachmentView.methods.previewFile.call(this, file)
+        },
+      },
+    },
+  },
+  props: {
+    // 例：[
+    //   {
+    //     extendName: '文件后缀',
+    //     name: '文件名',
+    //     bizId: 'bizId',
+    //     bizCode: 'bizCode',
+    //     id: '文件id',
+    //   }
+    // ]
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+    showToggleAll: {
+      type: Boolean,
+      default: true,
+    },
+    // 点击预览前拦截事件,方法返回true时终止预览操作,入参为当前预览的图片,透传至组件AttachmentView
+    onPreview: Function,
+  },
+  data() {
+    return {
+      activeNames: ['1'],
+    }
+  },
+  watch: {
+    showToggleAll: {
+      immediate: true,
+      handler(val) {
+        this.activeNames = [val ? '1' : '0']
+      },
+    },
+    fileList: {
+      immediate: true,
+      handler(val) {
+        if (val.length > 0) {
+          this.activeNames = ['1']
+        }
+      },
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+@import '@/assets/style/common.less';
+.flow-fms-file-view {
+  border-radius: 6px;
+  overflow: hidden;
+  /deep/ .van-hairline--top-bottom:after {
+    border: none;
+  }
+  /deep/ .van-collapse-item__content {
+    // padding: 16px;
+    background-color: #fff;
+  }
+  .file-wrap {
+    .att-view {
+      padding: 0;
+      width: 100%;
+      /deep/ .att-head {
+        display: none;
+      }
+      /deep/ .att-imgs {
+        margin-top: 0;
+      }
+      &::after {
+        border-bottom: none;
+      }
+    }
+    // padding: 0 23px 0 24px;
+    /* 以下为废弃的旧样式 */
+    display: flex;
+    flex-wrap: wrap;
+    background: #fff;
+    .file-item {
+      height: 40px;
+      width: 50vw;
+      padding-left: 12px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      .file-icon {
+        width: 21px;
+        height: 21px;
+        margin-right: 6px;
+      }
+      .file-name {
+        width: 0;
+        flex: 1;
+        color: #03050d;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        .name {
+          max-width: calc(100% - 40px);
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+  .no-file {
+    // height: 44px;
+    padding: 0 16px;
+    // line-height: 44px;
+    text-align: center;
+    // background-color: #fff;
+  }
+}
+</style>

package/src/components/fms-ks-file-view/index.js

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

package/src/components/fms-ks-file-view/utils/index.js

@@ -0,0 +1,27 @@
+/**
+ * @description: 转换显示文件大小
+ * @param {*} limit 文件大小，单位：b
+ * @return {*}
+ */
+export function changeFileSize (limit) {
+  var size = ''
+  if (!limit) {
+    return size
+  }
+  if (limit < 0.1 * 1024) {                            //小于0.1KB，则转化成B
+    size = limit.toFixed(2) + "B"
+  } else if (limit < 0.1 * 1024 * 1024) {            //小于0.1MB，则转化成KB
+    size = (limit / 1024).toFixed(2) + "KB"
+  } else if (limit < 0.1 * 1024 * 1024 * 1024) {        //小于0.1GB，则转化成MB
+    size = (limit / (1024 * 1024)).toFixed(2) + "MB"
+  } else {                                            //其他转化成GB
+    size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
+  }
+  var sizeStr = size + "";                        //转成字符串
+  var index = sizeStr.indexOf(".");                    //获取小数点处的索引
+  var dou = sizeStr.substr(index + 1, 2)            //获取小数点后两位的值
+  if (dou == "00") {                                //判断后两位是否为00，如果是则删除00               
+    return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
+  }
+  return size;
+}

package/src/components/fms-ks-file-view//346/226/207/344/273/266/351/242/204/350/247/210.md

@@ -0,0 +1,23 @@
+# 附件预览通用组件
+附件与van-collapse组件合体
+
+## 参数说明
+1、 **<font size=4>fileList</font>** <font color='#999'>附件集合，每一个对象必须包含extendName、name、bizCode、bizId、id字段。</font><font color='red'>必须</font>  
+```js
+示例：[
+        {
+          extendName: '文件后缀',
+          name: '文件名',
+          bizId: 'bizId',
+          bizCode: 'bizCode',
+          id: '文件id',
+        },
+        ...
+      ]
+```
+
+## 参考案例
+
+```js
+<FmsFileView :fileList="fileList" />
+```

package/src/components/fms-scroll-list/Waterfall.js

@@ -0,0 +1,91 @@
+
+class WaterFall {
+  constructor({gap} = {}) {
+    this.observer = null
+    this.intersectionObserver = null
+    this.container = null
+    this.refScroll = null
+    this.leftHeight = 0
+    this.rightHeight = 0
+    this.intersectionRatio = 0
+    this.gap = gap || [0, 0]
+    this.init()
+  }
+  get containerHeight() {
+    return  Math.max(this.leftHeight, this.rightHeight)
+  }
+  init() {
+    this.initMutationObserver()
+    this.initIntersectionObserver()
+  }
+  observe(refScroll, container) {
+    this.refScroll = refScroll
+    this.container = container
+    this.observer.observe(container, {
+      childList: true
+    })
+    this.intersectionObserver.observe(this.refScroll)
+    container.defaultCssText = container.defaultCssTex || container.style.cssText
+  }
+  dispose() {
+    this.observer.disconnect()
+    this.intersectionObserver.disconnect()
+    this.container.style.cssText = this.container.defaultCssText
+    delete this.container.defaultCssText
+    Array.from(this.container.children).forEach(node => {
+      node.style.cssText = node.defaultCssText
+      delete node.defaultCssText
+      delete node.nodeHeight
+    })
+  }
+  initMutationObserver() {
+    const observer = new MutationObserver(() => {
+      if (this.intersectionRatio === 0) {
+        return
+      }
+      this.handleNode()
+    })
+    this.observer = observer
+  }
+  initIntersectionObserver() {
+    const intersectionObserver = new IntersectionObserver((entries) => {
+        // 如果 intersectionRatio 为 0，则目标在视野外，
+        // 我们不需要做任何事情。
+        this.intersectionRatio = entries[0].intersectionRatio
+        if (entries[0].intersectionRatio <= 0) return;
+        this.handleNode()
+    });
+    this.intersectionObserver = intersectionObserver
+  }
+
+  handleNode() {
+    const nodes = Array.from(this.container.children)
+    this.leftHeight = 0
+    this.rightHeight = 0
+    const [gapRow, gapColumn] = this.gap
+    nodes.forEach(node => {
+      const nodeHeight = node.nodeHeight || node.offsetHeight
+      node.nodeHeight = nodeHeight
+      const isLeftNode = this.leftHeight <= this.rightHeight
+      if (!('defaultCssText' in node)) {
+        node.defaultCssText = node.style.cssText
+        node.style.cssText = `
+          position: absolute; 
+          width: calc(50% - ${gapColumn / 2}px); 
+          top: ${isLeftNode ? this.leftHeight : this.rightHeight}px; 
+          ${isLeftNode ? 'left: 0' : 'right: 0'};
+        `
+      }
+      if (isLeftNode) {
+        this.leftHeight +=  nodeHeight + gapRow
+      } else {
+        this.rightHeight += nodeHeight + gapRow
+      }
+    })
+    this.container.style.height = this.containerHeight + 'px'
+  }
+}
+
+export {
+  WaterFall
+}