aiot-app/components/hr/HrPickerRow.vue

<template>
  <view class="hr-picker-row">
    <!-- 枚举单选：原生 selector（与「个人档案」页完全一致的外观与交互） -->
    <picker
      v-if="mode === 'selector'"
      mode="selector"
      :range="range"
      range-key="label"
      :value="currentIndex"
      :disabled="disabled"
      @change="onPickerChange"
    >
      <view class="hr-field" :class="[{ press: !disabled }, { 'is-disabled': disabled }]" :style="rowStyle">
        <text class="hr-label" :class="{ required: required }" :style="labelStyle">{{ label }}</text>
        <text :class="shownText ? 'hr-value' : 'hr-placeholder'">{{ shownText || emptyTip }}</text>
        <text v-if="!disabled" class="hr-arrow">›</text>
      </view>
    </picker>

    <!-- 层级选择：树形选择器（部门等，层级不限） -->
    <view v-else-if="mode === 'tree'" class="hr-field" :class="[{ press: !disabled }, { 'is-disabled': disabled }]" :style="rowStyle" @click="openTree">
      <text class="hr-label" :class="{ required: required }" :style="labelStyle">{{ label }}</text>
      <text :class="shownText ? 'hr-value' : 'hr-placeholder'">{{ shownText || emptyTip }}</text>
      <text v-if="!disabled" class="hr-arrow">›</text>
    </view>

    <!-- 自定义流程（如「先输关键字再选人」）：只渲染行，点击事件交给页面 -->
    <view v-else class="hr-field" :class="[{ press: !disabled }, { 'is-disabled': disabled }]" :style="rowStyle" @click="onCustomTap">
      <text class="hr-label" :class="{ required: required }" :style="labelStyle">{{ label }}</text>
      <text :class="shownText ? 'hr-value' : 'hr-placeholder'">{{ shownText || emptyTip }}</text>
      <text v-if="!disabled" class="hr-arrow">›</text>
    </view>

    <ba-tree-picker
      v-if="mode === 'tree'"
      ref="tree"
      :multiple="false"
      :localdata="tree"
      valueKey="id"
      textKey="name"
      childrenKey="children"
      :title="treeTitle || label"
      :border="true"
      confirm-color="#157a2c"
      switch-color="#157a2c"
      @select-change="onTreeSelect"
    />
  </view>
</template>

<script>
/**
 * HR 统一选择行（口径对齐「个人档案」页）：
 *   mode="selector"（默认）：原生 <picker mode="selector"> 底部滚轮，选项 [{ label, value }]
 *   mode="tree"：ba-tree-picker 树形选择（部门等不定层级），树节点 { id, name, children }
 *   mode="custom"：只渲染行并把点击抛给页面（用于「先输关键字再选人」这类自定义流程）
 * 只负责「选什么」，级联副作用由使用方在 @change 里处理。
 */
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";

export default {
  name: "HrPickerRow",
  components: { baTreePicker },
  props: {
    label: { type: String, default: "" },
    required: { type: Boolean, default: false },
    /** 当前值（枚举为主键/编码；树为节点 id） */
    value: { type: [String, Number], default: "" },
    /** 显示文本：不传则用 value */
    display: { type: String, default: "" },
    options: { type: Array, default: () => [] },
    placeholder: { type: String, default: "请选择" },
    /** 前置条件未满足时的提示（如「请先选择所属机构」）；**只在 disabled 时显示** */
    hint: { type: String, default: "" },
    disabled: { type: Boolean, default: false },
    /**
     * 行度量（内联样式下发，与宿主页面的 .field 保持一致）：
     * 各页 .field 的内边距 / 行高 / 标签宽并不相同，组件默认值只对个人档案页成立；
     * 用 prop 而不是 /deep/ 覆盖，规避 scoped CSS 作用不到子组件内部的问题。
     */
    rowMinHeight: { type: String, default: "96rpx" },
    rowPadding: { type: String, default: "" },
    labelWidth: { type: String, default: "190rpx" },
    /** mode="tree" 专用 */
    mode: { type: String, default: "selector" },
    tree: { type: Array, default: () => [] },
    treeTitle: { type: String, default: "" },
  },
  emits: ["change", "tap"],
  computed: {
    /** 兼容 [{label,value}]、[{name,id}]、["a","b"] 三种写法 */
    range() {
      return (this.options || []).map((item) => {
        if (item && typeof item === "object") {
          return {
            label: String(item.label != null ? item.label : item.name != null ? item.name : item.value),
            value: item.value != null ? item.value : item.id,
          };
        }
        return { label: String(item), value: item };
      });
    },
    /** 行内度量：只下发显式设置过的属性 */
    rowStyle() {
      const style = { "min-height": this.rowMinHeight };
      if (this.rowPadding) style.padding = this.rowPadding;
      return style;
    },
    labelStyle() {
      return { width: this.labelWidth };
    },
    shownText() {
      if (this.display) return this.display;
      return this.value === undefined || this.value === null || this.value === "" ? "" : String(this.value);
    },
    /**
     * 无值时的提示文案。
     * 注意：hint 是「前置条件未满足」的说明（如「请先选择所属机构」），
     * **只在禁用状态下显示**；前置条件已满足、只是还没选时，应显示通用占位「请选择」，
     * 否则会出现「已选好所属机构，目标部门却仍提示请先选择所属机构」的误导。
     */
    emptyTip() {
      if (this.disabled && this.hint) return this.hint;
      return this.placeholder;
    },
    currentIndex() {
      const idx = this.range.findIndex((item) => String(item.value) === String(this.value));
      return idx < 0 ? 0 : idx;
    },
  },
  methods: {
    onPickerChange(e) {
      const picked = this.range[(e && e.detail && e.detail.value) || 0];
      if (!picked) return;
      this.$emit("change", picked.value, picked);
    },
    openTree() {
      if (this.disabled) return;
      // 没有可选项时不打开空弹层，给个提示
      if (!this.tree || !this.tree.length) {
        if (typeof uni !== "undefined" && uni.showToast) {
          uni.showToast({ title: this.hint || "暂无可选项", icon: "none" });
        }
        return;
      }
      const picker = this.$refs.tree;
      if (picker && typeof picker._show === "function") picker._show();
    },
    /** mode="custom"：自定义流程，只把点击抛给页面处理 */
    onCustomTap() {
      if (this.disabled) return;
      this.$emit("tap");
    },
    onTreeSelect(ids, names) {
      const id = Array.isArray(ids) ? ids[0] : ids;
      if (id === undefined || id === null || id === "") return;
      this.$emit("change", id, { value: id, label: names || "" });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 行样式与 pages/hr/profile/edit.vue 的 .field 保持一致 */
.hr-field {
  display: flex;
  align-items: center;
  min-height: 96rpx;
  font-size: 28rpx;

  .hr-label {
    width: 190rpx;
    flex: none;
    /* 标签不换行：宽度由页面 labelWidth 决定，换行会把行撑成两行高 */
    white-space: nowrap;
    color: #4b5563;
  }
  .hr-label.required::before {
    content: "*";
    color: #ee4d4d;
    margin-right: 4rpx;
  }
  .hr-value,
  .hr-placeholder {
    flex: 1;
    min-width: 0;
    text-align: right;
    color: #1f2329;
    font-size: 28rpx;
  }
  .hr-placeholder {
    color: #b5bac3;
  }
  .hr-arrow {
    flex: none;
    margin-left: 12rpx;
    color: #c4c8ce;
    font-size: 32rpx;
    line-height: 1;
  }
}
.hr-field.is-disabled {
  opacity: 0.6;
}
</style>