| | |
| | | <template> |
| | | <div class="message-container"> |
| | | <div class="item" v-for="(item, index) in list" :key="index"> |
| | | <div class="title">{{ item.title }}({{ item.date }})</div> |
| | | <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"> |
| | | <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> |
| | | <!-- 妿æ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.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> |
| | | <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 style="margin-top: 20px"> |
| | | <el-button type="primary">åæ</el-button |
| | | ><el-button type="danger">驳å</el-button> |
| | | </div> |
| | | </div> |
| | | <!-- å¦ææ²¡ææ¶æ¯ï¼æ¾ç¤ºæç¤º --> |
| | | <div v-if="list.length === 0" class="no-message"> |
| | | ææ æ¶æ¯ |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | // }); |
| | | // } |
| | | }, |
| | | 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 { |
| | | .title { |
| | | padding-bottom: 10px; |
| | | font-weight: bold; |
| | | } |
| | | padding: 10px; |
| | | background-color: #fafafa; |
| | | border-radius: 12px; |
| | | |
| | | .item { |
| | | border-bottom: 1px solid #eee; |
| | | padding: 10px 20px; |
| | | 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> |