feat: 新增请求编辑页面

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -166,7 +166,7 @@ const dimensionsAndSourceHandle = () => {
 // 过滤结果
 const filterRes = (data: any) => {
   try {
-    if(targetData.value.filter) {
+    if (targetData.value.filter) {
       const fn = new Function('data', targetData.value.filter)
       const res = fn(cloneDeep(data))
       return toString(res)

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue

@@ -7,16 +7,73 @@
       </n-tabs>
     </div>
     <div v-show="requestContentType === RequestContentTypeEnum.DEFAULT">
-      <n-tabs type="line" animated>
+      <n-tabs type="line" animated v-model:value="tabValue">
         <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
       </n-tabs>
+
+      <!-- 各个页面 -->
+      <div class="tabs-content go-mt-3">
+        <div v-if="tabValue !== RequestParamsTypeEnum.BODY">
+          <request-header-table :target="requestParams[tabValue]" @update="updateRequestParams"></request-header-table>
+        </div>
+
+        <!-- 选择了 body -->
+        <div v-else>
+          <n-radio-group v-model:value="requestParamsBodyType" name="radiogroup">
+            <n-space>
+              <n-radio v-for="bodyEnum in RequestBodyEnumList" :key="bodyEnum" :value="bodyEnum">
+                {{ bodyEnum }}
+              </n-radio>
+            </n-space>
+          </n-radio-group>
+
+          <!-- 为 none 时 -->
+          <n-card class="go-mt-3" v-if="requestParamsBodyType === RequestBodyEnum['NONE']">
+            <n-text depth="3">该请求没有 Body 体</n-text>
+          </n-card>
+
+          <!-- 具有对象属性时 -->
+          <template
+            v-else-if="
+              requestParamsBodyType === RequestBodyEnum['FORM_DATA'] ||
+              requestParamsBodyType === RequestBodyEnum['X_WWW_FORM_URLENCODED']
+            "
+          >
+            <request-header-table
+              class="go-mt-3"
+              :target="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"
+              @update="updateRequestBodyTable"
+            ></request-header-table>
+          </template>
+
+          <!-- json  -->
+          <template v-else-if="requestParamsBodyType === RequestBodyEnum['JSON']">
+            <monaco-editor
+              v-model:modelValue="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"
+              width="600px"
+              height="200px"
+              language="json"
+            />
+          </template>
+
+          <!-- xml  -->
+          <template v-else-if="requestParamsBodyType === RequestBodyEnum['XML']">
+            <monaco-editor
+              v-model:modelValue="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"
+              width="600px"
+              height="200px"
+              language="html"
+            />
+          </template>
+        </div>
+      </div>
     </div>
     <div v-show="requestContentType === RequestContentTypeEnum.SQL">
       <setting-item-box name="键名">
-        <n-input v-model:value.trim="sqlObject.key" :min="1" placeholder="请输入内容" />
+        <n-tag type="primary" :bordered="false" style="width: 40px; font-size: 16px"> sql </n-tag>
       </setting-item-box>
       <setting-item-box name="键值">
-        <monaco-editor v-model:modelValue="sqlObject.value" width="600px" height="200px" language="sql" />
+        <monaco-editor v-model:modelValue="requestSQLContent['sql']" width="600px" height="200px" language="sql" />
       </setting-item-box>
     </div>
   </n-space>
@@ -24,20 +81,44 @@
 
 <script setup lang="ts">
 import { reactive, ref, toRefs } from 'vue'
-import { RequestParamsTypeEnum, RequestContentTypeEnum ,RequestBodyEnum } from '@/enums/httpEnum'
+
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { RequestHeaderTable } from '../RequestHeaderTable/index'
 
-const { targetData, chartEditStore } = useTargetData()
+import {
+  RequestParamsTypeEnum,
+  RequestContentTypeEnum,
+  RequestParamsObjType,
+  RequestBodyEnumList,
+  RequestBodyEnum
+} from '@/enums/httpEnum'
 
-const { requestContentType } = toRefs(targetData.value.request)
+const { targetData } = useTargetData()
 
-const tabValue = ref(RequestParamsTypeEnum.NONE)
-const sqlObject = reactive({
-  key: 'sql',
-  value: 'select * from  where'
-})
+const { requestContentType, requestSQLContent, requestParams, requestParamsBodyType } = toRefs(targetData.value.request)
+
+const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)
+
+// 更新参数表格数据
+const updateRequestParams = (paramsObj: RequestParamsObjType) => {
+  if (tabValue.value !== RequestParamsTypeEnum.BODY) {
+    requestParams.value[tabValue.value] = paramsObj
+  }
+}
+
+// 更新参数表格数据
+const updateRequestBodyTable = (paramsObj: RequestParamsObjType) => {
+  if (
+    tabValue.value === RequestParamsTypeEnum.BODY &&
+    // 仅有两种类型有 body
+    (requestParamsBodyType.value === RequestBodyEnum.FORM_DATA ||
+      requestParamsBodyType.value === RequestBodyEnum.X_WWW_FORM_URLENCODED)
+  ) {
+    requestParams.value[RequestParamsTypeEnum.BODY][requestParamsBodyType.value] = paramsObj
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.vue

@@ -1,11 +1,160 @@
 <template>
-  <n-scrollbar style="max-height: 250px"> 
-    <n-h1>2321</n-h1>
+  <n-scrollbar style="max-height: 250px">
+    <n-table class="go-request-header-table-box" :single-line="false" size="small">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Key</th>
+          <th>Value</th>
+          <th>操作</th>
+          <th>结果</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableArray.content" :key="index">
+          <td>
+            {{ index + 1 }}
+          </td>
+          <td>
+            <n-input v-model:value="item.key" type="text" size="small" @blur="blur" />
+          </td>
+          <td>
+            <n-input v-model:value="item.value" type="text" size="small" @blur="blur" />
+          </td>
+          <td>
+            <div style="width: 80px">
+              <n-button class="go-ml-2" type="primary" size="small" ghost @click="add(index)">+</n-button>
+              <n-button
+                class="go-ml-2"
+                type="warning"
+                size="small"
+                ghost
+                :disabled="index === 0"
+                @click="remove(index)"
+              >
+                -
+              </n-button>
+            </div>
+          </td>
+          <td>
+            <n-button v-if="item.error" class="go-ml-2" text type="error"> 格式错误 </n-button>
+            <n-button v-else class="go-ml-2" text type="success"> 格式通过 </n-button>
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
   </n-scrollbar>
 </template>
 
 <script setup lang="ts">
-import { RequestBodyEnum, RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { PropType, reactive, ref, toRefs, watch } from 'vue'
+import { RequestBodyEnum, RequestParamsObjType } from '@/enums/httpEnum'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+
+const emits = defineEmits(['update'])
+
+const props = defineProps({
+  target: {
+    type: Object as PropType<RequestParamsObjType>,
+    required: true,
+    default: () => {}
+  }
+})
+
+const { targetData } = useTargetData()
+const { requestParams } = toRefs(targetData.value.request)
+
+// 错误标识
+const error = ref(false)
+
+// 默认表格
+const defaultItem = {
+  key: '',
+  value: '',
+  error: false
+}
+const tableArray = reactive<{
+  content: typeof defaultItem[]
+}>({ content: [] })
+
+// 失焦
+const blur = () => {
+  let successNum = 0
+  tableArray.content.forEach(item => {
+    if ((item.key !== '' && item.value == '') || (item.key === '' && item.value !== '')) {
+      // 错误
+      item.error = true
+    } else {
+      // 正确
+      successNum++
+      item.error = false
+    }
+  })
+  // 验证是否全部通过
+  if (successNum == tableArray.content.length) {
+    // 转换数据成对象
+    const updateObj: any = {}
+    tableArray.content.forEach((e: typeof defaultItem) => {
+      if (e.key) updateObj[e.key] = e.value
+    })
+    emits('update', updateObj)
+  }
+}
+
+// 新增
+const add = (index: number) => {
+  tableArray.content.splice(index + 1, 0, {
+    key: '',
+    value: '',
+    error: false
+  })
+}
+
+// 减少
+const remove = (index: number) => {
+  if (tableArray.content.length !== 1) {
+    tableArray.content.splice(index, 1)
+  }
+  blur()
+}
+
+// 监听选项
+watch(
+  () => props.target,
+  (target: RequestParamsObjType) => {
+    tableArray.content = []
+    for (const k in target) {
+      tableArray.content.push({
+        key: k,
+        value: target[k],
+        error: false
+      })
+    }
+    // 默认值
+    if (!tableArray.content.length) tableArray.content = [JSON.parse(JSON.stringify(defaultItem))]
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+@include go('request-header-table-box') {
+  background-color: rgba(0, 0, 0, 0);
+  @include deep() {
+    .n-data-table .n-data-table-td {
+      background-color: rgba(0, 0, 0, 0);
+    }
+    .add-btn-box {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      .add-btn {
+        width: 300px;
+      }
+    }
+  }
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -7,7 +7,7 @@
       gridTemplateColumns: '5fr 2fr 1fr'
     }"
   >
-    <setting-item name="请求 URL">
+    <setting-item name="请求方式 & URL 地址">
       <n-input-group>
         <n-select class="select-type-options" v-model:value="requestHttpType" :options="selectTypeOptions" />
         <n-input v-model:value.trim="requestUrl" :min="1" placeholder="请输入地址（去除源）">
@@ -55,11 +55,10 @@ import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfi
 import { RequestHeader } from '../RequestHeader'
 import { icon } from '@/plugins'
 
-const { PencilIcon, FlashIcon } = icon.ionicons5
+const { FlashIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
 const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
 const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(targetData.value.request)
-const disabled = ref(true)
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -11,7 +11,7 @@
       <template #action>
         <n-space justify="space-between">
           <div>
-            <n-text>「 柱状图 」</n-text>
+            <n-text>「 {{chartConfig.categoryName ||rename}} 」</n-text>
             <n-text>—— </n-text>
             <n-tag type="primary" :bordered="false"> {{requestContentTypeObj[requestContentType]}} </n-tag>
           </div>
@@ -31,8 +31,9 @@ import { RequestTargetConfig } from './components/RequestTargetConfig'
 
 const emit = defineEmits(['update:modelShow'])
 
-const { targetData, chartEditStore } = useTargetData()
+const { targetData } = useTargetData()
 // 解构基础配置
+const { chartConfig, rename } = toRefs(targetData.value)
 const { requestContentType } = toRefs(targetData.value.request)
 
 const requestContentTypeObj = {