smart_grid_iot/client/src/views/project/visit/index.vue

<template>
	<div class="page-management">
		<a-card title="回访记录管理">
			<template #extra>
				<a-space>
					<a-button type="primary" @click="handleAdd">
						<template #icon><PlusOutlined /></template>
						新增回访
					</a-button>
				</a-space>
			</template>

			<div class="search-bar">
				<a-input
					v-model:value="searchForm.keyword"
					placeholder="联系人/回访人"
					allow-clear
					style="width: 220px"
					@pressEnter="handleSearch"
				>
					<template #prefix><SearchOutlined /></template>
				</a-input>
				<a-button type="primary" @click="handleSearch">
					<template #icon><SearchOutlined /></template>
					查询
				</a-button>
				<a-button @click="handleReset">
					<template #icon><ReloadOutlined /></template>
					重置
				</a-button>
			</div>

			<div class="table-wrapper" ref="wrapperRef">
			<a-table
				:columns="columns"
				:data-source="dataSource"
				:loading="loading"
				:pagination="pagination"
				row-key="id"
				:scroll="{ x: 'max-content', y: tableHeight }"
				@change="handleTableChange"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'customerName'">
						{{ getCustomerName(record.customerId) }}
					</template>
					<template v-if="column.key === 'visitTime'">
						{{ record.visitTime || '-' }}
					</template>
					<template v-if="column.key === 'action'">
						<a-space>
							<a-button type="link" size="small" @click="handleEdit(record)">
								<template #icon><EditOutlined /></template>
								编辑
							</a-button>
							<a-popconfirm title="确定要删除该回访记录吗？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)">
								<a-button type="link" size="small" danger>
									<template #icon><DeleteOutlined /></template>
									删除
								</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</template>

				<template #emptyText>
					<a-empty description="暂无回访记录" />
				</template>
			</a-table>
			</div>
		</a-card>

		<a-modal
			v-model:open="modalVisible"
			:title="modalTitle"
			:confirm-loading="modalLoading"
			width="620px"
			@ok="handleSubmit"
			@cancel="handleCancel"
		>
			<a-form
				ref="formRef"
				:model="formData"
				:rules="formRules"
				:label-col="{ span: 6 }"
				:wrapper-col="{ span: 16 }"
			>
				<a-form-item label="所属客户" name="customerId">
					<a-select
						v-model:value="formData.customerId"
						placeholder="请选择客户"
						:options="customerOptions"
						show-search
						option-filter-prop="label"
					/>
				</a-form-item>
				<a-form-item label="联系人" name="contactPerson">
					<a-input v-model:value="formData.contactPerson" placeholder="请输入联系人" maxlength="64" />
				</a-form-item>
				<a-form-item label="联系电话" name="contactPhone">
					<a-input v-model:value="formData.contactPhone" placeholder="请输入联系电话" />
				</a-form-item>
				<a-form-item label="回访人" name="visitor">
					<a-input v-model:value="formData.visitor" placeholder="请输入回访人" maxlength="64" />
				</a-form-item>
				<a-form-item label="回访时间" name="visitTime">
					<a-date-picker v-model:value="formData.visitTime" style="width: 100%" placeholder="请选择回访时间" />
				</a-form-item>
				<a-form-item label="客户意见" name="customerOpinion">
					<a-textarea v-model:value="formData.customerOpinion" :rows="3" placeholder="请输入客户意见" maxlength="2000" />
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { visitRecordApi, type VisitRecordInfo, type VisitRecordQuery } from '@/api/visitRecord';
import { customerApi } from '@/api/customer';
import { useTableScroll } from '@/composables/useTableScroll';

const { wrapperRef, tableHeight } = useTableScroll();

const loading = ref(false);
const dataSource = ref<VisitRecordInfo[]>([]);
const total = ref(0);
const searchForm = reactive<VisitRecordQuery>({ page: 1, pageSize: 10, keyword: '' });
const modalVisible = ref(false);
const modalTitle = ref('');
const modalLoading = ref(false);
const formRef = ref();
const isEdit = ref(false);
const editId = ref<number | null>(null);
const customerOptions = ref<{ label: string; value: number }[]>([]);

const formData = reactive({
	customerId: undefined as number | undefined,
	contactPerson: '',
	contactPhone: '',
	visitor: '',
	visitTime: undefined as any,
	customerOpinion: '',
});

const formRules = {
	customerId: [{ required: true, message: '请选择所属客户', trigger: 'change' }],
	contactPhone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
};

