qa-prevention-xgf-app/components/other-select/index.vue

<template>
	<u-popup :show="visible" mode="center">
		<scroll-view scroll-y style="width: 100vw;height: 100vh;">
			<view class="container">
				<u-checkbox-group v-model="selectValue" placement="column">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in list" :key="index"
						:label="type === 'assignments' ? item.TYPE_NAME : item.NAME"
						:name="type === 'assignments' ? item.TYPE_NAME : item.NAME">
					</u-checkbox>
				</u-checkbox-group>
				<view class="button_group_placeholder"></view>
				<view class="button_group">
					<u-button type="primary" text="确定" @click="determine" :customStyle="{width:'48%'}"></u-button>
					<u-button text="关闭" @click="close" :customStyle="{width:'48%'}"></u-button>
				</view>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	import {
		getOtherAssignmentsSelectList,
		getRiskIdentificationResultsSelectList
	} from '@/api'

	export default {
		props: {
			visible: {
				type: Boolean,
				required: true,
			},
			value: {
				type: String,
				required: true,
			},
			type: {
				type: String,
				required: true,
			}
		},
		data() {
			return {
				list: [],
				selectValue: [],
			}
		},
		watch: {
			visible: {
				handler(newValue) {
					if (newValue) {
            this.selectValue = this.value.split(',')
            this.getData()
          }
				},
				immediate: true
			}
		},
		methods: {
			async getData() {
				if (this.type === 'assignments') {
					const resData = await getOtherAssignmentsSelectList()
					this.list = resData.list
				} else if (this.type === 'identification') {
					const resData = await getRiskIdentificationResultsSelectList({
						vectors: JSON.stringify(['accidentType'])
					})
					this.list = resData.accidentType
				}
			},
			close() {
        this.selectValue = []
				this.$emit('update:visible', false)
			},
			determine() {
				// const value = []
				// for (let i = 0; i < this.selectValue.length; i++) {
				// 	if (this.value.indexOf(this.selectValue[i]) === -1) {
				// 		value.push(this.selectValue[i])
				// 	}
				// }
				// this.value && value.unshift(this.value)
				// const emitValue = value.join(',')
				const emitValue = this.selectValue.join(',')
				this.$emit('input', emitValue)
				this.close()
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30upx;

		.button_group_placeholder {
			height: 100upx;
			background-color: #fff;
		}

		.button_group {
			background-color: #fff;
			display: flex;
			position: fixed;
			bottom: 0;
			padding: 20upx 5%;
			width: 90%;
			left: 0;
			right: 0;
		}
	}
</style>