xiaoshi_system/src/views/project/patentDetails/components/patentDetails.vue

<template>
  <div class="height_100">
    <el-container v-loading="loading">
      <el-header style="min-height: 100px !important;height: auto;">
        <div style="width:100%">
          <div style="display: flex;justify-content: space-between;align-items: center;height:50px">
            <div style="text-align: start;padding-left: 10px;position: relative;">
              <!-- <div style="width: 260px;"> -->
              <img src="@/assets/visual/fixed.png" width="20px" height="20px"
                v-if="fix === true && value == true && !lock" @click="fix = false" style="" />
              <img src="@/assets/visual/unfixed.png" width="20px" height="20px"
                v-if="fix === false && value == true && !lock" @click="fix = true" style="" />

              <!-- </div> -->

            </div>
            <div>
              <div>
                <span v-html="getViewDom(patent.patentNo)"></span>
                <el-tag type="primary" effect="dark" size="mini" class="margin-left_10" v-if="patent.simpleStatus">{{
                  simpleStatus[patent.simpleStatus] }}</el-tag>
              </div>
              <div style="color: #6b6868; font-size: 15px;padding-bottom: 5px;">
                <span v-html="getView(patent, 'title')"></span>
                <el-link v-if="projectId" type="primary" @click.native="handleChange(patent, 'title')"
                  style="margin-left: 10px;margin-top: -3px;">
                  <span v-if="!patent.change">切换译文</span>
                  <span v-else>切换原文</span>
                </el-link>
              </div>
            </div>
            <!-- <PatentMark :patentNo="patent.patentNo" @biaozhu="getBiaoZhu"></PatentMark> -->
            <div v-if="outside">
              <el-button type="primary" size="small" @click="importToProject">导入专利</el-button>
            </div>
            <div style="display: flex;justify-content: space-between;margin-right: 10px;align-items: center;" v-else>
              <el-dropdown size="medium" style="margin-right:10px">
                <el-button type="primary" size="small">
                  创建报告<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="margin-top:0px">
                  <!-- 遍历按钮 -->
                  <el-dropdown-item @click.native="handleAnalyse(1)">第三方意见</el-dropdown-item>
                  <el-dropdown-item @click.native="handleAnalyse(2)">稳定性分析</el-dropdown-item>
                  <el-dropdown-item @click.native="handleAnalyse(4)">侵权分析</el-dropdown-item>
                  <el-dropdown-item @click.native="handleAnalyse(5)">回避设计</el-dropdown-item>
                  <el-dropdown-item @click.native="handleAnalyse(7)">官方无效</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button type="primary" size="small" @click="handleSelect('PatentExport')">导出文档</el-button>
            </div>
          </div>

          <div style="  position: relative; border-top: 1px solid #e6e6e6;text-align: center;" class="menu">
            <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" :key="item.value"
              v-if="!item.show" @click.native="handleSelect(item.value)">
              {{ item.label }}
              <span v-if="item.value == 'PatentImage' || item.value == 'PatentPDF'" @click.stop="ending(item.value)">
                <el-popover placement="right" width="400" trigger="click">
                  <el-radio v-for="(item, index) in positionList" :key="index" v-model="radio" @input="changePosition"
                    :label="item.value">{{ item.label }}</el-radio>
                  <i class="el-icon-setting" slot="reference"></i>
                </el-popover>
              </span>
            </el-link>
            <el-link v-for="item in menuList2" :type="activeMenu === item.value ? 'primary' : undefined" :key="item.value"
              v-if="!outside" @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
            <template v-if="!outside">
              <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧菜单'" placement="top">
                <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                  style="font-size: 25px;position: absolute; right: 10px; margin-top: 5px;color: #2f2f2f; cursor: pointer"
                  @click="showRight = !showRight"></i>
              </el-tooltip>
            </template>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="height_100" style="display: flex;">
          <div class="height_100" :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)' }">
            <my-view :position="this.positionList.find(item => item.value == radio).position"
              :showView="radio != 1 && activeMenu != activeMenu2">
              <div slot="left">
                <component :activeName="activeMenu" style="width:100%;padding-right: 10px;" :is="activeMenu"
                  :evidence="evidence" :signPatentNo="signPatentNo" :reportType="reportType" :project-id="projectId"
                  :outside="outside" :projectType="projectType" :patent="patent" :patentNo="patent.patentNo"
                  :domId="$commonJS.uuid(36)" @refresh="getPatent()"></component>
              </div>
              <div slot="right">
                <component :is="activeMenu2" :project-id="projectId" :outside="outside" :projectType="projectType"
                  :patent="patent" :signPatentNo="signPatentNo" :reportType="reportType" :sign="true"
                  :evidence="evidence"></component>
              </div>
            </my-view>
          </div>
          <div class="height_100" v-if="showRight" style="width: 300px;margin: auto;">
            <el-container>
              <el-header>
                <div class="patent-articles-option">
                  <el-tabs v-model="activeOption" type="card">
                    <el-tab-pane label="标引" name="PatentField"></el-tab-pane>
                    <!-- <el-tab-pane label="注释" name="PatentAnnotation"
                      :disabled="!($permission('/workspace/details/notes') && $r(projectId, [1, 2]))"></el-tab-pane> -->
                  </el-tabs>
                </div>
              </el-header>
              <el-main>
                <keep-alive>
                  <component :is="activeOption" :project-id="projectId" :patentNo="patent.patentNo" :taskId="taskId">
                  </component>
                </keep-alive>
              </el-main>
            </el-container>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 创建报告 -->
    <addAndEditReport ref="addAndEditReport"></addAndEditReport>
    <projectListDialog ref="projectListDialog" :importData="condition"></projectListDialog>
  </div>
