agilebuilder-ui 1.0.18 → 1.0.19-beta2

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

@@ -1,392 +1,351 @@
 <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>
+  <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>
+      <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()" /> -->
+            >{{ $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>
+        </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()" /> -->
+            >{{ $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
-					:entity="row"
-					:file-set-obj="fileSetObj"
-					:is-sql="isSql"
-					:label="value"
-			/>
-		</template>
-	</div>
+        </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 :entity="row" :file-set-obj="fileSetObj" :is-sql="isSql" :label="value" />
+    </template>
+  </div>
 </template>
 
 <script>
 import {
-	Delete as ElIconDelete,
-	Upload as ElIconUpload2,
-	View as ElIconView,
-	ZoomIn as ElIconZoomIn,
+  Delete as ElIconDelete,
+  Upload as ElIconUpload2,
+  View as ElIconView,
+  ZoomIn as ElIconZoomIn
 } from '@element-plus/icons-vue'
-import {$emit} from '../../utils/gogocodeTransfer'
+import { $emit } from '../../utils/gogocodeTransfer'
 
-import {getToken} from '../../../src/utils/auth'
-import {isImage} from '../../../src/utils/util'
-import {getSystemFrontendUrl, isPlateSys,} from '../../../src/utils/common-util'
+import { getToken } from '../../../src/utils/auth'
+import { isImage } from '../../../src/utils/util'
+import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
 import FsPreview from '../../fs-preview/src/fs-preview.vue'
-import {packageFile} from '../../super-grid/src/utils'
+import { packageFile } from '../../super-grid/src/utils'
 
 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: 'FsUploadList',
-	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 []
-			},
-		},
-		row: {
-			type: Object,
-			default: () => {
-				return {}
-			},
-		},
-		isSql: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	created() {
-	},
-	mounted() {
-	},
-	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
-			}
-			const beforeUpload = this.fileSetObj.beforeUpload
-			if(beforeUpload) {
-				const result = beforeUpload.call(this, {pageContext: this.fileSetObj.pageContext, configureObj: this.fileSetObj.configureObj, file: file})
-				if(result!==undefined && result!==null && result !== true){
-					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) {
-						this.fileInfo.showName =
-								this.fileInfo.showName + ',' + response.name
-						this.fileInfo.serverPath =
-								this.fileInfo.serverPath + ',' + response.serverPath
-					} 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.fileList.length = 0
-			const uuids = this.fileInfo.serverPath.split(',')
-			this.$http
-					.post(
-							window.$vueApp.config.globalProperties.baseURL +
-							'/common/fs-upload/search-file-names',
-							uuids
-					)
-					.then((result) => {
-						uuids.forEach((uuid) => {
-							this.fileList.push({showName: result[uuid], serverPath: uuid})
-						})
-						this.showFileList = this.fileList
-						this.showPreviewMulti = true
-					})
-		},
-		previewSingle(fileInfo) {
-			fileInfo = packageFile(fileInfo.showName, fileInfo.serverPath)
-			if (isImage(fileInfo.showName)) {
-				this.previewImageInfo = fileInfo
-				this.showPreviewSingleImage = true
-			} else {
-				this.previewDoc(fileInfo)
-			}
-		},
-		previewDoc(file) {
-			const showName = file.showName
-					.replace('#', '~~')
-					.replace('?', '~$')
-					.replace('&', '$')
-			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(showName),
-						file.showName
-				)
-			} else {
-				let previewUrl
-				const myShowName = 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)
-				}
-			}
-			if (nameArr.length === 0) {
-				this.fileInfo.showName = null
-				this.fileInfo.serverPath = null
-				this.showFileList = []
-				$emit(this, 'delete-success', {deleteFile: deleteFile, all: []})
-				$emit(this, 'delete', [], index)
-			} else {
-				this.fileInfo.showName = nameArr.join(',')
-				this.fileInfo.serverPath = pathArr.join(',')
-				$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',
-	],
+  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: 'FsUploadList',
+  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 []
+      }
+    },
+    row: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created() {},
+  mounted() {},
+  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
+      }
+      const beforeUpload = this.fileSetObj.beforeUpload
+      if (beforeUpload) {
+        const result = beforeUpload.call(this, {
+          pageContext: this.fileSetObj.pageContext,
+          configureObj: this.fileSetObj.configureObj,
+          file: file
+        })
+        if (result !== undefined && result !== null && result !== true) {
+          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) {
+            this.fileInfo.showName = this.fileInfo.showName + ',' + response.name
+            this.fileInfo.serverPath = this.fileInfo.serverPath + ',' + response.serverPath
+          } 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.fileList.length = 0
+      const uuids = this.fileInfo.serverPath.split(',')
+      this.$http
+        .post(window.$vueApp.config.globalProperties.baseURL + '/common/fs-upload/search-file-names', uuids)
+        .then((result) => {
+          uuids.forEach((uuid) => {
+            this.fileList.push({ showName: result[uuid], serverPath: uuid })
+          })
+          this.showFileList = this.fileList
+          this.showPreviewMulti = true
+        })
+    },
+    previewSingle(fileInfo) {
+      fileInfo = packageFile(fileInfo.showName, fileInfo.serverPath)
+      if (isImage(fileInfo.showName)) {
+        this.previewImageInfo = fileInfo
+        this.showPreviewSingleImage = true
+      } else {
+        this.previewDoc(fileInfo)
+      }
+    },
+    previewDoc(file) {
+      const showName = file.showName.replace('#', '~~').replace('?', '~$').replace('&', '$')
+      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(showName),
+          file.showName
+        )
+      } else {
+        let previewUrl
+        const myShowName = 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)
+        }
+      }
+      if (nameArr.length === 0) {
+        this.fileInfo.showName = null
+        this.fileInfo.serverPath = null
+        this.showFileList = []
+        $emit(this, 'delete-success', { deleteFile: deleteFile, all: [] })
+        $emit(this, 'delete', [], index)
+      } else {
+        this.fileInfo.showName = nameArr.join(',')
+        this.fileInfo.serverPath = pathArr.join(',')
+        $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>