添加商品-类目页面

src/views/system/goods/add/index.vue

 <template>
-  <div class="app-container" v-loading="loading">
+  <div class="app-container">
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <p class="card-header-title"><span class="blue-block-goods"></span>确认商品所在目录</p>
       </div>
-    </el-card>
+      <div>
+        <div>
+          <p class="goods-type-tip">为商品设置正确的类目，能让商品快速的被搜索到</p>
+        </div>
+        <div class="goods-type-options" v-loading="loading">
+          <el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="hxz"></el-cascader-panel>
+        </div>
+        <el-button type="primary" class="next-step" :disabled="isNextStep" @click="nextStep">下一步</el-button>
+      </div>
 
+    </el-card>
   </div>
 </template>
 
 <script>
+  import { getAreaList } from '@/api/module/retreat/address';
   export default {
     data() {
       return {
-        loading: false
+        loading: false,
+        SSQList: [], // 省市区
+        props: {
+          expandTrigger: 'click',
+          lazy: true,
+          lazyLoad: this.lazyLoad,
+          value: "id",
+          label: 'name',
+          leaf: 'leaf'
+        },
+        isNextStep: true
+      }
+    },
+    created() {
+
+    },
+    methods: {
+      // 只有点击完最后一级，才会有值
+      SSQChange() {
+        if(this.SSQList && this.SSQList.length > 0) {
+          this.isNextStep = false
+        }else {
+          this.SSQList = []
+          this.isNextStep = true
+        }
+      },
+      lazyLoad(node, resolve) {
+        this.SSQList = [];
+        this.getArea(node, resolve);
+        if(this.SSQList && this.SSQList.length > 0) {
+          this.isNextStep = false
+        }else {
+          this.isNextStep = true
+        }
+      },
+      getArea(node, resolve) {
+        const level = node.level;
+        let limboNode = {};
+        if(level === 0) {
+          limboNode = {pid: 0}
+        }
+        if(level === 1) {
+          limboNode = { pid: node.value };
+        }
+        if(level === 2) {
+          limboNode = { pid: node.value };
+        }
+        this.loading = true;
+        getAreaList(limboNode).then(res => {
+          let result = {};
+          if (level === 0) {
+            result = res.data
+            result.forEach(item => {
+              item.value = item.id;
+              item.label = item.name;
+              item.children=[];
+              item.leaf = 0;  // 可以控制 是否有下级   值为true都不行，必须等于0
+            })
+          }
+
+          if (level === 1) {
+            result = res.data
+            result.forEach(item => {
+              item.value = item.id;
+              item.label = item.name
+              item.children=[];
+              //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
+              item.leaf = 0
+            })
+          }
+
+          if (level === 2) {
+            result = res.data
+            result.forEach(item => {
+              item.value = item.id;
+              item.label = item.name
+              item.leaf = 1;
+            })
+          }
+
+          // result = []
+          resolve(result)
+          this.loading = false;
+        });
+      },
+
+      nextStep() {
+        console.log(111,this.SSQList);
       }
     }
   }
 </script>
 
 <style scoped lang="scss" type="text/css">
+  p {
+    margin: 0;
+    padding: 0;
+  }
+  /* el-card title hxz 样式统一 */
   .card-header-title {
     display: flex;
-
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    font-size: 20px;
+    color: #333;
+    font-weight: 400;
+    height: 24px;
   }
   .blue-block-goods {
     width: 5px;
     height: 20px;
     background: #3A84FF;
-    display: inline-block;
-    line-height: 1.4em;
-    vertical-align: middle;
+    margin: 0 7px 0 0;
+    border-radius: 2px;
+  }
+  /* el-card title hxz 样式统一 end */
+  .goods-type-tip {
+    width: 100%;
+    background: #F1F7FD;
+    border: 1px solid #3A84FF;
+    font-size: 14px;
+    font-weight: 400;
+    color: #3A84FF;
+    line-height: 1em;
+    padding: 14px 15px;
+  }
+  .goods-type-options {
+    margin: 25px 0;
+  }
+  /* 联级面板样式重置  start */
+  /deep/.el-cascader-panel.is-bordered {
+    border: none;
+  }
+  /deep/.el-cascader-menu {
+    min-width: 280px;
+    border: none;
+    box-shadow: 0px 4px 9px 1px rgba(51, 51, 51, 0.09);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  /deep/.el-cascader-menu__wrap {
+    width: 280px;
+    height: 504px;
+    /*overflow: hidden;*/
+  }
+  /deep/.el-scrollbar {
+    overflow: hidden;
+  }
+  /*/deep/.el-scrollbar:hover .el-scrollbar__bar  {*/
+  /*  background: red;*/
+  /*}*/
+  /*/deep/.el-scrollbar:hover .el-scrollbar__bar  {*/
+  /*  overflow: hidden;*/
+  /*}*/
+  /deep/.el-scrollbar__bar {
+    width: 12px;
+    /*background-color: #c0ccda;*/
+    border-radius: 6px;
+  }
+  /* 联级面板样式重置  end */
+  .next-step {
+    padding: 10px 25px;
+    margin: 0 auto;
+    display: block;
   }
 </style>