agilebuilder-ui 1.1.40 → 1.1.41

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

@@ -1,133 +1,35 @@
 <template>
-  <span>
+  <span style="width: 100%">
     <template v-if="!disabled">
       <template v-if="!isMobile">
-        <el-input
-          ref="item"
+        <fs-preview
+          :enable-delete="true"
+          :entity="row"
           :disabled="disabled"
-          :model-value="value"
-          :placeholder="$t('imatrixUIMessage.fileUpload')"
-          :readonly="true"
+          :fileInfo="fileInfo"
+          :file-set-obj="fileSetObj"
+          :is-sql="isSql"
+          :label="value"
+          @delete-file="deleteRow"
         >
-          <template v-slot:append>
-            <div class="group-link-btn-main">
-              <el-link v-if="!disabled" type="info" :underline="false" @click="openAnnexUpload">
-                <template v-slot:icon>
-                  <el-icon :size="14"><Upload /></el-icon>
-                </template>
-              </el-link>
-              <el-link size="default" type="info" :underline="false" @click="preview">
-                <template v-slot:icon>
-                  <el-icon :size="14"><ZoomIn /></el-icon>
-                </template>
-              </el-link>
-            </div>
+          <template #prefix>
+            <el-upload
+              :accept="fileSetObj.accept ? fileSetObj.accept : null"
+              :action="defaultAction"
+              :multiple="fileSetObj.multiple"
+              :before-upload="handleBeforeUpload"
+              :show-file-list="false"
+              :headers="headers"
+              :on-success="uploadOnSuccess"
+              :with-credentials="true"
+              name="file"
+            >
+              <el-button size="small" style="margin-right: 5px" bg>
+                <el-icon><UploadFilled /></el-icon>
+              </el-button>
+            </el-upload>
           </template>
-        </el-input>
-
-        <el-dialog
-          v-model="annexUploadFlag"
-          :append-to-body="true"
-          :show-close="true"
-          :title="$t('imatrixUIMessage.upload')"
-          width="30%"
-        >
-          <el-upload
-            v-if="annexUploadFlag"
-            :accept="fileSetObj.accept ? fileSetObj.accept : null"
-            :action="defaultAction"
-            :multiple="fileSetObj.multiple"
-            :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 :show-header="false" :data="showFileList" 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="!disabled"
-                    :content="$t('imatrixUIPublicModel.delete')"
-                    class="item"
-                    effect="dark"
-                    placement="top"
-                  >
-                    <el-button type="text" @click="deleteRow(scope.$index)">
-                      <el-icon style="cursor: pointer">
-                        <el-icon-delete />
-                      </el-icon>
-                    </el-button>
-                  </el-tooltip>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-dialog>
+        </fs-preview>
       </template>
       <FileUploadInputMobile
         v-else
@@ -177,6 +79,7 @@ import { packageFile } from '../../super-grid/src/utils'
 import FileUploadInputMobile from '../../fs-upload-new/src/file-upload-mobile/file-upload-input.vue'
 import { Base64 } from 'js-base64'
 import { getFileIconByName } from '../../../src/utils/file-util'
