@v2coding/ui 0.1.5 → 0.1.9

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

@@ -1,241 +0,0 @@
-<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

@@ -1,125 +0,0 @@
-<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/fill-view/fill-view.vue

@@ -1,43 +0,0 @@
-<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>

package/src/components/form/form.dialog.vue

@@ -1,174 +0,0 @@
-<template>
-  <ui-dialog v-bind="$attrs" v-on="dialogListeners" :buttons="false" :visible="visible" :append-to-body="appendToBody" @open="onOpen" @opened="onOpened" @closed="onClosed" @update:visible="updateVisible">
-    <ui-form ref="form" :fields="fields" :label-width="labelWidth" :label-position="labelPosition" :disabled="disabled" v-loading="loading" @submit="onSubmit" @ready="onReady">
-      <slot></slot>
-      <div class="action-button" v-if="disabled !== true">
-        <el-button size="medium" icon="el-icon-error" @click="onCancel">{{cancelText}}</el-button>
-        <el-button size="medium" type="primary" icon="el-icon-success" native-type="submit" :disabled="!ready" :loading="submitting">{{confirmText}}</el-button>
-      </div>
-    </ui-form>
-  </ui-dialog>
-</template>
-
-<script>
-export default {
-  name: 'ui-form-dialog',
-  inheritAttrs: false,
-  props: {
-    value: {
-      type: Object,
-      default: () => ({}),
-    },
-    visible: Boolean,
-    method: {
-      type: String,
-      validator: (val) => ['get', 'post'].includes(val),
-      default: 'post',
-    },
-    url: String,
-    cancelText: {
-      type: String,
-      default: '取消',
-    },
-    confirmText: {
-      type: String,
-      default: '确定',
-    },
-    cancel: {
-      type: Function,
-      default: () => void 0,
-    },
-    beforeSubmit: {
-      type: Function,
-      default: () => void 0,
-    },
-    afterSubmit: {
-      type: Function,
-      default: () => void 0,
-    },
-    fields: Array,
-    loading: Boolean,
-    appendToBody: {
-      type: Boolean,
-      default: true,
-    },
-    labelWidth: String,
-    labelPosition: String,
-    disabled: {
-      type: Boolean,
-      default: undefined,
-    },
-  },
-  data () {
-    return {
-      ready: false,
-      submitting: false,
-    };
-  },
-  computed: {
-    dialogListeners () {
-      // submit/ready 属于当前组件自定义事件, 非 dialog 的事件
-      // eslint-disable-next-line
-      const { submit, ready, ...listeners } = this.$listeners;
-      return listeners;
-    },
-  },
-  watch: {
-    visible: 'onVisibleChange',
-  },
-  methods: {
-    onReady () {
-      this.ready = true;
-      this.$emit('ready');
-    },
-    onCancel () {
-      const allow = this.cancel();
-      if (allow === false) {
-        return;
-      }
-      this.updateVisible(false);
-    },
-    updateVisible (visible) {
-      this.$emit('update:visible', visible);
-    },
-    async onVisibleChange(visible) {
-      if (!visible) {
-        await this.$nextTick();
-        this.clearValidate();
-      }
-    },
-    submit () {
-      this.$refs.form.onSubmit();
-    },
-    resetValues (values) {
-      if (!this.$refs.form) {
-        return;
-      }
-      this.$refs.form.resetValues(values);
-    },
-    clearValidate () {
-      if (!this.$refs.form) {
-        return;
-      }
-      this.$refs.form.clearValidate()
-    },
-    getValues () {
-      if (!this.$refs.form) {
-        return;
-      }
-      return this.$refs.form.getValues();
-    },
-    setValues (values) {
-      if (!this.$refs.form) {
-        return;
-      }
-      this.$refs.form.setValues(values);
-    },
-    onSubmit (formData) {
-      if (!this.ready) {
-        return;
-      }
-      this.$emit('submit', { ...formData });
-      const allow = this.beforeSubmit(formData);
-      if (typeof allow === 'boolean' && allow === false) {
-        return;
-      }
-      if (typeof allow === 'object') {
-        formData = allow;
-      }
-      if (!this.url) {
-        return;
-      }
-      let def;
-      this.submitting = true;
-      if (this.method === 'get') {
-        def = this.getWithMessage(this.url, { params: formData });
-      } else {
-        def = this.postWithMessage(this.url, formData);
-      }
-      def.then((...args) => {
-        this.submitting = false;
-        this.$emit('after-submit', ...args);
-      }).catch((...args) => {
-        this.submitting = false;
-        return Promise.reject(...args);
-      });
-    },
-    onOpen () {
-    },
-    onOpened () {
-    },
-    onClosed () {
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.action-button {
-  text-align: right;
-  margin: 0 -20px -20px;
-  padding: 10px 20px;
-  border-top: 1px solid #e8e8e8;
-}
-</style>