架构更改

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

@@ -1,43 +1,40 @@
 <template>
   <!-- 新增/编辑架构分类节点 -->
   <div class="classifyNode">
-    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px" :close-on-click-modal="false">
+    <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="name">
-          <el-input v-model="form.name" disabled placeholder="请输入所属产品名称"></el-input>
+        <el-form-item label="所属产品名称" prop="productName">
+          <el-input v-model="form.productName" disabled placeholder="请输入所属产品名称"></el-input>
         </el-form-item>
-        <el-form-item label="所属架构" >
+        <el-form-item label="所属架构">
           <el-select v-model="form.parent_id" placeholder="请输入所属产品架构" style="width: 100%;">
-            <el-option
-              v-for="item in options"
-              :key="item.parent_id"
-              :label="item.path"
-              :value="item.parent_id">
+            <el-option v-for="item in options" :key="item.parent_id" :label="item.path" :value="item.parent_id">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="产品架构名称" prop="classifyName">
-          <el-input v-model="form.classifyName" placeholder="请输入产品架构名称"></el-input>
+        <el-form-item label="产品架构名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入产品架构名称"></el-input>
         </el-form-item>
         <el-form-item label="图片" prop="">
           <el-upload ref="upload" action="#" :auto-upload="false" :on-change="handleChange" list-type="picture"
             :show-file-list="false">
-            <span v-if="form.pictures && form.pictures.length > 0" class="avatar">
+            <span v-if="form.systemFileList && form.systemFileList.length > 0" class="avatar">
               <span class="deleteImg">
                 <span>
                   <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview"></i>
                   <i class="el-icon-delete" @click.stop="handleRemove"></i>
                 </span>
               </span>
-              <el-image ref="image" style="width:100%;height: 100%;"
-                :src="form.pictures[0].id ? $p2 + form.pictures[0].url : form.pictures[0].url"
-                :preview-src-list="form.pictures ? form.pictures.map(item => { return item.id ? $p2 + item.url : item.url }) : []"></el-image>
+              <el-image ref="image" style="width:100%;height: 100%;"  
+                :src="form.systemFileList[0].guid ? $commonJS.checkViewer(form.systemFileList[0].guid) : form.systemFileList[0].url"
+                :preview-src-list="form.systemFileList ? form.systemFileList.map(item => { return item.guid ? $commonJS.checkViewer(item.guid) : item.url }) : []"></el-image>
             </span>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
