requestheaders

src/views/manage/service/detail.vue

@@ -82,7 +82,7 @@
                   :span="24"
                   v-model:param="scope.row.value"
                   :readonly="scope.row.type == 3"
-                  @click="onClickComplexParams(scope.row, scope.$index)"
+                  @click="onClickComplexRequestParams(scope.row, scope.$index)"
                 />
               </template>
               <template #label-column-value="{scope}">
@@ -93,17 +93,65 @@
                 />
               </template>
               <template #do-column-value="{scope}">
-                <CusButton type="table-del" @click="state.params.requestParams.data.splice(scope.$index, 1)"/>
+                <CusButton v-if="state.params.requestParams.data.length > 1" type="table-del" @click="state.params.requestParams.data.splice(scope.$index, 1)"/>
+              </template>
+            </CusTable>
+          </div>
+        </template>
+        <template v-else-if="state.params.tab == 2">
+          <div class="request-headers">
+            <CusButton type="main" title="新增" style="margin: 0 auto 10px 0;" @click="state.params.requestHeaders.data.push({key: '', type: '1', value: '', valueTable: []})"/>
+            <CusTable
+              :data="state.params.requestHeaders.data"
+              :table-head="state.params.requestHeaders.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="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="onClickComplexRequestHeaders(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.requestHeaders.data.length > 1" type="table-del" @click="state.params.requestHeaders.data.splice(scope.$index, 1)"/>
               </template>
             </CusTable>
           </div>
         </template>
-        <template v-else-if="state.params.tab == 2"></template>
         <template v-else-if="state.params.tab == 3"></template>
         <template v-else-if="state.params.tab == 4"></template>
       </div>
     </div>
-    <complexParams v-model:show="state.complexParams.show" :transfer="state.complexParams.transfer" @complex="getComplex"/>
+    <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"/>
   </CusDialog>
 </template>
 
@@ -111,7 +159,7 @@
 import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
 import {useDictionaryStore} from "@/stores";
 import {ElMessage, ElMessageBox} from "element-plus";
-import complexParams from './complex-params.vue'
+import complexRequestParams from './complex-params.vue'
 
 const emit = defineEmits(['update:show', 'refresh'])
 const {proxy} = getCurrentInstance()
@@ -140,9 +188,24 @@ const state: any = reactive({
         {value: "do", label: "操作", width: 120, fixed: 'right'},
       ],
       data: []
+    },
+    requestHeaders: {
+      tableHead: [
+        {value: "key", label: "键名"},
+        {value: "type", label: "类型", width: 160},
+        {value: "value", label: `取值（动态取值：\${变量名}）`},
+        {value: "label", label: "含义"},
+        {value: "do", label: "操作", width: 120, fixed: 'right'},
+      ],
+      data: []
     }
   },
-  complexParams: {
+  complexRequestParams: {
+    show: false,
+    transfer: {},
+    index: 0
+  },
+  complexRequestHeaders: {
     show: false,
     transfer: {},
     index: 0
@@ -160,13 +223,16 @@ const titleCpt = computed(() => {
   return t
 })
 const onSubmit = () => {
-  console.log(state.params.requestParams.data)
-  let flag = state.params.requestParams.data.every(v => proxy.$util.isValue(v.key) && proxy.$util.isValue(v.value))
-  if (!flag) {
+  if (!state.params.requestParams.data.every(v => proxy.$util.isValue(v.key) && proxy.$util.isValue(v.value))) {
     ElMessage.error('请完善Request Params参数信息！')
     state.params.tab = 1
     return
   }
+  if (!state.params.requestHeaders.data.every(v => proxy.$util.isValue(v.key) && proxy.$util.isValue(v.value))) {
+    ElMessage.error('请完善Request Headers参数信息！')
+    state.params.tab = 2
+    return
+  }
   ref_form.value.submit().then(() => {
     ElMessageBox.confirm("是否提交?", "提示", {
       confirmButtonText: "确定",
@@ -216,19 +282,33 @@ const initDetail = () => {
   //   state.loading = false
   // })
 }
-const onClickComplexParams = (row, index) => {
+const onClickComplexRequestParams = (row, index) => {
+  if (row.type == 3) {
+    state.complexRequestParams.transfer = {
+      value: row.value,
+      valueTable: row.valueTable,
+      index: index
+    }
+    state.complexRequestParams.show = true
+  }
+}
+const getComplexRequestParams = ({str, table}) => {
+  state.params.requestParams.data[state.complexRequestParams.transfer.index].value = str
+  state.params.requestParams.data[state.complexRequestParams.transfer.index].valueTable = table
+}
+const onClickComplexRequestHeaders = (row, index) => {
   if (row.type == 3) {
-    state.complexParams.transfer = {
+    state.complexRequestHeaders.transfer = {
       value: row.value,
       valueTable: row.valueTable,
       index: index
     }
-    state.complexParams.show = true
+    state.complexRequestHeaders.show = true
   }
 }
-const getComplex = ({str, table}) => {
-  state.params.requestParams.data[state.complexParams.transfer.index].value = str
-  state.params.requestParams.data[state.complexParams.transfer.index].valueTable = table
+const getComplexRequestHeaders = ({str, table}) => {
+  state.params.requestHeaders.data[state.complexRequestHeaders.transfer.index].value = str
+  state.params.requestHeaders.data[state.complexRequestHeaders.transfer.index].valueTable = table
 }
 watch(() => props.show, (n) => {
   if (n) {
@@ -239,9 +319,9 @@ watch(() => props.show, (n) => {
     // } else {
     //   initDetail()
     // }
-    // nextTick(() => {
-    //   ref_form.value.reset()
-    // })
+    nextTick(() => {
+      ref_form.value.reset()
+    })
   }
 })
 const initDictionary = () => {
@@ -260,7 +340,7 @@ const initDictionary = () => {
   flex: 1;
   margin-top: 20px;
   overflow: hidden;
-  .request-params {
+  .request-params, .request-headers {
     width: 100%;
     height: 100%;
     display: flex;