用例新增、编辑页面

目前设计的平台，在测试用例编辑或新增页面主要包含这几个部分:
1、用例基础信息:用例名称、接口名称、所属模块、用例标签、优先级(会关联用例执行顺序)
2、用例详细信息:请求方法、接口地址、环境地址、
3、请求信息：请求头设置、请求参数(Params、x-www-form-urlencoded、Json等)，响应提取(jsonPath)
用例断言、数据库校验
4、响应信息用于展示响应相关信息：responseHeader、responseBody、Cookies以及request相关信息

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px" style="height: 100vh">
        <div>
          <ul
            v-infinite-scroll="true"
            class="infinite-list"
            style="overflow: auto; height: 100vh"
          >
            <li v-for="i in 10" :key="i" class="infinite-list-item">
              testcase-{{ i }}
            </li>
          </ul>
        </div>
      </el-aside>
      <el-main style="margin-top: 0px">
        <div style="text-align: right">
          <el-button
            type="primary"
            icon="SuccessFilled"
            @click="save"
            v-if="testCase.id"
          >
            保存用例
          </el-button>
          <el-button
            type="danger"
            v-if="testCase.id"
            @click="remove"
            icon="Delete"
          >
            删除用例
          </el-button>
        </div>
        <el-card class="box-card" style="margin: 15px 0px; width: 100%">
          <el-divider content-position="left">用例基础信息</el-divider>
          <el-form label-width="120px" v-if="testCase.id">
            <el-row :gutter="10" style="margin-bottom: 3px">
              <el-col :span="12">
                <el-form-item label="接口模块">
                  <el-select
                    v-model="testCase.moduleId"
                    placeholder="接口模块"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in modules"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接口名称">
                  <el-select
                    v-model="testCase.name"
                    placeholder="请选择接口"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in currentInterfaces"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="用例名称">
                  <el-input
                    placeholder="请输入用例名称"
                    v-model="testCase.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用例标签">
                  <el-input
                    placeholder="请输入用例标签，多个用逗号分隔，如成功、登录"
                    v-model="testCase.marks"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-bottom: 3px">
              <el-col :span="24">
                <el-form-item label="优先级">
                  <el-input-number
                    v-model="testCase.orderIndex"
                    :min="1"
                    :max="10"
                    label="优先级"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-divider content-position="left">
          用例详细信息
          <el-icon><InfoFilled /></el-icon>
        </el-divider>
        <el-card>
          <el-divider content-position="center">接口信息</el-divider>
          <el-form :inline="true">
            <el-form-item class="interface-form">
              <el-select
                clearable
                v-model="selectMethod"
                placeholder="请求方法"
                style="font-weight: bold"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in reqMethods"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="interface-form">
              <el-select
                v-model="selectEnv"
                clearable
                placeholder="请选择测试环境"
                style="margin-left: 50px"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in ['Dev', 'test-1', 'test-2', 'Preview']"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-input
                v-model="host"
                placeholder="http://www.xxx.com"
                style="width: 500px; margin-left: 50px"
              >
                <template #prepend>Host</template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="currentEnv.path"
                style="margin-top: 5px; width: 600px"
              >
                <template #prepend>接口地址:</template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-card>
        <el-divider content-position="center">
          请求信息
          <el-icon><InfoFilled /></el-icon>
        </el-divider>
        <el-card>
          <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane>
              <template #label>
                <span class="custom-tabs-label">
                  <span>请求头信息</span>
                </span>
              </template>
              <el-table
                :show-header="false"
                border
                style="margin: 10px 0px"
                :data="headerParams"
              >
                <el-table-column
                  label="序号"
                  width="80px"
                  type="index"
                  align="center"
                ></el-table-column>
                <el-table-column label="Key">
                  <!-- row:即为当前属性值对象 -->
                  <template #="{ row, $index }">
                    <el-input
                      size="small"
                      placeholder="key"
                      v-model="row.key"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="value">
                  <!-- row:即为当前属性值对象 -->
                  <template #="{ row, $index }">
                    <el-input
                      size="small"
                      placeholder="value"
                      v-model="row.value"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="属性值操作">
                  <template #="{ row, index }">
                    <el-button
                      type="primary"
                      size="small"
                      icon="Plus"
                      @click="addParam"
                    ></el-button>
                    <el-button
                      type="primary"
                      size="small"
                      icon="Delete"
                      @click="delParams(index)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="请求参数">
              <el-tabs type="card">
                <el-tab-pane label="Params" name="Params">User</el-tab-pane>
                <el-tab-pane label="x-www-form-urlencoded" name="second">
                  x-www-form-urlencoded
                </el-tab-pane>
                <el-tab-pane label="Json" name="third">json</el-tab-pane>
              </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="响应提取">响应提取</el-tab-pane>
            <el-tab-pane label="用例断言">用例断言</el-tab-pane>
            <el-tab-pane label="数据库校验">数据库校验</el-tab-pane>
          </el-tabs>
        </el-card>
        <el-divider content-position="left">
          响应信息
          <el-icon><InfoFilled /></el-icon>
        </el-divider>
        <el-card>
          <el-tabs type="border-card">
            <el-tab-pane label="响应头">[
              {
              "name":
              "Server",

              "value":
              "Tengine"

              },

              {
              "name":
              "Date",

              "value":
              "Thu, 24 Aug 2023 09:08:15 GMT"

              },

              {
              "name":
              "Content-Type",

              "value":
              "application/json; charset=utf-8"

              },

              {
              "name":
              "Transfer-Encoding",

              "value":
              "chunked"

              },

              {
              "name":
              "Connection",

              "value":
              "keep-alive"

              },

              {
              "name":
              "Access-Control-Allow-Origin",

              "value":
              "*"

              },

              {
              "name":
              "Access-Control-Allow-Methods",

              "value":
              "GET,POST"

              }

              ]</el-tab-pane>
            <el-tab-pane label="响应体">ResponseBody</el-tab-pane>
            <el-tab-pane label="Cookies">Cookies</el-tab-pane>
            <el-tab-pane label="请求详情">RequestInfo</el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { requestMethods } from '@/api/common.ts'

let testCase = {
  id: '1',
  moduleId: '100',
  name: '',
  marks: '',
  orderIndex: '',
  modules: '',
}

let currentInterfaces = ref<any>([])
let modules = ref<any>([])
let currentEnv = reactive({
  host: '',
  path: '',
})
let selectMethod = ref<string>()
let selectEnv = ref<string>()
let host = ref<string>()
let reqMethods = ref<string[]>([])
// let headerParams = ref<any>([])
const save = () => {}
const remove = () => {}
let headerParams = reactive<any>([
  {
    key: '',
    value: '',
  },
])
onMounted(() => {
  reqMethods.value = requestMethods
})
const addParam = () => {
  headerParams.push({
    key: '',
    value: '',
  })
}

const delParams = (val: number) => {
  if (headerParams.length > 1) {
    headerParams.splice(val, 1)
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>