三级分类

基本介绍

pms_category表说明

代表商品的分类

controller代码如下：

@RestController
@RequestMapping("product/category")
public class CategoryController {
    @Autowired
    private CategoryService categoryService;

    /**
     * 查询所有分类以及子分类列表，以树性结构组装起来
     */
    @RequestMapping("/list/tree")
    public R list( ){
        List<CategoryEntity> entities =  categoryService.listWithTree();

        return R.ok().put("data", entities);
    }
}

service代码如下：

@Service("categoryService")
public class CategoryServiceImpl extends ServiceImpl<CategoryDao, CategoryEntity> implements CategoryService {

    @Override
    public List<CategoryEntity> listWithTree() {
        List<CategoryEntity> entities = baseMapper.selectList(null);
        List<CategoryEntity> result = entities.stream().filter(categoryEntity ->
                categoryEntity.getParentCid() == 0
        ).peek((menu) -> {
            menu.setChildren(getChildrens(menu, entities));
        }).sorted((menu1, menu2) -> {
            return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
        }).collect(Collectors.toList());

        return result;
    }

    /**
     * 递归查找当前菜单的所有子菜单
     *
     * @param root 当前菜单
     * @param all  所有菜单
     */
    private List<CategoryEntity> getChildrens(CategoryEntity root, List<CategoryEntity> all) {
        List<CategoryEntity> childrens = all.stream().filter(categoryEntity ->
                categoryEntity.getParentCid() == root.getCatId()
        ).peek((menu) -> {
            menu.setChildren(getChildrens(menu, all));
        }).sorted((menu1, menu2) -> {
            return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
        }).collect(Collectors.toList());
        return childrens;
    }

}

启动项目：访问：http://localhost:10000/product/category/list/tree

然后接着登录系统，添加目录"商品系统"

我们发现在菜单管理里面配置的角色管理，配置的URL是sys/role，但是真正点击角色管理时，URL会将/变成-，即从sys/role变成sys-role

然后我的角色管理的vue文件在目录下：src\views\modules\sys\role.vue下

所有我们新创建了分类维护，URL为/product/category，对应应该在src\views\modules\product\category.vue，于是我们创建category.vue文件，然后先生成vue模板文件

复制如下代码到category.vue中，将固定的数据data属性中的数据删除掉

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

我们发现一开始前端项目的请求地址前缀都是http://localhost:8080/renren-fast开头的，

是因为在E:\renren-fast-vue\static\config\index.js中定义了前端vue发送每个请求的前缀，但是我们后台的gulimall-product服务的端口的是10000，所以我们需要前端vue项目首先向网关gateway发送请求，然后路由到指定的后台服务。

我们先修改这里的请求前缀变为http://localhost:80，因为网关gulimall-gateway服务的端口是88，即之后所有的vue请求首先发送给网关，然后再由网关路由到指定的服务。

同样我们的后台服务renren-fast也需要注册到nacos中，因为renren-fast中的比如登录验证码也需要前端vue通过网关gateway路由到它，所以需要先将它注册到nacos中，网关才能发现它

首先renren-fast中的pom文件需要依赖gulimall-common，因为gulimall-common中有nacos的依赖。

<dependency>
   <groupId>com.hs.gulimall</groupId>
   <artifactId>gulimall-common</artifactId>
   <version>0.0.1-SNAPSHOT</version>
</dependency>

然后在启动类上加上注解@EnableDiscoveryClient

接着在application.xml中配置renren-fast微服务名称以及nacos注册中心地址

spring
    application:
      name: renren-fast
    cloud:
      nacos:
        config:
          server-addr: 127.0.0.1:8848

我们接着修改gulimall-gateway中application.yml配置路由规则

spring:
  cloud:
    gateway:
      routes:
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/${segment}

  ## 前端项目，/api
## http://localhost:88/api/captcha.jpg   http://localhost:8080/renren-fast/captcha.jpg
## http://localhost:88/api/product/category/list/tree http://localhost:10000/product/category/list/tree

我们发现前端请求的接口是88，但是页面上显示的会变成8001，是因为E:\renren-fast-vue\config\index.js有配置端口转换修改

启动nacos-server，然后重启renren-fast服务和gulimall-gateway网关服务，重新登录系统，发现login请求报错，看报错是同源策略的报错

跨域问题

问题描述：已拦截跨源请求：同源策略禁止8001端口页面读取位于 http://localhost:88/api/sys/login 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）。

• 问题分析：这是一种跨域问题。访问的域名或端口和原来请求的域名端口一旦不同，请求就会被限制

• 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对js施加的安全限制。（ajax可以）

• 同源策略：是指协议，域名，端囗都要相同，其中有一个不同都会产生跨域；

跨域流程：

这个跨域请求的实现是通过预检请求实现的，先发送一个OPSTIONS探路，收到响应允许跨域后再发送真实请求

