RMS-FrontEnd/RMS-FrontEnd/src/views/report/reportDetails/components/basicMessage.vue

<template>
    <div> 
        <el-button type="primary" @click="submit" style="float:right" v-if="!noEdit1">提交</el-button>
        <div style="width:500px;margin:0 auto">
            <el-form :model="form" ref="reportForm" label-width="120px">
                
                <el-form-item :label="form.type==3?'标的产品：':'标的专利号：'" prop="signPatentNo">
                    <el-link type="primary" v-if="form.type!=3" @click="toPatentDetails(form.signPatentNo)">{{form.signPatentNo}}</el-link>
                    <span v-else>{{form.signPatentNo}}</span>
                <!-- <el-input v-model="form.signPatentNo" autocomplete="off" placeholder="请输入标的专利号" @change="getPatentNo"></el-input>
                <p v-if="show==1" class="tips">查不到该专利请<span @click="imports">导入</span></p>
                <p v-if="show==2" class="tips" style="color:black"><span @click="toPatentDetails(form.signPatentNo)">查看详情</span></p> -->
                </el-form-item>
                <el-form-item label="报告名称：" prop="name">
                    <span>{{form.name}}</span>
                </el-form-item>
                <el-form-item label="承担部门：" prop="departmentId">
                    <span>{{form.departmentName}}</span>
                </el-form-item>
                <el-form-item label="负责人：" prop="personId">
                    <span>{{form.personName}}</span>
                </el-form-item>
                <el-form-item label="委托方：" prop="clientId" >
                    <span>{{form.clientName}}</span>
                </el-form-item>
                <el-form-item label="产品/技术：" v-if="form.proTec">
                    <span>{{form.proTec}}</span>
                </el-form-item>
                <el-form-item label="应用场景：" prop="easFlag" v-if="form.scenarioNames">
                  <div style="word-wrap:keep-all;">
                    <span v-for="item in form.scenarioNames">{{item  }}&nbsp;&nbsp;&nbsp;</span>
                  </div>
                </el-form-item>
                <el-form-item label="关联报告：" v-if="form.associateReportName">
                    <span>{{form.associateReportName}}</span>
                </el-form-item>
                <el-form-item label="卷号：" prop="volumeNumber" v-if="form.volumeNumber">
                    <span>{{form.volumeNumber}}</span>
                </el-form-item>
                <el-form-item :label="noEdit1?'附件':'上传附件：'">
                <div v-if="form.reportFiles" class="upload-file">
                    <div v-for="item in form.reportFiles" style="margin:0;display:flex;justify-content:space-around;align-items:center;">
                      <p style="margin:0;width:calc(100% - 40px);overflow: hidden;white-space: nowrap;text-overflow:ellipsis;cursor: pointer" @click="checkFile(item)">{{item.name?item.name+'.'+item.suffix:item.fileName}}</p> 
                      <!-- <div style="margin:0;" @click="delFile(item.id)" v-if="!noEdit1">
                        <i class="el-icon-close"></i>
                      </div> -->
                      <Menu :data="item" @delFile="delFile"></Menu>
                    </div>
                </div>
                <el-upload v-if="!noEdit1" ref="upload" class="upload-file" drag action="#" :auto-upload="false" :show-file-list="true" :on-change="onChange" multiple   :on-preview="handlePreview" :on-remove="handleRemove">
                    <i :class="!file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip"></div>
                </el-upload>
                </el-form-item>
                <el-form-item label="备注：" prop="remark" v-if="form.remark">
                    <span>{{form.remark}}</span>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog title="查看文件" :visible.sync="FileVisible" width="1200px">
          <el-image v-if="srcList.length>0" :src="FileUrl" ref="image" :preview-src-list="srcList"></el-image>
          <iframe v-else :src="FileUrl" frameborder="0" width="1150px" :height="height"></iframe>
        </el-dialog>
    </div>
</template>

