附件增加预览

huminmin

2 天以前 c13755aaf787506493aa5f08fbe18a9611d4833c

附件增加预览

 src/components/Dialog/FileList.vue

@@ -36,9 +36,16 @@
        <el-table-column v-if="showActions"
                         fixed="right"
                         label="操作"
                         :width="120"
                         :width="150"
                         align="center">
          <template #default="scope">
            <el-button link
                       type="primary"
                       size="small"
                       class="download-link"
                       @click="previewFile(scope.row.previewURL)">
              预览
            </el-button>
            <el-button link
                       type="primary"
                       size="small"
@@ -58,9 +65,11 @@
      </el-table>
    </div>
  </el-dialog>
  <filePreview ref="filePreviewRef" />
</template>

<script setup>
import { ElMessage } from 'element-plus'
  import { ref, computed, getCurrentInstance, onMounted, watch } from "vue";
  import AttachmentUpload from "@/components/AttachmentUpload/file/index.vue";
  import {
@@ -68,6 +77,8 @@
    deleteAttachment,
    createAttachment,
  } from "@/api/basicData/storageAttachment.js";
  import filePreview from '@/components/filePreview/index.vue'
  const filePreviewRef = ref()

  const props = defineProps({
    visible: {
@@ -122,6 +133,15 @@
    isShow.value = false;
  };

  // 预览文件
  const previewFile = (url) => {
    if (url) {
      filePreviewRef.value.open(url)
    } else {
      ElMessage.warning('文件地址无效，无法预览')
    }
  }

  const handleUpload = () => {
    uploadDialogVisible.value = true;
  };