@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/upload/Index.vue

@@ -1,340 +0,0 @@
-<script lang="jsx" type="text/jsx">
-import UploadList from './UploadList'
-import Upload from './Upload'
-import BaseProgress from '../progress/Progress'
-import Migrating from '../mixin/migrating'
-
-function noop() {}
-
-export default {
-  name: 'BaseUpload',
-
-  mixins: [Migrating],
-
-  components: {
-    BaseProgress,
-    UploadList,
-    Upload
-  },
-
-  provide() {
-    return {
-      uploader: this
-    }
-  },
-
-  inject: {
-    baseForm: {
-      default: ''
-    }
-  },
-
-  props: {
-    action: {
-      type: String,
-      required: true
-    },
-    headers: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    data: Object,
-    multiple: Boolean,
-    name: {
-      type: String,
-      default: 'file'
-    },
-    drag: Boolean,
-    dragger: Boolean,
-    withCredentials: Boolean,
-    showFileList: {
-      type: Boolean,
-      default: true
-    },
-    accept: String,
-    type: {
-      type: String,
-      default: 'select'
-    },
-    beforeUpload: Function,
-    beforeRemove: Function,
-    onRemove: {
-      type: Function,
-      default: noop
-    },
-    onChange: {
-      type: Function,
-      default: noop
-    },
-    onPreview: {
-      type: Function
-    },
-    onSuccess: {
-      type: Function,
-      default: noop
-    },
-    onProgress: {
-      type: Function,
-      default: noop
-    },
-    onError: {
-      type: Function,
-      default: noop
-    },
-    fileList: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    autoUpload: {
-      type: Boolean,
-      default: true
-    },
-    listType: {
-      type: String,
-      default: 'text' // text,picture,picture-card
-    },
-    httpRequest: Function,
-    disabled: Boolean,
-    limit: Number,
-    onExceed: {
-      type: Function,
-      default: noop
-    },
-    customClass: String
-  },
-
-  data() {
-    return {
-      uploadFiles: [],
-      dragOver: false,
-      draging: false,
-      tempIndex: 1
-    }
-  },
-
-  computed: {
-    uploadDisabled() {
-      return this.disabled || (this.elForm || {}).disabled
-    }
-  },
-
-  watch: {
-    listType (type) {
-      if (type === 'picture-card' || type === 'picture') {
-        this.uploadFiles = this.uploadFiles.map(file => {
-          if (!file.url && file.raw) {
-            try {
-              file.url = URL.createObjectURL(file.raw)
-            } catch (err) {
-              console.error('[Element Error][Upload]', err)
-            }
-          }
-          return file
-        })
-      }
-    },
-    fileList: {
-      immediate: true,
-      handler (fileList) {
-        this.uploadFiles = fileList.map(item => {
-          item.uid = item.uid || (Date.now() + this.tempIndex++)
-          item.status = item.status || 'success'
-          return item
-        })
-      }
-    }
-  },
-
-  methods: {
-    handleStart (rawFile) {
-      rawFile.uid = Date.now() + this.tempIndex++
-      let file = {
-        status: 'ready',
-        name: rawFile.name,
-        size: rawFile.size,
-        percentage: 0,
-        uid: rawFile.uid,
-        raw: rawFile
-      }
-
-      if (this.listType === 'picture-card' || this.listType === 'picture') {
-        try {
-          file.url = URL.createObjectURL(rawFile)
-        } catch (err) {
-          console.error('[Element Error][Upload]', err)
-          return
-        }
-      }
-
-      this.uploadFiles.push(file)
-      this.onChange(file, this.uploadFiles)
-    },
-    handleProgress (ev, rawFile) {
-      const file = this.getFile(rawFile)
-      this.onProgress(ev, file, this.uploadFiles)
-      file.status = 'uploading'
-      file.percentage = ev.percent || 0
-    },
-    handleSuccess (res, rawFile) {
-      const file = this.getFile(rawFile)
-
-      if (file) {
-        file.status = 'success'
-        file.response = res
-
-        this.onSuccess(res, file, this.uploadFiles)
-        this.onChange(file, this.uploadFiles)
-      }
-    },
-    handleError (err, rawFile) {
-      const file = this.getFile(rawFile)
-      const fileList = this.uploadFiles
-
-      file.status = 'fail'
-
-      fileList.splice(fileList.indexOf(file), 1)
-
-      this.onError(err, file, this.uploadFiles)
-      this.onChange(file, this.uploadFiles)
-    },
-    handleRemove (file, raw) {
-      if (raw) {
-        file = this.getFile(raw)
-      }
-      let doRemove = () => {
-        this.abort(file)
-        let fileList = this.uploadFiles
-        fileList.splice(fileList.indexOf(file), 1)
-        this.onRemove(file, fileList)
-      }
-
-      if (!this.beforeRemove) {
-        doRemove()
-      } else if (typeof this.beforeRemove === 'function') {
-        const before = this.beforeRemove(file, this.uploadFiles)
-        if (before && before.then) {
-          before.then(() => {
-            doRemove()
-          }, noop)
-        } else if (before !== false) {
-          doRemove()
-        }
-      }
-    },
-    getFile (rawFile) {
-      let fileList = this.uploadFiles
-      let target
-      fileList.every(item => {
-        target = rawFile.uid === item.uid ? item : null
-        return !target
-      })
-      return target
-    },
-    abort (file) {
-      this.$refs['upload-inner'].abort(file)
-    },
-    clearFiles () {
-      this.uploadFiles = []
-    },
-    submit () {
-      this.uploadFiles
-        .filter(file => file.status === 'ready')
-        .forEach(file => {
-          this.$refs['upload-inner'].upload(file.raw)
-        })
-    },
-    getMigratingConfig () {
-      return {
-        props: {
-          'default-file-list': 'default-file-list is renamed to file-list.',
-          'show-upload-list': 'show-upload-list is renamed to show-file-list.',
-          'thumbnail-mode': 'thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan'
-        }
-      }
-    }
-  },
-
-  beforeDestroy () {
-    this.uploadFiles.forEach(file => {
-      if (file.url && file.url.indexOf('blob:') === 0) {
-        URL.revokeObjectURL(file.url)
-      }
-    })
-  },
-
-  render (h) {
-    let uploadList
-
-    if (this.showFileList) {
-      uploadList = (
-        <upload-list
-          disabled={this.uploadDisabled}
-          listType={this.listType}
-          files={this.uploadFiles}
-          on-remove={this.handleRemove}
-          handlePreview={this.onPreview}>
-          {
-            (props) => {
-              if (this.$scopedSlots.file) {
-                return this.$scopedSlots.file({
-                  file: props.file
-                })
-              }
-            }
-          }
-        </upload-list>
-      )
-    }
-
-    const uploadData = {
-      props: {
-        type: this.type,
-        drag: this.drag,
-        action: this.action,
-        multiple: this.multiple,
-        'before-upload': this.beforeUpload,
-        'with-credentials': this.withCredentials,
-        headers: this.headers,
-        name: this.name,
-        data: this.data,
-        accept: this.accept,
-        fileList: this.uploadFiles,
-        autoUpload: this.autoUpload,
-        listType: this.listType,
-        disabled: this.uploadDisabled,
-        limit: this.limit,
-        customClass: this.customClass,
-        'on-exceed': this.onExceed,
-        'on-start': this.handleStart,
-        'on-progress': this.handleProgress,
-        'on-success': this.handleSuccess,
-        'on-error': this.handleError,
-        'on-preview': this.onPreview,
-        'on-remove': this.handleRemove,
-        'http-request': this.httpRequest
-      },
-      ref: 'upload-inner'
-    }
-
-    const trigger = this.$slots.trigger || this.$slots.default
-    const uploadComponent = <upload {...uploadData}>{trigger}</upload>
-
-    return (
-      <div>
-        { this.listType === 'picture-card' ? uploadList : ''}
-        {
-          this.$slots.trigger
-            ? [uploadComponent, this.$slots.default]
-            : uploadComponent
-        }
-        {this.$slots.tip}
-        { this.listType !== 'picture-card' ? uploadList : ''}
-      </div>
-    )
-  }
-}
-</script>

