猿实战18——商品发布之类目选择

/**
     * 不分页返回类目列表
     * @param queryMallCategory
     * @return
     */
    @RequestMapping("/findByQuery")
    public  Result<List<MallCategory>> findByQuery(@RequestBody QueryMallCategory queryMallCategory){
        return mallCategoryService.getMallCategorysByQuery(queryMallCategory);
    }

<el-cascader-panel ref="cascaderCategory" v-model="cascaderValue" :options="options" :props="props" @change="change" @active-item-change="handleItemChange" />

<template>
  <div id="goodsReleasedDiv">
    <el-container>
      <el-card shadow="never">
        <div>
          <span style="font-weight: 700;">发布商品</span>
          <div style="float:right;padding-right:20px;font-size: 15px;">
            <a style="color:#4395ff">1.选择类目</a>
            -> 2.填写详细信息
            -> 3.提交信息</div>
        </div>
        <div style="padding-left:20px;padding-right:20px;">
          <div style="margin-top:20px;margin-bottom:20px;">选择您要使用的类目：
          </div>
          <el-cascader-panel ref="cascaderCategory" v-model="cascaderValue" :options="options" :props="props" @change="change" @active-item-change="handleItemChange" />
          <div>
            您当前选择的类目是：<span v-if="oneCategory">{{ oneCategory }} > {{ twoCategory }} > {{ threeCategory }} </span>
          </div>
          <div style="text-align: center;margin-top:20px;">
            <el-button type="primary" @click="addClick">
              我已阅读以下规则，现在发布商品
            </el-button>
          </div>
        </div>
      </el-card>
    </el-container>
  </div>
</template>
 
<script>
import { fetchCategoryListNoPage } from '@/api/product-manage'
export default {
  data() {
    return {
      props: {
        label: 'categoryName',
        value: 'categoryId',
        children: 'child'
      },
      oneCategory: '',
      twoCategory: '',
      threeCategory: '',
      oneCategoryId: 0,
      twoCategoryId: 0,
      threeCategoryId: 0,
      cascaderValue: [],
      options: [],
      category: '',
      listQuery: {
        // 类目属性
        page: 1,
        pageSize: 20,
        level: 1
      }
    }
  },
  created() {
    this.getFristCategoryList()
  },
  methods: {
    // 商品发布按钮
    addClick() {
      this.$router.push({
        path: '/shops/goods-released-detail',
        query: { oneCategory: this.oneCategory, twoCategory: this.twoCategory,
          threeCategory: this.threeCategory, oneCategoryId: this.oneCategoryId,
          twoCategoryId: this.twoCategoryId, threeCategoryId: this.threeCategoryId }
      })
    },
    change(value) {
      console.log(this.$refs.cascaderCategory.getCheckedNodes()[0].pathLabels)
      if (value[0]) {
        this.oneCategory = this.$refs.cascaderCategory.getCheckedNodes()[0].pathLabels[0]
        this.oneCategoryId = value[0]
      }
      if (value[1]) {
        this.twoCategory = this.$refs.cascaderCategory.getCheckedNodes()[0].pathLabels[1]
        this.twoCategoryId = value[1]
      }
      if (value[2]) {
        this.threeCategory = this.$refs.cascaderCategory.getCheckedNodes()[0].pathLabels[2]
        this.threeCategoryId = value[2]
      }
      console.log(value)
    },
    getFristCategoryList() {
      fetchCategoryListNoPage(this.listQuery).then(response => {
        this.options = response.model
        this.options.map((item, index, array) => {
          // 因为数组和对象更新后不会更新视图，这里必须用$set方法
          this.$set(array[index], 'child', [])
        })
      })
    },
    handleItemChange(value) {
      // 动态/异步加载分类数据
      let parentId
      if (value.length === 1) {
        // 如果点击的是一级分类
        parentId = value[0]
        this.options.map((item, index) => {
          if (item.categoryId === parentId && item.child.length === 0) {
            this.listQuery.parentId = parentId
            this.listQuery.level = 2
            fetchCategoryListNoPage(this.listQuery).then(response => {
              this.$set(this.options[index], 'child', response.model)
              item.child.map((innerItem, innerIndex) => {
                // 二级分类下必须要设置一个空的child数组，不然点击@active-item-change没反应
                this.$set(item.child[innerIndex], 'child', [])
              })
            })
          }
        })
      } else {
        // 如果点击的是二级分类，则直接将三级分类绑定到platOptions
        parentId = value[1]
        console.log(parentId)
        this.options.map((item, index) => {
          if (item !== null) {
            item.child.map((innerItem, innerIndex) => {
              if (innerItem.categoryId === parentId && innerItem.child.length === 0) {
                this.listQuery.parentId = parentId
                this.listQuery.level = 3
                // 当二级分类的的child不为空时才请求一次数据
                fetchCategoryListNoPage(this.listQuery).then(response => {
                  this.$set(item.child[innerIndex], 'child', response.model)
                })
              }
            })
          }
        })
      }
    }
  }
}
</script>
 
<style scoped>
#goodsReleasedDiv .form-container {
    width: 1200px;
    margin: 0 auto;
    min-height: 770px;
  }
 #goodsReleasedDiv /deep/ .el-card__body {
    padding: 0px 0px 20px 0px ;
 }
  #goodsReleasedDiv .issueDiv {
    font-size: 18px;
    line-height: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    background: #f9f9f9;;
  }
  #goodsReleasedDiv /deep/ .el-cascader-menu__wrap {
    height: 400px;
  }
  #goodsReleasedDiv .el-cascader-panel.is-bordered {
    height: 400px;
  }
  #goodsReleasedDiv .categoryDiv {
    padding-top: 10px;
    border: solid 1px #dfe4ed;
    border-radius: 4px;
    padding-bottom: 10px;
    margin-top: 20px;
    padding-left: 20px;
  }
</style>