<script>
import { PatentDetails } from "@/views/components/common/mixins";
import Menu from '@/views/components/common/menu/index.vue'
import { downLoad2 } from "@/utils";
export default {
    mixins:[PatentDetails],
    components:{
      Menu
    },
    props:['reportId','noEdit'],
    data() {
        return {
            FileVisible:false,
            height:document.documentElement.clientHeight - 120,
            FileUrl:'',
            srcList:[],
            noEdit1:this.noEdit,
            file:[],
            form:{
              id:this.reportId
            },
            dictMessage:{},
            Already:[]
        }
    },
    watch:{
        reportId(val){
           this.form = {
            id:val
           }
           this.getList()
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
      checkFile(item){
        return false;
        var arr = ['png','jpeg','bmp','jpg']
        if(arr.includes(item.suffix)){
          this.FileVisible = true
          this.FileUrl = this.$p + item.url
          this.srcList = [this.$p + item.url]
        }else if(item.suffix == 'pdf'){
          this.FileVisible = true
          this.FileUrl = this.$p + item.url
          this.srcList = []
        }else{
          this.FileUrl =  'http://192.168.1.24:8012/onlinePreview?url='+ btoa(encodeURIComponent(this.$p + item.url))
          console.log(this.FileUrl,this.$p + item.url)
          this.srcList = []
          this.FileVisible = true
          // downLoad2(item.url) 
        }
      },
        delFile(id){
            var index = this.form.reportFiles.findIndex(item=>{
                return item.id == id
            })
            if(index!=-1){
                this.form.reportFiles.splice(index,1)
            }
        },
        onChange(file, fileList) {
      if(this.form.reportFiles){
        var index3 = this.form.reportFiles.findIndex(item=>{
          return item.name+'.'+item.suffix == file.raw.name
        })
        if(index3!=-1){
        
          this.Already.push(this.form.reportFiles[index3].name)
          var index2 = fileList.reverse().findIndex(item=>{
            return item.raw.name == file.raw.name
          })
          fileList.splice(index2,1)
        }else{
          this.inFile(file, fileList)
        }
      }else{
        this.inFile(file, fileList)
      }
    this.$nextTick(()=>{
      var b = ''
      if(this.Already.length>0){
        this.Already.forEach(item=>{
          b = b+item+','
        })
        this.$alert('文件'+b+'已存在', '提示', {
          confirmButtonText: '确定',
          type:'warning',
          callback: action => {
            this.Already = []
          }
        });
        
      }
    })
    },
    inFile(file, fileList){
      var index = this.file.findIndex(item=>{
        return item.name == file.raw.name
      })
      if(index!=-1){
        this.Already.push(this.file[index].name)
        var index2 = fileList.reverse().findIndex(item=>{
          return item.raw.name == file.raw.name
        })
        fileList.splice(index2,1)
      }else{
        this.file.push(file.raw) 
      }
    },
        handleRemove(file, fileList) {
            var index = this.file.findIndex(item=>{
                return item.uid == file.raw.uid
            })
            if(index!=-1){
                this.file.splice(index,1)
            }
        },
        handlePreview(file) {
            // console.log(file);
            
            var index = file.raw.type.lastIndexOf('/')
            var type = file.raw.type.substring(index+1,file.raw.type.length)
            var arr = ['png','jpeg','bmp','jpg']
            if(arr.includes(type)){
              this.FileVisible = true
              this.FileUrl =  URL.createObjectURL(file.raw)
              this.srcList = [URL.createObjectURL(file.raw)]
            }else if(type == 'pdf'){
              this.FileVisible = true
              this.FileUrl = URL.createObjectURL(file.raw)
              this.srcList = []
            }
            // this.imageUrl ='https://view.xdocin.com/view?src=' + URL.createObjectURL(file.raw)
            // this.showFile = true
        },
        submit(){
            let formData = new FormData()
            if(this.file){
              for (var i = 0; i < this.file.length; i++) {
                formData.append("files", this.file[i]);
              }
            }
            formData.append('report',JSON.stringify(this.form))
            this.$api.UpdateReport(formData).then(response=>{
              if(response.code == 200){
                this.file = []
                this.$message.success('附件修改成功')
                this.$refs.upload.clearFiles()
                this.getList()
              }
            })
        },
        getList() {
            this.loading = true
            let a = {
                reportId:this.form.id
            }
            this.$api.QueryReport(a).then(response=>{
                if(response.code == 200){
                    this.$set(this,'form',response.data[0])
                    // this.form = response.data[0]
                }
            })
        },
    },
}
</script>