update: update

src/components/allCustomers/allCustomersList.vue

@@ -3,16 +3,6 @@
     <div class="header-nav">
       <nav-path :navpath="navpath"></nav-path>
     </div>
-    <!-- <div class="top-search-wrap">
-      <p class="label" style="margin-right: 61px;">客户类型</p>
-      <el-checkbox-group v-model="customerType" class="flex-wrap" @change="onSearch">
-        <el-checkbox label="notMember">非会员</el-checkbox>
-        <i class="line"></i>
-        <p class="label">会员：</p>
-        <el-checkbox label="wxOpenCarMember">微信会员</el-checkbox>
-        <el-checkbox label="posMember">POS会员</el-checkbox>
-      </el-checkbox-group>
-    </div> -->
     <div class="list-section-contain">
       <div class="contain-header">
         <div class="top-header">
@@ -30,15 +20,13 @@
             <el-input style="width:300px;" v-model="pageParam.phoneNameCard"
               prefix-icon="el-icon-search" placeholder="输入客户姓名/昵称/手机号码"
               @keyup.enter.native="onSearch" clearable></el-input>
-            <!-- <el-select v-model="customerTypeLabel" multiple @change="selectChange">
-              <el-option style="height: auto;padding:0;" :value="customerType">
-                <el-tree :data="treeData" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
-                  check-on-click-node :props="{label: 'label',children: 'children'}"
-                  :default-checked-keys="['notMember', 'wxOpenCarMember' , 'posMember' ]" ref="tree"
-                  @check-change="handleCheckChange">
-                </el-tree>
+            <el-select v-model="customerTypeLabel" placeholder="请选择" multiple
+              @change="selectChange" style="width: 300px">
+              <el-option :value="customerType" style="height: auto;padding:0">
+                <el-tree :data="treeData" show-checkbox node-key="id" ref="tree" highlight-current
+                  :props="defaultProps" @check-change="handleCheckChange"></el-tree>
               </el-option>
-            </el-select> -->
+            </el-select>
             <el-button type="text" @click="showSearch = !showSearch" class="senior-search">高级搜索<i
                 :class="showSearch ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
             </el-button>

src/components/allCustomers/index.js

