@fe6/water-pro/es/upload-name/src/upload-name.js

An enterprise-class UI design language and Vue-based implementation

import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/** @format */
import { defineComponent, ref, watchEffect } from 'vue';
import { PictureOutlined, DeleteOutlined, FileOutlined } from '@ant-design/icons-vue';
import useConfigInject from '../../_util/hooks/useConfigInject';
import PropTypes from '../../_util/vue-types';
import { acceptListString, useUpload, acceptList } from '../../_util/hooks/use-upload';
import { tuple } from '../../_util/type';
import AButton from '../../button/button';
import { Upload } from '../../upload';
var ButtonSizes = tuple('large', 'default', 'small');
export default defineComponent({
  name: 'AUploadName',
  components: {
    PictureOutlined: PictureOutlined,
    DeleteOutlined: DeleteOutlined,
    FileOutlined: FileOutlined
  },
  props: {
    value: [Object, String],
    onFormChange: {
      type: Function,
      default: function _default() {}
    },
    mergeOriginDatas: {
      type: Function,
      default: undefined
    },
    headers: PropTypes.object,
    placeholder: PropTypes.string,
    accept: PropTypes.string.def(acceptListString),
    action: PropTypes.string,
    autoUpload: PropTypes.bool.def(true),
    resultKey: PropTypes.string.def('data'),
    nameKey: PropTypes.string.def('name'),
    urlKey: PropTypes.string.def('url'),
    limitSize: PropTypes.number.def(2),
    disabled: PropTypes.bool,
    handleAfterAjax: PropTypes.func,
    size: PropTypes.oneOf(ButtonSizes).def('default')
  },
  emits: ['changeUpload', 'change'],
  setup: function setup(props, params) {
    var _useConfigInject = useConfigInject('upload-name', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider;

    var _useUpload = useUpload(props, params, configProvider),
        loading = _useUpload.loading,
        beforeUpload = _useUpload.beforeUpload,
        handleChange = _useUpload.handleChange,
        removeImage = _useUpload.removeImage,
        imageName = _useUpload.imageName;

    var isImage = ref(true);
    watchEffect(function () {
      if (props.autoUpload) {
        // NOTE 去掉为空判断，素材中心，通字段再打开图片保留问题
        imageName.value = props.value ? props.value[props.nameKey] : '';
      }
    });

    var beforeUploadFn = function beforeUploadFn(file) {
      var beforeResult = beforeUpload(file, props.accept.split(','));
      isImage.value = acceptList.includes(String(file.type));

      if (!props.autoUpload) {
        imageName.value = file.name || '';
        params.emit('changeUpload', file);
        return false;
      }

      return beforeResult;
    };

    return {
      loading: loading,
      beforeUploadFn: beforeUploadFn,
      handleChange: handleChange,
      removeImage: removeImage,
      isImage: isImage,
      imageName: imageName,
      acceptListString: acceptListString,
      prefixClsNew: prefixClsNew,
      sizeMap: {
        large: 'lg',
        small: 'sm'
      },
      configProvider: configProvider
    };
  },
  render: function render() {
    var _this = this,
        _ref;

    var _a;

    return _createVNode("div", {
      "class": "".concat(this.prefixClsNew, "-wrapper")
    }, [_createVNode("div", {
      "class": this.prefixClsNew
    }, [_withDirectives(_createVNode(Upload, {
      "accept": this.accept,
      "class": "".concat(this.prefixClsNew, "-uploader"),
      "show-upload-list": false,
      "action": this.autoUpload ? this.action : '',
      "headers": this.headers,
      "disabled": this.disabled,
      "before-upload": this.beforeUploadFn,
      "onChange": this.handleChange
    }, {
      default: function _default() {
        return [_createVNode(AButton, {
          "class": "".concat(_this.prefixClsNew, "-btn"),
          "type": "link",
          "disabled": _this.disabled,
          "size": _this.size,
          "loading": _this.loading,
          "style": {
            marginLeft: _this.loading ? '14px' : 0
          }
        }, {
          default: function _default() {
            return [_this.placeholder || ((_a = _this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.UploadName.placeholder) || '添加图片'];
          }
        })];
      }
    }), [[_vShow, !this.imageName]]), _withDirectives(_createVNode("div", {
      "class": ["".concat(this.prefixClsNew, "-inner"), (_ref = {}, _defineProperty(_ref, "".concat(this.prefixClsNew, "-inner-disabled"), this.disabled), _defineProperty(_ref, "".concat(this.prefixClsNew, "-inner-").concat(this.sizeMap[this.size]), this.size !== 'default'), _ref)]
    }, [_createVNode("span", null, [_withDirectives(_createVNode(PictureOutlined, {
      "class": "".concat(this.prefixClsNew, "-img")
    }, null), [[_vShow, this.isImage]]), _withDirectives(_createVNode(FileOutlined, {
      "class": "".concat(this.prefixClsNew, "-img")
    }, null), [[_vShow, !this.isImage]]), this.imageName]), _createVNode(DeleteOutlined, {
      "class": ["".concat(this.prefixClsNew, "-del"), _defineProperty({}, "".concat(this.prefixClsNew, "-del-disabled"), this.disabled)],
      "onClick": this.removeImage
    }, null)]), [[_vShow, this.imageName]])])]);
  }
});