request headers

src/views/manage/service/detail.vue

@@ -146,12 +146,98 @@
             </CusTable>
           </div>
         </template>
-        <template v-else-if="state.params.tab == 3"></template>
+        <template v-else-if="state.params.tab == 3">
+          <div class="request-body">
+            <CusForm>
+              <CusFormColumn
+                :span="24"
+                v-model:param="state.params.requestBody.type"
+                link="radio"
+                :options="DictionaryStore.RequestBodyList"
+                @change="onChangeRequestBodyType"
+              />
+              <CusFormColumn
+                v-if="['RAW_JSON', 'RAW_TEXT', 'RAW_XML', 'RAW_HTML'].includes(state.params.requestBody.type)"
+                :span="24"
+                required
+                type="textarea"
+                v-model:param="state.params.requestBody.str"
+                :rows="12"
+                :rules="[
+                  {
+                    handle: (val) => {
+                      try {
+                        const a = JSON.parse(val)
+                        return true
+                      } catch (e) {
+                        return false
+                      }
+                    },
+                    message: 'JSON结构异常'
+                  }
+              ]"
+              />
+            </CusForm>
+            <template v-if="state.params.requestBody.type !== 'NONE'">
+              <div style="margin-bottom: 10px; display: flex">
+                <CusButton type="main" title="新增" style="margin-right: auto;" @click="state.params.requestBody.data.push({key: '', type: '1', value: '', valueTable: []})"/>
+                <template v-if="['RAW_JSON', 'RAW_TEXT', 'RAW_XML', 'RAW_HTML'].includes(state.params.requestBody.type)">
+                  <CusButton type="main" title="正向解析JSON结构" style="margin-left: auto" @click="jsonToTable"/>
+                  <CusButton type="main" title="逆向生成JSON结构" @click="tableToJson"/>
+                </template>
+              </div>
+              <CusTable
+                :data="state.params.requestBody.data"
+                :table-head="state.params.requestBody.tableHead"
+                :no-page="true"
+              >
+                <template #key-column-value="{scope}">
+                  <CusFormColumn
+                    class="__cus-table-form-column"
+                    :span="24"
+                    v-model:param="scope.row.key"
+                  />
+                </template>
+                <template #type-column-value="{scope}">
+                  <CusFormColumn
+                    class="__cus-table-form-column"
+                    :span="24"
+                    v-model:param="scope.row.type"
+                    link="select"
+                    :options="['RAW_JSON', 'RAW_TEXT', 'RAW_XML', 'RAW_HTML'].includes(state.params.requestBody.type) ? DictionaryStore.requestParamsList.filter(v => v.dictValue != 3) : DictionaryStore.requestParamsList"
+                    :clearable="false"
+                    @change="(val) => (scope.row.value = '', scope.row.valueTable = [])"
+                  />
+                </template>
+                <template #value-column-value="{scope}">
+                  <CusFormColumn
+                    class="__cus-table-form-column"
+                    :span="24"
+                    v-model:param="scope.row.value"
+                    :readonly="scope.row.type == 3"
+                    @click="onClickComplexRequestBody(scope.row, scope.$index)"
+                  />
+                </template>
+                <template #label-column-value="{scope}">
+                  <CusFormColumn
+                    class="__cus-table-form-column"
+                    :span="24"
+                    v-model:param="scope.row.label"
+                  />
+                </template>
+                <template #do-column-value="{scope}">
+                  <CusButton v-if="state.params.requestBody.data.length > 1" type="table-del" @click="state.params.requestBody.data.splice(scope.$index, 1)"/>
+                </template>
+              </CusTable>
+            </template>
+          </div>
+        </template>
         <template v-else-if="state.params.tab == 4"></template>
       </div>
     </div>
     <complexRequestParams v-model:show="state.complexRequestParams.show" :transfer="state.complexRequestParams.transfer" @complex="getComplexRequestParams"/>
     <complexRequestParams v-model:show="state.complexRequestHeaders.show" :transfer="state.complexRequestHeaders.transfer" @complex="getComplexRequestHeaders"/>
+    <complexRequestParams v-model:show="state.complexRequestBody.show" :transfer="state.complexRequestBody.transfer" @complex="getComplexRequestBody"/>
   </CusDialog>
 </template>
 
@@ -198,6 +284,18 @@ const state: any = reactive({
         {value: "do", label: "操作", width: 120, fixed: 'right'},
       ],
       data: []
+    },
+    requestBody: {
+      type: 'NONE',
+      str: '',
+      tableHead: [
+        {value: "key", label: "键名"},
+        {value: "type", label: "类型", width: 160},
+        {value: "value", label: `取值（动态取值：\${变量名}）`},
+        {value: "label", label: "含义"},
+        {value: "do", label: "操作", width: 120, fixed: 'right'},
+      ],
+      data: []
     }
   },
   complexRequestParams: {
@@ -209,6 +307,11 @@ const state: any = reactive({
     show: false,
     transfer: {},
     index: 0
+  },
+  complexRequestBody: {
+    show: false,
+    transfer: {},
+    index: 0
   }
 })
 const ref_form = ref()
@@ -310,6 +413,49 @@ const getComplexRequestHeaders = ({str, table}) => {
   state.params.requestHeaders.data[state.complexRequestHeaders.transfer.index].value = str
   state.params.requestHeaders.data[state.complexRequestHeaders.transfer.index].valueTable = table
 }
+const onClickComplexRequestBody = (row, index) => {
+  if (row.type == 3) {
+    state.complexRequestBody.transfer = {
+      value: row.value,
+      valueTable: row.valueTable,
+      index: index
+    }
+    state.complexRequestBody.show = true
+  }
+}
+const getComplexRequestBody = ({str, table}) => {
+  state.params.requestBody.data[state.complexRequestBody.transfer.index].value = str
+  state.params.requestBody.data[state.complexRequestBody.transfer.index].valueTable = table
+}
+const jsonToTable = () => {
+  try {
+    const json = JSON.parse(state.params.requestBody.str)
+    state.params.requestBody.data = []
+    Object.entries(json).forEach(([k, v]) => {
+      state.params.requestBody.data.push({
+        key: k, value: typeof v === 'object' ? JSON.stringify(v): v, type: '2'
+      })
+    })
+  } catch (e) {
+    ElMessage.error('JSON结构异常！')
+  }
+}
+const tableToJson = () => {
+  const obj = {}
+  state.params.requestBody.data.forEach(v => {
+    obj[v.key] = v.value
+  })
+  state.params.requestBody.str = JSON.stringify(obj)
+}
+const onChangeRequestBodyType = (val) => {
+  if (['RAW_JSON', 'RAW_TEXT', 'RAW_XML', 'RAW_HTML'].includes(val)) {
+    state.params.requestBody.data.forEach(v => {
+      if (v.type == 3) {
+        v.type = ''
+      }
+    })
+  }
+}
 watch(() => props.show, (n) => {
   if (n) {
     state.loading = false
@@ -327,6 +473,7 @@ watch(() => props.show, (n) => {
 const initDictionary = () => {
   DictionaryStore.initDict('request_type')
   DictionaryStore.initDict('request_params')
+  DictionaryStore.initDict('request_body')
 }
 </script>
 
@@ -340,7 +487,7 @@ const initDictionary = () => {
   flex: 1;
   margin-top: 20px;
   overflow: hidden;
-  .request-params, .request-headers {
+  .request-params, .request-headers, .request-body {
     width: 100%;
     height: 100%;
     display: flex;