feat: 新增树形下拉组件增加商品链接和商品自定义页面的功能

card-list.vue

@@ -144,7 +144,6 @@ export default {
       this.baseUrl = host;
     }
   },
-
   mounted() {
     this.getCardList();
   }

goods-tree.vue

+<template>
+  <div class="plug-sg">
+    <el-popover popper-class="plug-sg__popover"  placement="bottom" trigger="click" v-model="treeVis">
+      <el-input slot="reference" suffix-icon="el-icon-arrow-down" v-model="ategory" placeholder="所有分类"></el-input>
+      <el-tree
+        class="plug-sg__tree"
+        ref="tree"
+        :default-expand-all="true"
+        node-key="mallProTagId"
+        :data="treeData"
+        :props="defaultProps"
+        :highlight-current="true"
+        @node-click="handleNodeClick">
+      </el-tree>
+      <div class="good-tree-btn">
+				<el-button @click.prevent.stop="hideTree" type="text" size="small" style="color:#303133">取消</el-button>
+				<el-button @click.prevent.stop="confirmBtn" type="text" size="small">确定</el-button>
+			</div>
+    </el-popover>
+    
+  </div>
+  </template>
+<script>
+export default {
+  name:'goods-tree',
+  props:{
+    model:{
+      type:Object,
+      default(){
+        return {}
+      },
+      
+    },
+    width:{
+      type:String,
+      default:'300'
+    },
+    treeData: Array
+  },
+  data() {
+    return {
+      treeVis: false,
+      ategory: '',
+      defaultProps: {
+        children: 'childrenList',
+        label: 'tagName'
+      }
+    }
+  },
+  methods:{
+    handleNodeClick(data) {
+      this.mallData = data;
+      this.ategory = data.tagName;
+    },
+    hideTree() {
+      this.treeVis = false;
+    },
+    confirmBtn() {
+      this.treeVis = false;
+      if (this.mallData.mallProTagId) {
+        this.$emit('pass-mall', this.mallData);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.plug-sg {
+  display: inline-block;
+  width: 200px;
+  &__popover{
+    padding:10px 0 0 0;
+  }
+  &__btn{
+    height: 36px;
+    padding: 0 10px;
+    border-top:1px solid #ebeef5;
+    line-height: 34px;
+    text-align:right;
+    &--cancel {
+      color: #606266;
+    }
+  }
+  &__tree {
+    height: 260px;
+    width: 200px;
+    overflow-y: auto;
+    .el-tree-node__label {
+      text-overflow: ellipsis;
+      display: inline-block;
+      white-space: nowrap;
+      width: 100%;
+      overflow: hidden;
+    }
+    &::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+    }
+  }
+}
+.good-tree-btn {
+  float: right;
+  margin-right: 10px; 
+}
+</style>
+

linktools.vue

@@ -34,6 +34,7 @@ components: {linkId
   <div class="link-tools-contain">
     <el-dialog :class="activeName == 'first'? 'min-1026':'min-720'"
     title="链接小工具"
+    :close-on-click-modal="false"
     :visible.sync="mylinkToolsVisible"
     :modal-append-to-body="false">
       <!-- 链接类型 -->
@@ -67,6 +68,9 @@ components: {linkId
               :value="item.value">
             </el-option>
           </el-select>
+
+          <goods-tree v-if="goodsTreeVisible" @pass-mall="getMallId" :tree-data="treeData"></goods-tree>
+
           <!-- 商品分类链接 -->
           <treeselect
             v-if="threeLevelTreeVisible"
@@ -402,6 +406,7 @@ components: {linkId
 import Treeselect from '@riophae/vue-treeselect';
 import CardList from './card-list';
 import GiftList from './gift-list';
+import GoodsTree from './goods-tree';
 
 // import axios from 'axios'
 import qs from 'qs';
@@ -411,6 +416,8 @@ export default {
   props: ['linkToolsVisible','showType','projectName'],
   data () {
     return {
+      treeData: [],
+      goodsTreeVisible: false,
       // 项目名
       cardLimit: 1,
       disabledList:[],
@@ -715,6 +722,7 @@ export default {
 
       that.twoLevelSelectValue = '';
       that.threeLevelSelectValue = '';
+      this.goodType = '';
 
       // 如果是 h5,二级,三级隐藏,
       var type = selectOneItem.type == 5 ? true:false;
@@ -778,6 +786,22 @@ export default {
 
     // twoLevelValueChange (二级选择,保存选择类型)
     twoLevelValueChange(e) {
+      if (e == 'product_category_link') { // 商品链接
+        this.goodType = 10;
+        this.threeLevelVisible = true;
+        this.threeLeveloneVisible = false;
+        this.goodsTreeVisible = true;
+      } else if (e == 'mall_customize_page') { // 自定义页面
+        this.goodType = 11;
+        this.threeLevelVisible = true;
+        this.threeLeveloneVisible = true;
+        this.goodsTreeVisible = false;
+      } else {
+        this.threeLevelVisible = true;
+        this.threeLeveloneVisible = true;
+        this.goodsTreeVisible = false;
+      }
+
       var that = this
       this.visibleType = null;
       // 清空已经选择
@@ -826,6 +850,9 @@ export default {
           that.getGoodsCategory();// 获取商品品类
           that.getGoodsClassify(); // 获取商品分类
 
+          // this.getGoodsType(); // 商品分类链接
+          // this.getGoodsPage(); // 商品自定义页面
+
           that.threeLevelVisible = false; // 三级部分隐藏
           that.goodsLinksVisible = true; // 商品链接列表部分显示
           return false;
@@ -837,7 +864,13 @@ export default {
             that.selectLinkObj.url = ele.content;
           }
         })
-      }else {
+      } else if (this.goodType == 10) {
+        // 商品分类链接
+        this.getGoodsLink();
+      } else if (this.goodType == 11) {
+        // 商品自定义页面
+        this.getGoodsPage();
+      } else {
         // 判断三级中下拉/下拉树形/搜索下拉
         that.goodsLinksVisible = false; // 商品列表隐藏
         that.threeLevelVisible = true; // 三级部分显示
@@ -846,7 +879,7 @@ export default {
         that.threeLevelSelectValue = '';
         var twoType = selectTwoItem.type;
         // 判断三级显示的下拉组件
-        that.setThreeVisible(twoType,selectTwoItem)
+        that.setThreeVisible(twoType, selectTwoItem)
 
 
         // 如果是门店,直接返回,需要输入后搜索出现下拉列表
@@ -864,6 +897,44 @@ export default {
       }
     },
 
+    // sy 商品分类链接
+    getGoodsLink() {
+      this.axios.get(`${this.baseUrl}/api-plug/list-mall-product-tag?requestProject=gic-web`)
+        .then(res => {
+          if (res.data.errorCode === 0) {
+            const data = res.data.result;
+            if (data && data.length) {
+              this.treeData = data;
+            } else {
+              this.treeData = [];
+            }
+          }
+        }).catch(err => {
+          console.log(err);
+        });
+    },
+    // sy 商品自定义页面
+    getGoodsPage() {
+      this.axios.get(`${this.baseUrl}/api-plug/list-mall-page?requestProject=gic-web`)
+        .then(res => {
+          if (res.data.errorCode === 0) {
+            const data = res.data.result;
+            if (data && data.length) {
+              // definePage 自定义页面
+              this.threeLevelOptions = data.map(val => ({
+                ...val,
+                label: val.pageName,
+                value: val.pageId
+              }));
+            } else {
+              this.threeLevelOptions = [];
+            }
+          }
+        }).catch(err => {
+          console.log(err);
+        });
+    },
+
     // set threelevel visible
     setThreeVisible(type,selectTwoItem) {
       var that = this
@@ -1046,7 +1117,16 @@ export default {
     // threeSingleValueChange
     threeSingleValueChange(e) {
       // 是那个类型的
-      // console.log(this.threeLevelOptions);
+      if (this.linkId == 16) {
+        this.pageId = e;
+        let item = '';
+        this.threeLevelOptions.forEach(function(ele,index){
+          if (e == ele.pageId) {
+            item = ele;
+          }
+        });
+        this.pageName = item.pageName;
+      }
       this.giftType = e;
       if (this.giftType == 'coup') {
         this.visibleType = 8;
@@ -1207,7 +1287,7 @@ export default {
         parentId: parentId,
         requestProject: that.repProjectName
       }
-      that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category',qs.stringify(para))
+      that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category', qs.stringify(para))
       .then((res) => {
         var resData = res.data
         if (resData.errorCode == 0) {
@@ -1516,7 +1596,6 @@ export default {
         that.transData();
         return;
       }
-
       // 确定是会员功能 然后看是那个类型的
       if (this.linkId == 27) {
         if (this.visibleType == 8) {
@@ -1556,6 +1635,29 @@ export default {
         }
       }
 
+      if (this.linkId == 16) {
+        if ( this.goodType == 10) {
+          // 商品分类链接
+          this.selectLinkObj.name = '商品分类链接/' + this.tagName;
+          this.selectLinkObj.id = this.linkId;
+          this.selectLinkObj.params = {
+            mallProTagId: this.cardUrl,
+            name: this.tagName
+          };
+          this.transData();
+          return;
+        } else if (this.goodType == 11) {
+          this.selectLinkObj.name = '商城自定义页面/' + this.pageName;
+          this.selectLinkObj.id = this.linkId;
+          this.selectLinkObj.params = {
+            pageId: this.pageId,
+            name: this.pageName
+          };          
+          this.transData();
+          return;
+        }
+      }
+
 
       // 如果门店签到
       console.log("门店签到:",that.twoLevelSelectValue)
@@ -1586,6 +1688,12 @@ export default {
 
     },
 
+    getMallId(item) {
+      console.log(item);
+      this.tagName = item.tagName;
+      this.cardUrl = item.mallProTagId;
+    },
+
     checkTwoLevel(v) {
       var that = this
       // console.log(that.threeLevelValue)
@@ -1937,13 +2045,15 @@ export default {
     this.repProjectName = this.projectName || 'gic-web';
     // 获取 showType
     this.linkShowType = this.showType || 0;
+    this.pageName = '';
     this.getLinksList(0,1)
   },
 
   components: {
     Treeselect,
     CardList,
-    GiftList
+    GiftList,
+    GoodsTree
   }
 }
 </script>

linktoolspage.vue

+
 <template>
   <!-- 链接小工具 -->
   <div class="link-tools-contain">
     <el-dialog :class="activeName == 'first'? 'min-1026':'min-720'"
     title="链接小工具"
+    :close-on-click-modal="false"
     :visible.sync="mylinkToolsVisible"
     :modal-append-to-body="false">
       <!-- 链接类型 -->
@@ -36,6 +38,9 @@
               :value="item.value">
             </el-option>
           </el-select>
+
+          <goods-tree v-if="goodsTreeVisible" @pass-mall="getMallId" :tree-data="treeData"></goods-tree>
+
           <!-- 商品分类链接 -->
           <treeselect
             v-if="threeLevelTreeVisible"
@@ -371,6 +376,7 @@
 import Treeselect from '@riophae/vue-treeselect';
 import CardList from './card-list';
 import GiftList from './gift-list';
+import GoodsTree from './goods-tree';
 
 // import axios from 'axios'
 import qs from 'qs';
@@ -380,6 +386,8 @@ export default {
   props: ['linkToolsVisible','showType','projectName'],
   data () {
     return {
+      treeData: [],
+      goodsTreeVisible: false,
       // 项目名
       cardLimit: 1,
       disabledList:[],
@@ -684,6 +692,7 @@ export default {
 
       that.twoLevelSelectValue = '';
       that.threeLevelSelectValue = '';
+      this.goodType = '';
 
       // 如果是 h5,二级,三级隐藏,
       var type = selectOneItem.type == 5 ? true:false;
@@ -747,6 +756,22 @@ export default {
 
     // twoLevelValueChange (二级选择,保存选择类型)
     twoLevelValueChange(e) {
+      if (e == 'product_category_link') { // 商品链接
+        this.goodType = 10;
+        this.threeLevelVisible = true;
+        this.threeLeveloneVisible = false;
+        this.goodsTreeVisible = true;
+      } else if (e == 'mall_customize_page') { // 自定义页面
+        this.goodType = 11;
+        this.threeLevelVisible = true;
+        this.threeLeveloneVisible = true;
+        this.goodsTreeVisible = false;
+      } else {
+        this.threeLevelVisible = true;
+        this.threeLeveloneVisible = true;
+        this.goodsTreeVisible = false;
+      }
+
       var that = this
       this.visibleType = null;
       // 清空已经选择
@@ -795,6 +820,9 @@ export default {
           that.getGoodsCategory();// 获取商品品类
           that.getGoodsClassify(); // 获取商品分类
 
+          // this.getGoodsType(); // 商品分类链接
+          // this.getGoodsPage(); // 商品自定义页面
+
           that.threeLevelVisible = false; // 三级部分隐藏
           that.goodsLinksVisible = true; // 商品链接列表部分显示
           return false;
@@ -806,7 +834,13 @@ export default {
             that.selectLinkObj.url = ele.content;
           }
         })
-      }else {
+      } else if (this.goodType == 10) {
+        // 商品分类链接
+        this.getGoodsLink();
+      } else if (this.goodType == 11) {
+        // 商品自定义页面
+        this.getGoodsPage();
+      } else {
         // 判断三级中下拉/下拉树形/搜索下拉
         that.goodsLinksVisible = false; // 商品列表隐藏
         that.threeLevelVisible = true; // 三级部分显示
@@ -815,7 +849,7 @@ export default {
         that.threeLevelSelectValue = '';
         var twoType = selectTwoItem.type;
         // 判断三级显示的下拉组件
-        that.setThreeVisible(twoType,selectTwoItem)
+        that.setThreeVisible(twoType, selectTwoItem)
 
 
         // 如果是门店,直接返回,需要输入后搜索出现下拉列表
@@ -833,6 +867,44 @@ export default {
       }
     },
 
+    // sy 商品分类链接
+    getGoodsLink() {
+      this.axios.get(`${this.baseUrl}/api-plug/list-mall-product-tag?requestProject=gic-web`)
+        .then(res => {
+          if (res.data.errorCode === 0) {
+            const data = res.data.result;
+            if (data && data.length) {
+              this.treeData = data;
+            } else {
+              this.treeData = [];
+            }
+          }
+        }).catch(err => {
+          console.log(err);
+        });
+    },
+    // sy 商品自定义页面
+    getGoodsPage() {
+      this.axios.get(`${this.baseUrl}/api-plug/list-mall-page?requestProject=gic-web`)
+        .then(res => {
+          if (res.data.errorCode === 0) {
+            const data = res.data.result;
+            if (data && data.length) {
+              // definePage 自定义页面
+              this.threeLevelOptions = data.map(val => ({
+                ...val,
+                label: val.pageName,
+                value: val.pageId
+              }));
+            } else {
+              this.threeLevelOptions = [];
+            }
+          }
+        }).catch(err => {
+          console.log(err);
+        });
+    },
+
     // set threelevel visible
     setThreeVisible(type,selectTwoItem) {
       var that = this
@@ -1015,7 +1087,16 @@ export default {
     // threeSingleValueChange
     threeSingleValueChange(e) {
       // 是那个类型的
-      // console.log(this.threeLevelOptions);
+      if (this.linkId == 16) {
+        this.pageId = e;
+        let item = '';
+        this.threeLevelOptions.forEach(function(ele,index){
+          if (e == ele.pageId) {
+            item = ele;
+          }
+        });
+        this.pageName = item.pageName;
+      }
       this.giftType = e;
       if (this.giftType == 'coup') {
         this.visibleType = 8;
@@ -1176,7 +1257,7 @@ export default {
         parentId: parentId,
         requestProject: that.repProjectName
       }
-      that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category',qs.stringify(para))
+      that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category', qs.stringify(para))
       .then((res) => {
         var resData = res.data
         if (resData.errorCode == 0) {
@@ -1485,7 +1566,6 @@ export default {
         that.transData();
         return;
       }
-
       // 确定是会员功能 然后看是那个类型的
       if (this.linkId == 27) {
         if (this.visibleType == 8) {
@@ -1525,6 +1605,29 @@ export default {
         }
       }
 
+      if (this.linkId == 16) {
+        if ( this.goodType == 10) {
+          // 商品分类链接
+          this.selectLinkObj.name = '商品分类链接/' + this.tagName;
+          this.selectLinkObj.id = this.linkId;
+          this.selectLinkObj.params = {
+            mallProTagId: this.cardUrl,
+            name: this.tagName
+          };
+          this.transData();
+          return;
+        } else if (this.goodType == 11) {
+          this.selectLinkObj.name = '商城自定义页面/' + this.pageName;
+          this.selectLinkObj.id = this.linkId;
+          this.selectLinkObj.params = {
+            pageId: this.pageId,
+            name: this.pageName
+          };          
+          this.transData();
+          return;
+        }
+      }
+
 
       // 如果门店签到
       console.log("门店签到:",that.twoLevelSelectValue)
@@ -1555,6 +1658,12 @@ export default {
 
     },
 
+    getMallId(item) {
+      console.log(item);
+      this.tagName = item.tagName;
+      this.cardUrl = item.mallProTagId;
+    },
+
     checkTwoLevel(v) {
       var that = this
       // console.log(that.threeLevelValue)
@@ -1906,13 +2015,15 @@ export default {
     this.repProjectName = this.projectName || 'gic-web';
     // 获取 showType
     this.linkShowType = this.showType || 0;
+    this.pageName = '';
     this.getLinksList(0,1)
   },
 
   components: {
     Treeselect,
     CardList,
-    GiftList
+    GiftList,
+    GoodsTree
   }
 }
 </script>