-        <el-form-item label="产品架构说明" prop="remark">
-          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入产品架构说明"></el-input>
+        <el-form-item label="产品架构说明" prop="description">
+          <el-input v-model="form.description" type="textarea" :rows="2" placeholder="请输入产品架构说明"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -51,7 +48,7 @@
 <script>
 export default {
   props: {
-    treeDataPath:Array
+    treeDataPath: Array
   },
   data() {
     return {
@@ -62,16 +59,14 @@ export default {
       // 分类节点表单数据
       form: {},
       // 待上传文件或图片的数组
-      file:[],
+      files: [],
       // 分类节点表单字段校验
       rules: {
-        name: [ { required: true, message: '请输入所属产品名称', trigger: 'blur' },],
-        classifyName: [ { required: true, message: '请输入产品架构名称', trigger: 'blur' },],
+        productName: [{ required: true, message: '请输入所属产品名称', trigger: 'blur' },],
+        name: [{ required: true, message: '请输入产品架构名称', trigger: 'blur' },],
       },
       // 所属架构选择的数据源
-      options: [
-        {parent_id:0,path:'/'}
-      ],
+      options: [{ parent_id: 0, path: '/' }],
     }
   },
   mounted() {
@@ -79,81 +74,80 @@ export default {
   },
   methods: {
     // 打开弹窗,data有值是编辑，productName是产品名称，newData有值是树节点上的新增
-    open(data, productName, newData) {
+    open(data, row, newData) {
+      console.log(data);
       if (data) {
-        this.form = JSON.parse(JSON.stringify(data))
-        this.title = '编辑产品架构'
-        if (this.form.pathName) {
-          this.form.parent_id=this.form.pathName
-        } 
+          this.form = JSON.parse(JSON.stringify(data))
+          this.title = '编辑产品架构'
+          if (this.form.pathName) {
+            this.form.parent_id = this.form.pathName
+          }
       } else {
-        this.title='新增产品架构'
+        this.title = '新增产品架构'
         if (newData && newData.pathName) {
-          this.form.parent_id=newData.pathName
+          this.form.parent_id = newData.pathName
         } else {
-          this.form.parent_id=0
+          this.form.parent_id = 0
         }
       }
       // this.options=this.treeDataPath
-      this.form.name = productName
-      // console.log(this.form,productName);
-      this.dialogVisible=true
+      this.form.type=row.typesOf//类型：1产品类别，2产品，3技术分类，4自定义树
+      this.form.productName = row.name
+      this.form.typeId=row.id
+      this.dialogVisible = true
     },
     // 图片变化的change事件
-    handleChange(file,fileList) {
-      this.$set(this.form,'pictures', [{url:file.url}])
-      this.file=[file.raw]
+    handleChange(file, fileList) {
+      this.$set(this.form, 'systemFileList', [{ url: file.url }])
+      this.files = [file.raw]
     },
-     // 点击已上传的文件//showViewer是图片显示查看器
+    // 点击已上传的文件//showViewer是图片显示查看器
     handlePictureCardPreview(file) {
       this.$refs.image.showViewer = true
     },
     // 文件列表移除文件
     handleRemove(file) {
-      this.file = []
-      this.form.pictures = []//直接清空适用于单张图片
+      this.files = []
+      this.form.systemFileList = []//直接清空适用于单张图片
     },
     // 弹窗确定提交 
-    submit() { 
+    submit() {
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
           let formData = new FormData()
-          if (this.file.length>0) {
-            formData.append('files',this.file)
+          if (this.files && this.files.length > 0) {
+            formData.append('files', this.files[0])
           }
-          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
+          formData.append('treeNode', JSON.stringify(this.form))
           if (this.form.id) {// 编辑
             this.$api.edit(formData).then(res => {
               if (res.code == 200) {
-                this.$emit('isSuccess','更新成功')
+                this.$emit('isSuccess', '更新成功')
                 this.$message.success('更新成功')
+                this.handleClose()
               }
+            }).cath(err => {
+              this.$message.error(err.message)
             })
           } else {//新增
             this.$api.addTreeNode(formData).then(res => {
               if (res.code == 200) {
-                this.$emit('isSuccess','新增成功')
+                this.$emit('isSuccess', '新增成功')
                 this.$message.success('新增成功')
-              }
+                this.handleClose()
+              } 
+            }).cath(err => {
+              this.$message.error(err.message)
             })
           }
-          this.handleClose()
-
-        } 
+        }
       })
     },
     // 关闭
     handleClose() {
       this.$refs.ruleForm.resetFields()
-      this.form={}
-      this.dialogVisible=false
+      this.form = {}
+      this.dialogVisible = false
     },
   },
 }
@@ -177,6 +171,7 @@ export default {
   width: 148px;
   height: 148px;
   display: block;
+
   .deleteImg {
     display: none;
     font-size: 30px;
@@ -192,12 +187,12 @@ export default {
     margin: auto;
     z-index: 999;
   }
-  
+
   .deleteImg span i {
     margin-left: 10px;
     color: #fff;
   }
-  
+
   .deleteImg span {
     display: flex;
     align-items: center;
@@ -212,5 +207,4 @@ export default {
 .avatar:hover .deleteImg {
   display: block;
 }
-
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <!-- 架构 -->
   <div>
-    <viewIndex style="height: 100%;" :row="row"></viewIndex>
+    <viewIndex style="height: 100%;" :row="row" :typesOf="typesOf"></viewIndex>
   </div>
 </template>
 
@@ -20,6 +20,9 @@ export default {
     row() {
       return JSON.parse(this.$route.query.row)
     },
+    typesOf() {//判断是分类架构还是产品架构
+      return this.$route.query.typesOf
+    },
   },
   mounted() {
     

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

@@ -20,7 +20,7 @@
       <el-container>
         <el-aside width="380px" style="height: 100%;padding: 10px;">
           <div style="display:flex;margin-bottom:10px;">
-            <el-input v-model="productName" size="small" placeholder="请输入产品名称" style="margin-right:10px;"></el-input>
+            <el-input v-model="productName" size="small" placeholder="请输入名称" style="margin-right:10px;"></el-input>
             <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
             <el-button type="primary" size="small" @click="handleAppend">新增分类节点</el-button>
           </div>
@@ -79,6 +79,7 @@ import classifyNode from '../dialog/classifyNode.vue';
 export default {
   props: {
     row: Object,
+    typesOf:Number,
   },
   components: {
     frameworkTable,
@@ -233,6 +234,7 @@ export default {
     }
   },
   mounted() {
+    this.row.typesOf = this.typesOf
     // 请求数据（左侧tree）
     // this.getList()
     // 请求架构路径
@@ -277,10 +279,10 @@ export default {
     },
     // 子组件传来的值
     handleOption({ val, row }) {
-      console.log(val, row);
+      // console.log(val, row);
       switch (val) {
         case '0'://编辑
-          this.$refs.classifyNode.open(row, this.row.name)
+          this.$refs.classifyNode.open(row, this.row)
           break;
         case '1'://预览图片
           this.commandPackage(row)
@@ -334,8 +336,7 @@ export default {
     },
     // 按钮新增分类节点/树节点新增
     handleAppend() {
-      // console.log(this.row);
-      this.$refs.classifyNode.open(null, this.row.name)
+      this.$refs.classifyNode.open(null, this.row)
     },
     // 根据产品名称查询产品
     handleQuery() {
@@ -358,18 +359,17 @@ export default {
     },
     // 树节点上的新增
     append(data, node) {
-      this.$refs.classifyNode.open(null, this.row.name,data)
+      this.$refs.classifyNode.open(null, this.row,data)
       // console.log(data, node);
     },
     // 树节点上的编辑
     edit(data, node) {
-      this.$refs.classifyNode.open(data, this.row.name)
+      this.$refs.classifyNode.open(data, this.row)
       // console.log(data, node);
     },
     // 树节点上的删除
     remove(data, node) {
       this.deleNode(data)
-      // console.log(data, node);
     },
     // 树节点点击事件
     handleNodeClick(data, node) {
@@ -384,6 +384,8 @@ export default {
     getList() {
       let params = {
         name: this.productName,//事件名称
+        type: this.typesOf,//类型：1产品类别，2产品，3技术分类，4自定义树
+        typeId: this.row.id,//产品或类别id
       }
       this.$api.queryList(params).then(res => {
         if (res.code == 200) {
@@ -391,12 +393,15 @@ export default {
           this.nodeChildrenData = res.data.children
           this.handleCurrent()
         }
+      }).cath(err => {
+        this.$message.error(err.message)
       })
     },
     // 请求架构路径
     getPath() {
       let params = {
-
+        type: this.typesOf,//区分产品架构、自定义树等
+        type_id: this.row.id,//产品或类别id
       }
       this.$api.path(params).then(res => {
         if (res.code == 200) {

src/views/product/components/index.vue

@@ -176,7 +176,7 @@ export default {
           this.checkImage(row)
           break;
         case '3'://分类架构
-          this.toFramework(row)
+          this.toFramework(row,1)
           break;
         case '4'://专利布局可视化
           break;
@@ -197,7 +197,7 @@ export default {
           
           break;
         case '2'://产品架构
-          this.toFramework(row)
+          this.toFramework(row,2)
           break;
         case '3'://产品的营销数据
           this.$refs.marketing.open(row)
@@ -228,11 +228,12 @@ export default {
     },
 
      // 进入产品类别分类架构（与产品架构一致）
-    toFramework(row) {
+    toFramework(row,val) {
       let router = this.$router.resolve({
         path: '/frameworkIndex',
         query: {
-          row: JSON.stringify(row)
+          row: JSON.stringify(row),
+          typesOf:val,
         }
       })
       window.open(router.href, '_blank')