backmanagerweb/src/components/customer.vue

<script setup>

import { Search } from '@element-plus/icons-vue'
import { ref,reactive } from 'vue'
import { regionData } from 'element-china-area-data'
import { ElMessage } from 'element-plus'

const form = reactive({
  name: '',           // 姓名，默认为空字符串
  phone: '',          // 电话，默认为空字符串
  region: [],         // 地区，默认为空数组（省市区三级代码）
  address: '',        // 详细地址，默认为空字符串
  email: '',          // 电子邮箱，默认为空字符串
  customer_type: 'Normal'  // 客户类型，默认选中"普通客户"
})

const search = ref('')
const select = ref('1')

const searchResults=ref([])

const showSearchResults=ref(false) //是否显示搜索结果
const showAddForm=ref(false) //是否显示新增表单
const isEditMode = ref(false)   //是否为编辑模式
const currentCustomerId = ref(null)  //当前编辑的客户的ID

// 清空表单
const resetForm = () => {
  form.name = ''
  form.phone = ''
  form.region = []
  form.address = ''
  form.email = ''
  form.customer_type = 'Normal'
  isEditMode.value = false
  currentCustomerId.value = null
}

// 显示新增表单
const addCustomer = () => {
  resetForm()
  showAddForm.value = true
  showSearchResults.value = false
}

// 清空搜索
const clearSearch = () => {
  search.value = ''
  showSearchResults.value = false
  showAddForm.value = false
}

</script>

<template>
      <div class="customer-container">
        <!-- 搜索栏区域 -->
        <div class="customer-search">
            <el-input v-model="search" style="max-width: 600px" placeholder="Please input"
                class="customer-search-with-select">
                <template #prepend>
                    <el-select v-model="select" placeholder="Select" style="width: 115px">
                        <el-option label="姓名" value="1" />
                        <el-option label="编号" value="2" />
                        <el-option label="电话" value="3" />
                        <el-option label="邮箱" value="4" />
                    </el-select>
                </template>
                <template #append>
                    <el-button :icon="Search" />
                </template>
            </el-input>

            <el-button color="#E60012" :dark="isDark" @click="addCustomer" style="margin-left: 20px">
                新增用户
            </el-button>
        </div>

        <div v-if="showSearchResults" class="customer-table">
           <el-table :data="searchResults" border style="width: 100%">
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="phone" label="电话" width="150" />
                <el-table-column prop="regionText" label="地区" width="200" />
                <el-table-column prop="address" label="详细地址" width="200" />
                <el-table-column prop="email" label="电子邮箱" width="200" />
                <el-table-column prop="customer_type" label="代理商类型" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.customer_type === 'VIP' ? 'danger' : 'info'">
                            {{ row.customer_type === 'VIP' ? '地区总代理' : '普通代理' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template #default="{ row }">
                        <el-button link type="primary" @click="editCustomer(row)">编辑</el-button>
                        <el-button link type="danger" @click="deleteCustomer(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
           <div style="margin-top: 10px; color: #909399; font-size: 14px;">
                找到 {{ searchResults.length }} 条结果
                <el-button link type="primary" @click="clearSearch">清空搜索</el-button>
            </div>
        </div>

        <!-- 新增客户表单 -->
        <div v-if="showAddForm" class="customer-info-label">
            <el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" placeholder="请输入姓名" />
                </el-form-item>

                <el-form-item label="电话">
                    <el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
                        placeholder="请输入11位手机号" style="width: 100%" />
                </el-form-item>

                <el-form-item label="地区">
                    <el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
                        placeholder="请选择省/市/区" clearable style="width: 100%" />
                </el-form-item>

                <el-form-item label="详细地址">
                    <el-input v-model="form.address" placeholder=" 请输入详细地址" />
                </el-form-item>

                <el-form-item label="电子邮箱">
                    <el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
                </el-form-item>

                <el-form-item label="代理商类型">
                    <el-radio-group v-model="form.customer_type">
                        <el-radio value="VIP">地区总代理</el-radio>
                        <el-radio value="Normal">普通代理</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveCustomer">保存</el-button>
                    <el-button type="danger" @click="cancelAdd">取消</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<style scoped>

</style>