uniapp2/pages/messagePush/messagePush.vue

<template>
	<view class="padding-sm messagePush" style="padding-bottom:150rpx">
		<form action="">
			<checkbox-group class="block" @change="CheckboxChange" style="height: calc(100vh - 200rpx);
    overflow: scroll">
				<view class="margin-top  ">
					<view class="flex align-left checkItems" v-for="(item,index) in checkbox">
						<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 padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(pushSubmit)">提 交 </button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				flag: false,
				getData: {},
				checkedValue: [],
				checkbox: [{
						value: 'm1',
						checked: false,
						title: '开关1'
					},
					{
						value: 'm2',
						checked: false,
						title: '开关2'
					},
					{
						value: 'm3',
						checked: false,
						title: '开关3'
					},
					{
						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: '低压'
					},
					{
						value: 'm11',
						checked: false,
						title: '电流越限'
					},
					{
						value: '12',
						checked: false,
						title: '过流跳闸'
					},
					{
						value: 'm13',
						checked: false,
						title: '母线停电'
					},
					{
						value: 'm14',
						checked: false,
						title: '剩余电流越限'
					},
					{
						value: 'm15',
						checked: false,
						title: '测温点1超温'
					},
					
					{
						value: 'm16',
						checked: false,
						title: '测温点2超温'
					},
					{
						value: 'm17',
						checked: false,
						title: '测温点3超温'
					},
					{
						value: 'm18',
						checked: false,
						title: '测温点4超温'
					},
					{
						value: 'm19',
						checked: false,
						title: '环境温度越限'
					},
					{
						value: 'm20',
						checked: false,
						title: 'A相燃弧'
					},
					
					{
						value: 'm21',
						checked: false,
						title: 'B相燃弧'
					},
					{
						value: 'm22',
						checked: false,
						title: 'C相燃弧'
					},
					
					{
						value: 'm23',
						checked: false,
						title: '电压谐波越限'
					},
					{
						value: 'm24',
						checked: false,
						title: '电流谐波越限'
					},
					{
						value: 'm25',
						checked: false,
						title: '有功需量超限'
					},
					{
						value: 'm26',
						checked: false,
						title: '视在需量超限'
					},
					
					{
						value: 'm27',
						checked: false,
						title: '测量通道故障'
					},
					{
						value: 'm28',
						checked: false,
						title: '设备异常	'
					},
					{
						value: 'm29',
						checked: false,
						title: '消音'
					},
					{
						value: 'm30',
						checked: false,
						title: '开出1'
					},
					{
						value: 'm31',
						checked: false,
						title: '开出2'
					},
					
				],

			}
		},
		onLoad: function(option) {
			this.getCheckList();
		},
		methods: {
			CheckboxChange(e) {
				this.flag = true;
				var items = this.checkbox,
					values = e.detail.value;
				this.checkedValue = values;

				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
						}
					}
				}
			},

			// 回显数据请求
			async getCheckList(params = {}) {
				const res = await this.$myRequest({
					url: 'PushConfig/setperm',
					data: params,
					showLoading: true
				})
				console.log(res.data.data)
				// console.log(JSON.parse(res.data.data))
				this.getData = res.data.data[0];

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

			//提交
			async pushSubmit() {

				let mingParams = {};
				
				if (!this.flag) {
					//不点击默认传参
					var obgj = this.getData;
					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 = this.checkedValue;
					console.log('自由选中复选框后传参arr')
					console.log(arr)
					arr.map((e) => {
						mingParams[e] = true;
					});
					console.log('mingParams')
					console.log(mingParams)
				}
				
				console.log(this.getData)
				console.log(mingParams)
				
				//验证是否有变动
				let newValue=[];
				let oldValue=[];
				for(var key in mingParams){
					newValue.push(key)
				}
				for(var key in this.getData){
					oldValue.push(key)
				}
				if(oldValue.toString()==newValue.toString()){
					uni.showToast({
						title: "无修改!",
						icon: "none"
					});
					return
				}
				
				//验证是否为空
				if(Object.keys(mingParams).length==0){
					uni.showToast({
						title: "请至少选择一条消息",
						icon: "none"
					});
						return
				}

				let res = await this.PushSettings(mingParams);

				if (!res.data.flag) {
					uni.showToast({
						title: "添加失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "添加成功",
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/setting/setting',
						});
					}, 1000);
				}
			},
			PushSettings(params = {}) {
				return this.$myRequest({
					url: 'PushConfig/setperm',
					data: params
				})
			},
		}
	}
</script>

<style lang="scss">
	.checkItems {
		width: 50%;
		display: inline-block;
		text-align: left;
		margin-bottom: 30rpx;
		.title {
			display: inline-block;
			margin-left: 10rpx;
		}
	}
</style>