样式

src/views/manage/service/complex-params.vue

@@ -107,7 +107,7 @@ const state: any = reactive({
     tableHead: [
       {value: "key", label: "键名"},
       {value: "type", label: "类型", width: 160},
-      {value: "value", label: `取值（动态取值：\${变量名}）`},
+      {value: "value", label: `取值（动态取值：\$['变量名']）`},
       {value: "label", label: "含义"},
       {value: "do", label: "操作", width: 120, fixed: 'right'},
     ],

src/views/manage/service/detail.vue

@@ -61,97 +61,101 @@
         <template v-if="state.params.tab == 1">
           <div class="request-params">
             <CusButton type="main" title="新增" style="margin: 0 auto 10px 0;" @click="state.params.requestParams.data.push({key: '', type: '1', value: '', valueTable: []})"/>
-            <CusTable
-              :data="state.params.requestParams.data"
-              :table-head="state.params.requestParams.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="onClickComplexRequestParams(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 type="table-del" @click="state.params.requestParams.data.splice(scope.$index, 1)"/>
-              </template>
-            </CusTable>
+            <div style="flex: 1; overflow: hidden;">
+              <CusTable
+                :data="state.params.requestParams.data"
+                :table-head="state.params.requestParams.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="onClickComplexRequestParams(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 type="table-del" @click="state.params.requestParams.data.splice(scope.$index, 1)"/>
+                </template>
+              </CusTable>
+            </div>
           </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 type="table-del" @click="state.params.requestHeaders.data.splice(scope.$index, 1)"/>
-              </template>
-            </CusTable>
+            <div style="flex: 1; overflow: hidden;">
+              <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 type="table-del" @click="state.params.requestHeaders.data.splice(scope.$index, 1)"/>
+                </template>
+              </CusTable>
+            </div>
           </div>
         </template>
         <template v-else-if="state.params.tab == 3">
@@ -302,69 +306,70 @@
                   取值类型为JsonPath时，@代表返回的数据（逻辑同上），也可以直接写字段名进行匹配
                 </div>
               </div>
-              <CusTable
-                :data="state.params.responseBody.json.data"
-                :table-head="state.params.responseBody.json.tableHead"
-                :no-page="true"
-              >
-                <template #label-column-value="{scope}">
-                  <CusFormColumn
-                    class="__cus-table-form-column"
-                    :span="24"
-                    v-model:param="scope.row.label"
-                  />
-                </template>
-                <template #key-column-value="{scope}">
-                  <CusFormColumn
-                    class="__cus-table-form-column"
-                    :span="24"
-                    v-model:param="scope.row.key"
-                  />
-                </template>
-                <template #valueType-column-value="{scope}">
-                  <CusFormColumn
-                    class="__cus-table-form-column"
-                    :span="24"
-                    v-model:param="scope.row.valueType"
-                    link="select"
-                    :options="DictionaryStore.qzTypeList"
-                    :clearable="false"
-                  />
-                </template>
-                <template #value-column-value="{scope}">
-                  <CusFormColumn
-                    class="__cus-table-form-column"
-                    :span="24"
-                    v-model:param="scope.row.value"
-                  />
-                </template>
-                <template #formatType-column-value="{scope}">
-                  <CusFormColumn
-                    class="__cus-table-form-column"
-                    :span="24"
-                    v-model:param="scope.row.formatType"
-                    link="select"
-                    :options="DictionaryStore.formatTypeList"
-                    :clearable="false"
-                    @change="scope.row.formatRule = ''"
-                  />
-                </template>
-                <template #formatRule-column-value="{scope}">
-                  <template v-if="scope.row.formatType == 1">
-<!--                    <CusFormColumn-->
-<!--                      class="__cus-table-form-column"-->
-<!--                      :span="24"-->
-<!--                      v-model:param="scope.row.formatRule"-->
-<!--                    />-->
+              <div style="flex: 1; overflow: hidden;">
+                <CusTable
+                  :data="state.params.responseBody.json.data"
+                  :table-head="state.params.responseBody.json.tableHead"
+                  :no-page="true"
+                >
+                  <template #label-column-value="{scope}">
+                    <CusFormColumn
+                      class="__cus-table-form-column"
+                      :span="24"
+                      v-model:param="scope.row.label"
+                    />
                   </template>
-                  <template v-else-if="scope.row.formatType == 2">
+                  <template #key-column-value="{scope}">
                     <CusFormColumn
                       class="__cus-table-form-column"
                       :span="24"
-                      v-model:param="scope.row.formatRule"
+                      v-model:param="scope.row.key"
+                    />
+                  </template>
+                  <template #valueType-column-value="{scope}">
+                    <CusFormColumn
+                      class="__cus-table-form-column"
+                      :span="24"
+                      v-model:param="scope.row.valueType"
                       link="select"
-                      static
-                      :options="[
+                      :options="DictionaryStore.qzTypeList"
+                      :clearable="false"
+                    />
+                  </template>
+                  <template #value-column-value="{scope}">
+                    <CusFormColumn
+                      class="__cus-table-form-column"
+                      :span="24"
+                      v-model:param="scope.row.value"
+                    />
+                  </template>
+                  <template #formatType-column-value="{scope}">
+                    <CusFormColumn
+                      class="__cus-table-form-column"
+                      :span="24"
+                      v-model:param="scope.row.formatType"
+                      link="select"
+                      :options="DictionaryStore.formatTypeList"
+                      :clearable="false"
+                      @change="scope.row.formatRule = ''"
+                    />
+                  </template>
+                  <template #formatRule-column-value="{scope}">
+                    <template v-if="scope.row.formatType == 1">
+                      <!--                    <CusFormColumn-->
+                      <!--                      class="__cus-table-form-column"-->
+                      <!--                      :span="24"-->
+                      <!--                      v-model:param="scope.row.formatRule"-->
+                      <!--                    />-->
+                    </template>
+                    <template v-else-if="scope.row.formatType == 2">
+                      <CusFormColumn
+                        class="__cus-table-form-column"
+                        :span="24"
+                        v-model:param="scope.row.formatRule"
+                        link="select"
+                        static
+                        :options="[
                         {dictLabel: 'yyyy', dictValue: 'yyyy'},
                         {dictLabel: 'yyyy-MM', dictValue: 'yyyy-MM'},
                         {dictLabel: 'yyyy-MM-dd', dictValue: 'yyyy-MM-dd'},
@@ -372,23 +377,24 @@
                         {dictLabel: 'yyyy-MM-dd HH:mm', dictValue: 'yyyy-MM-dd HH:mm'},
                         {dictLabel: 'yyyy-MM-dd HH:mm:ss', dictValue: 'yyyy-MM-dd HH:mm:ss'},
                       ]"
-                      :clearable="false"
-                    />
+                        :clearable="false"
+                      />
+                    </template>
+                    <template v-else-if="scope.row.formatType == 3">
+                      <CusFormColumn
+                        class="__cus-table-form-column"
+                        :span="24"
+                        v-model:param="scope.row.formatRule"
+                        :readonly="true"
+                        @click="onClickFormatRuleDictJson(scope.row, scope.$index)"
+                      />
+                    </template>
                   </template>
-                  <template v-else-if="scope.row.formatType == 3">
-                    <CusFormColumn
-                      class="__cus-table-form-column"
-                      :span="24"
-                      v-model:param="scope.row.formatRule"
-                      :readonly="true"
-                      @click="onClickFormatRuleDictJson(scope.row, scope.$index)"
-                    />
+                  <template #do-column-value="{scope}">
+                    <CusButton  type="table-del" @click="state.params.responseBody.json.data.splice(scope.$index, 1)"/>
                   </template>
-                </template>
-                <template #do-column-value="{scope}">
-                  <CusButton  type="table-del" @click="state.params.responseBody.json.data.splice(scope.$index, 1)"/>
-                </template>
-              </CusTable>
+                </CusTable>
+              </div>
             </template>
             <template v-if="state.params.responseBody.type == 2">
               <CusTable
@@ -488,29 +494,31 @@
                   :clearable="false"
                 />
               </div>
-              <CusTable
-                :data="state.params.responseBody.other.data"
-                :table-head="state.params.responseBody.other.tableHead"
-                :no-page="true"
-              >
-                <template #label-column-value="{scope}">
-                  <CusFormColumn
-                    class="__cus-table-form-column"
-                    :span="24"
-                    v-model:param="scope.row.label"
-                  />
-                </template>
-                <template #key-column-value="{scope}">
-                  <CusFormColumn
-                    class="__cus-table-form-column"
-                    :span="24"
-                    v-model:param="scope.row.key"
-                  />
-                </template>
-                <template #do-column-value="{scope}">
-                  <CusButton type="table-del" @click="state.params.requestBody.other.data.splice(scope.$index, 1)"/>
-                </template>
-              </CusTable>
+              <div style="flex: 1; overflow: hidden;">
+                <CusTable
+                  :data="state.params.responseBody.other.data"
+                  :table-head="state.params.responseBody.other.tableHead"
+                  :no-page="true"
+                >
+                  <template #label-column-value="{scope}">
+                    <CusFormColumn
+                      class="__cus-table-form-column"
+                      :span="24"
+                      v-model:param="scope.row.label"
+                    />
+                  </template>
+                  <template #key-column-value="{scope}">
+                    <CusFormColumn
+                      class="__cus-table-form-column"
+                      :span="24"
+                      v-model:param="scope.row.key"
+                    />
+                  </template>
+                  <template #do-column-value="{scope}">
+                    <CusButton type="table-del" @click="state.params.responseBody.other.data.splice(scope.$index, 1)"/>
+                  </template>
+                </CusTable>
+              </div>
             </template>
           </div>
         </template>
@@ -550,7 +558,7 @@ const state: any = reactive({
       tableHead: [
         {value: "key", label: "键名"},
         {value: "type", label: "类型", width: 160},
-        {value: "value", label: `取值（动态取值：\${变量名}）`},
+        {value: "value", label: `取值（动态取值：\$['变量名']）`},
         {value: "label", label: "含义"},
         {value: "do", label: "操作", width: 120, fixed: 'right'},
       ],
@@ -560,7 +568,7 @@ const state: any = reactive({
       tableHead: [
         {value: "key", label: "键名"},
         {value: "type", label: "类型", width: 160},
-        {value: "value", label: `取值（动态取值：\${变量名}）`},
+        {value: "value", label: `取值（动态取值：\$['变量名']）`},
         {value: "label", label: "含义"},
         {value: "do", label: "操作", width: 120, fixed: 'right'},
       ],
@@ -572,7 +580,7 @@ const state: any = reactive({
       tableHead: [
         {value: "key", label: "键名"},
         {value: "type", label: "类型", width: 160},
-        {value: "value", label: `取值（动态取值：\${变量名}）`},
+        {value: "value", label: `取值（动态取值：\$['变量名']）`},
         {value: "label", label: "含义"},
         {value: "do", label: "操作", width: 120, fixed: 'right'},
       ],