agilebuilder-ui 1.0.0

package/packages/multipart-upload/src/multipart-upload-form.vue

@@ -0,0 +1,395 @@
+<template>
+	<div>
+		<template v-if="!disabled">
+			<el-input
+					ref="item"
+					:disabled="disabled"
+					:model-value="value"
+					:placeholder="$t('imatrixUIMessage.fileUpload')"
+					:readonly="true"
+			>
+				<template v-slot:append>
+					<el-button
+							v-if="!disabled"
+							:icon="ElIconUpload2"
+							size="default"
+							@click="openAnnexUpload"
+					/>
+					<el-button :icon="ElIconZoomIn" size="default" @click="preview"/>
+				</template>
+			</el-input>
+
+			<el-dialog
+					v-model="annexUploadFlag"
+					:append-to-body="true"
+					:show-close="true"
+					:title="$t('imatrixUIMessage.tips')"
+					width="30%"
+			>
+				<el-upload
+						v-if="annexUploadFlag"
+						:accept="fileSetObj.accept ? fileSetObj.accept : null"
+						:action="defaultAction"
+						:before-upload="handleBeforeUpload"
+						:headers="headers"
+						:on-success="uploadOnSuccess"
+						:with-credentials="true"
+						name="file"
+				>
+					<el-button>{{ $t('imatrixUIMessage.upload') }}</el-button>
+				</el-upload>
+			</el-dialog>
+			<el-dialog
+					v-model="showPreviewSingleImage"
+					:append-to-body="true"
+					:show-close="true"
+					:title="$t('imatrixUIPublicModel.previewImage')"
+					@close="$emit('close')"
+			>
+				<template v-slot:title>
+          <span
+          >{{ $t('imatrixUIPublicModel.previewImage') }}
+	          <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+	          <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+          </span>
+				</template>
+				<el-image
+						v-if="previewImageInfo && previewImageInfo.isImg"
+						:preview-src-list="[previewImageInfo.src]"
+						:src="previewImageInfo.src"
+				/>
+			</el-dialog>
+			<el-dialog
+					v-model="showPreviewMulti"
+					:append-to-body="true"
+					:show-close="true"
+					:title="$t('imatrixUIPublicModel.preview')"
+					width="30%"
+					@close="$emit('close')"
+			>
+				<template v-slot:title>
+          <span
+          >{{ $t('imatrixUIPublicModel.preview') }}
+	          <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+	          <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+          </span>
+				</template>
+				<el-table :data="showFileList" :show-header="false">
+					<el-table-column prop="showName" width="300"/>
+					<el-table-column align="right">
+						<template v-slot="scope">
+							<el-tooltip
+									:content="$t('imatrixUIPublicModel.preview')"
+									class="item"
+									effect="dark"
+									placement="top"
+							>
+								<el-icon style="cursor: pointer" @click="previewSingle(scope.row)">
+									<el-icon-view/>
+								</el-icon>
+							</el-tooltip>
+						</template>
+					</el-table-column>
+					<el-table-column v-if="!disabled">
+						<template v-slot="scope">
+							<el-tooltip
+									:content="$t('imatrixUIPublicModel.delete')"
+									class="item"
+									effect="dark"
+									placement="top"
+							>
+								<el-icon style="cursor: pointer" @click="deleteRow(scope.$index)">
+									<el-icon-delete/>
+								</el-icon>
+							</el-tooltip>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-dialog>
+		</template>
+		<template v-else>
+			<fs-preview :file-list="showFileList" :label="value"/>
+		</template>
+	</div>
+</template>
+
+<script>
+import {
+	View as ElIconView,
+	Delete as ElIconDelete,
+	Upload as ElIconUpload2,
+	ZoomIn as ElIconZoomIn,
+} from '@element-plus/icons-vue'
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+
+import {getToken} from '../../../src/utils/auth'
+import {isImage} from '../../../src/utils/util'
+import {
+	isPlateSys,
+	getSystemFrontendUrl,
+} from '../../../src/utils/common-util'
+import * as Vue from 'vue'
+import FsPreview from '../../fs-preview/src/fs-preview.vue'
+
+export default {
+	data() {
+		const headers = {Authorization: getToken()}
+		let defaultAction =
+				window.$vueApp.config.globalProperties.baseURL + '/common/fs-upload'
+		if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+			defaultAction =
+					window.$vueApp.config.globalProperties.baseAPI +
+					'/component/super-form/uploads'
+		}
+		return {
+			deleteUuids: [],
+			headers,
+			defaultAction,
+			annexUploadFlag: false,
+			showPreviewSingleImage: false,
+			showPreviewMulti: false,
+			lastFileName: null,
+			previewImageInfo: {},
+			showFileList: this.fileList,
+			ElIconUpload2,
+			ElIconZoomIn,
+		}
+	},
+	components: {
+		FsPreview,
+		ElIconView,
+		ElIconDelete,
+	},
+	name: 'MultipartUploadForm',
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+		// name  ','分隔的名称 和serverPath
+		fileInfo: {
+			type: Object,
+			default: () => {
+				return {
+					name: null,
+					serverPath: null,
+				}
+			},
+		},
+		fileSetObj: {
+			type: Object,
+			default: () => {
+				return {limitFileSize: 30, multiple: false, accept: null}
+			},
+		},
+		customViewUrl: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		uploadAble: {
+			type: Boolean,
+			default: true,
+		},
+		deletaAble: {
+			type: Boolean,
+			default: true,
+		},
+		// 文件详细消息
+		fileList: {
+			type: Array,
+			default: () => {
+				return []
+			},
+		},
+	},
+	created() {
+	},
+	mounted() {
+		this.getFileList()
+	},
+	methods: {
+		openAnnexUpload() {
+			this.annexUploadFlag = true
+		},
+		handleBeforeUpload(file) {
+			let limitFileSize = this.fileSetObj.limitFileSize
+			if (limitFileSize === undefined) {
+				// 默认是30M
+				limitFileSize = 30
+			}
+			if (file.size > limitFileSize * 1024 * 1024) {
+				// 超过最大限制
+				this.$message({
+					type: 'warning',
+					message: this.$t('imatrixUIMessage.exceedFileSize', {
+						fileSize: limitFileSize,
+					}),
+					showClose: true,
+				})
+				// 返回false停止上传
+				return false
+			}
+		},
+		// 上传成功
+		uploadOnSuccess(response, file) {
+			if (response) {
+				$emit(this, 'upload-success', {
+					showName: response.name,
+					serverPath: response.serverPath,
+				})
+				if (this.fileSetObj.multiple) {
+					if (this.fileInfo.showName) {
+						const nameArr = this.fileInfo.showName.split(',')
+						const serverPathArr = this.fileInfo.serverPath.split(',')
+						nameArr.push(response.name)
+						serverPathArr.push(response.serverPath)
+						this.fileInfo.showName = nameArr.join(',')
+						this.fileInfo.serverPath = serverPathArr.join(',')
+					} else {
+						this.fileInfo.showName = response.name
+						this.fileInfo.serverPath = response.serverPath
+					}
+				} else {
+					this.fileInfo.showName = response.name
+					this.fileInfo.serverPath = response.serverPath
+				}
+			}
+			this.annexUploadFlag = false
+		},
+		preview() {
+			this.getFileList()
+			this.showPreviewMulti = true
+		},
+		previewSingle(file) {
+			if (isImage(file.showName)) {
+				this.previewImageInfo = file
+				this.showPreviewSingleImage = true
+			} else {
+				this.previewDoc(file)
+			}
+		},
+		getFileList() {
+			if (!this.customViewUrl) {
+				const nameArr = this.fileInfo.showName.split(',')
+				const serverPath = this.fileInfo.serverPath.split(',')
+				if (
+						nameArr.length === 0 ||
+						serverPath.length === 0 ||
+						nameArr.length !== serverPath.length
+				) {
+					return
+				}
+				const fileList = []
+				const url =
+						window.$vueApp.config.globalProperties.baseURL +
+						'/common/super-form/downloads?jwt=' +
+						getToken()
+				for (let index = 0; index < nameArr.length; index++) {
+					const tempName = nameArr[index]
+					if (tempName && serverPath[index]) {
+						const standardFile = {
+							showName: tempName,
+							serverPath: serverPath[index],
+							src:
+									url +
+									'&showName=' +
+									tempName +
+									'&serverPath=' +
+									serverPath[index],
+						}
+						if (isImage(tempName)) {
+							standardFile.isImg = true
+						} else {
+							standardFile.isImg = false
+						}
+						fileList.push(standardFile)
+					}
+				}
+				this.showFileList = fileList
+			} else {
+				this.showFileList = this.fileList
+			}
+		},
+		previewDoc(file) {
+			const token = getToken()
+			if (window.$vueApp.config.globalProperties.customPreviewUrl) {
+				window.open(
+						getSystemFrontendUrl(
+								window.$vueApp.config.globalProperties.portalUrl
+						) +
+						'/#/file-service/preview?serverPath=' +
+						file.serverPath +
+						'&showName=' +
+						encodeURI(file.showName),
+						file.showName
+				)
+			} else {
+				let previewUrl
+				const myShowName = file.showName
+				const uuid = file.serverPath
+				let baseUrl = window.$vueApp.config.globalProperties.baseURL
+				if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+					baseUrl = window.$vueApp.config.globalProperties.baseAPI
+				}
+				if (window.$vueApp.config.globalProperties.kkFileViewUrl) {
+					const originUrl = baseUrl + '/common/super-form/downloads?jwt=' + token+
+						'&showName=' +
+						encodeURI(myShowName) +
+						'&serverPath=' +
+						uuid
+					//要预览文件的访问地址
+					const myPreviewUrl = originUrl + '&fullfilename='+myShowName
+					// http://127.0.0.1:8012/onlinePreview
+					previewUrl = window.$vueApp.config.globalProperties.kkFileViewUrl+'?url='+encodeURIComponent(Base64.encode(myPreviewUrl))
+				} else {
+					previewUrl =
+					baseUrl +
+					'/common/fs-upload/preview?jwt=' +
+					token
+					previewUrl = previewUrl +
+						'&showName=' +
+						encodeURI(myShowName) +
+						'&serverPath=' +
+						uuid
+				}
+				window.open(previewUrl, myShowName)
+			}
+		},
+		deleteRow(index) {
+			const deleteFile = this.showFileList[index]
+			// this.fileList.splice(index, 1)
+			const nameArr = []
+			const pathArr = []
+			for (let i = 0; i < this.showFileList.length; i++) {
+				if (i !== index) {
+					nameArr.push(this.showFileList[i].showName)
+					pathArr.push(this.showFileList[i].serverPath)
+				}
+			}
+			this.fileInfo.showName = nameArr.join(',')
+			this.fileInfo.serverPath = pathArr.join(',')
+			this.getFileList()
+			$emit(this, 'delete-success', {
+				deleteFile: deleteFile,
+				all: this.showFileList,
+			})
+			$emit(this, 'delete', this.showFileList, index)
+		},
+	},
+	emits: [
+		'close',
+		'upload-success',
+		'delete-success',
+		'delete',
+		'update:value',
+		,
+		'close',
+		,
+		'update:value',
+	],
+}
+</script>