【招生用户端】新增# 客户管理：对接编辑接口

2025-02-28 14:38:51 +08:00 · 2025-02-28 14:38:51 +08:00 · b4a860c1c5
parent fed8c9e1a5
commit b4a860c1c5
6 changed files with 79 additions and 29 deletions
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@ -54,10 +54,19 @@ export const conversitionMap: Record<ConverSuccessEnum, string> = {
    [ConverSuccessEnum.YES]: '是',
    [ConverSuccessEnum.NO]: '否'
 }
+export enum SexEnum {
+    MALE = 1,
+    FEMALE = 2
+}
+export const sexMap: Record<SexEnum, string> = {
+    [SexEnum.MALE]: '男',
+    [SexEnum.FEMALE]: '女'
+}

 const keys: Record<string, any> = {
    conversionMap: conversionMap,
-    ClueSourceMap: ClueSourceMap
+    ClueSourceMap: ClueSourceMap,
+    sexMap: sexMap
 }
 const generateConverOptions = (key: string) => {
    const mapKey = keys[key]
@ -70,3 +79,4 @@ const generateConverOptions = (key: string) => {
 }
 export const conversionOptions = generateConverOptions('conversionMap')
 export const clueSourceOptions = generateConverOptions('ClueSourceMap')
+export const sexOptions = generateConverOptions('sexMap')
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@ -236,13 +236,21 @@ export function validateGoodsTime(args: any) {
 }
 /**身份证号 */
 export function validateIdCard(rule: any, value: any, callback: any) {
-    if (value === '') {
-        callback(new Error('请输入身份证号'))
-    } else if (!idCardReg.test(value)) {
+    console.log(value)
+    if (value) {
+        if (!idCardReg.test(value)) {
            callback(new Error('身份证号格式有误'))
+        }
    } else {
        callback()
    }
+    // if (value === '') {
+    //     callback(new Error('请输入身份证号'))
+    // } else if (!idCardReg.test(value)) {
+    //     callback(new Error('身份证号格式有误'))
+    // } else {
+    //     callback()
+    // }
 }
 /**服务类别 */
 export function validateGoodsIds(rule: any, value: any, callback: any) {
--- a/src/views/customer/components/customer-dialog.vue
+++ b/src/views/customer/components/customer-dialog.vue
@ -1,14 +1,14 @@
 <template>
    <ProDialog ref="proDialogRef" @handle-cancel="handleCancel" @handle-confirm="handleConfirm">
-        <el-form v-model="form" label-postion="right" :label-width="100">
+        <el-form ref="formRef" :rules="rules" :model="form" label-postion="right" :label-width="100">
            <el-row :gutter="24">
                <el-col :span="12">
-                    <el-form-item label="学生名字">
+                    <el-form-item label="学生名字" prop="studentName">
                        <el-input v-model="form.studentName" placeholder="请输入" maxlength="20" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
-                    <el-form-item label="性别">
+                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio v-for="option in sexOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
                        </el-radio-group>
@ -17,36 +17,36 @@
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
-                    <el-form-item label="身份证号码">
+                    <el-form-item label="身份证号码" prop="idCard">
                        <el-input v-model="form.idCard" placeholder="请输入" maxlength="18" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
-                    <el-form-item label="报读专业">
+                    <el-form-item label="报读专业" prop="major">
                        <el-input v-model="form.major" placeholder="请输入" maxlength="50" show-word-limit />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
-                    <el-form-item label="毕业院校">
+                    <el-form-item label="毕业院校" prop="graduationSchool">
                        <el-input v-model="form.graduationSchool" placeholder="请输入" maxlength="50" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
-                    <el-form-item label="家庭地址">
+                    <el-form-item label="家庭地址" prop="homeAddress">
                        <el-input v-model="form.homeAddress" placeholder="请输入" maxlength="100" show-word-limit />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
-                    <el-form-item label="家长姓名">
+                    <el-form-item label="家长姓名" prop="parentName">
                        <el-input v-model="form.parentName" placeholder="请输入" maxlength="20" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
-                    <el-form-item label="家长电话">
+                    <el-form-item label="家长电话" prop="parentPhone">
                        <el-input v-model="form.parentPhone" placeholder="请输入" maxlength="11" show-word-limit />
                    </el-form-item>
                </el-col>
@ -77,17 +77,17 @@
 </template>

 <script setup lang="ts">
-import { customerDetail } from '@/api/customer'
+import type { FormInstance } from 'element-plus'
 import ProDialog, { type IParams } from '@/components/ProDialog/index.vue'
-import { clueSourceOptions } from '@/enums'
+import { customerDetail, customerEdit } from '@/api/customer'
+import { clueSourceOptions, sexOptions } from '@/enums'
+import { validateIdCard } from '@/utils/validate'
+import feedback from '@/utils/feedback'

 const emit = defineEmits(['refreshList'])
-const proDialogRef = ref<InstanceType<typeof ProDialog>>()

-const sexOptions = ref([
-    { label: '男', value: 1 },
-    { label: '女', value: 2 }
-])
+const proDialogRef = ref<InstanceType<typeof ProDialog>>()
+const formRef = ref<FormInstance>()
 const form = ref({
    id: '',
    studentName: '',
@ -102,7 +102,9 @@ const form = ref({
    recruitTeacherName: '',
    listSource: 0
 })
-
+const rules = reactive({
+    idCard: { validator: validateIdCard, trigger: 'blur' }
+})
 const fetchDetail = async (id: number) => {
    try {
        const result = await customerDetail({ id })
@ -124,8 +126,15 @@ const handleCancel = (callback: () => void) => {
    callback()
 }
 const handleConfirm = (callback: () => void) => {
+    formRef.value?.validate(async valid => {
+        if (!valid) return
+        try {
+            await customerEdit(form.value)
+            feedback.msgSuccess('编辑成功')
            callback()
            emit('refreshList')
+        } catch (error) {}
+    })
 }
 defineExpose({
    openDialog
--- a/src/views/customer/index.vue
+++ b/src/views/customer/index.vue
@ -18,7 +18,8 @@ import { usePaging } from '@/hooks/usePaging'
 import { customerLists } from '@/api/customer'

 const queryParams = reactive({
-    studentName: ''
+    studentName: '',
+    parentPhone: ''
 })
 const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: customerLists,
--- a/src/views/customer/modules/customer-list.vue
+++ b/src/views/customer/modules/customer-list.vue
@ -3,8 +3,11 @@
        <el-tabs v-model="activeTab">
            <el-tab-pane label="成交用户" name="complete">
                <ProTable ref="proTableRef" :columns="columns" :tableData="tableData" :loading="loading" :maxHeight="530">
+                    <template #sex="{ row }">
+                        <span>{{ sexMap[row.sex as SexEnum] }}</span>
+                    </template>
                    <template #listSource="{ row }">
-                        {{ ClueSourceMap[row.listSource] }}
+                        {{ ClueSourceMap[row.listSource as CluseSourceEnum] }}
                    </template>
                    <template #operation="{ row }">
                        <slot name="operation" :row="row" />
@ -16,15 +19,30 @@
 </template>

 <script setup lang="ts">
-import { ClueSourceMap } from '@/enums'
+import { ClueSourceMap, CluseSourceEnum, SexEnum, sexMap } from '@/enums'
+import type { PropType } from 'vue'

+interface ICustomer {
+    id: number
+    studentName: string
+    sex: SexEnum
+    idCard: string
+    major: string
+    graduationSchool: string
+    homeAddress: string
+    parentName: string
+    parentPhone: string
+    telemarketingTeacherName: string
+    recruitTeacherName: string
+    listSource: CluseSourceEnum
+}
 defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    tableData: {
-        type: Array,
+        type: Array as PropType<ICustomer[]>,
        default: () => []
    }
 })
--- a/src/views/customer/modules/search-form.vue
+++ b/src/views/customer/modules/search-form.vue
@ -4,6 +4,9 @@
            <el-form-item label="学生名字">
                <el-input class="w-[280px]" placeholder="请输入" v-model="modelValue.studentName" clearable @keyup.enter="$emit('resetPage')" />
            </el-form-item>
+            <el-form-item label="家长电话">
+                <el-input class="w-[280px]" placeholder="请输入" v-model="modelValue.parentPhone" clearable @keyup.enter="$emit('resetPage')" />
+            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="$emit('resetPage')">查询</el-button>
                <el-button @click="$emit('resetParams')">重置</el-button>
@ -17,7 +20,8 @@ defineProps({
    modelValue: {
        type: Object,
        default: () => ({
-            studentName: ''
+            studentName: '',
+            parentPhone: ''
        })
    }
 })