<template>
|
<el-dialog v-model="dialogVisible" :title="mode === 'internal' ? '请选择内部银行' : '请选择关联客户'" width="85%" destroy-on-close
|
@close="handleClose" append-to-body>
|
<div class="search-bar">
|
<el-form inline :model="queryParams" class="search-form" label-width="80px">
|
<el-form-item v-if="mode === 'config'" label="客户名称:">
|
<el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable style="width: 180px" />
|
</el-form-item>
|
|
<el-form-item label="账号编号:">
|
<el-input v-model="queryParams.accountNo" placeholder="请输入账号编号" clearable style="width: 180px" />
|
</el-form-item>
|
|
<el-form-item label="户名:">
|
<el-input v-model="queryParams.accountName" placeholder="请输入户名" clearable style="width: 180px" />
|
</el-form-item>
|
|
<el-form-item label="账号类型:">
|
<el-select v-model="queryParams.accountType" placeholder="请选择类型" clearable style="width: 150px">
|
<el-option v-for="dict in sys_account_type" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item class="search-btns">
|
<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 row-key="id" @current-change="handleRowSelect" class="custom-highlight-table">
|
<el-table-column v-if="mode === 'config'" prop="customerName" align="center" label="客户名称" min-width="120"
|
show-overflow-tooltip />
|
<el-table-column prop="accountNo" label="账号编号" align="center" show-overflow-tooltip />
|
<el-table-column prop="accountName" label="户名" align="center" />
|
<el-table-column prop="bankName" label="银行名称" align="center" show-overflow-tooltip />
|
<el-table-column prop="branchName" label="支行名称" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="accountType" label="账号类型" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_account_type, scope.row.accountType) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="currency" label="币种" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_currency, scope.row.currency) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="status" label="账户状态" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_bank_type, scope.row.status) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="pageF.total > 0" :total="pageF.total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
|
|
<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 { ElMessage } from 'element-plus';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { listBankAccountConfig } from "@/api/cwgl/bankAccountConfig";
|
// import { listInternalBank } from "@/api/cwgl/internalBank"; // 假设这是你的内部银
|
import { listBankConfig, } from "@/api/cwgl/bankConfig";
|
|
const { proxy } = useCurrentInstance();
|
const { sys_currency, sys_account_type, sys_bank_type } = proxy.useDict('sys_currency', 'sys_account_type', 'sys_bank_type');
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
defaultSelectedId: { type: [String, Number], default: '' },
|
mode: { type: String, default: 'config' }
|
});
|
|
const emit = defineEmits(['confirm', 'close', 'update:visible']);
|
|
const queryParams = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
customerName: '',
|
accountNo: '',
|
accountName: '',
|
accountType: '',
|
});
|
|
const pageF = reactive({ total: 0 });
|
const dialogVisible = ref(false);
|
const customerList = ref([]);
|
const selectedRow = ref(null);
|
const customerTableRef = ref();
|
|
// 获取数据逻辑
|
// 2. 修改获取数据逻辑 getDataList
|
const getDataList = async () => {
|
try {
|
// 核心逻辑：根据 mode 切换 API 方法
|
const apiMethod = props.mode === 'internal' ? listBankConfig : listBankAccountConfig;
|
|
const res = await apiMethod(queryParams);
|
|
if (res.code === 200) {
|
customerList.value = res.rows;
|
pageF.total = res.total;
|
if (props.defaultSelectedId) {
|
syncSelection();
|
}
|
}
|
} catch (err) {
|
console.error(err);
|
}
|
};
|
|
// 核心选中同步逻辑
|
const syncSelection = () => {
|
nextTick(() => {
|
if (!props.defaultSelectedId || customerList.value.length === 0) return;
|
|
const row = customerList.value.find(item => String(item.id) === String(props.defaultSelectedId));
|
if (row) {
|
selectedRow.value = row;
|
// 调用 Element Plus 原生方法设置高亮行
|
customerTableRef.value?.setCurrentRow(row);
|
}
|
});
|
};
|
|
const handleSearch = () => {
|
queryParams.pageNum = 1;
|
getDataList();
|
};
|
|
const handleReset = () => {
|
Object.keys(queryParams).forEach(key => {
|
if (key !== 'pageNum' && key !== 'pageSize') queryParams[key] = '';
|
});
|
queryParams.pageNum = 1;
|
handleSearch();
|
};
|
|
const handleRowSelect = (val: any) => {
|
selectedRow.value = val;
|
};
|
|
const handleConfirm = () => {
|
if (!selectedRow.value) return ElMessage.warning('请选择一行数据');
|
emit('confirm', { ...selectedRow.value });
|
handleClose();
|
};
|
|
const handleClose = () => {
|
emit('update:visible', false);
|
emit('close');
|
};
|
|
// 监听弹窗显示，触发数据加载和自动选中
|
watch(() => props.visible, (newVal) => {
|
dialogVisible.value = newVal;
|
if (newVal) {
|
handleSearch();
|
} else {
|
selectedRow.value = null;
|
customerTableRef.value?.setCurrentRow(null);
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.search-bar {
|
background: #fdfdfd;
|
padding: 15px 10px 5px;
|
border-bottom: 1px solid #eee;
|
margin-bottom: 15px;
|
|
.search-btns {
|
margin-left: 10px;
|
}
|
}
|
|
.pagination-container {
|
margin-top: 15px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
/* 核心：仿照图片中的淡绿色选中效果 */
|
.custom-highlight-table {
|
:deep(.el-table__body tr.current-row > td) {
|
background-color: #e1f3d8 !important;
|
/* 图片中的淡绿色 */
|
color: #606266;
|
}
|
|
/* 悬浮效果调整 */
|
:deep(.el-table__body tr:hover > td) {
|
background-color: #f5f7fa !important;
|
}
|
}
|
|
.dialog-footer {
|
padding-top: 10px;
|
}
|
</style>
|
