<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" label-width="120px">
|
<el-form-item label="供应商名称:">
|
<el-input v-model="queryParams.supplierName" 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 prop="supplierName" 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";
|
// 只保留客户银行账号配置的 API
|
import {
|
listBankSupplierConfig } from "@/api/cwgl/bankSupplierConfig";
|
|
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 prop
|
});
|
|
const emit = defineEmits(['confirm', 'close', 'update:visible']);
|
|
const queryParams = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
supplierName: '',
|
accountNo: '',
|
accountName: '',
|
accountType: '',
|
});
|
|
const pageF = reactive({ total: 0 });
|
const dialogVisible = ref(false);
|
const customerList = ref([]);
|
const selectedRow = ref(null);
|
const customerTableRef = ref();
|
|
/** 获取数据逻辑 */
|
const getDataList = async () => {
|
try {
|
// 直接调用单一的 API
|
const res = await listBankSupplierConfig(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;
|
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>
|
