imatrix-ui 0.0.15 → 0.1.1-up

package/components/dynamic-source-select/events.js

@@ -0,0 +1,77 @@
+const events = {
+  /**
+   * 选中值发生变化时触发
+   * @param {*} newValue
+   */
+  change: function (newValue) {
+    const item = this.getSelectedOptionItem(newValue)
+    this.$emit('change', newValue, item)
+  },
+  /**
+   * 下拉框出现/隐藏时触发
+   * @param {*} visible 出现则为 true，隐藏则为 false
+   */
+  visibleChange: function (visible) {
+    this.$emit('visible-change', visible)
+  },
+  /**
+   * 多选模式下移除tag时触发
+   * @param {*} remote 是否启用了远程搜索
+   * @param {*} tag 移除的tag值
+   */
+  removeTag: function (remote, tag) {
+    this.$emit('remove-tag', tag)
+    if (Array.isArray(this.value)) {
+      if (this.value.length === 1 && remote) {
+        this.clearMarkValue()
+        this.remoteQuery('', null)
+      }
+    }
+  },
+  /**
+   * 可清空的单选模式下用户点击清空按钮时触发
+   */
+  clear: function () {
+    this.clearMarkValue()
+    this.$emit('clear')
+  },
+  /**
+   * 当 input 失去焦点时触发
+   * @param {*} event
+   */
+  blur: function (event) {
+    this.$emit('blur', event)
+  },
+  /**
+   * 当 input 获得焦点时触发
+   * @param {*} event
+   */
+  focus: function (event) {
+    this.$emit('focus', event)
+  },
+  input(newValue) {
+    this.$emit('input', newValue)
+  },
+  getSelectedOptionItem(selectValue) {
+    if (
+      this.baseProps.multiple !== undefined &&
+      this.baseProps.multiple === true &&
+      Array.isArray(selectValue)
+    ) {
+      const selected = []
+      for (var i = 0; i < selectValue.length; i++) {
+        selected.push(
+          this.optionItems.find((item) => {
+            return item[this.valueAttribute] === selectValue[i]
+          })
+        )
+      }
+      return selected
+    } else {
+      return this.optionItems.find((item) => {
+        return item[this.valueAttribute] === selectValue
+      })
+    }
+  },
+}
+export default events

package/components/fs-preview/fs-preview.vue

