瀏覽代碼

产品架构

zhuhao 1 年之前
父節點
當前提交
691b0978e9

+ 2 - 0
src/api/index.js

@@ -26,6 +26,7 @@ import InvalidResponse from "./InvalidResponse";
 
 // 新系统新接口文件
 import event from "./newApi/event";
+import framework from "./newApi/framework";
 
 export default {
   ...report,
@@ -52,4 +53,5 @@ export default {
   ...InvalidResponse,
 
   ...event,
+  ...framework,
 }

+ 10 - 0
src/api/newApi/framework.js

@@ -0,0 +1,10 @@
+import axios from '@/utils/axios'
+// 新系统架构新接口
+export default {
+  /**
+  * 新增架构
+  */
+  addTreeNode(data) {
+    return axios.post('/xiaoshi/treeNode/addTreeNode', data)
+  },
+}

+ 61 - 22
src/views/product/components/dialog/classifyNode.vue

@@ -3,16 +3,16 @@
   <div class="classifyNode">
     <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px" :close-on-click-modal="false">
       <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
-        <el-form-item label="所属产品名称" prop="productName">
-          <el-input v-model="form.productName" disabled placeholder="请输入所属产品名称"></el-input>
+        <el-form-item label="所属产品名称" prop="name">
+          <el-input v-model="form.name" disabled placeholder="请输入所属产品名称"></el-input>
         </el-form-item>
-        <el-form-item label="所属架构" prop="parentPath">
-          <el-select v-model="value" placeholder="请输入所属产品架构" :disabled="form.isAppend==1" style="width: 100%;">
+        <el-form-item label="所属架构" >
+          <el-select v-model="form.parent_id" placeholder="请输入所属产品架构" style="width: 100%;">
             <el-option
               v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
+              :key="item.parent_id"
+              :label="item.path"
+              :value="item.parent_id">
             </el-option>
           </el-select>
         </el-form-item>
@@ -50,6 +50,9 @@
 
 <script>
 export default {
+  props: {
+    treeDataPath:Array
+  },
   data() {
     return {
       // 分类节点弹窗title
@@ -58,46 +61,80 @@ export default {
       dialogVisible: false,
       // 分类节点表单数据
       form: {},
+      // 文件数组
+      file:[],
       // 分类节点表单字段校验
       rules: {
-        productName: [ { required: true, message: '请输入所属产品名称', trigger: 'blur' },],
+        name: [ { required: true, message: '请输入所属产品名称', trigger: 'blur' },],
         classifyName: [ { required: true, message: '请输入产品架构名称', trigger: 'blur' },],
       },
       // 所属架构选择的数据源
-      options: [],
-      // 所属架构选择的值
-      value:'/',
+      options: [
+        {parent_id:0,path:'/'}
+      ],
     }
   },
   mounted() {
 
   },
   methods: {
-    open(row) {
-      this.form=JSON.parse(JSON.stringify(row))
-      if (this.form.isAppend == 1) {
-        this.title='新增产品架构'
+    open(data, productName) {
+      if (data) {
+        this.form = JSON.parse(JSON.stringify(data))
+        this.title = '编辑产品架构'
         if (this.form.pathName) {
           this.value=this.form.pathName
-        } else {
-          this.value='/'
-        }
+        } 
       } else {
-        this.title = '编辑产品架构'
+        this.title='新增产品架构'
         if (this.form.pathName) {
           this.value=this.form.pathName
-        } 
-        // this.options=路径数据
+        } else {
+          this.form.parent_id=0
+        }
       }
+      // this.options=this.treeDataPath
+      this.form.name = productName
+      // console.log(this.form,productName);
       this.dialogVisible=true
     },
     // 图片变化的change事件
-    handleChange(){},
+    handleChange() {
+      this.$set(this.form,'pictures', [{url:file.url}])
+      this.file=[file.raw]
+    },
     // 弹窗确定提交 
     submit() { 
+     
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
+          let formData = new FormData()
+          if (this.file.length>0) {
+            formData.append('files',this.file)
+          }
+          this.form.type = 1//类型:1产品类别,2产品,3技术分类,4自定义树
+          let arr=this.options.filter(item => {
+            return item.parent_id == this.form.parent_id
+          })
+          this.form.path = arr[0].path
+          console.log(this.form);
+          formData.append('productCategory', JSON.stringify(this.form))
+          // return
+          if (this.form.id) {// 编辑
+            this.$api.edit(formData).then(res => {
+              if (res.code == 200) {
+                this.$message.success('编辑成功')
+              }
+            })
+          } else {//新增
+            this.$api.addTreeNode(formData).then(res => {
+              if (res.code == 200) {
+                this.$message.success('新增成功')
+              }
+            })
+          }
           this.handleClose()
+
         } else {
           
         }
@@ -105,6 +142,8 @@ export default {
     },
     // 关闭
     handleClose() {
+      this.$refs.ruleForm.resetFields()
+      this.form={}
       this.dialogVisible=false
     },
   },

+ 17 - 1
src/views/product/components/framework/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 架构 -->
   <div>
-    <viewIndex style="height: 100%;"></viewIndex>
+    <viewIndex style="height: 100%;" :row="row"></viewIndex>
   </div>
 </template>
 
@@ -11,6 +11,22 @@ export default {
   components: {
     viewIndex
   },
+  data() {
+    return {
+      
+    }
+  },
+  computed: {
+    row() {
+      return JSON.parse(this.$route.query.row)
+    },
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  },
 }
 </script>
 

+ 98 - 17
src/views/product/components/framework/viewIndex.vue

@@ -1,11 +1,10 @@
 <template>
   <!-- 架构主页面 -->
   <div class="framework">
-
     <el-container>
       <el-header>
         <div>
-          <p style="margin-left: 10px;">产品名称:Header</p>
+          <p style="margin-left: 10px;">产品名称:{{ row.productName }}</p>
         </div>
       </el-header>
       <el-container>
@@ -16,7 +15,7 @@
             <el-button type="primary" size="small" @click="handleAppend">新增分类节点</el-button>
           </div>
           <div>
-            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
+            <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>
@@ -58,7 +57,7 @@
       </el-container>
     </el-container>
 
-    <classifyNode ref="classifyNode"></classifyNode>
+    <classifyNode ref="classifyNode" :treeDataPath="treeDataPath"></classifyNode>
   </div>
 </template>
 
@@ -66,6 +65,9 @@
 import frameworkTable from './view/table.vue'
 import classifyNode from '../dialog/classifyNode.vue';
 export default {
+  props: {
+    row:Object,
+  },
   components: {
     frameworkTable,
     classifyNode
@@ -170,10 +172,13 @@ export default {
         }
 
       ],
+      // 树形组件的显示及其子级
       defaultProps: {
         children: 'children',
         label: 'structureName'
       },
+      // 架构路径数组
+      treeDataPath:[],
       // 查询架构表格数据字段
       queryParams: {
         current: 1,
@@ -209,57 +214,133 @@ export default {
           "createTime": "2023-05-11 17:28:06"
         }
       ],
+      expandedKeys:[],
     }
   },
   mounted() {
-
+    // 请求数据(左侧tree)
+    // this.getList()
+    // 请求架构路径
+    // this.getPath()
   },
   methods: {
+    handleNode() {//请求新数据后保持刷新前所点击的节点高亮并展开
+      this.expandedKeys = []
+      if (sessionStorage.getItem('parentId')) {
+        this.parentId = JSON.parse(sessionStorage.getItem('parentId'))
+        this.expandedKeys.push(this.parentId)
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(this.parentId)
+          this.queryParams.structureId = this.parentId
+          this.getList()
+        })
+      }
+    },
     // 子组件传来的值
     handleOption({ val, row }) {
       console.log(val, row);
       switch (val) {
         case '0'://编辑
-          row.isAppend=2
-          this.$refs.classifyNode.open(row)
+          this.$refs.classifyNode.open(row,this.row.productName)
+          break;
+        case '1'://预览图片
+          
+          break;
+        case '2'://删除
+          this.deleNode(row)
           break;
       
         default:
           break;
       }
     },
+    // 删除
+    deleNode(row) {
+      this.$confirm('此操作将删除当前节点及其下属节点, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 调用接口
+        this.deleData.push(row)
+        let params = [ row.id ]
+        this.$api.deleteEvent(params).then(res => {
+          if (res.code == 200) {
+            this.getList()
+            this.$message.success('删除该当前分类节点及所属子级分类节点成功!');
+          }
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除');
+      });
+    },
     // 按钮新增分类节点/树节点新增
     handleAppend() {
-      this.$refs.classifyNode.open({isAppend:1})
+      // console.log(this.row);
+      this.$refs.classifyNode.open(null,this.row.productName)
     },
     // 根据产品名称查询产品
     handleQuery() {
-      
+      this.getList()
     },
+    // 树节点上的新增
     append(data, node) {
-      data.isAppend = 1
-      this.$refs.classifyNode.open(data)
+      this.$refs.classifyNode.open(data,this.row.productName)
       // console.log(data, node);
     },
-    // 树节点编辑
+    // 树节点上的编辑
     edit(data, node) {
-      data.isAppend = 2
-      this.$refs.classifyNode.open(data)
+      this.$refs.classifyNode.open(data,this.row.productName)
       // console.log(data, node);
     },
-    // 树节点删除
+    // 树节点上的删除
     remove(data, node) {
+      this.deleNode(data)
       // console.log(data, node);
     },
     // 树节点点击事件
     handleNodeClick(data, node) { 
       // console.log(data, node);
       if (data.children && data.children.length>0) {
-        this.tableData=data.children
+        this.tableData = data.children
+        this.handleCurrent(data.children)
       }
     },
+    // 请求数据(tree)
+    getList() {
+      let params = {
+        productName:this.productName,//事件名称
+      }
+      this.$api.queryList(params).then(res => {
+        if (res.code == 200 ) {
+          this.treeData = res.data
+          this.tableData = res.data.children
+          this.handleCurrent(res.data.children)
+        }
+      })
+    },
+    // 请求架构路径
+    getPath() {
+      let params = {
+        
+      }
+      this.$api.path(params).then(res => {
+        if (res.code == 200 ) {
+          this.treeDataPath = res.data
+        }
+      })
+    },
     // 分页
-    handleCurrentChange(val) { },
+    handleCurrentChange(val) { 
+      this.queryParams.current = val;
+    },
+    // 分页处理
+    handleCurrent(nodeData) {
+      this.total=nodeData.length
+      let start = this.queryParams.size * (this.queryParams.current - 1)
+      let end =this.queryParams.size * this.queryParams.current
+      this.tableData = nodeData.slice(start, end)
+    },
   },
 }
 </script>

+ 1 - 1
src/views/product/components/view/categoryTable.vue

@@ -124,7 +124,7 @@ export default {
       let router = this.$router.resolve({
         path: '/frameworkIndex',
         query: {
-          
+          row:JSON.stringify(row)
         }
       })
       window.open(router.href,'_blank')