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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _iconsVue = require("@ant-design/icons-vue/lib/icons");

var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));

var _vueTypes = _interopRequireDefault(require("../../_util/vue-types"));

var _useUpload2 = require("../../_util/hooks/use-upload");

var _type = require("../../_util/type");

var _button = _interopRequireDefault(require("../../button/button"));

var _upload = require("../../upload");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

var ButtonSizes = (0, _type.tuple)('large', 'default', 'small');

var _default2 = (0, _vue.defineComponent)({
  name: 'AUploadName',
  components: {
    PictureOutlined: _iconsVue.PictureOutlined,
    DeleteOutlined: _iconsVue.DeleteOutlined,
    FileOutlined: _iconsVue.FileOutlined
  },
  props: {
    value: [Object, String],
    onFormChange: {
      type: Function,
      default: function _default() {}
    },
    mergeOriginDatas: {
      type: Function,
      default: undefined
    },
    headers: _vueTypes.default.object,
    placeholder: _vueTypes.default.string,
    accept: _vueTypes.default.string.def(_useUpload2.acceptListString),
    action: _vueTypes.default.string,
    autoUpload: _vueTypes.default.bool.def(true),
    resultKey: _vueTypes.default.string.def('data'),
    nameKey: _vueTypes.default.string.def('name'),
    urlKey: _vueTypes.default.string.def('url'),
    limitSize: _vueTypes.default.number.def(2),
    disabled: _vueTypes.default.bool,
    handleAfterAjax: _vueTypes.default.func,
    size: _vueTypes.default.oneOf(ButtonSizes).def('default')
  },
  emits: ['changeUpload', 'change'],
  setup: function setup(props, params) {
    var _useConfigInject = (0, _useConfigInject2.default)('upload-name', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider;

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

    var isImage = (0, _vue.ref)(true);
    (0, _vue.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 = _useUpload2.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: _useUpload2.acceptListString,
      prefixClsNew: prefixClsNew,
      sizeMap: {
        large: 'lg',
        small: 'sm'
      },
      configProvider: configProvider
    };
  },
  render: function render() {
    var _this = this,
        _ref;

    var _a;

    return (0, _vue.createVNode)("div", {
      "class": "".concat(this.prefixClsNew, "-wrapper")
    }, [(0, _vue.createVNode)("div", {
      "class": this.prefixClsNew
    }, [(0, _vue.withDirectives)((0, _vue.createVNode)(_upload.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 [(0, _vue.createVNode)(_button.default, {
          "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) || '添加图片'];
          }
        })];
      }
    }), [[_vue.vShow, !this.imageName]]), (0, _vue.withDirectives)((0, _vue.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)]
    }, [(0, _vue.createVNode)("span", null, [(0, _vue.withDirectives)((0, _vue.createVNode)(_iconsVue.PictureOutlined, {
      "class": "".concat(this.prefixClsNew, "-img")
    }, null), [[_vue.vShow, this.isImage]]), (0, _vue.withDirectives)((0, _vue.createVNode)(_iconsVue.FileOutlined, {
      "class": "".concat(this.prefixClsNew, "-img")
    }, null), [[_vue.vShow, !this.isImage]]), this.imageName]), (0, _vue.createVNode)(_iconsVue.DeleteOutlined, {
      "class": ["".concat(this.prefixClsNew, "-del"), _defineProperty({}, "".concat(this.prefixClsNew, "-del-disabled"), this.disabled)],
      "onClick": this.removeImage
    }, null)]), [[_vue.vShow, this.imageName]])])]);
  }
});

exports.default = _default2;