@@ -37,18 +37,11 @@ export default {
       loading: false,
       tableData: [],
       multipleList: [], // 列表select选择
-      customerTypeLabel: ["非会员", "微信会员", "POS会员"],
-      customerType: [],
-      treeData: [
-        { id: "notMember", label: "非会员" },
-        {
-          id: "member",
-          label: "会员",
-          children: [
-            { id: "wxOpenCarMember", label: "微信会员" },
-            { id: "posMember", label: "POS会员" }
-          ]
-        }
+      customerTypeLabel: "", //  "非会员,微信会员,POS会员",
+      customerType: [
+        // { id: 1, label: "非会员" },
+        // { id: 3, label: "微信会员" },
+        // { id: 4, label: "POS会员" }
       ],
       oldCustomerType: "",
       showSearch: false, // 高级搜索开关
@@ -75,7 +68,35 @@ export default {
       defaultImg,
       integralFlag: "", // 积分调整权限
       memberGrade: [], // 商户等级列表
-      cliqueMemberGrade: [] // 集团等级列表
+      cliqueMemberGrade: [], // 集团等级列表
+      treeData: [
+        {
+          id: 1,
+          label: "非会员",
+          disabled: false
+        },
+        {
+          id: 2,
+          label: "会员",
+          disabled: false,
+          children: [
+            {
+              id: 3,
+              label: "微信会员",
+              disabled: false
+            },
+            {
+              id: 4,
+              label: "POS会员",
+              disabled: false
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label"
+      }
     };
   },
   components: {
@@ -89,14 +110,18 @@ export default {
   },
   computed: {
     pageName: function() {
-      // 全部客户allCustomer；非会员notMember；会员isMember；微信会员wxOpenCarMember，pos会员posMember
-      console.log(this.customerType);
-      // let list = this.customerType.length
-      //   ? this.customerType.map(el => el.value).join(",")
-      //   : "notMember,wxOpenCarMember,posMember";
-      //   console.log(list);
-      return this.customerType.length
-        ? this.customerType.join(",")
+      // 1-非会员 notMember 3-微信会员 wxOpenCarMember 4-pos会员 posMember
+      const filterObj = {
+        1: "notMember",
+        3: "wxOpenCarMember",
+        4: "posMember"
+      };
+      let list = [];
+      this.customerType.forEach(el => {
+        list.push(filterObj[el.id]);
+      });
+      return list.length
+        ? list.join(",")
         : "notMember,wxOpenCarMember,posMember";
     },
     selectObj: function() {
@@ -127,18 +152,17 @@ export default {
     }
   },
   watch: {
-    // customerType: {
-    //   handler(newV, oldV) {
-    //     if (newV.length === 0) {
-    //       this.customerType = [].concat(oldV);
-    //       this.$message({
-    //         message: "客户类型不能为空",
-    //         type: "warning"
-    //       });
-    //     }
-    //   },
-    //   immediate: true
-    // },
+    customerType: {
+      handler(newV, oldV) {
+        this.onSearch();
+        if (newV.length === 0&&this.$refs.tree) {
+          this.$message.error('至少选择一个客户类型')
+          this.$refs.tree.setChecked(oldV[0].id, true, true)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
     $route: function(n, o) {
       if (n.path === "/allCustomers")
         this.$store.commit("mutations-slide", true);
@@ -154,35 +178,35 @@ export default {
     this.getFindMemberFields();
     this.getAjaxMembers();
     this.getEnterpriseInfo();
+    // 默认勾选全部客户类型 1-非会员 notMember 3-微信会员 wxOpenCarMember 4-pos会员 posMember
+    [1, 3, 4].forEach(id => this.$refs.tree.setChecked(id, true, true));
   },
   beforUpdate() {},
   methods: {
-    // selectChange(event) {
-      // 这个event数组只有label
-      // 这里主要处理框内选中项的取消选中
-      // let arrNew = [];
-      // this.customerType.forEach(item => {
-      //   event.forEach(eventItem => {
-      //     if (eventItem == item.label) {
-      //       arrNew.push(item);
-      //     }
-      //   });
-      // });
-      // this.$refs.tree.setCheckedNodes(arrNew);
-    // },
-    // handleCheckChange(data, checked) {
-    //   let res = this.$refs.tree.getCheckedNodes(true, true);
-    //   let arrLabel = [];
-    //   let arr = [];
-    //   res.forEach(item => {
-    //     arrLabel.push(item.label);
-    //     arr.push(item);
-    //   });
-    //   console.log('arrLabel',arrLabel);
-    //   console.log('arr',arr);
-    //   this.customerTypeLabel = arr;
-    //   this.customerType = arrLabel;
-    // },
+    selectChange(e) {
+      let arrNew = [];
+      let dataLength = this.customerType.length;
+      let eleng = e.length;
+      for (let i = 0; i < dataLength; i++) {
+        for (let j = 0; j < eleng; j++) {
+          if (e[j] === this.customerType[i].label) {
+            arrNew.push(this.customerType[i]);
+          }
+        }
+      }
+      this.$refs.tree.setCheckedNodes(arrNew);
+    },
+    handleCheckChange() {
+      let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
+      let arrLabel = [];
+      let arr = [];
+      res.forEach(item => {
+        arrLabel.push(item.label);
+        arr.push(item);
+      });
+      this.customerType = [].concat(arr);
+      this.customerTypeLabel = [].concat(arrLabel);
+    },
     initialize() {
       this.pageParam.phoneNameCard = !!sessionStorage.getItem("phoneNameCard")
         ? sessionStorage.getItem("phoneNameCard")

src/components/allCustomers/info.js

@@ -223,12 +223,12 @@ export default {
     ...mapState(["showEditClique"])
   },
   created() {
-    const rightWrap = document.querySelector(".right-maincontainer");
-    rightWrap.scrollTo(0, 0);
     this.$store.commit("mutations-slide", true);
     this.memberId = this.$route.query.memberId;
   },
   mounted() {
+    const rightWrap = document.querySelector(".right-maincontainer");
+    rightWrap.scrollTo(0, 0);
     this.initData();
     this.getEnterpriseInfo();
     this.getcodeList();