什么意思呢？跨域是要请求的、新的端口那个服务器限制的，不是浏览器限制的。

跨域请求流程：
非简单请求(PUT、DELETE)等，需要先发送预检请求


       -----1、预检请求、OPTIONS ------>
       <----2、服务器响应允许跨域 ------
浏览器 |                               |  服务器
       -----3、正式发送真实请求 -------->
       <----4、响应数据   --------------

在网关服务gulimall-gateway中配置跨域过滤器

package com.hs.gulimall.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

/**
 * @Auther: huangshuai
 * @Date: 2021/8/17 22:41
 * @Description：配置跨域
 * @Version：
 */
@Configuration
public class GulimallCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration= new CorsConfiguration();
        //1、配置跨域
        // 允许跨域的头
        corsConfiguration.addAllowedHeader("*");
        // 允许跨域的请求方式
        corsConfiguration.addAllowedMethod("*");
        // 允许跨域的请求来源
        corsConfiguration.addAllowedOrigin("*");
        // 是否允许携带cookie跨域
        corsConfiguration.setAllowCredentials(true);

        // 任意url都要进行跨域配置
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);

    }
}

注释掉renren-fast项目的类CorsConfig中的配置的跨域

查询分类维护的vue代码如下：

<!--  -->
<template>
  <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick">
    
  </el-tree>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children", //子节点
        label: "name" //name属性作为标签的值，展示出来
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        this.menus = data.data;
      });
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

新增分类

前端category.vue代码如下：

<!--  -->
<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      show-checkbox
      node-key="catId"
      :default-expanded-keys="expandedKey"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">新增</el-button>
          <el-button
            v-if="node.childNodes.length == 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >删除</el-button>
        </span>
      </span>
    </el-tree>

    <!--对话框组件-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form :model="categroy">
        <el-form-item label="分类名称">
          <el-input v-model="categroy.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      categroy: {
        name: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0
      },
      //对话框属性，false为对话框是关闭的
      dialogVisible: false,
      menus: [],
      expandedKey: [],
      defaultProps: {
        children: "children", //子节点
        label: "name" //name属性作为标签的值，展示出来
      }
    };
  },
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        this.menus = data.data;
      });
    },

    //点击新增按钮的时候，打开对话框
    append(data) {
      //对话框打开
      this.dialogVisible = true;
      //父分类的id
      this.categroy.parentCid = data.catId;
      //当前新增分类的level
      this.categroy.catLevel = data.catLevel * 1 + 1;
    },

    //添加三级分类方法
    addCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.categroy, false)
      }).then(({ data }) => {
        this.$message({
          message: "新增菜单成功",
          type: "success"
        });
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.categroy.parentCid];
        //对话框关闭
        this.dialogVisible = false;
      });
    },

    remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false)
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success"
            });
            //刷新当前所有菜单数据
            this.getMenus();
            //默认展开父节点
            this.expandedKey = [node.parent.data.catId];
          });
        })
        .catch(() => {});
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

修改分类

前端category.vue代码如下：

<!--  -->
<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      show-checkbox
      node-key="catId"
      :default-expanded-keys="expandedKey"
      draggable
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">新增</el-button>
          <el-button type="text" size="mini" @click="edit(data)">编辑</el-button>

          <el-button
            v-if="node.childNodes.length == 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >删除</el-button>
        </span>
      </span>
    </el-tree>

    <!--对话框组件-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :closeOnClickModal="false">
      <el-form :model="categroy">
        <el-form-item label="分类名称">
          <el-input v-model="categroy.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="categroy.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="categroy.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      //弹出框的提示语
      title: "",
      //弹出对话框的类型，是由于点击新增打开的还是编辑打开的？
      dialogType: "",
      categroy: {
        catId: null,
        name: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        icon: "",
        productUnit: "",
        sort: 0
      },
      //对话框属性，false为对话框是关闭的
      dialogVisible: false,
      menus: [],
      expandedKey: [],
      defaultProps: {
        children: "children", //子节点
        label: "name" //name属性作为标签的值，展示出来
      }
    };
  },
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        this.menus = data.data;
      });
    },

    //判断当前是新增还是编辑
    submitData() {
      if(this.dialogType == "add") {
        this.addCategory();
      }
      if(this.dialogType == "edit") {
        this.editCategory();
      }
    },

    //编辑
    edit(data) {
      console.log("要修改的数据", data);
      this.title = "修改分类"
      this.dialogType = "edit";
      this.dialogVisible = true;
      //发送请求获取当前节点的最新数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: 'get',
      }).then(({ data }) => {
        //请求成功，将数据填充到弹出框中
        console.log("查询数据成功", data);
        this.categroy.catId = data.data.catId;
        this.categroy.name = data.data.name;
        this.categroy.icon = data.data.icon;
        this.categroy.productUnit = data.data.productUnit;
        this.categroy.parentCid = data.data.parentCid;
      });
    },

    //编辑三级分类方法
    editCategory() {
      var {catId, name, icon, productUnit} = this.categroy;
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({catId, name, icon, productUnit}, false)
      }).then(({ data }) => {
        this.$message({
          message: "编辑菜单成功",
          type: "success"
        });
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.categroy.parentCid];
        //对话框关闭
        this.dialogVisible = false;
      });
    },

    //点击新增按钮的时候，打开对话框
    append(data) {
      this.title = "添加分类"
      //对话框的类型
      this.dialogType = "add";
      //对话框打开
      this.dialogVisible = true;
      //父分类的id
      this.categroy.parentCid = data.catId;
      //当前新增分类的level
      this.categroy.catLevel = data.catLevel * 1 + 1;
      this.categroy.catId = null;
      this.categroy.name = "";
      this.categroy.icon = "";
      this.categroy.productUnit = "";
      this.categroy.sort = 0;
      this.categroy.showStatus = 1;
    },

    //添加三级分类方法
    addCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.categroy, false)
      }).then(({ data }) => {
        this.$message({
          message: "新增菜单成功",
          type: "success"
        });
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.categroy.parentCid];
        //对话框关闭
        this.dialogVisible = false;
      });
    },

    remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false)
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success"
            });
            //刷新当前所有菜单数据
            this.getMenus();
            //默认展开父节点
            this.expandedKey = [node.parent.data.catId];
          });
        })
        .catch(() => {});
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

