jsy-app/pages/work/user/device.vue

<template>
  <view class="index-container">
    <z-paging class="paging" ref="paging" use-virtual-list bg-color="#F6F3F3" :loading-more-enabled="false">
      <template #top>
        <view class="search">
          <u-search placeholder="请输入出水口编号" @search="onSearchValue" @custom="onSearchValue" @clear="onSearchValue(null)" shape="square"></u-search>
        </view>
      </template>
      <view class="tips">
        <text style="color: red">注意：</text>
        <text>1.选中的开关为有控制权限;</text>
        <view style="float: right; margin-right: 15px; border: 1px solid;">
          <u-button style="height: 25px;" type="primary" size="small" :plain="true" :hairline="true" @click="handleChangeAllRow">
            {{ selectAll ? '反选' : '全选' }}
          </u-button>
        </view>
      </view>
      <template #cell="{ item }">
        <view class="item-container">
          <view class="flex-text" style="padding: 10px;">
            <view class="flex-text-one">出水口：</view>
            <view>
              <text>{{ item.showName }}</text>
            </view>
            <view style="margin-left: 30px; height: 25px;">
              <u-checkbox-group class="checkBox" style="margin: 0;" icon-placement="left" placement="row" @change="handleChangeRow($event, item)">
                <u-checkbox active-color="#35842E" label="全选"  :checked="isAllSelected(item)" name="all"></u-checkbox>
              </u-checkbox-group>
            </view>
            <view style="margin-left: 100px; height: 25px;">
              <u-radio-group class="checkBox" style="margin: 0;" icon-placement="left" placement="row" v-model="item.landWaterOutletPermissionVo.deviceTypeKey" @change="handleChangeDeviceType($event, item)">
                <u-radio active-color="#35842E" label="三通" name="valve"></u-radio>
                <u-radio active-color="#35842E" label="五通" name="fiveValve"></u-radio>
              </u-radio-group>
            </view>
          </view>
          <u-gap height="1" bg-color="#D2D2D2"></u-gap>
          <view v-if="isValve(item)">
            <u-checkbox-group class="checkBox" icon-placement="left" placement="row" @change="handleChange($event, item)">
              <u-checkbox active-color="#35842E" label="全关" :checked="item.landWaterOutletPermissionVo.valveClose == 0" name="valveClose"></u-checkbox>
              <u-checkbox active-color="#35842E" label="全开" :checked="item.landWaterOutletPermissionVo.valveOpen == 0" name="valveOpen"></u-checkbox>
              <u-checkbox active-color="#35842E" label="①开" :checked="item.landWaterOutletPermissionVo.valveOneOpen == 0" name="valveOneOpen"></u-checkbox>
              <u-checkbox active-color="#35842E" label="②开" :checked="item.landWaterOutletPermissionVo.valveTwoOpen == 0" name="valveTwoOpen"></u-checkbox>
            </u-checkbox-group>
          </view>
          <view v-if="isFiveValve(item)">
            <u-checkbox-group class="checkBox" icon-placement="left" placement="row" @change="handleChange($event, item)">
              <u-checkbox active-color="#35842E" label="①开" :checked="item.landWaterOutletPermissionVo.valveOneOpen == 0" name="valveOneOpen"></u-checkbox>
              <u-checkbox active-color="#35842E" label="②开" :checked="item.landWaterOutletPermissionVo.valveTwoOpen == 0" name="valveTwoOpen"></u-checkbox>
              <u-checkbox active-color="#35842E" label="③开" :checked="item.landWaterOutletPermissionVo.valveThreeOpen == 0" name="valveThreeOpen"></u-checkbox>
              <u-checkbox active-color="#35842E" label="④开" :checked="item.landWaterOutletPermissionVo.valveFourOpen == 0" name="valveFourOpen"></u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
      </template>
      <template #bottom>
        <view class="button">
          <u-button style="width: 200px; height: 40px; border-radius: 4px" type="success" text="设 置" @click="submit" :disabled="disabled"></u-button>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script>
import plugin from "@/plugins";
import { getLandWaterOutletPermissionList, saveLandWaterOutletPermission } from "@/api/system/landWaterOutletPermission";

