架构js

src/router/index.js

@@ -181,7 +181,7 @@ const routes = [
             path: "/frameworkIndex",
             meta: {
               title: '产品架构',
-              sign:'frameworkIndex',
+              sign: 'frameworkIndex',
               button: [],
            },
            component: () => import('@/views/product/components/framework/index.vue'),
@@ -456,15 +456,16 @@ const routes = [
       //   }
       // },
       //查看文件
-      // {
-      //   path:'/checkFile',
-      //   name:'/checkFile',
-      //   meta:{
-      //     aside:true,
-      //     hiddenHeader:true
-      //   },
-      //   component:() => import('@/views/workspace/components/menu/component/checkFile.vue'),
-      // },
+      {
+        path:'/checkFile',
+        name:'/checkFile',
+        meta:{
+          aside:true,
+          // hiddenHeader: true,
+          sign:'checkFile',
+        },
+        component:() => import('@/views/components/view/checkFile.vue'),
+      },
       //excel导入
       // {
       //   path: '/import',

src/views/components/view/checkFile.vue

@@ -0,0 +1,122 @@
+<template>
+    <div style="width:calc(100% - 40px)">
+        <div class="header">
+            <div style="color:black">{{ FileName }}</div>
+            <div>
+                <el-link style="font-size: 16px" @click="downLoad"><i class="fa el-icon-download"></i><span style="margin-left:10px">下载</span></el-link>
+            </div>
+        </div>
+        <div style="display:flex;justify-content: center;">
+            <div v-if="isPicture == 0"  v-loading="loadLoading" style="width:100%">
+                <iframe id="checkIframe" :src="FileUrl" frameborder="0" width="100%" :height="height"></iframe>
+            </div>
+            <el-image v-else :src="FileUrl" width="100%" :preview-src-list="srcList"></el-image>
+        </div>
+        
+    </div>
+</template>
+<script>
+import { downLoad2 } from '@/utils'
+export default {
+    data() {
+        return {
+            loadLoading:true,
+            FileName:'',
+            height:document.documentElement.clientHeight - 200,
+            srcList:[],
+        }
+    },
+    computed:{
+        row(){
+            return JSON.parse(this.$route.query.row);
+        },
+        FileUrl(){
+            return this.$route.query.FileUrl
+        },
+        isPicture(){
+            return this.$route.query.isPicture
+        },
+        reportId(){
+            return this.$route.query.reportId
+        }
+    },
+    mounted(){
+        this.FileName = this.row.name?this.row.name+'.'+this.row.suffix:this.row.fileName
+        if(this.isPicture == 1){
+            this.srcList = [this.FileUrl]
+        }else{
+            var that = this
+            this.$nextTick(()=>{
+                var a = document.getElementById('checkIframe')
+                a.onload = function() {
+                    that.loadLoading = false
+                };
+                if(a.contentDocument.readyState == 'complete'){
+                    that.loadLoading = false
+                }
+            })
+        }
+        
+    },
+  methods: {
+    downLoadFile(row){ 
+        var item = JSON.parse(JSON.stringify(row))
+        var href = ''
+        if(item.originalName){
+            href = `http://${this.$c.hostname}:8801/fileManager/downloadSystemFile?fileId=${item.id}`
+        }else{
+            href = `/api/report/api/download/downloadFile?url=${encodeURIComponent(item.url)}` 
+        }
+        const anchor = document.createElement('a');
+        const fileName = 'download';
+        if ('download' in anchor) {
+          anchor.href = href;
+          anchor.setAttribute("download", fileName);
+          anchor.className = "download-js-link";
+          anchor.innerHTML = "downloading...";
+          anchor.style.display = "none";
+          document.body.appendChild(anchor);
+          setTimeout(function () {
+            anchor.click();
+            document.body.removeChild(anchor);
+          }, 66);
+          return true;
+        }
+    },
+      
+    downLoad() {
+      if (this.row.originalName) { 
+        this.downLoadFile(this.row)
+        return false
+      }
+            if(this.reportId){
+                const href = `/api/report/api/download/downloadFile?url=${encodeURIComponent(this.row.url)}`
+                const anchor = document.createElement('a');
+                const fileName = 'download';
+                if ('download' in anchor) {
+                anchor.href = href;
+                anchor.setAttribute("download", fileName);
+                anchor.className = "download-js-link";
+                anchor.innerHTML = "downloading...";
+                anchor.style.display = "none";
+                document.body.appendChild(anchor);
+                setTimeout(function () {
+                    anchor.click();
+                    document.body.removeChild(anchor);
+                }, 66);
+                return true;
+                }
+            }
+            downLoad2(this.row.url) 
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+    .header{
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
+</style>

src/views/product/components/dialog/classifyNode.vue

@@ -61,7 +61,7 @@ export default {
       dialogVisible: false,
       // 分类节点表单数据
       form: {},
-      // 文件数组
+      // 待上传文件或图片的数组
       file:[],
       // 分类节点表单字段校验
       rules: {
@@ -78,17 +78,18 @@ export default {
 
   },
   methods: {
-    open(data, productName) {
+    // 打开弹窗,data有值是编辑，productName是产品名称，newData有值是树节点上的新增
+    open(data, productName,newData) {
       if (data) {
         this.form = JSON.parse(JSON.stringify(data))
         this.title = '编辑产品架构'
         if (this.form.pathName) {
-          this.value=this.form.pathName
+          this.form.parent_id=this.form.pathName
         } 
       } else {
         this.title='新增产品架构'
-        if (this.form.pathName) {
-          this.value=this.form.pathName
+        if (newData.pathName) {
+          this.form.parent_id=newData.pathName
         } else {
           this.form.parent_id=0
         }
@@ -99,13 +100,21 @@ export default {
       this.dialogVisible=true
     },
     // 图片变化的change事件
-    handleChange() {
+    handleChange(file,fileList) {
       this.$set(this.form,'pictures', [{url:file.url}])
       this.file=[file.raw]
     },
+     // 点击已上传的文件//showViewer是图片显示查看器
+    handlePictureCardPreview(file) {
+      this.$refs.image.showViewer = true
+    },
+    // 文件列表移除文件
+    handleRemove(file) {
+      this.file = []
+      this.form.pictures = []//直接清空适用于单张图片
+    },
     // 弹窗确定提交 
     submit() { 
-     
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
           let formData = new FormData()
@@ -123,21 +132,21 @@ export default {
           if (this.form.id) {// 编辑
             this.$api.edit(formData).then(res => {
               if (res.code == 200) {
-                this.$message.success('编辑成功')
+                this.$emit('isSuccess','更新成功')
+                this.$message.success('更新成功')
               }
             })
           } else {//新增
             this.$api.addTreeNode(formData).then(res => {
               if (res.code == 200) {
+                this.$emit('isSuccess','新增成功')
                 this.$message.success('新增成功')
               }
             })
           }
           this.handleClose()
 
-        } else {
-          
-        }
+        } 
       })
     },
     // 关闭

src/views/product/components/framework/viewIndex.vue

@@ -3,8 +3,18 @@
   <div class="framework">
     <el-container>
       <el-header>
-        <div>
-          <p style="margin-left: 10px;">产品名称：{{ row.productName }}</p>
+        <div style="display: flex;justify-content: space-between;">
+          <div style="margin-left: 10px;">
+            <p>产品名称：{{ row.productName }}</p>
+          </div>
+          <div>
+            <el-dropdown split-button type="primary" @click="handleCommand('0')" @command="handleCommand($event)">
+              <p>导 入</p>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="1">复制</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
         </div>
       </el-header>
       <el-container>
@@ -15,7 +25,8 @@
             <el-button type="primary" size="small" @click="handleAppend">新增分类节点</el-button>
           </div>
           <div>
-            <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="expandedKeys">
+            <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
+              :default-expanded-keys="expandedKeys">
               <!-- <el-tree ref="tree" :data="treeData" :props="treeProps" :current-node-key="parentId" @node-click="handleNodeClick" node-key="id" :default-checked-keys="expandedKeys" :highlight-current="true" :default-expanded-keys="expandedKeys" :expand-on-click-node="false"> -->
               <span class="custom-tree-node" slot-scope="{ node, data }">
                 <span>{{ node.label }}</span>
@@ -46,7 +57,8 @@
         </el-aside>
         <el-container>
           <el-main>
-            <component :is="componentType" :tableData="tableData" :queryParams="queryParams" @option="handleOption"></component>
+            <component :is="componentType" :tableData="tableData" :queryParams="queryParams" @option="handleOption">
+            </component>
           </el-main>
           <el-footer>
             <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
@@ -57,7 +69,7 @@
       </el-container>
     </el-container>
 
-    <classifyNode ref="classifyNode" :treeDataPath="treeDataPath"></classifyNode>
+    <classifyNode ref="classifyNode" :treeDataPath="treeDataPath" @isSuccess="handleSuccess"></classifyNode>
   </div>
 </template>
 
@@ -66,7 +78,7 @@ import frameworkTable from './view/table.vue'
 import classifyNode from '../dialog/classifyNode.vue';
 export default {
   props: {
-    row:Object,
+    row: Object,
   },
   components: {
     frameworkTable,
@@ -178,7 +190,7 @@ export default {
         label: 'structureName'
       },
       // 架构路径数组
-      treeDataPath:[],
+      treeDataPath: [],
       // 查询架构表格数据字段
       queryParams: {
         current: 1,
@@ -215,9 +227,9 @@ export default {
         }
       ],
       // 节点的展开
-      expandedKeys:[],
+      expandedKeys: [],
       // 当前节点下的所有数据
-      nodeChildrenData:[],
+      nodeChildrenData: [],
     }
   },
   mounted() {
@@ -227,7 +239,31 @@ export default {
     // this.getPath()
   },
   methods: {
-    handleNode() {//请求新数据后保持刷新前所点击的节点高亮并展开
+    //导入、复制等按钮事件
+    handleCommand(event) {
+      switch (event) {
+        case '0'://导入专利
+          this.importProject()
+          break;
+        case '1'://复制其他分类节点
+          this.nodeCopy()
+          break;
+
+        default:
+          break;
+      }
+    },
+    // 专利导入
+    importProject() { },
+    // 节点复制
+    nodeCopy(){},
+    // 子组件传来的消息,新增成功、编辑成功
+    handleSuccess(val) {
+      this.getList()
+      this.getPath()
+    },
+    //请求新数据后保持刷新前所点击的节点高亮并展开
+    handleNode() {
       this.expandedKeys = []
       if (sessionStorage.getItem('parentId')) {
         this.parentId = JSON.parse(sessionStorage.getItem('parentId'))
@@ -244,19 +280,38 @@ export default {
       console.log(val, row);
       switch (val) {
         case '0'://编辑
-          this.$refs.classifyNode.open(row,this.row.productName)
+          this.$refs.classifyNode.open(row, this.row.productName)
           break;
         case '1'://预览图片
-          
+          this.commandPackage(row)
           break;
         case '2'://删除
           this.deleNode(row)
           break;
-      
+
         default:
           break;
       }
     },
+    // 预览图片
+    commandPackage(row) {
+      if (row.pictures && row.pictures.length > 0) {
+        var item = row.pictures[0]//item是图片每条信息
+        var FileUrl = this.$p + row.pictures[0].url//FileUrl是每张图片的url
+        var isPicture = 1
+        const router = this.$router.resolve({
+          path: '/checkFile',
+          query: {
+            row: JSON.stringify(item),
+            FileUrl: FileUrl,
+            isPicture: isPicture,
+          }
+        })
+        window.open(router.href, '_blank');
+      } else {
+        this.$message.info("暂无图片，请先上传图片再进行预览！")
+      }
+    },
     // 删除
     deleNode(row) {
       this.$confirm('此操作将删除当前节点及其下属节点, 是否继续?', '提示', {
@@ -266,7 +321,7 @@ export default {
       }).then(() => {
         // 调用接口
         this.deleData.push(row)
-        let params = [ row.id ]
+        let params = [row.id]
         this.$api.deleteEvent(params).then(res => {
           if (res.code == 200) {
             this.getList()
@@ -280,20 +335,35 @@ export default {
     // 按钮新增分类节点/树节点新增
     handleAppend() {
       // console.log(this.row);
-      this.$refs.classifyNode.open(null,this.row.productName)
+      this.$refs.classifyNode.open(null, this.row.productName)
     },
     // 根据产品名称查询产品
     handleQuery() {
       this.getList()
+      // 遍历返回的数据，对有相同搜索值进行高亮
+      this.treeData.forEach(item => {
+        this.getChildrenHeight(item)
+      })
+    },
+    // 递归查询每一个children是否有与搜索相同的字段
+    getChildrenHeight(data) {
+      if (data.name.indexOf(this.productName) != -1) {
+        data.name.replace(this.productName, `<span style="color:red;font-weight:700;">${this.productName}</span>`)
+      }
+      if (data.children && data.children.length > 0) {
+        this.getChildrenHeight(data.children)
+      } else {
+        return
+      }
     },
     // 树节点上的新增
     append(data, node) {
-      this.$refs.classifyNode.open(data,this.row.productName)
+      this.$refs.classifyNode.open(null, this.row.productName,data)
       // console.log(data, node);
     },
     // 树节点上的编辑
     edit(data, node) {
-      this.$refs.classifyNode.open(data,this.row.productName)
+      this.$refs.classifyNode.open(data, this.row.productName)
       // console.log(data, node);
     },
     // 树节点上的删除
@@ -302,9 +372,9 @@ export default {
       // console.log(data, node);
     },
     // 树节点点击事件
-    handleNodeClick(data, node) { 
+    handleNodeClick(data, node) {
       // console.log(data, node);
-      if (data.children && data.children.length>0) {
+      if (data.children && data.children.length > 0) {
         // this.tableData = 
         this.nodeChildrenData = data.children
         this.handleCurrent()
@@ -313,10 +383,10 @@ export default {
     // 请求数据（tree）
     getList() {
       let params = {
-        productName:this.productName,//事件名称
+        name: this.productName,//事件名称
       }
       this.$api.queryList(params).then(res => {
-        if (res.code == 200 ) {
+        if (res.code == 200) {
           this.treeData = res.data
           this.nodeChildrenData = res.data.children
           this.handleCurrent()
@@ -326,24 +396,24 @@ export default {
     // 请求架构路径
     getPath() {
       let params = {
-        
+
       }
       this.$api.path(params).then(res => {
-        if (res.code == 200 ) {
+        if (res.code == 200) {
           this.treeDataPath = res.data
         }
       })
     },
     // 分页
-    handleCurrentChange(val) { 
+    handleCurrentChange(val) {
       this.queryParams.current = val;
       this.handleCurrent()
     },
     // 分页处理
     handleCurrent() {
-      this.total=this.nodeChildrenData.length
+      this.total = this.nodeChildrenData.length
       let start = this.queryParams.size * (this.queryParams.current - 1)
-      let end =this.queryParams.size * this.queryParams.current
+      let end = this.queryParams.size * this.queryParams.current
       this.tableData = this.nodeChildrenData.slice(start, end)
     },
   },
@@ -355,11 +425,9 @@ export default {
   .el-divider--horizontal {
     margin: 15px 0,
   }
-  
+
 }
 </style>
 <style lang="scss" scoped>
-.framework {
- 
-}
+.framework {}
 </style>

src/views/product/components/index.vue

@@ -160,6 +160,7 @@ export default {
         case '2'://预览图片
           break;
         case '3'://分类架构
+          this.toFramework(row)
           break;
         case '4'://专利布局可视化
           break;
@@ -170,6 +171,16 @@ export default {
           break;
       }
     },
+     // 进入产品类别分类架构（与产品架构一致）
+    toFramework(row) {
+      let router = this.$router.resolve({
+        path: '/frameworkIndex',
+        query: {
+          row:JSON.stringify(row)
+        }
+      })
+      window.open(router.href,'_blank')
+    },
     //获取删除的id
     deletes(row){
       this.deleteData([row.id])