eoss-ui 0.3.97

package/packages/pagination/src/main.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-pagination
+    class="es-pagination"
+    v-bind="$attrs"
+    :current-page="pageNum"
+    :page-size="pageSize"
+    :page-sizes="limits"
+    :layout="layout"
+    :total="totalCount"
+    :pager-count="groups"
+    :hide-on-single-page="hideOnSinglePage"
+    :unit="false"
+    @size-change="handleSize"
+    @current-change="handleCurrent"
+    @prev-click="handlePrev"
+    @next-click="handleNext"
+  >
+  </el-pagination>
+</template>
+<script>
+export default {
+  name: 'EsPagination',
+  inheritAttrs: false,
+  props: {
+    // 当前页码
+    pageNum: {
+      type: Number,
+      default: 1
+    },
+    // 每页显示的条数
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    // 每页条数的选择项
+    limits: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 40, 50, 100];
+      }
+    },
+    // 总页数
+    pageCount: Number,
+    // 总条目数
+    totalCount: Number,
+    // 自定义排版
+    layout: {
+      type: String,
+      default: 'prev, pager, next, sizes, total'
+    },
+    // 只有一页时是否隐藏
+    hideOnSinglePage: {
+      type: Boolean,
+      default: false
+    },
+    // 页码按钮的数量
+    groups: {
+      type: Number,
+      default: 7
+    }
+  },
+  methods: {
+    handleSize(res) {
+      this.$emit('change', res);
+    },
+    handleCurrent(res) {
+      this.$emit('current', res);
+    },
+    handlePrev(res) {
+      this.$emit('prev', res);
+    },
+    handleNext(res) {
+      this.$emit('next', res);
+    }
+  }
+};
+</script>

package/packages/player/index.js

@@ -0,0 +1,5 @@
+import EsPlayer from './src/main';
+
+EsPlayer.install = Vue => Vue.component(EsPlayer.name, EsPlayer);
+
+export default EsPlayer;

package/packages/player/src/main.vue