export default {
  data() {
    return {
      landId: null,
      dataList: [],
      selectItem: {},
      tempValveData: {
        valveClose: true,
        valveOneOpen: true,
        valveOpen: true,
        valveTwoOpen: true,
        valveThreeOpen: true,
        valveFourOpen: true
      },
      selectAll: false,
      query: {
        landId: null,
        showName: null,
        userId: null
      },
      disabled: false
    };
  },
  onLoad(options) {
    this.landId = options.landId;
    this.query.landId = options.landId;
    this.query.userId = options.userId;
    this.queryList();
  },
  methods: {
    queryList() {
      if (!this.query.landId) {
        return;
      }
      this.dataList = [];
      getLandWaterOutletPermissionList(this.query).then(res => {
        this.dataList = res.data;
        this.$refs.paging.complete(this.dataList);
      });
    },
    onSearchValue(e) {
      this.query.showName = e;
      this.queryList();
    },
    submit() {
      let saveObj = {
        landId: this.query.landId,
        userId: this.query.userId,
        landWaterOutlets: this.dataList
      };
      plugin.modal.loading("设置中...");
      this.disabled = true;
      saveLandWaterOutletPermission(saveObj).then(res => {
        plugin.modal.msgSuccess("设置成功!");
        this.queryList();
        this.disabled = false;
      });
    },
    handleChangeAllRow() {
      this.selectAll = !this.selectAll;
      const selectAll = this.selectAll;
      this.dataList.forEach(item => {
        this.handleRowPermissions(item, selectAll);
      });
    },
    handleChangeRow(e, row) {
      this.handleRowPermissions(row, e && e.length);
    },
    handleChangeDeviceType(e, obj) {
      const permissions = obj.landWaterOutletPermissionVo;
      permissions.deviceTypeKey = e;
      this.setDefaultPermissions(permissions);
    },
    handleChange(e, obj) {
      this.judgeValue(e, obj);
    },
    judgeValue(e, itemSample) {
      const permissions = itemSample.landWaterOutletPermissionVo;
      ['valveClose', 'valveOpen', 'valveOneOpen', 'valveTwoOpen', 'valveThreeOpen', 'valveFourOpen'].forEach(property => {
        permissions[property] = e.includes(property) ? 0 : 1;
      });
    },
    handleRowPermissions(row, selectAll) {
      const permissions = row.landWaterOutletPermissionVo;
      this.setDefaultPermissions(permissions);
      if (selectAll) {
        if (this.isValve(row)) {
          permissions.valveClose = 0;
          permissions.valveOpen = 0;
          permissions.valveOneOpen = 0;
          permissions.valveTwoOpen = 0;
        } else if (this.isFiveValve(row)) {
          permissions.valveOneOpen = 0;
          permissions.valveTwoOpen = 0;
          permissions.valveThreeOpen = 0;
          permissions.valveFourOpen = 0;
        }
      }
    },
    setDefaultPermissions(permissions) {
      permissions.valveClose = 1;
      permissions.valveOpen = 1;
      permissions.valveOneOpen = 1;
      permissions.valveTwoOpen = 1;
      permissions.valveThreeOpen = 1;
      permissions.valveFourOpen = 1;
    },
    isValve(item) {
      return item.landWaterOutletPermissionVo.deviceTypeKey === 'valve';
    },
    isFiveValve(item) {
      return item.landWaterOutletPermissionVo.deviceTypeKey === 'fiveValve';
    },
    isAllSelected(item) {
      if (this.isValve(item)) {
        return item.landWaterOutletPermissionVo.valveClose === 0 &&
               item.landWaterOutletPermissionVo.valveOpen === 0 &&
               item.landWaterOutletPermissionVo.valveOneOpen === 0 &&
               item.landWaterOutletPermissionVo.valveTwoOpen === 0;
      } else if (this.isFiveValve(item)) {
        return item.landWaterOutletPermissionVo.valveOneOpen === 0 &&
               item.landWaterOutletPermissionVo.valveTwoOpen === 0 &&
               item.landWaterOutletPermissionVo.valveThreeOpen === 0 &&
               item.landWaterOutletPermissionVo.valveFourOpen === 0;
      }
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.index-container {
  background-color: #f6f3f3;
  height: 100%;
  .search {
    background-color: white;
    padding: 10px;
  }
  .title {
    height: 50px;
    display: flex;
    padding: 15px 15px;
    background: white;
    align-items: center;
    text {
      font-size: 14px;
      margin-right: 10px;
    }
  }
  .list {
    height: calc(100vh - 150px - env(safe-area-inset-bottom));
    margin: 0px 10px;
    work-user-index-item {
      background-color: #f6f3f3;
    }
  }
  .button {
    padding: 10px 20px;
    display: flex;
    background: white;
  }
  .item-container {
    margin-top: 10px;
    background-color: white;
    padding-bottom: 10px;
  }
  .flex-text {
    display: flex;
    align-items: center;
    font-size: 16px;
    .flex-text-one {
      color: #939393;
      font-weight: bold;
    }
  }
  .checkBox {
    margin: 10px 0px 0px 0px;
    display: flex;
    justify-content: space-around;
  }
}
.tips {
  padding: 10px;
  line-height: 20px;
  font-size: 14px;
  color: gray;
  background-color: #fff;
  border-top: 1px solid #eee;
}
::v-deep.zp-paging-container {
  background: #f3f3f3 !important;
}
</style>