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

113 lines
2.6 KiB
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.CHECK_NO : item.NAME"
:name="type === 'assignments' ? item.CHECK_NO : 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/index.js'
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>