diff --git a/ruoyi-admin/src/main/resources/templates/aftersales/complaintNotice/add.html b/ruoyi-admin/src/main/resources/templates/aftersales/complaintNotice/add.html
index 869d562e..92f34b0f 100644
--- a/ruoyi-admin/src/main/resources/templates/aftersales/complaintNotice/add.html
+++ b/ruoyi-admin/src/main/resources/templates/aftersales/complaintNotice/add.html
@@ -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">&times;</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>
\ No newline at end of file
