xiaoshi_system/src/views/noveltySearch/components/dialog/inventionPoint/inventionPoint.vue

<template>
  <div class="inventionPointDialog" v-if="show2">
    <div class="mini" :style="miniStyle" @click="changeDom('mini')" v-if="!show" v-drag="getPosition" ref="mini">查新</div>
    <div class="plus" v-else v-drag2="getPosition" ref="plus" :style="plusStyle">
      <div class="head" ondragstart="return false">
        <div>{{ text }}</div>
        <div style="width: 20px; height: 20px">
          <el-image  @click="changeDom('plus')"  style="width: 100%; height: 100%" :src="require('@/assets/img/收起.png')" fit="contain"></el-image>
        </div>
      </div>
      <div class="main">
        <div class="main_head" ondragstart="return false">
          <div>
            <span style="font-size:12px">发明点：</span>
            <el-button v-if="projectId" style="margin-left:10px" type="text" size="mini" @click="intoProject" >进入项目</el-button>
          </div>
          <div>
            <!-- <el-button  type="text"  size="mini"  :loading="loading" v-if="btns.indexOf(1)!=-1"  @click="submit(1)">关键词</el-button> -->
            <el-button  type="text"  size="mini"  v-if="DBType == 'inner'"  @click="search()">检索</el-button>
            <el-button  type="text"  size="mini"  :loading="loading" v-if="btns.indexOf(2)!=-1"  @click="submit(2)">相似案件</el-button>
            <el-button  type="text"  size="mini"  :loading="loading" v-if="btns.indexOf(3)!=-1"  @click="submit(3)">保存</el-button>
          </div>
        </div>
        <div class="main_input">
          <myRichText  type="textarea" v-model="technicalCase.inventionPoint"  resize="none" customStyle="height:220px;font-size: 14px;color:#606266" :rows="10"  placeholder="请输入发明点"></myRichText>
        </div>
        <div class="main_result" v-if="showResult">
          <div class="description">{{description[clickType]}}</div>
          <div class="result" v-loading="loading">
            <template v-if="clickType == 1">
              <div>
                <div class="keyWord">
                  中文关键词：
                  <div class="keyWord_content">
                    <el-tag
                      v-for="item in keyWord.CN"
                      :key="item"
                      type=""
                      @click="chooseKeyword(item)"
                      :effect="checkList.indexOf(item) == -1 ? 'plain' : 'dark'"
                    >
                      {{ item }}
                    </el-tag>
                  </div>
                </div>
                <div class="keyWord">
                  英文关键词：
                  <div class="keyWord_content">
                    <el-tag
                      v-for="item in keyWord.EN"
                      :key="item"
                      @click="chooseKeyword(item)"
                      type=""
                      :effect="checkList.indexOf(item) == -1 ? 'plain' : 'dark'"
                    >
                      {{ item }}
                    </el-tag>
                  </div>
                </div>
                
              </div>
            </template>
            <template v-else>
              <div>
                <myCard class="box-card" v-for="(item,index) in tableData" :key="item.id">
                  <div slot="head">
                    <div style="font-size:14px">
                      序号：{{ (index + 1)  }}  
                      <!-- <span style="margin-left:10px;color:cadetblue;">相似度：{{ item.same }}</span> -->
                    </div>
                    <div>
                      <el-button type="text" size="mini" @click="clickItem(item,1)" v-if="clickType == 2">复用结果</el-button>
                      <el-button type="text" size="mini" @click="clickItem(item,2)" v-if="!projectId">进入案件</el-button>
                    </div>
                  </div>
                  <el-form label-width="100px">
                    <el-form-item label="发明点：">
                      <div v-html="item.inventionPoint"></div>
                    </el-form-item>
                    <!-- <el-form-item label="创建人：">
                      <div v-html="item.createName"></div>
                    </el-form-item>
                    <el-form-item label="创建时间：">
                      <div v-html="item.createTime"></div>
                    </el-form-item> -->
                  </el-form>
                </myCard>
              </div>
            </template>
          </div>
          <div class="foot" v-if="clickType == 1">
            <el-button type="primary" size="mini">检索</el-button>
          </div>
          <div class="foot" v-if="clickType == 3">
            <el-button type="primary" size="mini" @click="saveInventionPoint">保存</el-button>
          </div>
        </div>

        <!-- 对比文件 -->
        <div v-if="contrastFileList.length>0" class="main_result" style="border-top:1px solid black;margin-top:20px">
          <div class="main_head">
            <span style="font-size:12px">对比文件：</span>
            <div>
              <!-- <el-button v-if="chooseContrastFile.length>0" type="text"  size="mini"  :loading="loading"  @click="exportReport()">生成报告</el-button> -->
            </div>
          </div>
          <div class="result">
            <myCard class="box-card" v-for="(item,index) in contrastFileList" :key="index">
              <div slot="head">
                <div style="font-size:14px">
                  <!-- <el-checkbox-group v-model="chooseContrastFile">
                    <el-checkbox :label="item.patentNo">序号：{{ (index + 1)  }} </el-checkbox>
                  </el-checkbox-group> -->
                  <div>序号：{{ (index + 1)  }}</div>
                </div>
              </div>
              <el-form label-width="100px">
                  <el-form-item label="专利号">
                    <div v-html="item.literatureNo"></div>
                  </el-form-item>
                  <el-form-item label="标注">
                    <div v-if="item.noveltyCompareRecordVOS && item.noveltyCompareRecordVOS.length>0" v-html="item.noveltyCompareRecordVOS[0].markNoteText"></div>
                  </el-form-item>
                </el-form>
            </myCard>
          </div>
          
        </div>
      </div>
    </div>
    <reportTemplateDialog ref="reportTemplateDialog"></reportTemplateDialog>
  </div>
