点击上传
-   
只能上传jpg/png/zip/pdf文件，且不超过10M
+   
{{tips}}

data() {
    return {
      fileList: [],
      fileNanme: '',
+     tips: '只能上传jpg/png/zip/pdf文件，且不超过10M'
   }
},
methods: {
    uploadSuccess(response, file, fileList) {
      ...
+     this.$refs.upload.clearFiles()
+     this.tips = file.name
    },
  }
}

问题优化后的整体效果如动图

TPMService

后端服务内容涉及数据库方案选择和报告接口实现。

数据库方案

测试报告的存储方式有两种方案：一种是新建一个表单独存报告字段数据，仅和 request 表做外键关联，另一种是在原来的表上加字段，我这里为了方便选择了第二种，跟着做的小伙伴建议使用新建表数据分类保存的方式，看下自己独立思考开发的能力。

报告保存和查询接口

实际上由于报告数据库方案是选择的在Request表中增加字段，所以保存接口是一个更新操作，另外对于发送邮件附件的操作这里需要按照提测平台分享11有关内容进行添加附件的处理。

对于前端页面修改操作，在跳转后还需要个查询报告详细的接口，用于编辑信息的反填，GET方式通过ID仅查询需要的字段。

@test_manager.route("/api/report/info", methods=['GET'])
def getTestReoprt():
    report_id = request.args.get('id')
    resp_success = format.resp_format_success
    resp_failed = format.resp_format_failed

    if not report_id:
        resp_failed.message = '提测 id 不能为空'
        return resp_failed
    connection = pool.connection()
    with connection.cursor() as cursor:
        # 查询提测信息表，返回报告所需要的字段值
        sql = "SELECT id,status,test_desc,test_risks,test_cases,test_bugs,test_file,test_note,test_email FROM request WHERE id={}".format(report_id)
        cursor.execute(sql)
        data = cursor.fetchall()
        if len(data) == 1:
            resp_success['data'] = data[0]
    return resp_success

对于主界面的查看报告详情的数据，则可以沿用表行数据即可。

TPMWeb

参照之前提测页面完成测试报告页面的表单，只不过其中的更多input组件增加type="textarea"属性变成文本域样式。

报告提交&编辑

圈两个重点：

• 添加&编辑报告跳转通过params传参数：动作和Request表ID

// test/manger/index.vue
doReport(row) {
      this.$router.push({ name: 'report', params: { action: 'ADD', id: row.id }})
    },
    updateReport(row) {
      this.$router.push({ name: 'report', params: { action: 'UPDATE', id: row.id }})
    }

• report.vue的上传使用的上节中自定义上传+文章开头tips显示文件的方式。
  

其他参考三个代码文件：

1. src/api/test.js
2. src/views/test/index.vue
3. src/views/test/manger/report.vue

前端页面和方法实现后，来做个联调测试
1）提交测试结果并发送邮件

2）再次编辑测试结果

报告详细查看

与提测详细，点击查看报告操作按钮，弹出对话框展示详细信息。同样圈几处不同点：

1. 对结果要进行数字转汉字格式化
2. 增加对邮件是否发送结果的判断展示
3. 附件通过 或 设置href属性下载

      
        
          {{formatReportInfoStatus(reportInfo.status)}}
          {{reportInfo.test_desc}}
          {{reportInfo.test_risks}}
          {{reportInfo.test_cases}}
          {{reportInfo.test_bugs}}
          
            {{reportInfo.test_file}}
          
          {{reportInfo.test_note}}
          {{reportInfo.test_email===1?'已发送':'未发送或失败'}}
        
      
    

具体的方法实现不再粘贴，请参考src/views/test/manger/report.vue

在附件下载这块开发中遇到了一个chrome浏览器会默认为预览模式而不是直接下载（苹果浏览器按照正常按照文件下载），查询资料，解决方案是对于下载接口 response header 设置Content-Disposition=attachment，经过实际测试 下有效

@test_manager.route("/api/file/download", methods=['GET'])
def downloadFile():
    fimeName = request.args.get('name')

    save_path = os.path.join(os.path.abspath(os.path.dirname(__file__)).split('TPMService')[0], 'TPMService/static')
    response = make_response(send_from_directory(save_path, fimeName, as_attachment=True))
    response.headers["Content-Disposition"] = "attachment; filename={}".format(fimeName)
    return response

@app.errorhandler(413)
def request_entity_too_large(err):
    '''自定义的处理错误方法'''
    resp_failed = format.resp_format_failed
    resp_failed["message"] = '文件超出大小限制10M'
    return resp_failed

@app.after_request
def after_request(response):
    if response.status_code != 200:
        headers = {'content-type': 'application/json'}
        res = make_response(format.resp_format_failed)
        res.headers = headers

        return res
    return response