payment-platform/frontend/src/views/module_payment/invoice/employee/index.vue

<template>
  <div class="app-container">
    <h3>员工管理</h3>
    <el-card shadow="never" style="margin-top:16px">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
        <span style="font-weight:600">{{ companyName }}</span>
        <el-button type="primary" @click="handleAdd">新 增</el-button>
      </div>
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column prop="name" label="员工姓名" min-width="140" />
        <el-table-column prop="phone" label="手机号" min-width="140">
          <template #default="{ row }">{{ row.phone || '-' }}</template>
        </el-table-column>
        <el-table-column prop="id_card" label="身份证号" min-width="160">
          <template #default="{ row }">{{ row.id_card || '-' }}</template>
        </el-table-column>
        <el-table-column label="角色" min-width="120">
          <template #default="{ row }">{{ ROLE_LABEL[row.role] || row.role }}</template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)" v-if="row.role !== 'SUPER_ADMIN'">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)" v-if="row.role !== 'SUPER_ADMIN'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="searchForm.pageNo" v-model:page-size="searchForm.pageSize" :total="total" layout="total, prev, pager, next" @change="fetchData" style="margin-top:16px;justify-content:flex-end" />
    </el-card>
    <EmployeeFormDialog ref="formDialogRef" @success="fetchData" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getEmployeeList, deleteEmployee, ROLE_OPTIONS } from "@/api/module_payment/invoice/employee";
import type { EmployeeVO } from "@/api/module_payment/invoice/employee";
import EmployeeFormDialog from "./components/EmployeeFormDialog.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const ROLE_LABEL: Record<string, string> = Object.fromEntries(ROLE_OPTIONS.map(o => [o.value, o.label]));
const companyName = "湖南省铭恩商务管理有限公司";

const searchForm = reactive<Record<string, any>>({ pageNo: 1, pageSize: 10 });
const tableData = ref<EmployeeVO[]>([]);
const total = ref(0);
const loading = ref(false);
const formDialogRef = ref();

async function fetchData() {
  loading.value = true;
  try {
    const res = await getEmployeeList(searchForm);
    tableData.value = res.data.data?.list || [];
    total.value = res.data.data?.total || 0;
  } finally { loading.value = false; }
}

function handleAdd() { formDialogRef.value?.open(); }

function handleEdit(row: EmployeeVO) { formDialogRef.value?.open(row); }

async function handleDelete(row: EmployeeVO) {
  try {
    await ElMessageBox.confirm(`确认删除员工 ${row.name}？`, '提示', { type: 'warning' });
    await deleteEmployee(row.id!);
    ElMessage.success('删除成功');
    fetchData();
  } catch { /* cancelled */ }
}

onMounted(fetchData);
</script>