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

<template>
  <div class="height_100">
    <el-container>
        <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" @click="qx" style="" />
                    <img src="@/assets/visual/unfixed.png" width="20px" height="20px"
                      v-if="fix === false && value == true" @click="gd" style="" />
                    <span v-html="getViewDom(patent.patentNo)"></span>
                    <el-tag type="primary" effect="dark" size="mini" class="margin-left_10" v-if="patent.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, 'name')"
                      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 style="display: flex;justify-content: space-between;margin-right: 10px;align-items: center;">
                  <el-dropdown size="medium" style="margin-right:10px" v-if="$permission('/workspace/createReport')">
                    <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(0)"
                        v-if="$permission('/workspace/createReport/invalid')">无效分析</el-dropdown-item>
                      <el-dropdown-item @click.native="handleAnalyse(1)"
                        v-if="$permission('/workspace/createReport/invalid')">第三方意见</el-dropdown-item>
                      <el-dropdown-item @click.native="handleAnalyse(2)"
                        v-if="$permission('/workspace/createReport/invalid')">稳定性分析</el-dropdown-item>
                      <el-dropdown-item @click.native="handleAnalyse(4)"
                        v-if="$permission('/workspace/createReport/tort')">侵权分析</el-dropdown-item>
                      <el-dropdown-item @click.native="handleAnalyse(5)"
                        v-if="$permission('/workspace/createReport/avoidDesign')">回避设计</el-dropdown-item>
                      <el-dropdown-item @click.native="handleAnalyse(7)"
                        v-if="$permission('/workspace/createReport/reInvalid')">无效应对</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"
                  :disabled="item.value === 'PatentPDF' ? !(patent.pdf && patent.pdf.length > 0) : false"
                  @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" @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
                <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>
              </div>
            </div>
        </el-header>
        <el-main>
            <div>
                <div class="patent-article-left" :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" :project-id="projectId" :patent="patent" :patentNo="[patent.patentNo]"
                              :domId="patent.patentNo + '1'" 
                              @refresh="getPatent()"></component>
                        </div>
                        <div slot="right">
                            <component :is="activeMenu2" :project-id="projectId" :patent="patent" :sign="true"></component>
                        </div>
                    </my-view>
                </div>
                <div class="patent-article-right" v-if="showRight">
                    <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"></component>
                            </keep-alive>
                          </el-main>
                    </el-container>
                </div>
            </div>
        </el-main>
    </el-container>
  </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 {projectData,handleData} from '../../patentCollection/components/mixins/index'

export default {
  components: {
    PatentBasic,
    PatentRight,
    PatentImage,
    PatentInstruction,
    PatentFamily,
    PatentStatus,
    PatentPDF
  },
  mixins: [projectData,handleData],
  props: {
    projectId:{
        default:0
    },
    patentNo:{
      type:String
    }
  },
  data() {
    return {
        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: '说明书'
        },
        {
          value: 'Permit',
          show: this.$permission('/workspace/patent/worth') ? false : true,
          label: '许可历史'
        },
        {
          value: 'ProductManage',
          show: this.$permission('/workspace/product') ? false : true,
          label: '商品化'
        },
        {
          value: 'patentWorth',
          show: this.$permission('/workspace/patent/worth') ? false : true,
          label: '价值曲线'
        }
        ],
        menuList2: [
            {
            value: 'Examination',
            label: '审查历史'
            },
            {
            value: 'Invalid',
            label: '被无效历史'
            },
            {
            value: 'HistoryOfInvalidEvidence',
            label: '作为无效证据使用历史'
            },
            {
            value: 'InvalidEvidencePush',
            label: '无效证据推荐'
            },
            {
            value: 'Litigation',
            label: '诉讼历史'
            },
            {
            value: 'Other',
            label: '其他参考资料'
            },
        ],
        fix: false,
        showRight: false,
        activeOption: 'PatentField',
        activeMenu: 'PatentBasic',
        activeMenu2: '',
        value:false,
        patent:{}
    };
  },
  watch: {
    patentNo(val){
      if(val){
        this.getPatent()
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getPatent()
  },
  methods: {
    getBiaoZhu(){

    },
    //获取专利信息
    getPatent(){
      var params= {
        patentNo:this.patentNo
      }
      this.$api.selectPatentDetail(params).then(response=>{
        if(response.code == 200){
          this.patent = response.data
        }
      })
    },
    // 创建报告：无效分析等点击事件
    handleAnalyse(id) {
      this.$api.getProject({ id: this.projectId }).then(response => {
        var form = {
          type: id,
          signPatentNo: this.pNo,
          projectId: this.projectId,
          departmentId: response.data[0].departmentId,
          personId: response.data[0].personnelId,
          clientId: response.data[0].clientId,
          proTec: response.data[0].technicalTheme,
          scenarioList: response.data[0].scenarioList
        }
        this.$refs.ReportForm.open(form)
      })
    },
    handleSelect(index) {
      if (index === 'PatentExport') {
        const router = this.$router.resolve({
          path: '/workspace/folder/export/patent',
          query: {
            id: this.projectId,
            patent: this.patent.id
          }
        })
        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>