guoju0808/ry-vue3/src/views/manager/SponsorPeople.vue

<template>
  <!--
    角色: 🟨 合规 支持单位下人员 (manager/sponsor-people)
    入口: org 表格行内「人员管理」按钮 (router.push 带 orgId/orgName)
    接口: bizList('person', q) / bizUpdate / bizAdd / sponsorImport / sponsorImportTemplate
  -->
  <div class="page-card manager-sponsor-people">
    <div class="breadcrumb">
      首页 / 支持单位管理 / 人员管理{{ orgName ? ' (' + orgName + ')' : '' }}
    </div>

    <el-form inline :model="q" class="filter-form">
      <el-form-item label="姓名">
        <el-input v-model="q.name" placeholder="姓名" clearable style="width:140px" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="q.phone" placeholder="手机号" clearable style="width:140px" />
      </el-form-item>
      <el-form-item label="企业名称">
        <el-input v-model="q.orgName" placeholder="企业名称" clearable style="width:180px" />
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="q.department" placeholder="部门" clearable style="width:140px" />
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="q.position" placeholder="职务" clearable style="width:140px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="load">查找</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="batch-bar">
      <el-button type="primary" @click="goNew">新建人员</el-button>
      <el-button @click="openImport">批量导入</el-button>
      <span class="filter-tip">*批量导入模板与列表表项一致</span>
    </div>

    <el-table :data="rows" v-loading="loading" stripe border>
      <el-table-column prop="name" label="姓名" min-width="100" />
      <el-table-column prop="phone" label="手机号" min-width="130" />
      <el-table-column prop="orgName" label="企业名称" min-width="180" show-overflow-tooltip />
      <el-table-column prop="department" label="部门" min-width="100" />
      <el-table-column prop="position" label="职务" min-width="100" />
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)" disable-transitions>{{ row.status || '正常' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button link :type="isDisabled(row) ? 'success' : 'danger'" @click="onToggleStatus(row)">
            {{ isDisabled(row) ? '启用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pager">
      <el-pagination
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="load"
        @size-change="load"
      />
    </div>

    <el-dialog v-model="importOpen" title="批量导入" width="520px" :close-on-click-modal="false">
      <el-form label-width="100px">
        <el-form-item label="选择文件">
          <el-upload ref="uploadRef" :auto-upload="false" :limit="1" accept=".xls,.xlsx" :on-change="onFileChange" :on-remove="onFileRemove">
            <el-button>选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
          <el-button link type="primary" @click="downloadTemplate">批量导入模板下载</el-button>
        </el-form-item>
        <el-form-item><span class="filter-tip">*导入列: 姓名/手机号/所属公司/部门/职务/角色</span></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="importOpen = false">取消</el-button>
        <el-button type="primary" :loading="importing" @click="submitImport">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { bizList, bizUpdate, importPerson, downloadImportTemplate } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const orgId = computed(() => route.query.orgId ? Number(route.query.orgId) : null)
const orgName = computed(() => route.query.orgName || '')

const q = reactive({ name: '', phone: '', orgName: '', department: '', position: '' })
const rows = ref([])
const loading = ref(false)
const page = reactive({ pageNum: 1, pageSize: 10, total: 0 })

function statusTagType(s) {
  if (s === '禁用' || s === '1') return 'danger'
  return 'success'
}
function isDisabled(row) {
  return row.status === '禁用' || row.status === '1'
}

async function load() {
  loading.value = true
  try {
    const params = {
      ...q,
      orgType: 'sponsor',
      ...(orgId.value ? { orgId: orgId.value } : {}),
      pageNum: page.pageNum,
      pageSize: page.pageSize,
    }
    const { data } = await bizList('person', params)
    rows.value = (data && data.rows) || []
    page.total = (data && data.total) || 0
  } catch { rows.value = []; page.total = 0 }
  finally { loading.value = false }
}
function reset() {
  Object.assign(q, { name: '', phone: '', orgName: '', department: '', position: '' })
  page.pageNum = 1
  load()
}

async function onToggleStatus(row) {
  const disabled = isDisabled(row)
  // sys_user.status 是 CHAR(1), 只能写 '0'/'1' (禁用='1', 启用='0')
  // 必须带 userId: BizPersonServiceImpl.updateByPrimaryKey 仅在 userId != null 时
  // 才同步 status 到 sys_user, 否则只更新 biz_person (而 biz_person.status 已删除)
  const newStatus = disabled ? '0' : '1'
  const label = disabled ? '启用' : '禁用'
  try {
    await ElMessageBox.confirm(
      `确定要${label}「${row.name}」吗?`,
      '确认',
      { type: 'warning' }
    )
  } catch { return }
  try {
    await bizUpdate('person', { personId: row.personId, userId: row.userId, status: newStatus })
    ElMessage.success('已' + label)
    load()
  } catch (e) { ElMessage.error(e?.msg || '操作失败') }
}

// ========== 新建人员 ==========
function goNew() {
  router.push({
    path: '/manager/sponsor-people/new',
    query: {
      ...(orgId.value ? { orgId: orgId.value } : {}),
      ...(orgName.value ? { orgName: orgName.value } : {})
    }
  })
}

// ========== 批量导入 ==========
const importOpen = ref(false)
const importing = ref(false)
const uploadRef = ref()
const importFile = ref(null)

function openImport() { importFile.value = null; importOpen.value = true }
function onFileChange(file) { importFile.value = file.raw }
function onFileRemove() { importFile.value = null }
async function downloadTemplate() {
  try {
    const res = await downloadImportTemplate('sponsor')
    const blob = new Blob([res.data], { type: res.data.type || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = '支持单位人员导入模板.xlsx'
    a.click()
    URL.revokeObjectURL(url)
  } catch { ElMessage.error('模板下载失败') }
}
async function submitImport() {
  if (!importFile.value) { ElMessage.warning('请先选择文件'); return }
  importing.value = true
  try {
    const res = await importPerson('sponsor', importFile.value)
    const payload = res.data || res
    const ok = payload.ok ?? 0
    const total = payload.total ?? 0
    const failed = (payload.results || []).filter(r => !r.ok)
    if (failed.length === 0) {
      ElMessage.success(`导入成功 ${ok}/${total}`)
    } else {
      ElMessageBox.alert(
        `成功 ${ok} 条, 失败 ${failed.length} 条:\n` +
        failed.map(f => `  第${f.rowNo}行 ${f.name || ''}: ${f.message}`).join('\n'),
        '导入结果', { type: 'warning' }
      )
    }
    importOpen.value = false
    load()
  } catch (e) {
    ElMessage.error(e?.msg || '导入失败')
  } finally {
    importing.value = false
  }
}

onMounted(load)
</script>

<style scoped>
.manager-sponsor-people { padding: 16px; }
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
.filter-form { margin-bottom: 12px; }
.batch-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.filter-tip { color: #909399; font-size: 12px; }
.pager { display: flex; justify-content: flex-end; margin-top: 12px; }
</style>