@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
243 lines (201 loc) • 8.59 kB
JavaScript
"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 _upload = require("../../upload");
var _image = _interopRequireDefault(require("../../image"));
var _modal = _interopRequireDefault(require("../../modal"));
var _tooltip = _interopRequireDefault(require("../../tooltip"));
var _useUpload2 = require("../../_util/hooks/use-upload");
var _vueTypes = _interopRequireDefault(require("../../_util/vue-types"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var _configProvider = require("../../config-provider");
var _propsUtil = require("../../_util/props-util");
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: 'AUploadImage',
components: {
LoadingOutlined: _iconsVue.LoadingOutlined
},
props: {
value: _vueTypes.default.string,
onFormChange: {
type: Function,
default: function _default() {}
},
mergeOriginDatas: {
type: Function,
default: undefined
},
action: _vueTypes.default.string,
accept: _vueTypes.default.string.def(_useUpload2.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,
allowUpdate: _vueTypes.default.bool.def(false)
},
emits: ['changeUpload', 'change'],
setup: function setup(props, params) {
var _this = this;
var _useConfigInject = (0, _useConfigInject2.default)('upload-image', props),
prefixClsNew = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider; // TODO [fix] 解决使用的过程中未用 configProvider 报错
var _ref = (0, _vue.inject)('configProvider', _configProvider.defaultConfigProvider) || _configProvider.defaultConfigProvider,
errorImageDef = _ref.errorImage;
var _useUpload = (0, _useUpload2.useUpload)(props, params, configProvider),
loading = _useUpload.loading,
beforeUpload = _useUpload.beforeUpload,
handleChange = _useUpload.handleChange,
imageUrl = _useUpload.imageUrl;
(0, _vue.watchEffect)(function () {
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:
// NOTE 去掉为空判断，素材中心，通字段再打开图片保留问题
imageUrl.value = props.value;
case 1:
case "end":
return _context.stop();
}
}
}, _callee);
}));
});
var beforeUploadFn = function beforeUploadFn(file) {
return beforeUpload(file, props.accept.split(','));
};
return {
loading: loading,
beforeUploadFn: beforeUploadFn,
handleChange: handleChange,
imageUrl: imageUrl,
prefixClsNew: prefixClsNew,
errorBackImage: props.errorImage || errorImageDef || _errorImage.errorUploadImage,
previewPoseterVisible: (0, _vue.ref)(false),
configProvider: configProvider
};
},
render: function render() {
var _this2 = this;
var _a, _b, _c;
var imageNode = null;
if (this.imageUrl) {
imageNode = (0, _vue.createVNode)(_image.default, {
"width": this.imageWidth,
"height": this.imageHeight,
"src": this.imageUrl,
"bordered": false,
"class": ["".concat(this.prefixClsNew, "-img"), _defineProperty({}, "".concat(this.prefixClsNew, "-img-disabled"), this.disabled)],
"preview": false,
"fallback": this.errorBackImage
}, null);
}
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")
}, [((_a = this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.UploadImage.placeholder) || '上传']), placeholderNode]), [[_vue.vShow, !this.loading]])];
var placeholderSlotNode = (0, _propsUtil.getSlot)(this, 'placeholder');
if (placeholderSlotNode.length) {
loadingNode = placeholderSlotNode;
}
var nodeHtml = null;
if (this.allowUpdate && this.imageUrl) {
var handlePoseterPreview = function handlePoseterPreview() {
return (0, _tslib.__awaiter)(_this2, 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:
this.previewPoseterVisible = true;
case 1:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
};
var handlePoseterCancel = function handlePoseterCancel() {
_this2.previewPoseterVisible = false;
};
var removeOneImage = function removeOneImage() {
_this2.imageUrl = '';
_this2.$emit('changeUpload', '');
};
nodeHtml = (0, _vue.createVNode)("div", {
"class": "".concat(this.prefixClsNew, "-handle-box")
}, [imageNode, (0, _vue.createVNode)("div", {
"class": "".concat(this.prefixClsNew, "-handle")
}, [(0, _vue.createVNode)(_tooltip.default, {
"title": (_b = this.configProvider.locale) === null || _b === void 0 ? void 0 : _b.UploadImage.seePlaceholder
}, {
default: function _default() {
return [(0, _vue.createVNode)(_iconsVue.EyeOutlined, {
"class": "".concat(_this2.prefixClsNew, "-handle-icon"),
"onClick": handlePoseterPreview
}, null)];
}
}), (0, _vue.createVNode)(_tooltip.default, {
"title": (_c = this.configProvider.locale) === null || _c === void 0 ? void 0 : _c.UploadImage.removePlaceholder
}, {
default: function _default() {
return [(0, _vue.createVNode)(_iconsVue.DeleteOutlined, {
"onClick": removeOneImage
}, null)];
}
})]), (0, _vue.createVNode)(_modal.default, {
"visible": this.previewPoseterVisible,
"footer": null,
"onCancel": handlePoseterCancel
}, {
default: function _default() {
return [(0, _vue.createVNode)("img", {
"style": "width: 100%",
"src": _this2.imageUrl
}, null)];
}
})]);
} else {
nodeHtml = (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.handleChange
}, {
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.loading]]), loadingNode]), [[_vue.vShow, !_this2.imageUrl]]), imageNode];
}
});
}
return nodeHtml;
}
});
exports.default = _default2;