添加了附件预览功能

fei

22 小时以前 27102f4aa86130dae8239347eac8af934642d530

 src/views/archiveManager/archiveMaterial/index.vue

@@ -253,7 +253,7 @@
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            @click.native.stop="handleAdd"
            v-hasPermi="['system:materials:add']"
          >搜索</el-button>
        </el-col>
@@ -338,10 +338,13 @@
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleImport"

          v-hasPermi="['system:materials:edit']"
          @click.stop="openImageGallery"
        >查看附件</el-button>

      </el-col>

      <el-col :span="1.2">
              <el-button
              v-if="sho"
@@ -349,7 +352,7 @@
                plain
                icon="el-icon-edit"
                size="mini"
                @click="handleImport"
                @click.stop="handleImport"
                v-hasPermi="['system:materials:edit']"
              >全部附件导入</el-button>
              已经上传了 {{this.fileCut}} 张附件，还要上传 {{this.totalPageCount-this.fileCut}} 张附件
@@ -384,7 +387,13 @@

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

   <ImageGalleryDialog
           title="图片管理"
           :opensd="showImageDialog"
           :images="imageList"
           @update:opensd="showImageDialog = $event"
           @confirm="handleConfirm"
         />
      <el-table v-loading="loading" :data="materialsList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column v-if="sho" label="操作" align="center" width="160" class-name="small-padding ">
@@ -827,13 +836,63 @@
import { updateStatusById } from "@/api/system/records"

import {delArchiverecordstouserByReIdAndUid} from "@/api/system/archiverecordstouser"
import ImageGalleryDialog from './ImageGalleryDialog';



  export default {
    name: "ArchiveMaterialManager",
     components: {
        // 3. 检查组件注册
        ImageGalleryDialog
      },
    data() {
      return {
         showImageDialog: false,
              imageList: [
                {
                  id: 1,
                  url: 'https://example.com/image1.jpg',
                  name: '示例图片1.jpg',
                  size: 102400,
                  isCover: true
                },
                {
                  id: 2,
                  url: 'https://example.com/image1.jpg',
                  name: '示例图片1.jpg',
                  size: 102400,
                  isCover: true
                },
                {
                  id: 3,
                  url: 'https://example.com/image1.jpg',
                  name: '示例图片1.jpg',
                  size: 102400,
                  isCover: true
                },
                {
                  id: 4,
                  url: 'https://example.com/image1.jpg',
                  name: '示例图片1.jpg',
                  size: 102400,
                  isCover: true
                },
                {
                  id: 5,
                  url: 'https://example.com/image1.jpg',
                  name: '示例图片1.jpg',
                  size: 102400,
                  isCover: true
                },
                {
                  id: 6,
                  url: 'https://example.com/image1.jpg',
                  name: '示例图片1.jpg',
                  size: 102400,
                  isCover: true
                }
              ],
        //附件数量
        fileCut: 0,
        //是否显示相关内容
@@ -1080,6 +1139,22 @@
      }
    },
    methods: {
      // 打开图片管理对话框
          openImageGallery(event) {
          // 确保每次都能触发
             if (this.showImageDialog) {
               // 如果已经是打开状态，先关闭再打开
               this.showImageDialog = false;
               this.$nextTick(() => {
                 this.showImageDialog = true;
               });
             } else {
               this.showImageDialog = true;
             }
          },
      handleConfirm(data) {
            console.log('确认数据:', data);
          },
    handleTabKey (event) {
     // 默认行为
     event.preventDefault()