@v2coding/ui 0.1.0

package/src/components/field/field.upload.file.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="ui-file-upload-field">
+    <el-upload v-if="!preview" v-show="!limit || !pickerValue || pickerValue.length < limit" action="1" :show-file-list="false" :disabled="disabled" :http-request="upload" class="uploader" :class="{disabled: disabled || uploading}">
+      <div class="upload-btn" :class="{disabled: uploading}">浏览...</div>
+    </el-upload>
+    <div class="files">
+      <template v-for="(url, index) in pickerValue">
+        <div :key="index" v-if="!!url" class="file">
+          <i class="el-icon-document">&nbsp;</i>
+          <a :href="url" target="_blank">{{ getFileName(url) }}</a>
+          <span v-if="hasDeleteBtn" class="close" @click="remove(url)"><i class="el-icon-close"></i></span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+  import FieldMixin from './field.mixin';
+  import Upload from './field.helper.upload';
+
+  const getUrlSuffix = (url) => {
+    if (!url) {
+      return '';
+    }
+    const index = url.lastIndexOf('.');
+    if (index === -1) {
+      return '';
+    }
+    return url.substring(index + 1);
+  };
+
+  export default {
+  name: 'ui-field-upload-file',
+  mixins: [FieldMixin],
+  props: {
+    url: {
+      type: String,
+      default: '/aliyun/oss',
+    },
+    params: Object,
+    filename: {
+      type: String,
+      default: 'file',
+    },
+    uploadType: {
+      type: String,
+      validator: (val) => ['oss', 'default'].includes(val),
+      default: 'oss',
+    },
+    limit: {
+      type: Number,
+      default: 0,
+    },
+    deleteBtn: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * eg: beforeUpload(file) { ... }
+     *
+     * return false will cancel upload
+     **/
+    beforeUpload: {
+      type: Function,
+      default: () => () => void 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    preview: {
+      type: Boolean,
+      default: false,
+    },
+    needCreateAttachment: {
+      type: Boolean,
+      default: false,
+    },
+    createAttachmentUrl: {
+      type: String,
+      default: '/Sys/SysAttachment/create',
+    },
+    createAttachmentParams: null,
+    createAttachment: {
+      type: Function,
+      default: function(file, url) {
+        const params = {name: file.name, suffix: getUrlSuffix(url), url, ...(this.createAttachmentParams || {})};
+        return this.$axios.post(this.createAttachmentUrl, params);
+      },
+    },
+  },
+  data() {
+    return {
+      uploading: false,
+    };
+  },
+  computed: {
+    pickerValue() {
+      if (!this.value || typeof this.value !== 'string') {
+        return [];
+      }
+      return this.value.split(',');
+    },
+    hasDeleteBtn() {
+      if (this.preview || this.disabled) {
+        return false;
+      }
+      return this.deleteBtn;
+    },
+  },
+  methods: {
+    upload(opt) {
+      const {file} = opt;
+      const allow = this.beforeUpload(file);
+      if (allow === false) {
+        return;
+      }
+      if (this.uploading) {
+        return;
+      }
+      this.uploading = true;
+      const uploadServer = Upload[this.uploadType] || Upload.default;
+      uploadServer(this.url, {filename: file.name}, {file, filename: this.filename}).then((result) => {
+        this.uploading = false;
+        if (!result.success) {
+          this.$message.error(result.message || '上传失败');
+          return;
+        }
+        this.$message.success('上传成功');
+        const url = result.content.url;
+        this.onChange([...this.pickerValue, url].join(','));
+        this.$emit('afterUpload', result);
+        if (this.needCreateAttachment && typeof this.createAttachment === 'function') {
+          this.createAttachment(file, url).then(result => {
+            this.$emit('create-attachment', result);
+          }).catch(error => {
+            this.$emit('create-attachment', error);
+          });
+        }
+      }).catch(() => {
+        this.uploading = false;
+      });
+    },
+    remove(url) {
+      console.log(this.pickerValue);
+      console.log(url);
+      const index = this.pickerValue.indexOf(url);
+      console.log(index);
+      if (index === -1) {
+        return;
+      }
+      const cloneValue = [...this.pickerValue];
+      cloneValue.splice(index, 1);
+      this.onChange(cloneValue.join(','));
+      this.$emit('deleteUpload', url);
+    },
+    getFileName(url) {
+      const pathname = new URL(url).pathname;
+      return pathname.substring(pathname.lastIndexOf('/') + 1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@primary-color: #409eff;
+
+.ui-file-upload-field {
+  width: 100%;
+  .uploader {
+    margin-bottom: 5px;
+
+    &.disabled ::v-deep .el-upload {
+      cursor: not-allowed;
+      pointer-events: none;
+
+      .upload-btn {
+        color: #888c94;
+        background-color: #edeef0;
+      }
+    }
+  }
+
+  .upload-btn {
+    padding: 5px 10px;
+    line-height: 1;
+    background-color: @primary-color;
+    color: #fff;
+    font-size: 12px;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: darken(@primary-color, 10%);
+    }
+  }
+
+  .files {
+    .file {
+      color: #606266;
+      font-size: 14px;
+      transition: all 0.3s;
+      cursor: pointer;
+      line-height: 28px;
+      display: flex;
+      align-items: center;
+
+      a {
+        flex: 1;
+        color: #606266;
+        transition: all 0.3s;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .close {
+        color: transparent;
+        width: 28px;
+        text-align: center;
+        visibility: hidden;
+        transition: color 0.3s;
+        font-weight: bold;
+      }
+
+      &:hover {
+        background-color: #f5f7fa;
+
+        a {
+          color: #409eff;
+        }
+
+        .close {
+          color: @primary-color;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/field/field.upload.image.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="ui-image-upload-field">
+    <div v-for="(url, index) in pickerValue" :key="index" class="item">
+      <el-image :src="url" :preview-src-list="previewBtn ? pickerValue : []" style="width: 100%; height: 100%;"/>
+      <div v-if="hasDeleteBtn" class="remove" @click="remove(url)">
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
+    <el-upload v-if="!preview" action="1" :show-file-list="false" :http-request="upload" class="uploader" :disabled="disabled" :class="{disabled: disabled || uploading}">
+      <div v-show="!limit || !pickerValue || pickerValue.length < limit" class="item upload-btn">
+        <i class="el-icon-plus"></i>
+        <span>上传图片</span>
+      </div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import FileUploadField from './field.upload.file';
+
+export default {
+  name: 'ui-field-upload-image',
+  mixins: [FileUploadField],
+  props: {
+    previewBtn: {
+      type: Boolean,
+      default: true,
+    },
+    url: {
+      type: String,
+      default: '/aliyun/oss',
+    },
+    uploadType: {
+      type: String,
+      default: 'oss',
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ui-image-upload-field {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .uploader.disabled ::v-deep .el-upload {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .upload-btn {
+      background: #edeef0;
+      color: #888c94;
+    }
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    width: 140px;
+    height: 140px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    border: 1px dashed #d0d2d7;
+    padding: 8px;
+    border-radius: 2px;
+    box-sizing: border-box;
+
+    .remove {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 24px;
+      height: 24px;
+      background-color: rgba(0, 0, 0, 0.7);
+      border-radius: 0 0 0 22px;
+      cursor: pointer;
+
+      .el-icon-close {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+
+    &.upload-btn {
+      background: #f7f8f9;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      color: #409eff;
+
+      & > .el-icon-plus {
+        font-size: 1.6em;
+      }
+
+      & > span {
+        font-size: 16px;
+        line-height: 1.2;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  .item:hover .modal {
+    visibility: visible;
+  }
+
+  ::v-deep .preview {
+    display: inline-block;
+    width: auto;
+    max-width: 60%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

package/src/components/field/field.upload.portrait.vue

@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div class="ui-image-upload-file">
+      <div class="item" v-show="showPhoto">
+        <div class="modal">
+          <a :href="photoUrl" target="_blank"><i class="el-icon-zoom-in"></i></a>
+          <i class="el-icon-delete" @click="remove()"></i>
+        </div>
+        <div class="image" :style="{'background-image': `url(${imgUrl})`}"></div>
+      </div>
+      <el-row v-show="!showPhoto">
+        <div @click="showDialog" class="item upload-btn">
+          <i class="el-icon-fa-camera"></i>
+        </div>
+      </el-row>
+    </div>
+    <ui-dialog :title="title" :visible.sync="visible" width="30%" :confirm="onConfirm">
+      <el-row v-loading="videoLoading">
+        <video id="videos" width="100%"/>
+      </el-row>
+      <el-row class="close">
+        <el-col v-show="false">
+          <canvas id="canvas" :width="w + 'px'" :height="h + 'px'"/>
+        </el-col>
+        <el-col :span="12">
+          <img :src="imgUrl" class="show-img" width="100%" alt="">
+        </el-col>
+        <el-col :span="12" class="buttons">
+          <div class="buttons-desc">
+            <div class="capture">
+              <div
+                  :class="{'out-circle': true, reduce: isReduce}"
+                  @click="capture"
+                  @mousedown="isReduce = true"
+                  @mouseup="isReduce = false"
+                  @mouseleave="isReduce = false"
+              >
+                <i class="el-icon-fa-camera"></i>
+              </div>
+            </div>
+            <el-button @click="updatePortrait">上传照片</el-button>
+          </div>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button>取 消</el-button>
+        <el-button type="primary">确 定</el-button>
+      </span>
+    </ui-dialog>
+  </div>
+</template>
+<script>
+  import FieldMixin from './field.mixin';
+  import Upload from './field.helper.upload';
+
+  export default {
+    name: 'ui-field-upload-portrait',
+    mixins: [FieldMixin],
+    data() {
+      return {
+        videoLoading: true, //相机初始化loading
+        isReduce: false, //拍照按钮动画
+        front: true,//是否打开后摄像头
+        showPhoto: false,
+        imgUrl: '',
+        photoUrl: '',
+        w: 320,
+        h: 240,
+      };
+    },
+    props: {
+      params: {
+        type: Object,
+        default: () => ({
+          rootDirName: 'image',
+          fileType: 2,
+        }),
+      },
+      title: {
+        type: String,
+        default: '请上传照片',
+      },
+      filename: {
+        type: String,
+        default: 'file',
+      },
+      url: {
+        type: String,
+        default: '/api/oss/upload',
+      },
+      uploadType: {
+        type: String,
+        validator: (val) => ['oss', 'default'].includes(val),
+        default: 'default',
+      },
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      remove() {
+        this.imgUrl = '';
+        this.showPhoto = false;
+      },
+      showDialog() {
+        this.visible = true;
+        this.init();
+      },
+      onConfirm() {
+        if (this.photoUrl === '') {
+          this.$message.error('请上传图片后点击确定');
+          return;
+        }
+        this.visible = false;
+        this.onChange(this.photoUrl);
+        this.showPhoto = true;
+      },
+      //点击拍照
+      capture() {
+        const videoDom = document.getElementById('videos');
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(videoDom, 0, 0, this.w, this.h);
+        this.imgUrl = canvas.toDataURL();
+      },
+      //初始化 打开摄像头
+      init() {
+        const _this = this;
+        const constraints = {video: {width: this.w, height: this.h, facingMode: {exact: this.front ? 'user' : 'environment'}}};
+        navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
+          const video = document.querySelector('video');
+          video.srcObject = mediaStream;
+          _this.videoLoading = false;
+          video.onloadedmetadata = function() {
+            video.play();
+          };
+        }).catch(function(err) {
+          console.log(err.name + ': ' + err.message);
+        }); // 总是在最后检查错误
+      },
+      //base64转file
+      toFile(value, fileName) {
+        if (value !== null || ('' && value.indexOf('base'))) {
+          const arr = value.split(','), mime = arr[0].match(/:(.*?);/)[1], bsTr = atob(arr[1]);
+          let n = bsTr.length, u8arr = new Uint8Array(n);
+          while (n--) {
+            u8arr[n] = bsTr.charCodeAt(n);
+          }
+          return new File([u8arr], fileName, {type: mime});
+        }
+      },
+      //上传照片
+      updatePortrait() {
+        if (!this.imgUrl) {
+          this.$message.error('请先拍照后上传');
+          return;
+        }
+        const file = this.toFile(this.imgUrl, 'file.png');
+        console.log(file);
+        const uploadServer = Upload[this.uploadType] || Upload.default;
+        uploadServer(this.url, this.params, {file, filename: this.filename}).then((result) => {
+          console.log(result);
+          this.photoUrl = result.content.url;
+          if (!result.success) {
+            this.$message.error(result.message || '上传失败');
+            return;
+          }
+          this.$message.success('上传成功');
+          this.onChange('');
+        });
+      },
+    },
+  };
+</script>
+<style lang="less" scoped>
+  .ui-image-upload-file {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .item {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      width: 140px;
+      height: 140px;
+      margin-bottom: 10px;
+      margin-right: 10px;
+      border: 1px dashed #d0d2d7;
+      padding: 8px;
+      border-radius: 2px;
+      box-sizing: border-box;
+
+      .modal {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        background: rgba(0, 0, 0, 0.5);
+        visibility: hidden;
+        line-height: initial;
+        border-radius: 2px;
+
+        [class^='el-icon-'] {
+          color: #fff;
+          font-size: 1.5em;
+          cursor: pointer;
+        }
+      }
+
+      > .image {
+        width: 100%;
+        height: 100%;
+        background: no-repeat center;
+        background-size: contain;
+      }
+
+      &.upload-btn {
+        background: #edeef0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        cursor: pointer;
+
+        & > i {
+          width: 2em;
+          color: #888c94;
+          font-size: 20px;
+          line-height: 1.2;
+        }
+      }
+    }
+
+    .item:hover .modal {
+      visibility: visible;
+    }
+
+    ::v-deep .preview {
+      display: inline-block;
+      width: auto;
+      max-width: 60%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .show-img {
+    border: 1px dashed #ccc;
+    padding: 5px;
+  }
+
+  .capture {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: #ccc;
+    text-align: center;
+    color: #CCC;
+    overflow: hidden;
+    margin: 0 auto 10px;
+
+    .out-circle {
+      width: 50px;
+      height: 50px;
+      background: #FFF;
+      border-radius: 50%;
+      line-height: 55px;
+      margin: 5px auto;
+      overflow: hidden;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+      }
+    }
+
+    .reduce {
+      transform: scale(.8);
+      transition: .2s linear;
+    }
+  }
+
+  .buttons {
+    position: relative;
+    height: 240px;
+
+    .buttons-desc {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+    }
+  }
+</style>

package/src/components/fill-view/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="['ui-fill-view', direction]">
+    <div class="wrapper" :style="directionStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ui-fill-view',
+    props: {
+      direction: {
+        validator: (val) => ['column', 'row'].includes(val),
+        default: 'column',
+      },
+    },
+    computed: {
+      directionStyle() {
+        return {
+          flexDirection: this.direction,
+        };
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .ui-fill-view {
+    flex: 1;
+    position: relative;
+
+    .wrapper {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>