const columns = [
	{ title: '所属客户', key: 'customerName', ellipsis: true },
	{ title: '联系人', dataIndex: 'contactPerson', key: 'contactPerson', ellipsis: true },
	{ title: '联系电话', dataIndex: 'contactPhone', key: 'contactPhone', ellipsis: true },
	{ title: '回访人', dataIndex: 'visitor', key: 'visitor', ellipsis: true },
	{ title: '回访时间', key: 'visitTime', width: 110 },
	{ title: '客户意见', dataIndex: 'customerOpinion', key: 'customerOpinion', ellipsis: true },
	{ title: '操作', key: 'action', width: 140, fixed: 'right' as const },
];

const pagination = computed(() => ({
	current: searchForm.page,
	pageSize: searchForm.pageSize,
	total: total.value,
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (t: number) => `共 ${t} 条数据`,
}));

onMounted(() => {
	fetchList();
	fetchCustomerOptions();
});

async function fetchList() {
	loading.value = true;
	try {
		const res: any = await visitRecordApi.getList(searchForm);
		if (res.code === 200) {
			dataSource.value = res.data.list;
			total.value = res.data.total;
		}
	} catch {
		message.error('获取回访记录失败');
	} finally {
		loading.value = false;
	}
}

async function fetchCustomerOptions() {
	try {
		const res: any = await customerApi.getCustomerOptions();
		if (res.code === 200) {
			customerOptions.value = res.data.map((item: any) => ({ label: item.customerName, value: item.id }));
		}
	} catch {
		console.error('获取客户选项失败');
	}
}

function getCustomerName(customerId: number): string {
	const found = customerOptions.value.find((c) => c.value === customerId);
	return found ? found.label : `#${customerId}`;
}

function handleSearch() {
	searchForm.page = 1;
	fetchList();
}

function handleReset() {
	searchForm.keyword = '';
	searchForm.page = 1;
	fetchList();
}

function handleTableChange(pag: any) {
	searchForm.page = pag.current;
	searchForm.pageSize = pag.pageSize;
	fetchList();
}

function handleAdd() {
	isEdit.value = false;
	editId.value = null;
	modalTitle.value = '新增回访';
	resetForm();
	modalVisible.value = true;
}

function handleEdit(record: VisitRecordInfo) {
	isEdit.value = true;
	editId.value = record.id;
	modalTitle.value = '编辑回访';
	resetForm();
	formData.customerId = record.customerId;
	formData.contactPerson = record.contactPerson;
	formData.contactPhone = record.contactPhone;
	formData.visitor = record.visitor;
	formData.visitTime = record.visitTime ? dayjs(record.visitTime) : undefined;
	formData.customerOpinion = record.customerOpinion;
	modalVisible.value = true;
}

function resetForm() {
	formData.customerId = undefined;
	formData.contactPerson = '';
	formData.contactPhone = '';
	formData.visitor = '';
	formData.visitTime = undefined;
	formData.customerOpinion = '';
	if (formRef.value) {
		formRef.value.resetFields();
	}
}

async function handleSubmit() {
	try {
		await formRef.value.validate();
	} catch {
		return;
	}

	modalLoading.value = true;
	try {
		const submitData: any = {
			customerId: formData.customerId,
			contactPerson: formData.contactPerson,
			contactPhone: formData.contactPhone,
			visitor: formData.visitor,
			visitTime: formData.visitTime ? formData.visitTime.format('YYYY-MM-DD') : undefined,
			customerOpinion: formData.customerOpinion,
		};

		let res: any;
		if (isEdit.value && editId.value) {
			res = await visitRecordApi.update(editId.value, submitData);
		} else {
			res = await visitRecordApi.create(submitData);
		}

		if (res.code === 200) {
			message.success(isEdit.value ? '更新成功' : '创建成功');
			modalVisible.value = false;
			fetchList();
		} else {
			message.error(res.message || '操作失败');
		}
	} catch {
		message.error('操作失败');
	} finally {
		modalLoading.value = false;
	}
}

function handleCancel() {
	modalVisible.value = false;
	resetForm();
}

async function handleDelete(id: number) {
	try {
		const res: any = await visitRecordApi.delete(id);
		if (res.code === 200) {
			message.success('删除成功');
			fetchList();
		} else {
			message.error(res.message || '删除失败');
		}
	} catch {
		message.error('删除失败');
	}
}
</script>

<style scoped>
.page-management {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
}
:deep(.ant-card) {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}
:deep(.ant-card-body) {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}
.search-bar {
	flex-shrink: 0;
	margin-bottom: 16px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.table-wrapper {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
:deep(.ant-table) {
	font-size: 14px;
	height: 100%;
}
:deep(.ant-btn-link) {
	padding: 0 4px;
}
</style>