116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
<template>
|
|
<view class="jnpf-user-select w-full">
|
|
<selectBox v-model="innerValue" :placeholder="placeholder" @openSelect="openSelect"
|
|
:select-open="selectShow" :disabled="disabled" v-if="isInput" />
|
|
<SelectPopup v-model="selectShow" :multiple="multiple" :selectedData="selectedData" @close="handleClose"
|
|
@confirm="handleConfirm" :selectType="selectType" :ableIds="realAbleIds" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SelectPopup from './SelectPopup';
|
|
import selectBox from '@/components/selectBox'
|
|
import {
|
|
getUserInfoList
|
|
} from '@/api/common'
|
|
export default {
|
|
name: 'jnpf-user-select',
|
|
components: {
|
|
SelectPopup,
|
|
selectBox
|
|
},
|
|
props: {
|
|
modelValue: {
|
|
default: ''
|
|
},
|
|
isInput: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择'
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
selectType: {
|
|
type: String,
|
|
default: 'all'
|
|
},
|
|
ableIds: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
ableRelationIds: {
|
|
type: [Array, String],
|
|
default: () => []
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
selectShow: false,
|
|
innerValue: '',
|
|
selectedData: [],
|
|
realAbleIds: []
|
|
}
|
|
},
|
|
watch: {
|
|
// modelValue: {
|
|
// handler() {
|
|
// this.setDefault()
|
|
// },
|
|
// immediate: true
|
|
// },
|
|
},
|
|
methods: {
|
|
// setDefault() {
|
|
// if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
|
|
// const ids = this.multiple ? this.modelValue : [this.modelValue];
|
|
// getUserInfoList(ids).then((res) => {
|
|
// if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
|
|
// const selectedData = res.data.list || []
|
|
// this.selectedData = selectedData
|
|
// this.innerValue = this.selectedData.map(o => o.fullName).join();
|
|
// });
|
|
// },
|
|
setNullValue() {
|
|
this.innerValue = '';
|
|
this.selectedData = [];
|
|
},
|
|
openSelect() {
|
|
if (this.disabled) return
|
|
if (this.selectType === 'custom') {
|
|
this.realAbleIds = this.ableIds
|
|
} else if (this.selectType != 'all') {
|
|
const suffix = '--' + this.selectType;
|
|
let ableIds = !this.ableRelationIds ? [] : Array.isArray(this.ableRelationIds) ? this
|
|
.ableRelationIds : [this.ableRelationIds];
|
|
this.realAbleIds = ableIds.map(o => o + suffix)
|
|
} else {
|
|
this.realAbleIds = []
|
|
}
|
|
this.selectShow = true
|
|
},
|
|
handleConfirm(selectedData, selectedIds) {
|
|
this.selectedData = selectedData;
|
|
this.innerValue = selectedData.map(o => o.nickName).join();
|
|
if (!this.multiple) {
|
|
this.$emit('update:modelValue', selectedIds[0])
|
|
this.$emit('change', selectedIds[0], selectedData[0])
|
|
} else {
|
|
this.$emit('update:modelValue', selectedIds)
|
|
this.$emit('change', selectedIds, selectedData)
|
|
}
|
|
},
|
|
handleClose() {
|
|
this.selectShow = false
|
|
}
|
|
}
|
|
}
|
|
</script> |