拖拽修改

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="dataForm">
          <el-form-item label="集装箱号">
            <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
          </el-form-item>
          <el-form-item label="byd批次号">
            <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
          </el-form-item>
          <el-form-item label="检索">
            <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
          </el-form-item>
          <el-form-item label="检索">
            <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
          </el-form-item>
          <el-form-item label="检索">
            <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSpuInfo">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSpuInfo">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-upload
              :auto-upload="true"
              :file-list="fileList"
              :http-request="importWordConfirm"
              :limit="1"
              :multiple="false"
              accept=".xlsx, .xls"
              action
              ref="upload"
            >
              <el-button type="primary">导入</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSpuInfo">导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div class="mod-config">
          <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;"
          >
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <el-table-column prop="id" header-align="center" align="center" label="id"></el-table-column>
            <el-table-column prop="spuName" header-align="center" align="center" label="名称"></el-table-column>
            <el-table-column prop="spuDescription" header-align="center" align="center" label="描述"></el-table-column>
            <el-table-column prop="catalogId" header-align="center" align="center" label="分类"></el-table-column>
            <el-table-column prop="brandId" header-align="center" align="center" label="品牌"></el-table-column>
            <el-table-column prop="weight" header-align="center" align="center" label="重量"></el-table-column>
            <el-table-column prop="publishStatus" header-align="center" align="center" label="上架状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.publishStatus == 0">新建</el-tag>
                <el-tag v-if="scope.row.publishStatus == 1">已上架</el-tag>
                <el-tag v-if="scope.row.publishStatus == 2">已下架</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" header-align="center" align="center" label="创建时间"></el-table-column>
            <el-table-column prop="updateTime" header-align="center" align="center" label="修改时间"></el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.publishStatus == 0"
                  type="text"
                  size="small"
                  @click="productUp(scope.row.id)"
                >上架</el-button>
                <el-button type="text" size="small" @click="attrUpdateShow(scope.row)">规格</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CategoryCascader from "../common/category-cascader";
import BrandSelect from "../common/brand-select";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { CategoryCascader, BrandSelect },
  props: {},
  data() {
    //这里存放数据
    return {
      fileList: [],
      catId: 0,
      catelogPath: [],
      dataForm: {
        status: "",
        key: "",
        brandId: 0,
        catelogId: 0
      },
      catPathSub: null,
      brandIdSub: null
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    searchSpuInfo() {
      console.log("搜索条件", this.dataForm);
      this.PubSub.publish("dataForm", this.dataForm);
    },
    //上传文件
    importWordConfirm(param) {
      const fileObj = param.file;
      const formData = new FormData();
      formData.append("file", fileObj);
      this.$http({
        url: this.$http.adornUrl("/product/test/excelImport"),
        method: 'post',
        data: this.$http.adornData(formData, false),
        headers: {
            "Content-Type": "multipart/form-data"
        }
      }).then(({ data }) => {
          this.$message({
          message: "上传文件成功",
          type: "success"
        });
      });
       
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.catPathSub = PubSub.subscribe("catPath", (msg, val) => {
      this.dataForm.catelogId = val[val.length - 1];
    });
    this.brandIdSub = PubSub.subscribe("brandId", (msg, val) => {
      this.dataForm.brandId = val;
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    PubSub.unsubscribe(this.catPathSub);
    PubSub.unsubscribe(this.brandIdSub);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>