payment-platform/frontend/src/views/module_payment/institution/components/EmployeeSelector.vue

<template>
  <el-drawer
    title="按员工选择"
    v-model="visibleProxy"
    :direction="'rtl'"
    size="500px"
    @close="handleClose"
  >
    <div class="employee-selector">
      <div class="employee-selector__search">
        <el-form :model="searchForm" inline>
          <el-form-item label="部门">
            <el-select v-model="searchForm.department_id" placeholder="选择部门" style="width: 120px">
              <el-option value="" label="全部" />
              <el-option
                v-for="dept in departments"
                :key="dept.value"
                :label="dept.label"
                :value="dept.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="searchForm.name" placeholder="输入员工姓名" style="width: 120px" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="输入员工手机号" style="width: 120px" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="searchForm.email" placeholder="请输入邮箱" style="width: 120px" />
          </el-form-item>
        </el-form>
        <div class="employee-selector__actions">
          <el-button type="default" @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>

      <div class="employee-selector__tabs">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="已选 ({{ selectedEmployees.length }}人)" name="selected" />
        </el-tabs>
      </div>

      <div class="employee-selector__table">
        <el-table
          ref="tableRef"
          :data="displayEmployees"
          :show-header="true"
          border
          :max-height="300"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" />
          <el-table-column label="员工姓名" prop="name" />
          <el-table-column label="员工部门" prop="department" />
          <el-table-column label="手机号" prop="phone" />
          <el-table-column label="邮箱" prop="email" />
        </el-table>
      </div>

      <div class="employee-selector__pagination">
        <el-pagination
          v-model:current-page="pagination.page_no"
          v-model:page-size="pagination.page_size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50]"
          layout="prev, pager, next, jumper, ->, total, sizes"
        />
      </div>

      <div class="employee-selector__footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from "vue";

interface Employee {
  id: string;
  name: string;
  department: string;
  phone: string;
  email: string;
}

interface Props {
  visible: boolean;
  selectedIds: string[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: "update:visible", value: boolean): void;
  (e: "confirm", employees: Employee[]): void;
}>();

const visibleProxy = computed({
  get: () => props.visible,
  set: (v: boolean) => emit("update:visible", v),
});

const searchForm = ref({
  department_id: "",
  name: "",
  phone: "",
  email: "",
});

const activeTab = ref("all");

const pagination = ref({
  page_no: 1,
  page_size: 10,
  total: 2,
});

const departments = ref([
  { value: "dept1", label: "研发部" },
  { value: "dept2", label: "产品部" },
  { value: "dept3", label: "运营部" },
]);

const allEmployees = ref<Employee[]>([
  { id: "emp1", name: "湖南钱程似锦技术服务有限公司", department: "湖南钱程似锦技术服务有限公司", phone: "-", email: "-" },
  { id: "emp2", name: "湖南钱程似锦技术服务有限公司", department: "湖南钱程似锦技术服务有限公司", phone: "-", email: "-" },
]);

const selectedEmployees = ref<Employee[]>([]);
const tableRef = ref();

function handleSelectionChange(val: Employee[]) {
  selectedEmployees.value = val;
}

watch(() => props.visible, (v) => {
  if (v) {
    nextTick(() => selectedEmployees.value = allEmployees.value.filter(emp => props.selectedIds.includes(emp.id)));
  }
});

const displayEmployees = computed(() => {
  if (activeTab.value === "selected") {
    return selectedEmployees.value;
  }
  return allEmployees.value;
});


function handleClose() {
  selectedEmployees.value = [];
  emit("update:visible", false);
}

function handleReset() {
  searchForm.value = {
    department_id: "",
    name: "",
    phone: "",
    email: "",
  };
}

function handleSearch() {
  pagination.value.page_no = 1;
}

function handleTabChange() {
  pagination.value.page_no = 1;
}

function handleConfirm() {
  emit("confirm", selectedEmployees.value);
  emit("update:visible", false);
}
</script>

<style scoped>
.employee-selector {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.employee-selector__search {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.employee-selector__actions {
  display: flex;
  gap: 8px;
}

.employee-selector__tabs {
  background: #f5f7fa;
  padding: 8px;
}

.employee-selector__table {
  flex: 1;
  overflow: hidden;
}

.employee-selector__pagination {
  padding: 8px 0;
  border-top: 1px solid #ebeef5;
}

.employee-selector__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}
</style>