feat: 新增售后异议管理全流程功能
本次提交完成售后异议管理模块的开发,主要包括以下内容: 1. 新增售后异议主页面、待办页面和意见填写页面 2. 新增5个通用业务组件用于页面渲染 3. 新增4个业务API接口文件 4. 优化流程图表单描述、文件列表样式和钢卷信息展示 5. 完善投诉受理单的日期格式化和实体类继承
This commit is contained in:
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div v-if="enabled" class="section-container">
|
||||
<div class="section-title">
|
||||
<span>执行反馈</span>
|
||||
<el-button size="mini" type="text" icon="el-icon-refresh" @click="$emit('refresh')" title="刷新执行反馈"></el-button>
|
||||
</div>
|
||||
<div v-if="executeList.length > 0" class="card-grid">
|
||||
<div v-for="item in executeList" :key="item.relId" class="invoice-card">
|
||||
<div class="invoice-row">
|
||||
<span class="invoice-dept">{{ getDeptName(item.deptId) }}</span>
|
||||
<el-tag v-if="item.executeStatus === 0" type="warning" size="mini">待执行</el-tag>
|
||||
<el-tag v-else-if="item.executeStatus === 1" type="success" size="mini">已反馈</el-tag>
|
||||
</div>
|
||||
<hr class="invoice-divider" />
|
||||
<div class="invoice-body">
|
||||
<div v-if="item.executeResult" class="invoice-content" v-html="item.executeResult"></div>
|
||||
<div v-else class="invoice-empty">暂无反馈</div>
|
||||
<div v-if="item.feedbackFile" class="invoice-file">
|
||||
<FileList :ossIds="item.feedbackFile" />
|
||||
</div>
|
||||
</div>
|
||||
<hr class="invoice-divider" />
|
||||
<div class="invoice-meta">
|
||||
<span v-if="item.feedbackNo" class="invoice-meta-item"><i class="el-icon-document"></i> {{ item.feedbackNo }}</span>
|
||||
<span v-if="item.feedbackTime" class="invoice-meta-item"><i class="el-icon-time"></i> {{ parseTime(item.feedbackTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-data">暂无执行反馈</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileList from "@/components/FileList/index.vue";
|
||||
|
||||
export default {
|
||||
name: 'ExecutionFeedbackSection',
|
||||
components: { FileList },
|
||||
props: {
|
||||
enabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
executeList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDeptName(deptId) {
|
||||
const map = { 1: '生产部', 2: '质量部', 3: '销售部' };
|
||||
return map[deptId] || '部门' + deptId;
|
||||
},
|
||||
parseTime(time, option) {
|
||||
if (!time) return '-';
|
||||
const date = new Date(time);
|
||||
if (isNaN(date.getTime())) return time;
|
||||
const formatStr = option || '{y}-{m}-{d} {h}:{i}:{s}';
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
const seconds = date.getSeconds();
|
||||
return formatStr.replace('{y}', year)
|
||||
.replace('{m}', month < 10 ? '0' + month : month)
|
||||
.replace('{d}', day < 10 ? '0' + day : day)
|
||||
.replace('{h}', hours < 10 ? '0' + hours : hours)
|
||||
.replace('{i}', minutes < 10 ? '0' + minutes : minutes)
|
||||
.replace('{s}', seconds < 10 ? '0' + seconds : seconds);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.section-title {
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
margin: 20px 0 12px 0;
|
||||
padding: 0 0 10px 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.invoice-card {
|
||||
flex: 0 0 calc((100% - 20px) / 3);
|
||||
background: #fff;
|
||||
border: 1px solid #e8eaec;
|
||||
border-left: 3px solid #409eff;
|
||||
border-radius: 2px;
|
||||
padding: 10px 12px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.invoice-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.invoice-dept {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
.invoice-divider {
|
||||
border: none;
|
||||
border-top: 1px dashed #dcdfe6;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.invoice-body {
|
||||
flex: 1;
|
||||
}
|
||||
.invoice-content {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
max-height: 80px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.invoice-content /deep/ p {
|
||||
margin: 0;
|
||||
}
|
||||
.invoice-empty {
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
.invoice-file {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.invoice-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.invoice-meta-item {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.invoice-meta-item i {
|
||||
font-size: 11px;
|
||||
}
|
||||
.empty-data {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user