Files
jnpf_app/components/Jnpf/OrganizeSelect/index.vue

132 lines
3.5 KiB
Vue
Raw Normal View History

2026-01-04 11:09:06 +08:00
<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"
2026-01-19 17:34:15 +08:00
@confirm="handleConfirm" :selectType="selectType" :type="type" :ableIds="ableIds" />
2026-01-04 11:09:06 +08:00
</view>
</template>
<script>
import SelectPopup from './SelectPopup';
import selectBox from '@/components/selectBox'
2026-01-19 17:34:15 +08:00
// 移除接口导入:不再需要 getOrgSelectedList
// import { getOrgSelectedList } from '@/api/common'
2026-01-04 11:09:06 +08:00
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'
},
2026-01-19 17:34:15 +08:00
type: {
type: String,
default: 'all'
},
2026-01-04 11:09:06 +08:00
ableIds: {
type: Array,
default: () => []
2026-01-19 17:34:15 +08:00
},
innerSelectedData: {
type: Array,
default: () => []
2026-01-04 11:09:06 +08:00
}
},
data() {
return {
selectShow: false,
innerValue: '',
selectedData: [],
}
},
watch: {
modelValue: {
2026-01-19 17:34:15 +08:00
handler(val) {
this.setDefault(val) // 传入modelValue直接处理赋值
2026-01-04 11:09:06 +08:00
},
immediate: true
},
2026-01-19 17:34:15 +08:00
innerSelectedData: {
handler(val) {
if(val.length){
const data = val[0]
this.selectedData = val
this.setDefault(data['id'])
}
},
immediate: true,
deep: true
},
2026-01-04 11:09:06 +08:00
},
methods: {
2026-01-19 17:34:15 +08:00
// 重构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 = '';
}
2026-01-04 11:09:06 +08:00
},
setNullValue() {
this.innerValue = '';
this.selectedData = [];
},
openSelect() {
if (this.disabled) return
this.selectShow = true
},
2026-01-19 17:34:15 +08:00
// 核心修改:确认选择时,直接用弹窗返回的原始数据赋值
2026-01-04 11:09:06 +08:00
handleConfirm(selectedData, selectedIds) {
2026-01-19 17:34:15 +08:00
// 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]')
2026-01-04 11:09:06 +08:00
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)
}
2026-01-19 17:34:15 +08:00
// 4. 关闭弹窗
this.selectShow = false;
2026-01-04 11:09:06 +08:00
},
handleClose() {
this.selectShow = false
}
}
}
</script>