搭建商品化专利、架构

src/router/index.js

@@ -177,24 +177,26 @@ const routes = [
       //       },
       //       component: () => import('@/views/product/components/echarts'),
       //     },
-      //     {
-      //       path: "/frameworkIndex",
-      //       meta: {
-      //        title: '产品架构',
-      //        button: [],
-      //      },
-      //      component: () => import('@/views/product/components/framework/index.vue'),
+          {
+            path: "/frameworkIndex",
+            meta: {
+              title: '产品架构',
+              sign:'frameworkIndex',
+              button: [],
+           },
+           component: () => import('@/views/product/components/framework/index.vue'),
          
-      //    },
-      //     {
-      //       path: "/relatedPatentsIndex",
-      //       meta: {
-      //        title: '产品相关专利',
-      //        button: [],
-      //      },
-      //      component: () => import('@/views/product/components/relatedPatents/index.vue'),
+         },
+          {
+            path: "/commodity",
+            meta: {
+              title: '产品商品化专利',
+              sign:'commodity',
+             button: [],
+           },
+           component: () => import('@/views/product/components/commodity/index.vue'),
          
-      //    },
+         },
         ],
         
       },

src/views/product/components/commodity/commodity.vue

@@ -0,0 +1,237 @@
+<template>
+  <!-- 商品化专利主页面 -->
+  <div class="commodity">
+    <el-container>
+      <el-header class="header">
+        <div class="headerDiv_one">测试人员产品产品的相关专利</div>
+        <div class="headerDiv_two">
+          <div>
+            <mySearch style="width: 500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
+            </mySearch>
+          </div>
+          <div style="margin-right: 10px;">
+            <el-popover placement="bottom" title="" width="250" trigger="click">
+              <el-main class="patent-fast-edit-popover">
+                <div class="btn" @click="handleSelectNumber(-1)">取消选择</div>
+                <div class="btn" @click="handleSelectNumber(0)">本页选择</div>
+                <div class="btn" @click="handleSelectNumber(1)">全部选择</div>
+                <el-divider></el-divider>
+                <div class="select-number">
+                  <span>从</span>
+                  <el-input size="mini" v-model="queryParams.startNumber" @change="change1"></el-input>
+                  <span>到</span>
+                  <el-input size="mini" v-model="queryParams.endNumber" @change="change2"></el-input>
+                  <el-button type="text" size="" @click="handleSelectNumber(2)">确定</el-button>
+                </div>
+              </el-main>
+              <el-button type="primary" size="small" class="margin-right_10" slot="reference">
+                选择专利<i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+            </el-popover>
+            <el-dropdown split-button type="primary" size="small" @click="handleCommand('0')"
+              @command="handleCommand($event)">
+              <p>删除</p>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <el-dropdown placement="left-start" @command="handleCommand($event)">
+                    <span>专利导入</span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item command="1">专利号导入</el-dropdown-item>
+                      <el-dropdown-item command="2">Excel导入</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </el-dropdown-item>
+                <el-dropdown-item command="3">显示栏位管理</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
+      </el-header>
+      <el-main>
+        <component :is="componentType" :tableData="tableData" :queryParams="queryParams"></component>
+      </el-main>
+      <el-footer>
+        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
+          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
+        </el-pagination>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import commodityTable from './view/table.vue'
+export default {
+  components: {
+    commodityTable,
+  },
+  data() {
+    return {
+      //检索字段
+      searchFiled: [
+        {
+          label: '标题',
+          value: 'productName1',
+          type: 1,
+          placeholder: '请输入标题'
+        },
+        {
+          label: '摘要',
+          value: 'productName2',
+          type: 1,
+          placeholder: '请输入摘要'
+        },
+        {
+          label: '专利号',
+          value: 'productName3',
+          type: 1,
+          placeholder: '请输入专利号'
+        },
+        {
+          label: '申请号',
+          value: 'productName4',
+          type: 1,
+          placeholder: '请输入申请号'
+        },
+        {
+          label: '申请人',
+          value: 'productName5',
+          type: 1,
+          placeholder: '请输入申请人'
+        },
+        {
+          label: '权利人',
+          value: 'productName6',
+          type: 1,
+          placeholder: '请输入权利人'
+        },
+      ],
+      //检索条件
+      searchOption: {
+        questionName: this.eventName,
+        applicationScenario: this.applicationScenario
+      },
+      // 显示指定的子组件
+      componentType: 'commodityTable',
+      // 查询专利所需字段
+      queryParams: {
+        current: 1,
+        size: 10,
+      },
+      // 专利总数
+      total: 0,
+      // 子组件table数据源
+      tableData: [],
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    // 选择专利事件
+    handleSelectNumber(val) { },
+    // 起始数字框
+    change1(){},
+    // 结束数字框
+    change2(){},
+    // 分页
+    handleCurrentChange(val) { },
+    // 删除等下拉菜单
+    handleCommand(event) {
+      console.log(event);
+    },
+    //获取检索条件检索
+    search(val) {
+
+    },
+  },
+}
+</script>
+<style lang="scss">
+.commodity {
+  .el-footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    z-index: 1;
+    background: #fff;
+  }
+}
+.btn1 {
+  background: #909399;
+}
+
+.btn1:hover {
+  background-color: #a4a7ab;
+}
+
+.patent-fast-edit-popover {
+  padding: 0 !important;
+
+  .btn {
+    color: #000;
+    line-height: 40px;
+    border-radius: 5px;
+    padding-left: 10px;
+    cursor: pointer;
+
+    &:hover {
+      background: #adadad;
+      color: #fff;
+    }
+  }
+
+  .disabled {
+    cursor: not-allowed !important;
+  }
+
+  .bottom {
+    text-align: right;
+    color: #1e9fff;
+    line-height: 40px;
+    padding-left: 10px;
+    font-size: 18px;
+  }
+
+  .el-divider--horizontal {
+    margin: 10px 0 !important;
+  }
+
+  .select-number {
+    .el-input {
+      width: 70px;
+    }
+
+    span {
+      padding: 0 3px;
+    }
+  }
+}
+.patent-left {
+  margin-top: 69px;
+  overflow: hidden;
+  border-top: 1px solid rgb(228 231 237);
+}
+</style>
+<style lang="scss" scoped>
+.commodity {
+  .header {
+    height: 80px !important;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 0px !important;
+  }
+
+  .headerDiv_one {
+    width: 100%;
+    margin: 0 0 10px 10px
+  }
+
+  .headerDiv_two {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+}</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <!-- 商品化专利 -->
+  <div>
+    <commodity></commodity>
+  </div>
+</template>
+
+<script>
+import commodity from './commodity.vue';
+export default {
+  components: {
+    commodity
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/product/components/commodity/view/table.vue

@@ -0,0 +1,131 @@
+<template>
+  <!-- 商品化专利table -->
+  <div class="commodityTable">
+    <el-table :data="tableData" style="width: 100%" header-row-class-name="custom-table-header">
+      <el-table-column width="80" align="center" v-if="!structureId">
+        <template slot-scope="scope">
+          <div>
+            <el-checkbox-group v-model="checkList" style="display:inline-block">
+              <el-checkbox :label="scope.row.patentNo" @change="getFunInfo(scope.row.patentNo)">
+                <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
+              </el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row[item.key] }}
+          </div>
+        </template>
+        <!-- <template slot-scope="scope">
+          <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
+            <el-link @click="handleItem(scope.row, item.key)">{{ scope.row[item.key] }}</el-link>
+          </div>
+          <div v-else v-html="getColumnData(scope.row, item.key)"></div>
+        </template> -->
+      </el-table-column>
+
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tableData: {//数据
+      type: Array,
+      default: () => {
+        return [{ name: '123', eventNumber: '手机', projectNumber: '专题库一', projectNumber1: [{ name: '事件一' }] },]
+      }
+    },
+    queryParams: {//分页信息
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          current: 1,
+        }
+      }
+    },
+    column: {//显示栏位管理数组
+      type: Array,
+      default: () => {
+        return [
+          {
+            "key": "name",
+            "name": "名称",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "eventNumber",
+            "name": "标的专利/产品",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber",
+            "name": "相关专题库",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber1",
+            "name": "事件",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber2",
+            "name": "负责人",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber3",
+            "name": "状态",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber4",
+            "name": "创建人",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "time",
+            "name": "创建时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+        ]
+      }
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    // 勾选监听事件
+    getFunInfo(patentNo){},
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,7 +1,7 @@
 <template>
   <!-- 新增编辑产品类别 -->
-  <div>
-    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px">
+  <div class="addEditCategory">
+    <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="100px" class="demo-ruleForm">
         <el-form-item label="类别名称" prop="name" >
           <el-input v-model="form.name" placeholder="请输入类别名称"></el-input>
@@ -39,9 +39,13 @@
 export default {
   data() {
     return {
+      // 弹窗的title
       title: "",
+      // 控制弹窗显示
       dialogVisible: false,
+      // 类别表单数据
       form: {},
+      // 类别表单的校验规则
       rules: {
         name: [ { required: true, message: '请输入类别名称', trigger: 'blur' },],
       },

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

@@ -1,12 +1,13 @@
 <template>
-  <div>
-    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px">
+  <!-- 新增/编辑产品 -->
+  <div class="addEditProduct">
+    <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="category">
-          <el-input v-model="form.category" placeholder="请输入所属产品类别"></el-input>
+        <el-form-item label="所属产品类别" prop="productCategoryId">
+          <el-input v-model="form.productCategoryName" placeholder="请输入所属产品类别"></el-input>
         </el-form-item>
-        <el-form-item label="产品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入产品名称"></el-input>
+        <el-form-item label="产品名称" prop="productName">
+          <el-input v-model="form.productName" placeholder="请输入产品名称"></el-input>
         </el-form-item>
         <el-form-item label="上市时间" prop="marketTime">
           <el-date-picker
@@ -17,11 +18,11 @@
             style="width: 100%;">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="所属公司" prop="company">
-          <el-input v-model="form.company" :disabled="form.isTheCompany=='1'" placeholder="请输入所属公司"></el-input>
+        <el-form-item label="所属公司" prop="companyName">
+          <el-input v-model="form.companyName" :disabled="form.isTheCompany=='1' || form.id" placeholder="请输入所属公司"></el-input>
         </el-form-item>
-        <el-form-item label="参考许可费率" prop="rate">
-          <el-input v-model="form.rate" placeholder="请输入参考许可费率(介于 0 ~ 1 之间)"></el-input>
+        <el-form-item label="参考许可费率" prop="licenseRate">
+          <el-input v-model="form.licenseRate" placeholder="请输入参考许可费率(介于 0 ~ 1 之间)"></el-input>
         </el-form-item>
         <el-form-item label="图片" prop="">
           <el-upload ref="upload" action="#" :auto-upload="false" :on-change="handleChange" list-type="picture"
@@ -40,8 +41,8 @@
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
-        <el-form-item label="产品说明" prop="">
-          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入产品说明"></el-input>
+        <el-form-item label="产品说明" prop="productExplain">
+          <el-input v-model="form.productExplain" type="textarea" :rows="2" placeholder="请输入产品说明"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -56,12 +57,16 @@
 export default {
   data() {
     return {
+      // 产品弹窗的title
       title: "",
+      // 控制产品的关闭显示
       dialogVisible: false,
+      // 产品表单的数据
       form: {},
+      // 产品表单的校验
       rules: {
-        category: [{ required: true, message: '请输入所属产品类别', trigger: 'blur' },],
-        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' },],
+        productCategoryId: [{ required: true, message: '请输入所属产品类别', trigger: 'blur' },],
+        productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' },],
       },
     };
   },
@@ -75,14 +80,14 @@ export default {
     handleRemove(file) { },
     // 打开弹窗
     open(row) {
+      console.log(row);
       this.form = JSON.parse(JSON.stringify(row))
       if (this.form.id) {
-        this.title = '编辑产品类别'
+        this.title = '编辑产品'
       } else {
         if (this.form.isTheCompany=='1') {
           this.title = '新增本公司产品'
         } else {
-          
           this.title = '新增外公司产品'
         }
       }
@@ -124,44 +129,44 @@ export default {
 }
 
 .avatar {
-
   position: relative;
   width: 148px;
   height: 148px;
   display: block;
+  .deleteImg {
+    display: none;
+    font-size: 30px;
+    width: 148px;
+    height: 148px;
+    background-color: black;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    z-index: 999;
+  }
+  
+  .deleteImg span i {
+    margin-left: 10px;
+    color: #fff;
+  }
+  
+  .deleteImg span {
+    display: flex;
+    align-items: center;
+    /*垂直居中*/
+    justify-content: center;
+    /*水平居中*/
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .avatar:hover .deleteImg {
   display: block;
 }
 
-.deleteImg {
-  display: none;
-  font-size: 30px;
-  width: 148px;
-  height: 148px;
-  background-color: black;
-  opacity: 0.6;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  margin: auto;
-  z-index: 999;
-}
-
-.deleteImg span i {
-  margin-left: 10px;
-  color: #fff;
-}
-
-.deleteImg span {
-  display: flex;
-  align-items: center;
-  /*垂直居中*/
-  justify-content: center;
-  /*水平居中*/
-  width: 100%;
-  height: 100%;
-}</style>
+</style>

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

@@ -0,0 +1,168 @@
+<template>
+  <!-- 新增/编辑分类节点 -->
+  <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>
+        <el-form-item label="所属架构" prop="parentPath">
+          <el-select v-model="value" placeholder="请输入所属产品架构" :disabled="form.isAppend==1" style="width: 100%;">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </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>
+        <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 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>
+            </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>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="submit">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 分类节点弹窗title
+      title: '',
+      // 控制弹窗显示与隐藏
+      dialogVisible: false,
+      // 分类节点表单数据
+      form: {},
+      // 分类节点表单字段校验
+      rules: {
+        productName: [ { required: true, message: '请输入所属产品名称', trigger: 'blur' },],
+        classifyName: [ { required: true, message: '请输入产品架构名称', trigger: 'blur' },],
+      },
+      // 所属架构选择的数据源
+      options: [],
+      // 所属架构选择的值
+      value:'/',
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    open(row) {
+      this.form=JSON.parse(JSON.stringify(row))
+      if (this.form.isAppend == 1) {
+        this.title='新增产品架构'
+        if (this.form.pathName) {
+          this.value=this.form.pathName
+        } else {
+          this.value='/'
+        }
+      } else {
+        this.title = '编辑产品架构'
+        if (this.form.pathName) {
+          this.value=this.form.pathName
+        } 
+        // this.options=路径数据
+      }
+      this.dialogVisible=true
+    },
+    // 图片变化的change事件
+    handleChange(){},
+    // 弹窗确定提交 
+    submit() { 
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.handleClose()
+        } else {
+          
+        }
+      })
+    },
+    // 关闭
+    handleClose() {
+      this.dialogVisible=false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar-uploader-icon {
+  background-color: #fbfdff;
+  border: 1px dashed #c0ccda;
+  font-size: 28px;
+  color: #8c939d;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  text-align: center;
+}
+
+.avatar {
+
+  position: relative;
+  width: 148px;
+  height: 148px;
+  display: block;
+  .deleteImg {
+    display: none;
+    font-size: 30px;
+    width: 148px;
+    height: 148px;
+    background-color: black;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    z-index: 999;
+  }
+  
+  .deleteImg span i {
+    margin-left: 10px;
+    color: #fff;
+  }
+  
+  .deleteImg span {
+    display: flex;
+    align-items: center;
+    /*垂直居中*/
+    justify-content: center;
+    /*水平居中*/
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.avatar:hover .deleteImg {
+  display: block;
+}
+
+</style>

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

@@ -1,6 +1,7 @@
 <template>
-  <div>
-    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
+  <!-- 营销数据 -->
+  <div class="marketing">
+    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px" :close-on-click-modal="false">
       <el-table :data="tableData" header-row-class-name="custom-table-header">
         <el-table-column label="#" width="60" type="index" align="center">
           <template slot-scope="scope">
@@ -8,25 +9,72 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="时间" prop="time" align="center"> </el-table-column>
-        <el-table-column label="地区" prop="name" align="center"> </el-table-column>
-        <el-table-column label="销售量/件" prop="name" align="center"> </el-table-column>
-        <el-table-column label="销售额/万元" prop="name" align="center"> </el-table-column>
-        <el-table-column label="许可参考值" prop="name" align="center"> </el-table-column>
-        <el-table-column label="自定义许可费" prop="name" align="center"> </el-table-column>
+        <el-table-column label="时间" prop="saleTime" align="center">
+          <template slot-scope="scope">
+            <div>
+              <span v-if="!scope.row.isShow">{{ scope.row.saleTime }}</span>
+              <el-date-picker style="width: 100%" v-else v-model="scope.row.saleTime" type="month" value-format="yyyy-MM"
+                placeholder="选择日期时间">
+              </el-date-picker>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="地区" prop="saleArea" align="center">
+          <template slot-scope="scope">
+            <div>
+              <span v-if="!scope.row.isShow">{{ scope.row.saleArea }}</span>
+              <el-input v-else v-model="scope.row.saleArea"></el-input>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="销售量/件" prop="saleCount" align="center">
+          <template slot-scope="scope">
+            <div>
+              <span v-if="!scope.row.isShow">{{ scope.row.saleCount }}</span>
+              <el-input v-else v-model="scope.row.saleCount"></el-input>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="销售额/万元" prop="saleMoney" align="center">
+          <template slot-scope="scope">
+            <div>
+              <span v-if="!scope.row.isShow">{{ scope.row.saleMoney }}</span>
+              <el-input v-else v-model="scope.row.saleMoney"></el-input>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="许可参考值" prop="reference" align="center">
+          <template slot-scope="scope">
+            <div>
+              <span>{{ scope.row.licenseRate == 0 || scope.row.licenseRate ? (Number(scope.row.saleMoney) *
+                Number(scope.row.licenseRate)).toFixed(2) : '' }}</span>
+
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="自定义许可费" prop="customLicenseFee" align="center">
+          <template slot-scope="scope">
+            <div>
+              <span v-if="!scope.row.isShow">{{
+                scope.row.customLicenseRate == 0 || scope.row.customLicenseRate ? (Number(scope.row.saleMoney) *
+                  Number(scope.row.customLicenseRate)).toFixed(2) : '' }}</span>
+              <el-input v-else v-model="scope.row.customLicenseRates" placeholder="请输入自定义许可费率(许可费率介于0-1之间)"
+                @blur="changeEditId(scope.row)" @change="inpBlur" autofocus=true></el-input>
+            </div>
+          </template>
+        </el-table-column>
 
 
         <el-table-column label="操作" align="center" width="100px">
           <template slot-scope="scope">
-            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button type="text" @click="handleEdit(scope.row)">{{ scope.row.isShow ? '保存' : '编辑' }}</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)" style="color: red;">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div style="text-align: center;margin-top: 10px;">
-        <el-pagination background layout="total, prev, pager, next, jumper"
-          :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
-          @current-change="handleCurrentChange" :total="total">
+        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
+          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
         </el-pagination>
       </div>
     </el-dialog>
@@ -38,29 +86,89 @@
 export default {
   data() {
     return {
+      // 营销数据弹窗的title
       title: '',
+      // 控制营销数据弹窗的显示与消失
       dialogVisible: false,
-      queryParamsSon: {
+      // 查询营销数据的字段
+      queryParams: {
         current: 1,
         size: 10,
       },
+      // 营销数据的数量
       total: 0,
+      // 营销数据的数据
+      tableData: [
+        {
+          "id": 84,
+          "productId": 43,
+          "saleTime": "2023-06",
+          "saleArea": "苏村",
+          "saleCount": 12,
+          "saleMoney": 100,
+          "customLicenseRate": 0.5
+        }
+      ],
     }
   },
   mounted() {
 
   },
   methods: {
-    open(row){},
+    //失去焦点
+    changeEditId(row) {
+      this.inpBlur(row)
+      // if (this.editId) {
+        this.$set(this, 'editId', null)
+      // }
+      this.update(row)
+    },
+    // 许可费率事件//优化
+    inpBlur(row) {
+      var val = row.customLicenseRates
+      if (val) {
+        if (!isNaN(val)) {
+          if (val >= 0 && val <= 1) {
+            row.customLicenseRate = val
+          } else {
+            if (val > 1) {
+              row.customLicenseRate = 1
+              row.customLicenseRates = 1
+            }
+            if (val < 0) {
+              row.customLicenseRate = 0
+              row.customLicenseRates = 0
+            }
+          }
+        } else {
+          row.customLicenseRates = row.customLicenseRate ? row.customLicenseRate : ''
+        }
+      }
+
+    },
+    // 更新当前营销数据
+    update(row){},
+    // 打开弹窗
+    open(row) {
+      if (row && row.licenseRate) {
+        this.tableData[0].licenseRate = row.licenseRate
+      }
+      this.dialogVisible = true
+    },
     // 分页
     handleCurrentChange(val) {
-      
+
     },
     // 删除
     handleDelete(row) { },
-    // 编辑
+    // 编辑/保存
     handleEdit(row) {
-
+      if (row.isShow) {//保存
+        this.update(row)
+        this.$set(row, 'isShow', false)
+      } else {//编辑
+        this.$set(row, 'isShow', true)
+      }
     },
     // 弹窗取消
     handleClose() {

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

@@ -0,0 +1,17 @@
+<template>
+  <!-- 架构 -->
+  <div>
+    <viewIndex style="height: 100%;"></viewIndex>
+  </div>
+</template>
+
+<script>
+import viewIndex from './viewIndex.vue'
+export default {
+  components: {
+    viewIndex
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/product/components/framework/view/table.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="frameworkTable">
+    <el-table :data="tableData"  header-row-class-name="custom-table-header">
+      <el-table-column label="#" width="60" type="index" align="center">
+        <template slot-scope="scope">
+          <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="产品架构名称" prop="structureName" align="center"></el-table-column>
+      <el-table-column label="创建人" prop="createPersonName" align="center"> </el-table-column>
+      <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
+      <el-table-column label="产品架构说明" prop="remark" align="center">
+        <template slot-scope="scope">
+          <div>
+            <span>{{ scope.row.remark?scope.row.remark:'--' }}</span>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" width="150px">
+        <template slot-scope="scope">
+          <el-dropdown split-button type="primary" size="small" @click="handleCommand('0', scope.row)"
+            @command="handleCommand($event, scope.row)">
+            <p>编 辑</p>
+            <el-dropdown-menu slot="dropdown" style="text-align:center">
+              <el-dropdown-item command="1">预览图片</el-dropdown-item>
+              <el-dropdown-item command="2" divided style="color:red">删 除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    queryParams: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    // 编辑等下拉事件
+    handleCommand(val, row) { 
+      this.$emit('option',{val, row})
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,279 @@
+<template>
+  <!-- 架构主页面 -->
+  <div class="framework">
+
+    <el-container>
+      <el-header>
+        <div>
+          <p style="margin-left: 10px;">产品名称：Header</p>
+        </div>
+      </el-header>
+      <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-button type="primary" size="small" @click="handleQuery">查询</el-button>
+            <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="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>
+                <span style="padding-left: 10px;">
+                  <el-button type="text" size="mini" @click.stop.native="append(data, node)">
+                    <el-tooltip class="item" effect="dark" content="添加子级分类节点" placement="bottom-start">
+                      <i class="el-icon-plus" style="font-size: 16px;"></i>
+                    </el-tooltip>
+                  </el-button>
+                </span>
+                <span style="padding-left: 10px;">
+                  <el-button type="text" size="mini" @click.stop.native="edit(data, node)">
+                    <el-tooltip class="item" effect="dark" content="编辑分类节点" placement="bottom-start">
+                      <i class="el-icon-edit-outline" style="font-size: 16px;"></i>
+                    </el-tooltip>
+                  </el-button>
+                </span>
+                <span style="padding-left: 10px;">
+                  <el-button type="text" size="mini" @click.stop.native="remove(data, node)">
+                    <el-tooltip class="item" effect="dark" content="删除分类节点" placement="bottom-start">
+                      <i class="el-icon-delete" style="font-size: 16px;"></i>
+                    </el-tooltip>
+                  </el-button>
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </el-aside>
+        <el-container>
+          <el-main>
+            <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"
+              :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
+            </el-pagination>
+          </el-footer>
+        </el-container>
+      </el-container>
+    </el-container>
+
+    <classifyNode ref="classifyNode"></classifyNode>
+  </div>
+</template>
+
+<script>
+import frameworkTable from './view/table.vue'
+import classifyNode from '../dialog/classifyNode.vue';
+export default {
+  components: {
+    frameworkTable,
+    classifyNode
+  },
+  data() {
+    return {
+      // 控制显示哪一种视图
+      componentType: 'frameworkTable',
+      // 查询产品名称数据
+      productName: '',
+      // 树形组件的数据源
+      treeData: [
+
+        {
+          "id": 200,
+          "parentId": 0,
+          "structureName": "测试2",
+          "path": "0,200",
+          "pathName": "测试2/",
+          "productId": 43,
+          "pictures": [],
+          "children": [
+            {
+              "id": 201,
+              "parentId": 200,
+              "structureName": "测试2.1",
+              "path": "0,200,201",
+              "pathName": "测试2/测试2.1/",
+              "productId": 43,
+              "pictures": [
+                {
+                  "id": 60,
+                  "structureId": 201,
+                  "name": "98",
+                  "suffix": "jpg",
+                  "url": "/20230511/52caccb536774dd49e476a0762acf842.jpg"
+                }
+              ],
+              "children": [
+                {
+                  "id": 202,
+                  "parentId": 201,
+                  "structureName": "测试2.3",
+                  "path": "0,200,201,202",
+                  "pathName": "测试2/测试2.1/测试2.3/",
+                  "productId": 43,
+                  "pictures": [],
+                  "children": [
+                    {
+                      "id": 203,
+                      "parentId": 202,
+                      "structureName": "大伏笔",
+                      "path": "0,200,201,202,203",
+                      "pathName": "测试2/测试2.1/测试2.3/大伏笔/",
+                      "productId": 43,
+                      "pictures": [],
+                      "children": [],
+                      "patentNum": 0,
+                      "createPersonName": "测试",
+                      "createTime": "2023-05-10 16:27:40"
+                    }
+                  ],
+                  "patentNum": 0,
+                  "createPersonName": "测试",
+                  "createTime": "2023-05-10 16:27:27"
+                },
+                {
+                  "id": 225,
+                  "parentId": 201,
+                  "structureName": "测试3",
+                  "path": "0,200,201,225",
+                  "pathName": "测试2/测试2.1/测试3/",
+                  "productId": 43,
+                  "pictures": [],
+                  "children": [],
+                  "patentNum": 0,
+                  "createPersonName": "测试",
+                  "createTime": "2023-05-11 17:28:06"
+                }
+              ],
+              "patentNum": 0,
+              "createPersonName": "测试",
+              "createTime": "2023-05-10 16:27:19"
+            },
+            {
+              "id": 227,
+              "parentId": 200,
+              "structureName": "新增节点",
+              "path": "0,200,227",
+              "pathName": "测试2/新增节点/",
+              "productId": 43,
+              "pictures": [],
+              "children": [],
+              "patentNum": 0,
+              "createPersonName": "测试",
+              "createTime": "2023-05-12 08:50:37"
+            }
+          ],
+          "patentNum": 0,
+          "createPersonName": "测试",
+          "createTime": "2023-05-10 16:27:12"
+        }
+
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'structureName'
+      },
+      // 查询架构表格数据字段
+      queryParams: {
+        current: 1,
+        size: 10,
+      },
+      // 架构表格数据总条数
+      total: 0,
+      // 架构表格数据源
+      tableData: [
+        {
+          "id": 202,
+          "parentId": 201,
+          "structureName": "测试2.3",
+          "path": "0,200,201,202",
+          "pathName": "测试2/测试2.1/测试2.3/",
+          "productId": 43,
+          "pictures": [],
+          "patentNum": 0,
+          "createPersonName": "测试",
+          "createTime": "2023-05-10 16:27:27"
+        },
+        {
+          "id": 225,
+          "parentId": 201,
+          "structureName": "测试3",
+          "path": "0,200,201,225",
+          "pathName": "测试2/测试2.1/测试3/",
+          "productId": 43,
+          "pictures": [],
+          "children": [],
+          "patentNum": 0,
+          "createPersonName": "测试",
+          "createTime": "2023-05-11 17:28:06"
+        }
+      ],
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    // 子组件传来的值
+    handleOption({ val, row }) {
+      console.log(val, row);
+      switch (val) {
+        case '0'://编辑
+          row.isAppend=2
+          this.$refs.classifyNode.open(row)
+          break;
+      
+        default:
+          break;
+      }
+    },
+    // 按钮新增分类节点/树节点新增
+    handleAppend() {
+      this.$refs.classifyNode.open({isAppend:1})
+    },
+    // 根据产品名称查询产品
+    handleQuery() {
+      
+    },
+    append(data, node) {
+      data.isAppend = 1
+      this.$refs.classifyNode.open(data)
+      // console.log(data, node);
+    },
+    // 树节点编辑
+    edit(data, node) {
+      data.isAppend = 2
+      this.$refs.classifyNode.open(data)
+      // console.log(data, node);
+    },
+    // 树节点删除
+    remove(data, node) {
+      // console.log(data, node);
+    },
+    // 树节点点击事件
+    handleNodeClick(data, node) { 
+      // console.log(data, node);
+      if (data.children && data.children.length>0) {
+        this.tableData=data.children
+      }
+    },
+    // 分页
+    handleCurrentChange(val) { },
+  },
+}
+</script>
+
+<style lang="scss">
+.framework {
+  .el-divider--horizontal {
+    margin: 15px 0,
+  }
+  
+}
+</style>
+<style lang="scss" scoped>
+.framework {
+ 
+}
+</style>

src/views/product/components/index.vue

@@ -68,6 +68,7 @@ export default {
   },
   data() {
     return {
+      // 显示指定的子组件
       componentType: 'categoryTable',
       //检索字段
       searchFiled: [
@@ -104,11 +105,14 @@ export default {
           value: 'noGrouping',
         },
       ],
+      // 查询产品类别所需数据
       queryParams: {
         current: 1,
         size:10,
       },
+      // 产品类别总数
       total: 0,
+      // 产品类别数据
       tableData:[{
           id: '12987122',
           name: '好滋好味鸡蛋仔',
@@ -150,7 +154,7 @@ export default {
   methods: {
     // 子组件展开行展开、关闭
     handleExpand({ row, rowList }) {
-      console.log(row,rowList);
+      // console.log(row,rowList);
     },
     // 子组件编辑等事件
     handleOption({ val, row }) {

src/views/product/components/view/categoryTable.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 产品类别表格 -->
-  <div>
-    <el-table :data="tableData" style="width: 100%" row-key="id" @expand-change="handleExpand">
+  <div class="categoryTable">
+    <el-table :data="tableData" style="width: 100%" header-row-class-name="custom-table-header" row-key="id" @expand-change="handleExpand">
       <el-table-column type="expand">
         <!-- 产品 -->
         <template>
@@ -18,8 +18,18 @@
         </template>
       </el-table-column>
       <el-table-column label="产品类别名称" prop="name">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.name?scope.row.name:'--' }}
+          </div>
+        </template>
       </el-table-column>
       <el-table-column label="产品类别描述" prop="desc">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.desc?scope.row.desc:'--' }}
+          </div>
+        </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="150px">
         <template slot-scope="scope">
@@ -38,16 +48,19 @@
       </el-table-column>
     </el-table>
 
+    <addEditProduct ref="addEditProduct"></addEditProduct>
     <marketing ref="marketing"></marketing>
   </div>
 </template>
 
 <script>
 import productTable from './productTable.vue'
+import addEditProduct from '../dialog/addEditProduct.vue'
 import marketing from '../dialog/marketing.vue'
 export default {
   components: {
     productTable,
+    addEditProduct,
     marketing,
   },
   props: {
@@ -66,31 +79,47 @@ export default {
   },
   data() {
     return {
+      // 显示指定的子组件
       componentType: 'productTable',
+      // 查询产品所需字段
       queryParamsSon: {
         current: 1,
         size: 10,
       },
+      // 产品总数
       total: 0,
       // 产品数据
       tableDataSon: [
-        {
-          id: 1,
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          id: 2,
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        },
+      {
+        "id": 43,
+        "productName": "测试人员产品",
+        "marketTime": "2023-04-19 00:00:00",
+        "companyName": "测试",
+        "tenantId": 7,
+        "productExplain": "测试不同租户下的产品",
+        "productCategoryId": 27,
+        "licenseRate": 0.5,
+        "createPersonName": "测试",
+        "pictures": [],
+        "productPatentNum": 0,
+        "patentNum": 0,
+        "productCategory": {
+          "id": 27,
+          "productCategoryName": "测试人员类别",
+          "remark": "测试不同租户下类别",
+          "licenseRate": 0.5,
+          "createPersonName": "测试",
+          "pictures": [
+            {
+                "id": 43,
+                "productCategoryId": 27,
+                "name": "1+",
+                "suffix": "jpg",
+                "url": "/20230509/112080e1e7ee4899b9a765248cf92254.jpg"
+            }
+        ]
+    }
+}
       ]
     }
   },
@@ -102,22 +131,51 @@ export default {
     handleOptionSon({ val, row }) {
       switch (val) {
         case '0'://编辑
-          
+          this.$refs.addEditProduct.open(row)
           break;
         case '1'://预览图片
           
           break;
         case '2'://产品架构
-          
+          this.toFramework(row)
           break;
         case '3'://产品的营销数据
           this.$refs.marketing.open(row)
           break;
+        case '4'://产品的营销数据
 
+          break;
+        case '5'://产品的营销数据
+
+          break;
+        case '6'://商品化专利
+          this.toCommodity(row)
+          break;
+          
         default:
           break;
       }
     },
+    // 进入商品化专利
+    toCommodity(row) {
+      let router = this.$router.resolve({
+        path: '/commodity',
+        query: {
+          
+        }
+      })
+      window.open(router.href,'_blank')
+    },
+    // 进入产品架构
+    toFramework(row) {
+      let router = this.$router.resolve({
+        path: '/frameworkIndex',
+        query: {
+          
+        }
+      })
+      window.open(router.href,'_blank')
+    },
     // 展开行打开或者关闭事件
     handleExpand(row, rowList) {
       this.$emit('expand', { row, rowList })

src/views/product/components/view/productTable.vue

@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <!-- 产品table -->
+  <div class="productTable">
     <el-table :data="tableData" header-row-class-name="custom-table-header">
       <el-table-column label="#" width="60" type="index" align="center">
         <template slot-scope="scope">
@@ -7,7 +8,20 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="名字" prop="name" align="center"> </el-table-column>
+      <el-table-column label="产品名称" prop="productName" align="center"> </el-table-column>
+      <el-table-column label="上市时间" prop="marketTime" align="center"> 
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.marketTime?scope.row.marketTime.slice(0,10):'--' }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="所属公司" prop="companyName" align="center"> 
+        desc
+      </el-table-column>
+      <el-table-column label="参考许可费率" prop="licenseRate" align="center"> </el-table-column>
+      <el-table-column label="创建人" prop="createPersonName" align="center"> </el-table-column>
+      <el-table-column label="产品说明" prop="productExplain" align="center"> </el-table-column>
 
       <el-table-column label="操作" align="center" width="150px">
         <template slot-scope="scope">