修改检验任务分页和文件预览

spring

2025-04-02 b34e4348df3f9f697fcb4da64ee7ff11deca3170

修改检验任务分页和文件预览

 src/components/do/a8-file-handling/DistributionCollectionRecord.vue

@@ -4,8 +4,8 @@
    <div class="search">
      <div class="search_thing">
        <div class="search_label">文件编号：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentCode"
            @keyup.enter.native="refreshTable()"></el-input></div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable
            v-model="componentData.entity.documentCode" @keyup.enter.native="refreshTable()"></el-input></div>
      </div>
      <div class="search_thing">
        <div class="search_label">文件名称：</div>
@@ -17,44 +17,36 @@
        <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
      </div>
      <div class="btns" style="padding-left: 30px;">
        <el-button size="small" type="primary" @click="addDialogVisible=true,addInfo={},radio='发放'" v-if="addPower">添加发放记录</el-button>
        <el-button size="small" type="primary" @click="addDialogVisible = true, addInfo = {}, radio = '发放'"
          v-if="addPower">添加发放记录</el-button>
        <el-button size="small" type="primary" v-if="outPower" @click="handleOut" :loading="outLoading">导出</el-button>
      </div>
    </div>
    <div class="table">
      <ValueTable ref="ValueTable" :url="$api.manageDocumentList.pageManageDocumentIssueRecycle"
        :componentData="componentData" :delUrl="$api.manageDocumentList.delManageDocumentIssueRecycle" :key="upIndex"/>
        :componentData="componentData" :delUrl="$api.manageDocumentList.delManageDocumentIssueRecycle" :key="upIndex" />
    </div>
    <el-dialog
      :title="'添加'+radio+'记录'"
      :visible.sync="addDialogVisible"
      width="800px" top="10vh">
    <el-dialog :title="'添加' + radio + '记录'" :visible.sync="addDialogVisible" width="800px" top="10vh">
      <el-row>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>申请编号：</div>
            <div class="search_input">
              <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="changeFileList" :disabled="radio=='回收'" filterable allow-create clearable>
                <el-option
                  v-for="item in fileList"
                  :key="item.documentCode"
                  :label="item.documentCode"
              <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="changeFileList"
                :disabled="radio == '回收'" filterable allow-create clearable>
                <el-option v-for="item in fileList" :key="item.documentCode" :label="item.documentCode"
                  :value="item.documentCode">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='发放'">
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '发放'">
          <div class="search_thing">
            <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>发放人：</div>
            <div class="search_input">
              <el-select v-model="addInfo.issueUser" size="small" style="width: 100%;" filterable>
                <el-option
                  v-for="item in personList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                <el-option v-for="item in personList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
@@ -65,11 +57,7 @@
            <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>回收人：</div>
            <div class="search_input">
              <el-select v-model="addInfo.recycleUser" size="small" style="width: 100%;" filterable>
                <el-option
                  v-for="item in personList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                <el-option v-for="item in personList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
@@ -79,12 +67,9 @@
          <div class="search_thing">
            <div class="search_label"><span style="color:red;margin-right: 4px;">*</span>审批人：</div>
            <div class="search_input">
              <el-select v-model="addInfo.receiveUser" size="small" style="width: 100%;" :disabled="radio!='发放'" filterable>
                <el-option
                  v-for="item in personList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              <el-select v-model="addInfo.receiveUser" size="small" style="width: 100%;" :disabled="radio != '发放'"
                filterable>
                <el-option v-for="item in personList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
