|
|
@@ -0,0 +1,75 @@
|
|
|
+# OA 表单【人员】弹窗列表对齐方案 C
|
|
|
+
|
|
|
+## 背景
|
|
|
+
|
|
|
+发起审批表单中，自定义控件【人员】（`OaPersonSelect`）弹出的选择列表，与【审批流程】区域「选择审批人 / 选择抄送人」（`OaFlowPreview` 内弹窗）视觉不一致。权威对照：`docs/oa-start-picker-list-style-demo.html` **方案 C · 分割线行表**，以及已落地的流程弹窗样式。
|
|
|
+
|
|
|
+## 目标
|
|
|
+
|
|
|
+- 【人员】弹窗列表与流程弹窗列表视觉一致：方案 C。
|
|
|
+- 行内文案：姓名 + 副信息（手机优先，否则工号）**同一行**。
|
|
|
+
|
|
|
+## 非目标
|
|
|
+
|
|
|
+- 不抽公共弹窗组件。
|
|
|
+- 不改部门 / 岗位选择弹窗（除非其 CSS 已共享且无需改模板）。
|
|
|
+- 不改 `OaFlowPreview` 流程弹窗行为或样式（以其为参照基线）。
|
|
|
+
|
|
|
+## 设计
|
|
|
+
|
|
|
+### 视觉（方案 C）
|
|
|
+
|
|
|
+- 白底连续行；行间发丝分割线 `#f1f5f9`。
|
|
|
+- 无圆角卡片间距；`padding: 12px 16px`。
|
|
|
+- 选中：整行浅绿底 `var(--brand-green-soft, #ecfdf5)`；姓名色 `#15803d`。
|
|
|
+- 左侧 checkbox / radio；勾选区与文案间距约 10px。
|
|
|
+
|
|
|
+上述行外观已由 `mobile-oa-h5/src/styles/oa-form.css` 中 `.oa-pick__list` 落地；本次以**模板结构**对齐流程弹窗为主。
|
|
|
+
|
|
|
+### 列表项结构
|
|
|
+
|
|
|
+对齐 `OaFlowPreview` 弹窗：
|
|
|
+
|
|
|
+```vue
|
|
|
+<van-cell clickable @click="...">
|
|
|
+ <template #icon>
|
|
|
+ <van-checkbox|van-radio class="oa-pick__check" :name="..." @click.stop />
|
|
|
+ </template>
|
|
|
+ <template #title>
|
|
|
+ <span class="oa-pick__name">{{ 姓名 }}</span>
|
|
|
+ <span v-if="副信息" class="oa-pick__sub">{{ 副信息 }}</span>
|
|
|
+ </template>
|
|
|
+</van-cell>
|
|
|
+```
|
|
|
+
|
|
|
+- 去掉 `:title` / `:label` 双行展示。
|
|
|
+- 多选、单选两套列表均改。
|
|
|
+
|
|
|
+### 数据与副信息
|
|
|
+
|
|
|
+在 `loadUsers` 映射中：
|
|
|
+
|
|
|
+- `label`：昵称 / 工号 / id（现有逻辑）。
|
|
|
+- `sub`：有 `phoneNo` 用手机号，否则有 `userNo` 且与姓名不同时用工号，否则空。
|
|
|
+- 搜索仍覆盖姓名、工号、id；若有手机号一并纳入过滤。
|
|
|
+
|
|
|
+### 样式补充
|
|
|
+
|
|
|
+在 `oa-form.css`（与现有 `.oa-pick__list` 同区）增加：
|
|
|
+
|
|
|
+- `.oa-pick__name`：14px，主文字色。
|
|
|
+- `.oa-pick__sub`：`margin-left: 8px`，12px，muted（对齐 `.oa-flow-picker__phone`）。
|
|
|
+- 选中态：优先让 `.oa-pick__name` 变深绿（与流程弹窗一致）；可保留对 `.van-cell__title` 的现有规则作为兜底。
|
|
|
+
|
|
|
+## 验收
|
|
|
+
|
|
|
+1. 打开含【人员】字段的发起审批表单，点开选择弹窗。
|
|
|
+2. 列表为白底分割线行；选中后行底浅绿、姓名变深绿。
|
|
|
+3. 姓名与副信息同一行；有手机显示手机，否则工号。
|
|
|
+4. 与同页「选择审批人 / 抄送人」弹窗并排对比，行结构与方案 C 观感一致。
|
|
|
+5. 多选 / 单选模式均正常勾选与确定回填。
|
|
|
+
|
|
|
+## 涉及文件
|
|
|
+
|
|
|
+- 修改：`mobile-oa-h5/src/oa/components/OaPersonSelect.vue`
|
|
|
+- 修改：`mobile-oa-h5/src/styles/oa-form.css`（仅补充 name/sub 同行样式与选中态）
|
