初始化项目

frontend/src/views/Customer.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="customer-page">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>客户管理</span>
+          <el-button type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>
+            新增客户
+          </el-button>
+        </div>
+      </template>
+
+      <!-- 查询表单 -->
+      <el-form :inline="true" :model="queryForm" class="query-form">
+        <el-form-item label="客户名称">
+          <el-input v-model="queryForm.name" placeholder="请输入客户名称" clearable />
+        </el-form-item>
+        <el-form-item label="所属行业">
+          <el-select v-model="queryForm.industry" placeholder="请选择行业" clearable>
+            <el-option label="制造业" value="manufacturing" />
+            <el-option label="互联网" value="internet" />
+            <el-option label="金融" value="finance" />
+            <el-option label="零售" value="retail" />
+            <el-option label="教育" value="education" />
+            <el-option label="医疗" value="healthcare" />
+            <el-option label="其他" value="other" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
+            <el-option label="可报备" :value="0" />
+            <el-option label="保护中" :value="1" />
+            <el-option label="已失效" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <el-icon><Search /></el-icon>
+            查询
+          </el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 数据表格 -->
+      <el-table :data="tableData" border stripe v-loading="loading">
+        <el-table-column prop="name" label="客户名称" />
+        <el-table-column prop="phone" label="联系电话" />
+        <el-table-column prop="address" label="地址" />
+        <el-table-column prop="industry" label="所属行业">
+          <template #default="{ row }">
+            {{ getIndustryLabel(row.industry) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态">
+          <template #default="{ row }">
+            <el-tag v-if="row.status === 0" type="success">可报备</el-tag>
+            <el-tag v-else-if="row.status === 1" type="warning">保护中</el-tag>
+            <el-tag v-else type="info">已失效</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" width="180" />
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        v-model:current-page="queryForm.current"
+        v-model:page-size="queryForm.size"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="fetchData"
+        @current-change="fetchData"
+        style="margin-top: 20px; justify-content: flex-end"
+      />
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="600px"
+      @close="handleDialogClose"
+    >
+      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="客户名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入客户名称" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="formData.phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="formData.address" placeholder="请输入地址" />
+        </el-form-item>
+        <el-form-item label="所属行业" prop="industry">
+          <el-select v-model="formData.industry" placeholder="请选择行业" style="width: 100%">
+            <el-option label="制造业" value="manufacturing" />
+            <el-option label="互联网" value="internet" />
+            <el-option label="金融" value="finance" />
+            <el-option label="零售" value="retail" />
+            <el-option label="教育" value="education" />
+            <el-option label="医疗" value="healthcare" />
+            <el-option label="其他" value="other" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { getCustomerPage, createCustomer, updateCustomer, deleteCustomer } from '@/api/customer'
+import type { Customer, CustomerForm } from '@/types'
+
+const loading = ref(false)
+const tableData = ref<Customer[]>([])
+const total = ref(0)
+const dialogVisible = ref(false)
+const dialogTitle = computed(() => (formData.id ? '编辑客户' : '新增客户'))
+const formRef = ref<FormInstance>()
+
+const queryForm = reactive({
+  current: 1,
+  size: 10,
+  name: '',
+  industry: '',
+  status: undefined as number | undefined
+})
+
+const formData = reactive<CustomerForm & { id?: number }>({
+  name: '',
+  phone: '',
+  address: '',
+  industry: ''
+})
+
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
+}
+
+// 获取行业标签
+const getIndustryLabel = (industry: string) => {
+  const map: Record<string, string> = {
+    manufacturing: '制造业',
+    internet: '互联网',
+    finance: '金融',
+    retail: '零售',
+    education: '教育',
+    healthcare: '医疗',
+    other: '其他'
+  }
+  return map[industry] || industry
+}
+
+// 查询数据
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getCustomerPage(queryForm)
+    tableData.value = res.records
+    total.value = res.total
+  } catch (error) {
+    console.error('查询失败', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查询按钮
+const handleQuery = () => {
+  queryForm.current = 1
+  fetchData()
+}
+
+// 重置按钮
+const handleReset = () => {
+  queryForm.name = ''
+  queryForm.industry = ''
+  queryForm.status = undefined
+  queryForm.current = 1
+  fetchData()
+}
+
+// 新增按钮
+const handleAdd = () => {
+  dialogVisible.value = true
+}
+
+// 编辑按钮
+const handleEdit = (row: Customer) => {
+  Object.assign(formData, row)
+  dialogVisible.value = true
+}
+
+// 删除按钮
+const handleDelete = async (row: Customer) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该客户吗？', '提示', { type: 'warning' })
+    await deleteCustomer(row.id)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    // 取消删除
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        if (formData.id) {
+          await updateCustomer(formData.id, formData)
+          ElMessage.success('更新成功')
+        } else {
+          await createCustomer(formData)
+          ElMessage.success('创建成功')
+        }
+        dialogVisible.value = false
+        fetchData()
+      } catch (error) {
+        console.error('提交失败', error)
+      }
+    }
+  })
+}
+
+// 对话框关闭
+const handleDialogClose = () => {
+  formRef.value?.resetFields()
+  Object.assign(formData, {
+    name: '',
+    phone: '',
+    address: '',
+    industry: ''
+  })
+  delete formData.id
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.customer-page {
+  width: 100%;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.query-form {
+  margin-bottom: 20px;
+}
+</style>