<template>
|
<el-dialog v-model="dialogVisible" title="请选择 关联客户" width="85%" destroy-on-close @close="handleClose"
|
append-to-body>
|
<div class="search-bar">
|
<el-form inline :model="queryParams" class="search-form" size="default">
|
<el-form-item label="关联企业类型:">
|
<el-select v-model="queryParams.enterpriseType" style="width: 180px;" placeholder="请选择" clearable>
|
<el-option v-for="dict in sys_affiliated_enterprises" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="客户名称:">
|
<el-input v-model="queryParams.customerName" placeholder="请输入客户名称" style="width: 180px" clearable />
|
</el-form-item>
|
|
<el-form-item label="抬头公司:">
|
<el-input v-model="queryParams.invoiceCompanyName" placeholder="请输入抬头公司" style="width: 180px"
|
clearable />
|
</el-form-item>
|
|
<el-form-item label="统一社会信用代码:">
|
<el-input v-model="queryParams.invoiceCreditCode" placeholder="请输入信用代码" style="width: 220px"
|
clearable />
|
</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" row-key="id" @current-change="handleRowSelect" class="customer-table">
|
<el-table-column prop="customerName" label="客户名称" min-width="150" show-overflow-tooltip />
|
|
<el-table-column prop="enterpriseType" label="关联企业类型" width="120">
|
<template #default="scope">
|
{{ dictFormat(sys_affiliated_enterprises, scope.row.enterpriseType) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="invoiceCompanyName" label="抬头公司" min-width="180" show-overflow-tooltip />
|
|
<el-table-column prop="invoiceCreditCode" label="统一社会信用代码" width="180" />
|
|
<el-table-column prop="invoiceType" label="发票类型" width="130">
|
<template #default="scope">
|
{{ dictFormat(sys_invoice_type, scope.row.invoiceType) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="invoiceBankName" label="开户银行名称" min-width="150" />
|
<el-table-column prop="invoiceBankNo" label="基本开户账号" min-width="150" />
|
<el-table-column prop="invoiceOperatingLicenseAddress" label="注册场所地址" min-width="200"
|
show-overflow-tooltip />
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<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 } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { listInvoiceInfo } from "@/api/cwgl/invoiceInfo";
|
|
// 定义接口
|
interface Customer {
|
id: string | number;
|
customerName: string;
|
customerType: string;
|
invoiceCompanyName: string;
|
invoiceCreditCode: string;
|
invoiceType: string;
|
invoiceBankName: string;
|
invoiceBankNo: string;
|
invoiceOperatingLicenseAddress: string;
|
}
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
defaultSelectedId: { type: [String, Number], default: '' }
|
});
|
|
const emit = defineEmits(['confirm', 'close', 'update:visible']);
|
|
const { proxy } = useCurrentInstance();
|
const { sys_invoice_type, sys_affiliated_enterprises } = proxy.useDict('sys_invoice_type', 'sys_affiliated_enterprises');
|
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
};
|
|
// 响应式数据
|
const dialogVisible = ref(false);
|
const customerList = ref<Customer[]>([]);
|
const total = ref(0);
|
const selectedRow = ref<Customer | null>(null);
|
const customerTableRef = ref<InstanceType<typeof Table>>();
|
|
const queryParams = reactive({
|
customerType: '',
|
customerName: '',
|
invoiceCompanyName: '',
|
invoiceCreditCode: '',
|
pageNum: 1,
|
pageSize: 10
|
});
|
|
// 获取数据逻辑
|
const getDataList = async () => {
|
try {
|
const res = await listInvoiceInfo(queryParams);
|
if (res.code === 200) {
|
customerList.value = res.rows;
|
total.value = res.total;
|
return res.rows;
|
}
|
} catch (err) {
|
console.error('加载列表失败：', err);
|
}
|
return [];
|
};
|
|
// 核心：处理自动选中高亮
|
const autoSelectRow = (list: Customer[]) => {
|
if (!props.defaultSelectedId || list.length === 0) return;
|
|
nextTick(() => {
|
const target = list.find(item => String(item.id) === String(props.defaultSelectedId));
|
if (target && customerTableRef.value) {
|
customerTableRef.value.setCurrentRow(target);
|
selectedRow.value = target;
|
}
|
});
|
};
|
|
// 搜索
|
const handleSearch = () => {
|
queryParams.pageNum = 1;
|
getList();
|
};
|
|
// 重置
|
const handleReset = () => {
|
queryParams.customerType = '';
|
queryParams.customerName = '';
|
queryParams.invoiceCompanyName = '';
|
queryParams.invoiceCreditCode = '';
|
handleSearch();
|
};
|
|
const getList = () => {
|
getDataList().then((list) => {
|
autoSelectRow(list);
|
});
|
};
|
|
// 选中行回调
|
const handleRowSelect = (val: Customer | null) => {
|
selectedRow.value = val;
|
};
|
|
// 确定
|
const handleConfirm = () => {
|
if (!selectedRow.value) {
|
ElMessage.warning('请先点击表格选择一行数据');
|
return;
|
}
|
emit('confirm', selectedRow.value);
|
handleClose();
|
};
|
|
const handleClose = () => {
|
emit('update:visible', false);
|
emit('close');
|
};
|
|
// 监听显示状态
|
watch(() => props.visible, (newVal) => {
|
dialogVisible.value = newVal;
|
if (newVal) {
|
getList();
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.search-bar {
|
margin-bottom: 20px;
|
background-color: #f8f9fa;
|
padding: 15px 15px 0 15px;
|
border-radius: 4px;
|
}
|
|
.customer-table {
|
margin-top: 10px;
|
|
/* 重点：保留并强化选中效果 */
|
:deep(.el-table__body tr.current-row > td) {
|
background-color: #e1f3d8 !important;
|
/* 浅绿色背景 */
|
color: #67c23a;
|
/* 绿色文字 */
|
font-weight: bold;
|
}
|
|
:deep(.el-table__header th) {
|
background-color: #f5f7fa;
|
}
|
}
|
|
.pagination-container {
|
margin-top: 15px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.dialog-footer {
|
padding-top: 10px;
|
}
|
</style>
|
