<template>
|
<!-- 关联客户选择弹窗 -->
|
<el-dialog v-model="dialogVisible" title="请选择 关联客户" width="80%" destroy-on-close @close="handleClose"
|
append-to-body>
|
<!-- 搜索区域 -->
|
<div class="search-bar">
|
<el-form inline :model="queryParams" class="search-form">
|
<el-form-item label="客户类型:">
|
<el-select v-model="queryParams.customerType" style="width: 200px;" placeholder="请选择客户类型" clearable>
|
<el-option v-for="dict in customer_type" :key="dict.value" :label="dict.label"
|
:value="parseInt(dict.value)" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="客户简称:">
|
<el-input v-model="queryParams.customerShortName" placeholder="请输入客户简称" style="width: 180px" />
|
</el-form-item>
|
<el-form-item label="客户全称:">
|
<el-input v-model="queryParams.customerFullName" placeholder="请输入客户简称" style="width: 180px" />
|
</el-form-item>
|
<el-form-item label="客户编号:">
|
<el-input v-model="queryParams.customerNo" placeholder="请输入客户编号" style="width: 180px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
|
<el-button plain icon="RefreshLeft" @click="handleReset">清空</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 客户表格（单选+默认选中） -->
|
<el-table ref="customerTableRef" :data="customerList" border size="small" style="width: 100%"
|
:highlight-current-row="true" @current-change="handleRowSelect" :current-row-key="selectedRow?.id"
|
class="customer-table">
|
<el-table-column prop="customerType" label="客户类型">
|
<template #default="scope">
|
{{ dictFormat(customer_type, scope.row.customerType) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="customerShortName" label="客户简称" />
|
<el-table-column prop="customerFullName" label="客户全称" />
|
|
<el-table-column prop="customerCode" label="客户编号" />
|
<el-table-column prop="contactName" label="联系人姓名" />
|
<el-table-column prop="signCompanyName" label="签约公司" />
|
</el-table>
|
<pagination v-show="pageF.total > 0" :total="pageF.total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
<!-- 底部按钮 -->
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, watch, nextTick } from 'vue';
|
import type { Table, TableCurrentRow } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { PageF } from "@/utils/globalInterface";
|
import { listTmsCustomerInfo } from "@/api/tms/tmsCustomerInfo";
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
// 分页参数
|
const pageF = reactive({
|
...PageF,
|
});
|
|
// 获取全局实例和字典
|
const { proxy } = useCurrentInstance();
|
const { customer_type, sys_invoice_type, sys_currency, sys_account_type, sys_bank_type } =
|
proxy.useDict('customer_type', 'sys_invoice_type', 'sys_currency', 'sys_account_type', 'sys_bank_type');
|
|
// 定义客户数据类型
|
interface Customer {
|
id: string | number;
|
customerType: string;
|
customerShortName: string;
|
customerNo: string;
|
contactName: string;
|
contractCompany: string;
|
}
|
|
// Props
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
defaultSelectedId: {
|
type: [String, Number],
|
default: ''
|
}
|
});
|
|
// Emits
|
const emit = defineEmits<{
|
(e: 'confirm', selected: Customer): void;
|
(e: 'close'): void;
|
}>();
|
|
// 响应式数据
|
const dialogVisible = ref(false);
|
const queryParams = reactive({
|
customerType: '',
|
customerShortName: '',
|
customerNo: '',
|
pageNum: 1,
|
pageSize: 10
|
});
|
const customerList = ref<Customer[]>([]);
|
const selectedRow = ref<Customer>();
|
const customerTableRef = ref<InstanceType<typeof Table>>();
|
|
// 核心修复：监听默认选中ID + 数据加载完成后再选中
|
const loadAndSelectRow = async (id: string | number) => {
|
if (!id) return;
|
|
// 1. 先确保数据加载完成
|
await getDataList();
|
|
nextTick(() => {
|
// 2. 处理类型不匹配问题（统一转成字符串/数字）
|
const targetId = typeof id === 'string' ? id : String(id);
|
// 查找对应行（忽略类型，只比较值）
|
const targetRow = customerList.value.find(item => String(item.id) === targetId);
|
|
if (targetRow) {
|
selectedRow.value = targetRow;
|
// 3. 手动设置表格选中行
|
if (customerTableRef.value) {
|
customerTableRef.value.setCurrentRow(targetRow);
|
}
|
} else {
|
// 可选：如果当前页没有，提示用户或自动分页查找（简单场景可省略）
|
ElMessage.info('选中的客户不在当前列表，请调整搜索条件');
|
}
|
});
|
};
|
|
// 监听弹窗显示 + 默认选中ID变化
|
watch(
|
() => [props.defaultSelectedId, props.visible],
|
async ([id, visible]) => {
|
if (visible && id) {
|
// 弹窗显示且有默认ID时，加载数据并选中
|
await loadAndSelectRow(id);
|
} else if (!visible) {
|
// 弹窗关闭清空选中
|
selectedRow.value = undefined;
|
if (customerTableRef.value) {
|
customerTableRef.value.setCurrentRow(null);
|
}
|
}
|
},
|
{ immediate: true }
|
);
|
|
// 监听弹窗显示状态（兼容原有逻辑）
|
watch(
|
() => props.visible,
|
(val) => {
|
dialogVisible.value = val;
|
if (val) handleReset();
|
},
|
{ immediate: true }
|
);
|
|
// 加载数据列表（改为async，支持await）
|
const getDataList = async () => {
|
try {
|
const res = await listTmsCustomerInfo(queryParams);
|
if (res.code === 200) {
|
customerList.value = res.rows;
|
pageF.total = res.total;
|
}
|
} catch (err) {
|
console.error('加载客户列表失败：', err);
|
}
|
};
|
|
// 搜索
|
const handleSearch = () => {
|
queryParams.pageNum = 1;
|
getDataList().then(() => {
|
// 搜索后重新尝试选中（如果有默认ID）
|
if (props.defaultSelectedId) {
|
loadAndSelectRow(props.defaultSelectedId);
|
}
|
});
|
};
|
|
// 重置
|
const handleReset = () => {
|
queryParams.customerType = '';
|
queryParams.customerShortName = '';
|
queryParams.customerNo = '';
|
queryParams.customerFullName = '';
|
|
queryParams.pageNum = 1;
|
queryParams.pageSize = 10;
|
|
selectedRow.value = undefined;
|
if (customerTableRef.value) {
|
customerTableRef.value.setCurrentRow(null);
|
}
|
|
getDataList().then(() => {
|
// 重置后重新尝试选中（如果有默认ID）
|
if (props.defaultSelectedId) {
|
loadAndSelectRow(props.defaultSelectedId);
|
}
|
});
|
};
|
|
// 分页回调
|
const getList = () => {
|
getDataList().then(() => {
|
// 分页后重新尝试选中（如果有默认ID）
|
if (props.defaultSelectedId) {
|
loadAndSelectRow(props.defaultSelectedId);
|
}
|
});
|
};
|
|
// 选中行
|
const handleRowSelect = (val: TableCurrentRow<Customer>) => {
|
selectedRow.value = val as Customer;
|
};
|
|
// 确认选择
|
const handleConfirm = () => {
|
if (!selectedRow.value) {
|
ElMessage.warning('请选择一个客户');
|
return;
|
}
|
emit('confirm', selectedRow.value);
|
dialogVisible.value = false;
|
};
|
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogVisible.value = false;
|
emit('close');
|
};
|
|
// 初始化加载数据
|
getDataList();
|
</script>
|
|
<style scoped lang="scss">
|
.search-bar {
|
margin-bottom: 15px;
|
padding: 0 5px;
|
}
|
|
.customer-table {
|
:deep(.el-table__body tr.current-row > td) {
|
background-color: #d4f5d4 !important;
|
color: #333;
|
}
|
|
:deep(.el-table__header th) {
|
background-color: #f5f7fa;
|
font-weight: 500;
|
}
|
}
|
|
.dialog-footer {
|
text-align: right;
|
width: 100%;
|
}
|
</style>
|
