@open-data-v/data/lib/rest/RestDataView.vue.umd2.cjs.map

OpenDataV 数据处理基础组件包

{"version":3,"file":"RestDataView.vue.umd2.cjs","sources":["../../src/rest/RestDataView.vue"],"sourcesContent":["<template>\n  <o-card>\n    <div class=\"rest-data\">\n      <slot name=\"data-select\"></slot>\n    </div>\n    <div class=\"flex flex-row mt-1\">\n      <div class=\"w-1/4\">\n        <o-select\n          v-model:value=\"formData['method']\"\n          :options=\"requestMethodOptions\"\n          :show-arrow=\"true\"\n          @update-value=\"formChange\"\n        />\n      </div>\n      <div class=\"w-3/4\">\n        <o-input v-model:value=\"formData['url']\" @update-value=\"formChange\" />\n      </div>\n      <div>\n        <o-button type=\"primary\" @click=\"send\">调试</o-button>\n      </div>\n    </div>\n    <div>\n      <o-tabs value=\"query\" justify-content=\"flex-start\">\n        <o-tab-pane name=\"query\" label=\"请求参数\">\n          <DynamicKVForm\n            v-model:value=\"formData['params']\"\n            title=\"请求参数\"\n            @update:value=\"formChange\"\n          />\n        </o-tab-pane>\n        <o-tab-pane name=\"data\" label=\"请求体\">\n          <DynamicKVForm\n            v-model:value=\"formData['data']\"\n            title=\"请求体\"\n            @update:value=\"formChange\"\n          />\n        </o-tab-pane>\n        <o-tab-pane name=\"headers\" label=\"请求头\">\n          <div class=\"headers\">\n            <DynamicKVForm\n              v-model:value=\"formData['headers']\"\n              title=\"请求头\"\n              :options=\"requestHeaderOptions\"\n              @update:value=\"formChange\"\n            />\n          </div>\n        </o-tab-pane>\n      </o-tabs>\n    </div>\n    <div class=\"response\">\n      <o-divider title-placement=\"left\">\n        请求响应\n        <span :class=\"['resp-code', response.status >= 400 ? 'resp-fail' : 'resp-success']\">\n          {{ response.status ? response.status : '' }}\n        </span>\n      </o-divider>\n      <OCodeEditor :value=\"response.data\" height=\"400px\" />\n    </div>\n  </o-card>\n</template>\n<script setup lang=\"ts\">\nimport type { DataInstance } from '@open-data-v/base'\nimport { OButton, OCard, ODivider, OInput, OSelect, OTabPane, OTabs } from '@open-data-v/ui'\nimport { reactive, ref } from 'vue'\n\nimport { uuid } from '../utils'\nimport DynamicKVForm from './DynamicKVForm.vue'\nimport DataHandler from './handler'\nimport { RequestHeaderEnum, RequestMethod } from './requestEnums'\nimport type { RestOption, RestResponse } from './type'\nimport { requestOptionsToStore } from './utils'\n\nconst props = withDefaults(\n  defineProps<{\n    options?: RestOption\n    mode?: 'debug' | 'use'\n    dataInstance?: DataInstance\n  }>(),\n  {\n    options: () => {\n      return {\n        method: RequestMethod.GET,\n        url: '',\n        headers: [{ key: '', value: '', disable: false, id: uuid() }],\n        params: [{ key: '', value: '', disable: false, id: uuid() }],\n        data: [{ key: '', value: '', disable: false, id: uuid() }],\n        otherConfig: {\n          isRepeat: false,\n          interval: 1000\n        }\n      }\n    },\n    mode: 'use'\n  }\n)\n\nconst requestMethodOptions = Object.keys(RequestMethod).map((el) => {\n  return {\n    label: el,\n    value: el\n  }\n})\nconst requestHeaderOptions = Object.keys(RequestHeaderEnum)\n\nconst emits = defineEmits<{\n  (e: 'update:options', value: RestOption): void\n  (e: 'change', value: RestOption): void\n}>()\n\nconst formData = reactive<RestOption>(props.options)\nconst response = ref<RestResponse>({\n  status: 0,\n  data: '',\n  afterData: '',\n  headers: {}\n})\nconst send = async () => {\n  const acceptor = (resp: any) => {\n    response.value.status = resp.status\n    response.value.data = JSON.stringify(resp.data, null, '\\t')\n  }\n  if (!props.dataInstance) {\n    const dataHandler = new DataHandler(requestOptionsToStore(formData))\n    dataHandler.debug(acceptor)\n  } else {\n    props.dataInstance?.debug(acceptor)\n  }\n}\nconst formChange = () => {\n  emits('change', formData)\n  emits('update:options', formData)\n}\n</script>\n\n<style scoped lang=\"less\">\n.response {\n  .resp-fail {\n    color: #f76560;\n    margin-left: 10px;\n  }\n  .resp-code.resp-success {\n    color: #18a058;\n    margin-left: 10px;\n  }\n}\n</style>\n"],"names":["props","__props","requestMethodOptions","RequestMethod","el","requestHeaderOptions","RequestHeaderEnum","emits","__emit","formData","reactive","response","ref","send","acceptor","resp","_a","DataHandler","requestOptionsToStore","formChange"],"mappings":"60BAwEA,MAAMA,EAAQC,EAwBRC,EAAuB,OAAO,KAAKC,EAAa,aAAA,EAAE,IAAKC,IACpD,CACL,MAAOA,EACP,MAAOA,CACT,EACD,EACKC,EAAuB,OAAO,KAAKC,mBAAiB,EAEpDC,EAAQC,EAKRC,EAAWC,EAAAA,SAAqBV,EAAM,OAAO,EAC7CW,EAAWC,EAAAA,IAAkB,CACjC,OAAQ,EACR,KAAM,GACN,UAAW,GACX,QAAS,CAAA,CAAC,CACX,EACKC,EAAO,SAAY,OACjB,MAAAC,EAAYC,GAAc,CACrBJ,EAAA,MAAM,OAASI,EAAK,OAC7BJ,EAAS,MAAM,KAAO,KAAK,UAAUI,EAAK,KAAM,KAAM,GAAI,CAC5D,EACKf,EAAM,cAIHgB,EAAAhB,EAAA,eAAA,MAAAgB,EAAc,MAAMF,GAHN,IAAIG,EAAAA,QAAYC,EAAA,sBAAsBT,CAAQ,CAAC,EACvD,MAAMK,CAAQ,CAI9B,EACMK,EAAa,IAAM,CACvBZ,EAAM,SAAUE,CAAQ,EACxBF,EAAM,iBAAkBE,CAAQ,CAClC"}