+import { ElMessage } from 'element-plus'
 export default {
   name: 'FsUploadList',
   props: {
@@ -278,9 +181,28 @@ export default {
     ElIconDelete,
     FileUploadInputMobile
   },
-  created() {},
+  created() {
+    this.fileList.length = 0
+    this.fileList.push(...this.getFileList())
+  },
   mounted() {},
   methods: {
+    getFileList() {
+      const fileList = []
+      if (this.fileInfo?.serverPath) {
+        const uuids = this.fileInfo.serverPath.split(',')
+        const names = this.fileInfo.showName.split(',')
+        for (let i = 0; i < uuids.length; i++) {
+          if (uuids[i]) {
+            fileList.push({
+              serverPath: uuids[i],
+              showName: names[i]
+            })
+          }
+        }
+      }
+      return fileList
+    },
     openAnnexUpload() {
       if (this.openFsUpload) {
         this.annexUploadFlag = true
@@ -320,6 +242,7 @@ export default {
     // 上传成功
     uploadOnSuccess(response, file) {
       if (response) {
+        ElMessage.success(this.$t('fsUpload.uploadSucceeded'))
         $emit(this, 'upload-success', {
           showName: response.name,
           serverPath: response.serverPath
@@ -339,100 +262,33 @@ export default {
       }
       this.annexUploadFlag = false
     },
-    preview() {
-      this.fileList.length = 0
-      const uuids = this.fileInfo.serverPath.split(',')
-      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) => {
-        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]
+    deleteRow(deleteFile) {
       // 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)
+      let deleteFileIndex = -1
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (this.fileList[i].serverPath !== deleteFile.serverPath) {
+          nameArr.push(this.fileList[i].showName)
+          pathArr.push(this.fileList[i].serverPath)
+        } else {
+          deleteFileIndex = i
         }
       }
       if (nameArr.length === 0) {
         this.fileInfo.showName = null
         this.fileInfo.serverPath = null
-        this.showFileList = []
+        this.fileList.length = 0
         $emit(this, 'delete-success', { deleteFile: deleteFile, all: [] })
-        $emit(this, 'delete', [], index)
+        $emit(this, 'delete', [], deleteFileIndex)
       } else {
         this.fileInfo.showName = nameArr.join(',')
         this.fileInfo.serverPath = pathArr.join(',')
         $emit(this, 'delete-success', {
           deleteFile: deleteFile,
-          all: this.showFileList
+          all: this.fileList
         })
-        $emit(this, 'delete', this.showFileList, index)
+        $emit(this, 'delete', this.fileList, deleteFileIndex)
       }
     },
     // 移动端上传成功

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

@@ -132,9 +132,9 @@ import FsDragUpload from './fs-drag-upload.vue'
 import FsButtonUpload from './fs-button-upload.vue'
 import FileUploadMobile from './file-upload-mobile/file-upload.vue'
 import FileUploadInputMobile from './file-upload-mobile/file-upload-input.vue'
+import FsUploadList from '../../fs-upload-list/src/fs-upload-list.vue'
 import { ref, defineProps } from 'vue'
 import { getReplaceUrlDomain, isMobileBrowser, isPlateSys } from '../../../src/utils/common-util'
-import { Download } from '@element-plus/icons-vue'
 const props = defineProps({
   openFsUpload: {
     type: Object,

package/packages/super-grid/src/dynamic-input.vue

@@ -713,7 +713,6 @@ export default {
       annexUploadFlag: false,
       defaultAction,
       fileMultiple: false, // 文件是否多选
-      lastFileName: '',
       fileList: [],
       lastServerName: '',
       fileSetObj: null,
@@ -838,7 +837,6 @@ export default {
         this.fileMultiple = true
       }
       this.fileList = getFileList(this.row, this.column, this.isSql)
-      this.packageFileNameWithFileList()
     }
 
     if (this.column.componentType === 'inputNumber') {
@@ -1323,6 +1321,7 @@ export default {
                 this.radioStorageFile(fileSetObj, responseFile)
               }
               this.fileList = getFileList(this.row, this.column, this.isSql)
+              console.log('superGrid---uploadOnSuccess----fileList=', this.fileList)
             }
           }
         }
@@ -1368,7 +1367,6 @@ export default {
           }
         }
       }
-      this.packageFileNameWithFileList([{ showName: responseFile.name, serverPath: responseFile.serverPath }])
     },
     // 多选上传完成后存储
     multiStorage(fileSetObj, responseFile) {
@@ -1453,7 +1451,6 @@ export default {
           serverPath: pathNameStr
         })
       }
-      this.packageFileNameWithFileList()
     },
     // 多选上传完成后存储 移动端时
     multiStorageMobile(fileSetObj, responseFiles) {
@@ -1545,7 +1542,6 @@ export default {
           serverPath: pathNameStr
         })
       }
-      this.packageFileNameWithFileList()
     },
     responseFileToFileObj(fileSetObj, responseFile) {
       const fileObj = {}
@@ -1601,11 +1597,12 @@ export default {
       }
     },
     deleteFile(fileList, index) {
+      console.log(JSON.stringify(fileList))
       this.fileList = fileList
       if (index !== undefined && index !== -1) {
         this.fileList.splice(index, 1)
       }
-      this.packageFileNameWithFileList()
+      console.log(JSON.stringify(this.fileList))
       if (this.column.fileSet && this.column.fileSet !== '') {
         const fileSetObj = JSON.parse(this.column.fileSet)
         if (fileSetObj) {
@@ -1620,26 +1617,6 @@ export default {
         }
       }
     },
-    packageFileNameWithFileList(fileList) {
-      if (!fileList) {
-        fileList = this.fileList
-      }
-      if (fileList && fileList.length > 0) {
-        let fileNames = ''
-        let fileServerName = ''
-        fileList.forEach((item) => {
-          fileNames += item.showName + ','
-          fileServerName += item.serverPath + ','
-        })
-        if (fileNames && fileNames.indexOf(',') > 0) {
-          this.lastFileName = fileNames.substring(0, fileNames.lastIndexOf(','))
-          this.lastServerName = fileServerName.substring(0, fileServerName.lastIndexOf(','))
-        }
-      } else {
-        this.lastFileName = null
-        this.lastServerName = null
-      }
-    },
     // fileList 赋值Row
     standardToOtherFiles(fileSetObj, keyValueParam) {
       if (fileSetObj.childAnnexDataTableCode) {

package/packages/super-grid/src/normal-column-content.vue

@@ -199,7 +199,6 @@
         <span v-if="column.formatter && column.formatter.type === 'files'" type="primary">
           <span
             :id="column.prop + 'DomData' + rowIndex"
-            :style="textOverflow === 'newline' ? {} : { width: cellWidth + 'px' }"
             :title="isShowOverflowTooltip ? $escapeHtml(getLabel(row)) : ''"
             :class="textOverflow === 'newline' ? 'wrap-text' : 'ellipsis cell--span'"
           >
@@ -264,15 +263,19 @@
         }}</span>
       </template>
       <template v-else>
-        <span v-if="column.componentType === 'annex' || column.componentType === 'multipartUpload'" type="primary">
+        <span
+          v-if="column.componentType === 'annex' || column.componentType === 'multipartUpload'"
+          type="primary"
+          style="width: 100%"
+        >
           <span
             v-if="isShowOverflowTooltip"
             :id="column.prop + 'DomData' + rowIndex"
-            :style="textOverflow === 'newline' ? {} : { width: cellWidth + 'px' }"
             :title="$escapeHtml(getLabel(row))"
             :class="textOverflow === 'newline' ? 'wrap-text' : 'ellipsis cell--span'"
           >
             <FsPreview
+              :width="cellWidth"
               :entity="row"
               :file-set-obj="getFileObj(column.fileSet)"
               :is-sql="isSql"
@@ -291,7 +294,6 @@
         <span v-else-if="column.formatter && column.formatter.type === 'files'">
           <span
             :id="column.prop + 'DomData' + rowIndex"
-            :style="textOverflow === 'newline' ? {} : { width: cellWidth + 'px' }"
             :title="isShowOverflowTooltip ? $escapeHtml(getLabel(row)) : ''"
             :class="textOverflow === 'newline' ? 'wrap-text' : 'ellipsis cell--span'"
           >
@@ -704,7 +706,7 @@ export default {
       }
     }
     this.setScanRuleSets()
-    this.requiredClass = this.isRequired(this.row.$editing) ? 'm-requried' : ''
+    this.requiredClass = this.isRequired(this.row.$editing) ? 'm-requried column-text-main' : ''
   },
   mounted() {
     if (this.controlConfig) {
@@ -1219,7 +1221,7 @@ export default {
       }
     },
     changeRequired(required) {
-      this.requiredClass = required ? 'm-requried' : ''
+      this.requiredClass = required ? 'm-requried column-text-main' : ''
     },
     openPageEvent(openPageParams) {
       console.log('normalColumnContent----openPageEvent----', openPageParams)