imeik-imui 2.0.5 → 2.0.7

package/dist/imui/src/FormComponents/upload/ImFieldFileUpload.vue

@@ -41,6 +41,7 @@
         </FileLinePreview>
       </li>
     </ul>
+    <PdfPreviewDialog ref="PdfPreviewDialog"></PdfPreviewDialog>
   </div>
 </template>
 
@@ -48,11 +49,13 @@
 import { beforeUpload, fnUploadRequest } from './upload.js'
 import emitter from 'element-ui/src/mixins/emitter'
 import FileLinePreview from './widgets/FileLinePreview.vue'
+import PdfPreviewDialog from './widgets/PdfPreviewDialog.vue'
 
 export default {
   name: 'FieldFileUpload',
   components: {
-    FileLinePreview
+    FileLinePreview,
+    PdfPreviewDialog
   },
   mixins: [emitter],
   props: {
@@ -135,12 +138,30 @@ export default {
 
     // 预览pdf
     onPreviewPdf(url) {
-      this.listeners.previewPdf && this.listeners.previewPdf(url)
+      this.listeners.previewPdf ? this.listeners.previewPdf(url) : this.previewPdf(url)
     },
 
     // 预览图片
     onPreviewImage(url) {
-      this.listeners.previewImage && this.listeners.previewImage(url)
+      this.listeners.previewImage ? this.listeners.previewImage(url) : this.previewImage(url)
+    },
+
+    // 查看pdf
+    previewPdf(url) {
+      this.$refs.PdfPreviewDialog.show({
+        url
+      })
+    },
+
+    // 查看图片
+    previewImage(url) {
+      this.$viewerApi({
+        options: {
+          navbar: false,
+          initialViewIndex: 0
+        },
+        images: [url]
+      })
     },
 
     // 根据url和name判断前后数组是否一样
@@ -167,7 +188,7 @@ export default {
         return
       }
 
-      if (!this.fileList.find(i => i.uid === file.uid)) {
+      if (!this.fileList.find((i) => i.uid === file.uid)) {
         this.fileList.push({
           uid: file.uid,
           name: file.name
@@ -178,7 +199,7 @@ export default {
     // 上传成功回调
     handleSuccess(res, file) {
       if (res) {
-        const index = this.fileList.findIndex(i => i.uid === file.uid)
+        const index = this.fileList.findIndex((i) => i.uid === file.uid)
 
         // 通过uid找到对应的数据，更新其url字段
         if (index > -1) {
@@ -207,7 +228,7 @@ export default {
 
       if (!result) {
         const uid = file.uid
-        this.fileList = this.fileList.filter(item => item.uid !== uid)
+        this.fileList = this.fileList.filter((item) => item.uid !== uid)
       }
 
       return result

package/dist/imui/src/FormComponents/upload/ImMultiImgUploadList.vue

@@ -1,6 +1,18 @@
 <template>
   <div>
-    <div v-if="isView && !uploadedImageList.length"></div>
+    <div v-if="isView">
+      <!--提示信息-->
+      <div v-if="attrs.tipText && !isView" class="upload-tip" v-html="attrs.tipText"></div>
+      <!--文件列表-->
+      <div class="img-list">
+        <div v-for="(item, index) in uploadedImageList" :key="index" class="item-view">
+          <el-image :src="item" class="file-img-view" />
+          <div class="operate">
+            <i class="el-icon-view" @click="showImgView({url: item})"></i>
+          </div>
+        </div>
+      </div>
+    </div>
     <el-upload
       v-else
       ref="upload"
@@ -16,17 +28,8 @@
       :before-upload="onBeforeUpload"
       v-on="listeners"
     >
-      <div v-if="isView" class="imageHolder" @click.stop="stopClick">
-        <div v-for="(item, index) in uploadedImageList" :key="index">
-          <el-image style="width: 146px; height: 146px" :src="item" fit="cover"></el-image>
-          <div class="operate">
-            <i class="el-icon-view" @click="showImgView({ url: item })"></i>
-            <i v-if="!attrs.disabled && !isView" class="el-icon-delete" @click.stop="handleRemove"></i>
-          </div>
-        </div>
-      </div>
-      <i v-else class="el-icon-plus"></i>
-      <div v-if="!attrs.disabled && !isView" slot="tip" class="el-upload__tip">
+      <i class="el-icon-plus"></i>
+      <div v-if="!attrs.disabled" slot="tip" class="el-upload__tip">
         {{ attrs.tipText || '请上传.png,.jpg,.jpeg,.gif,.svg格式文件，且不超过20M' }}
       </div>
     </el-upload>
@@ -161,37 +164,42 @@ export default {
     display: none;
   }
 }
-
-.imageHolder {
-  position: relative;
+.img-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
   width: 100%;
-  height: 100%;
-
-  .operate {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    text-align: center;
-    opacity: 0;
-    transition: all 0.2s;
-    height: 146px;
-    line-height: 146px;
-    cursor: pointer;
-
-    i {
-      padding: 4px;
-      color: white;
-      font-size: 24px;
+  .item-view {
+    position: relative;
+    width: 148px;
+    height: 148px;
+    .file-img-view {
+      width: 148px;
+      height: 148px;
     }
   }
+}
+.operate {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  opacity: 0;
+  transition: all 0.2s;
 
-  &:hover {
-    .operate {
-      display: block;
-      background: rgba(0, 0, 0, 0.5);
-      opacity: 1;
-    }
+  i {
+    padding: 4px;
+    color: white;
+    font-size: 24px;
+    margin-top: 60px;
+    cursor: pointer;
   }
 }
+.operate:hover {
+  display: block;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 1;
+}
 </style>

package/dist/imui/src/FormComponents/upload/ImMultiVideoUpload.vue

@@ -0,0 +1,371 @@
+<template>
+  <!-- 录屏组件容器 -->
+  <div class="record-screen">
+    <!-- 预览列表区域 -->
+    <div class="preview-list">
+      <!-- 遍历已录制视频列表,显示预览项 -->
+      <div v-for="(recordingUrl, index) in fileList" :key="index" class="preview-item">
+        <!-- 如果有视频URL则显示视频预览 -->
+        <video v-if="recordingUrl" autoplay :src="recordingUrl.url" class="video-preview" />
+        <!-- 加载中状态显示loading -->
+        <ImLoading v-else />
+        <!-- 播放按钮 -->
+        <div v-if="recordingUrl" class="play-btn" @click="playVideo(recordingUrl)">
+          <img src="https://udstatic.imeik.com/pcUploads/1732257019241/play-icon.png" alt="播放" />
+        </div>
+        <!-- 预览项操作按钮区域 -->
+        <div v-if="recordingUrl" class="preview-actions">
+          <!-- 删除按钮 -->
+          <span class="close-btn" @click="removeRecording(index)">
+            <img src="https://udstatic.imeik.com/pcUploads/1732247355378/delete-icon.png" alt="删除" />
+          </span>
+        </div>
+      </div>
+      <!-- 录制按钮,当录制数量小于最大限制时显示 -->
+      <el-upload
+        v-if="!isView && fileList.length < maxfileList"
+        action
+        :multiple="true"
+        :show-file-list="false"
+        accept=".mp4,.ogg,.flv,.avi,.wmv,.rmvb,.webm"
+        :http-request="fnUploadRequest"
+        :on-success="handleSuccess"
+        :before-upload="onBeforeUpload"
+        :on-change="handleChange"
+        v-on="listeners"
+      >
+        <div class="record-btn" @click="startRecording">
+          <i class="el-icon-plus" style="font-size: 28px; color:#8c939d"></i>
+        </div>
+      </el-upload>
+    </div>
+    <div v-if="!isView" slot="tip" class="el-upload__tip">请上传视频文件，文件小于3GB</div>
+    <!-- 视频播放弹窗 -->
+    <el-dialog title="视频播放" :visible.sync="dialogVisible" width="900px" append-to-body :before-close="handleClose">
+      <!-- 视频播放器 -->
+      <video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width: 100%"></video>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { beforeUpload, fnUploadRequest } from './upload.js'
+export default {
+  name: 'RecordScreen',
+  // 组件属性定义
+  props: {
+    value: {
+      type: Array,
+      default: () => [] // 默认空数组
+    },
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  // 组件内部数据
+  data() {
+    return {
+      fileList: [], // 录制视频列表
+      isRecording: false, // 是否正在录制
+      mediaRecorder: null, // 媒体录制器实例
+      recordedChunks: [], // 录制的视频数据块
+      error: '', // 错误信息
+      maxfileList: 5, // 最大录制数量限制
+      dialogVisible: false, // 视频播放弹窗显示状态
+      currentVideoUrl: '' // 当前播放的视频URL
+    }
+  },
+  computed: {
+    isView() {
+      return this.attrs.isView
+    }
+  },
+  // 监听属性变化
+  watch: {
+    value: {
+      handler(newVal) {
+        this.setMyValue(newVal)
+      },
+      immediate: true // 组件创建时立即执行一次
+    }
+  },
+  methods: {
+    // 设置组件内部的fileList值
+    setMyValue(newVal) {
+      try {
+        this.fileList = JSON.parse(JSON.stringify(newVal))
+      } catch (err) {
+        this.fileList = []
+      }
+    },
+
+    // 开始录制
+    async startRecording() {
+      this.error = ''
+      try {
+        // 上传文件
+        fnUploadRequest({
+          file,
+          onSuccess: (res) => {
+            console.log('res', res)
+            // 更新视频URL
+            this.$set(this.fileList, this.fileList.length - 1, res.url)
+            this.isRecording = false
+          },
+          onError: (err) => {
+            this.error = err.message || '截屏失败，请重试'
+            this.isRecording = false
+          }
+        })
+        // 检查录制数量限制
+        if (this.fileList.length >= this.maxfileList) {
+          throw new Error(`最多只能上传${this.maxfileList}个录屏`)
+        }
+      } catch (err) {
+        this.$emit('endRecord')
+        if (err.message === 'Permission denied') {
+          this.error = '操作权限被阻止'
+        } else {
+          this.error = err.message || '录屏失败，请重试'
+        }
+        this.isRecording = false
+      }
+    },
+    // 删除指定索引的录制视频
+    removeRecording(index) {
+      URL.revokeObjectURL(this.fileList[index].url) // 释放URL对象
+      this.fileList.splice(index, 1)
+      this.onUpdate() // 通知父组件值变化
+    },
+
+    // 播放视频
+    playVideo(videoUrl) {
+      this.currentVideoUrl = videoUrl
+      this.dialogVisible = true
+    },
+
+    // 关闭视频播放弹窗
+    handleClose() {
+      this.dialogVisible = false
+      this.currentVideoUrl = ''
+    },
+
+    onBeforeUpload(file) {
+      if (this.fileList.length > this.attrs.limit) {
+        this.$message.warning(`最多上传${this.attrs.limit}个文件`)
+        return false
+      }
+
+      // 默认上传文件限制2GB
+      const result = beforeUpload(file, this.attrs.fileSize || 2048)
+
+      if (!result) {
+        const uid = file.uid
+        this.fileList = this.fileList.filter((item) => item.uid !== uid)
+      }
+
+      return result
+    },
+    // 上传成功回调
+    handleSuccess(res, file) {
+      if (res) {
+        const index = this.fileList.findIndex((i) => i.uid === file.uid)
+
+        // 通过uid找到对应的数据，更新其url字段
+        if (index > -1) {
+          this.$set(this.fileList[index], 'url', res.url)
+        }
+
+        this.onUpdate()
+      }
+    },
+
+    onUpdate() {
+      const fileArr = JSON.parse(JSON.stringify(this.fileList))
+      console.log('input-fileArr', fileArr)
+      this.$emit('input', fileArr)
+    },
+
+    handleChange(file) {
+      if (this.fileList.length >= this.attrs.limit) {
+        return
+      }
+
+      if (!this.fileList.find((i) => i.uid === file.uid)) {
+        this.fileList.push({
+          uid: file.uid,
+          name: file.name
+        })
+      }
+    },
+    fnUploadRequest
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.record-screen {
+  // 预览列表样式
+  .preview-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+
+    // 预览项样式
+    .preview-item {
+      position: relative;
+      width: 228px;
+      height: 148px;
+      border-radius: 5px;
+      border: 1px solid #d9d9d9;
+      text-align: center;
+      line-height: 128px;
+
+      // 视频预览样式
+      .video-preview {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      // 预览项遮罩层
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        z-index: 1;
+        border-radius: 5px;
+      }
+
+      // 播放按钮样式
+      .play-btn {
+        position: absolute;
+        z-index: 3;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 45px;
+        height: 45px;
+        cursor: pointer;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.5);
+        }
+      }
+
+      // 预览项操作按钮样式
+      .preview-actions {
+        position: absolute;
+        z-index: 3;
+        top: -8px;
+        right: -8px;
+
+        // 删除按钮样式
+        .close-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 16px;
+          height: 16px;
+          cursor: pointer;
+          padding: 0;
+
+          img {
+            width: 16px;
+            height: 16px;
+          }
+
+          &:hover {
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+
+    // 录制按钮样式
+    .record-btn {
+      display: flex;
+      flex-direction: column;
+      gap: 13px;
+      align-items: center;
+      justify-content: center;
+      width: 148px;
+      height: 148px;
+      border: 1px dashed #c0ccda;
+      border-radius: 6px;
+      background-color: #fbfdff;
+      cursor: pointer;
+
+      &:hover {
+        border-color: #40a9ff;
+      }
+
+      // 录制中状态样式
+      &.is-recording {
+        border-color: #ff4d4f;
+        animation: pulse 2s infinite;
+      }
+
+      .icon-record {
+        width: 26px;
+        height: 20px;
+        display: block;
+      }
+
+      .text {
+        font-size: 12px;
+        color: #999999;
+        line-height: 14px;
+        display: block;
+        margin-top: 20px;
+      }
+    }
+  }
+
+  // 错误提示样式
+  .error-tip {
+    margin-top: 8px;
+    color: #ff4d4f;
+    font-size: 12px;
+  }
+}
+
+// 录制中动画
+@keyframes pulse {
+  0% {
+    border-color: #ff4d4f;
+  }
+  50% {
+    border-color: #ffccc7;
+  }
+  100% {
+    border-color: #ff4d4f;
+  }
+}
+</style>

package/dist/imui/src/FormComponents/upload/widgets/PdfPreviewDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog title="文件预览" fullscreen :visible.sync="pdfDialogShow">
+    <div class="pdfContainer">
+      <VuePdfEmbed class="item" :source="url"></VuePdfEmbed>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
+export default {
+  components: {
+    VuePdfEmbed
+  },
+  data() {
+    return {
+      pdfDialogShow: false,
+      url: undefined
+    }
+  },
+  methods: {
+    show({ url }) {
+      this.url = url
+      this.pdfDialogShow = true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/deep/ .el-dialog__body {
+  padding: 0px !important;
+
+  iframe {
+    border: none;
+    height: calc(100vh - 45px);
+  }
+}
+/deep/ .el-dialog__header {
+
+  .el-dialog__close {
+    font-size: 24px;
+    display: block;
+    top: -5px;
+    right: 0px;
+  }
+}
+.pdfContainer {
+  width: 100%;
+  // header 高度 55px
+  height: calc(100vh - 55px);
+  overflow: auto;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imeik-imui",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "ch_name": "imeik基础UI组件库-PC端",
   "scripts": {
     "dev": "vue-cli-service serve --mode dev",