<template>
|
<div class="message-container">
|
<!-- 加载状态 -->
|
<div v-if="loading" class="loading">加载中...</div>
|
|
<!-- 空数据提示 -->
|
<div v-else-if="!list.length" class="empty">暂无消息</div>
|
|
<!-- 消息列表 -->
|
<div v-else class="list-wrap">
|
<div class="item" v-for="(item, index) in list" :key="index">
|
<div class="title">{{ item.title }}({{ item.date }})</div>
|
<div class="content">
|
<el-row>
|
<el-col :span="8">
|
<label>质检结果：{{ item.formData.result || '未填写' }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>质检单号：{{ item.formData.checkOrderNo || '未填写' }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>批次：{{ item.formData.batchNo || item.formData.receiveDetailRowNo || '未填写' }}</label>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="8">
|
<label>物料编号：{{ item.formData.materielCode || '未填写' }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>质检数量：{{ item.formData.receivedQuantity || '未填写' }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>检验次数：{{ item.formData.inspectionNumber || '未填写' }}</label>
|
</el-col>
|
</el-row>
|
|
<!-- 补充展示更多字段 -->
|
<el-row v-if="item.formData.message" style="margin-top: 10px">
|
<el-col :span="24">
|
<label>备注：{{ item.formData.message }}</label>
|
</el-col>
|
</el-row>
|
</div>
|
<div style="margin-top: 20px">
|
<el-button type="primary" @click="handleAgree(item)">同意</el-button>
|
<el-button type="danger" @click="handleReject(item)">驳回</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'CheckOrderApproval',
|
props: {
|
list: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
data() {
|
return {
|
// 本地维护列表数据（无初始模拟数据）
|
localList: [],
|
loading: false, // 加载状态
|
};
|
},
|
created() {
|
// 仅调用接口，无测试数据填充
|
this.fetchCheckOrderList();
|
},
|
methods: {
|
/**
|
* 请求质检审批列表（无兜底数据）
|
*/
|
fetchCheckOrderList() {
|
const _this = this;
|
_this.loading = true;
|
|
_this.http
|
.post(`api/CheckOrder/ReceiveReCheckOrder`, {}, "加载质检审批数据中...")
|
.then((x) => {
|
_this.loading = false;
|
if (x.status) {
|
// 仅赋值接口返回的真实数据
|
_this.localList = x.data || [];
|
} else {
|
// 无兜底数据，仅提示错误，列表置空
|
_this.$Message.error('加载质检审批数据失败');
|
_this.localList = [];
|
}
|
})
|
.catch((error) => {
|
_this.loading = false;
|
console.error('加载质检审批数据异常：', error);
|
_this.$Message.error('加载质检审批数据异常，请稍后重试');
|
// 异常时列表置空，无兜底数据
|
_this.localList = [];
|
});
|
},
|
|
/**
|
* 同意审批（无测试逻辑）
|
*/
|
handleAgree(item) {
|
const _this = this;
|
_this.$confirm('确定同意该质检审批吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'info',
|
}).then(() => {
|
_this.http
|
.post(`api/CheckOrder/AgreeReCheckOrder?orderNo=${item.formData.checkOrderNo}`, {}, "审批处理中...")
|
.then((x) => {
|
if (x.status) {
|
_this.$Message.success('审批同意完成');
|
_this.fetchCheckOrderList(); // 刷新列表
|
} else {
|
return _this.$Message.error('审批同意失败');
|
}
|
})
|
.catch((error) => {
|
console.error('同意审批异常：', error);
|
_this.$Message.error('审批同意异常，请稍后重试');
|
});
|
}).catch(() => {
|
_this.$Message.info('已取消同意');
|
});
|
},
|
|
/**
|
* 驳回审批（无测试逻辑）
|
*/
|
handleReject(item) {
|
const _this = this;
|
_this.$prompt('请输入驳回原因', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
}).then(({ value }) => {
|
_this.http
|
.post(
|
`api/CheckOrder/RejectReCheckOrder?orderNo=${item.formData.checkOrderNo}`,
|
{ rejectReason: value },
|
"审批驳回处理中..."
|
)
|
.then((x) => {
|
if (x.status) {
|
_this.$Message.success('审批驳回完成');
|
_this.fetchCheckOrderList(); // 刷新列表
|
} else {
|
return _this.$Message.error('审批驳回失败');
|
}
|
})
|
.catch((error) => {
|
console.error('驳回审批异常：', error);
|
_this.$Message.error('审批驳回异常，请稍后重试');
|
});
|
}).catch(() => {
|
_this.$Message.info('已取消驳回');
|
});
|
},
|
},
|
computed: {
|
list() {
|
return this.localList.length ? this.localList : this.$props.list;
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.message-container {
|
min-height: 300px;
|
padding: 10px;
|
|
.loading,
|
.empty {
|
text-align: center;
|
padding: 50px 0;
|
color: #999;
|
font-size: 14px;
|
}
|
|
.title {
|
padding-bottom: 10px;
|
font-weight: bold;
|
font-size: 15px;
|
}
|
|
.item {
|
border-bottom: 1px solid #eee;
|
padding: 10px 20px;
|
margin-bottom: 10px;
|
background: #fafafa;
|
border-radius: 4px;
|
}
|
|
.content {
|
color: #1b1b1b;
|
font-size: 14px;
|
line-height: 1.8;
|
|
label {
|
display: block;
|
word-break: break-all;
|
}
|
}
|
|
.list-wrap {
|
margin-top: 10px;
|
}
|
}
|
</style>
|
