cxc-szcx-uniapp/uni_modules/trq-depart-select

trq-depart-select

组件说明：单位选择组件

一、组件概述

此组件为基于 UniApp 和 Vue 3 构建的单位选择组件，借助 uni-data-picker 组件实现单位的选择功能。组件支持依据传入的 returnCodeOrID 属性，返回单位的 orgCode 或者 id。组件会从后端获取单位列表数据，并在用户选择单位时触发 change 事件通知父组件。

二、组件使用的技术栈

• 框架：Vue 3（使用组合式 API）
• 状态管理：@/store （推测使用了 Vuex 或 Pinia 进行状态管理）
• UI 组件：uni-data-picker （用于展示单位选择器）
• 请求库：自定义的 API 请求函数（如 queryMyDeptTreeListApi）

三、组件输入（Props）

属性名	类型	是否必填	默认值	说明
returnCodeOrID	String	否	"orgCode"	决定返回单位的 orgCode 还是 id

四、组件输出（Emits）

事件名	说明	参数
change	当用户选择单位时触发，用于通知父组件选择结果	选中单位的 orgCode 或 id，以及单位的全部信息对象

五、组件内部数据

变量名	类型	说明
departList	Ref	存储从后端获取的单位列表数据
selectDepartID	Ref	当前选中的单位 ID
selectDepartIDS	Ref	选中的级联单位 ID 数组
tempSelectDepartID	Ref	临时选择的单位 ID
depart	Ref	对 uni-data-picker 组件的引用
departInfo	Ref	选中单位的全部信息

六、组件方法

1. getDepartList

• 功能：异步从后端获取单位列表数据，并将其赋值给 departList。
• 实现逻辑：
  • 调用 queryMyDeptTreeListApi 函数进行数据请求。
  • 若请求成功，将响应数据的 result 字段赋值给 departList.value。
  • 若请求失败，在控制台输出错误信息。

2. onnodeclick

• 功能：处理用户点击单位节点的事件，更新 departInfo 和 tempSelectDepartID。
• 实现逻辑：
  • 将点击的单位信息赋值给 departInfo.value。
  • 根据 props.returnCodeOrID 的值，将点击单位的 orgCode 或 value 赋值给 tempSelectDepartID.value。

3. onchange

• 功能：处理 uni-data-picker 的 change 事件，更新 selectDepartID。
• 实现逻辑：将选择的单位 ID 赋值给 selectDepartID.value。

4. onpopupclosed

• 功能：处理 uni-data-picker 弹出框关闭的事件，将 tempSelectDepartID 的值赋给 selectDepartID。
• 实现逻辑：将 tempSelectDepartID.value 赋值给 selectDepartID.value。

5. 监听 tempSelectDepartID 的变化

• 功能：当 tempSelectDepartID 发生变化时，触发 change 事件通知父组件。
• 实现逻辑：
  • 使用 watch 函数监听 tempSelectDepartID 的变化。
  • 当变化发生时，触发 change 事件，将 tempSelectDepartID 的新值和 departInfo 作为参数传递。
  • immediate: true 表示在组件初始化时就会执行一次监听回调。
  • deep: true 表示深度监听，确保 tempSelectDepartID 内部属性变化也能被捕获。

七、组件生命周期钩子

onLoad

• 功能：在页面加载时调用 getDepartList 函数，从后端获取单位列表数据。

八、样式说明

.no-wrap-picker::v-deep .uni-data-picker-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

• 此样式规则用于强制 uni-data-picker 的选项不换行，超出部分隐藏并显示省略号。

九、使用示例

<template>
  <div>
    <UnitSelector
      :returnCodeOrID="'id'"
      @change="handleUnitChange"
    />
  </div>
</template>

<script setup>
import UnitSelector from './UnitSelector.vue';

const handleUnitChange = (selectedId, unitInfo) => {
  console.log('选中的单位 ID:', selectedId);
  console.log('选中单位的信息:', unitInfo);
};
</script>

十、注意事项

• 确保 queryMyDeptTreeListApi 函数能正确获取后端数据，且响应数据的格式符合 { success: true, result: [...] }。
• 由于使用了 watch 的 deep: true 选项，在 tempSelectDepartID 内部元素发生变化时也会触发监听回调，可能会影响性能，需注意。
• 代码中注释掉的部分（如 onnodeclick 和 onpopupclosed 中触发 change 事件的代码）可能是之前的实现逻辑，若需要可根据实际情况恢复使用。