package/src/components/base/ui/upload/Upload.vue

@@ -1,216 +0,0 @@
-<script lang="jsx">
-import ajax from './ajax';
-import UploadDragger from './UploadDragger';
-
-export default {
-  inject: ['uploader'],
-  components: {
-    UploadDragger
-  },
-  props: {
-    type: String,
-    action: {
-      type: String,
-      required: true
-    },
-    name: {
-      type: String,
-      default: 'file'
-    },
-    data: Object,
-    headers: Object,
-    withCredentials: Boolean,
-    multiple: Boolean,
-    accept: String,
-    onStart: Function,
-    onProgress: Function,
-    onSuccess: Function,
-    onError: Function,
-    beforeUpload: Function,
-    drag: Boolean,
-    onPreview: {
-      type: Function,
-      default: function() {}
-    },
-    onRemove: {
-      type: Function,
-      default: function() {}
-    },
-    fileList: Array,
-    autoUpload: Boolean,
-    listType: String,
-    httpRequest: {
-      type: Function,
-      default: ajax
-    },
-    disabled: Boolean,
-    limit: Number,
-    onExceed: Function,
-    customClass: String
-  },
-
-  data() {
-    return {
-      mouseover: false,
-      reqs: {}
-    }
-  },
-
-  methods: {
-    isImage(str) {
-      return str.indexOf('image') !== -1;
-    },
-    handleChange(ev) {
-      const files = ev.target.files;
-
-      if (!files) return;
-      this.uploadFiles(files);
-    },
-    uploadFiles(files) {
-      if (this.limit && this.fileList.length + files.length > this.limit) {
-        this.onExceed && this.onExceed(files, this.fileList);
-        return;
-      }
-
-      let postFiles = Array.prototype.slice.call(files);
-      if (!this.multiple) { postFiles = postFiles.slice(0, 1); }
-
-      if (postFiles.length === 0) { return; }
-
-      postFiles.forEach(rawFile => {
-        this.onStart(rawFile);
-        if (this.autoUpload) this.upload(rawFile);
-      });
-    },
-    upload(rawFile) {
-      this.$refs.input.value = null;
-
-      if (!this.beforeUpload) {
-        return this.post(rawFile);
-      }
-
-      const before = this.beforeUpload(rawFile);
-      if (before && before.then) {
-        before.then(processedFile => {
-          const fileType = Object.prototype.toString.call(processedFile);
-
-          if (fileType === '[object File]' || fileType === '[object Blob]') {
-            if (fileType === '[object Blob]') {
-              processedFile = new File([processedFile], rawFile.name, {
-                type: rawFile.type
-              });
-            }
-            for (const p in rawFile) {
-              if (rawFile.hasOwnProperty(p)) {
-                processedFile[p] = rawFile[p];
-              }
-            }
-            this.post(processedFile);
-          } else {
-            this.post(rawFile);
-          }
-        }, () => {
-          this.onRemove(null, rawFile);
-        });
-      } else if (before !== false) {
-        this.post(rawFile);
-      } else {
-        this.onRemove(null, rawFile);
-      }
-    },
-    abort(file) {
-      const { reqs } = this;
-      if (file) {
-        let uid = file;
-        if (file.uid) uid = file.uid;
-        if (reqs[uid]) {
-          reqs[uid].abort();
-        }
-      } else {
-        Object.keys(reqs).forEach((uid) => {
-          if (reqs[uid]) reqs[uid].abort();
-          delete reqs[uid];
-        });
-      }
-    },
-    post(rawFile) {
-      const { uid } = rawFile;
-      const options = {
-        headers: this.headers,
-        withCredentials: this.withCredentials,
-        file: rawFile,
-        data: this.data,
-        filename: this.name,
-        action: this.action,
-        onProgress: e => {
-          this.onProgress(e, rawFile);
-        },
-        onSuccess: res => {
-          this.onSuccess(res, rawFile);
-          delete this.reqs[uid];
-        },
-        onError: err => {
-          this.onError(err, rawFile);
-          delete this.reqs[uid];
-        }
-      };
-      const req = this.httpRequest(options);
-      this.reqs[uid] = req;
-      if (req && req.then) {
-        req.then(options.onSuccess, options.onError);
-      }
-    },
-    handleClick() {
-      if (!this.disabled) {
-        this.$refs.input.value = null;
-        this.$refs.input.click();
-      }
-    },
-    handleKeydown(e) {
-      if (e.target !== e.currentTarget) return;
-      if (e.keyCode === 13 || e.keyCode === 32) {
-        this.handleClick();
-      }
-    }
-  },
-
-  render(h) {
-    let {
-      handleClick,
-      drag,
-      name,
-      handleChange,
-      multiple,
-      customClass,
-      accept,
-      listType,
-      uploadFiles,
-      disabled,
-      handleKeydown
-    } = this;
-    const data = {
-      class: {
-        'base-upload': true
-      },
-      on: {
-        click: handleClick,
-        keydown: handleKeydown
-      }
-    };
-    data.class[`base-upload--${listType}`] = true;
-    if (customClass) {
-      data.class[`${customClass}`] = true
-    }
-    return (
-      <div {...data} tabindex="0" >
-        {
-          drag
-            ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
-            : this.$slots.default
-        }
-        <input class="base-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>
-      </div>
-    );
-  }
-};
-</script>

