组件调整

src/components/WebSet/plug-in/choose_menu.vue

+<style>
+  .choose_menu {
+    width: 450px;
+    line-height: 0;
+    max-height: 400px;
+  }
+</style>
+<template>
+  <div class="choose_menu">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane :label="$t('objFill.v101.myOrdersAllType.zidingyi')+$t('objFill.caidan')" name="1">
+        <div class="column" style="height:400px;overflow-y:scroll;line-height:normal;">
+          <template v-for="(subItem,subIndex) in dataDiyList">
+            <div :key="subIndex" style="margin-bottom:10px;">
+              <el-checkbox v-model="subItem.IsChecked" :key="subIndex" @change="checkMenuChange(subItem)">
+                <span>{{subItem.CategoryName}}</span>
+              </el-checkbox>
+            </div>
+          </template>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('ground.fenlei')+$t('objFill.caidan')" name="2">
+        <el-tree :data='WebSiteCategoryList' node-key="Id" ref="treeMenu" :props="defaultProps" @check="treeCheck"
+          :check-strictly="true" show-checkbox :check-on-click-node="true">
+        </el-tree>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        defaultProps: {
+          children: "SubList",
+          label: "CategoryName",
+        },
+        activeName: '1',
+        WebSiteCategoryList: [], //分类菜单
+        dataDiyList: [], //自定义页面
+        checkedMenuObj: {}, //选中的菜单对象
+      };
+    },
+    created() {
+      this.getOptions()
+    },
+    methods: {
+      //复选框选择
+      checkMenuChange(subItem) {
+        if (this.dataDiyList && this.dataDiyList.length > 0) {
+          this.dataDiyList.forEach(item => {
+            item.IsChecked = false;
+          });
+        }
+        subItem.IsChecked = !subItem.IsChecked;
+      },
+      //树形菜单选择
+      treeCheck(node, list) {
+        if (list.checkedKeys.length == 2) {
+          //单选实现
+          this.$refs.treeMenu.setCheckedKeys([node.Id]);
+          this.checkedMenuObj = node;
+        }
+      },
+      //选项卡切换
+      handleClick() {
+
+      },
+      //获取菜单数据
+      getOptions() {
+        this.apipost(
+          "ws_post_GetAllMenuList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.WebSiteCategoryList = res.data.data.WebSiteCategoryList
+              this.dataDiyList = res.data.data.DiyList;
+            } else {
+              this.Error(res.data.message);
+            }
+          });
+      },
+      //初始化菜单选中状态
+      initMenuCheck() {
+        if (this.dataDiyList && this.dataDiyList.length > 0) {
+          this.dataDiyList.forEach(item => {
+            item.IsChecked = false;
+          });
+        }
+        this.checkedMenuObj = {};
+      },
+      //获取选择的菜单
+      getChooseMenu() {
+        var obj = {
+          MenuName: "",
+          MenuUrl: "",
+        };
+        if (this.activeName == "1") {
+          if (this.dataDiyList && this.dataDiyList.length > 0) {
+            this.dataDiyList.forEach(item => {
+              if (item.IsChecked) {
+                obj.MenuUrl = item.LinkUrl;
+                obj.MenuName = item.CategoryName;
+              }
+            });
+          }
+        } else {
+          obj.MenuUrl = this.checkedMenuObj.LinkUrl;
+          obj.MenuName = this.checkedMenuObj.CategoryName
+        }
+        var domainUrl = this.getLocalStorage().B2BDomain;
+        if (obj.MenuUrl) {
+          if (obj.MenuUrl.indexOf("https") != -1) {
+
+          } else if (obj.MenuUrl.indexOf("http") != -1) {
+
+          } else {
+            obj.MenuUrl = domainUrl + obj.MenuUrl;
+          }
+        }
+        return obj;
+      },
+    },
+    mounted() {
+
+    },
+  };
+</script>
\ No newline at end of file