@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnFileView/BnFileView.vue

@@ -1,271 +0,0 @@
-<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

@@ -1,125 +0,0 @@
-<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

@@ -1,70 +0,0 @@
-<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

@@ -1,160 +0,0 @@
-<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>