添加了附件预览功能

fei

4 天以前 27102f4aa86130dae8239347eac8af934642d530

 src/views/archiveManager/archiveMaterial/index.vue

@@ -2,7 +2,7 @@
    <div class="app-container">

      <div v-if="sho">
         <h2 class="title-border">添加案卷详细记录   {当前录入了{{total}}条}  {当前档号为： {{recordStrId}} } {当前文号为： {{inquiryNumber}} }  </h2>
         <h2 class="title-border">添加案卷详细记录   {录入了{{total}}条}  { {{recordStrId}} } { {{inquiryNumber}} } { {{filingNumber}} }  </h2>
 <el-form ref="form" :model="form" :rules="rules" label-width="100px">

   <el-row>
@@ -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>
@@ -280,7 +280,7 @@

          >导出卷内目录</el-button>
        </el-col>
        <el-col :span="1.5">
        <el-col :span="1.2">
          <el-button
            type="warning"
            plain
@@ -316,7 +316,7 @@
        >导入模板下载</el-button>
      </el-col>

        <el-col      v-if="sho" :span="1.5">
        <el-col      v-if="sho" :span="1.2">

        <el-upload
          action=""
@@ -333,14 +333,26 @@

        </el-upload>
      </el-col>
      <el-col :span="1.5">
      <el-col  :span="1.1">
        <el-button type="success"
          plain
          icon="el-icon-edit"
          size="mini"

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

      </el-col>

      <el-col :span="1.2">
              <el-button
              v-if="sho"
                type="success"
                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}} 张附件
@@ -371,9 +383,17 @@
        </el-upload>
      </el-dialog>
            </el-col>


        <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 ">
@@ -457,15 +477,17 @@
              <el-input v-model="forms.documentNumber" placeholder="请输入文件编号" />
            </el-form-item>
           <el-row>
           <el-col :span="16">
           <el-col >
               <el-form-item label="责任者" prop="creator">
                   <el-input type="textarea" rows="1" v-model="forms.creator" placeholder="请输入责任者" />
                   <el-input type="textarea"          rows="2"
                    v-auto-height="{ minRows: 2, maxRows: 10 }" v-model="forms.creator" placeholder="请输入责任者" />
                 </el-form-item>
           </el-col>

           </el-row>
           <el-form-item label="文件题名" prop="title">
             <el-input type="textarea" rows="1" v-model="forms.title" placeholder="请输入文件题名" />
             <el-input type="textarea"          rows="2"
                    v-auto-height="{ minRows: 2, maxRows: 10 }" v-model="forms.title" placeholder="请输入文件题名" />
           </el-form-item>
                 <el-form-item label="日期" prop="date">
                  <el-input v-model="forms.date" placeholder="请输入日期 (格式：yyyy-mm-dd)" style="width: 200px;" />
@@ -814,13 +836,63 @@
import { updateStatusById } from "@/api/system/records"

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



  export default {
    name: "Materials",
    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,
        //是否显示相关内容
@@ -889,6 +961,7 @@
        ],
        recordId: null,
        inquiryNumber: '',
        filingNumber: '',
        recordStrId: '',
        // 遮罩层
        loading: true,
@@ -920,7 +993,7 @@
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pageSize: 50,
          creator: null,
          title: null,
          date: null,
@@ -1036,6 +1109,7 @@
      const recordId = this.$route.params && this.$route.params.recordId
      this.recordStrId = this.$route.params && this.$route.params.recordStrId
      this.inquiryNumber = this.$route.params && this.$route.params.inquiryNumber
      this.filingNumber = this.$route.params && this.$route.params.filingNumber
      this.totalPageCount = this.$route.params && this.$route.params.pageCount

      this.sho = this.$route.params && this.$route.params.sho
@@ -1065,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()
@@ -1652,14 +1742,14 @@
          this.download('system/materials/exportDir', {
            ids: this.ids.join(','),
         //   exportType: 'selected'
          }, `materiaDir_selected_${new Date().getTime()}.xls`)
          }, this.recordStrId+ `  卷内目录.xls`)
        } else {
          // 显示导出全部数据的提示
          this.$message.info('正在导出符合当前查询条件的所有数据...');
          // 没有选中行时，导出当前查询条件的数据
          this.download('system/materials/exportDir', {
            ...this.queryParams
          }, `materiaDir_${new Date().getTime()}.xls`)
          }, this.recordStrId+`  卷内目录.xls`)
        }
      },
      /** 导出按钮操作 - 支持导出选中行或全部数据 */
@@ -1672,14 +1762,14 @@
          this.download('system/materials/export', {
            ids: this.ids.join(','),
         //   exportType: 'selected'
          }, `materials_selected_${new Date().getTime()}.xls`)
          }, this.recordStrId+`  电子文件信息.xls`)
        } else {
          // 显示导出全部数据的提示
          this.$message.info('正在导出符合当前查询条件的所有数据...');
          // 没有选中行时，导出当前查询条件的数据
          this.download('system/materials/export', {
            ...this.queryParams
          }, `materials_${new Date().getTime()}.xls`)
          }, this.recordStrId+`  电子文件信息.xls`)
        }
      },

@@ -1734,7 +1824,7 @@
      // alert(userId)
      // alert(this.queryParams.archiveRecordsId)
      // alert(row.sysUser.userName)
      this.$modal.confirm('确认要取消该用户的"' + '' + '"授权吗？').then(function() {
      this.$modal.confirm('确认要取消该用户的授权吗？').then(function() {
        return delArchiverecordstouserByReIdAndUid({  recordId: recordId, userId: userId   })
      }).then(() => {
      //  this.getList()