3级手风琴多选组件

app.json

@@ -335,7 +335,8 @@
         "dk-tree-form-more": "components/dkbase/dk-tree-form-more/dk-tree-form-more",
         "dk-drag-item": "components/dkbase/dk-drag-item/dk-drag-item",
         "dk-drag-to-sort": "components/dkbase/dk-drag-to-sort/dk-drag-to-sort",
-        "dk-multi-owner": "components/dkbase/dk-multi-owner/dk-multi-owner"
+        "dk-multi-owner": "components/dkbase/dk-multi-owner/dk-multi-owner",
+        "dk-collapse-item-more": "components/dkbase/dk-collapse-item-more/dk-collapse-item-more"
     },
     "tabBar": {
         "color": "#95A8CB",

components/dkbase/dk-collapse-item-more/dk-collapse-item-more.js

@@ -0,0 +1,181 @@
+/*******************************************************************************
+ * Copyright(c) 2022 dongke All rights reserved. / Confidential
+ * 类的信息：
+ *		1.程序名称：
+ *		2.功能描述：折叠面板
+ * 编辑履历：
+ *		作者				日期					版本				修改内容
+ *		admin		  	2022-11-17  	 1.00		   	  新建
+ *******************************************************************************/
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 数据源
+    list: {
+      type: Array,
+      value: []
+    },
+    activeNames: {
+      type: Array,
+      value: []
+    },
+  },
+
+  /**
+   * 组件的选项
+   */
+  options: {
+    addGlobalClass: true,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    tableData: []
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onChange(event) {
+      this.setData({
+        activeNames: event.detail,
+      });
+    },
+    onChange1(event) {
+      this.setData({
+        activeNames1: event.detail,
+      });
+    },
+    onCheckedItem(e) {
+      console.log(e)
+      let _that = this
+      let index = e.currentTarget.dataset.index
+      let list = _that.data.list
+      list[index].checked = !list[index].checked
+      if (list[index].children && list[index].children.length > 0) {
+        if (list[index].checked) {
+          list[index].childrenChecked = false
+        }
+        list[index].children.forEach(res => {
+          res.checked = list[index].checked
+          if (res.children && res.children.length > 0) {
+            if (res.checked) {
+              res.childrenChecked = false
+            }
+            res.children.forEach(it => {
+              it.checked = res.checked
+            })
+          }
+        })
+
+      }
+      list[index].checked = list[index].checked
+      console.log('list', list)
+      _that.setData({
+        list: list
+      })
+      this.triggerEvent("obtainList", { list: list })
+    },
+    onCheckedItem1(e) {
+      let _that = this
+      let index = e.currentTarget.dataset.index
+      let index_ = e.currentTarget.dataset.index_
+      let list = _that.data.list
+      list[index].children[index_].checked = !list[index].children[index_].checked
+      //设置子级
+      if (list[index].children[index_].children && list[index].children[index_].children.length > 0) {
+        list[index].children[index_].children.forEach(res => {
+          res.checked = list[index].children[index_].checked
+        })
+      }
+      //设置按钮样式
+      let checkedList = []
+      list[index].children.forEach(it => {
+        if (it.checked) {
+          checkedList.push(it)
+        }
+      })
+      if (checkedList.length == list[index].children.length) {
+        list[index].checked = true
+        list[index].childrenChecked = false
+        list[index].children[index_].checked = true
+        list[index].children[index_].childrenChecked = false
+      } else {
+        list[index].checked = false
+        // list[index].children[index_].checked = false
+        //控制父级选中图标
+        list[index].childrenChecked = checkedList.length == 0 ? false : true
+        // list[index].children[index_].childrenChecked = checkedList.length == 0 ? false : true
+      }
+      let checkedListF = []
+      list[index].children[index_].children.forEach(it => {
+        if (it.checked) {
+          checkedListF.push(it)
+        }
+      })
+      if (checkedListF.length == list[index].children[index_].children.length) {
+        list[index].children[index_].checked = true
+        list[index].children[index_].childrenChecked = false
+      } else {
+
+        list[index].children[index_].checked = false
+        //控制父级选中图标
+
+        list[index].children[index_].childrenChecked = checkedListF.length == 0 ? false : true
+      }
+      _that.setData({
+        list: list
+      })
+    },
+
+
+
+    //todo
+    onCheckedItem_(e) {
+      let index = e.currentTarget.dataset.index
+      let index_ = e.currentTarget.dataset.index_
+      let index_3 = e.currentTarget.dataset.index_3
+      let list = this.data.list
+      list[index].children[index_].children[index_3].checked = !list[index].children[index_].children[index_3].checked
+
+      let checkedList = []
+      list[index].children[index_].children.forEach(it => {
+        if (it.checked) {
+          checkedList.push(it)
+        }
+      })
+      if (checkedList.length == list[index].children[index_].children.length) {
+        list[index].children[index_].checked = true
+        list[index].children[index_].childrenChecked = false
+      } else {
+        list[index].children[index_].checked = false
+        //控制父级选中图标
+        list[index].children[index_].childrenChecked = checkedList.length == 0 ? false : true
+      }
+      //设置按钮样式
+      let checkedListF = []
+      list[index].children.forEach(it => {
+        if (it.checked || it.childrenChecked) {
+          checkedListF.push(it)
+        }
+      })
+      if (checkedListF.length == list[index].children.length) {
+        list[index].checked = true
+        list[index].childrenChecked = false
+      } else {
+        list[index].checked = false
+        //控制父级选中图标
+        list[index].childrenChecked = checkedListF.length == 0 ? false : true
+      }
+      this.setData({
+        list: list
+      })
+      this.triggerEvent("obtainList", { list: list })
+    },
+  }
+})