</template>

<script>
import { startDrag } from '@/utils/direct/drag'
import reportTemplateDialog from '@/views/noveltySearch/components/dialog/reportTemplate/reportTemplateDialog.vue';
export default {
  directives:{
    'drag':{
      inserted(el,binding){
        startDrag(el, el, binding.value);
      }
    },
    'drag2':{
      inserted(el,binding){
        startDrag(el.querySelector('.head'), el, binding.value);
      }
    }
  },
  components: {
    reportTemplateDialog
  },
  props: {
    type:{
      type:String,
      default:'mini'
    },
    btns:{
      type:Array,
      default:()=>{
        return [3]
      }
    },
    contrastFileList:{
      type:Array,
      default:()=>{
        return []
      },
    },
    position:{
      type:Object,
      default:()=>{
        return {
          right:'10px',
          top:'120px',
          
        }
      }
    },
    title:{
      type:String,
      default:''
    },
    projectId:{

    },
    plusStyle:{
      type:String,
      default:''
    },
    miniStyle:{
      type:String,
      default:''
    },
    DBType:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      domPosition:this.position,
      show2:true,
      show: this.type == 'mini'?false:true,
      text: this.title,
      technicalCase:{
        inventionPoint:'发明点',
      },
      tableData:[],
      loading: false,
      showResult: false,
      checkList: [],
      keyWord: {
        CN: ["关键词1", "关键词2"],
        EN: ["keyWord1", "keyWord2"],
      },
      clickType: null,
      description:{
        1:"以下是提炼的关键词：",
        2:'以下是相似案件：',
        3:'以下是根据您输入的发明点找到的可能相同的案件，您确认一下是否是相同案件，如果是请相同案件的点击“进入”按钮,如果没有相同的案件就点击“保存”按钮保存输入的发明点'
      },
      chooseContrastFile:[],
      cWidth:document.body.clientWidth
    };
  },
  watch: {
    position(){
      this.domPosition = this.position
    },
    projectId(){
      this.getData()
    },
  },
  computed: {},
  created() {},
  destroyed() {
    window.removeEventListener('resize',()=>{

    })
  },
  mounted() {
    this.setPosition(this.type)
    this.getData()
    window.addEventListener('resize',()=>{
      this.cWidth = document.body.clientWidth
    })
  },
  methods: {
    setPosition(ref){
        if(!this.domPosition){
            return
        }
        this.$nextTick(()=>{
          var dom = this.$refs[ref]
          if(dom){
              for(let key in this.domPosition){
                if(key == 'left'){
                  var left = Number(this.domPosition.left.slice(0,-2))
                  if(ref == 'mini'){
                    if(this.cWidth - left - 60 < 10){
                      dom.style.right = '10px'
                    }else{
                      dom.style[key] = this.domPosition[key]
                    }
                  }
                  else if(ref == 'plus'){
                    if(this.cWidth - left - 350 < 10){
                      dom.style.right = '10px'
                    }else{
                      dom.style[key] = this.domPosition[key]
                    }
                  }
                }else{
                  dom.style[key] = this.domPosition[key]
                }
               
              } 
          }
        })
        
        
    },
    getPosition(left,top){
      this.domPosition.left = left + 'px'
      this.domPosition.top = top+ 'px'
    },
    open(){
      
    },
    changeDom(ref){
      var dom = this.$refs[ref].getAttribute('drag-flag')
      if(dom == 'true'){
        return
      }
      this.$set(this,'show',!this.show)
      this.resize(ref)
      
    },
    resize(ref){
      this.show2 = false
      this.$nextTick(()=>{
        this.show2 = true
        var ref2 = ref == 'mini'?'plus':'mini'
        this.setPosition(ref2)
      })
      
    },
    getData(){
      if(!this.projectId){
        this.technicalCase={
          inventionPoint:'',
        }
        return
      }
      var params = {
        projectId:this.projectId
      }
      this.$api.queryTechnicalCase(params).then(response=>{
        if(response.code == 200){
          this.technicalCase = response.data || {}
        }
      }).catch(error=>{
        this.technicalCase={
          inventionPoint:'',
        }
      })
    },
    //选择关键词
    chooseKeyword(item) {
      var index = this.checkList.indexOf(item);
      if (index == -1) {
        this.checkList.push(item);
      } else {
        this.checkList.splice(index, 1);
      }
    },
    //确定
    submit(type,projectId) {
      
      if(type == 3){
        this.saveInventionPoint()
        return
      }
      this.clickType = type
      if(type == 1){}
      else{
        var params = {
          content:this.technicalCase.inventionPoint,
          projectId:projectId || this.projectId
        }
        this.loading = true
        this.$api.querySimilarInventionPoint(params).then(response=>{
          if(response.code == 200){
            this.tableData = response.data
            this.loading = false
          }
        }).catch(error=>{
          this.tableData = []
          this.loading = false
        })
      }
      this.showResult = true;
    },
    clickItem(row,type){
      if(type == 2){
        //使用
        this.$emit('getProjectId',row.projectId)
        this.submit(2,row.projectId)
        return
      }
      if(type == 1){
        const route = this.$router.resolve(
          {
            path:'/reuseResults',
            query:{
              toProjectId:this.projectId,
              projectId:row.projectId
            }
          }
        )
        window.open(route.href,'_blank')
      }
    },
    // 保存发明点
    saveInventionPoint(){
      var params = this.technicalCase
      if(this.projectId){
        params.projectId = this.projectId
      }
      this.$api.addOrUpdateTechnicalCase(params).then(response=>{
        if(response.code == 200){
          this.$message.success('保存成功')
          if(!this.technicalCase.projectId){
            this.$emit('getProjectId',response.data.projectId)
          }
          this.$emit('updateInventionPoint')
          this.technicalCase.technicalCaseId = response.data.technicalCaseId
          this.technicalCase.projectId = response.data.projectId
        }
      }).catch(error=>{
        this.$message.error('保存失败')
      })
    },
    //进入项目详情
    intoProject(){
      const route = this.$router.resolve({
        path:'/noveltySearchDetails',
        query:{
          projectId:this.projectId
        }
      })
      window.open(route.href,'_blank')
    },
    //生成报告
    exportReport(){
      this.$refs.reportTemplateDialog.open(this.projectId)
    },
    //检索
    search(){
      this.$emit('searchByInventionPoint',this.technicalCase.inventionPoint)
    }
  },
};
</script>
<style lang="scss">
.inventionPointDialog{
  .box-card{
    .el-form-item__content{
      text-align: left;
    }
  }
}
</style>
<style lang="scss" scoped>
.inventionPointDialog {
  z-index: 99999;
  .mini {
    position: fixed;
    // top: 0;
    right: 10px;
    text-align: center;
    line-height: 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: red;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  }
  .plus {
    padding: 10px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    position: fixed;
    right: 10px;
    width: 350px;
    height: auto;
    border-radius: 10px;
    .head {
      width: 100%;
      display: flex;
      justify-content: space-between;
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -webkit-user-drag: none;
    }
    .main {
      .main_head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 30px;
      }
      .main_result {
        margin-top: 20px;
        background: white;
        .description {
          border-bottom: 1px solid black;
          padding: 5px 0;
          font-size: 12px;
        }
        .result {
          margin-top: 10px;
          max-height: 300px;
          overflow: auto;
          display: flex;
          flex-direction: column;
          .keyWord {
            height: 100%;
            width: 100%;
            flex: 1;
            .keyWord_content {
              padding: 10px;
              border: 1px solid var(--bg);
              height: calc(100% - 50px);
            }
          }
          
        }
        .foot {
          display: flex;
          justify-content: flex-end;
          margin-top:10px;
        }
      }
    }
  }
}
</style>