diff --git a/es/components/extraFile/display/index.d.ts b/es/components/extraFile/display/index.d.ts deleted file mode 100644 index cdf5a1002..000000000 --- a/es/components/extraFile/display/index.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/// -import { EntityDict } from '../../../oak-app-domain'; -declare const _default: (props: import("oak-frontend-base").ReactComponentProps) => import("react").ReactElement>; -export default _default; diff --git a/es/components/extraFile/display/index.js b/es/components/extraFile/display/index.js deleted file mode 100644 index a6a181865..000000000 --- a/es/components/extraFile/display/index.js +++ /dev/null @@ -1,29 +0,0 @@ -export default OakComponent({ - entity: 'extraFile', - isList: false, - projection: { - id: 1, - tag1: 1, - origin: 1, - bucket: 1, - objectId: 1, - filename: 1, - extra1: 1, - extension: 1, - type: 1, - entity: 1, - entityId: 1, - }, - formData: ({ data: extraFile, features }) => { - return { - url: features.extraFile.getUrl(extraFile), - }; - }, - wechatMp: { - externalClasses: ['oak-class'], - }, - properties: { - // 图片显示模式 - mode: 'aspectFit', - }, -}); diff --git a/es/components/extraFile/display/index.json b/es/components/extraFile/display/index.json deleted file mode 100644 index 0967ef424..000000000 --- a/es/components/extraFile/display/index.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/es/components/extraFile/display/index.less b/es/components/extraFile/display/index.less deleted file mode 100644 index e018a629e..000000000 --- a/es/components/extraFile/display/index.less +++ /dev/null @@ -1,11 +0,0 @@ -/** index.wxss **/ - -.image { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - border: 1rpx solid #eee; - border-radius: 4rpx; -} \ No newline at end of file diff --git a/es/components/extraFile/display/index.xml b/es/components/extraFile/display/index.xml deleted file mode 100644 index 8bcfef265..000000000 --- a/es/components/extraFile/display/index.xml +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/es/components/extraFile/display/web.d.ts b/es/components/extraFile/display/web.d.ts deleted file mode 100644 index 3313c4c64..000000000 --- a/es/components/extraFile/display/web.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function render(): import("react/jsx-runtime").JSX.Element; diff --git a/es/components/extraFile/display/web.js b/es/components/extraFile/display/web.js deleted file mode 100644 index 31b430d6c..000000000 --- a/es/components/extraFile/display/web.js +++ /dev/null @@ -1,4 +0,0 @@ -import { jsx as _jsx } from "react/jsx-runtime"; -export default function render() { - return (_jsx("div", { children: "\u672A\u5B9E\u73B0" })); -} diff --git a/es/components/extraFile/display/web.module.less b/es/components/extraFile/display/web.module.less deleted file mode 100644 index 219c96d47..000000000 --- a/es/components/extraFile/display/web.module.less +++ /dev/null @@ -1,8 +0,0 @@ - - -.container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} diff --git a/es/components/extraFile/gallery/index.d.ts b/es/components/extraFile/gallery/index.d.ts index 88e0b17d0..a7522c5c9 100644 --- a/es/components/extraFile/gallery/index.d.ts +++ b/es/components/extraFile/gallery/index.d.ts @@ -1,34 +1,16 @@ import { EntityDict } from '../../../oak-app-domain'; import { EntityDict as BaseEntityDict } from 'oak-domain/lib/types/Entity'; import { ReactComponentProps } from 'oak-frontend-base/lib/types/Page'; -type SourceType = 'album' | 'camera'; -type Theme = 'file' | 'image' | 'image-flow' | 'custom'; type ImgMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | "heightFix" | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top left' | 'top right' | 'bottom left' | 'bottom right'; declare const _default: (props: ReactComponentProps) => React.ReactElement; export default _default; diff --git a/es/components/extraFile/gallery/index.js b/es/components/extraFile/gallery/index.js index 1893000ac..7e3d08e92 100644 --- a/es/components/extraFile/gallery/index.js +++ b/es/components/extraFile/gallery/index.js @@ -1,6 +1,4 @@ -import { generateNewId } from 'oak-domain/lib/utils/uuid'; -import { assert } from 'oak-domain/lib/utils/assert'; -import Dialog from '../../../utils/dialog/index'; +; export default OakComponent({ entity: 'extraFile', isList: true, @@ -22,26 +20,33 @@ export default OakComponent({ isBridge: 1, uploadState: 1, }, - formData({ data: originalFiles, features }) { - let files = originalFiles - ?.filter((ele) => !ele.$$deleteAt$$) - .sort((ele1, ele2) => ele1.sort - ele2.sort); + features: ['extraFile'], + formData({ data, features }) { + let files = data?.sort((ele1, ele2) => ele1.sort - ele2.sort); if (this.props.tag1) { files = files?.filter((ele) => ele?.tag1 === this.props.tag1); } if (this.props.tag2) { files = files?.filter((ele) => ele?.tag2 === this.props.tag2); } + const files2 = files.map((ele) => { + const url = features.extraFile.getUrl(ele); + const thumbUrl = features.extraFile.getUrl(ele, this.props.style); + const fileName = features.extraFile.getFileName(ele); + return { + url, + thumbUrl, + fileName, + ...ele, + }; + }); return { - files, - disableInsert: this.props.maxNumber === 0 || - files?.length >= this.props.maxNumber, + files: files2, }; }, data: { // 根据 size 不同，计算的图片显示大小不同 itemSizePercentage: '', - fileList: {}, }, wechatMp: { externalClasses: ['oak-class', 'oak-item-class'], @@ -62,48 +67,17 @@ export default OakComponent({ }, ], properties: { - removeLater: true, - autoUpload: false, - maxNumber: 20, - extension: [], - selectCount: 1, - sourceType: ['album', 'camera'], - mediaType: ['image'], mode: 'aspectFit', size: 3, - showUploadList: true, - showUploadProgress: false, - accept: 'image/*', disablePreview: false, - disableDelete: false, - disableAdd: false, disableDownload: false, - disabled: false, - type: '', - origin: '', tag1: '', tag2: '', entity: '', entityId: '', - theme: 'image', + style: '', }, methods: { - getUrl(extraFile) { - const { fileList } = this.state; - if (fileList[extraFile?.id]) { - const url = this.features.extraFile.getUrl(Object.assign({}, extraFile, { - extra1: fileList[extraFile?.id], - })); - return url; - } - return this.features.extraFile.getUrl(extraFile); - }, - getFileName(extraFile) { - return this.features.extraFile.getFileName(extraFile); - }, - formatBytes(value) { - return this.features.extraFile.formatBytes(value); - }, /** * 获取组件内部节点位置信息（单个） * @param component 组件实例 @@ -129,378 +103,21 @@ export default OakComponent({ const windowWidth = wx.getSystemInfoSync().windowWidth; return (750 / windowWidth) * px; }, - async chooseMediaByMp() { - const { selectCount, mediaType, sourceType } = this.props; - try { - const { errMsg, tempFiles } = await wx.chooseMedia({ - count: selectCount, - mediaType, - sourceType, - }); - if (errMsg !== 'chooseMedia:ok') { - this.triggerEvent('error', { - level: 'warning', - msg: errMsg, - }); - } - else { - await Promise.all(tempFiles.map(async (tempExtraFile) => { - const { tempFilePath, thumbTempFilePath, fileType, size, } = tempExtraFile; - const filePath = tempFilePath || thumbTempFilePath; - const fileFullName = filePath.match(/[^/]+(?!.*\/)/g)[0]; - await this.pushExtraFile({ - name: fileFullName, - fileType, - size, - extra1: filePath, - }); - })); - } - } - catch (err) { - console.error(err); - if (err.errMsg !== 'chooseMedia:fail cancel') { - this.triggerEvent('error', { - level: 'error', - msg: err.errMsg, - }); - } - } - }, - async chooseFileByMp() { - const { selectCount, extension } = this.props; - try { - const { errMsg, tempFiles } = await wx.chooseMessageFile({ - count: selectCount, - type: 'all', - extension, - }); - if (errMsg !== 'chooseMessageFile:ok') { - this.triggerEvent('error', { - level: 'warning', - msg: errMsg, - }); - } - else { - await Promise.all(tempFiles.map(async (tempExtraFile) => { - const { path, type, size, name } = tempExtraFile; - await this.pushExtraFile({ - name, - fileType: type, - size, - extra1: path, - }); - })); - } - } - catch (err) { - console.error(err); - if (err.errMsg !== 'chooseMessageFile:fail cancel') { - this.triggerEvent('error', { - level: 'error', - msg: err.errMsg, - }); - } - } - }, - onPickByMp() { - const { theme } = this.props; - if (['image', 'image-flow'].includes(theme)) { - this.chooseMediaByMp(); - } - else { - this.chooseFileByMp(); - } - }, - async onPickByWeb(uploadFiles, callback) { - const { files } = this.state; - const currentSort = files?.length - ? files[files.length - 1].sort - : 0; - await Promise.all(uploadFiles.map(async (uploadFile, index) => { - const { name, type, size, originFileObj } = uploadFile; - await this.pushExtraFile({ - name, - fileType: type, - size, - extra1: originFileObj, - sort: currentSort + (index + 1) * 100, - }, callback); - })); - }, - async pushExtraFile(options, callback) { - const { type, origin, tag1, tag2, entity, entityId, autoUpload } = this.props; - const { name, extra1, fileType, size, sort } = options; - const extension = name.substring(name.lastIndexOf('.') + 1); - const filename = name.substring(0, name.lastIndexOf('.')); - assert(entity, '必须传入entity'); - assert(origin === 'qiniu', '目前只支持七牛上传'); // 目前只支持七牛上传 - const updateData = { - origin, - type: type || 'file', - tag1, - tag2, - objectId: generateNewId(), - entity, - filename, - size, - extension, - fileType, - entityId, - sort, - }; - // autoUpload为true, 选择直接上传七牛，再提交extraFile - if (autoUpload) { - if (callback) { - callback(updateData, 'uploading'); - } - try { - this.addItem(updateData); - await this.execute(); - if (callback) { - callback(updateData, 'success'); - } - } - catch (error) { - if (callback) { - callback(updateData, 'failed'); - } - throw error; - } - } - else { - const id = this.addItem(updateData); - this.setState({ - fileList: Object.assign(this.state.fileList, { - [id]: extra1, - }), - }); - } - }, - async onItemTapped(event) { - const { files } = this.state; + async onPreviewByMp(event) { + const files = this.state.files; const { index } = event.currentTarget.dataset; - const imageUrl = this.features.extraFile.getUrl(files[index]); - const urls = files - ?.filter((ele) => !!ele) - .map((ele) => this.features.extraFile.getUrl(ele)); - const detail = { - all: files, - index, - urls, - current: imageUrl, - }; - this.triggerEvent('tap', detail); + const imageUrl = files[index].url; + const urls = files?.filter((ele) => !!ele).map((ele) => ele.url); // 预览图片 if (!this.props.disablePreview) { const result = await wx.previewImage({ urls: urls, current: imageUrl, }); - this.triggerEvent('preview', detail); } }, - async onDeleteByMp(event) { - const { value } = event.currentTarget.dataset; - const { id, bucket, origin, uploadState } = value; - const { removeLater } = this.props; - const { fileList } = this.state; - if (removeLater || !uploadState) { - this.removeItem(id); - Object.assign(fileList, { - [id]: null, - }); - this.setState({ - fileList, - }); - } - else { - const result = await wx.showModal({ - title: '确认删除吗', - content: '删除现有文件', - }); - const { confirm } = result; - if (confirm) { - this.removeItem(id); - Object.assign(fileList, { - id: null, - }); - this.setState({ - fileList, - }); - await this.execute(); - } - } - }, - async onDeleteByWeb(value) { - const { id, bucket, origin, uploadState } = value; - const { removeLater = true } = this.props; - const { fileList } = this.state; - // 如果 removeLater为true 或 origin === 'qiniu' 且 bucket不存在 - if (removeLater || !uploadState) { - this.removeItem(id); - Object.assign(fileList, { - id: null, - }); - this.setState({ - fileList, - }); - } - else { - const confirm = Dialog.confirm({ - title: '确认删除当前文件？', - content: '删除后，文件不可恢复', - cancelText: '取消', - okText: '确定', - onOk: async (e) => { - this.removeItem(id); - Object.assign(fileList, { - id: null, - }); - this.setState({ - fileList, - }); - await this.execute(); - confirm.destroy(); - }, - onCancel: (e) => { - confirm.destroy(); - }, - }); - } - }, - async onDownloadByMp(event) { - const { value } = event.currentTarget.dataset; - const fileUrl = this.features.extraFile.getUrl(value); - const name = this.features.extraFile.getFileName(value); - const that = this; - wx.showLoading({ - title: '下载请求中...', - }); - wx.downloadFile({ - url: fileUrl, - success: function (res) { - const filePath = res.tempFilePath || res.filePath; - const fs = wx.getFileSystemManager(); - fs.saveFile({ - tempFilePath: filePath, - success: (res) => { - wx.hideLoading(); - const savedFilePath = res.savedFilePath; - // 打开文件 - wx.openDocument({ - filePath: savedFilePath, - showMenu: true, - success: function (res) { - // console.log('打开文档成功'); - }, - fail: function (res) { - const { errMsg } = res; - if (errMsg.includes('fail filetype not supported')) { - that.setMessage({ - type: 'error', - content: '该文件类型不支持打开', - }); - return; - } - that.setMessage({ - type: 'error', - content: '该文件类型打开失败', - }); - }, - }); - }, - fail: function (res) { - wx.hideLoading(); - that.setMessage({ - type: 'error', - content: '保存文件失败', - }); - }, - }); - }, - fail: function (res) { - wx.hideLoading(); - that.setMessage({ - type: 'error', - content: '下载文件失败', - }); - }, - complete: function (res) { }, - }); - }, - async onOpenByMp(event) { - const { value } = event.currentTarget.dataset; - const fileUrl = this.features.extraFile.getUrl(value); - const that = this; - let extension = value.extension.toLowerCase(); - let extensions = [ - 'doc', - 'docx', - 'xls', - 'xlsx', - 'ppt', - 'pptx', - 'pdf', - ]; //openDocument fileType目前只支持范围 - if (!extensions.includes(extension)) { - this.setMessage({ - type: 'error', - content: `目前仅支持打开${extensions.join(',')}类型的文件`, - }); - return; - } - wx.showLoading({ - title: '下载请求中...', - }); - wx.downloadFile({ - url: fileUrl, - success: function (res) { - const filePath = res.tempFilePath || res.filePath; - wx.hideLoading(); - wx.openDocument({ - //打开文件 - filePath: filePath, - fileType: extension, - showMenu: true, - success: function () { - //console.log(`打开文件成功`); - }, - fail: function (res) { - const { errMsg } = res; - if (errMsg.includes('fail filetype not supported')) { - that.setMessage({ - type: 'error', - content: '该文件类型不支持打开', - }); - return; - } - that.setMessage({ - type: 'error', - content: '该文件类型打开失败', - }); - }, - }); - }, - fail: function (res) { - wx.hideLoading(); - that.setMessage({ - type: 'error', - content: '下载文件失败', - }); - }, - complete: function (res) { }, - }); - }, }, listeners: { - maxNumber(prev, next) { - if (this.state.oakFullpath) { - if (prev.maxNumber !== next.maxNumber) { - this.reRender(); - } - } - }, async size(prev, next) { if (process.env.OAK_PLATFORM === 'wechatMp') { const size = next.size; diff --git a/es/components/extraFile/gallery/index.json b/es/components/extraFile/gallery/index.json index fd38beabe..59a1db6be 100644 --- a/es/components/extraFile/gallery/index.json +++ b/es/components/extraFile/gallery/index.json @@ -1,8 +1,4 @@ { "component": true, - "usingComponents": { - "l-icon": "@oak-frontend-base/miniprogram_npm/lin-ui/icon/index", - "l-button": "@oak-frontend-base/miniprogram_npm/lin-ui/button/index", - "oak-display": "../display/index" - } + "usingComponents": {} } diff --git a/es/components/extraFile/gallery/index.less b/es/components/extraFile/gallery/index.less index 1c3bdb8f8..747400edc 100644 --- a/es/components/extraFile/gallery/index.less +++ b/es/components/extraFile/gallery/index.less @@ -59,94 +59,3 @@ each(range(2, 10), { align-items: center; justify-content: space-around; } - -.file-list__remove { - position: absolute; - right: 10rpx; - top: 10rpx; - height: 40rpx; - width: 40rpx; - border-radius: 50%; - background: rgb(0 0 0 / 40%); - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - box-sizing: border-box; -} - -.file-list__item--add { - border: 1rpx solid #eee; - border-radius: 4rpx; - background-color: white; -} - -.file-list__image--add { - visibility: hidden; - position: absolute; - width: 50%; - height: 50%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - align-items: center; - justify-content: center; - display: flex; -} - -.file-list__item-slot-wrapper { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.file-list__item-slot-wrapper:empty+.file-list__image--add { - visibility: visible; -} - - -.file-list-flow__container { - position: relative; - display: flex; - flex-direction: column; -} -.file-list-flow__item { - display: flex; - flex-direction: row; - align-items: center; - margin: 10rpx 10rpx 10rpx 0; -} -.file-list-flow__item--name { - display: flex; - flex-direction: row; - fleX: 1; - font-size: 28rpx; -} - -.file-list-flow__item--btns { - display: flex; - flex-direction: row; -} - -.file-list-flow__download { - width: 48rpx; - height: 48rpx; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.file-list-flow__remove { - width: 48rpx; - height: 48rpx; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} \ No newline at end of file diff --git a/es/components/extraFile/gallery/index.xml b/es/components/extraFile/gallery/index.xml index 6472294af..c91229ea0 100644 --- a/es/components/extraFile/gallery/index.xml +++ b/es/components/extraFile/gallery/index.xml @@ -1,46 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - 选择文件 - + - - - {{ item.filename }}{{ item.extension ? '.' + item.extension : '' }} - - - - - - - - + + + - \ No newline at end of file diff --git a/es/components/extraFile/gallery/locales/zh_CN.json b/es/components/extraFile/gallery/locales/zh_CN.json index 51c92e4d6..0967ef424 100644 --- a/es/components/extraFile/gallery/locales/zh_CN.json +++ b/es/components/extraFile/gallery/locales/zh_CN.json @@ -1,5 +1 @@ -{ - "waiting": "等待上传", - "success": "上传成功", - "uploading": "上传中" -} +{} diff --git a/es/components/extraFile/gallery2/mobile.module.less b/es/components/extraFile/gallery/mobile.module.less similarity index 100% rename from es/components/extraFile/gallery2/mobile.module.less rename to es/components/extraFile/gallery/mobile.module.less diff --git a/es/components/extraFile/gallery/web.d.ts b/es/components/extraFile/gallery/web.d.ts index 5ab12f4ac..d545eb927 100644 --- a/es/components/extraFile/gallery/web.d.ts +++ b/es/components/extraFile/gallery/web.d.ts @@ -1,37 +1,18 @@ -import { UploadFile } from "antd"; -import { WebComponentProps } from "oak-frontend-base"; -import { EntityDict } from "../../../oak-app-domain"; -interface NewUploadFile extends UploadFile { - id?: string; +import { WebComponentProps } from 'oak-frontend-base'; +import { EntityDict } from '../../../oak-app-domain'; +type ExtraFile = EntityDict['extraFile']['OpSchema']; +interface EnhancedExtraFile extends ExtraFile { + url: string; + thumbUrl: string; + fileFullName: string; } -type Theme = "file" | "image" | "image-flow" | "custom"; export default function render(props: WebComponentProps Promise | boolean; - disabled?: boolean; + files: EnhancedExtraFile[]; style?: Record; className?: string; - directory?: boolean; - onPreview?: (file: UploadFile) => void; - onDownload?: (file: UploadFile) => void; + onDownload?: (file: EnhancedExtraFile) => void; showUploadList?: boolean; - children?: JSX.Element; - files?: EntityDict['extraFile']['OpSchema'][]; - disableInsert?: boolean; - disableAdd?: boolean; disableDownload?: boolean; - disableDelete?: boolean; disablePreview?: boolean; -}, { - onPickByWeb: (files: UploadFile[], callback?: (file: NewUploadFile, status: string) => void) => void; - onDeleteByWeb: (file: UploadFile) => void; - getUrl: (extraFile: EntityDict['extraFile']['OpSchema']) => string; - getFileName: (extraFile: EntityDict['extraFile']['OpSchema']) => string; - formatBytes: (value: number) => string; -}>): import("react/jsx-runtime").JSX.Element; +}, {}>): import("react/jsx-runtime").JSX.Element; export {}; diff --git a/es/components/extraFile/gallery/web.js b/es/components/extraFile/gallery/web.js index 13319a766..b0ffd04c1 100644 --- a/es/components/extraFile/gallery/web.js +++ b/es/components/extraFile/gallery/web.js @@ -1,238 +1,15 @@ -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import React, { useState, useEffect, useCallback } from "react"; -import { Space, Upload, Tag, Button, Table } from "antd"; -import { PlusOutlined } from "@ant-design/icons"; -import { file2Obj } from "antd/es/upload/utils"; -import classNames from "classnames"; -import Style from "./web.module.less"; -import { DndProvider, useDrag, useDrop } from "react-dnd"; -import { HTML5Backend } from "react-dnd-html5-backend"; -import { TouchBackend } from "react-dnd-touch-backend"; -import { isPc } from "oak-frontend-base/es/utils/utils"; -function getListType(theme) { - const themeMap = { - file: "text", - image: "picture-card", - "image-flow": "picture", - custom: "text", - }; - return themeMap[theme]; -} -const type = 'DraggableUploadList'; -const DraggableUploadListItem = ({ originNode, moveRow, file, fileList, }) => { - const ref = React.useRef(null); - const index = fileList.indexOf(file); - const [{ isOver, dropClassName }, drop] = useDrop({ - accept: type, - collect: (monitor) => { - const { index: dragIndex } = monitor.getItem() || {}; - if (dragIndex === index) { - return {}; - } - return { - isOver: monitor.isOver(), - dropClassName: dragIndex < index - ? ' drop-over-downward' - : ' drop-over-upward', - }; - }, - drop: (item) => { - moveRow(item.index, index); - }, - }); - const [, drag] = useDrag({ - type, - item: { index }, - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }); - drop(drag(ref)); - return (_jsx("div", { ref: ref, className: `ant-upload-draggable-list-item ${isOver ? dropClassName : ''}`, style: { cursor: 'move', height: '100%' }, children: originNode })); -}; +import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; +import { useState, useRef } from 'react'; +import { Image, ImageViewer, Space } from 'antd-mobile'; export default function render(props) { - const { accept = 'image/*', maxNumber = 20, multiple = maxNumber !== 1, draggable = false, theme = 'image', tips, beforeUpload, disabled, style, className, directory = false, onPreview, onDownload, children, showUploadList = true, files, disableInsert = false, disableAdd = false, disableDownload = false, disableDelete = false, disablePreview = false, } = props.data; - const { onPickByWeb, onDeleteByWeb, updateItem, t, getFileName, getUrl, formatBytes, } = props.methods; - const [newFiles, setNewFiles] = useState([]); - const [newUploadFiles, setNewUploadFiles] = useState([]); - const listType = getListType(theme); - useEffect(() => { - if (files && files.length > 0) { - setNewFiles(files); - } - else { - setNewFiles([]); - } - }, [files]); - const extraFileToUploadFile = (extraFile) => { - let status = undefined; - switch (extraFile.uploadState) { - case 'uploading': { - status = 'uploading'; - break; - } - case 'failed': { - status = 'error'; - break; - } - case 'success': { - status = 'done'; - break; - } - } - return Object.assign({}, extraFile, { - id: extraFile.id, - url: getUrl(extraFile), - thumbUrl: getUrl(extraFile), - name: getFileName(extraFile), - fileName: getFileName(extraFile), - size: extraFile.size, - type: extraFile.fileType, - uid: extraFile.id, - status, - percent: status === 'uploading' ? 50 : undefined, - }); - }; - const setNewUploadFilesByStatus = (file, status) => { - const { fileName, size, id } = file; - const file2 = newUploadFiles.find((ele) => ele.name?.includes(fileName) && ele.size === size); - if (file2) { - Object.assign(file2, { - status, - id, - }); - } - setNewUploadFiles(newUploadFiles); - }; - const customDelete = (index) => { - const arr = [...newUploadFiles]; - arr.splice(index, 1); - setNewUploadFiles(arr); - }; - const getUploadButton = () => { - if (children) { - return children; - } - if (listType === 'picture-card') { - return (_jsxs("div", { children: [_jsx(PlusOutlined, {}), _jsx("div", { style: { marginTop: 8 }, children: "\u8BF7\u9009\u62E9\u56FE\u7247" })] })); - } - return _jsx(Button, { type: "default", children: "\u9009\u62E9\u6587\u4EF6" }); - }; - const checkLimit = (num) => { - const pattern = /^\d+\.(?:9+)$/; - return pattern.test(num.toString()); - }; - const moveRow = useCallback((dragIndex, hoverIndex) => { - let dragRow = newFiles[dragIndex]; - let sort; - if (hoverIndex === dragIndex) { - return; - } - else if (hoverIndex > dragIndex) { - if (hoverIndex === newFiles.length - 1) { - sort = newFiles[hoverIndex].sort + 100; - } - else { - sort = - (newFiles[hoverIndex].sort + - newFiles[hoverIndex + 1].sort) / - 2; - } - } - else { - if (hoverIndex === 0) { - sort = newFiles[hoverIndex].sort / 2; - } - else { - sort = - (newFiles[hoverIndex].sort + - newFiles[hoverIndex - 1].sort) / - 2; - } - } - if (checkLimit(sort)) { - alert('当前的sort值为:' + sort); - return; - } - updateItem({ sort }, dragRow.id); - }, [newFiles]); - return (_jsxs(Space, { direction: "vertical", className: Style['oak-upload'], style: { width: '100%' }, children: [_jsx(DndProvider, { backend: isPc ? HTML5Backend : TouchBackend, children: _jsx(Upload, { className: classNames(Style['oak-upload__upload'], className), style: style, disabled: disabled, directory: directory, showUploadList: showUploadList - ? { - showPreviewIcon: !disablePreview, - showRemoveIcon: !disableDelete, - showDownloadIcon: !disableDownload, - } - : false, beforeUpload: async (file) => { - if (typeof beforeUpload === 'function') { - const result = await beforeUpload(file); - if (result) { - return false; - } - } - return false; - }, multiple: multiple, maxCount: maxNumber, accept: accept, listType: listType, fileList: theme === 'custom' - ? [] - : newFiles?.map((ele) => extraFileToUploadFile(ele)), onChange: ({ file, fileList, event }) => { - // id不存在就是file对象 - if (!file.id) { - if (theme !== 'custom') { - onPickByWeb([file2Obj(file)]); - } - else { - setNewUploadFiles(fileList); - } - } - }, onRemove: onDeleteByWeb, onPreview: onPreview, onDownload: onDownload, itemRender: (originNode, currentFile, currentFileList) => { - return (_jsx(DraggableUploadListItem, { originNode: originNode, file: currentFile, fileList: currentFileList, moveRow: moveRow })); - }, children: !disableInsert && !disableAdd ? getUploadButton() : null }) }), tips && (_jsx("small", { className: Style['oak-upload__tips'], children: tips })), theme === 'custom' && (_jsxs(_Fragment, { children: [_jsx(Table, { dataSource: newUploadFiles || [], rowKey: "id", columns: [ - { - align: 'center', - dataIndex: 'tableIndex', - title: '#', - render: (value, record, index) => index + 1, - width: 50, - }, - { - dataIndex: 'name', - title: '文件名', - }, - { - dataIndex: 'size', - title: '文件大小', - render: (value, record, index) => { - return formatBytes(value); - }, - }, - { - dataIndex: 'status', - title: '状态', - render: (value, record, index) => { - switch (value) { - case 'success': - return (_jsx(Tag, { color: "success", children: t('success') })); - case 'uploading': - return (_jsx(Tag, { color: "processing", children: t('uploading') })); - default: - return (_jsx(Tag, { color: "warning", children: t('waiting') })); - } - }, - }, - { - dataIndex: 'op', - width: 300, - title: '操作', - align: 'center', - render: (value, record, index) => { - // 只处理state的文件 这时候可以直接删除 - return (_jsx(_Fragment, { children: !record.id && (_jsx(Button, { type: "link", onClick: () => { - customDelete(index); - }, children: "\u5220\u9664" })) })); - }, - fixed: 'right', - }, - ] }), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end' }, children: _jsxs(Space, { children: [_jsx(Button, { danger: true, type: "default", onClick: () => setNewUploadFiles([]), children: "\u6E05\u7A7A" }), _jsx(Button, { type: "primary", onClick: () => { - onPickByWeb(newUploadFiles, (file, status) => { - setNewUploadFilesByStatus(file, status); - }); - }, children: "\u4E0A\u4F20" })] }) })] }))] })); + const { style, className, onDownload, files = [], disableDownload = false, disablePreview = false, } = props.data; + const { t } = props.methods; + const [visible, setVisible] = useState(false); + const imageViewerMultiRef = useRef(null); + return (_jsxs(_Fragment, { children: [_jsx(Space, { children: files?.map((ele, index) => (_jsx(Image, { src: ele.thumbUrl, width: 100, height: 100, fit: "contain", onClick: !disablePreview ? () => { + setVisible(true); + imageViewerMultiRef.current.swipeTo(index); + } : undefined }))) }), _jsx(ImageViewer.Multi, { ref: imageViewerMultiRef, images: files?.map((ele) => ele.url) || [], visible: visible, onClose: () => { + setVisible(false); + } })] })); } diff --git a/es/components/extraFile/gallery/web.module.less b/es/components/extraFile/gallery/web.module.less index 7b230ea57..7e36c4bf2 100644 --- a/es/components/extraFile/gallery/web.module.less +++ b/es/components/extraFile/gallery/web.module.less @@ -1,7 +1,3 @@ -.oak-upload { - &__tips { - display: block; - color: var(--oak-text-color-placeholder); - margin-top: 8px; - } +.container { + display: flex; } \ No newline at end of file diff --git a/es/components/extraFile/gallery2/web.pc.d.ts b/es/components/extraFile/gallery/web.pc.d.ts similarity index 100% rename from es/components/extraFile/gallery2/web.pc.d.ts rename to es/components/extraFile/gallery/web.pc.d.ts diff --git a/es/components/extraFile/gallery2/web.pc.js b/es/components/extraFile/gallery/web.pc.js similarity index 100% rename from es/components/extraFile/gallery2/web.pc.js rename to es/components/extraFile/gallery/web.pc.js diff --git a/es/components/extraFile/gallery2/index.d.ts b/es/components/extraFile/gallery2/index.d.ts deleted file mode 100644 index a7522c5c9..000000000 --- a/es/components/extraFile/gallery2/index.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { EntityDict } from '../../../oak-app-domain'; -import { EntityDict as BaseEntityDict } from 'oak-domain/lib/types/Entity'; -import { ReactComponentProps } from 'oak-frontend-base/lib/types/Page'; -type ImgMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | "heightFix" | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top left' | 'top right' | 'bottom left' | 'bottom right'; -declare const _default: (props: ReactComponentProps) => React.ReactElement; -export default _default; diff --git a/es/components/extraFile/gallery2/index.js b/es/components/extraFile/gallery2/index.js deleted file mode 100644 index 7e3d08e92..000000000 --- a/es/components/extraFile/gallery2/index.js +++ /dev/null @@ -1,139 +0,0 @@ -; -export default OakComponent({ - entity: 'extraFile', - isList: true, - projection: { - id: 1, - tag1: 1, - tag2: 1, - origin: 1, - bucket: 1, - objectId: 1, - filename: 1, - extra1: 1, - extension: 1, - type: 1, - entity: 1, - entityId: 1, - fileType: 1, - sort: 1, - isBridge: 1, - uploadState: 1, - }, - features: ['extraFile'], - formData({ data, features }) { - let files = data?.sort((ele1, ele2) => ele1.sort - ele2.sort); - if (this.props.tag1) { - files = files?.filter((ele) => ele?.tag1 === this.props.tag1); - } - if (this.props.tag2) { - files = files?.filter((ele) => ele?.tag2 === this.props.tag2); - } - const files2 = files.map((ele) => { - const url = features.extraFile.getUrl(ele); - const thumbUrl = features.extraFile.getUrl(ele, this.props.style); - const fileName = features.extraFile.getFileName(ele); - return { - url, - thumbUrl, - fileName, - ...ele, - }; - }); - return { - files: files2, - }; - }, - data: { - // 根据 size 不同，计算的图片显示大小不同 - itemSizePercentage: '', - }, - wechatMp: { - externalClasses: ['oak-class', 'oak-item-class'], - }, - filters: [ - { - filter() { - const { tag1, tag2 } = this.props; - const filter1 = {}; - if (tag1) { - Object.assign(filter1, { tag1 }); - } - if (tag2) { - Object.assign(filter1, { tag2 }); - } - return filter1; - }, - }, - ], - properties: { - mode: 'aspectFit', - size: 3, - disablePreview: false, - disableDownload: false, - tag1: '', - tag2: '', - entity: '', - entityId: '', - style: '', - }, - methods: { - /** - * 获取组件内部节点位置信息（单个） - * @param component 组件实例 - * @param selector {String} css选择器 - * @returns boundingClientRect() 回调函数的值 - */ - async getNodeRectFromComponent(component, selector) { - return await new Promise((resolve) => { - component - .createSelectorQuery() - .select(selector) - .boundingClientRect((res) => { - resolve(res); - }) - .exec(); - }); - }, - /** - // * px 转 rpx - // * @param px 像素值 - // */ - px2rpx(px) { - const windowWidth = wx.getSystemInfoSync().windowWidth; - return (750 / windowWidth) * px; - }, - async onPreviewByMp(event) { - const files = this.state.files; - const { index } = event.currentTarget.dataset; - const imageUrl = files[index].url; - const urls = files?.filter((ele) => !!ele).map((ele) => ele.url); - // 预览图片 - if (!this.props.disablePreview) { - const result = await wx.previewImage({ - urls: urls, - current: imageUrl, - }); - } - }, - }, - listeners: { - async size(prev, next) { - if (process.env.OAK_PLATFORM === 'wechatMp') { - const size = next.size; - if (!size) { - this.setState({ itemSizePercentage: '' }); - return; - } - // 获取 .file-list__container 容器宽度 - const res = await this.getNodeRectFromComponent(this, '.file-list__container'); - const widthRpx = this.px2rpx(res.right - res.left); - // 根据容器宽度计算单张图片宽度百分比 - const itemSizePercentage = (10 / size) * 10 - (20 / widthRpx) * 100 + '%;'; - this.setState({ - itemSizePercentage: itemSizePercentage, - }); - } - }, - }, -}); diff --git a/es/components/extraFile/gallery2/index.json b/es/components/extraFile/gallery2/index.json deleted file mode 100644 index 59a1db6be..000000000 --- a/es/components/extraFile/gallery2/index.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "component": true, - "usingComponents": {} -} diff --git a/es/components/extraFile/gallery2/index.less b/es/components/extraFile/gallery2/index.less deleted file mode 100644 index 747400edc..000000000 --- a/es/components/extraFile/gallery2/index.less +++ /dev/null @@ -1,61 +0,0 @@ -@import "../../../config/styles/mp/index.less"; -@import "../../../config/styles/mp/mixins.less"; - -.file-list__container { - position: relative; - display: flex; - flex-wrap: wrap; -} - -.file-list__item { - position: relative; - width: 220rpx; - padding-bottom: 220rpx; - height: 0; -} - -// size 不同时，对应的图片间距设置 -// size 仅支持 1-10 -each(range(2, 10), { - @valuePlusOne : @value+1; - - .file-list__item--@{value}:nth-of-type(n+@{valuePlusOne}) { - margin-top : 20rpx; - } - - .file-list__item--@{value}:not(:nth-of-type(@{value}n+1)) { - margin-left : 20rpx; - } -}) // 当 size 为 null，每行会显示 3 张图片 - -.file-list__item--null:nth-of-type(n+4) { - margin-top: 20rpx; -} - -.file-list__item--null:not(:nth-of-type(3n+1)) { - margin-left: 20rpx; -} - -.file-list__image { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - border: 1rpx solid #eee; - border-radius: 4rpx; -} - -.file-list__item--selected { - width: 100%; - height: 100%; - z-index: 10; - background-color: #000; - filter: Alpha(Opacity=50); - opacity: 0.5; - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; -} diff --git a/es/components/extraFile/gallery2/index.xml b/es/components/extraFile/gallery2/index.xml deleted file mode 100644 index c91229ea0..000000000 --- a/es/components/extraFile/gallery2/index.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/es/components/extraFile/gallery2/locales/zh_CN.json b/es/components/extraFile/gallery2/locales/zh_CN.json deleted file mode 100644 index 0967ef424..000000000 --- a/es/components/extraFile/gallery2/locales/zh_CN.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/es/components/extraFile/gallery2/web.d.ts b/es/components/extraFile/gallery2/web.d.ts deleted file mode 100644 index d545eb927..000000000 --- a/es/components/extraFile/gallery2/web.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { WebComponentProps } from 'oak-frontend-base'; -import { EntityDict } from '../../../oak-app-domain'; -type ExtraFile = EntityDict['extraFile']['OpSchema']; -interface EnhancedExtraFile extends ExtraFile { - url: string; - thumbUrl: string; - fileFullName: string; -} -export default function render(props: WebComponentProps; - className?: string; - onDownload?: (file: EnhancedExtraFile) => void; - showUploadList?: boolean; - disableDownload?: boolean; - disablePreview?: boolean; -}, {}>): import("react/jsx-runtime").JSX.Element; -export {}; diff --git a/es/components/extraFile/gallery2/web.js b/es/components/extraFile/gallery2/web.js deleted file mode 100644 index b0ffd04c1..000000000 --- a/es/components/extraFile/gallery2/web.js +++ /dev/null @@ -1,15 +0,0 @@ -import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; -import { useState, useRef } from 'react'; -import { Image, ImageViewer, Space } from 'antd-mobile'; -export default function render(props) { - const { style, className, onDownload, files = [], disableDownload = false, disablePreview = false, } = props.data; - const { t } = props.methods; - const [visible, setVisible] = useState(false); - const imageViewerMultiRef = useRef(null); - return (_jsxs(_Fragment, { children: [_jsx(Space, { children: files?.map((ele, index) => (_jsx(Image, { src: ele.thumbUrl, width: 100, height: 100, fit: "contain", onClick: !disablePreview ? () => { - setVisible(true); - imageViewerMultiRef.current.swipeTo(index); - } : undefined }))) }), _jsx(ImageViewer.Multi, { ref: imageViewerMultiRef, images: files?.map((ele) => ele.url) || [], visible: visible, onClose: () => { - setVisible(false); - } })] })); -} diff --git a/es/components/extraFile/gallery2/web.module.less b/es/components/extraFile/gallery2/web.module.less deleted file mode 100644 index 7e36c4bf2..000000000 --- a/es/components/extraFile/gallery2/web.module.less +++ /dev/null @@ -1,3 +0,0 @@ -.container { - display: flex; -} \ No newline at end of file diff --git a/es/components/extraFile/upload/index.js b/es/components/extraFile/upload/index.js index ca0cd3c04..774191f5e 100644 --- a/es/components/extraFile/upload/index.js +++ b/es/components/extraFile/upload/index.js @@ -1,4 +1,4 @@ -import { generateNewId } from 'oak-domain'; +import { generateNewId } from 'oak-domain/lib/utils/uuid'; import { assert } from 'oak-domain/lib/utils/assert'; ; export default OakComponent({ diff --git a/es/data/i18n.js b/es/data/i18n.js index 2abf13334..f242240ef 100644 --- a/es/data/i18n.js +++ b/es/data/i18n.js @@ -70,18 +70,6 @@ const i18ns = [ language: "zh-CN", module: "oak-general-business", position: "src/components/extraFile/gallery", - data: { - "waiting": "等待上传", - "success": "上传成功", - "uploading": "上传中" - } - }, - { - id: "d30e4a47c1d768d74efae1fade371595", - namespace: "oak-general-business-c-extraFile-gallery2", - language: "zh-CN", - module: "oak-general-business", - position: "src/components/extraFile/gallery2", data: {} }, { diff --git a/lib/data/i18n.js b/lib/data/i18n.js index 3bce90637..5f9949661 100644 --- a/lib/data/i18n.js +++ b/lib/data/i18n.js @@ -72,18 +72,6 @@ const i18ns = [ language: "zh-CN", module: "oak-general-business", position: "src/components/extraFile/gallery", - data: { - "waiting": "等待上传", - "success": "上传成功", - "uploading": "上传中" - } - }, - { - id: "d30e4a47c1d768d74efae1fade371595", - namespace: "oak-general-business-c-extraFile-gallery2", - language: "zh-CN", - module: "oak-general-business", - position: "src/components/extraFile/gallery2", data: {} }, { diff --git a/src/components/extraFile/display/index.json b/src/components/extraFile/display/index.json deleted file mode 100644 index 7a73a41bf..000000000 --- a/src/components/extraFile/display/index.json +++ /dev/null @@ -1,2 +0,0 @@ -{ -} \ No newline at end of file diff --git a/src/components/extraFile/display/index.less b/src/components/extraFile/display/index.less deleted file mode 100644 index e018a629e..000000000 --- a/src/components/extraFile/display/index.less +++ /dev/null @@ -1,11 +0,0 @@ -/** index.wxss **/ - -.image { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - border: 1rpx solid #eee; - border-radius: 4rpx; -} \ No newline at end of file diff --git a/src/components/extraFile/display/index.ts b/src/components/extraFile/display/index.ts deleted file mode 100644 index 80cff2390..000000000 --- a/src/components/extraFile/display/index.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { EntityDict } from '../../../oak-app-domain'; - -export default OakComponent({ - entity: 'extraFile', - isList: false, - projection: { - id: 1, - tag1: 1, - origin: 1, - bucket: 1, - objectId: 1, - filename: 1, - extra1: 1, - extension: 1, - type: 1, - entity: 1, - entityId: 1, - }, - formData: ({ data: extraFile, features }) => { - return { - url: features.extraFile.getUrl( - extraFile as EntityDict['extraFile']['Schema'] - ), - }; - }, - wechatMp: { - externalClasses: ['oak-class'], - }, - properties: { - // 图片显示模式 - mode: 'aspectFit' as string, - }, -}); diff --git a/src/components/extraFile/display/index.xml b/src/components/extraFile/display/index.xml deleted file mode 100644 index 8bcfef265..000000000 --- a/src/components/extraFile/display/index.xml +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/extraFile/display/web.module.less b/src/components/extraFile/display/web.module.less deleted file mode 100644 index 219c96d47..000000000 --- a/src/components/extraFile/display/web.module.less +++ /dev/null @@ -1,8 +0,0 @@ - - -.container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} diff --git a/src/components/extraFile/display/web.tsx b/src/components/extraFile/display/web.tsx deleted file mode 100644 index 707cf3a3f..000000000 --- a/src/components/extraFile/display/web.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React, { Component } from 'react'; - -export default function render() { - return ( -
- 未实现 -
- ); -} diff --git a/src/components/extraFile/gallery/index.json b/src/components/extraFile/gallery/index.json index fd38beabe..59a1db6be 100644 --- a/src/components/extraFile/gallery/index.json +++ b/src/components/extraFile/gallery/index.json @@ -1,8 +1,4 @@ { "component": true, - "usingComponents": { - "l-icon": "@oak-frontend-base/miniprogram_npm/lin-ui/icon/index", - "l-button": "@oak-frontend-base/miniprogram_npm/lin-ui/button/index", - "oak-display": "../display/index" - } + "usingComponents": {} } diff --git a/src/components/extraFile/gallery/index.less b/src/components/extraFile/gallery/index.less index 1c3bdb8f8..747400edc 100644 --- a/src/components/extraFile/gallery/index.less +++ b/src/components/extraFile/gallery/index.less @@ -59,94 +59,3 @@ each(range(2, 10), { align-items: center; justify-content: space-around; } - -.file-list__remove { - position: absolute; - right: 10rpx; - top: 10rpx; - height: 40rpx; - width: 40rpx; - border-radius: 50%; - background: rgb(0 0 0 / 40%); - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - box-sizing: border-box; -} - -.file-list__item--add { - border: 1rpx solid #eee; - border-radius: 4rpx; - background-color: white; -} - -.file-list__image--add { - visibility: hidden; - position: absolute; - width: 50%; - height: 50%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - align-items: center; - justify-content: center; - display: flex; -} - -.file-list__item-slot-wrapper { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.file-list__item-slot-wrapper:empty+.file-list__image--add { - visibility: visible; -} - - -.file-list-flow__container { - position: relative; - display: flex; - flex-direction: column; -} -.file-list-flow__item { - display: flex; - flex-direction: row; - align-items: center; - margin: 10rpx 10rpx 10rpx 0; -} -.file-list-flow__item--name { - display: flex; - flex-direction: row; - fleX: 1; - font-size: 28rpx; -} - -.file-list-flow__item--btns { - display: flex; - flex-direction: row; -} - -.file-list-flow__download { - width: 48rpx; - height: 48rpx; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.file-list-flow__remove { - width: 48rpx; - height: 48rpx; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} \ No newline at end of file diff --git a/src/components/extraFile/gallery/index.ts b/src/components/extraFile/gallery/index.ts index ef08ed182..e440b069a 100644 --- a/src/components/extraFile/gallery/index.ts +++ b/src/components/extraFile/gallery/index.ts @@ -1,12 +1,15 @@ -import { generateNewId } from 'oak-domain/lib/utils/uuid'; -import { assert } from 'oak-domain/lib/utils/assert'; -import Dialog from '../../../utils/dialog/index'; import { EntityDict } from '../../../oak-app-domain'; import { EntityDict as BaseEntityDict } from 'oak-domain/lib/types/Entity'; import { ReactComponentProps } from 'oak-frontend-base/lib/types/Page'; -type SourceType = 'album' | 'camera'; -type Theme = 'file' | 'image' | 'image-flow' | 'custom'; +type ExtraFile = EntityDict['extraFile']['OpSchema']; + +interface EnhancedExtraFile extends ExtraFile { + url: string; + thumbUrl: string; + fileName: string; +}; + type ImgMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | "heightFix" | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top left' | 'top right' | 'bottom left' | 'bottom right'; @@ -31,29 +34,37 @@ export default OakComponent({ isBridge: 1, uploadState: 1, }, - formData({ data: originalFiles, features }) { - let files = ( - originalFiles as Array - ) - ?.filter((ele) => !ele.$$deleteAt$$) - .sort((ele1, ele2) => ele1.sort! - ele2.sort!); + features: ['extraFile'], + formData({ data, features }) { + let files = data?.sort((ele1, ele2) => ele1.sort! - ele2.sort!); if (this.props.tag1) { files = files?.filter((ele) => ele?.tag1 === this.props.tag1); } if (this.props.tag2) { files = files?.filter((ele) => ele?.tag2 === this.props.tag2); } + + const files2 = files.map((ele) => { + const url = features.extraFile.getUrl(ele as ExtraFile); + const thumbUrl = features.extraFile.getUrl( + ele as ExtraFile, + this.props.style + ); + const fileName = features.extraFile.getFileName(ele as ExtraFile); + return { + url, + thumbUrl, + fileName, + ...ele, + } as EnhancedExtraFile; + }); return { - files, - disableInsert: - this.props.maxNumber === 0 || - files?.length >= this.props.maxNumber!, + files: files2, }; }, data: { // 根据 size 不同，计算的图片显示大小不同 itemSizePercentage: '', - fileList: {} as Record, }, wechatMp: { externalClasses: ['oak-class', 'oak-item-class'], @@ -74,51 +85,18 @@ export default OakComponent({ }, ], properties: { - removeLater: true, - autoUpload: false, - maxNumber: 20, - extension: [] as string[], //小程序独有 chooseMessageFile - selectCount: 1, // 每次打开图片时，可选中的数量 小程序独有 - sourceType: ['album', 'camera'] as SourceType[], // 小程序独有 chooseMedia - mediaType: ['image'] as ('image' | 'video')[], // 小程序独有 chooseMedia mode: 'aspectFit' as ImgMode, // 图片显示模式 size: 3, // 每行可显示的个数 小程序独有 - showUploadList: true, //web独有 - showUploadProgress: false, // web独有 - accept: 'image/*', // web独有 disablePreview: false, // 图片是否可预览 - disableDelete: false, // 图片是否可删除 - disableAdd: false, // 上传按钮隐藏 disableDownload: false, // 下载按钮隐藏 - disabled: false, - type: '', - origin: '', tag1: '', tag2: '', entity: '' as keyof EntityDict, entityId: '', - theme: 'image' as Theme, + style: '', }, methods: { - getUrl(extraFile: EntityDict['extraFile']['OpSchema']) { - const { fileList } = this.state; - if (fileList[extraFile?.id]) { - const url = this.features.extraFile.getUrl( - Object.assign({}, extraFile, { - extra1: fileList[extraFile?.id], - }) - ); - return url; - } - return this.features.extraFile.getUrl(extraFile); - }, - getFileName(extraFile: EntityDict['extraFile']['OpSchema']) { - return this.features.extraFile.getFileName(extraFile); - }, - formatBytes(value: number) { - return this.features.extraFile.formatBytes(value); - }, /** * 获取组件内部节点位置信息（单个） * @param component 组件实例 @@ -144,407 +122,22 @@ export default OakComponent({ const windowWidth = wx.getSystemInfoSync().windowWidth; return (750 / windowWidth) * px; }, - async chooseMediaByMp() { - const { selectCount, mediaType, sourceType } = this.props; - try { - const { errMsg, tempFiles } = await wx.chooseMedia({ - count: selectCount, - mediaType, - sourceType, - }); - if (errMsg !== 'chooseMedia:ok') { - this.triggerEvent('error', { - level: 'warning', - msg: errMsg, - }); - } else { - await Promise.all( - tempFiles.map(async (tempExtraFile) => { - const { - tempFilePath, - thumbTempFilePath, - fileType, - size, - } = tempExtraFile; - const filePath = tempFilePath || thumbTempFilePath; - const fileFullName = - filePath.match(/[^/]+(?!.*\/)/g)![0]; - await this.pushExtraFile({ - name: fileFullName, - fileType, - size, - extra1: filePath, - }); - }) - ); - } - } catch (err: any) { - console.error(err); - if (err.errMsg !== 'chooseMedia:fail cancel') { - this.triggerEvent('error', { - level: 'error', - msg: err.errMsg, - }); - } - } - }, - async chooseFileByMp() { - const { selectCount, extension } = this.props; - try { - const { errMsg, tempFiles } = await wx.chooseMessageFile({ - count: selectCount!, - type: 'all', - extension, - }); - if (errMsg !== 'chooseMessageFile:ok') { - this.triggerEvent('error', { - level: 'warning', - msg: errMsg, - }); - } else { - await Promise.all( - tempFiles.map(async (tempExtraFile) => { - const { path, type, size, name } = tempExtraFile; - await this.pushExtraFile({ - name, - fileType: type, - size, - extra1: path, - }); - }) - ); - } - } catch (err: any) { - console.error(err); - if (err.errMsg !== 'chooseMessageFile:fail cancel') { - this.triggerEvent('error', { - level: 'error', - msg: err.errMsg, - }); - } - } - }, - onPickByMp() { - const { theme } = this.props; - if (['image', 'image-flow'].includes(theme!)) { - this.chooseMediaByMp(); - } else { - this.chooseFileByMp(); - } - }, - async onPickByWeb( - uploadFiles: any[], - callback?: (file: any, status: string) => void - ) { - const { files } = this.state; - const currentSort = files?.length - ? files[files.length - 1].sort - : 0; - await Promise.all( - uploadFiles.map(async (uploadFile, index) => { - const { name, type, size, originFileObj } = uploadFile; - await this.pushExtraFile( - { - name, - fileType: type, - size, - extra1: originFileObj, - sort: currentSort + (index + 1) * 100, - }, - callback - ); - }) - ); - }, - async pushExtraFile( - options: { - name: string; - extra1: any; - fileType: string; - size: number; - sort: number; - }, - callback?: (file: any, status: string) => void - ) { - const { type, origin, tag1, tag2, entity, entityId, autoUpload } = - this.props; - const { name, extra1, fileType, size, sort } = options; - const extension = name.substring(name.lastIndexOf('.') + 1); - const filename = name.substring(0, name.lastIndexOf('.')); - assert(entity, '必须传入entity'); - assert(origin === 'qiniu', '目前只支持七牛上传'); // 目前只支持七牛上传 - const updateData = { - origin, - type: type || 'file', - tag1, - tag2, - objectId: generateNewId(), - entity, - filename, - size, - extension, - fileType, - entityId, - sort, - } as EntityDict['extraFile']['CreateSingle']['data']; - // autoUpload为true, 选择直接上传七牛，再提交extraFile - if (autoUpload) { - if (callback) { - callback(updateData, 'uploading'); - } - try { - this.addItem(updateData); - await this.execute(); - if (callback) { - callback(updateData, 'success'); - } - } catch (error) { - if (callback) { - callback(updateData, 'failed'); - } - throw error; - } - } else { - const id = this.addItem(updateData); - this.setState({ - fileList: Object.assign(this.state.fileList, { - [id]: extra1, - }), - }); - } - }, - async onItemTapped(event: WechatMiniprogram.Touch) { - const { files } = this.state; - const { index } = event.currentTarget.dataset; - const imageUrl = this.features.extraFile.getUrl(files[index]); - const urls = files - ?.filter((ele: EntityDict['extraFile']['Schema']) => !!ele) - .map((ele: EntityDict['extraFile']['Schema']) => - this.features.extraFile.getUrl(ele) - ); - const detail = { - all: files, - index, - urls, - current: imageUrl, - }; - this.triggerEvent('tap', detail); + async onPreviewByMp(event: WechatMiniprogram.Touch) { + const files = this.state.files as EnhancedExtraFile[]; + const { index } = event.currentTarget.dataset; + const imageUrl = files[index].url; + const urls = files?.filter((ele) => !!ele).map((ele) => ele.url); // 预览图片 if (!this.props.disablePreview) { const result = await wx.previewImage({ urls: urls, current: imageUrl, }); - this.triggerEvent('preview', detail); } }, - async onDeleteByMp(event: WechatMiniprogram.Touch) { - const { value } = event.currentTarget.dataset; - const { id, bucket, origin, uploadState } = value; - const { removeLater } = this.props; - const { fileList } = this.state; - if (removeLater || !uploadState) { - this.removeItem(id); - Object.assign(fileList, { - [id]: null, - }); - this.setState({ - fileList, - }); - } else { - const result = await wx.showModal({ - title: '确认删除吗', - content: '删除现有文件', - }); - const { confirm } = result; - if (confirm) { - this.removeItem(id); - Object.assign(fileList, { - id: null, - }); - this.setState({ - fileList, - }); - await this.execute(); - } - } - }, - async onDeleteByWeb(value: any) { - const { id, bucket, origin, uploadState } = value; - const { removeLater = true } = this.props; - const { fileList } = this.state; - // 如果 removeLater为true 或 origin === 'qiniu' 且 bucket不存在 - if (removeLater || !uploadState) { - this.removeItem(id); - Object.assign(fileList, { - id: null, - }); - this.setState({ - fileList, - }); - } else { - const confirm = Dialog.confirm({ - title: '确认删除当前文件？', - content: '删除后，文件不可恢复', - cancelText: '取消', - okText: '确定', - onOk: async (e: any) => { - this.removeItem(id); - Object.assign(fileList, { - id: null, - }); - this.setState({ - fileList, - }); - await this.execute(); - confirm.destroy(); - }, - onCancel: (e: any) => { - confirm.destroy(); - }, - }); - } - }, - async onDownloadByMp(event: WechatMiniprogram.Touch) { - const { value } = event.currentTarget.dataset; - const fileUrl = this.features.extraFile.getUrl(value); - const name = this.features.extraFile.getFileName(value); - const that = this; - wx.showLoading({ - title: '下载请求中...', - }); - wx.downloadFile({ - url: fileUrl, - success: function (res) { - const filePath = res.tempFilePath || res.filePath; - const fs = wx.getFileSystemManager(); - fs.saveFile({ - tempFilePath: filePath, - success: (res) => { - wx.hideLoading(); - const savedFilePath = res.savedFilePath; - // 打开文件 - wx.openDocument({ - filePath: savedFilePath, - showMenu: true, - success: function (res) { - // console.log('打开文档成功'); - }, - fail: function (res) { - const { errMsg } = res; - if ( - errMsg.includes( - 'fail filetype not supported' - ) - ) { - that.setMessage({ - type: 'error', - content: '该文件类型不支持打开', - }); - return; - } - that.setMessage({ - type: 'error', - content: '该文件类型打开失败', - }); - }, - }); - }, - fail: function (res) { - wx.hideLoading(); - that.setMessage({ - type: 'error', - content: '保存文件失败', - }); - }, - }); - }, - fail: function (res) { - wx.hideLoading(); - that.setMessage({ - type: 'error', - content: '下载文件失败', - }); - }, - complete: function (res) {}, - }); - }, - async onOpenByMp(event: WechatMiniprogram.Touch) { - const { value } = event.currentTarget.dataset; - const fileUrl = this.features.extraFile.getUrl(value); - const that = this; - let extension = value.extension.toLowerCase(); - let extensions = [ - 'doc', - 'docx', - 'xls', - 'xlsx', - 'ppt', - 'pptx', - 'pdf', - ]; //openDocument fileType目前只支持范围 - if (!extensions.includes(extension)) { - this.setMessage({ - type: 'error', - content: `目前仅支持打开${extensions.join(',')}类型的文件`, - }); - return; - } - - wx.showLoading({ - title: '下载请求中...', - }); - wx.downloadFile({ - url: fileUrl, - success: function (res) { - const filePath = res.tempFilePath || res.filePath; - wx.hideLoading(); - wx.openDocument({ - //打开文件 - filePath: filePath, - fileType: extension, - showMenu: true, // 是否显示右上角菜单按钮 默认为false(看自身需求，可要可不要。后期涉及到右上角分享功能) - success: function () { - //console.log(`打开文件成功`); - }, - fail: function (res) { - const { errMsg } = res; - if ( - errMsg.includes('fail filetype not supported') - ) { - that.setMessage({ - type: 'error', - content: '该文件类型不支持打开', - }); - return; - } - that.setMessage({ - type: 'error', - content: '该文件类型打开失败', - }); - }, - }); - }, - fail: function (res) { - wx.hideLoading(); - that.setMessage({ - type: 'error', - content: '下载文件失败', - }); - }, - complete: function (res) {}, - }); - }, }, listeners: { - maxNumber(prev, next) { - if (this.state.oakFullpath) { - if (prev.maxNumber !== next.maxNumber) { - this.reRender(); - } - } - }, async size(prev, next) { if (process.env.OAK_PLATFORM === 'wechatMp') { const size = next.size; @@ -575,37 +168,19 @@ export default OakComponent({ T2, true, { - removeLater: boolean; - autoUpload: boolean; - maxNumber: number; - extension: string[]; - selectCount: number; - sourceType: SourceType[]; - mediaType: ('image' | 'video')[]; // 图片显示模式 mode: ImgMode; // 每行可显示的个数 size: number; - showUploadList: boolean; - accept: string; // 图片是否可预览 disablePreview: boolean; - // 图片是否可删除 - disableDelete: boolean; - // 上传按钮隐藏 - disableAdd: boolean; // 下按按钮隐藏 disableDownload: boolean; - disabled: boolean; - type: string; - origin: string; tag1: string; tag2: string; entity: keyof ED2; entityId: string; - theme: Theme; - showUploadProgress: boolean; - children?: React.ReactNode; + style: string; } > ) => React.ReactElement; diff --git a/src/components/extraFile/gallery/index.xml b/src/components/extraFile/gallery/index.xml index 6472294af..c91229ea0 100644 --- a/src/components/extraFile/gallery/index.xml +++ b/src/components/extraFile/gallery/index.xml @@ -1,46 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - 选择文件 - + - - - {{ item.filename }}{{ item.extension ? '.' + item.extension : '' }} - - - - - - - - + + + - \ No newline at end of file diff --git a/src/components/extraFile/gallery/locales/zh_CN.json b/src/components/extraFile/gallery/locales/zh_CN.json index db40085b2..54b37f457 100644 --- a/src/components/extraFile/gallery/locales/zh_CN.json +++ b/src/components/extraFile/gallery/locales/zh_CN.json @@ -1,6 +1,2 @@ -{ - "waiting": "等待上传", - "success": "上传成功", - "uploading": "上传中" -} \ No newline at end of file +{} \ No newline at end of file diff --git a/src/components/extraFile/gallery2/mobile.module.less b/src/components/extraFile/gallery/mobile.module.less similarity index 100% rename from src/components/extraFile/gallery2/mobile.module.less rename to src/components/extraFile/gallery/mobile.module.less diff --git a/src/components/extraFile/gallery/web.module.less b/src/components/extraFile/gallery/web.module.less index 7b230ea57..7e36c4bf2 100644 --- a/src/components/extraFile/gallery/web.module.less +++ b/src/components/extraFile/gallery/web.module.less @@ -1,7 +1,3 @@ -.oak-upload { - &__tips { - display: block; - color: var(--oak-text-color-placeholder); - margin-top: 8px; - } +.container { + display: flex; } \ No newline at end of file diff --git a/src/components/extraFile/gallery2/web.pc.tsx b/src/components/extraFile/gallery/web.pc.tsx similarity index 100% rename from src/components/extraFile/gallery2/web.pc.tsx rename to src/components/extraFile/gallery/web.pc.tsx diff --git a/src/components/extraFile/gallery/web.tsx b/src/components/extraFile/gallery/web.tsx index 3d812dc4f..56358d1a2 100644 --- a/src/components/extraFile/gallery/web.tsx +++ b/src/components/extraFile/gallery/web.tsx @@ -1,463 +1,73 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useState, useEffect, useCallback, useRef } from 'react'; -import { Space, Upload, UploadFile, Tag, Button, Table } from "antd"; -import { Html5Filled, PlusOutlined } from "@ant-design/icons"; -import { file2Obj } from "antd/es/upload/utils"; -import { RcFile } from "antd/es/upload/interface"; -import classNames from "classnames"; -import Style from "./web.module.less"; -import { WebComponentProps } from "oak-frontend-base"; -import { EntityDict } from "../../../oak-app-domain"; -import { DndProvider, useDrag, useDrop } from "react-dnd"; -import { HTML5Backend } from "react-dnd-html5-backend"; -import { TouchBackend } from "react-dnd-touch-backend"; -import { isPc } from "oak-frontend-base/es/utils/utils"; +import { Image, ImageViewer, Space } from 'antd-mobile'; +import classNames from 'classnames'; +import Style from './mobile.module.less'; +import { WebComponentProps } from 'oak-frontend-base'; +import { EntityDict } from '../../../oak-app-domain'; -interface NewUploadFile extends UploadFile { - id?: string; +type ExtraFile = EntityDict['extraFile']['OpSchema']; + +interface EnhancedExtraFile extends ExtraFile { + url: string; + thumbUrl: string; + fileFullName: string; } -type Theme = "file" | "image" | "image-flow" | "custom"; -type ListType = "text" | "picture" | "picture-card"; - -function getListType(theme: Theme): ListType { - const themeMap: Record = { - file: "text", - image: "picture-card", - "image-flow": "picture", - custom: "text", - }; - return themeMap[theme]; -} - -const type = 'DraggableUploadList'; -const DraggableUploadListItem = ({ - originNode, - moveRow, - file, - fileList, -}: any) => { - const ref = React.useRef(null); - const index = fileList.indexOf(file); - const [{ isOver, dropClassName }, drop] = useDrop({ - accept: type, - collect: (monitor: any) => { - const { index: dragIndex } = monitor.getItem() || {}; - if (dragIndex === index) { - return {}; - } - return { - isOver: monitor.isOver(), - dropClassName: - dragIndex < index - ? ' drop-over-downward' - : ' drop-over-upward', - }; - }, - drop: (item: any) => { - moveRow(item.index, index); - }, - }); - const [, drag] = useDrag({ - type, - item: { index }, - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }); - drop(drag(ref)); - return ( -
- {originNode} -
- ); -}; - export default function render( props: WebComponentProps< EntityDict, 'extraFile', true, { - accept?: string; - maxNumber?: number; - multiple?: boolean; - draggable?: boolean; - theme?: Theme; - tips?: string; - beforeUpload?: (file: File) => Promise | boolean; - disabled?: boolean; + files: EnhancedExtraFile[]; style?: Record; className?: string; - directory?: boolean; - onPreview?: (file: UploadFile) => void; - onDownload?: (file: UploadFile) => void; + onDownload?: (file: EnhancedExtraFile) => void; showUploadList?: boolean; - children?: JSX.Element; - files?: EntityDict['extraFile']['OpSchema'][]; - disableInsert?: boolean; - disableAdd?: boolean; disableDownload?: boolean; - disableDelete?: boolean; disablePreview?: boolean; }, - { - onPickByWeb: ( - files: UploadFile[], - callback?: (file: NewUploadFile, status: string) => void - ) => void; - onDeleteByWeb: (file: UploadFile) => void; - getUrl: (extraFile: EntityDict['extraFile']['OpSchema']) => string; - getFileName: ( - extraFile: EntityDict['extraFile']['OpSchema'] - ) => string; - formatBytes: (value: number) => string; - } + {} > ) { const { - accept = 'image/*', - maxNumber = 20, - multiple = maxNumber !== 1, - draggable = false, - theme = 'image', - tips, - beforeUpload, - disabled, style, className, - directory = false, - onPreview, onDownload, - children, - showUploadList = true, - files, - disableInsert = false, - disableAdd = false, + files = [], disableDownload = false, - disableDelete = false, disablePreview = false, } = props.data; - const { - onPickByWeb, - onDeleteByWeb, - updateItem, - t, - getFileName, - getUrl, - formatBytes, - } = props.methods; - const [newFiles, setNewFiles] = useState< - EntityDict['extraFile']['OpSchema'][] - >([]); - const [newUploadFiles, setNewUploadFiles] = useState([]); - - const listType = getListType(theme); - useEffect(() => { - if (files && files.length > 0) { - setNewFiles(files); - } else { - setNewFiles([]); - } - }, [files]); - - const extraFileToUploadFile = ( - extraFile: EntityDict['extraFile']['OpSchema'] - ): NewUploadFile => { - let status = undefined as NewUploadFile['status']; - switch (extraFile.uploadState) { - case 'uploading': { - status = 'uploading'; - break; - } - case 'failed': { - status = 'error'; - break; - } - case 'success': { - status = 'done'; - break; - } - } - return Object.assign({}, extraFile, { - id: extraFile.id, - url: getUrl(extraFile), - thumbUrl: getUrl(extraFile), - name: getFileName(extraFile)!, - fileName: getFileName(extraFile)!, - size: extraFile.size!, - type: extraFile.fileType!, - uid: extraFile.id, //upload 组件需要uid来维护fileList - status, - percent: status === 'uploading' ? 50 : undefined, - }); - }; - - const setNewUploadFilesByStatus = (file: NewUploadFile, status: string) => { - const { fileName, size, id } = file; - const file2 = newUploadFiles.find( - (ele: NewUploadFile) => - ele.name?.includes(fileName!) && ele.size === size - ); - if (file2) { - Object.assign(file2, { - status, - id, - }); - } - - setNewUploadFiles(newUploadFiles); - }; - - const customDelete = (index: number) => { - const arr = [...newUploadFiles]; - arr.splice(index, 1); - setNewUploadFiles(arr); - }; - - const getUploadButton = () => { - if (children) { - return children; - } - if (listType === 'picture-card') { - return ( -
- -
请选择图片
-
- ); - } - return ; - }; - - const checkLimit = (num: number) => { - const pattern = /^\d+\.(?:9+)$/; - return pattern.test(num.toString()); - }; - - const moveRow = useCallback( - (dragIndex: number, hoverIndex: number) => { - let dragRow = newFiles[dragIndex]; - let sort; - if (hoverIndex === dragIndex) { - return; - } else if (hoverIndex > dragIndex) { - if (hoverIndex === newFiles.length - 1) { - sort = newFiles[hoverIndex]!.sort! + 100; - } else { - sort = - (newFiles[hoverIndex]!.sort! + - newFiles[hoverIndex + 1]!.sort!) / - 2; - } - } else { - if (hoverIndex === 0) { - sort = newFiles[hoverIndex]!.sort! / 2; - } else { - sort = - (newFiles[hoverIndex]!.sort! + - newFiles[hoverIndex - 1]!.sort!) / - 2; - } - } - if (checkLimit(sort)) { - alert('当前的sort值为:' + sort); - return; - } - updateItem({ sort }, dragRow.id); - }, - [newFiles] - ); + const { t } = props.methods; + const [visible, setVisible] = useState(false); + const imageViewerMultiRef = useRef(null); return ( - - - { - if (typeof beforeUpload === 'function') { - const result = await beforeUpload(file); - if (result) { - return false; - } - } - return false; - }} - multiple={multiple} - maxCount={maxNumber} - accept={accept} - listType={listType} - fileList={ - theme === 'custom' - ? [] - : newFiles?.map((ele) => extraFileToUploadFile(ele)) - } - onChange={({ file, fileList, event }) => { - // id不存在就是file对象 - if (!(file as NewUploadFile).id) { - if (theme !== 'custom') { - onPickByWeb([file2Obj(file as RcFile)]); - } else { - setNewUploadFiles(fileList); - } - } - }} - onRemove={onDeleteByWeb} - onPreview={onPreview} - onDownload={onDownload} - itemRender={(originNode, currentFile, currentFileList) => { - return ( - - ); - }} - > - {!disableInsert && !disableAdd ? getUploadButton() : null} - - - - {tips && ( - {tips} - )} - {theme === 'custom' && ( - <> - index + 1, - width: 50, - }, - { - dataIndex: 'name', - title: '文件名', - }, - { - dataIndex: 'size', - title: '文件大小', - render: (value, record, index) => { - return formatBytes(value as number); - }, - }, - { - dataIndex: 'status', - title: '状态', - render: (value, record, index) => { - switch (value) { - case 'success': - return ( - - {t('success')} - - ); - case 'uploading': - return ( - - {t('uploading')} - - ); - default: - return ( - - {t('waiting')} - - ); - } - }, - }, - { - dataIndex: 'op', - width: 300, - title: '操作', - align: 'center', - render: (value, record, index) => { - // 只处理state的文件 这时候可以直接删除 - return ( - <> - {!record.id && ( - - )} - - ); - }, - fixed: 'right', - }, - ]} + <> + + {files?.map((ele, index) => ( + { + setVisible(true); + (imageViewerMultiRef.current as any).swipeTo(index); + } : undefined} /> -
- - - - -
- - )} - + ))} + + + ele.url) || []} + visible={visible} + onClose={() => { + setVisible(false); + }} + /> + ); } diff --git a/src/components/extraFile/gallery2/index.json b/src/components/extraFile/gallery2/index.json deleted file mode 100644 index 59a1db6be..000000000 --- a/src/components/extraFile/gallery2/index.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "component": true, - "usingComponents": {} -} diff --git a/src/components/extraFile/gallery2/index.less b/src/components/extraFile/gallery2/index.less deleted file mode 100644 index 747400edc..000000000 --- a/src/components/extraFile/gallery2/index.less +++ /dev/null @@ -1,61 +0,0 @@ -@import "../../../config/styles/mp/index.less"; -@import "../../../config/styles/mp/mixins.less"; - -.file-list__container { - position: relative; - display: flex; - flex-wrap: wrap; -} - -.file-list__item { - position: relative; - width: 220rpx; - padding-bottom: 220rpx; - height: 0; -} - -// size 不同时，对应的图片间距设置 -// size 仅支持 1-10 -each(range(2, 10), { - @valuePlusOne : @value+1; - - .file-list__item--@{value}:nth-of-type(n+@{valuePlusOne}) { - margin-top : 20rpx; - } - - .file-list__item--@{value}:not(:nth-of-type(@{value}n+1)) { - margin-left : 20rpx; - } -}) // 当 size 为 null，每行会显示 3 张图片 - -.file-list__item--null:nth-of-type(n+4) { - margin-top: 20rpx; -} - -.file-list__item--null:not(:nth-of-type(3n+1)) { - margin-left: 20rpx; -} - -.file-list__image { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - border: 1rpx solid #eee; - border-radius: 4rpx; -} - -.file-list__item--selected { - width: 100%; - height: 100%; - z-index: 10; - background-color: #000; - filter: Alpha(Opacity=50); - opacity: 0.5; - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; -} diff --git a/src/components/extraFile/gallery2/index.ts b/src/components/extraFile/gallery2/index.ts deleted file mode 100644 index e440b069a..000000000 --- a/src/components/extraFile/gallery2/index.ts +++ /dev/null @@ -1,186 +0,0 @@ -import { EntityDict } from '../../../oak-app-domain'; -import { EntityDict as BaseEntityDict } from 'oak-domain/lib/types/Entity'; -import { ReactComponentProps } from 'oak-frontend-base/lib/types/Page'; - -type ExtraFile = EntityDict['extraFile']['OpSchema']; - -interface EnhancedExtraFile extends ExtraFile { - url: string; - thumbUrl: string; - fileName: string; -}; - -type ImgMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | "heightFix" | 'top' | 'bottom' | 'left' - | 'right' | 'center' | 'top left' | 'top right' | 'bottom left' | 'bottom right'; - -export default OakComponent({ - entity: 'extraFile', - isList: true, - projection: { - id: 1, - tag1: 1, - tag2: 1, - origin: 1, - bucket: 1, - objectId: 1, - filename: 1, - extra1: 1, - extension: 1, - type: 1, - entity: 1, - entityId: 1, - fileType: 1, - sort: 1, - isBridge: 1, - uploadState: 1, - }, - features: ['extraFile'], - formData({ data, features }) { - let files = data?.sort((ele1, ele2) => ele1.sort! - ele2.sort!); - if (this.props.tag1) { - files = files?.filter((ele) => ele?.tag1 === this.props.tag1); - } - if (this.props.tag2) { - files = files?.filter((ele) => ele?.tag2 === this.props.tag2); - } - - const files2 = files.map((ele) => { - const url = features.extraFile.getUrl(ele as ExtraFile); - const thumbUrl = features.extraFile.getUrl( - ele as ExtraFile, - this.props.style - ); - const fileName = features.extraFile.getFileName(ele as ExtraFile); - return { - url, - thumbUrl, - fileName, - ...ele, - } as EnhancedExtraFile; - }); - return { - files: files2, - }; - }, - data: { - // 根据 size 不同，计算的图片显示大小不同 - itemSizePercentage: '', - }, - wechatMp: { - externalClasses: ['oak-class', 'oak-item-class'], - }, - filters: [ - { - filter() { - const { tag1, tag2 } = this.props; - const filter1 = {}; - if (tag1) { - Object.assign(filter1, { tag1 }); - } - if (tag2) { - Object.assign(filter1, { tag2 }); - } - return filter1; - }, - }, - ], - properties: { - mode: 'aspectFit' as ImgMode, // 图片显示模式 - size: 3, // 每行可显示的个数 小程序独有 - disablePreview: false, // 图片是否可预览 - disableDownload: false, // 下载按钮隐藏 - tag1: '', - tag2: '', - entity: '' as keyof EntityDict, - entityId: '', - style: '', - }, - - methods: { - /** - * 获取组件内部节点位置信息（单个） - * @param component 组件实例 - * @param selector {String} css选择器 - * @returns boundingClientRect() 回调函数的值 - */ - async getNodeRectFromComponent(component: any, selector: any) { - return await new Promise((resolve) => { - component - .createSelectorQuery() - .select(selector) - .boundingClientRect((res: any) => { - resolve(res); - }) - .exec(); - }); - }, - /** - // * px 转 rpx - // * @param px 像素值 - // */ - px2rpx(px: number) { - const windowWidth = wx.getSystemInfoSync().windowWidth; - return (750 / windowWidth) * px; - }, - - async onPreviewByMp(event: WechatMiniprogram.Touch) { - const files = this.state.files as EnhancedExtraFile[]; - const { index } = event.currentTarget.dataset; - const imageUrl = files[index].url; - const urls = files?.filter((ele) => !!ele).map((ele) => ele.url); - // 预览图片 - if (!this.props.disablePreview) { - const result = await wx.previewImage({ - urls: urls, - current: imageUrl, - }); - } - }, - }, - listeners: { - async size(prev, next) { - if (process.env.OAK_PLATFORM === 'wechatMp') { - const size = next.size; - if (!size) { - this.setState({ itemSizePercentage: '' }); - return; - } - - // 获取 .file-list__container 容器宽度 - const res: any = await this.getNodeRectFromComponent( - this, - '.file-list__container' - ); - const widthRpx = this.px2rpx(res.right - res.left); - - // 根据容器宽度计算单张图片宽度百分比 - const itemSizePercentage = - (10 / size) * 10 - (20 / widthRpx) * 100 + '%;'; - this.setState({ - itemSizePercentage: itemSizePercentage, - }); - } - }, - }, -}) as ( - props: ReactComponentProps< - ED2, - T2, - true, - { - // 图片显示模式 - mode: ImgMode; - // 每行可显示的个数 - size: number; - // 图片是否可预览 - disablePreview: boolean; - // 下按按钮隐藏 - disableDownload: boolean; - tag1: string; - tag2: string; - entity: keyof ED2; - entityId: string; - style: string; - } - > -) => React.ReactElement; diff --git a/src/components/extraFile/gallery2/index.xml b/src/components/extraFile/gallery2/index.xml deleted file mode 100644 index c91229ea0..000000000 --- a/src/components/extraFile/gallery2/index.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/components/extraFile/gallery2/locales/zh_CN.json b/src/components/extraFile/gallery2/locales/zh_CN.json deleted file mode 100644 index 54b37f457..000000000 --- a/src/components/extraFile/gallery2/locales/zh_CN.json +++ /dev/null @@ -1,2 +0,0 @@ - -{} \ No newline at end of file diff --git a/src/components/extraFile/gallery2/web.module.less b/src/components/extraFile/gallery2/web.module.less deleted file mode 100644 index 7e36c4bf2..000000000 --- a/src/components/extraFile/gallery2/web.module.less +++ /dev/null @@ -1,3 +0,0 @@ -.container { - display: flex; -} \ No newline at end of file diff --git a/src/components/extraFile/gallery2/web.tsx b/src/components/extraFile/gallery2/web.tsx deleted file mode 100644 index 56358d1a2..000000000 --- a/src/components/extraFile/gallery2/web.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useState, useEffect, useCallback, useRef } from 'react'; - -import { Image, ImageViewer, Space } from 'antd-mobile'; -import classNames from 'classnames'; -import Style from './mobile.module.less'; -import { WebComponentProps } from 'oak-frontend-base'; -import { EntityDict } from '../../../oak-app-domain'; - -type ExtraFile = EntityDict['extraFile']['OpSchema']; - -interface EnhancedExtraFile extends ExtraFile { - url: string; - thumbUrl: string; - fileFullName: string; -} - -export default function render( - props: WebComponentProps< - EntityDict, - 'extraFile', - true, - { - files: EnhancedExtraFile[]; - style?: Record; - className?: string; - onDownload?: (file: EnhancedExtraFile) => void; - showUploadList?: boolean; - disableDownload?: boolean; - disablePreview?: boolean; - }, - {} - > -) { - const { - style, - className, - onDownload, - files = [], - disableDownload = false, - disablePreview = false, - } = props.data; - const { t } = props.methods; - const [visible, setVisible] = useState(false); - const imageViewerMultiRef = useRef(null); - - return ( - <> - - {files?.map((ele, index) => ( - { - setVisible(true); - (imageViewerMultiRef.current as any).swipeTo(index); - } : undefined} - /> - ))} - - - ele.url) || []} - visible={visible} - onClose={() => { - setVisible(false); - }} - /> - - ); -} diff --git a/src/components/extraFile/upload/index.ts b/src/components/extraFile/upload/index.ts index cbd6175ff..70c6dbafb 100644 --- a/src/components/extraFile/upload/index.ts +++ b/src/components/extraFile/upload/index.ts @@ -2,7 +2,7 @@ import { EntityDict } from '../../../oak-app-domain'; import { FileState } from '../../../features/extraFile'; import { EntityDict as BaseEntityDict } from 'oak-domain/lib/types/Entity'; import { ReactComponentProps } from 'oak-frontend-base/lib/types/Page'; -import { generateNewId } from 'oak-domain'; +import { generateNewId } from 'oak-domain/lib/utils/uuid'; import { assert } from 'oak-domain/lib/utils/assert'; type ExtraFile = EntityDict['extraFile']['OpSchema']; diff --git a/src/data/i18n.ts b/src/data/i18n.ts index ba280fafe..ab67047af 100644 --- a/src/data/i18n.ts +++ b/src/data/i18n.ts @@ -72,18 +72,6 @@ const i18ns: I18n[] = [ language: "zh-CN", module: "oak-general-business", position: "src/components/extraFile/gallery", - data: { - "waiting": "等待上传", - "success": "上传成功", - "uploading": "上传中" - } - }, - { - id: "d30e4a47c1d768d74efae1fade371595", - namespace: "oak-general-business-c-extraFile-gallery2", - language: "zh-CN", - module: "oak-general-business", - position: "src/components/extraFile/gallery2", data: {} }, { diff --git a/tsconfig.es.json b/tsconfig.es.json index 9775b199e..8a9721105 100644 --- a/tsconfig.es.json +++ b/tsconfig.es.json @@ -84,7 +84,7 @@ "**/*.spec.ts", "package.json", "tsconfig.json", - "tsconfig.es.json", + "tsconfig.lib.json", "package-lock.json", "test", "scripts" diff --git a/tsconfig.json b/tsconfig.json index efcf82476..74e2ea50d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -85,6 +85,7 @@ "package.json", "tsconfig.json", "tsconfig.es.json", + "tsconfig.lib.json", "package-lock.json", "test", "scripts"