cnhis-design-vue 0.2.63-beta → 0.3.1-beta

package/packages/big-table/src/components/edit-form/edit-utils/index.js

@@ -1,112 +0,0 @@
-/**
- * 表单常用函数
- */
-const formUtils = {
-  /**
-   * @deprecated: 生日 获取年龄 信息
-   * @param {string} str 'YYYY-MM-DD' 时间格式
-   * @returns {Object} {year, month, day}
-   */
-  getAgeInfo(str) {
-    let r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})/);
-    if (r == null) return false;
-    let Y, M, D;
-    let d = new Date(r[1], r[3] - 1, r[4]);
-    let returnStr = "输入的日期格式错误！";
-
-    if (d.getFullYear() == r[1] && d.getMonth() + 1 == r[3] && d.getDate() == r[4]) {
-      let date = new Date();
-      let yearNow = date.getFullYear();
-      let monthNow = date.getMonth() + 1;
-      let dayNow = date.getDate();
-
-      let largeMonths = [1, 3, 5, 7, 8, 10, 12], // 大月， 用于计算天，只在年月都为零时，天数有效
-        lastMonth = monthNow - 1 > 0 ? monthNow - 1 : 12, // 上一个月的月份
-        isLeapYear = false, // 是否是闰年
-        daysOFMonth = 0; // 当前日期的上一个月多少天
-
-      if ((yearNow % 4 === 0 && yearNow % 100 !== 0) || yearNow % 400 === 0) {
-        // 是否闰年， 用于计算天，只在年月都为零时，天数有效
-        isLeapYear = true;
-      }
-
-      if (largeMonths.indexOf(lastMonth) > -1) {
-        daysOFMonth = 31;
-      } else if (lastMonth === 2) {
-        if (isLeapYear) {
-          daysOFMonth = 29;
-        } else {
-          daysOFMonth = 28;
-        }
-      } else {
-        daysOFMonth = 30;
-      }
-
-      Y = yearNow - parseInt(r[1]);
-      M = monthNow - parseInt(r[3]);
-      D = dayNow - parseInt(r[4]);
-      if (D < 0) {
-        D = D + daysOFMonth; // 借一个月
-        M--;
-      }
-      if (M < 0) {
-        // 借一年 12个月
-        Y--;
-        M = M + 12; //
-      }
-
-      if (Y < 0) {
-        returnStr = "出生日期有误！";
-        console.log(returnStr);
-        return { year: 0, month: 0, day: 0 };
-      } else if (Y === 0) {
-        if (M === 0) {
-          returnStr = D + "D";
-        } else {
-          returnStr = M + "M";
-        }
-      } else {
-        if (M === 0) {
-          returnStr = Y + "Y";
-        } else {
-          returnStr = Y + "Y" + M + "M";
-        }
-      }
-
-      // console.log(Y, M, D);
-    }
-
-    // return returnStr;
-    return { year: Y, month: M, day: D };
-  },
-
-  /**
-   * 兼容map
-   */
-  handleCompatibilityMap(map = {}) {
-    /**
-     * c_key_list
-     * 兼容处理，
-     * 兼容用户 输入 map.xx, sql.xx, result.xx 都可以解析到值
-     * 只要找个一个key有值，其他key 都附上同样的值
-     */
-    if (typeof map !== "object") return map;
-    let c_key_list = ["map", "sql", "result"];
-    let key_list = Object.keys(map || {});
-    let curKey = key_list.find(k => c_key_list.includes(k));
-    if (curKey) {
-      c_key_list.forEach(c => {
-        map[c] = map[curKey];
-      });
-    }
-    return map;
-  },
-
-  randomId(len) {
-    return Math.random()
-      .toString(36)
-      .substr(3, len);
-  }
-};
-
-export default formUtils;

