<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-input v-model="queryParams.systemNo" placeholder="请输入系统编号" style="width: 180px" clearable />
|
</el-form-item>
|
|
<el-form-item label="账单名称:">
|
<el-input v-model="queryParams.billName" placeholder="请输入账单名称" style="width: 180px" clearable />
|
</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-select v-model="queryParams.status" style="width: 150px;" placeholder="请选择状态" clearable>
|
<el-option v-for="dict in sys_bill_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</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="systemNo" label="系统编号" min-width="150" show-overflow-tooltip />
|
<el-table-column prop="billName" label="账单名称" min-width="150" show-overflow-tooltip />
|
<el-table-column prop="customerName" label="客户名称" min-width="150" show-overflow-tooltip />
|
<el-table-column prop="documentCount" label="单据数量" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="totalAmount" label="应结算金额" min-width="120" show-overflow-tooltip />
|
<el-table-column prop="currency" label="币制" min-width="80" show-overflow-tooltip />
|
<el-table-column prop="discountAmount" label="减免金额" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="receivedAmount" label="已收金额" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="pendingAmount" label="待收金额" min-width="100" show-overflow-tooltip />
|
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
{{ dictFormat(sys_bill_status, scope.row.status) }}
|
</template>
|
</el-table-column>
|
</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 { listReceivableBillManagement, } from "@/api/cwgl/receivableBillManagement";
|
|
// 这里的 Customer 接口根据表格字段进行了更新
|
interface Customer {
|
id: string | number;
|
systemNo: string;
|
billName: string;
|
customerName: string;
|
status: string | number;
|
totalAmount: number;
|
// ... 其他列字段
|
}
|
|
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_bill_status } = proxy.useDict('sys_bill_status');
|
|
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>>();
|
|
// 更新 queryParams 以匹配搜索表单和表格字段
|
const queryParams = reactive({
|
systemNo: '',
|
billName: '',
|
customerName: '',
|
status: '',
|
pageNum: 1,
|
pageSize: 10
|
});
|
|
const getDataList = async () => {
|
try {
|
const res = await listReceivableBillManagement(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 定义的一致
|
queryParams.systemNo = '';
|
queryParams.billName = '';
|
queryParams.customerName = '';
|
queryParams.status = '';
|
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>
|
