|
|
|
@ -2,6 +2,8 @@ |
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > |
|
|
|
<head> |
|
|
|
<th:block th:include="include :: header('新增售后客诉通知单')" /> |
|
|
|
<th:block th:include="include :: summernote-css" /> |
|
|
|
<link th:href="@{/ajax/libs/element-ui/element-ui.css}" rel="stylesheet"/> |
|
|
|
</head> |
|
|
|
<body class="white-bg"> |
|
|
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> |
|
|
|
@ -60,9 +62,50 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="app"> |
|
|
|
<!-- ... 其他Vue模板代码 ... --> |
|
|
|
|
|
|
|
<!-- 文件上传弹出层 --> |
|
|
|
<div id="uploadModal" class="modal fade" tabindex="-1" role="dialog"> |
|
|
|
<div class="modal-dialog modal-lg" role="document"> |
|
|
|
<div class="modal-content"> |
|
|
|
<div class="modal-header"> |
|
|
|
<h5 class="modal-title">上传不良报告</h5> |
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
|
|
<span aria-hidden="true">×</span> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="modal-body"> |
|
|
|
<!-- 这里放置el-upload组件 --> |
|
|
|
<el-upload |
|
|
|
ref="upload" |
|
|
|
:action="fileUploadUrl" |
|
|
|
:on-success="uploadSuccess" |
|
|
|
:on-remove="uploadRemove" |
|
|
|
:file-list="fileList" |
|
|
|
:limit="1" |
|
|
|
list-type="picture-card" |
|
|
|
accept=".jpg,.png,.pdf" |
|
|
|
> |
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
<div class="modal-footer"> |
|
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> |
|
|
|
<button type="button" class="btn btn-primary" @click="saveFile()">保存</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<th:block th:include="include :: footer" /> |
|
|
|
<!--用于可以修改列表字段的插件--> |
|
|
|
<th:block th:include="include :: bootstrap-table-editable-js" /> |
|
|
|
<th:block th:include="include :: summernote-js" /> |
|
|
|
<script th:src="@{/ajax/libs/vue/vue.js}"></script> |
|
|
|
<script th:src="@{/ajax/libs/element-ui/element-ui.js}"></script> |
|
|
|
|
|
|
|
<script th:inline="javascript"> |
|
|
|
var removeFlag = [[${@permission.hasPermi('aftersales:complaintNotice:remove')}]]; |
|
|
|
|
|
|
|
@ -293,47 +336,37 @@ |
|
|
|
type: 'text', // 表示该列可以被编辑为文本 |
|
|
|
}, |
|
|
|
}, |
|
|
|
// { |
|
|
|
// title: '紧急程度', |
|
|
|
// field: 'emergencyDegree', |
|
|
|
// editable: { |
|
|
|
// type: 'select', // 使用下拉选择框作为编辑类型 |
|
|
|
// source: aftersalesDatas, // 这里需要一个数组，包含{value: 'dictValue', text: 'dictLabel'}格式的项 |
|
|
|
// }, |
|
|
|
// formatter: function(value, row, index) { |
|
|
|
// // 格式化显示值，类似于thymeleaf模板中的th:text |
|
|
|
// return $.table.selectDictLabel(aftersalesDatas, value); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
|
|
|
|
// { |
|
|
|
// field: 'emergencyDegree', |
|
|
|
// title: '紧急程度', |
|
|
|
// // 使用formatter处理显示值 |
|
|
|
// formatter: function(value, row, index) { |
|
|
|
// var dictItem = aftersalesDatas.find(function(dict) { |
|
|
|
// return dict.dictValue === value; |
|
|
|
// }); |
|
|
|
// return dictItem ? dictItem.dictLabel : ''; |
|
|
|
// }, |
|
|
|
// // 编辑时的配置 |
|
|
|
// editor: { |
|
|
|
// type: 'select', |
|
|
|
// options: aftersalesDatas.map(function(item) { |
|
|
|
// return {value: item.dictValue, text: item.dictLabel}; |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
title: '售后问题', |
|
|
|
field: 'adverseReportUrl', |
|
|
|
editable: { |
|
|
|
type: 'text', // 表示该列可以被编辑为文本 |
|
|
|
|
|
|
|
// 可以在这里定义更多编辑行为，比如验证、提交等 |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '不良报告', |
|
|
|
field: 'adverseReportUrl', |
|
|
|
formatter: function(value, row, index) { |
|
|
|
// 这里根据value（文件URL）生成相应的HTML来展示预览或链接 |
|
|
|
if(value) { |
|
|
|
return `<a href="${value}" target="_blank">查看报告</a>`; |
|
|
|
} else { |
|
|
|
return '无报告'; |
|
|
|
} |
|
|
|
}, |
|
|
|
// 添加自定义属性，用于后续编辑时识别 |
|
|
|
editOptions: { |
|
|
|
type: 'custom', |
|
|
|
events: { |
|
|
|
'click .edit-btn': function(e, value, row, index) { |
|
|
|
// 点击编辑时触发的事件，可以在这里打开上传对话框 |
|
|
|
// 注意这里的逻辑需要你手动编写 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
align: 'center', |
|
|
|
@ -382,6 +415,53 @@ |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function imageFormatter(value, row, index) { |
|
|
|
if (value) { |
|
|
|
return '<img src="' + value + '" alt="不良报告" height="50"/>'; |
|
|
|
} |
|
|
|
return ''; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
new Vue({ |
|
|
|
el: '#app', |
|
|
|
data: function() { |
|
|
|
return { |
|
|
|
fileList: [], |
|
|
|
fileUploadUrl: ctx + "common/uploadSingleFile", |
|
|
|
fileDeleteUrl: ctx + "common/deleteFile", |
|
|
|
fileIdList:[], |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// ... 其它已有的方法 ... |
|
|
|
|
|
|
|
openUploadModal(row) { |
|
|
|
$('#uploadModal').modal('show'); |
|
|
|
this.currentRow = row; // 记录当前编辑行 |
|
|
|
}, |
|
|
|
|
|
|
|
saveFile() { |
|
|
|
// 假设你已经处理了文件上传逻辑，这里直接更新表格数据 |
|
|
|
if(this.fileList.length > 0) { |
|
|
|
this.currentRow.adverseReportUrl = this.fileList[0].url; // 假设只上传一个文件，取第一个文件的URL |
|
|
|
$('#uploadModal').modal('hide'); // 关闭模态框 |
|
|
|
// 这里可能还需要调用Bootstrap Table的refresh方法来刷新表格 |
|
|
|
} else { |
|
|
|
$.modal.alertWarning("请先上传文件。"); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// ... 其它已有的方法 ... |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// 绑定Bootstrap Table的编辑按钮事件 |
|
|
|
$('table').on('click', '.edit-btn', function(e) { |
|
|
|
const index = $(e.currentTarget).closest('tr').data('index'); |
|
|
|
this.openUploadModal(this.tableData[index]); // 假设tableData是Bootstrap Table的数据源 |
|
|
|
}.bind(this)); |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
