xiaoshi_system/src/views/report/components/details/index.vue

<template>
  <div class="height_100">
    <el-container>
      <el-aside :width="width">
        <div class="point" @click="getCollapse">
          {{ isCollapse ? '收起' : '展开' }}
        </div>
        <el-menu class="theme-dark" :default-active="activeMenu" @select="changeComponent" :collapse="!isCollapse">
          <el-menu-item v-for="item in menuList" :key="item.name" :index="item.name" >
            <i class="el-icon-film"></i>
            <span slot="title">{{ item.label }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <component :is='componentName' :projectId="projectId" :assProjectId="assProjectId" :reportMessage="reportMessage" :projectType="projectType" :isOnly="activeMenu=='splitPatent'?true:false" :projectName="projectName" :patentNo="patentNo" :reportType="reportType" :patentType="reportMessage.patentType" :ifSecondInvalid="reportMessage.ifSecondInvalid" @refreshData="getReportMessage"></component>
      </el-main>
    </el-container>

  </div>
</template>

<script>
const loadComponent = (value)=>{
  return import(`@/views/${value}`)
}
export default {
  components: {},
  props: {
  },
  
  data() {
    
    return {
      activeMenu: 'Table',
      componentName: '',
      menuList: [
        // {
        //   label: '基本信息',
        //   name: 'Table',
        //   path: 'report/components/details/components/basicMessage.vue'
        // },
        // {
        //   label: '任务清单',
        //   name: 'task',
        //   path: 'task/components/index.vue'
        // }
      ],
      comments: {},
      isCollapse: true,
      width: '200px',
      reportMessage:{},
    };
  },
  watch: {},
  computed: {
    projectId() {
      return this.$route.query.projectId
    },
    assProjectId(){
      return this.$route.query.assProjectId || this.reportMessage.assoReportId
    },
    projectName() {
      return this.$route.query.projectName
    },
    projectType() {
      return this.$route.query.projectType
    },
    patentNo() {
      return this.$route.query.patentNo || this.reportMessage.signPatentNo
    },
    reportType() {
      return this.$route.query.reportType || this.reportMessage.reportType
    },
    status() {//报告状态3为完成
      return this.$route.query.status || this.reportMessage.status
    },
  },
  created() { },
  async mounted() {
    await this.getReportMessage()
    this.getMenu()
    
  },
  methods: {
    async getReportMessage() {
      let params = {
        searchQuery: `id=${this.projectId}`,//检索条件
        orderDTOList: [],
      }
      await this.$api.queryReportProject(params).then(res => {
        if (res.code == 200) {
          if (res.data.data.length > 0) {
            this.reportMessage = res.data.data[0]
          } else {
            this.reportMessage = {}
          }
        }
      }).catch(error => {
        this.reportMessage = {}
      })
    },
    getCollapse() {
      this.isCollapse = !this.isCollapse
      this.width = this.isCollapse ? '200px' : '64px'
    },
    getMenu() {
      //0:无效分析；1：第三方意见；2：稳定性分析；3：FTO；4：侵权；5：回避；7：无效应对
      var menus = [
        {
          label: '基本信息',
          name: 'Table',
          path: 'report/components/details/components/basicMessage.vue',
          reportType: [1,2,3,4,5]
        },
        {
          label: '基本信息',
          name: 'Table',
          path: 'report/components/details/components/basicMessage_official.vue',
          reportType: [7]
        },

        {
          label: '标的专利特征拆分',
          name: 'splitPatent',
          path: 'report/components/details/components/splitDetails.vue',
          reportType: [1,2]
        },
        //FTO和侵权
        {
          label: '标的产品信息',
          name: 'informationEntry',
          path: 'report/tort/components/informationEntry/indexMenu.vue',
          reportType: [3, 4]
        },
        {
          label: '专利与产品关联比对',
          name: 'productMessage',
          path: 'report/tort/components/tortContrast.vue',
          reportType: [4]
        },
        {
          label: '对比文件',
          name: 'productMessage',
          path: 'report/components/patentList/components/index.vue',
          reportType: [3]
        },
        {
          label: '对比结果',
          name: 'productResult',
          path: 'report/components/productResult/productResult.vue',
          reportType: [3, 4]
        },
        //回避设计
        {
          label: '回避设计方案',
          name: "avoid",
          path: 'report/avoid/components/avoidDirection.vue',
          reportType: [5]
        },
        {
          label: '回避设计结果',
          name: "direction",
          path: 'report/avoid/components/direction.vue',
          reportType: [5]
        },

        //无效应对
        {
          label: '被无效历史',
          name: "InvalidHistory",
          path: 'project/patentDetails/components/patentMessage/history/InvalidHistory.vue',
          reportType: [7],
        },
        {
          label: '权利要求管理',
          name: "powerManage",
          path: 'report/InvalidResponse/components/powerManage/powerManage.vue',
          reportType: [7],
          ifWaiGuan:1
        },
        {
          label: '附图管理',
          name: "pictureManage",
          path: 'report/InvalidResponse/components/pictureManage/pictureManage.vue',
          reportType: [7],
          ifWaiGuan:3
        },
        {
          label: '无效理由和证据',
          name: "reasonsAndEvidence",
          path: 'report/InvalidResponse/components/reasonsAndEvidence/reasonsAndEvidence.vue',
          reportType: [7]
        },
        {
          label: '无效理由和证据-三性',
          name: "reasonsAndEvidence2",
          path: 'report/InvalidResponse/components/reasonsAndEvidence/details_2.vue',
          reportType: [7]
        },
        {
          label: '无效理由和证据-非三性',
          name: "reasonsAndEvidence1",
          path: 'report/InvalidResponse/components/reasonsAndEvidence/details_1.vue',
          reportType: [7]
        },
        {
          label: '证据文献',
          name: "evidence",
          path: 'report/InvalidResponse/components/Evidence/evidence.vue',
          reportType: [7]
        },
        //稳定性分析和第三方意见
        // {
        //   label: '标的专利特征拆分',
        //   name: "featureSplit",
        //   path: 'report/components/details/components/featureSplit.vue',
        //   reportType: [1,2]
        // },
        {
          label: '对比文献',
          name: "evidence",
          path: 'report/InvalidResponse/components/Evidence/evidence.vue',
          reportType: [1,2]
        },
        {
          label: '对比结果',
          name: "comparisonResult",
          path: 'report/analysisAndOpinion/components/comparisonResults/index.vue',
          reportType: [1,2]
        },
        {
          label: '对比方案',
          name: "comparisonPlan",
          path: 'report/analysisAndOpinion/components/comparisonPlan/comparisonPlan.vue',
          reportType: [1,2]
        },
        {
          label: '检索记录',
          name: "searchRecords",
          path: 'report/analysisAndOpinion/components/searchRecords/searchRecords.vue',
          reportType: [1,2,3]
        },
        {
          label: '报告文档',
          name: "reportFile",
          path: 'report/components/reportFile/reportFileTable.vue',
          reportType: [0, 1, 2, 3, 4, 5]
        },

      ]
      if (this.status == 3) {
        let arr = [
          {
            label: '后续事项',
            name: "remarryMatter",
            path: 'report/components/matter/remarryMatter.vue',
            reportType: [0, 1, 2, 3, 4, 5,7]
          },
        ]
        menus = menus.concat(arr)
      }
      menus.push(
        {
          label: '任务清单',
          name: 'task',
          path: 'task/components/index.vue',
          reportType: [0, 1, 2, 3, 4, 5]
        }
      )
      var menu = menus.filter(item => {
        if(item.ifWaiGuan){
          if(this.reportMessage.patentType == 3){
            return item.reportType.indexOf(Number(this.reportType)) != -1 && item.ifWaiGuan == 3
          }else{
            return item.reportType.indexOf(Number(this.reportType)) != -1 && item.ifWaiGuan!=3
          }
        }
        return item.reportType.indexOf(Number(this.reportType)) != -1
      })
      // this.menuList.splice(1, 0, ...menu)
      this.menuList = menu
      this.getComponents()
    },
    getComponents() {
      this.menuList.forEach((item, index) => {
        // import(`@/views/${item.path}`).then(res => {
        //   this.comments[item.name] = res.default
        //   if (index == 0) {
        //     this.componentName = this.comments[item.name]
        //   }
        // })
        loadComponent(item.path).then(component => {
          this.comments[item.name] = component.default
          if (index == 0) {
            this.componentName = this.comments[item.name]
          }
        })
      })
    },
    changeComponent(name) {
      this.activeMenu = name
      this.componentName = this.comments[name]
    },

  },
};
</script>
<style lang="scss" scoped>
.point {
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
  /* color: var(--color); */
  font-family: var(--fm);
  color: var(--color2);
  cursor: pointer;
  width: 100%;

  &:hover {
    background: #ecf5ff
  }
}
</style>