产品模块搭建

src/router/index.js

@@ -132,19 +132,20 @@ const routes = [
       //   ]
       // },
       // // 产品
-      // {
-      //   path: '/product',
-      //   name:'Product',
-      //   component:{render(c){return c('router-view')}},
-      //   redirect:'/product',
-      //   children:[
-      //     {
-      //       path:'/',
-      //       meta: {
-      //         title: '产品',
-      //       },
-      //       component: () => import('@/views/product/index.vue'),
-      //     },
+      {
+        path: '/product',
+        name: 'Product',
+        component: { render(c) { return c('router-view') } },
+        redirect: '/product',
+        children:[
+          {
+            path:'/',
+            meta: {
+              title: '产品',
+              sign:'Product'
+            },
+            component: () => import('@/views/product/index.vue'),
+          },
       //     {
       //       path: "/productDetails",
       //       meta: {
@@ -193,9 +194,9 @@ const routes = [
       //      component: () => import('@/views/product/components/relatedPatents/index.vue'),
          
       //    },
-      //   ],
+        ],
         
-      // },
+      },
       //事件
       {
         path: '/Event',

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

@@ -0,0 +1,132 @@
+<template>
+  <!-- 新增编辑产品类别 -->
+  <div>
+    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px">
+      <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>
+        </el-form-item>
+        <el-form-item label="参考许可费率" prop="rate">
+          <el-input v-model="form.rate" 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" :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="">
+          <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: "",
+      dialogVisible: false,
+      form: {},
+      rules: {
+        name: [ { required: true, message: '请输入类别名称', trigger: 'blur' },],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    // 上传的change
+    handleChange(file,fileList){},
+    // 点击已上传的文件
+    handlePictureCardPreview(file) { },
+    // 文件列表移除文件
+    handleRemove(file) { },
+    // 打开弹窗
+    open(row) {
+      if (row.id) {
+        this.title = '编辑产品类别'
+      } else {
+        this.title = '新增产品类别'
+      }
+      this.dialogVisible = true;
+    },
+    // 弹窗确定
+    submit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.handleClose()
+        } else {
+          
+        }
+      })
+    },
+    // 弹窗取消/关闭
+    handleClose() {
+      this.$refs.ruleForm.resetFields()
+      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;
+  }
+  .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>

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

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px">
+      <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>
+        <el-form-item label="产品名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入产品名称"></el-input>
+        </el-form-item>
+        <el-form-item label="上市时间" prop="marketTime">
+          <el-date-picker
+            v-model="form.marketTime"
+            type="date"
+            placeholder="请选择上市时间"
+            value-format="yyyy-MM-dd"
+            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>
+        <el-form-item label="参考许可费率" prop="rate">
+          <el-input v-model="form.rate" 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"
+            :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="">
+          <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: "",
+      dialogVisible: false,
+      form: {},
+      rules: {
+        category: [{ required: true, message: '请输入所属产品类别', trigger: 'blur' },],
+        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' },],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    // 上传的change
+    handleChange(file, fileList) { },
+    // 点击已上传的文件
+    handlePictureCardPreview(file) { },
+    // 文件列表移除文件
+    handleRemove(file) { },
+    // 打开弹窗
+    open(row) {
+      this.form = JSON.parse(JSON.stringify(row))
+      if (this.form.id) {
+        this.title = '编辑产品类别'
+      } else {
+        if (this.form.isTheCompany=='1') {
+          this.title = '新增本公司产品'
+        } else {
+          
+          this.title = '新增外公司产品'
+        }
+      }
+      this.dialogVisible = true;
+    },
+    // 弹窗确定
+    submit() { 
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.handleClose()
+        } else {
+          
+        }
+      })
+    },
+    // 弹窗取消/关闭
+    handleClose() {
+      this.$refs.ruleForm.resetFields()
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-table__row{
+  border: 1px solid black !important;
+}
+</style>
+<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;
+}
+
+.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>

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

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
+      <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="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="操作" 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>
+          </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>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      title: '',
+      dialogVisible: false,
+      queryParamsSon: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    open(row){},
+    // 分页
+    handleCurrentChange(val) {
+      
+    },
+    // 删除
+    handleDelete(row) { },
+    // 编辑
+    handleEdit(row) {
+
+    },
+    // 弹窗取消
+    handleClose() {
+      this.dialogVisible = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/product/components/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="product">
+    <el-container>
+      <el-header>
+        <div>
+          <mySearch style="width: 500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
+          </mySearch>
+        </div>
+        <div style="display: flex">
+          <div>
+            <span>分组查询：</span>
+            <el-select v-model="groupingValue" size="small" @change="changeGrouping" style="width: 120px">
+              <el-option v-for="item in groupingOption" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <!-- <el-button-group style=" display: flex; justify-content: flex-start; margin-left: 10px;">
+            <el-button size="small" :type="viewSelected === 'visual' ? 'primary' : ''" @click="onChange2('visual')">可视化</el-button>
+            <el-button :type="viewSelected === 'Table' ? 'primary' : ''" @click="onChange2('Table')" size="small">列表</el-button>
+            <el-button :type="viewSelected === 'Card' ? 'primary' : ''" @click="onChange2('Card')" size="small">卡片</el-button>
+          </el-button-group> -->
+          <div  style="margin:0 10px;">
+            <el-dropdown trigger="click" split-button type="primary" size="small" >
+              <P @click="handleCommand('0')">新增类别</P>
+              <el-dropdown-menu slot="dropdown" class="text-align_center">
+                <el-dropdown-item>
+                  <el-dropdown trigger="hover" placement="left-start" @command="handleCommand($event)">
+                    <span class="el-dropdown-link">新增产品</span>
+                    <el-dropdown-menu  class="text-align_center">
+                      <el-dropdown-item command="1">新增本公司产品</el-dropdown-item>
+                      <el-dropdown-item command="2">新增外公司产品</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
+      </el-header>
+      <el-main>
+        <div style="height: 100%;margin-bottom: 30px;">
+          <component :is="componentType" :tableData="tableData" :queryParams="queryParams" @options="handleOption" @expand="handleExpand"></component>
+        </div>
+      </el-main>
+      <el-footer class="footer">
+        <el-pagination background layout="total, sizes, prev, pager, next, jumper"
+          :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
+          @current-change="handleCurrentChange" @size-change="getList()" :total="total">
+        </el-pagination>
+      </el-footer>
+    </el-container>
+
+    <addEditCategory ref="addEditCategory"></addEditCategory>
+    <addEditProduct ref="addEditProduct"></addEditProduct>
+  </div>
+</template>
+
+<script>
+import categoryTable from './view/categoryTable.vue'
+import addEditCategory from './dialog/addEditCategory.vue'
+import addEditProduct from './dialog/addEditProduct.vue'
+
+export default {
+  components: {
+    categoryTable,
+    addEditCategory,
+    addEditProduct,
+  },
+  data() {
+    return {
+      componentType: 'categoryTable',
+      //检索字段
+      searchFiled: [
+        {
+          label: '产品类别名称',
+          value: 'productName1',
+          type: 1,
+          placeholder: '请输入产品类别名称'
+        },
+        {
+          label: '产品名称',
+          value: 'productName2',
+          type: 1,
+          placeholder: '请输入产品名称'
+        },
+        {
+          label: '产品所属公司名称',
+          value: 'productName3',
+          type: 1,
+          placeholder: '请输入产品所属公司名称'
+        }
+      ],
+      //检索条件
+      searchOption: {
+        questionName: this.eventName,
+        applicationScenario: this.applicationScenario
+      },
+      //分组的值
+      groupingValue: 'noGrouping',
+      //分组
+      groupingOption: [
+        {
+          label: '不分组',
+          value: 'noGrouping',
+        },
+      ],
+      queryParams: {
+        current: 1,
+        size:10,
+      },
+      total: 0,
+      tableData:[{
+          id: '12987122',
+          name: '好滋好味鸡蛋仔',
+          category: '江浙小吃、小吃零食',
+          desc: '荷兰优质淡奶，奶香浓而不腻',
+          address: '上海市普陀区真北路',
+          shop: '王小虎夫妻店',
+          shopId: '10333'
+        }, {
+          id: '12987123',
+          name: '好滋好味鸡蛋仔',
+          category: '江浙小吃、小吃零食',
+          desc: '荷兰优质淡奶，奶香浓而不腻',
+          address: '上海市普陀区真北路',
+          shop: '王小虎夫妻店',
+          shopId: '10333'
+        }, {
+          id: '12987125',
+          name: '好滋好味鸡蛋仔',
+          category: '江浙小吃、小吃零食',
+          desc: '荷兰优质淡奶，奶香浓而不腻',
+          address: '上海市普陀区真北路',
+          shop: '王小虎夫妻店',
+          shopId: '10333'
+        }, {
+          id: '12987126',
+          name: '好滋好味鸡蛋仔',
+          category: '江浙小吃、小吃零食',
+          desc: '荷兰优质淡奶，奶香浓而不腻',
+          address: '上海市普陀区真北路',
+          shop: '王小虎夫妻店',
+          shopId: '10333'
+        }],
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    // 子组件展开行展开、关闭
+    handleExpand({ row, rowList }) {
+      console.log(row,rowList);
+    },
+    // 子组件编辑等事件
+    handleOption({ val, row }) {
+      switch (val) {
+        case '0'://编辑
+          this.$refs.addEditCategory.open(row)
+          break;
+      
+        default:
+          break;
+      }
+    },
+    // 右侧新增类别、产品
+    handleCommand(event) {
+      if (event == '0') {//新增类别
+        this.$refs.addEditCategory.open({})
+      } else if (event == '1') {//新增本公司产品
+        this.$refs.addEditProduct.open({isTheCompany:'1'})
+      } else {//新增外公司产品
+        this.$refs.addEditProduct.open({isTheCompany:'2'})
+      }
+    },
+    // 获取数据
+    getList(){},
+    // 分页
+    handleCurrentChange(val){},
+    // 分组查询change
+    changeGrouping(val) { },
+    //获取检索条件检索
+    search(val) {
+
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.product{
+  .el-table th.el-table__cell{
+    background: var(--bg);
+    color: var(--color);
+  }
+}
+</style>
+<style lang="scss" scoped>
+.product{
+  .footer{
+    width: 100%;
+    position: fixed;
+    bottom: 0px;
+    z-index: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,137 @@
+<template>
+  <!-- 产品类别表格 -->
+  <div>
+    <el-table :data="tableData" style="width: 100%" row-key="id" @expand-change="handleExpand">
+      <el-table-column type="expand">
+        <!-- 产品 -->
+        <template>
+          <div style="padding: 10px;">
+            <component :is="componentType" :tableData="tableDataSon" :queryParams="queryParamsSon"
+              @optionsSon="handleOptionSon"></component>
+          </div>
+          <div style="text-align: center;margin-top: 10px;">
+            <el-pagination background layout="total, sizes, prev, pager, next, jumper"
+              :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
+              @current-change="handleCurrentChange" @size-change="getList()" :total="total">
+            </el-pagination>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="产品类别名称" prop="name">
+      </el-table-column>
+      <el-table-column label="产品类别描述" prop="desc">
+      </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">预览图片</el-dropdown-item>
+              <el-dropdown-item command="3">分类架构</el-dropdown-item>
+              <el-dropdown-item command="4">专利布局可视化</el-dropdown-item>
+              <el-dropdown-item command="5" divided style="color:red">删 除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <marketing ref="marketing"></marketing>
+  </div>
+</template>
+
+<script>
+import productTable from './productTable.vue'
+import marketing from '../dialog/marketing.vue'
+export default {
+  components: {
+    productTable,
+    marketing,
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    queryParams: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  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
+        },
+      ]
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    // 子组件的编辑等事件
+    handleOptionSon({ val, row }) {
+      switch (val) {
+        case '0'://编辑
+          
+          break;
+        case '1'://预览图片
+          
+          break;
+        case '2'://产品架构
+          
+          break;
+        case '3'://产品的营销数据
+          this.$refs.marketing.open(row)
+          break;
+
+        default:
+          break;
+      }
+    },
+    // 展开行打开或者关闭事件
+    handleExpand(row, rowList) {
+      this.$emit('expand', { row, rowList })
+    },
+    // 编辑下拉菜单
+    handleCommand(val, row) {
+      this.$emit('options', { val, row })
+    },
+    // 分页
+    handleCurrentChange(val) { },
+    // 请求数据
+    getList() { },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <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="name" align="center"> </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">产品架构</el-dropdown-item>
+              <el-dropdown-item command="3">产品的营销数据</el-dropdown-item>
+              <el-dropdown-item command="4">营销数据的趋势图</el-dropdown-item>
+              <el-dropdown-item command="5">专利布局可视化</el-dropdown-item>
+              <el-dropdown-item command="6">商品化专利</el-dropdown-item>
+              <el-dropdown-item command="7" 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: () => {
+        return []
+      }
+    },
+    queryParams: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    // 编辑下拉菜单
+    handleCommand(val, row) {
+      this.$emit('optionsSon',{val,row})
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/product/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <viewIndex></viewIndex>
+  </div>
+</template>
+
+<script>
+import viewIndex from './components/index.vue'
+export default {
+  components: {
+    viewIndex,
+  },
+  data() {
+    return {};
+  },
+  mounted() { },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>