imatrix-ui 2.8.21-dw → 2.8.21

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

@@ -0,0 +1,287 @@
+<!-- 文件上传 -->
+<template>
+  <div>
+    <template v-if="!disabled">
+      <el-input
+        ref="item"
+        :readonly="true"
+        :disabled="disabled"
+        :value="value"
+        :placeholder="$t('imatrixUIMessage.fileUpload')"
+      >
+        <el-button v-if="!disabled" slot="append" size="mini" icon="el-icon-upload2" @click="openAnnexUpload" />
+        <el-button slot="append" size="mini" icon="el-icon-zoom-in" @click="preview" />
+      </el-input>
+
+      <el-dialog
+        :title="$t('imatrixUIMessage.tips')"
+        :visible.sync="annexUploadFlag"
+        :append-to-body="true"
+        :show-close="true"
+        width="30%"
+      >
+        <el-upload
+          v-if="annexUploadFlag"
+          :action="defaultAction"
+          :accept="fileSetObj.accept?fileSetObj.accept:null"
+          :on-success="uploadOnSuccess"
+          :headers="headers"
+          :before-upload="handleBeforeUpload"
+          :with-credentials="true"
+          name="file"
+        >
+          <el-button>{{ $t('imatrixUIMessage.upload') }}</el-button>
+        </el-upload>
+      </el-dialog>
+      <el-dialog
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIPublicModel.previewImage')"
+        :visible.sync="showPreviewSingleImage"
+        @close="$emit('close')"
+      >
+        <span slot="title">{{ $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>
+        <el-image v-if="previewImageInfo&&previewImageInfo.isImg" :preview-src-list="[previewImageInfo.src]" :src="previewImageInfo.src" />
+      </el-dialog>
+      <el-dialog
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIPublicModel.preview')"
+        :visible.sync="showPreviewMulti"
+        width="30%"
+        @close="$emit('close')"
+      >
+        <span slot="title">{{ $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>
+        <el-table
+          :show-header="false"
+          :data="showFileList"
+        >
+          <el-table-column
+            width="300"
+            prop="showName"
+          />
+          <el-table-column align="right">
+            <template slot-scope="scope">
+              <el-tooltip :content="$t('imatrixUIPublicModel.preview')" class="item" effect="dark" placement="top">
+                <i class="el-icon-view" style="cursor:pointer;" @click="previewSingle(scope.row)" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="!disabled">
+            <template slot-scope="scope">
+              <el-tooltip :content="$t('imatrixUIPublicModel.delete')" class="item" effect="dark" placement="top">
+                <i class="el-icon-delete" style="cursor:pointer;" @click="deleteRow(scope.$index)" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-dialog>
+    </template>
+    <template v-else>
+      <fs-preview :label="value" :entity="row" :is-sql="isSql" :file-set-obj="fileSetObj" />
+    </template>
+  </div>
+</template>
+
+<script>
+
+import { getToken } from '../../../src/utils/auth'
+import { isImage } from '../../../src/utils/util'
+import { isPlateSys, getSystemFrontendUrl } from '../../../src/utils/common-util'
+import Vue from 'vue'
+import FsPreview from '../../fs-preview/src/fs-preview.vue'
+import { packageFile } from '../../super-grid/src/utils'
+export default {
+  name: 'FsUploadList',
+  components: {
+    FsPreview
+
+  },
+  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
+    }
+  },
+  data() {
+    const headers = { Authorization: getToken() }
+    let defaultAction = Vue.prototype.baseURL + '/common/fs-upload'
+    if (isPlateSys(Vue.prototype.systemCode)) {
+      defaultAction = Vue.prototype.baseAPI + '/component/super-form/uploads'
+    }
+    return {
+      deleteUuids: [],
+      headers,
+      defaultAction,
+      annexUploadFlag: false,
+      showPreviewSingleImage: false,
+      showPreviewMulti: false,
+      lastFileName: null,
+      previewImageInfo: {},
+      showFileList: this.fileList
+    }
+  },
+  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) {
+        this.$emit('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(Vue.prototype.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 = Vue.prototype.baseURL + '/common/fs-upload/preview?jwt=' + token
+      if (isPlateSys(Vue.prototype.systemCode)) {
+        previewUrl = Vue.prototype.baseAPI + '/component/fs-upload/preview?jwt=' + token
+      }
+      if (Vue.prototype.customPreviewUrl) {
+        window.open(getSystemFrontendUrl(Vue.prototype.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 = []
+        this.$emit('delete-success', { deleteFile: deleteFile, all: [] })
+        this.$emit('delete', [], index)
+      } else {
+        this.fileInfo.showName = nameArr.join(',')
+        this.fileInfo.serverPath = pathArr.join(',')
+        this.$emit('delete-success', { deleteFile: deleteFile, all: this.showFileList })
+        this.$emit('delete', this.showFileList, index)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>

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,38 @@
+<template>
+  <div class="00-Color/9-gray">
+    <i v-if="isActive" class="el-icon-s-fold" @click="toggleClick" />
+    <i v-else class="el-icon-s-unfold" @click="toggleClick" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+	display: inline-block;
+	cursor: pointer;
+	width: 14px;
+	height: 14px;
+	transform: rotate(90deg);
+	transition: .38s;
+	transform-origin: 50% 50%;
+}
+.hamburger.is-active {
+  transform: rotate(0deg);
+}
+</style>

package/packages/index.js

@@ -0,0 +1,121 @@
+// 依次导入组件库的各个组件
+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'
+// 将所有组件都存储起来,方便后续统一注册
+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
+]
+
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+const install = function(Vue) {
+  Vue.directive('prevent-reclick', PreventReclick)
+  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,73 @@
+<!-- 文件上传 -->
+<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: {
+  }
+}
+</script>
+
+<style scoped></style>