package/src/components/base/ui/upload/UploadDragger.vue

@@ -1,70 +0,0 @@
-<template>
-  <div
-    class="base-upload-dragger"
-    :class="{
-      'is-dragover': dragover
-    }"
-    @drop.prevent="onDrop"
-    @dragover.prevent="onDragover"
-    @dragleave.prevent="dragover = false"
-  >
-    <slot></slot>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'BaseUploadDragger',
-    props: {
-      disabled: Boolean
-    },
-    inject: {
-      uploader: {
-        default: ''
-      }
-    },
-    data() {
-      return {
-        dragover: false
-      };
-    },
-    methods: {
-      onDragover() {
-        if (!this.disabled) {
-          this.dragover = true;
-        }
-      },
-      onDrop(e) {
-        if (this.disabled || !this.uploader) return;
-        const accept = this.uploader.accept;
-        this.dragover = false;
-        if (!accept) {
-          this.$emit('file', e.dataTransfer.files);
-          return;
-        }
-        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
-          const { type, name } = file;
-          const extension = name.indexOf('.') > -1
-            ? `.${ name.split('.').pop() }`
-            : '';
-          const baseType = type.replace(/\/.*$/, '');
-          return accept.split(',')
-            .map(type => type.trim())
-            .filter(type => type)
-            .some(acceptedType => {
-              if (/\..+$/.test(acceptedType)) {
-                return extension === acceptedType;
-              }
-              if (/\/\*$/.test(acceptedType)) {
-                return baseType === acceptedType.replace(/\/\*$/, '');
-              }
-              if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
-                return type === acceptedType;
-              }
-              return false;
-            });
-        }));
-      }
-    }
-  };
-</script>
-