@@ -0,0 +1,194 @@
+<template>
+  <div lang="zh-cn">
+    <video
+      ref="videoPlayer"
+      class="es-video-player video-js"
+      playsinline="true"
+      :muted="muted"
+    ></video>
+  </div>
+</template>
+
+<script>
+import videojs from 'video.js';
+import zhcn from 'video.js/dist/lang/zh-CN.json';
+import 'video.js/dist/video-js.css';
+import util from 'eoss-ui/src/utils/util';
+videojs.addLanguage('zh-CN', zhcn);
+export default {
+  name: 'EsPlayer',
+  props: {
+    source: [String, Object],
+    type: {
+      type: String,
+      default: 'application/x-mpegURL'
+    },
+    autoplay: Boolean,
+    muted: Boolean,
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    fluid: {
+      type: Boolean,
+      default: true
+    },
+    aspectRatio: {
+      type: String,
+      default: '16:9'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    notSupportedMessage: {
+      type: String,
+      default: '视频源数据加载错误'
+    },
+    isPause: Boolean,
+    isDispose: Boolean
+  },
+  computed: {
+    isObject() {
+      return util.isObject(this.source);
+    }
+  },
+  data() {
+    return {
+      player: null
+    };
+  },
+  watch: {
+    source(val, old) {
+      if (JSON.stringify(val) !== JSON.stringify(old)) {
+        if (this.isObject) {
+          this.player.src({ src: val.src, type: this.type });
+          if (val.poster) {
+            this.player.poster(val.poster);
+          }
+        } else {
+          this.player.src({ src: val });
+        }
+      }
+      this.player.play();
+    },
+    isPause(val) {
+      if (val) {
+        this.player.pause();
+      }
+    },
+    isDispose(val) {
+      if (val) {
+        this.player.dispose();
+      }
+    }
+  },
+  mounted() {
+    this.ready();
+  },
+  methods: {
+    ready() {
+      if (this.source) {
+        const options = {
+          ...this.$attrs,
+          language: 'zh-CN',
+          autoplay: this.autoplay,
+          controls: this.controls,
+          fluid: this.fluid, // 按比例缩放适应容器
+          aspectRatio: this.aspectRatio,
+          height: this.height,
+          width: this.width,
+          notSupportedMessage: this.notSupportedMessage,
+          sources: [
+            {
+              withCredentials: false,
+              type: this.type,
+              src: this.isObject ? this.source.src : source
+            }
+          ],
+          poster: this.isObject ? this.source.poster : ''
+        };
+        this.player = videojs(this.$refs.videoPlayer, options, () => {
+          this.$emit('ready', this.player);
+        });
+        //开始请求数据
+        this.player.on('loadstart', () => {
+          this.$emit('loadstart', this.player);
+        });
+        //正在请求数据
+        this.player.on('progress', () => {
+          this.$emit('progress', this.player);
+        });
+        //获取资源长度完成
+        this.player.on('loadedmetadata', () => {
+          this.$emit('loadedmetadata', this.player);
+        });
+        //视频源数据加载完成
+        this.player.on('canplaythrough', () => {
+          this.$emit('canplaythrough', this.player);
+        });
+        //等待数据
+        this.player.on('waiting', () => {
+          this.$emit('waiting', this.player);
+        });
+        //视频开始播放
+        this.player.on('play', () => {
+          this.$emit('play', this.player);
+        });
+        //视频播放中
+        this.player.on('playing', () => {
+          this.$emit('playing', this.player);
+        });
+        //视频暂停播放
+        this.player.on('pause', () => {
+          if (!this.isPause) {
+            this.$emit('pause', this.player);
+          }
+        });
+        //视频播放结束
+        this.player.on('ended', () => {
+          this.$emit('ended', this.player);
+        });
+        //加载错误
+        this.player.on('error', () => {
+          this.$emit('error', this.player);
+        });
+        //视频跳转中
+        this.player.on('seeking', () => {
+          this.$emit('seeking', this.player);
+        });
+        //视频跳转结束
+        this.player.on('seeked', () => {
+          this.$emit('seeked', this.player);
+        });
+        //播放速率改变
+        this.player.on('ratechange', () => {
+          this.$emit('ratechange', this.player);
+        });
+        //播放时长改变
+        this.player.on('timeupdate', () => {
+          this.$emit('timeupdate', this.player);
+        });
+        //音量改变
+        this.player.on('volumechange', () => {
+          this.$emit('volumechange', this.player);
+        });
+        //网速异常
+        this.player.on('stalled', () => {
+          this.$emit('stalled', this.player);
+        });
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  }
+};
+</script>
+<style></style>

package/packages/qr-code/index.js

@@ -0,0 +1,5 @@
+import EsQrCode from './src/main';
+
+EsQrCode.install = Vue => Vue.component(EsQrCode.name, EsQrCode);
+
+export default EsQrCode;

package/packages/qr-code/src/main.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="es-qrcode-box" id="qrcode" ref="qrcode">
+    <img
+      class="es-qrcode-img"
+      :width="_width"
+      :height="_height"
+      ref="qrcodeImg"
+      alt="二维码图片"
+    />
+    <img
+      v-if="logo"
+      class="es-qrcode-logo"
+      ref="qrcodeLogo"
+      :src="logo"
+      alt="二维码logo"
+    />
+    <canvas
+      :width="_width"
+      :height="_height"
+      class="canvas"
+      ref="canvas"
+    ></canvas>
+  </div>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+const QRCode = require('qrcode');
+export default {
+  name: 'EsQrCode',
+  props: {
+    content: {
+      type: String,
+      required: true
+    },
+    logo: String,
+    text: String,
+    width: Number,
+    height: Number,
+    auto: Boolean,
+    option: {
+      type: Object,
+      default: () => {
+        return {
+          errorCorrectionLevel: 'H', //纠错等级
+          color: {
+            dark: '#000000',
+            light: '#ffffff'
+          }
+        };
+      }
+    }
+  },
+  computed: {
+    _width() {
+      if (this.auto) {
+        return this.$refs.qrcode.offsetWidth;
+      }
+      return this.width ? this.width : 300;
+    },
+    _height() {
+      if (this.auto) {
+        return this.$refs.qrcode.offsetHeight;
+      }
+      return this.height ? this.height : 300;
+    }
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    logo: function(val) {
+      this.$nextTick(() => {
+        this.createQRCode();
+      });
+    },
+    content: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.createQRCode();
+        }
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.createQRCode();
+    });
+  },
+  methods: {
+    createQRCode() {
+      let qrcodeImg = this.$refs.qrcodeImg;
+      let qrcodeLogo = this.$refs.qrcodeLogo;
+      let canvas = this.$refs.canvas;
+      let option = util.extend({}, this.option, {
+        width: this._width,
+        height: this._height
+      });
+      if (!qrcodeImg) {
+        return false;
+      }
+      QRCode.toDataURL(this.content, option, (err, url) => {
+        if (this.content && url) {
+          qrcodeImg.src = url;
+          // 画二维码里的logo// 在canvas里进行拼接
+          let ctx = canvas.getContext('2d');
+          setTimeout(() => {
+            //获取图片
+            ctx.drawImage(qrcodeImg, 0, 0, this._width, this._height);
+            if (this.logo && this.logo.indexOf('.') > -1) {
+              //设置logo大小
+              let logoPosition = (this._width - 46) / 2; //logo相对于canvas居中定位
+              //设置获取的logo将其变为圆角以及添加白色背景
+              /* ctx.fillStyle = "#fff";
+							ctx.beginPath();
+							let h = 46; //圆角高 10为基数(logo四周白色背景为10/2)
+							let w = 46; //圆角宽
+							let x = logoPosition - 5;
+							let y = logoPosition - 5;
+							let r = 5; //圆角半径
+							ctx.moveTo(x + r, y);
+							ctx.arcTo(x + w, y, x + w, y + h, r);
+							ctx.arcTo(x + w, y + h, x, y + h, r);
+							ctx.arcTo(x, y + h, x, y, r);
+							ctx.arcTo(x, y, x + w, y, r);
+							ctx.closePath();
+							ctx.fill(); */
+              ctx.drawImage(qrcodeLogo, logoPosition, logoPosition, 46, 46);
+            } else if (this.text) {
+              //设置字体
+              let fpadd = 10; //规定内间距
+              ctx.font = 'bold 16px Arial';
+              let tw = ctx.measureText(this.text).width; //文字真实宽度
+              let ftop = (this._height - 16) / 2; //根据字体大小计算文字top
+              let fleft = (this._width - tw) / 2; //根据字体大小计算文字left
+              let tp = 16 / 2; //字体边距为字体大小的一半可以自己设置
+              ctx.fillStyle = '#fff';
+              ctx.fillRect(fleft - tp / 2, ftop - tp / 2, tw + tp, 16 + tp);
+              ctx.textBaseline = 'top'; //设置绘制文本时的文本基线。
+              ctx.fillStyle = '#f40';
+              ctx.fillText(this.text, fleft, ftop);
+            }
+            canvas.style.display = 'none';
+            qrcodeImg.src = canvas.toDataURL();
+            qrcodeImg.style.display = 'inline-block';
+          }, 500);
+        }
+      });
+    }
+  }
+};
+</script>

