cnhis-design-vue 2.2.3 → 2.2.5

package/packages/upload/chunk-upload/vod-chunk-upload.vue

@@ -1,757 +0,0 @@
-<template>
-  <div class="upload">
-    <div v-if="!isDetail && !isLock" class="chunk-uploader-btn" :class="{ 'disable-upload': isDisabled }" v-show="isShowBtn" @click="handleBtnOnClick">
-      <div class="chunk-btn-content">
-        <div class="c-uploader-btn">
-          <template v-if="source == 'guage'">
-            <img :src="require('@/assets/img/video.png')" alt="" class="guage-img" />
-            <div class="uploader-text">
-              <p>点击上传</p>
-              <span class="guage-text">上传视频（不超过{{guageMaxSize}}M）</span>
-            </div>
-          </template>
-          <template v-else>
-            <!-- <a-icon class="uploader-icon" type="camera" /> -->
-            <img :src="require('@/assets/img/video.png')" alt="" class="guage-img" />
-            <div class="uploader-text">
-              <p>上传视频</p>
-              <!-- <span v-if="formData.allow_format"> 支持扩展名：{{ formData.allow_format }} </span> -->
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <template>
-      <draggable v-model="fileList" animation="150" :disabled="isDisabled" :options="draggableOptions" @update="draggableUpdate" class="drag-content">
-        <div v-for="(item, index) in fileList" :key="index" class="vod-wrap uploader-preview-wrap">
-          <!-- 上传中 -->
-          <slot v-if="item.status === 'uploading'">
-            <div class="vod-def-bg  vod-uploading">
-              <!-- TODO: 封面图补充 -->
-              <!-- <img :src="item.thumbUrl" class="vod-cover-img" /> -->
-              <div class="uploading-mask" :style="{ height: maskHeight(item) }">
-                <span>{{ showPercent(item.percent) }}%</span>
-              </div>
-            </div>
-          </slot>
-          <!-- 上传完成 -->
-          <slot v-else-if="item.status === 'done'">
-            <div class="vod-def-bg vod-done">
-              <img :src="getvideoCover(item)" class="vod-cover-img" />
-              <div class="tooltip-wrap" :class="{ 'is-new': item.isNew }">
-                <img :src="require('@/assets/img/success.png')" alt="" class="upload-img" />
-                上传成功
-              </div>
-              <!-- 播放图标 -->
-              <div class="icon-wrap">
-                <a-icon theme="filled" type="play-circle" class="icon-play theme_filled" @click.prevent.stop="palyerVod(item, index)" />
-                <a-icon type="play-circle" class="icon-play theme_outlined" @click.prevent.stop="palyerVod(item, index)" />
-              </div>
-            </div>
-          </slot>
-          <!-- 上传失败 -->
-          <slot v-else-if="item.status === 'error'">
-            <div class="vod-def-bg vod-error">
-              <!-- @error="coverImgOnError" -->
-              <img :src="item.thumbUrl" class="vod-cover-img" />
-              <div class="tooltip-wrap error-wrap">
-                <span>
-                  {{ item.message ? item.message : '上传失败，继续上传？' }}
-                </span>
-                <a-button size="small" @click.prevent.stop="restartUpload(item)">
-                  确定
-                </a-button>
-              </div>
-            </div>
-          </slot>
-          <div v-if="['done', 'error'].includes(item.status) && !isDisabled && !isDetail" @click.stop="handleDelFileList(index)" class="uploader-preview-delete">
-            <!-- <span class="pre-delete">一</span> -->
-            <a-icon class="pre-delete" type="minus-circle" theme="filled" />
-          </div>
-        </div>
-      </draggable>
-    </template>
-
-    <video-modal v-if="videoVisible" :visible.sync="videoVisible" :playerOptions="playerOptions"></video-modal>
-    <vodUploadModal
-      v-bind="$attrs"
-      :modalTitle="formData.name"
-      v-model="chunkUploadVisible"
-      :max_size="max_size"
-      :maxLength="maxlength"
-      :propsCategoryMap="propsDefaultAccept"
-      :defaultList="fileList"
-      :source="source"
-      @getSumbitList="getSumbitList"
-    ></vodUploadModal>
-  </div>
-</template>
-
-<script>
-/**
- * 支持的格式
- * MP4、TS、MOV、MXF、MPG、FLV、WMV、AVI、M4V、F4V、MPEG、3GP、ASF、MKV、HLS
- */
-/**
- * simple-uploader 配置文档
- * https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E9%85%8D%E7%BD%AE
- */
-import videoModal from '@/component/player-vod/video-modal';
-import vodUploadModal from './vod-upload-modal';
-import draggable from 'vuedraggable';
-import { Icon } from 'ant-design-vue';
-import utils from '@/utils/utils-map';
-export default {
-  name: 'vodChunkUpload',
-  data() {
-    return {
-      defaultAccept: '.mp4,.ts,.mov,.mxf,.mpg,.flv,.wmv,.avi,.m4v,.f4v,.mpeg,.3gp,.asf,.mkv,.hls',
-      videoVisible: false,
-
-      fileList: [],
-
-      cacheFileObj: {},
-
-      playerOptions: {}, // 播放配置
-
-      vodClient: null, // 华为云SDK实例
-
-      chunkUploadVisible: false,
-
-      uploader: null,
-      autoStart: true,
-      timeOuts: 60000 * 5, // 轮询超时 默认五分钟
-      configList: [],
-
-      draggableOptions: {
-        group: 'upload-com-item',
-        filter: '.uploading-item',
-        delayOnTouchOnly: true, // 开启触摸延时
-        // direction: 'vertical',   //拖动方向
-        delay: 100, // 延时时长
-        touchStartThreshold: 3, // 防止某些手机过于敏感(3~5 效果最好)
-        chosenClass: 'upload-chosen-draing', // 选中之后拖拽项添加的class名(用于选中时候添加样式)
-        dragClass: 'upload-sortable-drag'
-      },
-
-      // default_cover: require("@/assets/img/form/upload/video_default_cover.png"),
-      hover_play: require('@/assets/img/video_play_hover.png')
-    };
-  },
-  inject: {
-    /** baseForm */
-    mainForm: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  props: {
-    formData: {
-      type: Object,
-      default: () => ({})
-    },
-    defList: [Array, String],
-    source: String,
-    limitNum: {
-      default: 1
-    },
-    defFileList: { default: '' },
-    isLock: Boolean,
-    isDetail: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    defaultFileList() {
-      return this.handleDefList();
-    },
-    isGuage(){
-      return this.source == 'guage';
-    },
-    guageMaxSize(){
-      return this.formData?.setting?.maxSize || 50;
-    },
-    isShowBtn() {
-      let { max_length } = this.formData?.validate || {};
-      if (this.isGuage) {
-        max_length = +this.limitNum;
-      }
-      if (max_length) {
-        return this.fileList.length < max_length;
-      }
-      return true;
-    },
-    maskHeight() {
-      return function(item) {
-        return `${item.percent}%`;
-      };
-    },
-    showPercent() {
-      return function(percent) {
-        let res = percent > 99 ? 99 : percent;
-        return Math.floor(res);
-      };
-    },
-    allow_format() {
-      if (this.isGuage) return this.defaultAccept;
-      const { allow_format } = this.formData;
-      try {
-        if (allow_format) {
-          let list = allow_format.split(',');
-          let resList = list.map(v => {
-            if (v.startsWith('.')) {
-              return v;
-            } else {
-              return '.' + v;
-            }
-          });
-          let resStr = resList.join(',');
-          return resStr;
-        } else {
-          return this.defaultAccept;
-        }
-      } catch (error) {
-        console.log(error);
-        return this.defaultAccept;
-      }
-    },
-
-    propsDefaultAccept() {
-      return this.allow_format;
-    },
-
-    defaultValue() {
-      const { formData, mainForm } = this;
-      if (this.isGuage) {
-        return this.defFileList;
-      }
-      return mainForm.defaultValue[formData.name] || formData.default_val;
-    },
-
-    isDisabled() {
-      return this.formData.is_edit == 0 || this.isLock;
-    },
-
-    default_cover() {
-      return require('@/assets/img/video_default_cover.png');
-    },
-
-    max_size() {
-      if(this.isGuage) return this.guageMaxSize * 1024;
-      const { max_size } = this.formData?.validate || {};
-      return max_size || '';
-    },
-    maxlength() {
-      return +(this?.formData?.validate?.max_length || 0);
-    }
-  },
-  watch: {},
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-    this.handleDefList();
-
-    // 动态回填
-    this.$watch('defaultValue', () => {
-      this.handleDefList();
-    });
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    /** ------------------------------------------------------------------------ */
-
-    /** 获取默认值/ 回填 */
-    handleDefList() {
-      const { formData, mainForm } = this;
-      let defList = [];
-      if (this.isGuage) {
-        defList = this.defFileList;
-      } else {
-        defList = mainForm.handleSysParams(mainForm.defaultValue[formData.name] || formData.default_val);
-      }
-      if (!defList) return [];
-      let list = [];
-      if (Array.isArray(defList)) {
-        list = [...defList];
-      }
-
-      if (utils.isJSON(defList)) {
-        list = JSON.parse(defList);
-      }
-      if (Array.isArray(list)) {
-        list.forEach(item => {
-          item.thumbUrl = item.vodCoverUrl || undefined;
-          item.uid = (-Math.random()).toString();
-          item.status = 'done';
-        });
-        this.fileList = list;
-        this.handleGetSubmitList(list);
-        return list;
-      }
-      return [];
-    },
-
-    /** 获取提交的数据 */
-    handleGetSubmitList(list) {
-      if (!Array.isArray(list)) return '';
-      const { formData, mainForm } = this;
-      let resList = [];
-      list.forEach(v => {
-        if (v.status === 'done' && ((v.response && v.response.code == '00000') || v.url)) {
-          const { data = {} } = v.response || {};
-          let vodUrl = v.url || data.videoUrl;
-          let vodCoverUrl = v.vodCoverUrl || data.vodCoverUrl;
-          // if (!vodCoverUrl) {
-          //   vodCoverUrl = this.handleGetCoverUrl(vodUrl);
-          // }
-          resList.push({
-            name: v.name,
-            size: v.size,
-            url: v.url || data.videoUrl,
-            vodCoverUrl: vodCoverUrl
-          });
-        }
-      });
-      // let resVal = resList.length ? JSON.stringify(resList) : "";
-      let resVal = JSON.stringify(resList);
-      if (this.isGuage) {
-        this.$emit('vodFileList', resVal);
-        return;
-      }
-      mainForm.baseForm.setFieldsValue({
-        [formData.val_key]: resVal
-      });
-    },
-
-    /**
-     * 拼接封面图
-     */
-    handleGetCoverUrl(vodUrl) {
-      if (typeof vodUrl === 'string') {
-        let strList = vodUrl.split('/');
-        let len = strList.length;
-        strList.splice(len - 1, 1, 'cover/Cover0.jpg');
-        let imgUrl = strList.join('/');
-        return imgUrl;
-      }
-      return '';
-    },
-
-    /**
-     * 封面图图加载报错
-     */
-    coverImgOnError(e) {
-      let oldUrl = e.target.src;
-      let randomKeys = new Date().getTime().toString();
-      e.target.src = oldUrl + `?randomKeys=${randomKeys}`;
-    },
-
-    handleDelFileList(i) {
-      this.fileList.splice(i, 1);
-      this.handleGetSubmitList(this.fileList);
-    },
-
-    /** 预览视频 */
-    palyerVod(data) {
-      let vodUrl, type;
-      if (data.type) {
-        type = data.type;
-      }
-      if (data.url || data.videoUrl) {
-        vodUrl = data.url || data.videoUrl;
-        if (!type) {
-          let strList = vodUrl.split('.');
-          let last = strList[strList.length - 1];
-          type = `video/${last}`;
-        }
-      } else {
-        vodUrl = URL.createObjectURL(data.originFileObj);
-      }
-
-      this.playerOptions = {
-        sources: [
-          {
-            type,
-            src: vodUrl
-          }
-        ]
-      };
-      this.videoVisible = true;
-    },
-
-    handleBtnOnClick() {
-      if (this.isDisabled) {
-        return;
-      }
-      this.chunkUploadVisible = true;
-    },
-
-    getSumbitList(list) {
-      let resList = [];
-      list.forEach(l => {
-        let coverPic = l.videoCoverPic || undefined;
-        resList.push({
-          name: l.videoName || l.name,
-          url: l.videoUrl || l.url,
-          size: l.size,
-          vodCoverUrl: coverPic,
-          // thumbUrl: coverPic,
-          status: 'done',
-          uid: (-Math.random()).toString()
-        });
-      });
-      this.fileList.push(...resList);
-
-      this.handleGetSubmitList(this.fileList);
-    },
-
-    draggableUpdate() {
-      this.handleGetSubmitList(this.fileList);
-    },
-
-    getvideoCover(item) {
-      if (item.thumbUrl) {
-        return item.thumbUrl;
-      }
-      return this.default_cover;
-    }
-  },
-  components: {
-    videoModal,
-    vodUploadModal,
-    draggable,
-    [Icon.name]: Icon
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.upload {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 4px;
-
-  /deep/ .ant-upload-picture-card-wrapper {
-    display: inline-flex;
-    width: unset;
-    margin-right: 8px;
-    .ant-upload.ant-upload-select-picture-card {
-      width: 140px;
-      height: 120px;
-      margin: unset;
-      background: #fafafa;
-      border-color: #d5d5d5;
-      .uploader-btn {
-        .uploader-icon {
-          font-size: 30px;
-          color: #000000;
-        }
-        .uploader-text {
-          width: 140px;
-          p {
-            color: #585858;
-            margin-bottom: 4px;
-          }
-          span {
-            color: #b6b6b6;
-            font-size: 12px;
-          }
-          .guage-text {
-            color: #585858;
-            font-size: 14px;
-          }
-        }
-      }
-      &:hover {
-        background: #f3f7ff;
-        border-color: #5585f5;
-        .uploader-btn .uploader-icon,
-        .uploader-btn .uploader-text p,
-        .uploader-btn .uploader-text span {
-          color: #5585f5;
-        }
-      }
-    }
-  }
-}
-.show-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-.vod-wrap {
-  position: relative;
-  display: inline-block;
-  background-color: #fff;
-  width: 140px;
-  height: 120px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  border: 1px dashed #eeeeee;
-  border-radius: 4px;
-  background-color: #fff;
-  .vod-uploading {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: #fafafa;
-    .progress-wrap {
-      padding: 3px;
-    }
-    .uploading-msg {
-      color: #333;
-      font-size: 12px;
-      text-align: center;
-    }
-    .uploading-mask {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-height: 20%;
-      background: rgba(0, 0, 0, 0.3);
-      color: #fff;
-      text-align: center;
-    }
-  }
-
-  .vod-def-bg {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(50, 50, 51, 0.5);
-    .icon-vod-def {
-      font-size: 40px;
-      opacity: 0.3;
-      transform: scale3d(2, 2, 2);
-      transition: all 0.25s ease-out;
-    }
-    .vod-cover-img {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-      border-radius: 4px;
-    }
-    .tooltip-wrap {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: 120px;
-      height: 40px;
-      color: #fff;
-      background: #22de4b;
-      border-radius: 4px;
-      .upload-img {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        margin-right: 10px;
-      }
-      &.error-wrap {
-        flex-direction: column;
-        width: 158px;
-        height: 72px;
-        background: #e02020;
-        span {
-          height: 20px;
-          line-height: 20px;
-          margin-bottom: 8px;
-        }
-      }
-    }
-    &.vod-done {
-      .tooltip-wrap {
-        opacity: 0;
-        &.is-new {
-          animation: fadeOut 2.5s 1 both;
-          @keyframes fadeOut {
-            0% {
-              opacity: 1;
-            }
-            80% {
-              opacity: 1;
-            }
-            100% {
-              opacity: 0;
-            }
-          }
-        }
-      }
-    }
-    &.vod-done:hover {
-      .icon-wrap {
-        background: rgba(0, 0, 0, 0.2);
-      }
-      .theme_outlined {
-        display: none;
-      }
-      .theme_filled {
-        display: inline-block;
-      }
-    }
-  }
-}
-// .vod-wrap {
-//   &:first-child {
-//     margin-left: 8px;
-//   }
-// }
-
-.uploader-preview-wrap {
-  .uploader-mask {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    color: #fff;
-    background-color: rgba(50, 50, 51, 0.88);
-
-    .uploading-msg {
-      font-size: 12px;
-    }
-  }
-  .uploader-preview-delete {
-    position: absolute;
-    top: -16px;
-    right: -7px;
-    width: 16px;
-    height: 16px;
-    z-index: 10;
-
-    .pre-delete {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      background: #fff;
-      color: #e02020;
-      font-size: 20px;
-      cursor: pointer;
-    }
-  }
-}
-
-.icon-wrap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  font-size: 28px;
-  z-index: 1;
-  .icon-play {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transition: all 0.25s ease-out;
-  }
-  .theme_outlined {
-    display: inline-block;
-  }
-  .theme_filled {
-    display: none;
-  }
-}
-
-.chunk-uploader-btn {
-  display: table;
-  width: 140px;
-  height: 120px;
-  margin-right: 8px;
-  background: #fafafa;
-  text-align: center;
-  vertical-align: top;
-  border: 1px dashed #d5d5d5;
-  border-radius: 4px;
-  transition: border-color 0.3s ease;
-  -webkit-transition: border-color 0.3s ease;
-  cursor: pointer;
-  &.disable-upload {
-    cursor: not-allowed;
-  }
-
-  .chunk-btn-content {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    // padding: 8px;
-    text-align: center;
-    vertical-align: middle;
-
-    .c-uploader-btn {
-      line-height: 1.5;
-      img {
-        width: 32px;
-        height: 32px;
-      }
-      .uploader-icon {
-        font-size: 30px;
-        color: #000000;
-      }
-      .uploader-text {
-        width: 140px;
-        p {
-          color: #585858;
-          margin-bottom: 0px;
-        }
-        span {
-          color: #b6b6b6;
-          font-size: 12px;
-        }
-        .guage-text {
-          color: #585858;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-  &:hover {
-    background: #f3f7ff;
-    border-color: #5585f5;
-    .guage-img {
-      content: url('../../../src/assets/img/video_hover.png');
-    }
-    .c-uploader-btn .uploader-icon,
-    .c-uploader-btn .uploader-text p,
-    .c-uploader-btn .uploader-text span,
-    .c-uploader-btn .uploader-text .guage-text {
-      color: #5585f5;
-    }
-  }
-}
-</style>