@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnFileView/BnFileView.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="bnFileView" :style="viewStyle">
+    <el-image ref="imageRef" style="width: 0;height: 0;position: absolute;" :initial-index="imgPreviewIndex"
+              :preview-teleported="previewTeleported"
+              :src="imgPreviewUrl" :preview-src-list="imgPreviewUrlList" fit="cover"/>
+    <videoPreview ref="videoRef"></videoPreview>
+    <div class="bnFileView-body">
+      <div v-for="(file,index) in fileList" :key="index" class="bnFileView-item"
+           :class="{'bnFileView-showDetail':!isMini}" :style="warpStyle">
+        <!--展示图片预览图或者文件icon-->
+        <div class="bnFileView-item-img" :title="file.title" @click="lookFile(file)">
+          <el-popover placement="top-start" popper-class="bnFileView-popper" :width="200" trigger="hover"
+                      :show-arrow="false" :disabled="!isMini">
+            <div v-if="includesType(pictureType, file.type) && imagePreview">
+              <img style="width: 180px;height: 180px" :src="getFileImg(file)">
+            </div>
+            <fileDetail v-if="isMini" :file="file" :index="index"
+                        @lookFile="lookFile" @delFile="delFile" :isDel="isDel" :showSize="showSize"
+                        :disabled="disabled" :downType="downType"></fileDetail>
+            <template #reference>
+              <img :style="widthStyle" :src="getFileImg(file)">
+            </template>
+          </el-popover>
+        </div>
+        <!--展示附件详细信息-->
+        <fileDetail v-if="!isMini" :style="detailStyle" :file="file" :index="index"
+                    @lookFile="lookFile" @delFile="delFile" :isDel="isDel" :showSize="showSize"
+                    :disabled="disabled" :downType="downType"></fileDetail>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {includes, map, toLower} from "lodash";
+import videoPreview from "./videoPreview.vue";
+import fileDetail from "./FileDetail.vue";
+
+export default {
+  name: "BnFileView",
+  components: {videoPreview, fileDetail},
+  props: {
+    //附件列表
+    fileList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 最小化 仅展示icon，鼠标悬浮支持下载
+    isMini: false,
+    // 是否允许删除
+    isDel: false,
+    // 是否展示附件大小
+    showSize: false,
+    //是否禁用
+    disabled: Boolean,
+    //图片宽度
+    width: {
+      type: [String, Number],
+      default: 22
+    },
+    //是否开启缩略图
+    reduceNum: {
+      type: Number,
+    },
+    // 展示列数
+    row: 1,
+    // 强制不换行
+    noWarp: false,
+    // 插入到body中
+    previewTeleported: {
+      default: true
+    },
+    // 图片预览
+    imagePreview: {
+      default: true
+    },
+    //下载类型 默认拿fileId
+    downType: {
+      type: String,
+      default: 'id'
+    }
+  },
+  computed: {
+    // 是否强制不换行
+    viewStyle() {
+      if (this.noWarp) {
+        return `width: max-content;`;
+      } else {
+        return ``;
+      }
+    },
+    // 图片宽度计算
+    widthStyle() {
+      if ((this.width).toString().indexOf('px') > 0) {
+        return `width: ${this.width}; height: ${this.width}; object-fit: contain;`;
+      } else {
+        return `width: ${this.width}px; height: ${this.width}px; object-fit: contain;`;
+      }
+    },
+    // 详情宽度计算
+    detailStyle() {
+      if ((this.width).toString().indexOf('px') > 0) {
+        return `width: calc(100% - ${this.width});`;
+      } else {
+        return `width: calc(100% - ${this.width}px);`;
+      }
+    },
+    // 换行逻辑
+    warpStyle() {
+      if (this.row > 1) {
+        let width = parseInt(100 / this.row)
+        return `width: calc(${width}% - 4px);`;
+      } else {
+        return false
+      }
+    },
+    // 整理图片列表
+    imgPreviewUrlList() {
+      let list = []
+      if (this.fileList) {
+        this.fileList.forEach(i => {
+          if (this.includesType(this.pictureType, i.type)) {
+            list.push(i.url)
+          }
+        })
+      }
+      return list;
+    },
+  },
+  data() {
+    return {
+      imgPreviewIndex: 0,
+      imgPreviewUrl: '',
+      fileType: [".jpg", ".png", ".jpeg", ".img", ".gif", ".bmp", ".jfif", ".webp", ".xls", ".xlsx", ".ppt", ".pptx", ".doc", ".pdf", ".docx", ".mp4", ".webm", ".ogg", ".3gp", ".avi", ".mpeg", ".ogv", ".mpg", ".mov", ".rmvb", ".mkv"],
+      officeFileTypes: [".xls", ".xlsx",".csv", ".ppt", ".pptx", ".doc", ".docx", ".pdf"],//office文件类型
+      videoType: [".mp4", ".webm", ".ogg", ".3gp", ".avi", ".mpeg", ".ogv", ".mpg", ".mov", ".rmvb", ".mkv"],
+      pictureType: [".jpg", ".png", ".jpeg", ".img", ".gif", ".bmp", ".jfif", ".webp"]
+    };
+  },
+  methods: {
+    /**
+     * 忽略大小写判断文件类型
+     * */
+    includesType(typeList, fileType) {
+      if (!fileType) return false;
+      return includes(map(typeList, toLower), toLower(fileType));
+    },
+    /**
+     * 打开文件预览，一般是除了图片、视频、音频这些无法预览的附件类型
+     * */
+    lookFile(file) {
+      // 图片预览
+      if (this.includesType(this.pictureType, file.type)) {
+        this.imgPreviewUrl = file.url;
+        this.imgPreviewIndex = this.imgPreviewUrlList.indexOf(file.url)
+        this.$refs.imageRef.showPreview()
+      } else if (this.includesType(this.videoType, file.type)) {
+        //  视频播放
+        this.$refs.videoRef.open(file.url)
+      } else {
+        //  office 以及其他文件直接打开链接
+        if (!(file.id < 1)) {
+          window.open('/v2/attachment/showAtt?attId=' + file.id)
+        } else {
+          window.open(file.url)
+        }
+      }
+    },
+    /**
+     * 根据文件类型，判端文件预览展示那种图片或icon
+     * */
+    getFileImg(file) {
+      // 默认文件图片
+      let url = "https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_854889b020ef5023f3ec547dcb2a12c4.png";
+      // 图片格式附件直接展示url
+      if (this.includesType(this.pictureType, file.type)) {
+        url = file.url;
+        // 处理缩略图
+        if(this.reduceNum){
+          if(file.url.indexOf('img.alicdn.com/')>=0 && file.url.indexOf('.jpg_')<0){
+            url = `${file.url}_${this.reduceNum}x${this.reduceNum}.jpg`
+          }else if(file.url.indexOf('banniu-work.oss-cn-zhangjiakou.aliyuncs.com/')>=0 && file.url.indexOf('?x-oss-process=image/resize')<0){
+            url = `${file.url}?x-oss-process=image/resize,w_${this.reduceNum}/quality,q_${this.reduceNum}`
+          }else if(file.url.indexOf('osscdn.lbdj.com/')>=0 && file.url.indexOf('?x-oss-process=image')<0){
+            url = `${file.url}?x-oss-process=image/resize,w_${this.reduceNum}/format,jpg`
+          }else if(file.url.indexOf('img10.360buyimg.com/')>=0 ){
+            url = file.url.replace('imgzone','n1')
+          }
+
+        }
+      }
+      // office类型文件展示对应类型图片
+      if (this.includesType(this.officeFileTypes, file.type)) {
+        const lowerType = toLower(file.type);
+        if (lowerType.includes('xls')) {
+          url = "https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_d46630a679d1f3830947095edfd12f41.png"
+        }
+        if (lowerType.includes('ppt')) {
+          url = "https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_c6352ba0d7ef5d1f7695347b7d9b0c7e.png"
+        }
+        if (lowerType.includes('doc')) {
+          url = "https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_807fa63419a45ef7cf64bc7da8e83ec1.png"
+        }
+        if (lowerType.includes('pdf')) {
+          url = "https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_ce5a58150d035a73a9fe14d9ac05e11a.png"
+        }
+      }
+      // 视频类型文件
+      if (this.includesType(this.videoType, file.type)) {
+        url = "https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_36c05615d07ec55449fb1ddda0274787.png"
+      }
+      return url;
+    },
+    /**
+     * 删除附件
+     * */
+    delFile(index) {
+      this.fileList.splice(index, 1)
+      this.$emit('delFile', this.fileList)
+    },
+  },
+}
+</script>
+<style>
+.bnFileView-popper {
+  padding: 8px !important;
+}
+</style>
+<style lang="scss" scoped>
+.minWidth {
+  min-width: 92px;
+}
+
+.bnFileView {
+  width: 100%;
+  vertical-align: middle;
+
+  &-showDetail {
+    width: 100%;
+    padding: 5px 12px;
+  }
+
+  &-body {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  &-item {
+    display: flex;
+    position: relative;
+    vertical-align: middle;
+    border-radius: 2px;
+    font-size: 0;
+    text-align: center;
+    border: 1px solid #EBEEF5;
+    margin: 2px 4px 2px 0px;
+    align-items: center;
+    overflow: hidden;
+
+    &-img {
+      display: inherit;
+      position: relative;
+      cursor: pointer;
+    }
+
+  }
+}
+
+</style>

package/packages/BnFileView/FileDetail.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="fileDetail">
+    <!--展示附件名字、大小-->
+    <div class="fileDetail-info">
+      <div class="fileDetail-info-title titleHover w-text-over" @click="$emit('lookFile',file)" :title="file.title">
+        {{ file.title }}
+      </div>
+      <div class="fileDetail-info-title w-text-over" v-if="showSize">
+        {{ returnSizeText(file.size) }}
+      </div>
+    </div>
+    <!--操作按钮-->
+    <div class="fileDetail-btn clearFix">
+      <div class="fileDetail-btn-item" v-if="file.id != -1">
+        <a class="w-color-blue w-cursor-pointer" :href="getDownloadUrl(file)"
+           target="_blank"><span class="bnUIcon bnUIcon-download"></span></a>
+      </div>
+      <div class="fileDetail-btn-item" @click="$emit('delFile',index)" v-if="isDel && !disabled">
+        <span class="bnUIcon bnUIcon-delete w-font-more"></span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "FileDetail",
+  props: {
+    //附件
+    file: Object,
+    index: Number,
+    // 是否允许删除
+    isDel: false,
+    // 是否展示附件大小
+    showSize: false,
+    //是否禁用
+    disabled: Boolean,
+    //下载类型
+    downType: {
+      type: String,
+      default: 'id'
+    }
+  },
+  methods: {
+    /**
+     * 获取下载链接
+     * */
+    getDownloadUrl(file) {
+      if (this.downType === 'url') {
+        return file.url
+      }
+      return !file.id ? file.url : ('/v2/attachment/' + file.id)
+    },
+    /**
+     * 计算附件大小
+     * */
+    returnSizeText(size) {
+      if (size && parseFloat(size) / 1024 / 1024 < 1) {
+        return `${(parseFloat(size) / 1024).toFixed(2)}KB`
+      } else if (size && parseFloat(size) / 1024 / 1024 >= 1) {
+        return `${(parseFloat(size) / 1024 / 1024).toFixed(2)}MB`
+      } else {
+        return ''
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import "./../font/iconfont.css";
+
+.fileDetail {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+
+  &-info {
+    flex-grow: 1;
+    max-width: calc(100% - 40px);
+    padding-left: 8px;
+
+    &-title {
+      width: 100%;
+      height: 22px;
+      line-height: 22px;
+      font-size: 12px;
+      text-align: left;
+      cursor: pointer;
+
+      &.titleHover:hover {
+        color: #3BA3F8;
+      }
+
+    }
+  }
+
+  &-btn {
+    height: 22px;
+    line-height: 22px;
+    display: flex;
+    flex-wrap: wrap;
+
+    &-item {
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      border-radius: 50%;
+      cursor: pointer;
+      color: #999;
+      height: 22px;
+      line-height: 22px;
+
+      &:last-child {
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>

package/packages/BnFileView/videoPreview.vue

@@ -0,0 +1,70 @@
+<template>
+  <teleport to="body">
+    <div v-if="show" class="videoPreview">
+      <div class="videoPreview-content">
+        <span class="videoPreview-content-close" @click="show = false">
+          <i class="close-icon">&times;</i>
+        </span>
+        <video ref="modalVideo" class="videoPreview-content-video" controls :src="url" autoplay></video>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      url: '',
+      show: false,
+    }
+  },
+  methods: {
+    /**
+     * 打开播发视频
+     * */
+    open(url) {
+      this.url = url;
+      this.show = true;
+    },
+  }
+}
+</script>
+
+<style scoped>
+.videoPreview {
+  position: fixed; /* 使用 fixed 定位 */
+  top: 0;
+  left: 0;
+  width: 100vw; /* 100% 宽度 */
+  height: 100vh; /* 100% 高度 */
+  overflow: hidden; /* 隐藏滚动条 */
+  display: flex; /* 使用 flexbox */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  background-color: rgba(0, 0, 0, 0.5); /* 可选：背景色 */
+  z-index: 10001;
+}
+
+.videoPreview-content {
+  position: relative; /* 使关闭按钮相对于内容定位 */
+  max-width: 100%; /* 最大宽度为 100% */
+  max-height: 100%; /* 最大高度为 100% */
+}
+
+.videoPreview-content-close {
+  position: absolute; /* 绝对定位 */
+  top: 10px; /* 距离顶部 10px */
+  right: 10px; /* 距离右侧 10px */
+  font-size: 30px; /* 图标大小 */
+  color: red; /* 红色 */
+  cursor: pointer; /* 鼠标悬停时显示为手型 */
+  z-index: 1100;
+}
+
+.videoPreview-content-video {
+  max-width: 100%; /* 视频最大宽度为 100% */
+  max-height: 100%; /* 视频最大高度为 100% */
+  object-fit: contain; /* 保持视频比例 */
+}
+</style>

package/packages/BnFilterOption/BnFilterOption.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="BnFilter">
+    <el-dialog title="保存筛选条件"
+               custom-class="w-dialog-border"
+               :append-to-body="true"
+               :modal-append-to-body="true"
+               v-model="show"
+               width="540px">
+      <div class="save-filter-condition-modal">
+        <div class="save-filter-condition-modal-label">筛选条件名称</div>
+        <el-input ref="input"
+               v-model.trim="postData.name"
+               maxlength="50"
+               placeholder="请输入"
+               show-word-limit></el-input>
+        <el-checkbox v-model="postData.isCommon">
+          工作表中的所有成员都可以看到和使用
+        </el-checkbox>
+      </div>
+      <div slot="footer" class="w-flex-right">
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" :disabled="postData.name == ''" v-loading="loading" @click="sureSave">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-button-group>
+      <el-button @click="open">保存</el-button>
+      <el-popover placement="bottom-start" width="360" trigger="click" ref="pop">
+        <div class="w-flex-center w-flex-wrap w-flex-gap5 BnFilter-plane">
+          <el-tag v-for="tag in filterList" :key="tag.id" @click="chooseFilter(tag);$refs.pop.hide()" class="w-cursor-pointer"
+                  :closable="tag.userId != -1|| (user?.isCreator || user?.isAdmin)" type="primary" @close="handleDelete(tag)">
+            {{ tag.key }}
+          </el-tag>
+          <div class="w-empty" v-if="filterList.length == 0">没有数据</div>
+        </div>
+        <template #reference>
+          <el-button class="w-padding-lr6" @click="searchFiler"><span class="bnUIcon bnUIcon-arrowDown w-font12 w-color-gray"></span></el-button>
+        </template>
+      </el-popover>
+    </el-button-group>
+  </div>
+</template>
+<script>
+export default {
+  name: "BnFilterOption",
+  props: {
+    postFunc: Function,
+    extendPost: Object,
+    conditions: {},
+    user:{}
+  },
+  data() {
+    return {
+      show: false,
+      loading: false,
+      postData: {
+        name: '',
+        isCommon: false,
+      },
+      tableId:'',
+      filterList:[]
+    }
+  },
+  methods: {
+    //打开弹框
+    open() {
+      this.postData = {
+        name: '',
+        isCommon: false,
+      }
+      this.show = true;
+    },
+    /**
+    * 查询筛选条件
+    * */
+    searchFiler(){
+      this.loading = true;
+      this.postFunc('/v2/projects/getUserQueryCondition', {relationTableId:-1,...this.extendPost}).then(res=>{
+        this.loading = false;
+        this.filterList = [];
+        if(!res.code){
+          this.filterList = res.data.filter(tag =>
+              tag.key !='COLUMN_HIDE_GLOBAL_RULE_KEY' &&
+              (tag.userId == -1 || (this.user && this.user.id == tag.userId))
+          )
+        }
+      })
+    },
+    /**
+     * 保存筛选条件
+     * */
+    sureSave() {
+      if (!this.postData.name) {
+        this.$message.warning("筛选条件名称不能为空");
+        return;
+      }
+      this.loading = true;
+      this.postFunc('/v2/projects/setUserQueryCondition', {...this.postData, ...this.extendPost,value: JSON.stringify(this.conditions)}).then(res => {
+        this.loading = false;
+        if(!res.code){
+          this.show = false;
+          this.searchFiler()
+        }
+      })
+    },
+    /**
+     * 删除标签处理
+     * */
+    handleDelete(item) {
+      this.$confirm(`确定要删除筛选条件"${item.key}"吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.deleteItem(item);
+      }).catch(() => {
+        // 取消删除
+      });
+    },
+    /**
+     * 删除
+     * */
+    deleteItem(item) {
+      this.loading = true;
+      this.postFunc('/v2/projects/delUserQueryCondition/' + item.id, null,'delete').then(res => {
+        this.loading = false;
+        if(!res.code){
+          this.$message.success('删除成功');
+          this.searchFiler()
+        }
+      })
+    },
+    chooseFilter(data){
+      this.$emit('chooseFilter',JSON.parse(data.value))
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.BnFilter{
+  display: inline-block;
+  &-plane{
+    max-height: 360px;
+    overflow-y: auto;
+  }
+}
+
+.save-filter-condition-modal {
+  padding: 10px 0 49px;
+  border-top: 1px solid #eee;
+  &-label {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 22px;
+    margin-bottom: 16px;
+  }
+}
+</style>