@@ -93,48 +78,48 @@
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.name" :disabled="radio=='回收'"></el-input></div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.name"
                :disabled="radio == '回收'"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件版本：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.version" :disabled="radio=='回收'"></el-input></div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.version"
                :disabled="radio == '回收'"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件状态：</div>
            <div class="search_input">
              <el-select v-model="addInfo.state" size="small" style="width: 100%;" :disabled="radio=='回收'">
                <el-option :label="item.label" :value="item.value" v-for="(item,index) in fileState" :key="index"></el-option>
              <el-select v-model="addInfo.state" size="small" style="width: 100%;" :disabled="radio == '回收'">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in fileState"
                  :key="index"></el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='发放'">
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '发放'">
          <div class="search_thing">
            <div class="search_label">发放编号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.issueCode"></el-input></div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                v-model="addInfo.issueCode"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-else>
          <div class="search_thing">
            <div class="search_label">回收编号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.recycleCode"></el-input></div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                v-model="addInfo.recycleCode"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='发放'">
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '发放'">
          <div class="search_thing">
            <div class="search_label">发放时间：</div>
            <div class="search_input">
              <el-date-picker
                v-model="addInfo.issueDate"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              <el-date-picker v-model="addInfo.issueDate" type="date" size="small" placeholder="选择日期"
                format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </div>
          </div>
@@ -143,42 +128,34 @@
          <div class="search_thing">
            <div class="search_label">回收时间：</div>
            <div class="search_input">
              <el-date-picker
                v-model="addInfo.recycleDate"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              <el-date-picker v-model="addInfo.recycleDate" type="date" size="small" placeholder="选择日期"
                format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='发放'">
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '发放'">
          <div class="search_thing">
            <div class="search_label">发放说明：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.issueNote" type="textarea"
              :rows="2"></el-input></div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.issueNote"
                type="textarea" :rows="2"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-else>
          <div class="search_thing">
            <div class="search_label">回收说明：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.recycleNote" type="textarea"
              :rows="2"></el-input></div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.recycleNote"
                type="textarea" :rows="2"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio=='发放'">
        <el-col :span="12" style="margin-bottom: 16px;" v-if="radio == '发放'">
          <div class="search_thing">
            <div class="search_label">上传附件：</div>
            <div class="search_input"><el-upload
            style="margin: 8px 0 0px 50px;"
              action="#"
              :auto-upload="false"
              :multiple="false"
              accept='.pdf,.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx' :on-change="handleChangeUpload">
              <el-button size="small" type="primary">上传附件</el-button>
            </el-upload></div>
            <div class="search_input"><el-upload style="margin: 8px 0 0px 50px;" action="#" :auto-upload="false"
                :multiple="false" accept='.pdf,.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx'
                :on-change="handleChangeUpload">
                <el-button size="small" type="primary">上传附件</el-button>
              </el-upload></div>
          </div>
        </el-col>
      </el-row>
@@ -187,12 +164,9 @@
        <el-button type="primary" @click="handleAdd" :loading="addLoading">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看附件"
      :visible.sync="lookDialogVisible"
      width="800px" top="5vh" fullscreen>
      <filePreview v-if="lookDialogVisible" :fileUrl="javaApi+'/word/'+currentInfo.url"
      :currentFile="{}" style="height: 90vh;overflow-y: auto;"/>
    <el-dialog title="查看附件" :visible.sync="lookDialogVisible" width="800px" top="5vh" fullscreen>
      <filePreview v-if="lookDialogVisible" :fileUrl="javaApi + '/word/' + currentInfo.url" :currentFile="{}"
        style="height: 90vh;overflow-y: auto;" />
    </el-dialog>
  </div>
