yunke/yunkes/src/views/StaffList.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getStaff } from '@/api'
import type { Staff } from '@/api/types'
import { useOrgStore } from '@/stores/org'
import { buildStaffSections, readField } from '@/utils/staffFields'

const route = useRoute()
const org = useOrgStore()

// All-fields drawer state.
const drawerOpen = ref(false)
const drawerStaff = ref<Staff | null>(null)

const staff = ref<Staff[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const errorMsg = ref<string | null>(null)

// On-job filter: 'all' (no filter) / 'on' (is_on_job=true) / 'off' (false).
const onJobFilter = ref<'all' | 'on' | 'off'>('all')

const departmentId = computed<string | undefined>(() =>
  route.query.department_id ? String(route.query.department_id) : undefined,
)

const onJobOptions: { value: 'all' | 'on' | 'off'; label: string }[] = [
  { value: 'all', label: '全部' },
  { value: 'on', label: '在职' },
  { value: 'off', label: '离职' },
]

function onJobTagType(onJob?: boolean | null): 'success' | 'info' | '' {
  if (onJob === true) return 'success'
  if (onJob === false) return 'info'
  return ''
}

function onJobLabel(onJob?: boolean | null): string {
  if (onJob === true) return '在职'
  if (onJob === false) return '离职'
  return '--'
}

function deptName(deptId?: string | null): string | null {
  if (!deptId) return null
  return org.findNode(deptId)?.label ?? deptId
}

async function load(): Promise<void> {
  loading.value = true
  errorMsg.value = null
  try {
    const res = await getStaff({
      department_id: departmentId.value,
      is_on_job:
        onJobFilter.value === 'all' ? undefined : onJobFilter.value === 'on',
      page: page.value,
      page_size: pageSize.value,
    })
    staff.value = res.items
    total.value = res.total
  } catch (e) {
    errorMsg.value = (e as Error).message
    ElMessage.error(`员工列表加载失败：${(e as Error).message}`)
  } finally {
    loading.value = false
  }
}

function handlePageChange(p: number): void {
  page.value = p
  load()
}

function handlePageSizeChange(s: number): void {
  pageSize.value = s
  page.value = 1
  load()
}

// React to the on-job filter + any dept query param.
watch(
  () => [onJobFilter.value, departmentId.value] as const,
  () => {
    page.value = 1
    load()
  },
)

onMounted(async () => {
  // Dept names come from the org tree; best-effort load so the 部门 column
  // can render names instead of bare ids. A load failure is non-fatal — the
  // column falls back to the raw dept_id.
  try {
    await org.ensureLoaded()
  } catch {
    /* surfaced in the aside placeholder */
  }
  await load()
})

/** Read a raw_json camelCase key off a staff row, preferring the structured
 * snake_case column when it is populated. */
function cell(row: Staff, camelKey: string): unknown {
  return readField(row, camelKey)
}

function cellText(row: Staff, camelKey: string): string {
  const v = cell(row, camelKey)
  return v === null || v === undefined || v === '' ? '--' : String(v)
}

function openDrawer(row: Staff): void {
  drawerStaff.value = row
  drawerOpen.value = true
}

const drawerSections = computed(() =>
  drawerStaff.value ? buildStaffSections(drawerStaff.value) : [],
)
</script>

<template>
  <div class="yk-staff">
    <div class="yk-staff__header">
      <div>
        <h2 style="margin: 0 0 4px; font-size: 16px">员工列表</h2>
        <span class="yk-staff__sub">共 {{ total }} 条</span>
      </div>
      <div class="yk-staff__filters">
        <el-radio-group v-model="onJobFilter" size="small">
          <el-radio-button
            v-for="opt in onJobOptions"
            :key="opt.value"
            :value="opt.value"
          >
            {{ opt.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <el-alert
      v-if="errorMsg"
      :title="errorMsg"
      type="error"
      show-icon
      :closable="false"
      style="margin-bottom: 12px"
    />

    <el-table
      v-loading="loading"
      :data="staff"
      stripe
      border
      row-key="user_id"
      style="width: 100%"
      :row-class-name="() => 'yk-clickable-row'"
      empty-text="暂无员工数据"
      @row-click="openDrawer"
    >
      <el-table-column label="员工ID" min-width="120">
        <template #default="{ row }">{{ row.user_id }}</template>
      </el-table-column>
      <el-table-column label="姓名" min-width="120">
        <template #default="{ row }">
          <span v-if="row.name">{{ row.name }}</span>
          <span v-else style="color: #c0c4cc">--</span>
        </template>
      </el-table-column>
      <el-table-column label="手机" min-width="130">
        <template #default="{ row }">{{ cellText(row, 'phone') }}</template>
      </el-table-column>
      <el-table-column label="销售手机" min-width="130">
        <template #default="{ row }">{{ cellText(row, 'sale_phone') }}</template>
      </el-table-column>
      <el-table-column label="部门" min-width="140">
        <template #default="{ row }">
          <span v-if="deptName(row.dept_id)">{{ deptName(row.dept_id) }}</span>
          <span v-else style="color: #c0c4cc">--</span>
        </template>
      </el-table-column>
      <el-table-column label="在职" width="100" align="center">
        <template #default="{ row }">
          <el-tag
            :type="onJobTagType(row.is_on_job)"
            size="small"
            effect="plain"
          >
            {{ onJobLabel(row.is_on_job) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="yk-staff__pager">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @current-change="handlePageChange"
        @size-change="handlePageSizeChange"
      />
    </div>
    <p class="yk-staff__hint">点击任意一行查看员工全部字段。</p>

    <!-- All-fields drawer -->
    <el-drawer
      v-model="drawerOpen"
      :title="drawerStaff ? `员工详情 · ${drawerStaff.name ?? drawerStaff.user_id}` : '员工详情'"
      direction="rtl"
      size="520px"
    >
      <template v-if="drawerStaff">
        <div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
          <el-divider content-position="left">{{ section.title }}</el-divider>
          <dl class="yk-drawer__kv">
            <div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
              <dt>{{ f.label }}</dt>
              <dd v-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
              <dd v-else>{{ f.text }}</dd>
            </div>
          </dl>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped>
.yk-staff__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.yk-staff__sub {
  color: #909399;
  font-size: 13px;
}

.yk-staff__filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.yk-staff__pager {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.yk-staff__hint {
  margin: 8px 2px 0;
  font-size: 12px;
  color: #c0c4cc;
}

.yk-drawer__kv {
  margin: 0 0 8px;
}

.yk-drawer__kv-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  padding: 3px 0;
}

.yk-drawer__kv dt {
  color: #909399;
  font-size: 13px;
  word-break: break-all;
}

.yk-drawer__kv dd {
  margin: 0;
  font-size: 13px;
  color: #303133;
  word-break: break-all;
  min-width: 0;
}

.yk-drawer__empty {
  color: #c0c4cc;
}
</style>