132 lines
3.5 KiB
Vue
132 lines
3.5 KiB
Vue
<template>
|
||
<view class="jnpf-organize-select w-full">
|
||
<selectBox v-model="innerValue" :placeholder="placeholder" @openSelect="openSelect" :select-open="selectShow"
|
||
:disabled="disabled" />
|
||
<SelectPopup v-model="selectShow" :multiple="multiple" :selectedData="selectedData" @close="handleClose"
|
||
@confirm="handleConfirm" :selectType="selectType" :type="type" :ableIds="ableIds" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import SelectPopup from './SelectPopup';
|
||
import selectBox from '@/components/selectBox'
|
||
// 移除接口导入：不再需要 getOrgSelectedList
|
||
// import { getOrgSelectedList } from '@/api/common'
|
||
|
||
export default {
|
||
name: 'jnpf-organize-select',
|
||
components: {
|
||
SelectPopup,
|
||
selectBox
|
||
},
|
||
props: {
|
||
modelValue: {
|
||
default: ''
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择'
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
selectType: {
|
||
type: String,
|
||
default: 'all'
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'all'
|
||
},
|
||
ableIds: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
innerSelectedData: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
selectShow: false,
|
||
innerValue: '',
|
||
selectedData: [],
|
||
}
|
||
},
|
||
watch: {
|
||
modelValue: {
|
||
handler(val) {
|
||
this.setDefault(val) // 传入modelValue，直接处理赋值
|
||
},
|
||
immediate: true
|
||
},
|
||
innerSelectedData: {
|
||
handler(val) {
|
||
if(val.length){
|
||
const data = val[0]
|
||
this.selectedData = val
|
||
this.setDefault(data['id'])
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
},
|
||
methods: {
|
||
// 重构setDefault：不再调用接口，直接处理赋值
|
||
setDefault(val) {
|
||
if (!val || !val.length) {
|
||
return this.setNullValue();
|
||
}
|
||
// 场景1：父组件传入初始值（modelValue）时，直接匹配已选数据赋值
|
||
// 如果没有初始选中数据，innerValue为空即可，无需请求接口
|
||
// 重点：这里不再调用getOrgSelectedList，直接用已有的selectedData或空值
|
||
|
||
if (this.selectedData.length > 0) {
|
||
// 有已选数据时，直接拼接名称
|
||
this.innerValue = this.selectedData.map(o => o.deptName || o.orgNameTree).join();
|
||
} else {
|
||
// 无已选数据时，若modelValue是ID，暂时显示空（或根据需要处理）
|
||
this.innerValue = '';
|
||
}
|
||
},
|
||
setNullValue() {
|
||
this.innerValue = '';
|
||
this.selectedData = [];
|
||
},
|
||
openSelect() {
|
||
if (this.disabled) return
|
||
this.selectShow = true
|
||
},
|
||
// 核心修改：确认选择时，直接用弹窗返回的原始数据赋值
|
||
handleConfirm(selectedData, selectedIds) {
|
||
// 1. 保存选中的原始数据
|
||
this.selectedData = selectedData;
|
||
// 2. 直接拼接名称到显示框（innerValue），无需接口
|
||
this.innerValue = selectedData.map(o => o.deptName || o.orgNameTree).join();
|
||
// 3. 向父组件传递选中值（保持原有逻辑）
|
||
console.log(this.multiple,'this.multiple')
|
||
console.log(selectedData[0],'selectedData[0]')
|
||
console.log(selectedIds[0],'selectedIds[0]')
|
||
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)
|
||
}
|
||
// 4. 关闭弹窗
|
||
this.selectShow = false;
|
||
},
|
||
handleClose() {
|
||
this.selectShow = false
|
||
}
|
||
}
|
||
}
|
||
</script> |