@@ -0,0 +1,287 @@
+<template>
+  <div v-if="label">
+    <div class="list-file" @click="previewMuti()" @dblclick="dblclickEvent">
+      <el-icon><el-icon-paperclip /></el-icon>
+      {{ label }}
+      <el-icon class="annex-cell"><el-icon-view /></el-icon>
+    </div>
+
+    <el-dialog
+      :append-to-body="true"
+      :show-close="true"
+      :title="$t('imatrixUIPublicModel.previewImage')"
+      v-model="showPreviewSingleImage"
+      @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
+      :append-to-body="true"
+      :show-close="true"
+      :title="$t('imatrixUIPublicModel.preview')"
+      v-model="showPreviewMulti"
+      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 :show-header="false" :data="fileList">
+        <el-table-column prop="showName" width="200" />
+        <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"><el-icon-view /></el-icon>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column>
+          <template v-slot="scope">
+            <el-tooltip
+              :content="$t('imatrixUIPublicModel.download')"
+              class="item"
+              effect="dark"
+              placement="top"
+            >
+              <el-icon style="cursor: pointer"><el-icon-download /></el-icon>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  Paperclip as ElIconPaperclip,
+  View as ElIconView,
+  Download as ElIconDownload,
+} from '@element-plus/icons'
+import * as Vue from 'vue'
+import { isPlateSys, getSystemFrontendUrl } from '../../src/utils/common-util'
+import {
+  isImage,
+  getEntityFieldValue
+} from '../../src/utils/util'
+import { packageFile } from '../super-grid/utils'
+import { getToken } from '../../src/utils/auth'
+export default {
+  components: {
+    ElIconPaperclip,
+    ElIconView,
+    ElIconDownload,
+  },
+  name: 'FsPreview',
+  props: {
+    label: {
+      type: String,
+      default: null,
+    },
+    fileSetObj: {
+      type: Object,
+      default: null,
+    },
+    isSql: {
+      type: Boolean,
+      default: false,
+    },
+    entity: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      showPreviewSingleImage: false,
+      showPreviewMulti: false,
+      previewImageInfo: {},
+      fileList: [],
+    }
+  },
+  created() {
+    // let fileList = []
+    // if (this.column.fileSet && this.column.fileSet !== '' && (this.column.componentType === 'annex' || this.column.componentType === 'multipartUpload')) {
+    //   const fileSetObj = JSON.parse(this.column.fileSet)
+    //   const keyValueParam = this.analysisFileSetObj(fileSetObj, this.isSql)
+    //   if (fileSetObj && fileSetObj.multiple) {
+    //     if (fileSetObj.childAnnexDataTableCode) {
+    //     // const lowerStr = fileSetObj.childAnnexDataTableCode.toLowerCase()
+    //       const fileArr = this.entity[this.column.prop]
+    //       // 子表
+    //       fileList = otherFilesToStandard(fileSetObj, keyValueParam, fileArr, null)
+    //     } else {
+    //       const filesStringData = {
+    //         'showName': getEntityFieldValue(this.entity, keyValueParam.showName),
+    //         'serverPath': getEntityFieldValue(this.entity, keyValueParam.serverPath)
+    //       }
+    //       fileList = otherFilesToStandard(fileSetObj, keyValueParam, null, filesStringData)
+    //     }
+    //   } else {
+    //     const showName = getEntityFieldValue(this.entity, keyValueParam.showName)
+    //     const serverPath = getEntityFieldValue(this.entity, keyValueParam.serverPath)
+    //     fileList.push(packageFile(showName, serverPath))
+    //   }
+    // }
+  },
+  methods: {
+    dblclickEvent() {
+      clearTimeout(this.time)
+    },
+    previewSingle(fileInfo) {
+      fileInfo = packageFile(fileInfo.showName, fileInfo.serverPath)
+      if (isImage(fileInfo.showName)) {
+        this.previewImageInfo = fileInfo
+        this.showPreviewSingleImage = true
+      } else {
+        this.previewDoc(fileInfo)
+      }
+    },
+    previewMuti() {
+      const keyValueParam = this.analysisFileSetObj(this.fileSetObj, this.isSql)
+      const serverPath = getEntityFieldValue(
+        this.entity,
+        keyValueParam.serverPath
+      )
+      if (serverPath) {
+        const uuids = serverPath.split(',')
+        this.$http
+          .post(
+            window.$vueApp.config.globalProperties.baseURL +
+              '/common/fs-upload/search-file-names',
+            uuids
+          )
+          .then((result) => {
+            this.fileList = []
+            uuids.forEach((uuid) => {
+              this.fileList.push({ showName: result[uuid], serverPath: uuid })
+            })
+            this.showPreviewMulti = true
+          })
+      }
+
+      // var that = this
+      // clearTimeout(that.time)
+      // that.time = setTimeout(() => {
+      // }, 200)
+    },
+    previewDoc(fileInfo) {
+      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
+      }
+      const showName = fileInfo.showName
+      if (window.$vueApp.config.globalProperties.customPreviewUrl) {
+        window.open(
+          getSystemFrontendUrl(
+            window.$vueApp.config.globalProperties.portalUrl
+          ) +
+            '/#/file-service/preview?serverPath=' +
+            fileInfo.serverPath +
+            '&showName=' +
+            encodeURI(showName),
+          fileInfo.showName
+        )
+      } else {
+        window.open(
+          previewUrl +
+            '&showName=' +
+            encodeURI(showName) +
+            '&serverPath=' +
+            fileInfo.serverPath
+        )
+      }
+    },
+    donwloadFile(index, fileList) {
+      const token = getToken()
+      const showName = this.formatFileName(this.fileList[index].showName)
+      if (!this.fileList[index].src) {
+        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(showName) +
+          '&serverPath=' +
+          this.fileList[index].serverPath
+        window.open(src)
+      } else {
+        window.open(this.fileList[index].src)
+      }
+    },
+    analysisFileSetObj(fileSetObj, isSql) {
+      let showName = ''
+      let serverPath = ''
+      if (fileSetObj) {
+        if (fileSetObj.showNameData) {
+          if (isSql) {
+            if (fileSetObj.showNameData.dbName) {
+              showName = fileSetObj.showNameData.dbName
+            }
+          } else {
+            if (fileSetObj.showNameData.name) {
+              showName = fileSetObj.showNameData.name
+            }
+          }
+        }
+        if (fileSetObj.serverNameData) {
+          if (isSql) {
+            if (fileSetObj.serverNameData.dbName) {
+              serverPath = fileSetObj.serverNameData.dbName
+            }
+          } else {
+            if (fileSetObj.serverNameData.name) {
+              serverPath = fileSetObj.serverNameData.name
+            }
+          }
+        }
+      }
+      return {
+        showName: showName,
+        serverPath: serverPath,
+      }
+    },
+    formatFileName(fileName) {
+      return fileName.replace('#', '~~').replace('?', '~$').replace('&', '$')
+    },
+  },
+  emits: ['close'],
+}
+</script>

package/components/index.js

@@ -0,0 +1,26 @@
+import Button from './z-test-utton/index.vue'
+import SuperGrid from './super-grid/super-grid.vue'
+import FsPreview from './fs-preview/fs-preview.vue'
+import RichEditor from './rich-editor/index.vue'
+import DynamicSourceSelect from './dynamic-source-select/dynamic-source-select.vue'
+
+// 按需引入
+export { Button, SuperGrid, FsPreview, RichEditor, DynamicSourceSelect }
+
+const component = [
+  Button,
+  SuperGrid,
+  FsPreview,
+  RichEditor,
+  DynamicSourceSelect,
+]
+
+const MukUI = {
+  install(App) {
+    component.forEach((item) => {
+      App.component(item.name, item)
+    })
+  },
+}
+
+export default MukUI