Browse Source

角色选择

zhaoxiaohai 3 years ago
parent
commit
d5c9afa0d2

+ 48 - 21
components/My_categoryListings/index.js

@@ -13,40 +13,46 @@ Component({
             value: []
         }
     },
+
     options: {
         addGlobalClass: true
     },
+
     lifetimes: {
-        ready() {
-            /*    setTimeout(() => {
-                   this.setData({
-                       intoViewId: 'basic1'
-                   })
-               }, 1000) */
-        }
+        ready() {}
     },
 
     /**
      * 组件的初始数据
      */
     data: {
+        systemIndex: 0, //系统index
+        portIndex: 0, //选择端口Index
+        moduleIndex: 0, //选择模块Index
         result: ['a', 'b'],
+        portID: null, //端口ID
         leftIntoViewId: null,
         rightIntoViewId: null,
         heightList: [],
+        modulesIndex: 0, //模块列表
+        scrollTop: 0
     },
 
     observers: {
         'list': function (list) {
             if (!list.length) return;
-            if (this.data.intoViewId == null) this.setData({
-                leftIntoViewId: list[0].system + list[0].systemid,
-                rightIntoViewId: list[0].system + list[0].systemid
+            let data = list[0].clients[0];
+            console.log("list", list)
+            console.log("data", data)
+            let id = data.modules[0] ? "M" + data.modules[0].systemmoduleid : '';
+            if (this.data.portID == null) this.setData({
+                portID: 'S' + data.systemclientid,
+                leftIntoViewId: id,
+                rightIntoViewId: id
             })
             setTimeout(() => {
-                this.getAppsHeight(list);
-
-            }, 500)
+                this.getAppsHeight();
+            }, 200)
         }
     },
 
