展示员工列表改为组件

src/components/customer/EmployeeListDialog.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    :title="`【${customerName}】员工名单`"
+    width="500px"
+  >
+    <el-table :data="employees" border stripe>
+      <el-table-column prop="employee_id" label="员工ID" width="100" />
+      <el-table-column prop="employee_name" label="姓名" />
+      <el-table-column label="操作" width="100" align="center">
+        <template #default="scope">
+          <el-button
+            size="small"
+            type="danger"
+            link
+            @click="handleDelete(scope.row.employee_id)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ElMessage, ElMessageBox } from "element-plus";
+import { customerApi } from "@/api/ticket";
+
+const props = defineProps({
+  modelValue: Boolean,
+  customerName: String,
+  employees: Array,
+});
+const emit = defineEmits(["update:modelValue", "refresh"]);
+
+const handleDelete = (empId) => {
+  ElMessageBox.confirm("确定要从该单位移除此员工吗？", "提示", { type: "warning" })
+    .then(async () => {
+      try {
+        const res = await customerApi.deleteEmployee(empId);
+        if (res.code == 200 || res.code == true) {
+          ElMessage.success("操作成功");
+          emit("refresh"); // 通知父组件重新获取数据
+        }
+      } catch (e) {
+        ElMessage.error("删除失败");
+      }
+    })
+    .catch(() => {});
+};
+</script>