usky-web-mobile/src/pages/business/zhxf/messagePush/index.vue

<template>
  <view class="padding-sm setting-messagePush">
    <form action="">
      <checkbox-group class="block" @change="CheckboxChange">
        <view class="margin-top">
          <view class="flex align-center checkItems" v-for="(item, index) in checkbox" :key="index">
            <checkbox class="blue" :class="item.checked == 1 ? 'checked' : ''" :checked="item.checked == 1 ? true : false" :value="item.value"></checkbox>
            <view class="title">{{ item.title }}</view>
          </view>
        </view>
      </checkbox-group>

      <view class="btn-area submitBottomBtn">
        <button class="bg-blue round margin-top" @click="$noMultipleClicks(btnSubmit)">提 交</button>
      </view>
    </form>
  </view>
</template>

<script setup>
import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { setperm } from "@/api/business/zhxf/messagePush/index.js";

const useStore = useStores();

const { proxy } = getCurrentInstance();

const data = reactive({
  noClick: true,
  flag: false,
  getData: {},
  checkedValue: [],
  checkbox: [
    {
      value: "m1",
      checked: false,
      title: "火警报警",
    },
    {
      value: "m2",
      checked: false,
      title: "火警故障",
    },
    {
      value: "m3",
      checked: false,
      title: "水压越线",
    },
    {
      value: "m4",
      checked: false,
      title: "开关变化",
    },
    {
      value: "m5",
      checked: false,
      title: "设备离线",
    },
    {
      value: "m6",
      checked: false,
      title: "烟感报警",
    },
    {
      value: "m7",
      checked: false,
      title: "电气火灾",
    },
    {
      value: "m8",
      checked: false,
      title: "视频报警",
    },
    {
      value: "m9",
      checked: false,
      title: "电梯监测",
    },
    {
      value: "m10",
      checked: false,
      title: "井盖监测",
    },
  ],
});

const { noClick, flag, getData, checkedValue, checkbox } = toRefs(data);

function CheckboxChange(e) {
  flag.value = true;
  var items = checkbox.value,
    values = e.detail.value;
  checkedValue.value = values;
  // console.log(values)

  // console.log('点击复选框时checkedValue.value')
  // console.log(checkedValue.value)
  for (var i = 0, lenI = items.length; i < lenI; ++i) {
    items[i].checked = false;
    for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
      if (items[i].value == values[j]) {
        items[i].checked = true;
        break;
      }
    }
  }
}

// 回显数据请求
function getCheckList(params = {}) {
  setperm(params).then((res) => {
    getData.value = res.data[0];

    // 遍历checkbox数组对象
    for (let i = 0; i < checkbox.value.length; i++) {
      //判断value是否存在于返回对象中.存在的话checked重新赋值
      if (getData.value.hasOwnProperty(checkbox.value[i].value)) {
        // console.log(checkbox.value[i].value)
        checkbox.value[i].checked = true;
      }
    }
  });
}

//提交
async function btnSubmit() {
  // 提交验证
  
  let mingParams = {};
  if (!flag.value) {
    //不点击默认传参
    var obgj = getData.value;
    console.log("不点击默认传参obgj");
    console.log(obgj);
    var arr = [];
    for (var key in obgj) {
      console.log(key);
      console.log(obgj[key]);
      arr.push([key][0]);
    }
    arr.map((e) => {
      mingParams[e] = true;
    });
  } else {
    //点击复选框后传参
    var arr = checkedValue.value;
    console.log("自由选中复选框后传参arr");
    console.log(arr);

    arr.map((e) => {
      mingParams[e] = true;
    });
    console.log("mingParams");
    console.log(mingParams);
  }

  setperm(params).then((res) => {
    if (!res.flag) {
      uni.showToast({
        title: "添加失败",
        icon: "none",
      });
    } else {
      uni.showToast({
        title: "添加成功",
      });
      setTimeout(() => {
        uni.switchTab({
          url: "/pages/setting/setting",
        });
      }, 1000);
    }
  });
}

onLoad((option) => {
  getCheckList();
});

onReady(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss">
.checkItems {
  width: 50%;
  display: inline-block;
  text-align: center;
  margin-bottom: 40rpx;

  .title {
    display: inline-block;
    margin-left: 10rpx;
  }
}
</style>