</template>
@@ -208,12 +182,12 @@
  data() {
    return {
      ddPower: false,
      outPower:true,
      outPower: true,
      addInfo: {},
      addPower:true,
      addLoading:false,
      addPower: true,
      addLoading: false,
      addDialogVisible: false,
      outLoading:false,
      outLoading: false,
      componentData: {
        entity: {
          documentCode: null,
@@ -231,7 +205,7 @@
          font: '回收记录',
          type: 'text',
          method: 'handleUpdate',
          field:[],
          field: [],
          // disabFun: (row, index) => {
          //   return row.documentState=='通过'
          // }
@@ -242,7 +216,7 @@
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
            return row.documentState=='通过'
            return row.documentState == '通过'
          }
        },
        {
@@ -260,13 +234,13 @@
          type: 'text',
          method: 'handleCheck',
          disabFun: (row, index) => {
            return row.receiveUser!=JSON.parse(localStorage.getItem("user")).userId||row.documentState=='通过'
            return row.receiveUser != JSON.parse(localStorage.getItem("user")).userId || row.documentState == '通过'
          }
        },],
        tagField: {
          state:{
          state: {
            select: [
            {
              {
                value: '通过',
                label: '通过'
              },
@@ -278,7 +252,7 @@
          },
        },
        selectField: {
          state:{
          state: {
            select: [
              {
                value: '通过',
@@ -290,27 +264,27 @@
              },
            ]
          },
          signatory:{
          signatory: {
            select: []
          },
        },
        datePicker:['effectiveDate'],
        addUpload:['signatoryUrl'],
        datePicker: ['effectiveDate'],
        addUpload: ['signatoryUrl'],
        requiredAdd: [],
        requiredUp: [],
        needSort: [],
        inputType: ''
        inputType: ''
      },
      entityCopy: {},
      upIndex: 0,
      personList:[],
      fileList:[],
      fileList0:[],
      radio:'发放',
      fileState:[],
      file:null,
      currentInfo:{},
      lookDialogVisible:false
      personList: [],
      fileList: [],
      fileList0: [],
      radio: '发放',
      fileState: [],
      file: null,
      currentInfo: {},
      lookDialogVisible: false
    }
  },
  mounted() {
@@ -321,8 +295,8 @@
    this.getFileList0()
    this.selectEnumByCategory()
  },
  methods:{
    getPower(){
  methods: {
    getPower() {
      let power = JSON.parse(sessionStorage.getItem('power'))
      let out = false
      let del = false
@@ -359,6 +333,7 @@
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.page.current = 1
      this.upIndex++
      this.refreshTable()
    },
@@ -385,51 +360,57 @@
      })
    },
    // 获取文件列表--文件清单
    getFileList(){
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList,{
    getFileList() {
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList, {
        entity: {
          orderBy: {
            field: 'createTime',
            order: 'desc'
          }
        },
        page:{
          current:-1,
          size:-1
        page: {
          current: -1,
          size: -1
        }
      },{headers: {
            'Content-Type': 'application/json'
          }}).then(res=>{
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.fileList = res.data.body.records
      }).catch(err=>{})
      }).catch(err => { })
    },
    // 获取文件列表--作废文件
    getFileList0(){
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentCancel,{
    getFileList0() {
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentCancel, {
        entity: {
          orderBy: {
            field: 'createTime',
            order: 'desc'
          }
        },
        page:{
          current:-1,
          size:-1
        page: {
          current: -1,
          size: -1
        }
      },{headers: {
            'Content-Type': 'application/json'
          }}).then(res=>{
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.fileList0 = res.data.body.records
      }).catch(err=>{})
      }).catch(err => { })
    },
    // 导出
    handleOut(){
    handleOut() {
      this.outLoading = true
      this.$axios.post(this.$api.manageDocumentList.exportManageDocumentIssueRecycle, {entity:this.componentData.entity},{headers: {
      this.$axios.post(this.$api.manageDocumentList.exportManageDocumentIssueRecycle, { entity: this.componentData.entity }, {
        headers: {
          'Content-Type': 'application/json'
        },responseType: "blob"},).then(res => {
        }, responseType: "blob"
      },).then(res => {
        this.outLoading = false
        const blob = new Blob([res],{ type: 'application/octet-stream' });
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob 对象转换成字符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
@@ -458,10 +439,10 @@
        }
      })
    },
    changeFileList(e){
      if(e){
        let obj = this.fileList.find(a=>a.documentCode == e)
        if(obj){
    changeFileList(e) {
      if (e) {
        let obj = this.fileList.find(a => a.documentCode == e)
        if (obj) {
          this.addInfo.name = obj.name
          this.addInfo.version = obj.version
          this.addInfo.state = obj.state
@@ -469,52 +450,52 @@
      }
    },
    // 提交
    handleAdd(){
      if(!this.addInfo.documentCode){
    handleAdd() {
      if (!this.addInfo.documentCode) {
        this.$message.error('请选择文件')
        return
      }
      if(!this.addInfo.receiveUser){
      if (!this.addInfo.receiveUser) {
        this.$message.error('请选择审批人')
        return
      }
      if(this.radio=='发放'){
        if(!this.addInfo.issueUser){
      if (this.radio == '发放') {
        if (!this.addInfo.issueUser) {
          this.$message.error('请选择发放人')
          return
        }
      }else{
        if(!this.addInfo.recycleUser){
      } else {
        if (!this.addInfo.recycleUser) {
          this.$message.error('请选择回收人')
          return
        }
      }
      this.addLoading = true;
      if(!this.addInfo.id){
      if (!this.addInfo.id) {
        // 新增发放记录
        let fd = new FormData();
        //文件信息中raw才是真的文件
        if(this.file){
          fd.append("file",this.file.raw);
        if (this.file) {
          fd.append("file", this.file.raw);
        }
        for(let key in this.addInfo){
          fd.append(key,this.addInfo[key])
        for (let key in this.addInfo) {
          fd.append(key, this.addInfo[key])
        }
        this.$axios.post(this.$api.manageDocumentList.addManageDocumentIssueRecycle,fd,{
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            noQs:true
          }).then(res=>{
            this.addLoading = false;
          if(res.code==200){
        this.$axios.post(this.$api.manageDocumentList.addManageDocumentIssueRecycle, fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          noQs: true
        }).then(res => {
          this.addLoading = false;
          if (res.code == 200) {
            this.$message.success('发放成功')
            this.addDialogVisible = false
            this.refreshTable()
          }
        })
      }else{
        let {documentCode,id,issueUser,recycleUser,receiveUser,name,version,documentState,issueCode,recycleCode,issueDate,recycleDate,issueNote,recycleNote} = this.addInfo
      } else {
        let { documentCode, id, issueUser, recycleUser, receiveUser, name, version, documentState, issueCode, recycleCode, issueDate, recycleDate, issueNote, recycleNote } = this.addInfo
        // 添加回收记录
        let obj = {
          documentCode,
@@ -533,17 +514,17 @@
          recycleNote
        }
        let fd = new FormData();
        for(let key in obj){
          fd.append(key,obj[key])
        for (let key in obj) {
          fd.append(key, obj[key])
        }
        this.$axios.post(this.$api.manageDocumentList.doManageDocumentIssueRecycle,fd,{
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            noQs:true
          }).then(res=>{
            this.addLoading = false;
          if(res.code==200){
        this.$axios.post(this.$api.manageDocumentList.doManageDocumentIssueRecycle, fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          noQs: true
        }).then(res => {
          this.addLoading = false;
          if (res.code == 200) {
            this.$message.success('提交成功')
            this.addDialogVisible = false
            this.refreshTable()
@@ -552,13 +533,13 @@
      }
    },
    // 添加回收
    handleUpdate(row){
    handleUpdate(row) {
      this.addInfo = this.HaveJson(row)
      this.radio = '回收'
      this.addDialogVisible = true
    },
    // 审核
    handleCheck(row){
    handleCheck(row) {
      this.$confirm('是否审核通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
@@ -568,7 +549,7 @@
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            // 点击“确定”按钮，允许关闭
            this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, {id:row.id,documentState:'通过'}).then(res => {
            this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, { id: row.id, documentState: '通过' }).then(res => {
              this.refreshTable()
              done();
              this.$message({
@@ -576,12 +557,12 @@
                message: '提交成功'
              })
            })
            .catch(err => {
              .catch(err => {

            })
              })
          } else if (action === 'cancel') {
            // 点击“取消”按钮，不允许关闭
            this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, {id:row.id,documentState:'不通过'}).then(res => {
            this.$axios.post(this.$api.manageDocumentList.checkManageDocumentIssueRecycle, { id: row.id, documentState: '不通过' }).then(res => {
              this.refreshTable()
              done();
              this.$message({
@@ -589,24 +570,24 @@
                message: '提交成功'
              })
            })
            .catch(err => {
              .catch(err => {

            })
              })
            console.log("取消按钮点击事件，不关闭弹框");
          } else if (action === 'close') {
            // 点击“×”按钮，不允许关闭
            done();
            console.log("×按钮点击事件，不关闭弹框");
          }
          }
        }
      })
    },
    handleChangeUpload(file, fileLists){
    handleChangeUpload(file, fileLists) {
      this.file = file
      this.$set(this.addInfo,'name',file.name)
      this.$set(this.addInfo, 'name', file.name)
    },
    // 查看附件
    handleLook(row){
    handleLook(row) {
      this.currentInfo = this.HaveJson(row)
      this.lookDialogVisible = true
    }
@@ -616,42 +597,44 @@

<style scoped>
.title {
    height: 60px;
    line-height: 60px;
  }
  .search {
    background-color: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
  }
  height: 60px;
  line-height: 60px;
}

  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }
.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }
.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

  .search_input {
    width: calc(100% - 110px);
  }
.search_label {
  width: 110px;
  font-size: 14px;
  text-align: right;
}

  .table {
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 80px);
    padding: 20px;
  }
  .btns{
    position: absolute;
    right: 20px;
    top: 5px;
  }
.search_input {
  width: calc(100% - 110px);
}

.table {
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 60px - 80px);
  padding: 20px;
}

.btns {
  position: absolute;
  right: 20px;
  top: 5px;
}
</style>

 src/components/tool/file-preview.vue

@@ -8,43 +8,35 @@
        <p>您的浏览器不支持 PDF 预览。<a :href="fileUrl">下载 PDF 文件</a></p>
      </object>
    </div>
    <a ref="pdfLink" :href="fileUrl" target="_blank" style="display: none;"></a>
    <div v-if="isDoc">
      <p v-if="!isDocShow">文档无法直接预览，请下载查看。</p>
      <a :href="fileUrl" v-if="!isDocShow">下载文件</a>
      <vue-office-docx v-else
          :src="fileUrl"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
      />
      <vue-office-docx v-else :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 v-else
        :src="fileUrl"
        :options="options"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
      <vue-office-excel v-else :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">
      <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>
            <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">
                  <el-tooltip :content="m.label" placement="top">
                    <div class="oneLine">
                      <span>{{m.label}}</span>
                      <span>{{ m.label }}</span>
                    </div>
                  </el-tooltip>
                </div>
@@ -82,43 +74,54 @@
      required: true
    },
  },
  data(){
  data() {
    return {
      isDocShow:true,
      options:{
      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值就是即将渲染到页面上的内容
        beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
        transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
      },
      csvList:[],//csv文件数据
      imgUrl:''
      csvList: [],//csv文件数据
      imgUrl: ''
    }
  },
  computed: {
    isImage() {
      let state = /\.(jpg|jpeg|png|gif)$/i.test(this.fileUrl)
      this.imgUrl = this.fileUrl
      if(state){
      if (state) {
        this.imgUrl = this.fileUrl.replaceAll('word', 'img')
      }
      return state;
    },
    isPdf() {
      return /\.pdf$/i.test(this.fileUrl);
      let state = /\.pdf$/i.test(this.fileUrl)
      if (state) {
        this.$nextTick(() => {
          this.$refs.pdfLink.click();
          if (this.$parent.lookDialogVisible) {
            this.$parent.lookDialogVisible = false
          } else if (this.$parent.$parent.lookDialogVisible) {
            this.$parent.$parent.lookDialogVisible = false
          }
        })
      }
      return state;
    },
    isDoc() {
      return /\.(doc|docx)$/i.test(this.fileUrl);
    },
    isXls(){
    isXls() {
      let state = /\.(xls|xlsx)$/i.test(this.fileUrl)
      if(state){
        if(/\.(xlsx)$/i.test(this.fileUrl)){
      if (state) {
        if (/\.(xlsx)$/i.test(this.fileUrl)) {
          this.options.xls = false
        }else{
        } else {
          this.options.xls = true
        }
      }
@@ -129,38 +132,38 @@
    },
    isCsv() {
      let state = /\.csv$/i.test(this.fileUrl)
      if(state){
      if (state) {
        this.loadCSVData();
        // this.main()
      }
      return state;
    },
    isSupported() {
      return this.isImage || this.isPdf || this.isDoc || this.isZipOrRar || this.isCsv||this.isXls;
      return this.isImage || this.isPdf || this.isDoc || this.isZipOrRar || this.isCsv || this.isXls;
    }
  },
  methods:{
  methods: {
    renderedHandler() {
        console.log("渲染完成")
        this.isDocShow = true
        this.resetStyle()
      console.log("渲染完成")
      this.isDocShow = true
      this.resetStyle()
    },
    errorHandler() {
        console.log("渲染失败")
        this.isDocShow = false
      console.log("渲染失败")
      this.isDocShow = false
    },
    async loadCSVData() {
      this.$axios.post(this.$api.insOrderPlan.preview, {
        id: this.currentFile.id,
      }).then( res => {
      }).then(res => {
        let arr = res.data
        arr = arr.map(m=>{
        arr = arr.map(m => {
          let obj = {
            sheetName:m.sheetName,
            tableData:[],
            column:[]
            sheetName: m.sheetName,
            tableData: [],
            column: []
          }
          obj.tableData = this.formatCSVToTable(m.content.replaceAll('null',' '))
          obj.tableData = this.formatCSVToTable(m.content.replaceAll('null', ' '))
          // .replaceAll('MIN','=MIN').replaceAll('MAX','=MAX').replaceAll('AVERAGE','=AVERAGE')
          for (let item in obj.tableData[0]) {
            obj.column.push({
@@ -171,11 +174,11 @@
          return obj
        })
        this.csvList = arr
      }).catch( err => {
      }).catch(err => {
        console.log(err)
      })
    },
    formatCSVToTable(str){
    formatCSVToTable(str) {
      const result = [];
      const jsonObj = str.split("\n");
      let arrHeader = [];
@@ -212,7 +215,7 @@
      }
      return result
    },
    resetStyle(){
    resetStyle() {
      const elements = document.querySelectorAll('[style*="pt"]');
      for (const element of elements) {
        const style = element.getAttribute('style');

 src/components/view/b1-inspect-order-plan.vue

@@ -251,9 +251,9 @@
        </el-table>
        <div style="display: flex;justify-content: flex-end;width: 100%;margin-top: 10px;">
          <span></span>
          <el-pagination @size-change="refreshTable" @current-change="refreshTable" :current-page="page.current"
            :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          <el-pagination @size-change="m => refreshTable('size', m)" @current-change="m => refreshTable('current', m)"
            :current-page="page.current" :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
@@ -1023,7 +1023,7 @@
          this.loading = false;
          this.$message.success("认领成功")
          this.claimVisible = false
          this.refreshTable('page')
          this.refreshTable()
        } else {
          this.loading = false;
        }
@@ -1032,7 +1032,10 @@
        this.loading = false;
      })
    },
    refreshTable() {
    refreshTable(type, val) {
      if (type && val) {
        this.page[type] = val;
      }
      this.tableLoading = true
      this.$axios.post(this.$api.insOrderPlan.selectInsOrderPlanList, {
        entity: this.componentData.entity,