</template>

<script>
import PatentBasic from './patentMessage/PatentBasic.vue'
import PatentRight from './patentMessage/PatentRight.vue'
import PatentImage from './patentMessage/PatentImage.vue'
import PatentInstruction from './patentMessage/PatentInstruction.vue'
import PatentFamily from './patentMessage/PatentFamily.vue'
import PatentStatus from './patentMessage/PatentStatus.vue'
import PatentPDF from './patentMessage/PatentPDF.vue'
import pageProduct from './patentMessage/pageProduct.vue'
import licenseHistory from './patentMessage/history/licenseHistory.vue'
import litigationHistory from './patentMessage/history/litigationHistory.vue'
import reviewHistory from './patentMessage/history/reviewHistory.vue'
import otherReferences from './patentMessage/history/otherReferences.vue'
import InvalidHistory from './patentMessage/history/InvalidHistory.vue'
import HistoryOfInvalidEvidence from './patentMessage/history/HistoryOfInvalidEvidence.vue'
import PatentWorth from './patentMessage/history/echarts/components/echarts.vue'


import { projectData, handleData } from '../../patentCollection/components/mixins/index'

import PatentField from './PatentField.vue'
import addAndEditReport from '@/views/report/components/dialog/addAndEditReport.vue'
import projectListDialog from "@/views/components/import/conditionImport/components/projectListDialog.vue";
export default {
  components: {
    PatentBasic,
    PatentRight,
    PatentImage,
    PatentInstruction,
    PatentFamily,
    PatentStatus,
    PatentPDF,
    pageProduct,
    licenseHistory,
    litigationHistory,
    reviewHistory,
    otherReferences,
    InvalidHistory,
    HistoryOfInvalidEvidence,
    PatentWorth,

    PatentField,
    addAndEditReport,
    projectListDialog
  },
  mixins: [projectData, handleData],
  props: {
    projectId: {
      default: 0
    },
    patentNo: {
      type: String
    },
    taskId: {
      default: null,
    },
    evidence: {

    },
    signPatentNo: {

    },
    reportType: {

    },
    outside: {
      default: false
    },
    projectType: {
      type: String,
      default: '2'//判断是不是从专题库进入专利详情1为专题库(专题库已传1)2为报告(报告未传2)3为产品(产品已传3)
    },
    value: {
      default: false
    },
    lock: {
      default: false
    }
  },
  data() {
    return {
      loading: false,
      radio: 1,
      positionList: [
        {
          label: 'tab展示',
          value: 1,
          position: 'row'
        },
        {
          label: '上边展示',
          value: 2,
          position: 'column-reverse'
        },
        {
          label: '下边展示',
          value: 3,
          position: 'column'
        },
        {
          label: '左边展示',
          value: 4,
          position: 'row-reverse'
        },
        {
          label: '右边展示',
          value: 5,
          position: 'row'
        },
      ],
      menuList: [
        {
          value: 'PatentBasic',
          label: '基础信息'
        },
        {
          value: 'PatentRight',
          label: '权利要求'
        },
        {
          value: 'PatentImage',
          label: '附图'
        },
        {
          value: 'PatentInstruction',
          label: '说明书文本'
        },
        {
          value: 'PatentFamily',
          label: '同族专利'
        },
        {
          value: 'PatentStatus',
          label: '法律事务'
        },
        {
          value: 'PatentPDF',
          label: '说明书'
        },

      ],
      menuList2: [
        {
          value: 'licenseHistory',
          // show: this.$permission('/workspace/patent/worth') ? false : true,
          label: '许可历史'
        },
        {
          value: 'pageProduct',
          // show: this.$permission('/workspace/product') ? false : true,
          label: '商品化'
        },
        {
          value: 'PatentWorth',
          // show: this.$permission('/workspace/patent/worth') ? false : true,
          label: '价值曲线'
        },
        {
          value: 'reviewHistory',
          label: '审查历史'
        },
        {
          value: 'InvalidHistory',
          label: '被无效历史'
        },
        {
          value: 'HistoryOfInvalidEvidence',
          label: '作为无效证据使用历史'
        },
        // {
        //   value: 'InvalidEvidencePush',
        //   label: '无效证据推荐'
        // },
        {
          value: 'litigationHistory',
          label: '诉讼历史'
        },
        {
          value: 'otherReferences',
          label: '其他参考资料'
        },
      ],
      fix: false,
      showRight: false,
      activeOption: 'PatentField',
      activeMenu: 'PatentBasic',
      activeMenu2: '',
      patent: {},
    };
  },
  watch: {
    patentNo(val) {
      if (val && !this.fix) {
        this.getPatent()
        this.getPiZhuData(val)
      }
    }
  },
  computed: {
    condition() {
      return this.$s.getSession('import') || {}
    },
  },
  created() { },
  mounted() {

    this.getPatent()
    this.getPiZhuData()
  },
  methods: {
    // 获取批注
    getPiZhuData(val) {
      let params = {
        patentNo: val ? val : this.patentNo,
        projectId: this.projectId,
      }
      this.$api.queryScratchWords(params).then(response => {
        if (response.code == 200) {
          if (this.highlight.piZhuContrastList.length > 0) {
            var a = this.highlight.piZhuContrastList.filter(item => {
              return item.patentNo != params.patentNo
            }).concat(response.data.data)
          } else {
            var a = response.data.data
          }
          this.$store.commit('SET_PATENT_PIZHU_CONTRAST', a)
        }
      })
    },
    // 获取外部摘要附图的guid,获取外部的法律状态
    getData() {
      var params = {
        appNo: this.patent.rowApplicationNo,
      }
      this.$api.getPictureGuid(params).then(response => {
        if (response.code == 200) {
          this.$set(this.patent, 'pictureGuid', response.data)
        }
      })
      this.$api.getLegalStatus(params).then(response => {
        if (response.code == 200) {
          this.$set(this.patent, 'legalEvents', response.data.legalEvents)
        }
      })
    },
    //导入到专题库
    importToProject() {
      var form = {
        ...this.condition,
        patentNos: [this.patent.patentNo],
        // isDeletePatentNos: [],
      }
      this.$refs.projectListDialog.open(form);
    },
    getBiaoZhu() {

    },
    //获取专利信息
    getPatent() {
      var params = {
        patentNo: this.patentNo
      }
      var api = 'selectPatentDetail'
      if (this.outside) {
        api = 'queryExternalDetail'
      }
      this.loading = true
      this.$api[api](params).then(response => {
        if (response.code == 200) {
          this.patent = response.data
          this.loading = false
          if (this.outside) {
            this.getData()
          }
          this.getPatentField()
        }
      }).catch(error => {
        this.loading = false
      })
    },
    getPatentField(){
      var params = {
        projectId : this.projectId,
        patentNos:[this.patent.patentNo],
        innerFields:[
          {
            fieldType:10,
            fieldId:0
          }
        ]
      }
      this.$api.getPatentFields(params).then(response=>{
        if(response.code == 200){
          var data = response.data.data
          if(data && data.length>0){
            var inner = data[0].innerClassFields
            if(inner && inner.length>0){
              this.$set(this.patent,'label',inner[0].fieldValueVOS)
            }else{
              this.$set(this.patent,'label',[])
            }
            
          }else{
              this.$set(this.patent,'label',[])
            } 
        }
      })
    },
    // 创建报告：无效分析等点击事件
    handleAnalyse(id) {
      var permission = {
        1:'analysisAndOpinion',
        2:'analysisAndOpinion',
        4:'tort',
        5:'avoidDesign',
        7:'officiallyInvalid'
      }
      if(!this.$permission.FunPermissions('xiaoshi/report/'+permission[id])){
        this.$showPermissionDialog()
        return false
      }
      var form = {
        reportType: id,
        signPatentNo: this.patent.patentNo,
        projectId: this.projectId,
        // departmentId: response.data[0].departmentId,
        // personId: response.data[0].personnelId,
        // clientId: response.data[0].clientId,
        matterId: [],
        scenarioId: [],
        inventionName: this.getView(this.patent, 'title')
      }
      this.$refs.addAndEditReport.open(form)

    },
    handleSelect(index) {
      // 导出文档
      if (index === 'PatentExport') {
        let obj = {
          isAdd: [this.patentNo],
          isDelete: [],
          startNumber: 1,
          endNumber: 0,
          searchQuery: '',
          customFields: [],
          orderDTOList: [],
        }
        const router = this.$router.resolve({
          path: '/exportPatent',
          query: {
            projectId: this.projectId,
            condition: JSON.stringify(obj)
          }
        })
        window.open(router.href, '_blank');
        return false
      }
      if (index == this.activeMenu2) {
        this.activeMenu2 = ''
        this.radio = 1
        this.changePosition(this.radio)
      }
      this.activeMenu = index
    },
    ending(val) {
      this.activeMenu2 = val
      return false
    },
    changePosition(val) {

    }
  },
};
</script>
<style lang="scss" scoped>
.menu {
  .el-link {
    margin-right: 20px;
  }
}
</style>