newEdition/pages/center/RuleEditing/RuleEditing.vue

<template>
	<view class="pages">
		<!-- 待处理 -->
		<view class="grop">
			<view class="title">
				<image class="title-icon" src="https://static.quhouse.com/bc2ec951ad9a47e5bf58f2829926e143.png"
					mode="" />
				待处理
			</view>
			<u-checkbox-group class="grop-box" @change="checkboxGroupChange($event, 'stayPendingProcessingArr')">
				<block v-for="(item, index) in stayPendingProcessingArr" :key="index">
					<u-checkbox class="grop-box-item" v-model="item.checked" :name="item.title">{{item.title}}
					</u-checkbox>
				</block>
			</u-checkbox-group>
		</view>

		<!-- 简报指标 -->
		<view class="grop">
			<view class="title">
				<image class="title-icon" src="https://static.quhouse.com/bc2ec951ad9a47e5bf58f2829926e143.png"
					mode="" />
				简报指标
			</view>
			<u-checkbox-group class="grop-box" @change="checkboxGroupChange($event, 'ReceptionBriefingArr')">
				<block v-for="(item, index) in ReceptionBriefingArr" :key="index">
					<u-checkbox class="grop-box-item" v-model="item.checked" :name="item.title">{{item.title}}
					</u-checkbox>
				</block>
			</u-checkbox-group>
		</view>

		<!-- 指标排名 -->
		<view class="grop">
			<view class="title">
				<image class="title-icon" src="https://static.quhouse.com/bc2ec951ad9a47e5bf58f2829926e143.png"
					mode="" />
				指标排名
			</view>
			<u-checkbox-group class="grop-box" :max="groupMax" @change="checkboxGroupChange($event, 'IndexRankingArr')">
				<block v-for="(item, index) in IndexRankingArr" :key="index">
					<u-checkbox class="grop-box-item" v-model="item.checked" :name="item.title">{{item.title}}
					</u-checkbox>
				</block>
			</u-checkbox-group>
		</view>

		<!-- 指标趋势 -->
		<view class="grop">
			<view class="title">
				<image class="title-icon" src="https://static.quhouse.com/bc2ec951ad9a47e5bf58f2829926e143.png"
					mode="" />
				指标趋势
			</view>
			<u-checkbox-group class="grop-box" :max="groupMax"
				@change="checkboxGroupChange($event, 'IndicatorTrendsArr')">
				<block v-for="(item, index) in IndicatorTrendsArr" :key="index">
					<u-checkbox class="grop-box-item" v-model="item.checked" :name="item.title">{{item.title}}
					</u-checkbox>
				</block>
			</u-checkbox-group>
		</view>


		<!-- 指标分布 -->
		<view class="grop">
			<view class="title">
				<image class="title-icon" src="https://static.quhouse.com/bc2ec951ad9a47e5bf58f2829926e143.png"
					mode="" />
				指标分布
			</view>
			<u-checkbox-group class="grop-box" :max="groupMax"
				@change="checkboxGroupChange($event, 'IndicatorDistributionArr')">
				<block v-for="(item, index) in IndicatorDistributionArr" :key="index">
					<u-checkbox class="grop-box-item" v-model="item.checked" :name="item.title">{{item.title}}
					</u-checkbox>
				</block>
			</u-checkbox-group>
		</view>


		<view class="save-btn" @click="saveBiRule">
			保存
		</view>
	</view>
</template>

<script>
	var util = require("@/utils/util.js");
	import * as allArrList from '../dataBoard/arr.js'
	export default {
		data() {
			return {
				stayPendingProcessingArr: allArrList.stayPendingProcessingArr, // 待处理
				ReceptionBriefingArr: allArrList.ReceptionBriefingArr, // 接待简报
				IndexRankingArr: allArrList.IndexRankingArr, // 排名
				IndicatorTrendsArr: allArrList.IndicatorTrendsArr, // 排名
				IndicatorDistributionArr: allArrList.IndicatorDistributionArr, // 排名
				needFormatArr: ['stayPendingProcessingArr', 'ReceptionBriefingArr', 'IndexRankingArr',
					'IndicatorTrendsArr', 'IndicatorDistributionArr'
				], // 需要格式化的数组
				groupMax: 5, // 可选择的最大数量
			}
		},

		onLoad() {
			this.biDictionary()
		},

		methods: {
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e, params) {},

			// 字典
			biDictionary() {
				this.$u.get('/customer/biDict').then(res => {
					console.log(res)
					if (res) {
						this.needFormatArr.forEach((item, index) => {
							this[item] = this[item].map(it => {
								return {
									...it,
									indexType: index
								}
							})

							let arr1 = res.filter(arr => arr.indexType == index)
							arr1.map(ie => {
								let objs = this[item].findIndex(obj => {
									return obj.title == ie.indexName && obj.indexType == ie
										.indexType
								}) || 0
								this[item][objs].id = ie.id || ''
							})
						})
						this.getFindBiByAccountId()
					}
				})
			},

			// 回显
			getFindBiByAccountId() {
				this.$u.get('/customer/findBiByAccountId').then(res => {
					console.log(res, 'getFindBiByAccountId')
					if (res) {
						let arr = [...res.index1.split(','), ...res.index2.split(','), ...res.index3.split(','), ...res.index4.split(','), ...res.index5.split(',')]
						console.log(arr)
						this.needFormatArr.forEach(item => {
							this[item].forEach(items => {
								let obj = arr.find(obj => obj == items.id)
								if (obj) items.checked = true
								else items.checked = false
							})
						})
					}
				})
			},

			// bi看板指标保存
			saveBiRule() {
				const params = {
					index1: '', // 待处理
					index2: '', // 简报指标
					index3: '', // 指标排名
					index4: '', // 指标趋势
					index5: '', // 指标分布
					accountId: uni.getStorageSync('weapp_session_userInfo_data').accountId || '', // 用户id
				}

				this.needFormatArr.forEach((ite, index) => {
					let arr = this[ite].filter(obj => obj.checked).map(item => {
						return item.id
					})
					params['index' + (index + 1)] = arr.join((',')) || ''
				})
				console.log(params)
				// this.stayPendingProcessingArr
				this.$u.post('/customer/bisave', params).then(res => {
					console.log(res)
					util.showNone("提交成功！");
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		width: 100vw;
		min-height: 100vh;
		background: #f2f2f2;
		display: flex;
		flex-direction: column;

		.grop {
			margin: 20rpx 0 0 0;
			padding: 20rpx;
			width: 100%;
			background: #fff;


			.title {
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;

				.title-icon {
					width: 12rpx;
					height: 20rpx;
					margin-right: 18rpx;
				}
			}

			.grop-box {
				/deep/.u-checkbox-group {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 20rpx;
				}
			}
		}

		.save-btn {
			position: sticky;
			bottom: 0;
			margin: 20rpx 0 0 0;
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 38rpx;
			color: #fff;
			background: #1890FF;
		}
	}
</style>