TechnicianAssign 组件功能说明与使用指南

一、 功能概述

TechnicianAssign 是一个用于从技术员列表中选择并分配技术员的下拉选择框组件。它不仅提供了一个简单的选择功能，还集成了丰富的信息展示，帮助用户在分配任务时做出更明智的决策。

核心功能点：

1. 技术员列表展示：以下拉列表形式展示所有可用的在职技术员。
2. 丰富信息展示：在下拉选项中，直观地展示每位技术员的关键信息，包括：
   • 头像、姓名、工号
   • 技能等级（如：初级、中级、高级）
   • 当前工作状态（如：空闲、忙碌、休假）
   • 专业技能/特长
   • 任务负载：通过进度条实时显示当前任务数与最大任务数，并标记出负载状态（低、中、高、满载）。
   • 客户评分（可选）。
3. 智能排序与过滤：
   • 默认按任务负载从低到高排序，优先推荐较空闲的技术员。
   • 自动过滤掉任务已满载的技术员（使其不可选）。
   • 支持通过外部参数进行二次过滤。
4. 详情卡片：选中技术员后，可以（可选）在下方显示一个详细的信息卡片，提供更全面的数据，如联系电话、部门、职位以及累计完成任务数等统计信息。
5. 表单集成：组件本身被封装为 el-form-item，可以无缝集成到 el-form 表单中，支持表单校验。
6. 动态加载：仅在用户点击下拉框时才加载技术员列表，优化了初始性能。

二、 使用方法

1. 基本用法

在父组件中直接引入并使用。通过 v-model 来绑定选中的技术员ID。

<template>
  <el-form :model="form" ref="formRef">
    <TechnicianAssign v-model="form.technicianId" />
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import TechnicianAssign from '@/components/TechnicianAssign/index.vue';

const form = ref({
  technicianId: null
});
</script>

2. Props (属性)

你可以通过传递不同的 props 来定制组件的行为和显示。

3. Events (事件)

组件会触发以下事件，方便父组件进行交互。

4. Expose (暴露的方法)

父组件可以通过 ref 调用组件内部暴露的方法。

5. 示例：高级用法

下面的例子展示了如何使用大部分功能：显示详情卡片、传递表单校验规则、并在选择后获取完整的技术员信息。

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
    <TechnicianAssign
      ref="assignRef"
      v-model="form.technicianId"
      prop="technicianId"
      :showCard="true"
      @change="handleTechChange"
    />
    <el-button @click="submitForm">提交</el-button>
    <el-button @click="refreshList">手动刷新</el-button>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import TechnicianAssign from '@/components/TechnicianAssign/index.vue';

const formRef = ref(null);
const assignRef = ref(null); // 用于调用组件暴露的方法

const form = ref({
  technicianId: null
});

const rules = {
  technicianId: [
    { required: true, message: '请必须选择一位技术员', trigger: 'change' }
  ]
};

// 监听选择变化
function handleTechChange(id, technician) {
  if (technician) {
    console.log('选中的技术员姓名:', technician.technicianName);
    console.log('他当前的任务数:', technician.currentTasks);
  }
}

// 手动刷新列表
function refreshList() {
  assignRef.value?.refresh();
}

// 提交表单
function submitForm() {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单验证通过，提交的ID是:', form.value.technicianId);
      // ...提交逻辑
    } else {
      console.log('表单验证失败');
    }
  });
}
</script>