agilebuilder-ui 1.0.0

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

@@ -0,0 +1,539 @@
+<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"
+					/>
+				</template>
+			</el-input>
+
+			<el-dialog
+					v-model="annexUploadFlag"
+					:append-to-body="true"
+					:show-close="true"
+					:title="$t('imatrixUIMessage.tips')"
+					width="40%"
+			>
+				<el-upload
+						id="upload"
+						:auto-upload="false"
+						:on-change="uploadFile"
+						:show-file-list="false"
+						action
+				>
+					<el-button size="default" type="primary"> 选择文件</el-button>
+					<template v-slot:tip>
+            <span class="el-upload__tip" style="margin-left: 12px">
+              上传文件不能超过{{ fileSetObj.limitFileSize }}M
+              <span v-if="fileSetObj.accept"
+              >，并且只接受{{ fileSetObj.accept }}类型文件</span
+              >
+            </span>
+					</template>
+				</el-upload>
+				<br/>
+				<el-row v-for="(file, index) in uploadingFile" :key="index">
+					<el-tag size="small form-list-file">
+            <span>
+              <el-icon><el-icon-paperclip/></el-icon>
+              <span style="margin-left: 6.5px">{{ file.name }}</span>
+            </span>
+
+						<el-tooltip content="取消上传" effect="light" placement="right">
+							<el-icon style="margin-left: 8px" @click="cancelUpload(file.serverName)">
+								<el-icon-close/>
+							</el-icon>
+						</el-tooltip>
+					</el-tag>
+					<el-progress :percentage="file.uploadProgress"/>
+				</el-row>
+				<div style="line-height:30px;">
+					<el-row>
+						<el-col>
+							<el-tag
+									v-for="(file, index) in fileContent"
+									:key="index"
+									size="small form-list-file"
+							>
+                <span @click="preview(file.name, file.serverName)">
+                  <el-icon><el-icon-paperclip/></el-icon>
+                  <span style="margin-left: 6.5px">{{ file.name }}</span>
+                </span>
+								<el-tooltip
+										content="移除已上传文件"
+										effect="light"
+										placement="right"
+								>
+									<el-icon style="margin-left: 8px" @click="handleOnRemove(index,file)">
+										<el-icon-close/>
+									</el-icon>
+								</el-tooltip>
+							</el-tag>
+						</el-col>
+					</el-row>
+				</div>
+			</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
+						: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 {
+	Paperclip as ElIconPaperclip,
+	Close as ElIconClose,
+	View as ElIconView,
+	Delete as ElIconDelete,
+	Upload as ElIconUpload2,
+} from '@element-plus/icons-vue'
+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: [],
+			// /
+			// 正在上传的文件
+			uploadingFile: [],
+			cancelUploadFile: [],
+			fileContent: [],
+			// 定义5M为一片
+			chunkSize: 5 * 1024 * 1024,
+			ElIconUpload2,
+		}
+	},
+	components: {
+		FsPreview,
+		ElIconPaperclip,
+		ElIconClose,
+		ElIconView,
+		ElIconDelete,
+	},
+	name: 'MultipartUploadList',
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+		entity: {
+			type: Object,
+			default: null,
+		},
+		fileSetObj: {
+			type: Object,
+			default: () => {
+				return {limitFileSize: 10, multiple: false, accept: null}
+			},
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	created() {
+	},
+	mounted() {
+		if (!this.fileSetObj.limitFileSize) {
+			this.fileSetObj.limitFileSize = 10
+		}
+		const name = this.entity[this.fileSetObj.showNameData.dbName]
+		const serverName = this.entity[this.fileSetObj.serverNameData.dbName]
+		if (name && serverName) {
+			const nameArr = name.split(',')
+			const serverNameArr = serverName.split(',')
+			nameArr.forEach((element, index) => {
+				this.fileContent.push({
+					name: element,
+					serverName: serverNameArr[index],
+				})
+				const token = getToken()
+				let url =
+						window.$vueApp.config.globalProperties.baseURL +
+						'/common/super-form/downloads?jwt=' +
+						token
+				if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+					url =
+							window.$vueApp.config.globalProperties.baseAPI +
+							'/component/super-form/downloads?jwt=' +
+							token
+				}
+				const src =
+						url +
+						'&showName=' +
+						encodeURI(element) +
+						'&serverPath=' +
+						serverNameArr[index]
+				this.showFileList.push({
+					showName: element,
+					serverPath: serverNameArr[index],
+					src: src,
+				})
+			})
+		}
+	},
+	methods: {
+		openAnnexUpload() {
+			this.annexUploadFlag = true
+		},
+		// //////
+		async uploadFile(res) {
+			if (this.uploadingFile.length > 0 && !this.fileSetObj.multiple) {
+				this.$message({
+					showClose: true,
+					message: '文件单选，请勿同时上传多份文件!',
+					type: 'warning',
+				})
+				return
+			}
+			// 占位 ,防止分片初始化未完成又选择文件上传
+			const uploadTimestamp = Date.now()
+			this.uploadingFile.push({
+				name: res.raw.name,
+				uploadProgress: 0,
+				serverName: uploadTimestamp,
+			})
+			// 获取用户选择的文件
+			const file = res.raw
+			const fileSize = file.size
+			// 计算当前选择文件需要的分片数量
+			const chunkCount = Math.ceil(fileSize / this.chunkSize)
+			console.log(
+					'文件大小：',
+					file.size / 1024 / 1024 + 'Mb',
+					'分片数：',
+					chunkCount
+			)
+			console.log('向后端请求本次分片上传初始化')
+			const requestData = {fileName: file.name, chunkCount: chunkCount}
+			// 向后端请求本次分片上传初始化
+
+			this.$http
+					.post(
+							window.$vueApp.config.globalProperties.baseURL +
+							'/common/mutipart-upload/create',
+							requestData
+					)
+					.then(async (res) => {
+						console.log(this.cancelUploadFile, 'sssssssssssss')
+						if (this.cancelUploadFile.indexOf(requestData.serverName) > 0) {
+							return
+						}
+						const currentUploadInex = this.uploadingFile.findIndex(
+								(item) => item.serverName === uploadTimestamp
+						)
+						const serverName = res.serverName
+						this.uploadingFile[currentUploadInex] = {
+							uploadProgress: 0,
+							name: file.name,
+							serverName: serverName,
+							folder: res.folder,
+						}
+						console.log(this.uploadingFile, 'uploadingFile')
+						const chunkNames = []
+						for (let i = 0; i < chunkCount; i++) {
+							// 分片开始位置
+							const start = i * this.chunkSize
+							// 分片结束位置
+							const end = Math.min(fileSize, start + this.chunkSize)
+							// 取文件指定范围内的byte，从而得到分片数据
+							const _chunkFile = file.slice(start, end)
+							console.log(
+									'开始上传第' + (i + 1) + '个分片' + ',共' + chunkCount + '个'
+							)
+							const formData = new FormData()
+							formData.append('folder', res.folder)
+							formData.append('serverName', serverName)
+							formData.append('file', _chunkFile)
+							if (this.cancelUploadFile.indexOf(serverName) > 0) {
+								break
+							} else {
+								await this.$http
+										.post(
+												window.$vueApp.config.globalProperties.baseURL +
+												'/common/mutipart-upload/upload',
+												formData
+										)
+										.then((uploadPieceRes) => {
+											chunkNames.push(uploadPieceRes.uploadName)
+											const uploadProgress = parseInt(((i + 1) / chunkCount) * 100)
+											this.uploadingFile[currentUploadInex].uploadProgress =
+													uploadProgress > 100 ? 100 : uploadProgress
+											this.uploadingFile[currentUploadInex] =
+													this.uploadingFile[currentUploadInex]
+											console.log(
+													'第' + (i + 1) + '个分片上传完成',
+													this.uploadingFile
+											)
+										})
+							}
+						}
+						if (this.cancelUploadFile.indexOf(serverName) < 0) {
+							// 请求后端合并文件
+							this.composeFile(
+									file.name,
+									chunkCount,
+									fileSize,
+									serverName,
+									chunkNames,
+									res.folder
+							)
+						} else {
+							await this.$http
+									.post(
+											window.$vueApp.config.globalProperties.baseURL +
+											'/common/mutipart-upload/remove-chunks',
+											{serverName: serverName, folder: res.folder}
+									)
+									.then((uploadPieceRes) => {
+										console.log('取消上传，并移除已上传的文件碎片')
+									})
+						}
+					})
+		},
+		/**
+		 * 请求后端合并文件
+		 * @param serverName
+		 * @param fileName
+		 */
+		composeFile(fileName, chunkSize, fileSize, serverName, chunkNames, folder) {
+			const data = {
+				fileName: fileName, // 文件名称
+				chunkSize: chunkSize, // 分片数量
+				fileSize: fileSize, // 文件大小byte
+				serverName: serverName, // serverName
+				chunkNames: chunkNames, // 上传分片的编号
+				folder: folder,
+			}
+			console.log(data, '开始请求后端合并文件')
+			this.$http
+					.post(
+							window.$vueApp.config.globalProperties.baseURL +
+							'/common/mutipart-upload/merge',
+							data
+					)
+					.then((res) => {
+						this.uploadingFile.splice(
+								this.uploadingFile.findIndex(
+										(item) => item.serverName === serverName
+								),
+								1
+						)
+						if (this.fileSetObj.multiple) {
+							this.fileContent.push({name: fileName, serverName: serverName})
+							const currentShowName =
+									this.entity[this.fileSetObj.showNameData.dbName]
+							if (currentShowName && currentShowName.length > 0) {
+								this.setEntityValue(
+										currentShowName + ',' + fileName,
+										this.entity[this.fileSetObj.serverNameData.dbName] +
+										',' +
+										serverName
+								)
+							} else {
+								this.setEntityValue(fileName, serverName)
+							}
+						} else {
+							this.fileContent = [{name: fileName, serverName: serverName}]
+							this.setEntityValue(fileName, serverName)
+						}
+						// this.$emit('sendFileObjToParent', res.data)// 传递给父组件请求结果
+						console.log('合并文件完成', res, this.entity)
+					})
+		},
+		setEntityValue(fileName, serverName) {
+			this.entity[this.fileSetObj.showNameData.dbName] = fileName
+			this.entity[this.fileSetObj.serverNameData.dbName] = serverName
+		},
+		cancelUpload(serverName) {
+			this.entity['DOC_NAME'] = null
+			this.entity['DOC_PATH'] = null
+			this.cancelUploadFile.push(serverName)
+			this.uploadingFile.splice(
+					this.uploadingFile.findIndex((item) => item.serverName === serverName),
+					1
+			)
+		},
+		preview(name, serverName) {
+			if (isImage(name)) {
+				this.previewImageInfo = {
+					src:
+							window.$vueApp.config.globalProperties.baseURL +
+							'/common/super-form/downloads?jwt=' +
+							getToken() +
+							'&showName=' +
+							name +
+							'&serverPath=' +
+							serverName,
+				}
+				this.showPreviewSingleImage = true
+			} else {
+				this.previewDoc(name, serverName)
+			}
+		},
+		previewDoc(name, serverName) {
+			const token = getToken()
+			if (window.$vueApp.config.globalProperties.customPreviewUrl) {
+				window.open(
+						getSystemFrontendUrl(
+								window.$vueApp.config.globalProperties.portalUrl
+						) +
+						'/#/file-service/preview?serverPath=' +
+						serverName +
+						'&showName=' +
+						encodeURI(name),
+						name
+				)
+			} else {
+				let previewUrl
+				const myShowName = name
+				const uuid = serverName
+				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)
+			}
+		},
+		handleOnRemove(index) {
+			this.fileContent.splice(index, 1)
+			if (this.fileSetObj.multiple) {
+				const nameArr = []
+				const serverNameArr = []
+				this.fileContent.forEach((element) => {
+					if (element.name && element.serverName) {
+						nameArr.push(element.name)
+						serverNameArr.push(element.serverName)
+					}
+				})
+				this.setEntityValue(nameArr.join(','), serverNameArr.join(','))
+			} else {
+				this.setEntityValue(null, null)
+			}
+		},
+	},
+	emits: ['close', 'update:value', 'update:value'],
+}
+</script>

package/packages/organization-input/index.js

@@ -0,0 +1,6 @@
+import OrganizationInput from './src/organization-input.vue'
+OrganizationInput.install = function (Vue) {
+  Vue.component(OrganizationInput.name, OrganizationInput)
+}
+
+export default OrganizationInput