<template>
|
<el-dialog
|
v-model="dialogVisible"
|
title="杂收杂发平账"
|
width="1000px"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
@closed="handleDialogClosed"
|
>
|
<div class="reconciliation-container">
|
<!-- 单据基本信息 -->
|
<div class="order-info">
|
<div class="info-row">
|
<span class="label">单据ID：</span>
|
<span class="value">{{ currentRow.id || '-' }}</span>
|
</div>
|
<div class="info-row" v-if="selectedItem">
|
<span class="label">已选订单：</span>
|
<span class="value selected-order">{{ selectedItem.orderId }}</span>
|
</div>
|
</div>
|
|
<!-- 数据列表展示 -->
|
<el-scrollbar height="400px" class="custom-scrollbar">
|
<transition-group name="data-item-transition">
|
<div class="data-item" v-for="(item, index) in displayData" :key="`${item.orderId}-${index}`">
|
<div class="radio-container">
|
<el-radio
|
v-model="selectedItem"
|
:label="item"
|
:value="item"
|
@change="handleRadioChange(item)"
|
>
|
<!-- 单选按钮的内容留空，只显示单选按钮 -->
|
</el-radio>
|
</div>
|
<div class="data-detail">
|
<div class="detail-row">
|
<span class="label">订单ID：</span>
|
<span class="value">{{ item.orderId || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">物料编码：</span>
|
<span class="value">{{ item.materielCode || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">物料名称：</span>
|
<span class="value">{{ item.materielName || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">批次号：</span>
|
<span class="value">{{ item.batchNo || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">订单数量：</span>
|
<span class="value">{{ item.orderQuantity || 0 }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">单位：</span>
|
<span class="value">{{ item.unit || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">供应商编码：</span>
|
<span class="value">{{ item.supplyCode || '-' }}</span>
|
</div>
|
<div class="detail-row">
|
<span class="label">仓库编码：</span>
|
<span class="value">{{ item.warehouseCode || '-' }}</span>
|
</div>
|
</div>
|
</div>
|
</transition-group>
|
<div class="empty-tip" v-if="displayData.length === 0">
|
<span>暂无相关数据</span>
|
</div>
|
</el-scrollbar>
|
</div>
|
|
<template #footer>
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
<el-button
|
type="primary"
|
@click="handleConfirm"
|
:disabled="!selectedItem"
|
:loading="loading"
|
>
|
{{ loading ? '平账中...' : '确认平账' }}
|
</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
// 根据您的实际项目引入请求方法，这里使用axios作为示例
|
import axios from 'axios';
|
|
// 弹窗显示状态
|
const dialogVisible = ref(false);
|
// 当前选中的行数据
|
const currentRow = ref({});
|
// 要展示的数据列表
|
const displayData = ref([]);
|
// 选中的数据项
|
const selectedItem = ref(null);
|
// 加载状态
|
const loading = ref(false);
|
|
// 打开弹窗方法（供父组件调用）
|
const open = (row, data) => {
|
currentRow.value = row;
|
displayData.value = data;
|
selectedItem.value = null; // 重置选择
|
dialogVisible.value = true;
|
};
|
|
// 处理单选按钮变化
|
const handleRadioChange = (item) => {
|
selectedItem.value = item;
|
};
|
|
// 弹窗关闭时的处理
|
const handleDialogClosed = () => {
|
selectedItem.value = null;
|
loading.value = false;
|
};
|
|
// 确认平账操作
|
const handleConfirm = async () => {
|
if (!selectedItem.value) {
|
ElMessage.warning('请选择一条数据进行平账处理');
|
return;
|
}
|
|
try {
|
// 确认提示
|
await ElMessageBox.confirm(
|
`确定要对订单 ${selectedItem.value.orderId} 进行平账处理吗？`,
|
'平账确认',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}
|
);
|
|
loading.value = true;
|
|
// 调用平账接口
|
const params = {
|
id: currentRow.value.id, // 行ID
|
orderId: selectedItem.value.orderId // 选择的单据orderId
|
};
|
|
// 根据您的接口实际情况调整请求方式
|
const response = await axios.get('/api/TakeStockOrder/DocumentReconciliation', {
|
params: params // GET请求传参
|
// 如果是POST请求，可以这样写：
|
// data: params
|
});
|
|
if (response.status) {
|
ElMessage.success('平账操作成功');
|
dialogVisible.value = false;
|
|
// 可以通过emit通知父组件刷新表格
|
// emit('refresh-table');
|
} else {
|
}
|
} catch (error) {
|
// 如果是用户取消操作，不显示错误信息
|
if (error === 'cancel' || error === 'close') {
|
return;
|
}
|
|
ElMessage.error('平账操作失败，请稍后重试');
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 暴露方法给父组件
|
defineExpose({
|
open
|
});
|
</script>
|
|
<style scoped>
|
.reconciliation-container {
|
padding: 10px 0;
|
}
|
|
.order-info {
|
margin-bottom: 20px;
|
padding: 10px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20px;
|
}
|
|
.info-row {
|
display: flex;
|
align-items: center;
|
}
|
|
.label {
|
font-weight: 600;
|
color: #606266;
|
margin-right: 5px;
|
min-width: 80px;
|
text-align: right;
|
}
|
|
.value {
|
color: #303133;
|
}
|
|
.selected-order {
|
color: #409EFF;
|
font-weight: 600;
|
}
|
|
.custom-scrollbar {
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
}
|
|
.data-item {
|
display: flex;
|
align-items: flex-start;
|
padding: 15px;
|
margin: 10px;
|
background: #fff;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
transition: all 0.3s;
|
}
|
|
.data-item:hover {
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.data-item.selected {
|
border-color: #409EFF;
|
background-color: #f0f7ff;
|
}
|
|
.radio-container {
|
margin-right: 12px;
|
margin-top: 4px;
|
}
|
|
.data-detail {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 10px;
|
flex: 1;
|
}
|
|
.detail-row {
|
display: flex;
|
align-items: center;
|
}
|
|
.empty-tip {
|
text-align: center;
|
padding: 50px 0;
|
color: #909399;
|
}
|
|
.data-item-transition-enter-from,
|
.data-item-transition-leave-to {
|
opacity: 0;
|
transform: translateY(10px);
|
}
|
|
.data-item-transition-enter-active,
|
.data-item-transition-leave-active {
|
transition: all 0.3s ease;
|
}
|
|
:deep(.el-radio__label) {
|
display: none;
|
}
|
</style>
|
