slaj/gw-ui/src/components/OrgSelect/index.vue

<template>
  <el-form-item :label="label" :prop="prop"
    :rules="required ? [{ required: true, message: label + '不能为空', trigger: 'change' }] : undefined">
    <div style="width: 100%;display:flex;gap:8px">
      <el-select v-model="currentScope" placeholder="范围" style="width:110px;flex-shrink:0" size="default"
        v-if="showScope">
        <el-option label="全部" value="all" />
        <el-option label="水利机构" value="water" />
        <el-option label="非水利机构" value="uwat" />
      </el-select>
      <el-select :model-value="modelValue" filterable remote clearable reserve-keyword :remote-method="remoteSearch"
        :loading="loading" :disabled="disabled" :placeholder="placeholder" style="width: 100%"
        @update:model-value="handleChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </el-form-item>
</template>

<script setup>
import { ref, watch } from 'vue'
import { listAttOrgBase, getAttOrgBase } from '@/api/slaj/hidd'
import { listAttOrgUwatBase, getAttOrgUwatBase } from '@/api/system/attOrgUwatBase'

const props = defineProps({
  modelValue: { type: String, default: undefined },
  label: { type: String, default: '组织机构' },
  prop: { type: String, default: undefined },
  placeholder: { type: String, default: '请输入机构名称搜索' },
  required: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  excludeGuid: { type: String, default: undefined },
  // 范围筛选：all=全部, water=水利机构, uwat=非水利机构
  scope: { type: String, default: 'all' },
  // 是否显示范围选择器
  showScope: { type: Boolean, default: false }
})

const emit = defineEmits(['update:modelValue'])

const options = ref([])
const loading = ref(false)
const currentScope = ref(props.scope)

// scope 变化时清空已选值
watch(currentScope, () => {
  emit('update:modelValue', undefined)
  options.value = []
})

function normalize(rows) {
  return (rows || [])
    .filter(r => !props.excludeGuid || r.guid !== props.excludeGuid)
    .map(r => ({ value: r.guid, label: r.orgName }))
}

function remoteSearch(query) {
  if (!query) { options.value = []; return }
  loading.value = true
  let req
  if (currentScope.value === 'uwat') {
    req = listAttOrgUwatBase({ orgName: query, pageNum: 1, pageSize: 20 })
      .then(res => { options.value = (res.rows || []).filter(r => !props.excludeGuid || r.guid !== props.excludeGuid).map(r => ({ value: r.guid, label: r.orgName })) })
  } else {
    const params = { orgName: query, pageNum: 1, pageSize: 20 }
    if (currentScope.value === 'water') params.orgType = '1'
    req = listAttOrgBase(params).then(res => { options.value = normalize(res.rows) })
  }
  req.finally(() => { loading.value = false })
}

function handleChange(val) { emit('update:modelValue', val) }

// 编辑回显
watch(() => props.modelValue, (val) => {
  if (val && !options.value.some(o => o.value === val)) {
    const fetch = currentScope.value === 'uwat' ? getAttOrgUwatBase(val) : getAttOrgBase(val)
    fetch.then(res => {
      const d = res.data
      if (d && d.guid && (!props.excludeGuid || d.guid !== props.excludeGuid)) {
        options.value = [{ value: d.guid, label: d.orgName }, ...options.value]
      }
    }).catch(() => { })
  }
}, { immediate: true })
</script>