@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
299 lines (265 loc) • 11.1 kB
JavaScript
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; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __awaiter } from "tslib";
import { defineComponent, ref, watchEffect, unref, onMounted } from 'vue';
import { LoadingOutlined, EyeOutlined, DeleteOutlined, DragOutlined } from '@ant-design/icons-vue';
import { isNumber, isNull, isUndefined } from '@fe6/shared';
import { isArray } from 'lodash';
import { Upload } from '../upload';
import Image from '../image';
import Modal from '../modal';
import ToolTip from '../tooltip';
import { acceptListString, useMoreUpload } from '../_util/hooks/use-upload';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
import { getSlot } from '../_util/props-util';
import { useSortable } from '../_util/hooks/use-sortable';
import { errorUploadImage } from '../config-provider/error-image';
export default defineComponent({
name: 'AUploadCard',
components: {
LoadingOutlined: LoadingOutlined,
EyeOutlined: EyeOutlined,
DeleteOutlined: DeleteOutlined
},
props: {
value: PropTypes.array.def([]),
onFormChange: {
type: Function,
default: function _default() {}
},
mergeOriginDatas: {
type: Function,
default: undefined
},
action: PropTypes.string,
accept: PropTypes.string.def(acceptListString),
autoUpload: PropTypes.bool.def(true),
headers: PropTypes.object,
urlKey: PropTypes.string.def('url'),
resultKey: PropTypes.string.def('data'),
nameKey: PropTypes.string.def('name'),
imageWidth: PropTypes.number.def(100),
imageHeight: PropTypes.number.def(100),
limitSize: PropTypes.number.def(2),
placeholder: PropTypes.string,
errorImage: PropTypes.string,
disabled: PropTypes.bool,
maxUploadCount: PropTypes.number,
objectFit: PropTypes.string.def('contain'),
draggable: PropTypes.looseBool,
multiple: PropTypes.looseBool
},
emits: ['changeUpload', 'change'],
setup: function setup(props, params) {
var _this = this;
var previewPoseterVisible = ref(false);
var previewPoseterImage = ref('');
var handlePoseterPreview = function handlePoseterPreview(imgOneUrl) {
return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
return _regeneratorRuntime.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 = useConfigInject('upload-card', props),
prefixClsNew = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider; // TODO [fix] 解决使用的过程中未用 configProvider 报错
var errorImageDef = configProvider.errorImage;
var _useMoreUpload = useMoreUpload(props, params),
moreLoading = _useMoreUpload.moreLoading,
beforeUpload = _useMoreUpload.beforeUpload,
removeOneImage = _useMoreUpload.removeOneImage,
handleMoreChange = _useMoreUpload.handleMoreChange,
imageList = _useMoreUpload.imageList;
watchEffect(function () {
return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
// 解决拖拽不好用数据变，展示不变
if (!imageList.value.length && 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 = ref(null);
var initTable = function initTable() {
if (props.draggable) {
var columnListEl = unref(columnListRef);
if (!columnListEl) {
return;
}
var _useSortable = useSortable(columnListEl, {
handle: ".".concat(prefixClsNew.value, "-icon-drag"),
onEnd: function onEnd(evt) {
var oldIndex = evt.oldIndex,
newIndex = evt.newIndex;
if (isUndefined(oldIndex) && isNull(oldIndex) || isUndefined(newIndex) && 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();
}
};
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 || errorUploadImage,
configProvider: configProvider
};
},
render: function render() {
var _this2 = this;
var _a, _b;
var imageNode = [];
var dragNode = null;
if (this.draggable) {
dragNode = _createVNode(ToolTip, {
"title": ((_a = this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.UploadCard.dragPlaceholder) || '拖拽改变位置'
}, {
default: function _default() {
return [_createVNode(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 _createVNode("div", {
"class": "".concat(_this2.prefixClsNew, "-img-box"),
"style": {
width: "".concat(_this2.imageWidth, "px"),
height: "".concat(_this2.imageHeight, "px")
}
}, [_createVNode(Image, {
"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), _createVNode("div", {
"class": "".concat(_this2.prefixClsNew, "-handle")
}, [_createVNode(ToolTip, {
"title": ((_a = _this2.configProvider.locale) === null || _a === void 0 ? void 0 : _a.UploadCard.seePlaceholder) || '查看'
}, {
default: function _default() {
return [_createVNode(EyeOutlined, {
"class": "".concat(_this2.prefixClsNew, "-icon"),
"onClick": function onClick() {
return _this2.handlePoseterPreview(iItem);
}
}, null)];
}
}), dragNode, _createVNode(ToolTip, {
"title": ((_b = _this2.configProvider.locale) === null || _b === void 0 ? void 0 : _b.UploadCard.removePlaceholder) || '删除'
}, {
default: function _default() {
return [_createVNode(DeleteOutlined, {
"onClick": function onClick() {
return _this2.removeOneImage(iIdx);
}
}, null)];
}
})])]);
});
}
var canUpload = isUndefined(this.maxUploadCount) || isNumber(this.maxUploadCount) && this.maxUploadCount > 1 && imageNode.length < this.maxUploadCount;
var placeholderNode = null;
if (this.placeholder) {
placeholderNode = _createVNode("p", {
"class": "".concat(this.prefixClsNew, "-tip")
}, [this.placeholder]);
}
var loadingNode = [_withDirectives(_createVNode("div", null, [_createVNode("p", {
"class": "".concat(this.prefixClsNew, "-tip")
}, [((_b = this.configProvider.locale) === null || _b === void 0 ? void 0 : _b.UploadCard.placeholder) || '上传']), placeholderNode]), [[_vShow, !this.moreLoading]])];
var placeholderSlotNode = getSlot(this, 'placeholder');
if (placeholderSlotNode.length) {
loadingNode = placeholderSlotNode;
}
return _createVNode("div", {
"ref": "columnListRef",
"style": "min-height: ".concat(this.imageHeight, "px")
}, [imageNode, _createVNode(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 [_withDirectives(_createVNode("div", {
"class": "".concat(_this2.prefixClsNew, "-btn")
}, [_withDirectives(_createVNode(LoadingOutlined, null, null), [[_vShow, _this2.moreLoading]]), loadingNode]), [[_vShow, canUpload]])];
}
}), _createVNode(Modal, {
"visible": this.previewPoseterVisible,
"footer": null,
"onCancel": this.handlePoseterCancel
}, {
default: function _default() {
return [_createVNode("img", {
"style": "width: 100%",
"src": _this2.previewPoseterImage
}, null)];
}
})]);
}
});