Merge remote-tracking branch 'origin/master'

gaoluyang

2024-09-24 a6578489fa9238156c2f5614cacc6ce193a54780

Merge remote-tracking branch 'origin/master'

 src/assets/api/controller.js

@@ -216,6 +216,7 @@
  getInsProduct2: "/insOrderPlan/getInsProduct2", // æŸ¥çœ‹åŽ†å²ç‰ˆæœ¬æœ¬
  scanInsOrderState: "/insOrderPlan/scanInsOrderState", // æ‰«ç æŠ¥æ£€æŽ¥å£
  getInsOrderUserList: "/insOrderPlan/getInsOrderUserList", // æŸ¥çœ‹æ£€éªŒåŽ†å²åˆ—表
  preview: "/insOrderPlan/preview", // csv文件预览
}

const systemLog = {

 src/components/do/b1-inspect-order-plan/Inspection.vue

@@ -717,7 +717,7 @@
      }"
      v-if="state==1&&fileAdd"
      :on-success="handleSuccessUp" :show-file-list="false"
        accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar,.csv' :headers="headers" :on-change="beforeUpload"
        accept='.jpg,.jpeg,.png,.gif,.docx,.xls,.xlsx,.pdf,.zip,.rar,.csv' :headers="headers" :on-change="beforeUpload"
        style="width: 80px !important;"
        :on-error="onError" ref='upload'>
        <el-button size="small" type="primary" v-if="state==1">附件上传</el-button></el-upload>
@@ -855,6 +855,13 @@
        <el-button type="primary" @click="submit0">ç¡® å®š</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="文件预览"
      :visible.sync="lookFileVisible"
      width="60%" fullscreen>
      <filePreview v-if="lookFileVisible" :fileUrl="currentFile.url"
      :currentFile="currentFile" style="max-height: 87vh;overflow-y: auto;"/>
    </el-dialog>
  </div>
</template>

@@ -865,16 +872,19 @@
  import excelFunction from '../../../util/excelFountion'
  import CircuitParameters1 from './circuit-parameters1.vue'
  import CircuitParameters2 from './circuit-parameters2.vue'
  import filePreview from '../../tool/file-preview.vue'
  export default {
    props: ['sonLaboratory', 'orderId', 'state','inspectorList','version','orderStateId','isLook','num1','noBack'],
    components: {
      ValueTable,
      Circuit,
      CircuitParameters1,
      CircuitParameters2
      CircuitParameters2,
      filePreview
    },
    data() {
      return {
        lookFileVisible:false,//预览文件
        experimentDia:false,
        experimentInfo:{
          note:'',
@@ -944,6 +954,12 @@
            disabFun: (row, index) => {
                                return this.state!=1
                            }
                    },
          {
                        id: '1',
                        font: '预览',
                        type: 'text',
                        method: 'lookFile',
                    }
          ],
          isPage: false,
@@ -1054,7 +1070,8 @@
        otherForm:{
          temperature:'',
          humidity:''
        }
        },
        currentFile:{},//当前文件
      }
    },
    // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
@@ -3596,6 +3613,15 @@
        await this.handleChangeSample(this.currentSample)
        this.currentNum++
        this.tableLoading = false
      },
      lookFile(row){
        this.currentFile = row;
        if(row.type==1){
          this.currentFile.url = this.javaApi+'/img/'+row.fileUrl
        }else{
          this.currentFile.url = this.javaApi+'/word/'+row.fileUrl
        }
        this.lookFileVisible = true
      }
    }
  }

 src/components/tool/file-preview.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,214 @@
