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> 
                      <Menu :data="item" @delFile="delFile"></Menu>
                    </div>
                </div>
                <el-upload v-if="!noEdit1 && Object.keys(form).length>1 && $reportPermission(reportId,[0,1])" 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="conclusions" v-if="form.status==3 && form.conclusions && form.conclusions.length>0">
                  <span v-for="(item,index) in form.conclusions" :key="index" style="margin:0">{{ item }} <span v-if="index<form.conclusions.length-1">| </span></span>
                </el-form-item>
                <el-form-item label="核心结论论述：" prop="cronConclusion" v-if="form.status==3 && form.cronConclusion">
                  <span >{{ form.cronConclusion }} </span>
                </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)
                this.submit()
            }
        },
        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).reverse()
            }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 = []
              }
            });
            
          }
          this.submit()
        })
    },
    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).reverse()
      }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);
            // return false
            var item={
              name:file.name,
              suffix:'',
              downLoad:true
            }
            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)
              var isPicture = 1
              // this.srcList = [URL.createObjectURL(file.raw)]
            }else if(type == 'pdf'){
              // this.FileVisible = true
              this.FileUrl = URL.createObjectURL(file.raw)
              var isPicture = 0
              // this.srcList = []
            }else{
              return false
            }
            const router = this.$router.resolve({
                path: '/checkFile',
                query: {
                    row: JSON.stringify(item),
                    FileUrl: this.FileUrl,
                    isPicture:isPicture
                }
            })
            window.open(router.href, '_blank');
        },
        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>