agilebuilder-ui 1.1.40 → 1.1.41

package/lib/{tab-content-iframe-index-77bf55ca.js → tab-content-iframe-index-094835e7.js}

@@ -1,5 +1,5 @@
 import { openBlock as r, createElementBlock as t, createCommentVNode as o } from "vue";
-import { _ as s } from "./index-e9efe5c2.js";
+import { _ as s } from "./index-a36c91b2.js";
 const u = ["src"], f = s({ data: () => ({ src: null }), watch: { $route(n, c) {
   this.src = this.$route.query.src;
 } }, mounted() {

package/lib/{tab-content-index-8157438c.js → tab-content-index-92b24462.js}

@@ -1,4 +1,4 @@
-import { _ as f, c as _, g as x, b as P, s as h, m as M, M as O, i as I } from "./index-e9efe5c2.js";
+import { _ as f, c as _, g as x, b as P, s as h, m as M, M as O, i as I } from "./index-a36c91b2.js";
 import { resolveComponent as u, openBlock as l, createBlock as b, withCtx as g, createVNode as v, TransitionGroup as L, createElementBlock as p, Fragment as C, renderList as T, createElementVNode as m, toDisplayString as w, normalizeClass as S, createCommentVNode as y } from "vue";
 const k = { class: "no-redirect" }, A = f({ name: "Breadcrumb", data: () => ({ levelList: null }), computed: { levelListWithTitle() {
   return this.levelList.filter((e) => e.meta.title !== void 0 && e.meta.title !== null);

package/lib/{tache-subprocess-history-bc9f1bea.js → tache-subprocess-history-0d32337a.js}

@@ -1,5 +1,5 @@
 import { resolveComponent as t, openBlock as a, createElementBlock as s, createElementVNode as y, createVNode as l, withCtx as r, createTextVNode as n, toDisplayString as p, createCommentVNode as c, createBlock as h } from "vue";
-import { _ as I } from "./index-e9efe5c2.js";
+import { _ as I } from "./index-a36c91b2.js";
 const g = { style: { "padding-bottom": "10px" } }, k = { key: 0, class: "graphDiv" }, N = I({ name: "TacheSubprocessHistory", data: () => ({ type: "graph", workflowId: null }), created() {
   const o = this.$route.query.workflowId;
   o && (this.workflowId = parseInt(o));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.1.40",
+  "version": "1.1.41",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",

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

@@ -1,24 +1,78 @@
 <template>
-  <div v-if="label">
-    <div
-      ref="filePreviewRef"
-      @dblclick="dblclickEvent"
-      style="display: flex; align-items: center; gap: 5px"
-      :style="{ cursor: disabled && fileSetObj.disabledNoPreview ? 'not-allowed' : 'pointer' }"
-      @click="previewMuti()"
-    >
-      <el-icon><el-icon-paperclip /></el-icon>
-      {{ label }}
-      <el-tooltip v-if="!disabled || !fileSetObj.disabledNoPreview" :content="$t('imatrixUIPublicModel.preview')">
-        <el-icon style="cursor: pointer; color: #409eff; padding-right: 5px" @click="previewMuti()"
-          ><el-icon-view
-        /></el-icon>
-      </el-tooltip>
-      <el-tooltip v-if="!disabled || !fileSetObj.disabledNoDownload" :content="$t('imatrixUIPublicModel.download')">
-        <el-icon style="cursor: pointer; color: #409eff" @click="donwloadViewFile()">
-          <el-icon-download />
-        </el-icon>
-      </el-tooltip>
+  <div ref="fsPreviewRef">
+    <div ref="filePreviewRef" @dblclick="dblclickEvent" class="fs-preview-container">
+      <slot name="prefix"></slot>
+      <template v-if="firstFileName">
+        <div class="fs-preview-container">
+          <super-icon :iconValue="getFileIconByName(firstFileName)" />
+        </div>
+        <span :title="firstFileName" ref="nameRef" class="amb-list-preivew-name">
+          {{ firstFileName }}
+        </span>
+      </template>
+      <div v-if="firstFileName" ref="toolRef" class="fs-preview-tool">
+        <el-link v-if="enableDelete && !disabled" type="danger" :underline="false" @click="deleteFirst()">
+          {{ $t('fsUpload.delete') }}
+        </el-link>
+        <el-link
+          v-if="!disabled || !fileSetObj.disabledNoPreview"
+          type="primary"
+          :underline="false"
+          @click="previewFirst()"
+        >
+          {{ $t('fsUpload.preview') }}
+        </el-link>
+        <el-link
+          v-if="!disabled || !fileSetObj.disabledNoDownload"
+          type="primary"
+          :underline="false"
+          @click="downloadFirst()"
+        >
+          {{ $t('fsUpload.download') }}
+        </el-link>
+        <el-divider v-if="showMultipleFile" direction="vertical" />
+        <el-popover :width="450" trigger="click">
+          <template #reference>
+            <el-button v-if="showMultipleFile" type="primary" round size="small" @click="showMultiView">
+              更多
+              <el-icon><ArrowDownBold /></el-icon>
+            </el-button>
+          </template>
+          <div style="max-height: 300px; overflow-y: auto">
+            <div v-for="(item, index) in fileList" :ref="item.serverPath" :key="item.serverPath" class="file-item">
+              <div style="display: flex; align-items: center; flex: 1">
+                <span>
+                  <super-icon :iconValue="getFileIconByName(item.showName)" />
+                </span>
+                <span class="amb-list-preivew-name" style="width: 230px; margin-left: 10px">
+                  {{ item.showName }}
+                </span>
+              </div>
+              <div class="file-actions">
+                <el-link v-if="enableDelete" type="danger" underline @click="deleteFile(item)">
+                  {{ $t('fsUpload.delete') }}
+                </el-link>
+                <el-link
+                  type="primary"
+                  v-if="!disabled || !fileSetObj.disabledNoPreview"
+                  underline
+                  @click="previewSingle(item)"
+                >
+                  {{ $t('fsUpload.preview') }}
+                </el-link>
+                <el-link
+                  type="primary"
+                  v-if="!disabled || !fileSetObj.disabledNoDownload"
+                  underline
+                  @click="donwloadFile(index)"
+                >
+                  {{ $t('fsUpload.download') }}
+                </el-link>
+              </div>
+            </div>
+          </div>
+        </el-popover>
+      </div>
     </div>
     <el-image-viewer
       v-if="showPreviewSingleImage"
@@ -26,67 +80,6 @@
       :url-list="[previewImageInfo.src]"
       @close="showPreviewSingleImage = false"
     />
-    <el-dialog
-      layout-mobile="bottom"
-      :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" max-height="60vh">
-        <el-table-column prop="showName" show-overflow-tooltip>
-          <template v-slot="scope">
-            <div style="display: flex; align-items: center">
-              <span>
-                <super-icon :iconValue="getFileIconByName(scope.row.showName)" />
-              </span>
-              <span class="amb-list-preivew-name" @click="previewSingle(scope.row)">
-                {{ scope.row.showName }}
-              </span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column width="80" align="center">
-          <template v-slot="scope">
-            <div style="margin: -10px 0">
-              <el-tooltip
-                v-if="!fileSetObj.disabledNoPreview"
-                :content="$t('imatrixUIPublicModel.preview')"
-                class="item"
-                effect="dark"
-                placement="top"
-              >
-                <el-button type="text" @click="previewSingle(scope.row)">
-                  <el-icon style="cursor: pointer"><el-icon-view /></el-icon>
-                </el-button>
-              </el-tooltip>
-              <el-tooltip
-                v-if="!fileSetObj.disabledNoDownload"
-                :content="$t('imatrixUIPublicModel.download')"
-                class="item"
-                effect="dark"
-                placement="top"
-              >
-                <el-button type="text" @click="donwloadFile(scope.$index, fileList)">
-                  <el-icon v-if="downloadable" style="cursor: pointer">
-                    <el-icon-download />
-                  </el-icon>
-                </el-button>
-              </el-tooltip>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
   </div>
 </template>
 
@@ -100,6 +93,7 @@ import { packageFile } from '../../super-grid/src/utils'
 import { getToken } from '../../../src/utils/auth'
 import { getFileIconByName } from '../../../src/utils/file-util'
 import { Base64 } from 'js-base64'
+import { ElMessage } from 'element-plus'
 export default {
   components: {
     ElIconPaperclip,
@@ -108,6 +102,10 @@ export default {
   },
   name: 'FsPreview',
   props: {
+    width: {
+      type: [String, Number],
+      default: '100%'
+    },
     label: {
       type: String,
       default: null
@@ -135,6 +133,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    enableDelete: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -144,7 +146,23 @@ export default {
       previewImageInfo: {},
       fileList: [],
       downloadable: true,
-      keyValueParam: {}
+      keyValueParam: {},
+      showMultipleFile: false,
+      firstFileUUid: ''
+    }
+  },
+  computed: {
+    firstFileName() {
+      if (this.label?.indexOf(',') > -1) {
+        this.showMultipleFile = true
+        return this.label.split(',')[0]
+      } else {
+        this.showMultipleFile = false
+        return this.label
+      }
+    },
+    lab() {
+      return this.label || this.fileInfo.showName || '文件预览'
     }
   },
   created() {
@@ -157,6 +175,25 @@ export default {
     dblclickEvent() {
       clearTimeout(this.time)
     },
+    getFirstFile() {
+      const { showName, serverPath } = this.getShowNameAndUuidKey()
+      if (serverPath) {
+        const uuids = serverPath.split(',')
+        if (uuids.length > 1) {
+          return { showName: showName.split(',')[0], serverPath: serverPath.split(',')[0] }
+        } else {
+          return { showName: showName, serverPath: serverPath }
+        }
+      }
+      return null
+    },
+    previewFirst() {
+      this.previewSingle(this.getFirstFile())
+    },
+    downloadFirst() {
+      const { showName, serverPath } = this.getFirstFile()
+      this.download(showName, serverPath)
+    },
     previewSingle(fileInfo) {
       fileInfo = packageFile(fileInfo.showName, fileInfo.serverPath)
       if (isImage(fileInfo.showName)) {
@@ -188,9 +225,6 @@ export default {
         serverPath = getEntityFieldValue(this.entity, this.keyValueParam.serverPath)
         showName = getEntityFieldValue(this.entity, this.keyValueParam.showName)
       }
-      if (!serverPath) {
-        ElMessage.error(this.$t('imatrixUIMessage.filePathNotFound'))
-      }
       return {
         showName: showName,
         serverPath: serverPath
@@ -273,7 +307,7 @@ export default {
         window.open(previewUrl, showName)
       }
     },
-    donwloadFile(index, fileList) {
+    donwloadFile(index) {
       const showName = this.formatFileName(this.fileList[index].showName)
       if (!this.fileList[index].src) {
         this.download(showName, this.fileList[index].serverPath)
@@ -327,22 +361,93 @@ export default {
     },
     getFileIconByName(fileName) {
       return getFileIconByName(fileName)
+    },
+    showMultiView() {
+      const { showName, serverPath } = this.getShowNameAndUuidKey()
+      if (serverPath) {
+        const uuids = serverPath.split(',')
+        if (uuids.length > 1) {
+          const baseURL = window.$vueApp.config.globalProperties.baseURL
+          const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+          let tempAction = baseURL + '/common/fs-upload/search-file-names'
+          if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+            tempAction = baseAPI + '/api/search-file-names'
+          }
+          this.$http.post(tempAction, uuids).then((result) => {
+            this.fileList = []
+            uuids.forEach((uuid) => {
+              this.fileList.push({ showName: result[uuid], serverPath: uuid })
+            })
+          })
+        }
+      }
+    },
+    deleteFirst() {
+      const fileInfo = this.getFirstFile()
+      this.$emit('delete-file', fileInfo)
+      this.fileList = this.fileList.filter((item) => item.serverPath !== fileInfo.serverPath)
+      ElMessage.success('文件已删除')
+    },
+    deleteFile(fileInfo) {
+      this.$emit('delete-file', fileInfo)
+      this.fileList = this.fileList.filter((item) => item.serverPath !== fileInfo.serverPath)
+      ElMessage.success('文件已删除')
     }
   },
-  emits: ['close']
+  emits: ['close', 'delete-file']
 }
 </script>
 
 <style lang="scss" scoped>
+.fs-preview-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  justify-content: space-between;
+}
+
+.fs-preview-tool {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: max-content;
+  margin-left: auto; /* 添加这行，将工具栏推到右侧 */
+}
 .amb-color-iconfont {
   width: 30px;
   height: 30px;
 }
 .amb-list-preivew-name {
-  margin-left: 10px;
-  cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.el-link + .el-link {
+  margin-left: 5px;
+}
+.file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* 添加这行来分布空间 */
+  gap: 10px;
+  height: 40px;
+  padding: 10px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    color: var(--el-button-hover-text-color, #409eff);
+    border-color: var(--el-button-hover-border-color, rgb(197.7, 225.9, 255));
+    background-color: var(--el-button-hover-bg-color, rgb(235.9, 245.3, 255));
+    outline: none;
+  }
+}
+
+.file-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0; /* 防止按钮被压缩 */
+}
 </style>