agilebuilder-ui 1.0.0

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

@@ -0,0 +1,365 @@
+<template>
+	<div v-loading="loading">
+		<div
+				v-if="
+        unifiedEnclosure &&
+        unifiedEnclosure.uuid &&
+        unifiedEnclosure.fileName &&
+        isShowData
+      "
+		>
+			<el-image
+					v-if="isImg"
+					:fit="fit"
+					:preview-src-list="[
+          baseURL +
+            '/common/fs-upload/download?serverPath=' +
+            unifiedEnclosure.uuid +
+            '&showName=' +
+            unifiedEnclosure.fileName,
+        ]"
+					:src="
+          baseURL +
+          '/common/fs-upload/download?serverPath=' +
+          unifiedEnclosure.uuid +
+          '&showName=' +
+          unifiedEnclosure.fileName
+        "
+					@click="bigPicture"
+			/>
+			<el-link
+					v-else
+					:href="
+          baseURL +
+          '/common/fs-upload/download?serverPath=' +
+          unifiedEnclosure.uuid +
+          '&showName=' +
+          unifiedEnclosure.fileName
+        "
+					type="primary"
+			>
+				{{ unifiedEnclosure.fileName }}
+			</el-link>
+			<el-tooltip :content="$t('fsUpload.download')" effect="light">
+				<el-link
+						v-if="isImg"
+						:href="
+            baseURL +
+            '/common/fs-upload/download?serverPath=' +
+            unifiedEnclosure.uuid +
+            '&showName=' +
+            unifiedEnclosure.fileName
+          "
+						type="primary"
+				>
+					<el-icon style="margin-left: 10px; font-size: 30px"
+					>
+						<el-icon-download
+						/>
+					</el-icon>
+				</el-link>
+			</el-tooltip>
+			<el-tooltip :content="$t('fsUpload.delete')" effect="light">
+				<el-icon v-if="!disabled" style="color: red; margin-left: 10px; font-size: 30px" @click="deleteFile"
+				>
+					<el-icon-delete
+					/>
+				</el-icon>
+			</el-tooltip>
+			<el-tooltip
+					:content="$t('fsUpload.preview')"
+					effect="light"
+					style="margin-left: 10px; font-size: 30px"
+			>
+				<el-icon v-if="!isImg" @click="preview">
+					<el-icon-view/>
+				</el-icon>
+			</el-tooltip>
+		</div>
+		<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"
+		/>
+		<see-big-picture
+				v-if="bigPictureVisible"
+				:show-index="showIndex"
+				:unified-enclosures="data"
+				@close="bigPictureVisible = false"
+		/>
+	</div>
+</template>
+
+<script>
+import {
+	Delete as ElIconDelete,
+	Download as ElIconDownload,
+	Upload as ElIconUpload2,
+	View as ElIconView,
+} from '@element-plus/icons-vue'
+import {$emit} from '../../utils/gogocodeTransfer'
+import Cookies from 'js-cookie'
+import seeBigPicture from './see-big-picture.vue'
+import {getSystemFrontendUrl, isPlateSys,} from '../../../src/utils/common-util.js'
+import {getToken} from '../../../src/utils/auth'
+
+export default {
+	data() {
+		return {
+			unifiedEnclosure: {
+				uuid: '',
+				fileName: '',
+			},
+			loading: '',
+			baseURL: '',
+			showIndex: 0,
+			accepts: '',
+			deleteUuid: '',
+			bigPictureVisible: false,
+			ElIconUpload2,
+		}
+	},
+	components: {
+		seeBigPicture,
+		ElIconDownload,
+		ElIconDelete,
+		ElIconView,
+	},
+	name: 'FsUploadSingle',
+	props: {
+		/**
+		 * 系统编码
+		 */
+		systemCode: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * 上传限制的类型
+		 */
+		accept: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * 是否是图片
+		 */
+		isImg: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 针对图片类型
+		 */
+		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,
+		},
+	},
+	created() {
+		this.baseURL = window.$vueApp.config.globalProperties.baseURL
+		if (this.data) {
+			this.unifiedEnclosure = this.data[0]
+		}
+		if (this.accept) {
+			this.accepts = this.accept
+		} else {
+			if (this.isImg) {
+				this.accepts = 'image/*'
+			}
+		}
+	},
+	methods: {
+		bigPicture() {
+			this.bigPictureVisible = true
+		},
+		deleteFile() {
+			this.deleteUuid = this.unifiedEnclosure.uuid
+			this.unifiedEnclosure = null
+			this.deleteSuccess()
+		},
+		deleteSuccess() {
+			if (this.unifiedEnclosure) {
+				const data = [this.unifiedEnclosure]
+				$emit(this, 'deleteSuccess', this.deleteUuid, data)
+			} else {
+				$emit(this, 'deleteSuccess', this.deleteUuid)
+			}
+		},
+		acceptService() {
+			if (this.isImg) {
+				return 'image/*'
+			} else {
+				return null
+			}
+		},
+		selectDataFile() {
+			this.$refs.uploadTemplate.click()
+		},
+		onSuccess() {
+			if (this.unifiedEnclosure) {
+				const data = [this.unifiedEnclosure]
+				$emit(this, 'onSuccess', data, this.deleteUuid)
+			} else {
+				$emit(this, 'onSuccess', null, this.deleteUuid)
+			}
+		},
+		preview() {
+			if (window.$vueApp.config.globalProperties.isOffice) {
+				const jwt = Cookies.get('JWT')
+				const map = {
+					fileName:
+							window.$vueApp.config.globalProperties.officeweb365Url +
+							'/common/fs-upload/download?serverPath=' +
+							this.unifiedEnclosure.uuid +
+							'&showName=' +
+							this.unifiedEnclosure.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 = this.unifiedEnclosure.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=' +
+							this.unifiedEnclosure.uuid +
+							'&showName=' +
+							encodeURI(this.unifiedEnclosure.fileName),
+							showName
+					)
+				} else {
+					const myShowName = this.unifiedEnclosure.fileName
+					const uuid = this.unifiedEnclosure.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) {
+			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'"
+			if (this.unifiedEnclosure) {
+				this.deleteUuid = this.unifiedEnclosure.uuid
+			}
+			http
+					.post(
+							window.$vueApp.config.globalProperties.baseURL +
+							'/common/fs-upload/upload-template/' +
+							this.systemCode,
+							param,
+							{headers: {'Content-Type': 'multipart/form-data'}}
+					)
+					.then((data) => {
+						this.unifiedEnclosure = data
+						params.target.value = ''
+						console.log('data', data)
+						console.log(' this.unifiedEnclosure', this.unifiedEnclosure)
+						this.onSuccess()
+						this.loading = false
+						this.$message({
+							showClose: true,
+							type: 'success',
+							message: this.$t('fsUpload.uploadSucceeded'),
+						})
+					})
+					.catch(() => {
+						params.target.value = ''
+						this.loading = false
+					})
+		},
+	},
+	emits: ['deleteSuccess', 'onSuccess'],
+}
+</script>

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

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <fs-upload-multi
+      v-if="multiple"
+      :system-code="systemCode"
+      :accept="accept"
+      :is-img="isImg"
+      :is-show-list="isShowList"
+      :fit="fit"
+      :disabled="disabled"
+      :is-show-button="isShowButton"
+      :is-show-data="isShowData"
+      :data="data"
+      :img-size="imgSize"
+      :file-size="fileSize"
+      :table-height="tableHeight"
+      @onSuccess="onSuccess"
+      @deleteSuccess="deleteSuccess"
+    />
+    <fs-upload-single
+      v-if="!multiple"
+      :system-code="systemCode"
+      :accept="accept"
+      :is-img="isImg"
+      :fit="fit"
+      :disabled="disabled"
+      :is-show-button="isShowButton"
+      :is-show-data="isShowData"
+      :data="data"
+      @onSuccess="onSuccess"
+      @deleteSuccess="deleteSuccess"
+    />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import fsUploadMulti from './fs-upload-multi.vue'
+import fsUploadSingle from './fs-upload-single.vue'
+import * as Vue from 'vue'
+export default {
+  name: 'FsUpload',
+  components: {
+    fsUploadMulti,
+    fsUploadSingle,
+  },
+  props: {
+    /**
+     * 系统编码
+     */
+    systemCode: {
+      type: String,
+      default: null,
+    },
+    /**
+     * 上传限制的类型
+     */
+    accept: {
+      type: String,
+      default: null,
+    },
+    /**
+     * 是否是图片
+     */
+    isImg: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否多选
+     */
+    multiple: {
+      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,
+    },
+    isDelete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      deleteUuids: [],
+    }
+  },
+  created() {},
+  methods: {
+    onSuccess(data, deleteUuid) {
+      console.log('data', data)
+      console.log('deleteUuid', deleteUuid)
+
+      if (this.isDelete && deleteUuid) {
+        this.deleteFile(deleteUuid)
+        $emit(this, 'onSuccess', data)
+      } else {
+        if (deleteUuid) {
+          this.deleteUuids.push(deleteUuid)
+        }
+        $emit(this, 'onSuccess', data)
+      }
+    },
+    deleteSuccess(deleteUuid, data) {
+      console.log('deleteUuid', deleteUuid)
+      console.log('data', data)
+      if (this.isDelete) {
+        this.deleteFile(deleteUuid)
+        $emit(this, 'deleteSuccess', data)
+      } else {
+        if (deleteUuid) {
+          this.deleteUuids.push(deleteUuid)
+        }
+        $emit(this, 'deleteSuccess', data)
+      }
+    },
+    deleteFile(deleteUuid) {
+      const http = this.$http
+      const list = [deleteUuid]
+      http
+        .delete(
+          window.$vueApp.config.globalProperties.baseURL + '/common/fs-upload',
+          { data: list }
+        )
+        .then((data) => {})
+    },
+    getdeleteUuIds() {
+      return this.deleteUuids
+    },
+  },
+  emits: ['onSuccess', 'deleteSuccess'],
+}
+</script>

