labsop_mcs/frontend_lock/src/pages/equipmentAuthorization/index.vue

<!--
 * @Author: your name
 * @Date: 2021-02-19 11:59:48
 * @LastEditTime: 2021-03-01 19:04:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \intelligentLock\src\pages\index\index.vue
-->
<template>
  <view class="page">
    <!-- <view>
      <AtNavBar :onClickLeftIcon="leftIconClick.bind(this, '返回')"
                title="设备授权"
                leftIconType="chevron-left"
                color='#646464' />
    </view> -->
    <!-- 设备授权 -->
    <view class="equipment">
      <AtTabs :current="currentTab"
              :tabList="tabList"
              :onClick="handleClick.bind(this, 'currentTab')"
              class="deviceRecordTab">
        <AtTabsPane :current="currentTab"
                    :index="0">
          <view class="tab-content">
            <view class="selectSlock">
              <view class="selectSlockHeader">
                <view class="selectSlockTitle">选择智能锁</view>
                <view class="btnbox">
                  <!-- <AtCheckbox :options="checkboxOptionAll"
                              :selectedList="checkedListAll"
                              :onChange="handleCheckboxAllChange" /> -->
                  <!-- <AtRadio :options='radioOption'
                           :value="radioValue"
                           :onClick='handleRadioChange.bind(this)' /> -->
                  <AtSwitch title="全选"
                            :checked="deviceSwitch"
                            :onChange="slocksSwitchChange" />
                </view>

              </view>
              <AtCheckbox :options="slocksOption"
                          :selectedList="slocksCheckedList"
                          :onChange="slocksCheckboxChange" />
            </view>
            <view class="selectUser">
              <view class="selectUserHeader">
                <view class="selectUserTitle">选择用户</view>
                <view class="btnbox">
                  <AtSwitch title="全选"
                            :checked="userSwitch"
                            :onChange="usersSwitchChange" />
                </view>

              </view>
              <AtCheckbox :options="usersOption"
                          :selectedList="usersCheckedList"
                          :onChange="usersCheckboxChange" />
            </view>
            <view class="saveBox">
              <AtButton type='primary'
                        size='normal'>保 存</AtButton>
            </view>
          </view>
        </AtTabsPane>
        <AtTabsPane :current="currentTab"
                    :index="1">
          <view class="tab-content">标签页二的内容</view>
        </AtTabsPane>
      </AtTabs>
    </view>
  </view>
</template>

<script>
import './index.scss'
export default {
  name: 'equipmentAuthorization',
  data () {
    return {
      currentTab: 0,
      tabList: [
        { title: '设备授权' },
        { title: '设备回收' }
      ],
      slocksOption: [
        { value: 'list1', label: '一号冰箱智能锁' },
        { value: 'list2', label: '二号冰箱智能锁' },
        { value: 'list3', label: '三号冰箱智能锁' },
        { value: 'list4', label: '四号冰箱智能锁' },
      ],
      usersOption: [
        { value: '1', label: '张三' },
        { value: '2', label: '李四' },
        { value: '3', label: '王五' },
        { value: '4', label: '赵六' },
      ],
      slocksCheckedList: [],
      usersCheckedList: [],
      deviceSwitch: false,
      userSwitch: false
    }
  },
  created () { },
  onShow () { },
  onHide () { },
  methods: {
    handleClick (stateName, value) {
      this[stateName] = value
    },
    // 左侧按钮返回
    leftIconClick () {
      this.$taro.navigateBack({
        delta: 1 // 返回上一级页面。
      });
    },
    // 设备复选框选中
    slocksCheckboxChange (value) {
      this.slocksCheckedList = value
    },
    //  设备是否全选
    slocksSwitchChange (value) {
      if (value) {
        this.slocksCheckedList = []
        this.slocksOption.forEach(item => {
          this.slocksCheckedList.push(item.value)
        });
      } else {
        this.slocksCheckedList = []
      }
    },
    // 用户复选框选中
    usersCheckboxChange (value) {
      this.usersCheckedList = value
    },
    //  用户是否全选
    usersSwitchChange (value) {
      if (value) {
        this.usersCheckedList = []
        this.usersOption.forEach(item => {
          this.usersCheckedList.push(item.value)
        });
      } else {
        this.usersCheckedList = []
      }
    },
  }
}
</script>