客户管理改为主组件

2026-02-26 15:27:22 +08:00
parent 99e5f0e954
commit f7f0c945ec
1 changed files with 183 additions and 0 deletions
--- a/src/views/CustomersManagement.vue
+++ b/src/views/CustomersManagement.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="customers-container">
+    <h2>客户及员工管理系统</h2>
+
+    <div class="action-bar">
+      <div class="search-group">
+        <el-input
+          v-model="searchQuery"
+          placeholder="搜索客户单位"
+          style="width: 250px"
+          clearable
+        />
+      </div>
+      <div class="button-group">
+        <el-button type="primary" :icon="Plus" @click="customerDialogVisible = true"
+          >新增客户单位</el-button
+        >
+        <el-button type="success" :icon="User" @click="handleAddEmployee"
+          >新增员工</el-button
+        >
+      </div>
+    </div>
+
+    <el-table
+      :data="filteredData"
+      border
+      style="width: 100%; margin-top: 20px"
+      v-loading="loading"
+    >
+      <el-table-column prop="customer_id" label="客户ID" width="100" />
+      <el-table-column prop="company_name" label="客户单位名称" />
+
+      <el-table-column label="员工管理" width="250" align="center">
+        <template #default="scope">
+          <span style="margin-right: 15px">
+            共
+            <b style="color: #409eff">{{ getEmployeeCount(scope.row.customer_id) }}</b> 人
+          </span>
+          <el-button
+            size="small"
+            type="primary"
+            link
+            :icon="View"
+            @click="showEmployeeDetails(scope.row)"
+            >查看详情</el-button
+          >
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="scope">
+          <el-button
+            size="small"
+            type="danger"
+            plain
+            @click="handleDeleteCustomer(scope.row)"
+            >删除单位</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <CustomerEditDialog v-model="customerDialogVisible" @success="fetchCustomers" />
+
+    <EmployeeEditDialog
+      v-model="employeeDialogVisible"
+      :customer-list="customerList"
+      @success="fetchCustomers"
+    />
+
+    <EmployeeListDialog
+      v-model="employeeDetailVisible"
+      :customer-name="activeCustomerName"
+      :employees="currentCustomerEmployees"
+      @refresh="fetchCustomers"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { Plus, User, View } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { customerApi } from "@/api/ticket";
+
+// 导入新组件
+import CustomerEditDialog from "@/components/customer/CustomerEditDialog.vue";
+import EmployeeEditDialog from "@/components/customer/EmployeeEditDialog.vue";
+import EmployeeListDialog from "@/components/customer/EmployeeListDialog.vue";
+
+// --- 状态数据 ---
+const loading = ref(false);
+const customerList = ref([]);
+const employeeList = ref([]);
+const searchQuery = ref("");
+
+const customerDialogVisible = ref(false);
+const employeeDialogVisible = ref(false);
+const employeeDetailVisible = ref(false);
+
+const activeCustomerName = ref("");
+const activeCustomerId = ref(null);
+
+// --- 核心逻辑 ---
+const fetchCustomers = async () => {
+  loading.value = true;
+  try {
+    const res = await customerApi.getCustomers();
+    if (res.code === 200) {
+      customerList.value = res.customers || [];
+      employeeList.value = res.employees || [];
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getEmployeeCount = (id) =>
+  employeeList.value.filter((emp) => emp.customer_id === id).length;
+
+const currentCustomerEmployees = computed(() =>
+  employeeList.value.filter((emp) => emp.customer_id === activeCustomerId.value)
+);
+
+const filteredData = computed(() =>
+  customerList.value.filter((item) =>
+    item.company_name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+);
+
+const handleAddEmployee = () => {
+  if (customerList.value.length === 0) return ElMessage.warning("请先创建客户单位");
+  employeeDialogVisible.value = true;
+};
+
+const showEmployeeDetails = (row) => {
+  activeCustomerId.value = row.customer_id;
+  activeCustomerName.value = row.company_name;
+  employeeDetailVisible.value = true;
+};
+
+const handleDeleteCustomer = (row) => {
+  ElMessageBox.confirm(`确定删除单位【${row.company_name}】吗？操作不可恢复！`, "警告", {
+    type: "error",
+    confirmButtonClass: "el-button--danger",
+  })
+    .then(async () => {
+      const res = await customerApi.deleteCustomer(row.customer_id);
+      if (res.code === 200) {
+        ElMessage.success("清理成功");
+        fetchCustomers();
+      }
+    })
+    .catch(() => {});
+};
+
+onMounted(fetchCustomers);
+</script>
+
+<style scoped>
+/* 保持原有样式不变 */
+.customers-container {
+  padding: 30px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
+h2 {
+  margin-bottom: 25px;
+  color: #303133;
+  font-weight: 600;
+}
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  padding: 15px 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+}
+.button-group .el-button {
+  margin-left: 10px;
+}
+</style>