agilebuilder-ui 1.0.0

package/packages/fs-upload/src/fs-upload-multi.vue

@@ -0,0 +1,458 @@
+<template>
+	<div v-loading="loading">
+		<el-button
+				v-if="isShowButton && !disabled"
+				:icon="ElIconUpload2"
+				size="default"
+				type="primary"
+				@click="selectDataFile"
+		>
+			{{ $t('fsUpload.upload') }}
+		</el-button>
+		<input
+				ref="uploadTemplate"
+				:accept="accepts"
+				name="uploadTemplate"
+				style="display: none"
+				type="file"
+				@change="upload"
+		/>
+		<div v-if="unifiedEnclosures && unifiedEnclosures.length > 0 && isShowData">
+			<div v-if="isImg">
+				<el-table
+						:data="unifiedEnclosures"
+						:height="tableHeight"
+						style="width: 100%"
+				>
+					<el-table-column :label="$t('fsUpload.name')" width="240">
+						<template v-slot="scope">
+							<el-link
+									:href="
+                  baseURL +
+                  '/common/fs-upload/download?serverPath=' +
+                  scope.row.uuid +
+                  '&showName=' +
+                  scope.row.fileName
+                "
+									type="primary"
+							>
+								{{ scope.row.fileName }}
+							</el-link>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('fsUpload.picture')" width="240">
+						<template v-slot="scope">
+							<el-image
+									:preview-src-list="[
+                  baseURL +
+                    '/common/fs-upload/download?serverPath=' +
+                    scope.row.uuid +
+                    '&showName=' +
+                    scope.row.fileName,
+                ]"
+									:src="
+                  baseURL +
+                  '/common/fs-upload/download?serverPath=' +
+                  scope.row.uuid +
+                  '&showName=' +
+                  scope.row.fileName
+                "
+									@click="bigPicture(scope.$index)"
+							/>
+						</template>
+					</el-table-column>
+					<el-table-column
+							v-if="!disabled"
+							:label="$t('fsUpload.operating')"
+							width="120"
+					>
+						<template v-slot="scope">
+							<el-button
+									size="default"
+									type="danger"
+									@click="deleteFile(scope.$index)"
+							>
+								{{ $t('fsUpload.delete') }}
+							</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</div>
+			<div v-else-if="isShowList">
+				<el-table
+						:data="unifiedEnclosures"
+						:height="tableHeight"
+						style="width: 100%"
+				>
+					<el-table-column :label="$t('fsUpload.name')" width="240">
+						<template v-slot="scope">
+							<el-link
+									:href="
+                  baseURL +
+                  '/common/fs-upload/download?serverPath=' +
+                  scope.row.uuid +
+                  '&showName=' +
+                  scope.row.fileName
+                "
+									type="primary"
+							>
+								{{ scope.row.fileName }}
+							</el-link>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('fsUpload.operating')" width="200">
+						<template v-slot="scope">
+							<el-button
+									v-if="!disabled"
+									size="default"
+									type="danger"
+									@click="deleteFile(scope.$index)"
+							>
+								{{ $t('fsUpload.delete') }}
+							</el-button>
+							<el-button size="default" @click="preview(scope.row)">
+								{{ $t('fsUpload.preview') }}
+							</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</div>
+			<div v-else>
+				<div v-for="(item, index) in unifiedEnclosures" :key="index">
+					<el-link
+							:href="
+              baseURL +
+              '/common/fs-upload/download?serverPath=' +
+              item.uuid +
+              '&showName=' +
+              item.fileName
+            "
+							type="primary"
+					>
+						{{ item.fileName }}
+					</el-link>
+					<el-tooltip :content="$t('fsUpload.delete')" effect="light">
+						<el-icon v-if="!disabled" style="color: red; margin-left: 10px" @click="deleteFile(index)"
+						>
+							<el-icon-delete
+							/>
+						</el-icon>
+					</el-tooltip>
+					<el-tooltip
+							:content="$t('fsUpload.preview')"
+							effect="light"
+							style="margin-left: 10px"
+					>
+						<el-icon @click="preview(item)">
+							<el-icon-view/>
+						</el-icon>
+					</el-tooltip>
+				</div>
+			</div>
+		</div>
+		<see-big-picture
+				v-if="bigPictureVisible"
+				:show-index="showIndex"
+				:unified-enclosures="unifiedEnclosures"
+				@close="bigPictureVisible = false"
+		/>
+	</div>
+</template>
+
+<script>
+import {
+	Delete as ElIconDelete,
+	View as ElIconView,
+	Upload as ElIconUpload2,
+} from '@element-plus/icons-vue'
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+import * as Vue from 'vue'
+import seeBigPicture from './see-big-picture.vue'
+import {getToken} from '../../../src/utils/auth'
+import {
+	isPlateSys,
+	getSystemFrontendUrl,
+} from '../../../src//utils//common-util.js'
+
+export default {
+	data() {
+		return {
+			unifiedEnclosures: [],
+			bigPictureVisible: false,
+			baseURL: '',
+			accepts: '',
+			showIndex: 0,
+			loading: '',
+			ElIconUpload2,
+		}
+	},
+	components: {
+		seeBigPicture,
+		ElIconDelete,
+		ElIconView,
+	},
+	name: 'FsUploadMulti',
+	props: {
+		/**
+		 * 系统编码
+		 */
+		systemCode: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * 上传限制的类型
+		 */
+		accept: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * 是否是图片
+		 */
+		isImg: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 针对多选情况
+		 * 是否显示拼接字符串
+		 * 如果未选择，直接显示表单
+		 */
+		isShowList: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * 针对图片类型
+		 * 具体参考element-ui中的图片参数fit属性
+		 */
+		fit: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * 禁止编辑
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 是否显示按钮
+		 */
+		isShowButton: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * 是否显示数据
+		 */
+		isShowData: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * 回传数据
+		 */
+		data: {
+			type: Array,
+			default: null,
+		},
+		/** 图片显示数量 */
+		imgSize: {
+			type: Number,
+			default: 0,
+		},
+		/** 设置附件的上传数量 */
+		fileSize: {
+			type: Number,
+			default: 0,
+		},
+		/** 设置table高度 */
+		tableHeight: {
+			type: String,
+			default: null,
+		},
+	},
+	created() {
+		this.baseURL = window.$vueApp.config.globalProperties.baseURL
+		if (this.data) {
+			this.unifiedEnclosures = this.data
+		}
+		this.judgeImg()
+	},
+	methods: {
+		// 预览图片
+		bigPicture(index) {
+			this.showIndex = index
+			this.bigPictureVisible = true
+		},
+		// 成功后返回数据
+		onSuccess() {
+			const data = this.unifiedEnclosures
+			$emit(this, 'onSuccess', data)
+		},
+		// 判断是否是图片格式，如果是限制只能上传图片
+		judgeImg() {
+			if (this.isImg) {
+				this.accepts = 'image/*'
+			} else {
+				if (this.accept) {
+					this.accepts = this.accept
+				}
+			}
+		},
+		selectDataFile() {
+			this.$refs.uploadTemplate.click()
+		},
+		deleteFile(index) {
+			this.deleteUuid = this.unifiedEnclosures[index].uuid
+			this.unifiedEnclosures.splice(index, 1)
+			this.deleteSuccess()
+		},
+		deleteSuccess() {
+			const data = this.unifiedEnclosures
+			$emit(this, 'deleteSuccess', this.deleteUuid, data)
+		},
+		// 预览
+		preview(row) {
+			if (window.$vueApp.config.globalProperties.isOffice) {
+				const jwt = getToken()
+				const map = {
+					fileName:
+							window.$vueApp.config.globalProperties.officeweb365Url +
+							'/common/fs-upload/download?serverPath=' +
+							row.uuid +
+							'&showName=' +
+							row.fileName +
+							'&jwt=' +
+							jwt,
+				}
+				const http = this.$http
+				http
+						.post(
+								window.$vueApp.config.globalProperties.baseURL +
+								'/common/fs-upload/des-encrypt',
+								map
+						)
+						.then((data) => {
+							window.open(window.$vueApp.config.globalProperties.isOffice + data)
+						})
+			} else {
+				let showName
+				const split = row.fileName.split('.')
+				if (
+						split[split.length - 1].toLowerCase() === 'xls' ||
+						split[split.length - 1].toLowerCase() === 'xlsx' ||
+						split[split.length - 1].toLowerCase() === 'csv'
+				) {
+					showName = split[0] + '.html'
+				} else {
+					showName = split[0] + '.pdf'
+				}
+				const token = getToken()
+				if (window.$vueApp.config.globalProperties.customPreviewUrl) {
+					window.open(
+							getSystemFrontendUrl(
+									window.$vueApp.config.globalProperties.portalUrl
+							) +
+							'/#/file-service/preview?serverPath=' +
+							row.uuid +
+							'&showName=' +
+							encodeURI(row.fileName),
+							showName
+					)
+				} else {
+					const myShowName = row.fileName
+					const uuid = row.uuid
+					let baseUrl = window.$vueApp.config.globalProperties.baseURL
+					if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+						baseUrl = window.$vueApp.config.globalProperties.baseAPI
+					}
+					let previewUrl
+					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, showName)
+				}
+			}
+		},
+		// 上传
+		upload(params) {
+			let message
+			if (this.fileSize) {
+				if (
+						this.fileSize !== 0 &&
+						this.unifiedEnclosures.length >= this.fileSize
+				) {
+					message =
+							this.$t('fsUpload.theNumberOfUploadsExceedsTheLimitTheLimitIs') +
+							'：' +
+							this.fileSize
+				}
+			}
+
+			if (!message) {
+				this.loading = true
+				const param = new FormData()
+				param.append('file', this.$refs.uploadTemplate.files[0])
+				const http = this.$http
+				http.headers = "'Content-Type': 'multipart/form-data'"
+				http
+						.post(
+								window.$vueApp.config.globalProperties.baseURL +
+								'/common/fs-upload/upload-template/' +
+								this.systemCode,
+								param,
+								{headers: {'Content-Type': 'multipart/form-data'}}
+						)
+						.then((data) => {
+							this.unifiedEnclosures.push(data)
+							params.target.value = ''
+							console.log('data', data)
+							this.judgeImg()
+							console.log(' this.unifiedEnclosures', this.unifiedEnclosures)
+							this.onSuccess()
+							this.$message({
+								showClose: true,
+								type: 'success',
+								message: this.$t('fsUpload.uploadSucceeded'),
+							})
+							this.loading = false
+						})
+						.catch(() => {
+							params.target.value = ''
+							this.loading = false
+						})
+			} else {
+				params.target.value = ''
+				this.$message({
+					showClose: true,
+					type: 'warning',
+					message: message,
+				})
+			}
+		},
+	},
+	emits: ['onSuccess', 'deleteSuccess'],
+}
+</script>