<template>
|
<div class="message-container">
|
<div class="item" v-for="(item, index) in list" :key="item.id || index">
|
<div class="title-container">
|
<div class="title">{{ item.title }}({{ item.createTime || item.date }})</div>
|
<el-button
|
type="text"
|
class="delete-btn"
|
@click="handleDeleteMessage(item, index)"
|
size="small"
|
>
|
<i class="el-icon-close"></i>
|
</el-button>
|
</div>
|
<div class="content">
|
<!-- 如果有formData，显示质检审批相关内容 -->
|
<template v-if="item.formData">
|
<el-row>
|
<el-col :span="8">
|
<label>收货单号：{{ item.formData.receiveOrderNo }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>质检单号：{{ item.formData.checkOrderNo }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>收货明细行号：{{ 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.qualifiedQuantity }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>特采数量：{{ item.formData.defectedQuantity }}</label>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="8">
|
<label>退货数量：{{ item.formData.returnQuantity }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>报废数量：{{ item.formData.scrappedQuantity }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>质检总数：{{ item.formData.receivedQuantity }}</label>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="16">
|
<label>特采说明：{{ item.formData.defectedNote }}</label>
|
</el-col>
|
<el-col :span="8">
|
<label>检验人：{{ item.formData.checkUserName }}</label>
|
</el-col>
|
</el-row>
|
<div style="margin-top: 20px">
|
<el-button type="primary">同意</el-button
|
><el-button type="danger">驳回</el-button>
|
</div>
|
</template>
|
<!-- 否则显示普通消息内容 -->
|
<template v-else>
|
<div class="simple-message">
|
{{ item.message || '无消息内容' }}
|
</div>
|
</template>
|
</div>
|
</div>
|
<!-- 如果没有消息，显示提示 -->
|
<div v-if="list.length === 0" class="no-message">
|
暂无消息
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
list: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
},
|
created() {
|
// if (!this.list.length) {
|
// this.list.push({
|
// title: "IQC质检结果审批",
|
// formData: {
|
// receiveOrderNo: "收货单号",
|
// checkOrderNo: "质检单号",
|
// receiveDetailRowNo: "收货明细行号",
|
// materielCode: "物料编号",
|
// qualifiedQuantity: "合格数量",
|
// defectedQuantity: "特采数量",
|
// returnQuantity: "退货数量",
|
// scrappedQuantity: "报废数量",
|
// receivedQuantity: "质检总数",
|
// defectedNote: "特采说明",
|
// checkUserName: "检验人",
|
// message: "消息测试内容消息测试内容消息测试内容消息测试内容",
|
// },
|
// date: "2022-05-02 03:10",
|
// });
|
// }
|
},
|
methods: {
|
// 处理确认按钮点击事件
|
handleConfirm(item) {
|
console.log('确认消息:', item);
|
// 这里可以添加确认后的逻辑，比如从消息列表中移除该消息
|
// 由于props是单向数据流，需要通过事件通知父组件处理
|
this.$emit('confirm', item);
|
},
|
// 处理删除单条消息
|
handleDeleteMessage(item, index) {
|
// 通过事件通知父组件删除该消息
|
this.$emit('delete-message', { item, index });
|
}
|
}
|
};
|
</script>
|
<style scoped lang="less">
|
.message-container {
|
padding: 10px;
|
background-color: #fafafa;
|
border-radius: 12px;
|
|
.item {
|
background-color: white;
|
border: 1px solid #e4e7ed;
|
border-radius: 12px;
|
padding: 15px 20px;
|
margin-bottom: 15px;
|
position: relative;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
transition: all 0.3s ease;
|
|
&:hover {
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
transform: translateY(-2px);
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.title-container {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 10px;
|
}
|
|
.title {
|
font-weight: bold;
|
flex: 1;
|
color: #303133;
|
font-size: 16px;
|
}
|
|
.delete-btn {
|
margin-left: 10px;
|
color: #909399;
|
&:hover {
|
color: #f56c6c;
|
}
|
}
|
|
.content {
|
color: #1b1b1b;
|
font-size: 14px;
|
}
|
|
.simple-message {
|
line-height: 1.7;
|
color: #606266;
|
}
|
|
.no-message {
|
text-align: center;
|
padding: 50px 0;
|
color: #909399;
|
background-color: white;
|
border-radius: 12px;
|
border: 1px solid #e4e7ed;
|
}
|
}
|
</style>
|