package/packages/big-table/src/components/password-com.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="psw-com">
-    <slot v-if="value">
-      <span>{{ hidePassword ? value : '●●●●●●' }}</span>
-      <span>
-        <a-tooltip overlayClassName="table-footer-tooltip-wrap" :mouseEnterDelay="0.3">
-          <template slot="title">
-            <div v-html="hidePassword ? '点击隐藏密码' : '点击查看密码'"></div>
-          </template>
-          <svg-icon @click.stop="handleTogglePsw" @dblclick.stop class="psw-icon" :icon-class="hidePassword ? 'chakan' : 'anniuyincang'" style="font-size: 1em;outline: none;" />
-        </a-tooltip>
-      </span>
-    </slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'password-com',
-  data() {
-    return { hidePassword: false };
-  },
-  props: {
-    styleSetting: {
-      type: Object,
-      default: () => ({})
-    },
-    value: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-  methods: {
-    handleTogglePsw() {
-      this.hidePassword = !this.hidePassword;
-      return false;
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.psw-com {
-  width: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
-
-  .psw-icon {
-    cursor: pointer;
-    &:active {
-      color: #5585f5;
-      // #2474ff
-    }
-    color: #969696;
-  }
-}
-</style>

package/packages/big-table/src/components/player-vod/index.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="video-container cp" @contextmenu.prevent>
-    <player :options="playerOptions"></player>
-  </div>
-</template>
-
-<script>
-import player from "./player";
-export default {
-  name: "playerVod",
-  data() {
-    return {
-      textplayerOptions: {
-        autoplay: true, // 如果true,浏览器准备好时开始播放。
-        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-        sources: [
-          {
-            type: "video/mp4",
-            src:
-              "https://2483-cn-north-4.cdn-vod.huaweicloud.com/asset/342c34d391612f9e26c1be4877bdd0f9/c8b7bdceb56eab1e123d20c4268d1e60.mp4" // url地址
-          }
-        ]
-      }
-    };
-  },
-  props: {
-    playerOptions: {
-      type: Object,
-      default: () => ({
-        sources: [
-          {
-            type: "video/mp4",
-            src: ""
-          }
-        ]
-      })
-    }
-  },
-  computed: {},
-  watch: {},
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {},
-  components: {
-    player
-  }
-};
-</script>
-
-<style lang="less" scoped></style>

package/packages/big-table/src/components/player-vod/player.vue

@@ -1,189 +0,0 @@
-<template>
-  <video
-    ref="video"
-    controls
-    @contextmenu.prevent
-    class="video-js vjs-default-skin vjs-big-play-centered"
-    webkit-playsinline="true"
-    playsinline
-  ></video>
-  <!-- src="https://2483-cn-north-4.cdn-vod.huaweicloud.com/asset/342c34d391612f9e26c1be4877bdd0f9/c8b7bdceb56eab1e123d20c4268d1e60.mp4" -->
-  <!-- class="video-js vjs-default-skin vjs-big-play-centered" -->
-</template>
-
-<script>
-import Video from "video.js";
-import "video.js/dist/video-js.css";
-export default {
-  name: "player",
-  data: () => ({
-    player: null,
-    defaultOptions: {
-      playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
-      autoplay: true, // 如果true,浏览器准备好时开始播放。 enlarge > -1
-      muted: false, // 默认情况下将会消除任何音频。
-      loop: false, // 导致视频一结束就重新开始。
-      preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-      // language: 'zh-CN',
-      // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-      // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-      // sources: [
-      //   {
-      //     type: "video/mp4",
-      //     src: "" //url地址
-      //   }
-      // ],
-      src: "",
-      poster: "", // 你的封面地址
-      // height: "600px",
-      height: 600,
-      // width: 750,
-      // width: 750,
-      width: parseInt(document.documentElement.clientWidth * 0.6),
-      controls: true,
-      notSupportedMessage: "此视频暂无法播放", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-      suppressNotSupportedError: true, // 不支持的类型是否马上展示报错信息
-      controlBar: {
-        timeDivider: true,
-        durationDisplay: true,
-        currentTimeDisplay: true,
-        remainingTimeDisplay: false,
-        pictureInPictureToggle: false, // 画中画
-        volumePanel: {
-          inline: false // 默认是true,横着的
-        }
-        // timeDivider: true,
-        // durationDisplay: true,
-        // chaptersButton: true,
-        // fullscreenToggle: true  //全屏按钮
-      },
-      errorDisplay: true,
-      posterImage: false,
-      bigPlayButton: true,
-      textTrackDisplay: false
-    }
-  }),
-  props: {
-    options: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    error(e) {
-      // 如果视频下载出错 则初始化视频至已缓冲时间的前3秒
-      let err = e.error();
-      if (err.code === 2) {
-        // 判断是否是网络加载问题
-        let buffTime = e.bufferedEnd() - 6;
-        e.load(this.playerOptions.sources[0].src);
-        e.currentTime(buffTime);
-        e.play();
-      } else {
-        this.alert.err(err.message);
-      }
-    }
-  },
-  watch: {
-    /* options: {
-                handler() {
-                    console.log('观测到options已发生变化:');
-                },
-                deep: true
-            },*/
-    src() {
-      // 侦听视频路径, 当视频路径发生改变时, 重新渲染video路径
-      this.player.src(this.src);
-      if (this.play) this.player.play();
-    },
-    play() {
-      // 侦听该属性, 当options的autoplay变为true时 直接播放视频
-      if (this.play) this.player.play();
-    }
-  },
-  computed: {
-    /* option() {
-                console.log('已计算');
-                console.log(this.options.sources[0].src);
-                // console.log(this.options.sources[0].hasOwnProperty('src'));
-                if (this.options.sources[0].src) {
-                    return this.options;
-                } else {
-                    return this.options;
-                }
-
-            },*/
-    src() {
-      return this.options.sources[0].src;
-    },
-    video() {
-      return this.$store.state.video;
-    },
-    play() {
-      return this.options.autoplay;
-    }
-  },
-  mounted() {
-    const vm = this;
-    this.player = Video(
-      this.$refs.video,
-      Object.assign(this.defaultOptions, this.options),
-      function() {
-        // this.tech_.off("dblclick");
-        this.on("play", () => {
-          // this.volume(vm.video.volume);
-        });
-
-        this.on("volumechange", () => {
-          // vm.video.volume = this.volume();
-          // window.localStorage.volume = this.volume();
-        });
-
-        this.on("error", () => {
-          let err = this.error();
-          if (err.code === 2) {
-            // 判断是否是网络加载问题
-            let buffTime = this.bufferedEnd() - 6;
-            this.load(vm.src);
-            this.currentTime(buffTime);
-            this.play();
-          } else {
-            console.log(err.message);
-          }
-        });
-      }
-    );
-  }
-};
-</script>
-<style lang="less">
-// scoped
-// 进度显示当前播放时间
-.video-js {
-  height: 512px;
-  .vjs-time-control {
-    display: block;
-  }
-  // .vjs-remaining-time {
-  //   display: none;
-  // }
-  .vjs-current-time.vjs-time-control {
-    display: block;
-  }
-  .vjs-duration.vjs-time-control {
-    display: block;
-  }
-}
-
-// .video-js
-// 暂停时显示播放按钮
-.vjs-paused .vjs-big-play-button,
-.vjs-paused.vjs-has-started .vjs-big-play-button {
-  display: block;
-}
-
-// 点击屏幕播放/暂停
-.video-js.vjs-playing .vjs-tech {
-  pointer-events: auto;
-}
-</style>

package/packages/big-table/src/components/player-vod/video-list.vue

@@ -1,264 +0,0 @@
-<template>
-  <div class="vod-list">
-    <!-- 展示列表 -->
-    <div class="show-list">
-      <template>
-        <div v-for="(item, index) in showFileList" :key="index" class="vod-wrap">
-          <!-- 上传完成 -->
-          <div class="vod-def-bg">
-            <img :src="getvideoCover(item)" class="vod-cover-img" />
-          </div>
-          <div class="icon-wrap">
-            <a-icon type="caret-right" class="icon-play" @click="palyerVod(item, index)" />
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <!-- 弹窗播放视频 -->
-    <video-modal v-if="videoVisible" :visible.sync="videoVisible" :fileList="fileList" :palyerIndex="palyerIndex"></video-modal>
-  </div>
-</template>
-
-<script>
-import videoModal from './video-modal';
-import { Icon } from 'ant-design-vue';
-export default {
-  name: 'videoList',
-  data() {
-    return {
-      videoVisible: false,
-      fileList: [],
-
-      palyerIndex: 0,
-      default_cover: require('../../assets/img/video_default_cover.png')
-    };
-  },
-  props: {
-    propsList: {
-      type: [Array, String],
-      default: () => []
-    },
-    columnName: {
-      type: String,
-      default: ''
-    },
-    stlist: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    showFileList() {
-      let val = this.stlist || this.propsList;
-      return this.initFileList(val) || [];
-    }
-  },
-  watch: {
-    // stlist: {
-    //   deep: true,
-    //   handler() {
-    //     if (this.stlist) {
-    //       this.initFileList(this.stlist);
-    //     }
-    //   }
-    // },
-    // propsList: {
-    //   deep: true,
-    //   immediate: true,
-    //   handler() {
-    //     if (this.propsList && this.propsList.length) {
-    //       this.initFileList(this.propsList);
-    //     }
-    //   }
-    // }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    initFileList(val) {
-      let fileList = val;
-      let resList = [];
-      if (Array.isArray(fileList)) {
-        resList = JSON.parse(JSON.stringify(fileList));
-      }
-      if (typeof fileList === 'string') {
-        resList = this.handleGetJsonStr(fileList);
-      }
-      resList.forEach(v => {
-        v.vodCoverUrl = v.vodCoverUrl || undefined;
-        let vodUrl = v.url || v.videoUrl;
-        let strList = vodUrl.split('.');
-        let last = strList[strList.length - 1];
-        let type = `video/${last}`;
-        v.playerOptions = {
-          sources: [
-            {
-              type,
-              src: vodUrl
-            }
-          ]
-        };
-      });
-      this.$set(this, 'fileList', resList || []);
-      return resList;
-    },
-
-    handleGetJsonStr(str) {
-      // [], {type: 'jsonb', value: "[]"}
-      let resList = [];
-      if (this.$utils.isJSON(str)) {
-        resList = JSON.parse(str);
-      } else {
-        resList = typeof str === 'string' ? [] : str;
-      }
-      if (resList && resList.type === 'jsonb') {
-        if (this.$utils.isJSON(resList.value)) {
-          resList = JSON.parse(resList.value);
-          // loop
-          if (resList.type === 'jsonb') {
-            resList = this.handleGetJsonStr(resList);
-          }
-        }
-      }
-      return resList;
-    },
-
-    /** 播放视频 */
-    palyerVod(data, index) {
-      this.palyerIndex = index;
-      let vodUrl = data.url || data.videoUrl;
-      let strList = vodUrl.split('.');
-      let last = strList[strList.length - 1];
-      let type = `video/${last}`;
-      this.playerOptions = {
-        sources: [
-          {
-            type,
-            src: vodUrl
-          }
-        ]
-      };
-      this.videoVisible = true;
-    },
-
-    /**
-     * 面图图加载报错
-     */
-    coverImgOnError(e) {
-      let oldUrl = e.target.src;
-      let randomKeys = new Date().getTime().toString();
-      e.target.src = oldUrl + `?randomKeys=${randomKeys}`;
-    },
-
-    /**
-     * 拼接封面图
-     */
-    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 '';
-    },
-
-    getvideoCover(item) {
-      return item.vodCoverUrl || this.default_cover;
-    }
-  },
-  components: {
-    videoModal,
-    [Icon.name]: Icon
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.vod-list {
-  height: 100%;
-}
-.show-list {
-  height: 100%;
-  display: flex;
-  padding: 3px 0;
-}
-.vod-wrap {
-  position: relative;
-  display: inline-block;
-  background-color: #fff;
-  height: 100%;
-  // height: 70px;
-  // width: 125px;
-  width: fit-content;
-  // min-width: 36px;
-  // min-height: 36px;
-  // padding: 0 10px;
-  margin-right: 5px;
-  overflow: hidden;
-  // border: 1px solid #eeeeee;
-
-  .vod-def-bg {
-    width: 100%;
-    height: 100%;
-    // background-color: #4e4e4e;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(50, 50, 51, 0.3);
-
-    .vod-cover-img {
-      // height: 100%;
-      height: 130px;
-      width: 210px;
-      object-fit: cover;
-    }
-  }
-
-  .icon-wrap {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .icon-play {
-    // position: absolute;
-    // top: 50%;
-    // left: 50%;
-    // z-index: 1;
-    // display: block;
-    // width: 20px;
-    // height: 20px;
-    // margin: -10px 0 0 -10px;
-    // font-size: 18px;
-    color: #fff;
-    opacity: 0.8;
-    transform: scale3d(2, 2, 2);
-    transition: all 0.25s ease-out;
-  }
-}
-
-.player-wrap {
-  padding: 100px 0;
-  height: 100%;
-  width: 100%;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
-}
-</style>