审批界面增加pdf，图片预览功能

yangys

2025-11-27 f97351a6f1fdc679f4956030d179dca843bbeb0c

 src/views/statreport/sendrecord.vue

@@ -17,18 +17,23 @@
          @on-load="onLoad"
        >
        
      <template #search="{ disabled, size }">
              
      </template>
        <template #menu="scope">
            <el-button type="primary" text size="default" @click.stop="showContent(scope.row)">查看</el-button>
            <el-button type="primary" text size="default" @click.stop="download(scope.row, scope.index)">下载</el-button>     
        </template>
          <template #menu-left>
            <div class="menuLeft">
              <el-button type="primary" size="default" icon="el-icon-circle-plus" plain @click="handleExport">导出</el-button>
              <el-button type="primary" size="default" icon="el-icon-download" plain @click="handleExport">导出</el-button>
              <el-button type="primary" size="default" icon="el-icon-compass" plain @click="preMonth">上月</el-button>
              <el-button type="primary" size="default" icon="el-icon-aim" plain @click="thisMonth">本月</el-button>
            </div>
          </template>

        </avue-crud>

        <el-dialog title="程序内容" append-to-body v-model="fileViewModel">
            <div v-html="appContent" class="app-content"></div>
        </el-dialog>
      </basic-container>
</template>

@@ -37,7 +42,7 @@
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
import dayjs from 'dayjs';
import { downloadXls } from '@/utils/util';
import { downloadXls,downloadFile } from '@/utils/util';
import 'nprogress/nprogress.css';
import { getDeptLazyTree } from '@/api/system/dept';
export default {
@@ -83,11 +88,12 @@
      },
      loading: true,
      mypage: {
        size: 10,
        current: 1,
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },

      fileViewModel:false,
      appContent:'',
      option: {
        index: true,
        addBtn: false,
@@ -97,7 +103,7 @@
        emptyBtn: false,
        searchSpan: 8,
        searchEnter:true,
        menu:false,
        menu: true,
        column: [
          
          {
@@ -136,13 +142,42 @@
    };
  },
  methods: {
    
    showContent(row) {
      this.fileViewModel = true;
      this.appContent = '';
      axios({
        url: '/blade-mdm/ossfile/file-content',
        method: 'get',
        params: {ossFileName: row.ossName}
      }).then(
      res => {
        //console.log(res)
        if(res.data.code === 200) {
            this.appContent = res.data.data;
        } else {
            this.appContent = '程序内容加载失败'
        }
      });
    },
    download(row){
      exportBlob(
          `/blade-mdm/machinefile/sendrecord/download-by-id?id=${row.id}&${this.website.tokenHeader}=${getToken()}`,
          
        ).then(res => {
          
          let name = res.headers['content-disposition'].split('filename=')[1]
          //console.log(res.headers['content-disposition'].split('filename=')[1]);
          name = decodeURI(name)
          downloadFile(res.data, `${name}`);
          NProgress.done();
        });
    },
    handleChange(a,b,c) {
      console.log(a,b,c);
    },
    nodeClick(data) {
      //this.treeDeptId = data.id;
      this.mypage.current = 1;
      this.mypage.currentPage = 1;
      this.onLoad(this.page);
    },
    getQueryObj(){
@@ -152,6 +187,8 @@
          param.createTimeBegin = param.createTime[0];
          param.createTimeEnd = param.createTime[1];
        }
        param.current = this.mypage.currentPage;
        param.size = this.mypage.pageSize;
        return param;
    },
    handleExport() {
@@ -182,15 +219,15 @@
      //this.onLoad(this.mypage);
    },
    searchChange(params, done) {
      this.mypage.current = 1;
      this.mypage.currentPage = 1;
      this.onLoad();
      done();
    },
    currentChange(current) {
      this.mypage.current = current;
      this.mypage.currentPage = current;
    },
    sizeChange(size) {
      this.mypage.size = size;
      this.mypage.pageSize = size;
    },
    refreshChange() {
      
@@ -260,4 +297,13 @@
  display: flex;
  align-items: center;
}

.app-content {
  background-color: #fffee1;
  padding: 10px 30px;
  min-height: 100px;
  overflow: auto;
  max-height: 400px;
  white-space: pre-wrap;
}
</style>