<template> <a-spin :spinning="confirmLoading"> <j-form-container :disabled="formDisabled"> <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> <a-row> <a-col :span="24"> <a-form-model-item label="接口名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="apiName"> <a-input v-model="model.apiName" placeholder="请输入接口名称"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="请求类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="apiMethod"> <a-input v-model="model.apiMethod" placeholder="请输入请求类型"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="请求方名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="requestFrom"> <a-input v-model="model.requestFrom" placeholder="请输入请求方名称"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="请求方IP" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ip"> <a-input v-model="model.ip" placeholder="请输入请求方IP"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="请求地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="url"> <a-input v-model="model.url" placeholder="请输入请求地址"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="请求内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="requestBody"> <a-input v-model="model.requestBody" placeholder="请输入请求内容"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="响应方名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="responseBy"> <a-input v-model="model.responseBy" placeholder="请输入响应方名称"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="响应内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="responseBody"> <a-input v-model="model.responseBody" placeholder="请输入响应内容"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="请求时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="requestTime"> <j-date placeholder="请选择请求时间" v-model="model.requestTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="响应时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="responseTime"> <j-date placeholder="请选择响应时间" v-model="model.responseTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="响应耗时(毫秒)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="duration"> <a-input v-model="model.duration" placeholder="请输入响应耗时(毫秒)"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="httpCode" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="httpCode"> <a-input-number v-model="model.httpCode" placeholder="请输入httpCode" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="业务响应码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="retCode"> <a-input-number v-model="model.retCode" placeholder="请输入业务响应码" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="异常堆栈信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exception"> <a-input v-model="model.exception" placeholder="请输入异常堆栈信息"></a-input> </a-form-model-item> </a-col> </a-row> </a-form-model> </j-form-container> </a-spin> </template> <script> import {httpAction, getAction} from '@/api/manage' import {validateDuplicateValue} from '@/utils/util' export default { name: 'ApiLogForm', components: {}, props: { //表单禁用 disabled: { type: Boolean, default: false, required: false } }, data() { return { model: {}, labelCol: { xs: {span: 24}, sm: {span: 5}, }, wrapperCol: { xs: {span: 24}, sm: {span: 16}, }, confirmLoading: false, validatorRules: {}, url: { add: "/monitor/apiLog/add", edit: "/monitor/apiLog/edit", queryById: "/monitor/apiLog/queryById" } } }, computed: { formDisabled() { return this.disabled }, }, created() { //备份model原始值 this.modelDefault = JSON.parse(JSON.stringify(this.model)); }, methods: { add() { this.edit(this.modelDefault); }, edit(record) { this.model = Object.assign({}, record); this.visible = true; }, submitForm() { const that = this; // 触发表单验证 this.$refs.form.validate(valid => { if (valid) { that.confirmLoading = true; let httpurl = ''; let method = ''; if (!this.model.id) { httpurl += this.url.add; method = 'post'; } else { httpurl += this.url.edit; method = 'put'; } httpAction(httpurl, this.model, method).then((res) => { if (res.success) { that.$message.success(res.message); that.$emit('ok'); } else { that.$message.warning(res.message); } }).finally(() => { that.confirmLoading = false; }) } }) }, } } </script>