package/packages/fs-upload/src/see-big-picture.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    model-value
+    append-to-body
+    @close="$emit('close')"
+  >
+    <el-carousel
+      style="width: 100%"
+      height="600px"
+      :autoplay="false"
+      indicator-position="outside"
+      :initial-index="displayIndex"
+    >
+      <el-carousel-item
+        v-for="(item, index) in unifiedEnclosures"
+        :key="index"
+        :label="item.fileName"
+      >
+        <div>
+          <el-image
+            style="height: 580px"
+            :preview-src-list="[
+              baseURL +
+                '/common/fs-upload/download?serverPath=' +
+                item.uuid +
+                '&showName=' +
+                item.fileName,
+            ]"
+            :src="
+              baseURL +
+              '/common/fs-upload/download?serverPath=' +
+              item.uuid +
+              '&showName=' +
+              item.fileName
+            "
+          />
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    unifiedEnclosures: {
+      type: Array,
+      default: null,
+    },
+    showIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      displayIndex: 0,
+    }
+  },
+  created() {
+    this.displayIndex = this.showIndex
+  },
+  methods: {},
+  emits: ['close'],
+}
+</script>

package/packages/fs-upload-list/index.js

@@ -0,0 +1,6 @@
+import FsUploadList from './src/fs-upload-list.vue'
+FsUploadList.install = function (Vue) {
+  window.$vueApp.component(FsUploadList.name, FsUploadList)
+}
+
+export default FsUploadList