From 1d7dfd3ec33fd1f0e90ff8b451d28c553ab363f1 Mon Sep 17 00:00:00 2001
From: kaeery <3491123437@qq.com>
Date: Mon, 24 Feb 2025 15:46:57 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=AE=A2=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=91=20=E6=96=B0=E5=A2=9E#=20=E5=AE=A2=E6=88=B7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customer/components/customer-dialog.vue   | 117 ++++++++++++++++++
 src/views/customer/index.vue                  |  38 ++++++
 src/views/customer/modules/customer-list.vue  |  50 ++++++++
 src/views/customer/modules/search-form.vue    |  26 ++++
 4 files changed, 231 insertions(+)
 create mode 100644 src/views/customer/components/customer-dialog.vue
 create mode 100644 src/views/customer/modules/customer-list.vue
 create mode 100644 src/views/customer/modules/search-form.vue

diff --git a/src/views/customer/components/customer-dialog.vue b/src/views/customer/components/customer-dialog.vue
new file mode 100644
index 0000000..192938c
--- /dev/null
+++ b/src/views/customer/components/customer-dialog.vue
@@ -0,0 +1,117 @@
+<template>
+    <ProDialog ref="proDialogRef" @handle-cancel="handleCancel" @handle-confirm="handleConfirm">
+        <el-form v-model="form" label-postion="right" :label-width="100">
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="学生名字">
+                        <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-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>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="身份证号码">
+                        <el-input v-model="form.codeNumber" placeholder="请输入" maxlength="18" show-word-limit />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="报读专业">
+                        <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-input v-model="form.school" placeholder="请输入" maxlength="50" show-word-limit />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="家庭地址">
+                        <el-input v-model="form.address" 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-input v-model="form.name" placeholder="请输入" maxlength="20" show-word-limit />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="家长电话">
+                        <el-input v-model="form.mobile" placeholder="请输入" maxlength="11" show-word-limit />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="负责电销老师">
+                        <el-input v-model="form.teleName" placeholder="请输入" disabled />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="负责招生老师">
+                        <el-input v-model="form.admissionName" placeholder="请输入" disabled />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="数据来源">
+                        <el-select v-model="form.source" placeholder="请选择" style="width: 100%" disabled>
+                            <el-option v-for="option in clueSource" :key="option.value" :label="option.label" :value="option.value" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+    </ProDialog>
+</template>
+
+<script setup lang="ts">
+import ProDialog, { type IParams } from '@/components/ProDialog/index.vue'
+
+const emit = defineEmits(['refreshList'])
+const proDialogRef = ref<InstanceType<typeof ProDialog>>()
+
+const sexOptions = ref([
+    { label: '男', value: 1 },
+    { label: '女', value: 2 }
+])
+const clueSource = ref([{ label: '线下名单', value: 1 }])
+const form = ref({
+    studentName: '',
+    sex: 1,
+    codeNumber: '',
+    major: '',
+    school: '',
+    address: '',
+    name: '',
+    mobile: '',
+    teleName: '',
+    admissionName: '',
+    source: 1
+})
+const openDialog = (params: IParams) => {
+    proDialogRef.value?.openDialog(params)
+}
+const handleCancel = (callback: () => void) => {
+    callback()
+}
+const handleConfirm = (callback: () => void) => {
+    callback()
+    emit('refreshList')
+}
+defineExpose({
+    openDialog
+})
+</script>
+<style scoped></style>
diff --git a/src/views/customer/index.vue b/src/views/customer/index.vue
index e69de29..d0bcd90 100644
--- a/src/views/customer/index.vue
+++ b/src/views/customer/index.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <search-form v-model="queryParams" @reset-page="resetPage" @reset-params="resetParams" />
+        <customer-list :loading="pager.loading" :tableData="pager.lists">
+            <template #operation="{ row }">
+                <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+            </template>
+        </customer-list>
+    </div>
+    <customer-dialog ref="customerDialogRef" @refresh-list="getLists" />
+</template>
+
+<script setup lang="ts">
+import searchForm from './modules/search-form.vue'
+import customerList from './modules/customer-list.vue'
+import customerDialog from './components/customer-dialog.vue'
+import { usePaging } from '@/hooks/usePaging'
+import { postLists } from '@/api/org/post'
+
+const queryParams = reactive({
+    name: '',
+    conversionStatus: ''
+})
+const { pager, getLists, resetPage, resetParams } = usePaging({
+    fetchFun: postLists,
+    params: queryParams
+})
+getLists()
+const customerDialogRef = ref()
+const handleEdit = row => {
+    customerDialogRef.value.openDialog({
+        title: '编辑客户',
+        width: 800,
+        data: { ...row }
+    })
+}
+</script>
+<style scoped></style>
diff --git a/src/views/customer/modules/customer-list.vue b/src/views/customer/modules/customer-list.vue
new file mode 100644
index 0000000..2e3eb91
--- /dev/null
+++ b/src/views/customer/modules/customer-list.vue
@@ -0,0 +1,50 @@
+<template>
+    <el-card shadow="never" class="!border-none mt-4">
+        <el-tabs v-model="activeTab">
+            <el-tab-pane label="成交用户" name="complete">
+                <ProTable ref="proTableRef" :columns="columns" :tableData="tableData" :loading="loading" :maxHeight="530">
+                    <template #operation="{ row }">
+                        <slot name="operation" :row="row" />
+                    </template>
+                </ProTable>
+            </el-tab-pane>
+        </el-tabs>
+    </el-card>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    tableData: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const activeTab = ref('complete')
+const proTableRef = ref()
+const columns = reactive([
+    { prop: 'accountName', label: '学生名字', width: 180 },
+    { prop: 'sex', label: '性别', width: 180 },
+    { prop: 'mobile', label: '身份证号码', width: 180 },
+    { prop: 'mobile', label: '报读专业', width: 180 },
+    { prop: 'organization', label: '毕业院校', width: 180 },
+    { prop: 'position', label: '家庭地址', width: 180 },
+    { prop: 'position', label: '家长姓名', width: 180 },
+    { prop: 'position', label: '家长电话', width: 180 },
+    { prop: 'accountStatus', label: '负责电销老师', width: 180 },
+    { prop: 'accountStatus', label: '负责招生老师', width: 180 },
+    { prop: 'accountStatus', label: '数据来源', width: 180 },
+    { prop: 'accountStatus', label: '更新时间', width: 180 },
+    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
+])
+</script>
+
+<style scoped lang="scss">
+:deep(.el-card__body) {
+    padding-top: 0;
+}
+</style>
diff --git a/src/views/customer/modules/search-form.vue b/src/views/customer/modules/search-form.vue
new file mode 100644
index 0000000..57c2dae
--- /dev/null
+++ b/src/views/customer/modules/search-form.vue
@@ -0,0 +1,26 @@
+<template>
+    <el-card shadow="never" class="!border-none">
+        <el-form ref="formRef" class="mb-[-16px]" :model="modelValue" :inline="true">
+            <el-form-item label="学生名字">
+                <el-input class="w-[280px]" placeholder="请输入" v-model="modelValue.name" 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>
+            </el-form-item>
+        </el-form>
+    </el-card>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    modelValue: {
+        type: Object,
+        default: () => ({
+            name: ''
+        })
+    }
+})
+defineEmits(['resetPage', 'resetParams'])
+</script>
+<style scoped></style>