<template>
  <div>
    <div v-if="isImage">
      <img :src="fileUrl" alt="Image Preview" />
    </div>
    <div v-if="isPdf">
      <object :data="fileUrl" type="application/pdf" width="100%" height="600px">
        <p>您的浏览器不支持 PDF é¢„览。<a :href="fileUrl">下载 PDF æ–‡ä»¶</a></p>
      </object>
    </div>
    <div v-if="isDoc">
      <p v-if="!isDocShow">文档无法直接预览，请下载查看。</p>
      <a :href="fileUrl" v-if="!isDocShow">下载文件</a>
      <vue-office-docx
          :src="fileUrl"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
      />
    </div>
    <div v-if="isXls">
      <p v-if="!isDocShow">文档无法直接预览，请下载查看。</p>
      <a :href="fileUrl" v-if="!isDocShow">下载文件</a>
      <vue-office-excel
        :src="fileUrl"
        :options="options"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
    </div>
    <div v-if="isZipOrRar">
      <p>压缩文件无法直接预览，请下载查看。</p>
      <a :href="fileUrl">下载文件</a>
    </div>
    <div v-if="isCsv">
      <p v-if="csvList.length==0">CSV æ–‡ä»¶æ— æ³•ç›´æŽ¥é¢„览，请下载查看。</p>
      <a :href="fileUrl" v-if="csvList.length==0">下载文件</a>
      <el-tabs type="border-card" v-if="csvList.length>0" tab-position="bottom">
        <el-tab-pane :label="item.sheetName" v-for="(item,index) in csvList" :key="index">
          <el-table :data="item.tableData" height="75vh">
            <el-table-column :label="m.label" :prop="m.prop" v-for="(m,i) in item.column" :key="i" min-width="120px" show-overflow-tooltip>
              <template slot-scope="scope" slot="header">
                <div>
                  <el-tooltip  :content="m.label" placement="top">
                    <div class="oneLine">
                      <span>{{m.label}}</span>
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="!isSupported">
      <p>不支持的文件格式</p>
    </div>
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
  },
  props: {
    fileUrl: {
      type: String,
      required: true
    },
    currentFile: {
      type: Object,
      required: true
    },
  },
  data(){
    return {
      isDocShow:true,
      options:{
        xls: false,       //预览xlsx文件设为false；预览xls文件设为true
        minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
        minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
        widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
        heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
        beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
        transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
      },
      csvList:[],//csv文件数据
    }
  },
  computed: {
    isImage() {
      return /\.(jpg|jpeg|png|gif)$/i.test(this.fileUrl);
    },
    isPdf() {
      return /\.pdf$/i.test(this.fileUrl);
    },
    isDoc() {
      return /\.(doc|docx)$/i.test(this.fileUrl);
    },
    isXls(){
      return /\.(xls|xlsx)$/i.test(this.fileUrl);
    },
    isZipOrRar() {
      return /\.(zip|rar)$/i.test(this.fileUrl);
    },
    isCsv() {
      let state = /\.csv$/i.test(this.fileUrl)
      if(state){
        this.loadCSVData();
        // this.main()
      }
      return state;
    },
    isSupported() {
      return this.isImage || this.isPdf || this.isDoc || this.isZipOrRar || this.isCsv||this.isXls;
    }
  },
  methods:{
    renderedHandler() {
        console.log("渲染完成")
        this.isDocShow = true
    },
    errorHandler() {
        console.log("渲染失败")
        this.isDocShow = false
    },
    async loadCSVData() {
      this.$axios.post(this.$api.insOrderPlan.preview, {
        id: this.currentFile.id,
      }).then( res => {
        let arr = res.data
        arr = arr.map(m=>{
          let obj = {
            sheetName:m.sheetName,
            tableData:[],
            column:[]
          }
          obj.tableData = this.formatCSVToTable(m.content.replaceAll('null',' '))
          for (let item in obj.tableData[0]) {
            obj.column.push({
              label: item,
              prop: item,
            })
          }
          return obj
        })
        this.csvList = arr
        console.log(4444,this.csvList)
      }).catch( err => {
        console.log(err)
      })
    },
    formatCSVToTable(str){
      const result = [];
      const jsonObj = str.split("\n");
      let arrHeader = [];
      for (const i in jsonObj) {
        if (typeof jsonObj[i] === 'string' && jsonObj[i].length > 0) {
          const row = `${jsonObj[i]}`;
          if (row.trim().length > 0) {
            const kv = jsonObj[i].split(',');
            if (i == 0) {
              // èŽ·å–column表头
              arrHeader = kv;
            } else {
              const obj = {};
              for (let index = 0; index < arrHeader.length; index++) {
                // ç»„装表格数据
                const name = String(arrHeader[index]);
                if (!arrHeader[index]) continue
                if (!obj[name]) {
                  try {
                    if (kv[index]) {
                      obj[name] = String(kv[index]);
                    } else {
                      obj[name] = '';
                    }
                  } catch (err) {
                    obj[name] = '';
                  }
                }
              }
              result.push(obj);
            }
          }
        }
      }
      return result
    },
  }
}
</script>

<style scoped>
img {
  max-width: 100%;
}

.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>