package/src/components/base/ui/upload/UploadList.vue

@@ -1,100 +0,0 @@
-<template>
-  <transition-group
-    tag="ul"
-    :class="[
-      'base-upload-list',
-      'base-upload-list--' + listType,
-      { 'is-disabled': disabled }
-    ]"
-    name="base-list"
-  >
-    <li
-      v-for="file in files"
-      :class="['base-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
-      :key="file.uid"
-      tabindex="0"
-      @keydown.delete="!disabled && $emit('remove', file)"
-      @focus="focusing = true"
-      @blur="focusing = false"
-      @click="focusing = false"
-    >
-      <slot :file="file">
-        <img
-          class="base-upload-list__item-thumbnail"
-          v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
-          :src="file.url" alt=""
-        >
-        <a class="base-upload-list__item-name" @click="handleClick(file)">
-          <i class="base-icon-document"></i>{{file.name}}
-        </a>
-        <label class="base-upload-list__item-status-label">
-          <i :class="{
-            'base-icon-upload-success': true,
-            'base-icon-circle-check': listType === 'text',
-            'base-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
-          }"></i>
-        </label>
-        <i class="base-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
-        <i class="base-icon-close-tip" v-if="!disabled">{{ t('base.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
-        <base-progress
-          v-if="file.status === 'uploading'"
-          :type="listType === 'picture-card' ? 'circle' : 'line'"
-          :stroke-width="listType === 'picture-card' ? 6 : 2"
-          :percentage="parsePercentage(file.percentage)">
-        </base-progress>
-        <span class="base-upload-list__item-actions" v-if="listType === 'picture-card'">
-          <span
-            class="base-upload-list__item-preview"
-            v-if="handlePreview && listType === 'picture-card'"
-            @click="handlePreview(file)"
-          >
-            <i class="base-icon-zoom-in"></i>
-          </span>
-          <span
-            v-if="!disabled"
-            class="base-upload-list__item-delete"
-            @click="$emit('remove', file)"
-          >
-            <i class="base-icon-delete"></i>
-          </span>
-        </span>
-      </slot>
-    </li>
-  </transition-group>
-</template>
-<script>
-import Locale from '../locale'
-import BaseProgress from '../progress/Progress'
-export default {
-  name: 'BaseUploadList',
-  mixins: [Locale],
-  data() {
-    return {
-      focusing: false
-    }
-  },
-  components: { BaseProgress },
-  props: {
-    files: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    handlePreview: Function,
-    listType: String
-  },
-  methods: {
-    parsePercentage(val) {
-      return parseInt(val, 10)
-    },
-    handleClick(file) {
-      this.handlePreview && this.handlePreview(file)
-    }
-  }
-}
-</script>