@@ -54,27 +60,48 @@ Component({
      * 组件的方法列表
      */
     methods: {
-        /* 点击左侧分类 */
+        /* 系统分类 */
+        changePortID(e) {
+            const {
+                dataset
+            } = e.currentTarget;
+            this.setData({
+                portID: e.target.id,
+                systemIndex: dataset.index,
+                portIndex: dataset.i,
+                modulesIndex: 0,
+                scrollTop: 0
+            });
+            setTimeout(() => {
+                this.getAppsHeight();
+            }, 300)
+        },
+        /* 点击模块分类 */
         changeType(e) {
             this.setData({
                 leftIntoViewId: e.target.id,
                 rightIntoViewId: e.target.id
             })
         },
-        getAppsHeight(list) {
+        getAppsHeight() {
+            const list = this.data.list[this.data.systemIndex].clients[this.data.portIndex].modules,
+                that = this;
             let heightList = [];
+            let id = 'M' + list[0].systemmoduleid;
             for (let i = 0; i < list.length; i++) {
-                let cas = '.' + list[i].system + list[i].systemid;
-                let query = wx.createSelectorQuery().in(this).select(cas).boundingClientRect();
+                let query = wx.createSelectorQuery().in(that).select('.' + 'M1' + list[i].systemmoduleid).boundingClientRect();
                 query.exec(res => {
-                    if (!res[0]) return this.getAppsHeight(list);
+                    if (!res[0]) return this.getAppsHeight();
                     heightList.push(res[0])
-                    if (heightList.length == list.length) this.setData({
-                        heightList
+                    if (list.length == heightList.length) this.setData({
+                        heightList,
+                        leftIntoViewId: id,
+                        rightIntoViewId: id
                     })
                 })
             }
         },
+
         viewScroll({
             detail
         }) {
@@ -92,7 +119,7 @@ Component({
                 })
             } else if (scrollTop < top) {
                 if (!arr[i - 1] || id == arr[0].id) return;
-                if (scrollTop < Math.abs((arr[i - 1].top - 15 - arr[i - 1].height) / 2)) this.setData({
+                if (scrollTop < Math.abs(arr[i - 1].top - arr[i - 1].height + 80)) this.setData({
                     leftIntoViewId: arr[i - 1].id
                 })
             } else {

+ 62 - 27
components/My_categoryListings/index.scss

@@ -3,39 +3,66 @@
     width: 750rpx;
     overflow: hidden;
 
+    /* 系统 */
+    .system {
+        width: 240rpx;
+        box-sizing: border-box;
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #333333;
+
+        .classify {
+            width: 100%;
+
+            .label {
+                height: 50rpx;
+                width: 100%;
+                padding-left: 15rpx;
+                line-height: 50rpx;
+                background-color: rgb(226, 225, 225);
+            }
+        }
+
+        .option {
+            text-align: left;
+            padding-left: 25rpx;
+        }
+    }
+
     /* 左边滚动区域 */
     .left-list {
         width: 100%;
         width: 180rpx;
+    }
 
-        .option {
-            position: relative;
-            width: 180rpx;
-            height: 90rpx;
-            line-height: 90rpx;
-            text-align: center;
-            font-size: 28rpx;
-            font-family: PingFang SC-Regular, PingFang SC;
-            color: #333333;
-            padding-left: 10rpx;
-            padding-right: 4rpx;
-            box-sizing: border-box;
-        }
+    /* 选择项 */
+    .option {
+        position: relative;
+        width: 100%;
+        height: 90rpx;
+        line-height: 90rpx;
+        text-align: center;
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #333333;
+        padding-left: 10rpx;
+        padding-right: 4rpx;
+        box-sizing: border-box;
+    }
 
-        .current {
-            color: var(--assist) !important;
-        }
+    .current {
+        color: var(--assist) !important;
+    }
 
-        .current::after {
-            content: '';
-            position: absolute;
-            display: block;
-            height: 90rpx;
-            width: 8rpx;
-            background: var(--assist);
-            left: 0;
-            top: 0;
-        }
+    .current::after {
+        content: '';
+        position: absolute;
+        display: block;
+        height: 90rpx;
+        width: 8rpx;
+        background: var(--assist);
+        left: 0;
+        top: 0;
     }
 
     .right-list {
@@ -68,9 +95,13 @@
             }
 
             .custom-checkbox {
-                float: left;
                 margin-top: 20rpx;
                 width: 50% !important;
+                margin-left: 15rpx;
+            }
+
+            .check-label {
+                margin-left: -10rpx;
             }
 
             .label-text {
@@ -81,4 +112,8 @@
             }
         }
     }
+}
+
+.label-class {
+    width: 100% !important;
 }

+ 18 - 16
components/My_categoryListings/index.wxml

@@ -1,27 +1,29 @@
 <view class="word">
+    <scroll-view class="system" scroll-into-view='{{portID}}' scroll-with-animation scroll-y style="height: {{height}}rpx; width: 240rpx;">
+        <view class="classify line-1" wx:for="{{list}}">
+            <view class="label">{{item.systemname}}</view>
+            <view class="option line-1 {{portID=='S'+items.systemclientid?'current':''}}" wx:for="{{item.clients}}" wx:for-item="items" id="{{'S'+items.systemclientid}}" wx:for-index="i" data-index="{{index}}" data-i="{{i}}" bindtap="changePortID">
+                {{items.systemclientname}}
+            </view>
+        </view>
+    </scroll-view>
 
-    <scroll-view class="left-list" scroll-into-view='{{leftIntoViewId}}' scroll-with-animation scroll-y style="height: {{height}}rpx;">
-        <view class="option line-1 {{leftIntoViewId==item.system+item.systemid?'current':''}}" wx:for="{{list}}" id="{{item.system+item.systemid}}" bindtap="changeType">
-            {{item.systemname}}
+    <scroll-view class="left-list" scroll-into-view='{{leftIntoViewId}}' scroll-top='{{scrollTop}}' scroll-with-animation scroll-y style="height: {{height}}rpx;">
+        <view class="option line-1 {{leftIntoViewId==('M'+item.systemmoduleid)?'current':''}}" wx:for="{{list[systemIndex].clients[portIndex].modules}}" id="{{'M'+item.systemmoduleid}}" bindtap="changeType" data-item="{{item}}">
+            {{item.systemmodulename}}
         </view>
     </scroll-view>
 
-    <scroll-view class="right-list" bindscroll='viewScroll' scroll-into-view='{{rightIntoViewId}}' scroll-with-animation scroll-y style="height: {{height}}rpx;">
-        <view class="group {{item.system+item.systemid}}" wx:for="{{list}}" id="{{item.system+item.systemid}}">
-            <block wx:for="{{item.clients}}" wx:for-item="item2">
-                <block wx:for="{{item2.modules}}" wx:for-item="item3">
-                    <view class="label">
-                        <van-checkbox icon-size='28rpx' label-class='label-text' shape='square' name="a">{{item3.systemmodulename}}-{{item2.systemclientname}}</van-checkbox>
-                    </view>
-                    <van-checkbox-group value="{{ result }}" bind:change="onChange">
-                        <van-checkbox wx:for="{{item3.apps}}" wx:for-item="item4" icon-size='28rpx' custom-class='custom-checkbox ' label-class='label-text' shape='square' name="{{item4.systemappid}}">{{item4.systemappname}}</van-checkbox>
-                    </van-checkbox-group>
-                    <view style="clear:both" />
-                </block>
+    <scroll-view class="right-list" bindscroll='viewScroll' scroll-top='{{scrollTop}}' scroll-into-view='{{rightIntoViewId}}' scroll-with-animation scroll-y style="height: {{height}}rpx;">
+        <view class="group {{'M1'+item.systemmoduleid}}" wx:for="{{list[systemIndex].clients[portIndex].modules}}" id="{{'M'+item.systemmoduleid}}">
+            <block wx:for="{{item.apps}}" wx:for-item="apps">
+                <van-checkbox icon-size='28rpx' custom-class='custom-checkbox check-label' label-class='label-text' shape='square' name="{{apps.systemappid}}">{{apps.systemappname}}</van-checkbox>
+                <van-checkbox-group value="{{ result }}" bind:change="onChange">
+                    <van-checkbox wx:for="{{apps.options}}" wx:for-item="options" icon-size='28rpx' custom-class='custom-checkbox ' label-class='label-text' shape='square' name="{{options.optionid}}">{{options.optionname}}</van-checkbox>
+                </van-checkbox-group>
             </block>
         </view>
         <view style="height: {{height-80}}rpx;" />
-        <view style="height: {{height-80}}rpx;" />
     </scroll-view>
 </view>
 <!-- <My_empty wx:if="{{list.length==0}}" /> -->