# 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<Array> | 存储从后端获取的单位列表数据 |
| `selectDepartID` | Ref<String> | 当前选中的单位 ID |
| `selectDepartIDS` | Ref<Array> | 选中的级联单位 ID 数组 |
| `tempSelectDepartID` | Ref<String> | 临时选择的单位 ID |
| `depart` | Ref<Object> | 对 `uni-data-picker` 组件的引用 |
| `departInfo` | Ref<Object> | 选中单位的全部信息 |

#### 六、组件方法

##### 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` 函数，从后端获取单位列表数据。

#### 八、样式说明
```css
.no-wrap-picker::v-deep .uni-data-picker-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
- 此样式规则用于强制 `uni-data-picker` 的选项不换行，超出部分隐藏并显示省略号。

#### 九、使用示例
```vue
<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` 事件的代码）可能是之前的实现逻辑，若需要可根据实际情况恢复使用。