@fe6/water-pro/lib/upload-card/upload-card.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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _tslib = require("tslib");

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

var _shared = require("@fe6/shared");

var _lodash = require("lodash");

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

var _image = _interopRequireDefault(require("../image"));

var _modal = _interopRequireDefault(require("../modal"));

var _tooltip = _interopRequireDefault(require("../tooltip"));

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

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

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

var _propsUtil = require("../_util/props-util");

var _useSortable2 = require("../_util/hooks/use-sortable");

var _errorImage = require("../config-provider/error-image");

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 _default2 = (0, _vue.defineComponent)({
  name: 'AUploadCard',
  components: {
    LoadingOutlined: _iconsVue.LoadingOutlined,
    EyeOutlined: _iconsVue.EyeOutlined,
    DeleteOutlined: _iconsVue.DeleteOutlined
  },
  props: {
    value: _vueTypes.default.array.def([]),
    onFormChange: {
      type: Function,
      default: function _default() {}
    },
    mergeOriginDatas: {
      type: Function,
      default: undefined
    },
    action: _vueTypes.default.string,
    accept: _vueTypes.default.string.def(_useUpload.acceptListString),
    autoUpload: _vueTypes.default.bool.def(true),
    headers: _vueTypes.default.object,
    urlKey: _vueTypes.default.string.def('url'),
    resultKey: _vueTypes.default.string.def('data'),
    nameKey: _vueTypes.default.string.def('name'),
    imageWidth: _vueTypes.default.number.def(100),
    imageHeight: _vueTypes.default.number.def(100),
    limitSize: _vueTypes.default.number.def(2),
    placeholder: _vueTypes.default.string,
    errorImage: _vueTypes.default.string,
    disabled: _vueTypes.default.bool,
    maxUploadCount: _vueTypes.default.number,
    objectFit: _vueTypes.default.string.def('contain'),
    draggable: _vueTypes.default.looseBool,
    multiple: _vueTypes.default.looseBool
  },
  emits: ['changeUpload', 'change'],
  setup: function setup(props, params) {
    var _this = this;

    var previewPoseterVisible = (0, _vue.ref)(false);
    var previewPoseterImage = (0, _vue.ref)('');

    var handlePoseterPreview = function handlePoseterPreview(imgOneUrl) {
      return (0, _tslib.__awaiter)(_this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee() {
        return _regenerator.default.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                previewPoseterImage.value = imgOneUrl;
                previewPoseterVisible.value = true;

              case 2:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
    };

    var handlePoseterCancel = function handlePoseterCancel() {
      previewPoseterVisible.value = false;
    };

    var _useConfigInject = (0, _useConfigInject2.default)('upload-card', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider; // TODO [fix] 解决使用的过程中未用 configProvider 报错


    var errorImageDef = configProvider.errorImage;

    var _useMoreUpload = (0, _useUpload.useMoreUpload)(props, params),
        moreLoading = _useMoreUpload.moreLoading,
        beforeUpload = _useMoreUpload.beforeUpload,
        removeOneImage = _useMoreUpload.removeOneImage,
        handleMoreChange = _useMoreUpload.handleMoreChange,
        imageList = _useMoreUpload.imageList;

    (0, _vue.watchEffect)(function () {
      return (0, _tslib.__awaiter)(_this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee2() {
        return _regenerator.default.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                // 解决拖拽不好用数据变，展示不变
                if (!imageList.value.length && (0, _lodash.isArray)(props.value) && props.value.length > 0) {
                  // NOTE 去掉为空判断，素材中心，通字段再打开图片保留问题
                  imageList.value = props.value.slice();
                }

              case 1:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }));
    });

    var beforeUploadFn = function beforeUploadFn(file) {
      return beforeUpload(file, props.accept.split(','));
    };

    var columnListRef = (0, _vue.ref)(null);

    var initTable = function initTable() {
      if (props.draggable) {
        var columnListEl = (0, _vue.unref)(columnListRef);

        if (!columnListEl) {
          return;
        }

        var _useSortable = (0, _useSortable2.useSortable)(columnListEl, {
          handle: ".".concat(prefixClsNew.value, "-icon-drag"),
          onEnd: function onEnd(evt) {
            var oldIndex = evt.oldIndex,
                newIndex = evt.newIndex;

            if ((0, _shared.isUndefined)(oldIndex) && (0, _shared.isNull)(oldIndex) || (0, _shared.isUndefined)(newIndex) && (0, _shared.isNull)(newIndex) || oldIndex === newIndex) {
              return;
            } // Sort column


            // Sort column
            var oldIndexNumber = oldIndex;
            var newIndexNumber = newIndex;
            var newImageList = imageList.value.slice();

            if (oldIndexNumber > newIndexNumber) {
              newImageList.splice(newIndexNumber, 0, newImageList[oldIndexNumber]);
              newImageList.splice(oldIndexNumber + 1, 1);
            } else {
              newImageList.splice(newIndexNumber + 1, 0, newImageList[oldIndexNumber]);
              newImageList.splice(oldIndexNumber, 1);
            }

            params.emit('changeUpload', newImageList);
          }
        }),
            initSortable = _useSortable.initSortable;

        initSortable();
      }
    };

    (0, _vue.onMounted)(initTable);
    return {
      handlePoseterPreview: handlePoseterPreview,
      previewPoseterVisible: previewPoseterVisible,
      previewPoseterImage: previewPoseterImage,
      handlePoseterCancel: handlePoseterCancel,
      columnListRef: columnListRef,
      moreLoading: moreLoading,
      beforeUploadFn: beforeUploadFn,
      handleMoreChange: handleMoreChange,
      removeOneImage: removeOneImage,
      imageList: imageList,
      prefixClsNew: prefixClsNew,
      errorBackImage: props.errorImage || errorImageDef || _errorImage.errorUploadImage,
      configProvider: configProvider
    };
  },
  render: function render() {
    var _this2 = this;

    var _a, _b;

    var imageNode = [];
    var dragNode = null;

    if (this.draggable) {
      dragNode = (0, _vue.createVNode)(_tooltip.default, {
        "title": ((_a = this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.UploadCard.dragPlaceholder) || '拖拽改变位置'
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)(_iconsVue.DragOutlined, {
            "class": "".concat(_this2.prefixClsNew, "-icon ").concat(_this2.prefixClsNew, "-icon-drag")
          }, null)];
        }
      });
    }

    if (this.imageList.length) {
      imageNode = this.imageList.map(function (iItem, iIdx) {
        var _a, _b;

        return (0, _vue.createVNode)("div", {
          "class": "".concat(_this2.prefixClsNew, "-img-box"),
          "style": {
            width: "".concat(_this2.imageWidth, "px"),
            height: "".concat(_this2.imageHeight, "px")
          }
        }, [(0, _vue.createVNode)(_image.default, {
          "width": _this2.imageWidth - 18,
          "height": _this2.imageHeight - 18,
          "src": iItem,
          "class": ["".concat(_this2.prefixClsNew, "-img"), "".concat(_this2.prefixClsNew, "-img-").concat(_this2.objectFit), _defineProperty({}, "".concat(_this2.prefixClsNew, "-img-disabled"), _this2.disabled)],
          "bordered": false,
          "preview": false,
          "fallback": _this2.errorBackImage
        }, null), (0, _vue.createVNode)("div", {
          "class": "".concat(_this2.prefixClsNew, "-handle")
        }, [(0, _vue.createVNode)(_tooltip.default, {
          "title": ((_a = _this2.configProvider.locale) === null || _a === void 0 ? void 0 : _a.UploadCard.seePlaceholder) || '查看'
        }, {
          default: function _default() {
            return [(0, _vue.createVNode)(_iconsVue.EyeOutlined, {
              "class": "".concat(_this2.prefixClsNew, "-icon"),
              "onClick": function onClick() {
                return _this2.handlePoseterPreview(iItem);
              }
            }, null)];
          }
        }), dragNode, (0, _vue.createVNode)(_tooltip.default, {
          "title": ((_b = _this2.configProvider.locale) === null || _b === void 0 ? void 0 : _b.UploadCard.removePlaceholder) || '删除'
        }, {
          default: function _default() {
            return [(0, _vue.createVNode)(_iconsVue.DeleteOutlined, {
              "onClick": function onClick() {
                return _this2.removeOneImage(iIdx);
              }
            }, null)];
          }
        })])]);
      });
    }

    var canUpload = (0, _shared.isUndefined)(this.maxUploadCount) || (0, _shared.isNumber)(this.maxUploadCount) && this.maxUploadCount > 1 && imageNode.length < this.maxUploadCount;
    var placeholderNode = null;

    if (this.placeholder) {
      placeholderNode = (0, _vue.createVNode)("p", {
        "class": "".concat(this.prefixClsNew, "-tip")
      }, [this.placeholder]);
    }

    var loadingNode = [(0, _vue.withDirectives)((0, _vue.createVNode)("div", null, [(0, _vue.createVNode)("p", {
      "class": "".concat(this.prefixClsNew, "-tip")
    }, [((_b = this.configProvider.locale) === null || _b === void 0 ? void 0 : _b.UploadCard.placeholder) || '上传']), placeholderNode]), [[_vue.vShow, !this.moreLoading]])];
    var placeholderSlotNode = (0, _propsUtil.getSlot)(this, 'placeholder');

    if (placeholderSlotNode.length) {
      loadingNode = placeholderSlotNode;
    }

    return (0, _vue.createVNode)("div", {
      "ref": "columnListRef",
      "style": "min-height: ".concat(this.imageHeight, "px")
    }, [imageNode, (0, _vue.createVNode)(_upload.Upload, {
      "accept": this.accept,
      "class": this.prefixClsNew,
      "show-upload-list": false,
      "action": this.autoUpload ? this.action : '',
      "headers": this.headers,
      "disabled": this.disabled,
      "before-upload": this.beforeUploadFn,
      "onChange": this.handleMoreChange,
      "multiple": this.multiple
    }, {
      default: function _default() {
        return [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {
          "class": "".concat(_this2.prefixClsNew, "-btn")
        }, [(0, _vue.withDirectives)((0, _vue.createVNode)(_iconsVue.LoadingOutlined, null, null), [[_vue.vShow, _this2.moreLoading]]), loadingNode]), [[_vue.vShow, canUpload]])];
      }
    }), (0, _vue.createVNode)(_modal.default, {
      "visible": this.previewPoseterVisible,
      "footer": null,
      "onCancel": this.handlePoseterCancel
    }, {
      default: function _default() {
        return [(0, _vue.createVNode)("img", {
          "style": "width: 100%",
          "src": _this2.previewPoseterImage
        }, null)];
      }
    })]);
  }
});

exports.default = _default2;