廖德云
9556ecb346
# Conflicts: # pages/views/shengchan/ribaoshuju/rbsjLsxq.vue # pages/views/shengchan/ribaoshuju/trqRbsj.vue # uni_modules/cxc-szcx-dateRangeSelect/components/cxc-szcx-dateRangeSelect/cxc-szcx-dateRangeSelect.vue
106 lines
4.6 KiB
Markdown
106 lines
4.6 KiB
Markdown
# 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` 事件的代码）可能是之前的实现逻辑，若需要可根据实际情况恢复使用。 |