dyDeliverHtml/src/views/system/log/operlog/compt/childDialog.vue

<template>
  <div class="dialog">
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="600px"
        @close="closeDialog()"
    >
      <el-form
          ref="formRef"
          :model="formData"
          label-width="120px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item prop="url" label="请求地址">
              <el-input disabled v-model="formData.url"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="header" label="请求头部">
              <el-input type="textarea" rows="10" disabled v-model="formData.header"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="params" label="请求参数">
              <el-input type="textarea" rows="10" disabled v-model="formData.params"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog()">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {viewOpLog} from "@/api/system";
import type {FormInstance} from 'element-plus'

let dialogVisible = ref(false)
let dialogTitle = ref("")
const formRef = ref<FormInstance>()
const emit = defineEmits(['dialogChange'])
const formData = reactive({
  params: '',
  header: '',
  url: '',
  id: ""
})

function getItemData(item) {
  console.log(item);
  const data = {
    id: item.esId,
    esIndex: item.esIndex
  }
  viewOpLog(data).then(response => {
    if (response.httpCode == 200) {
      const data = response.data
      formData.url = data.url
      var headerValue = ''
      data.headers.forEach(item => {
        headerValue += item.key + '=' + item.value + '\n'
      })
      formData.header = headerValue
      var paramsValue = ''
      data.params.forEach(item => {
        paramsValue += item.key + '=' + item.value + '\n'
      })
      formData.params = paramsValue
    }
  })
}

/**  重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formData.id = ''
}

/**关闭弹窗 */
function closeDialog() {
  dialogVisible.value = false
  formRef.value.resetFields();
  formData.id = undefined;
}

defineExpose({
  dialogVisible,
  dialogTitle,
  getItemData,
  resetForm
})
</script>


<style scoped lang="scss">

</style>