114 lines
2.7 KiB
Vue
114 lines
2.7 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) {
|
||
|
|
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>
|