imatrix-ui 0.0.1-dsn

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

@@ -0,0 +1,375 @@
+<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
+					: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,
+} from '@element-plus/icons-vue'
+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 FsPreview from '../../fs-preview/src/fs-preview.vue'
+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
+			}
+		},
+		// 上传成功
+		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()
+			let previewUrl =
+					window.$vueApp.config.globalProperties.baseURL +
+					'/common/fs-upload/preview?jwt=' +
+					token
+			if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+				previewUrl =
+						window.$vueApp.config.globalProperties.baseAPI +
+						'/component/fs-upload/preview?jwt=' +
+						token
+			}
+			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 {
+				window.open(
+						previewUrl +
+						'&showName=' +
+						encodeURI(showName) +
+						'&serverPath=' +
+						file.serverPath
+				)
+			}
+		},
+		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>

package/packages/hamburger/index.js

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

package/packages/hamburger/src/hamburger.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="00-Color/9-gray">
+	  <el-icon v-if="isActive" @click="toggleClick"><Fold /></el-icon>
+	  <el-icon v-else @click="toggleClick"><Expand /></el-icon>
+  </div>
+</template>
+<script setup>
+import {Fold,Expand}  from '@element-plus/icons-vue'
+</script>
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toggleClick() {
+      $emit(this, 'toggleClick')
+    },
+  },
+  emits: ['toggleClick'],
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+  transform: rotate(90deg);
+  transition: 0.38s;
+  transform-origin: 50% 50%;
+}
+.hamburger.is-active {
+  transform: rotate(0deg);
+}
+</style>

package/packages/index.js

@@ -0,0 +1,124 @@
+// 依次导入组件库的各个组件
+import Breadcrumb from './breadcrumb'
+import DepartmentTree from './department-tree'
+import Hamburger from './hamburger'
+import SvgIcon from './svg-icon'
+import SuperGrid from './super-grid'
+import DepartmentUserTree from './department-user-tree'
+import WorkgroupTree from './workgroup-tree'
+import WorkgroupUserTree from './workgroup-user-tree'
+import InlineDepartmentTree from './department-tree-inline'
+import InlineDepartmentUserTree from './department-user-tree-inline'
+import InlineWorkgroupTree from './workgroup-tree-inline'
+import InlineWorkgroupUserTree from './workgroup-user-tree-inline'
+import WorkflowButton from './workflow-button'
+import WorkflowHistoryList from './workflow-history-list'
+import PreventReclick from './directives/prevent-reclick'
+// import exportPlugin from './export-data/index'
+import ValidCode from './valid-code'
+import customPlugin from './plugins/index'
+import RemoveUser from './remove-user'
+import RemoveDepartment from './remove-department'
+import RemoveWorkgroup from './remove-workgroup'
+import OrganizationInput from './organization-input'
+import SuperNineGrid from './super-nine-grid'
+import DynamicSourceSelect from './dynamic-source-select'
+import FsUpload from './fs-upload'
+import ScanCodeInput from './scan-code-input'
+import FsPreview from './fs-preview'
+import FsUploadList from './fs-upload-list'
+import { openPage } from '../src/utils/jump-page-utils'
+import YearRangePicker from './year-range-picker'
+import MultipartUpload from './multipart-upload'
+import RichEditor from './rich-editor'
+import SecretInfo from './secret-info'
+import IntervalSelection from './IntervalSelection'
+// 将所有组件都存储起来,方便后续统一注册
+const components = [
+  Breadcrumb,
+  DepartmentTree,
+  Hamburger,
+  SvgIcon,
+  SuperGrid,
+  DepartmentUserTree,
+  WorkgroupTree,
+  WorkgroupUserTree,
+  InlineDepartmentTree,
+  InlineDepartmentUserTree,
+  InlineWorkgroupTree,
+  InlineWorkgroupUserTree,
+  WorkflowButton,
+  WorkflowHistoryList,
+  ValidCode,
+  RemoveUser,
+  RemoveDepartment,
+  RemoveWorkgroup,
+  OrganizationInput,
+  SuperNineGrid,
+  DynamicSourceSelect,
+  FsUpload,
+  ScanCodeInput,
+  FsPreview,
+  FsUploadList,
+  YearRangePicker,
+  MultipartUpload,
+  RichEditor,
+  SecretInfo,
+  IntervalSelection,
+]
+
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+const install = function (Vue) {
+  Vue.directive('prevent-reclick', PreventReclick)
+  // customPlugin.install(Vue)
+  Vue.use(customPlugin)
+  if (install.installed) return
+  // components.map(component => Vue.component(component.name, component))
+  components.forEach((component) => {
+    Vue.component(component.name, component)
+  })
+  // 将弹出页面方法注册到window对象上
+  window['$plateform_openPage'] = openPage
+}
+
+//  判断是否是直接引入vue的js文件，即全局引用可自动安装所有组件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+export {
+  Breadcrumb,
+  DepartmentTree,
+  Hamburger,
+  SvgIcon,
+  SuperGrid,
+  DepartmentUserTree,
+  WorkgroupTree,
+  WorkgroupUserTree,
+  InlineDepartmentTree,
+  InlineDepartmentUserTree,
+  InlineWorkgroupTree,
+  InlineWorkgroupUserTree,
+  WorkflowButton,
+  WorkflowHistoryList,
+  ValidCode,
+  RemoveUser,
+  RemoveDepartment,
+  RemoveWorkgroup,
+  OrganizationInput,
+  SuperNineGrid,
+  DynamicSourceSelect,
+  FsUpload,
+  ScanCodeInput,
+  FsPreview,
+  FsUploadList,
+  YearRangePicker,
+  MultipartUpload,
+  RichEditor,
+  SecretInfo,
+}
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  ...components,
+}

package/packages/multipart-upload/index.js

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

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <MultipartUploadForm v-if="type === 'form'" />
+    <MultipartUploadList
+      v-else
+      :disabled="disabled"
+      :entity="entity"
+      :value="value"
+      :file-set-obj="fileSetObj"
+    />
+  </div>
+</template>
+
+<script>
+import MultipartUploadList from './multipart-upload-list.vue'
+import MultipartUploadForm from './multipart-upload-form.vue'
+export default {
+  name: 'MultipartUpload',
+  components: {
+    MultipartUploadList,
+    MultipartUploadForm,
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'form',
+    },
+    value: {
+      type: String,
+      default: null,
+    },
+    entity: {
+      type: Object,
+      default: null,
+    },
+    fileSetObj: {
+      type: Object,
+      default: () => {
+        return { limitFileSize: 30, multiple: false, accept: null }
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    uploadAble: {
+      type: Boolean,
+      default: true,
+    },
+    deletaAble: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  created() {
+    console.log(this.fileSetObj, 'fileSetObj')
+    console.log(this.entity, 'entity')
+  },
+  mounted() {},
+  methods: {},
+  emits: ['update:value'],
+}
+</script>