components/dkbase/dk-collapse-item-more/dk-collapse-item-more.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/dkbase/dk-collapse-item-more/dk-collapse-item-more.wxml

@@ -0,0 +1,59 @@
+<view class="dk-card-outer-class">
+  <view class="dk-card-class">
+    <van-collapse value="{{ activeNames }}" border="{{false}}" bind:change="onChange">
+      <van-collapse-item border="{{false}}" name="{{index}}" wx:for="{{list}}" wx:key="index" data-item="{{item}}" data-index="{{index}}">
+        <view slot="title">
+          <view style="display: flex;">
+            <view style="width: 15%;" catch:tap="onCheckedItem" data-index="{{index}}">
+              <van-checkbox wx:if="{{item.childrenChecked}}" use-icon-slot checked-color="#95A8CB" value="{{ item.checked }}" shape="square">
+                <image slot="icon" src="/static/img/checkbox.png" style="width: 40rpx;height: 40rpx;" />
+              </van-checkbox>
+              <van-checkbox wx:else value="{{ item.checked }}" shape="square">
+              </van-checkbox>
+            </view>
+            <view style="width: 85%;">
+              <view class="font">{{item.menuName}}</view>
+            </view>
+          </view>
+        </view>
+        <van-collapse value="{{ activeNames1 }}" border="{{false}}" bind:change="onChange1">
+          <van-collapse-item style="padding:0px !important;" border="{{false}}" name="{{index_}}" wx:for="{{item.children}}" wx:for-index="index_" wx:for-item="item_" data-item="{{item_}}" data-index="{{index_}}">
+
+            <view slot="title">
+              <view style="display: flex;">
+                <view style="width: 15%;" catch:tap="onCheckedItem1" data-index="{{index}}" data-index_="{{index_}}">
+                  <van-checkbox wx:if="{{item_.childrenChecked}}" use-icon-slot checked-color="#95A8CB" value="{{ item_.checked }}" shape="square">
+                    <image slot="icon" src="/static/img/checkbox.png" style="width: 40rpx;height: 40rpx;" />
+                  </van-checkbox>
+                  <van-checkbox wx:else value="{{ item_.checked }}" shape="square">
+                  </van-checkbox>
+                </view>
+                <view style="width: 85%;">
+                  <view class="font">{{item_.menuName}}</view>
+                </view>
+              </view>
+            </view>
+
+            <view wx:for="{{item_.children}}" wx:for-index="index_3" wx:for-item="item_3" style="margin-left: 50rpx;">
+              <view style="display: flex;padding-top: {{ index_3 !=0 ?  '40rpx' : ''}};">
+                <view style="width: 10%;" catch:tap="onCheckedItem_" data-index="{{index}}"  data-index_="{{index_}}" data-index_3="{{index_3}}">
+                  <van-checkbox checked-color="#95A8CB" value="{{ item_3.checked }}" shape="square"></van-checkbox>
+                </view>
+                <view style="width: 15%;justify-content: center;align-items: center;display: flex;">
+                  <van-image round width="36rpx" height="36rpx" src="{{'/static/img/tree.png'}}" />
+                </view>
+                <view class="font" style="width: 75%;">{{item_3.menuName}}</view>
+              </view>
+            </view>
+          </van-collapse-item>
+        </van-collapse>
+
+
+
+
+      </van-collapse-item>
+
+    </van-collapse>
+
+  </view>
+</view>

components/dkbase/dk-collapse-item-more/dk-collapse-item-more.wxss

@@ -0,0 +1,12 @@
+.font {
+  font-family: PingFang HK;
+  font-size: 30rpx;
+  font-weight: 500;
+  line-height: 40rpx;
+  letter-spacing: 0em;
+  text-align: left;
+}
+.van-checkbox__icon--checked{
+  background-color: #95A8CB !important;
+  border: none !important;
+}

package-base-select/pages/select-functional-permissions/select-functional-permissions.js

@@ -136,7 +136,21 @@ Page({
               appCode: it.appCode
             })
           }
+
+          if(it.children && it.children.length > 0){
+            it.children.forEach(itt=>{
+              if (itt.checked) {
+                tableDataTemp.push({
+                  funUuid: itt.funUuid,
+                  menuUuid: itt.menuUuid,
+                  appCode: itt.appCode
+                })
+              }
+            })
+          }
         })
+
+
       }
     })
 

package-base-select/pages/select-functional-permissions/select-functional-permissions.wxml

@@ -27,8 +27,15 @@
 
 </van-sticky>
 
-<dk-collapse-item wx:if="{{tableData.length > 0}}" list="{{tableData}}" bind:obtainList="obtainList"></dk-collapse-item>
-
 
+<van-tabs v-model="active">
+  <van-tab title="小程序">
+    <dk-collapse-item wx:if="{{tableData.length > 0}}" list="{{tableData}}" bind:obtainList="obtainList"></dk-collapse-item>
+  </van-tab>
+  <van-tab title="WEB">
+    
+    <dk-collapse-item-more wx:if="{{tableData.length > 0}}" list="{{tableData}}" bind:obtainList="obtainList"></dk-collapse-item-more>
+  </van-tab>
+</van-tabs>
 <!-- 保存 -->
 <dk-save-button model:value="{{btnFormData}}" btnAutoWidthFlag="{{true}}" btnRightFlag="{{true}}" buttonList="{{buttonSaveList}}" contentList="{{contentSaveList}}" bind:open="toAdd"></dk-save-button>