backend/src/views/apps/erp/employee/index.vue

<template>
    <div class="container-box">
        <div class="header-bar">
            <h2>用户管理</h2>
            <div class="header-actions">
                <el-button type="primary" @click="handleAddUser">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加用户
                </el-button>
                <el-button @click="refresh">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    刷新
                </el-button>
            </div>
        </div>

        <el-divider></el-divider>

        <!-- 用户列表表格 -->
        <el-table :data="users" style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="ID" align="center" fixed="left" />
            <el-table-column prop="account" label="账号" align="center" />
            <el-table-column prop="name" label="姓名" align="center">
                <template #default="scope">
                    <span class="name-link" @click="handlePreview(scope.row)">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="qq" label="隶属单位" align="center" />
            <el-table-column prop="phone" label="部门" align="center" />
            <el-table-column prop="phone" label="职位" align="center" />
            <el-table-column prop="status" label="账号状态" width="80" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{
                        scope.row.status === 1 ? "启用" : "禁用"
                        }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center" fixed="right">
                <template #default="scope">
                    <el-button size="small" @click="handlePreview(scope.row)">查看</el-button>
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="warning" @click="handleChangePassword(scope.row)">
                        修改密码
                    </el-button>
                    <el-button v-if="scope.row.username !== 'admin' && scope.row.id !== 1" size="small" type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-bar">
            <el-pagination :current-page="page" :page-size="pageSize" :total="total" @current-change="handlePageChange"
                layout="total, prev, pager, next" />
        </div>

        <!-- 编辑弹窗 -->
        <Edit ref="editRef" @submit="fetchData" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Refresh } from "@element-plus/icons-vue";
import { getEmployeeList, deleteEmployee } from "@/api/erp";
import Edit from "./components/edit.vue";

const users = ref<any[]>([]);
const loading = ref(false);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const editRef = ref<any>(null);

// 获取列表数据
const fetchData = async () => {
    loading.value = true;
    try {
        const res = await getEmployeeList();
        users.value = res.data || res || [];
        total.value = users.value.length;
    } catch (e: any) {
        ElMessage.error(e?.message || "获取列表失败");
    } finally {
        loading.value = false;
    }
};

// 刷新
const refresh = () => {
    fetchData();
};

// 添加用户
const handleAddUser = () => {
    editRef.value?.openAdd();
};

// 编辑用户
const handleEdit = (row: any) => {
    editRef.value?.openEdit(row);
};

// 查看
const handlePreview = (row: any) => {
    editRef.value?.openEdit(row);
};

// 删除用户
const handleDelete = async (row: any) => {
    try {
        await ElMessageBox.confirm(`确定删除用户 "${row.name}" 吗？`, "提示", {
            type: "warning",
        });
        await deleteEmployee(row.id);
        ElMessage.success("删除成功");
        fetchData();
    } catch (e: any) {
        if (e !== "cancel") {
            ElMessage.error(e?.message || "删除失败");
        }
    }
};

// 分页变化
const handlePageChange = (val: number) => {
    page.value = val;
    fetchData();
};

onMounted(() => {
    fetchData();
});
</script>

<style lang="less" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
        font-size: 1.4rem;
        font-weight: 700;
    }
}

:deep(.el-alert__title) {
    color: #f56c6c !important;
}

.name-link {
    color: #3973ff;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;

    &:hover {
        color: #66b1ff;
        text-decoration: underline;
    }
}
</style>