package/packages/radio/index.js

@@ -0,0 +1,5 @@
+import EsRadio from './src/main';
+
+EsRadio.install = Vue => Vue.component(EsRadio.name, EsRadio);
+
+export default EsRadio;

package/packages/radio/src/main.vue

@@ -0,0 +1,259 @@
+<template>
+  <div v-show="display" v-if="!hide" class="es-radio">
+    <el-radio
+      v-if="!optionList.length && label"
+      v-model="selectValue"
+      :label="label"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <slot></slot>
+    </el-radio>
+    <el-radio-group
+      v-else
+      v-model="selectValue"
+      v-bind="$attrs"
+      :rules="rules"
+      v-on="$listeners"
+    >
+      <template v-if="genre === 'button'">
+        <el-radio-button
+          v-for="(item, index) in optionList"
+          :key="item.value || index"
+          :label="item"
+          :disabled="item.disabled"
+        >
+          {{ item.label }}
+        </el-radio-button>
+      </template>
+      <template v-else>
+        <el-radio
+          v-for="(item, index) in optionList"
+          :key="item.value || index"
+          :label="item"
+          :disabled="item.disabled"
+          :border="genre === 'border'"
+        >
+          {{ item.label }}
+        </el-radio>
+      </template>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EsRadio',
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    valueKey: {
+      type: String,
+      default: ''
+    },
+    valueType: {
+      type: String,
+      default: 'string'
+    },
+    // 指定选择项显示值的键名，data元素是对象类型时必填
+    optionKey: {
+      type: String,
+      default: ''
+    },
+    // 	样式风格 button(按钮样式), border(带有边框)
+    genre: {
+      type: String,
+      default: ''
+    },
+    display: {
+      type: Boolean,
+      default: true
+    },
+    hide: {
+      type: Boolean,
+      default: false
+    },
+    // 选择项远程地址
+    url: {
+      type: String,
+      default: ''
+    },
+    // 选择项获取代码表数据(优先级大于url)
+    sysCode: {
+      type: String,
+      default: ''
+    },
+    // 选择项获取代码表数据(优先级大于url)
+    rules: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 	选择项本地数据
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 	选择项本地数据
+    optionData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    method: {
+      type: String,
+      default: 'get'
+    },
+    params: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      list: '',
+      radioValue: ''
+    };
+  },
+  computed: {
+    selectValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        return val;
+      }
+    },
+    optionList: {
+      get() {
+        let arr = [];
+        if (this.list.length) {
+          arr = this.list;
+        } else if (this.optionData.length) {
+          arr = this.optionData;
+        } else if (this.data.length) {
+          arr = this.data;
+        }
+        arr.forEach(item => {
+          if (this.optionLabelKey) {
+            item.label = item[this.optionLabelKey];
+          } else if (this.optionKey) {
+            item.label = item[this.optionKey];
+          } else {
+            item.label = item.label || item.name || item.shortName || item.text;
+          }
+          if (this.optionValueKey) {
+            item.value = item[this.optionValueKey];
+          } else {
+            item.value = item.value || item.id || item.label;
+          }
+        });
+        return arr;
+      },
+      set(val) {
+        return val;
+      }
+    },
+    border() {
+      if (this.genre === 'border') {
+        return true;
+      }
+      return false;
+    },
+    reqUrl: {
+      get() {
+        return this.sysCode || this.url;
+      },
+      set(val) {
+        return val;
+      }
+    }
+  },
+  watch: {
+    // value(newVal) {
+    // 	this.getRadioValue(newVal);
+    // },
+    reqUrl(val) {
+      if (val) {
+        this.getOptinData();
+      }
+    }
+  },
+  mounted() {
+    // this.getRadioValue(this.value);
+    this.getOptinData();
+  },
+  methods: {
+    getRadioValue(newVal) {
+      if (
+        this.valueType === 'object' &&
+        this.value &&
+        util.getObjectType(this.value) === 'object'
+      ) {
+        this.radioValue = this.value[this.valueKey];
+        return;
+      }
+      this.radioValue = newVal;
+    },
+    getOptinData() {
+      if (!this.reqUrl) {
+        return [];
+      }
+      this.tableLoading = true;
+      const reqData = { ...this.params, ...this.where };
+      util
+        .ajax({
+          url: this.reqUrl,
+          method: this.method,
+          params: reqData,
+          data: reqData
+        })
+        .then(res => {
+          this.tableLoading = false;
+          if (res.rCode === 0) {
+            if (res.results && util.getObjectType(res.results) === 'array') {
+              this.list = res.results;
+            } else if (
+              res.results &&
+              util.getObjectType(res.results) === 'object'
+            ) {
+              this.list = res.list || res.records || res.data;
+            }
+          }
+        })
+        .catch(err => {
+          this.tableLoading = false;
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    handleRadioChange(value) {
+      let radioValue = value;
+      if (this.valueType === 'object') {
+        radioValue = this.optionList.filter(item => {
+          return item.label === value;
+        })[0];
+      }
+      this.$emit('change', radioValue);
+    }
+  }
+};
+</script>

package/packages/radio-group/index.js

@@ -0,0 +1,6 @@
+import EsRadio from './src/main';
+
+/* istanbul ignore next */
+EsRadio.install = function(Vue) {Vue.component(EsRadio.name, EsRadio);};
+
+export default EsRadio;