seecoder-devcloud-frontend/src/views/Project/APITest.vue

<template>
  <ElTabs class="tabs" v-model="activeTab">
    <ElTabPane label="接口测试" name="apitest">
      <ElTable :data="apitests" width="100%">
        <ElTableColumn
          prop="testId"
          label="ID"
          align="center"
          width="60">
        </ElTableColumn>
        <ElTableColumn
          prop="testName"
          label="测试名称"
          align="center"
          width="300">
        </ElTableColumn>
        <ElTableColumn
          prop="username"
          label="创建者"
          align="center"
          width="180">
        </ElTableColumn>
        <ElTableColumn
          prop="createTime"
          label="创建时间"
          align="center"
          width="250">
        </ElTableColumn>
        <ElTableColumn
          label="详情"
          align="center">
          <template #default="scope">
            <ElButton
              @click="handleClick('latest', scope.row.testId)"
              type="text"
              size="small">最近执行详情</ElButton>
            <ElButton @click="handleClick('detail', scope.row.testId)" type="text" size="small">测试任务详情</ElButton>
          </template>
        </ElTableColumn>
        <ElTableColumn
          align="center">
          <template #header>
            <span>操作</span>
            <ElButton @click="handleClick('create')" type="text" class="add-button">新建</ElButton>
          </template>
          <template #default="scope">
            <ElButton @click="handleClick('trigger', scope.row.testId)" type="text" size="small">触发</ElButton>
            <ElButton @click="handleClick('delete', scope.row.testId)" type="text" size="small">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <!-- 测试任务详情 -->
      <ElDrawer
        v-model="detailDrawer"
        :size="800">
        <template #title>
          <el-row class="entry-row">
            <el-col :span="2">
              <div class="node-type">测试</div>
            </el-col>
            <el-col :span="2">
              <template class="entry-row">
                <span>#{{detailAPIInfo.testId}}</span>
              </template>
            </el-col>
            <el-col :span="4">
              <template class="entry-row">
                <span>{{detailAPIInfo.testName}}</span>
              </template>
            </el-col>
          </el-row>
        </template>
        <template #default>
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <el-tabs
                v-model="detailTab">
                <el-tab-pane label="基本信息" name="basic_info">
                  <el-row class="entry-row" style="margin-top: 15px">
                    <el-col :span="4">
                      <h4>url: </h4>
                    </el-col>
                    <el-col :span="18">
                      <div>{{detailAPIInfo.url}}</div>
                    </el-col>
                  </el-row>
                  <el-row class="entry-row" style="margin-top: 15px">
                    <el-col :span="4">
                      <h4>params: </h4>
                    </el-col>
                    <el-col :span="18">
                      <div>
                        <vue-json-editor
                          :height="'400px'"
                          v-model="detailAPIInfo.params"
                          :show-btns="false"
                          :mode="'code'"
                          :modes="['code']"
                          lang="zh"></vue-json-editor>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row class="entry-row" style="margin-top: 15px">
                    <el-col :span="4">
                      <h4>method: </h4>
                    </el-col>
                    <el-col :span="18">
                      <div>{{detailAPIInfo.method}}</div>
                    </el-col>
                  </el-row>
                  <el-row class="entry-row" style="margin-top: 15px">
                    <el-col :span="4">
                      <h4>qps: </h4>
                    </el-col>
                    <el-col :span="18">
                      <div>{{detailAPIInfo.qps}}</div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="执行历史" name="execute_history">
                  <h5>注：Max、Min、Average的单位均为ms</h5>
                  <el-table :data="testResults" width="100%">
                    <el-table-column
                      prop="id"
                      label="ID"
                      align="center"
                      width="60">
                    </el-table-column>
                    <el-table-column
                      prop="executeTime"
                      label="执行时间"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="success"
                      label="成功"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="failure"
                      label="失败"
                      align="center">
                      <template #default="scope">
                        {{scope.row.failure}}
                        <span v-if="scope.row.success === 0">
                          <i class="el-icon-warning" title="url/参数有误或者服务器出错！"></i>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="maxTime"
                      label="Max"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="minTime"
                      label="Min"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="averageTime"
                      label="Average"
                      align="center">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </template>
      </ElDrawer>
      <!-- 新建测试任务 -->
      <el-dialog
        v-model="showAPITestCreateModel"
        width="600px"
        :before-close="(done) => {$refs['createAPITestForm'].resetFields();done();}"
        destroy-on-close>
        <template #title>创建测试任务</template>
        <el-form
          :model="createAPITestForm"
          :rules="rules"
          ref="createAPITestForm"
          label-position="right"
          label-width="100px"
          label-suffix="："
          class="create-APITest-form">
          <el-form-item label="测试名称" prop="testName" required>
            <el-input v-model="createAPITestForm.testName" placeholder="请输入接口测试的名称"></el-input>
          </el-form-item>
          <el-form-item label="待测URL" prop="url" required>
            <el-input v-model="createAPITestForm.url" placeholder="请输入待测试的URL"></el-input>
          </el-form-item>
          <el-form-item label="参数" prop="params">
            <div>
              <vue-json-editor
                :height="'400px'"
                v-model="createAPITestForm.params"
                :show-btns="false"
                :mode="'code'"
                :modes="['code']"
                lang="zh"
                @json-change="onJsonChange"
                @json-save="onJsonSave"
                @has-error="onError"
              ></vue-json-editor>
              <span v-if="!jsonValid" style="color: #F56C6C; font-size: 12px">JSON is invalid.</span>
            </div>
          </el-form-item>
          <el-form-item label="方法" prop="method" required>
            <ElSelect v-model="createAPITestForm.method" placeholder="请选择待测URL的方法">
              <ElOption
                v-for="(method, index) in methodList"
                :key="index" :label="method"
                :value="method">
              </ElOption>
            </ElSelect>
          </el-form-item>
          <el-form-item label="并发数" prop="qps" required="">
            <el-input v-model="createAPITestForm.qps" placeholder="请输入并发数(10的倍数)"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleAPITestCreateConfirm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <ElDrawer
        v-model="latestDrawer"
        :size="750">
        <template #title>
          <el-row class="entry-row">
            <el-col :span="3">
              <div class="node-type">测试结果</div>
            </el-col>
            <el-col :span="2">
              <template class="entry-row">
                <span>#{{latestResultInfo.id}}</span>
              </template>
            </el-col>
          </el-row>
        </template>
        <template #default>
          <el-row type="flex" justify="center">
            <el-col :span="22">
              <el-row class="entry-row" style="margin-top: 15px">
                <el-col :span="5">
                  <h4>执行时间：</h4>
                </el-col>
                <el-col :span="18">
                  <div>{{latestResultInfo.executeTime}}</div>
                </el-col>
              </el-row>
              <el-row class="entry-row" style="margin-top: 15px">
                <el-col :span="5">
                  <h4>成功：</h4>
                </el-col>
                <el-col :span="18">
                  <div>{{latestResultInfo.success}}</div>
                </el-col>
              </el-row>
              <el-row class="entry-row" style="margin-top: 15px">
                <el-col :span="5">
                  <h4>失败：</h4>
                </el-col>
                <el-col :span="18">
                  <div>
                    {{latestResultInfo.failure}}
                    <span v-if="latestResultInfo.success === 0" style="color: red">（url/参数输入有误或者服务器出错！）</span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="entry-row" style="margin-top: 15px">
                <el-col :span="5">
                  <h4>maxTime：</h4>
                </el-col>
                <el-col :span="18">
                  <div>{{latestResultInfo.maxTime}} ms</div>
                </el-col>
              </el-row>
              <el-row class="entry-row" style="margin-top: 15px">
                <el-col :span="5">
                  <h4>minTime：</h4>
                </el-col>
                <el-col :span="18">
                  <div>{{latestResultInfo.minTime}} ms</div>
                </el-col>
              </el-row>
              <el-row class="entry-row" style="margin-top: 15px">
                <el-col :span="5">
                  <h4>averageTime：</h4>
                </el-col>
                <el-col :span="18">
                  <div>{{latestResultInfo.averageTime}} ms</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div id="chart1" style="height: 500px; width: 350px"></div>
            </el-col>
            <el-col :span="12">
              <div id="chart2" style="height: 500px; width: 350px"></div>
            </el-col>
          </el-row>
        </template>
      </ElDrawer>
    </ElTabPane>
    <ElTabPane label="黑盒测试" name="testCases">
      <ElTable :data="testcases" width="100%">
        <ElTableColumn
          prop="id"
          label="ID"
          align="center"
          width="60">
        </ElTableColumn>
        <ElTableColumn
          prop="title"
          label="title"
          align="center">
        </ElTableColumn>
        <ElTableColumn
          prop="pass"
          label="执行状态"
          align="center"
          width="100"
          :filters="[{ text: '进行中', value: false }, { text: '已完成', value: true }]"
          :filter-method="(value, row) => {
            return row.pass === value;
          }"
          filter-placement="bottom-end">
          <template #default="scope">
            <template v-if="scope.row.pass === false">
              <ElTag>进行中<i class="el-icon-loading"></i></ElTag>
            </template>
            <template v-else-if="scope.row.pass === true">
              <ElTag type="success">已完成</ElTag>
            </template>
            <template v-else>
              <ElTag type="warning">未知状态</ElTag>
            </template>
          </template>
        </ElTableColumn>
        <ElTableColumn
          label="详情"
          align="center">
          <template #default="scope">
            <ElButton
              @click="handleTestCasesClick('steps', scope.row.id)"
              type="text"
              size="small">测试用例步骤列表</ElButton>
          </template>
        </ElTableColumn>
        <ElTableColumn
          align="center">
          <template #header>
            <span>操作</span>
            <ElButton
              @click="handleTestCasesClick('latest', 0)"
              type="text"
              class="add-button">部署的历史记录</ElButton>
            <ElButton @click="handleTestCasesClick('create')" type="text" class="add-button">新建</ElButton>
          </template>
          <template #default="scope">
            <ElButton v-if="scope.row.pass === false" @click="handleTestCasesClick('finish', scope.row.id)" type="text" size="small">
              完成测试
            </ElButton>
            <ElButton v-else @click="handleTestCasesClick('finish', scope.row.id)" type="text" size="small" disabled>完成测试</ElButton>
            <ElButton v-if="scope.row.pass === true" @click="handleTestCasesClick('reopen', scope.row.id)" type="text" size="small">
              重新开放测试
            </ElButton>
            <ElButton v-else @click="handleTestCasesClick('reopen', scope.row.id)" type="text" size="small" disabled>重新开放测试</ElButton>
            <ElButton @click="handleTestCasesClick('edit', scope.row.id)" type="text" size="small">编辑</ElButton>
            <ElButton @click="handleTestCasesClick('delete', scope.row.id)" type="text" size="small">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <!-- 部署的历史记录 -->
      <ElDrawer
        v-model="deployHistoryDrawer"
        :size="650">
        <template #title>
          <el-row class="entry-row">
            <el-col :span="3">
              <div class="node-type">项目</div>
            </el-col>
            <el-col :span="2">
              <template class="entry-row">
                <span>#{{currentProjectId}}</span>
              </template>
            </el-col>
          </el-row>
        </template>
        <template #default>
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <el-table :data="deployHistoryInfo" width="100%">
                <el-table-column
                  prop="id"
                  label="ID"
                  align="center"
                  width="60">
                </el-table-column>
                <el-table-column
                  prop="timestamp"
                  label="部署时间"
                  align="center"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="operationType"
                  label="操作类型"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="pipelineRecordId"
                  label="流水线ID"
                  align="center"
                  width="80">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </template>
      </ElDrawer>
      <!-- 新建测试用例 -->
      <el-dialog
        v-model="showTestCaseCreateModel"
        width="600px"
        :before-close="(done) => {$refs['createTestCaseForm'].resetFields();done();}"
        destroy-on-close>
        <template #title>创建测试用例</template>
        <el-form
          :model="createTestCaseForm"
          ref="createTestCaseForm"
          label-position="right"
          label-width="60px"
          label-suffix="："
          class="create-APITest-form">
          <el-form-item label="title" prop="title">
            <el-input
              v-model="createTestCaseForm.title"
              type="textarea"
              :rows="5"
              placeholder="请输入测试用例的标题"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleTestCaseCreateConfirm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 测试用例步骤详情 -->
      <ElDrawer
        v-model="stepsDrawer"
        :size="800">
        <template #title>
          <el-row class="entry-row">
            <el-col :span="3">
              <div class="node-type">测试用例</div>
            </el-col>
            <el-col :span="2">
              <template class="entry-row">
                <span>#{{detailTestCaseInfo.id}}</span>
              </template>
            </el-col>
            <el-col :span="6">
              <div>
                <ElButton @click="handleSteps('create', detailTestCaseInfo.id, 0)" type="text" class="add-button">新建测试用例步骤</ElButton>
              </div>
            </el-col>
          </el-row>
        </template>
        <template #default>
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <el-row class="entry-row" style="margin-top: 15px; margin-bottom: 30px">
                <el-col :span="2">
                  <h4>title: </h4>
                </el-col>
                <el-col :span="18">
                  <div>{{detailTestCaseInfo.title}}</div>
                </el-col>
              </el-row>
              <el-tabs v-model="stepsTab">
                <el-tab-pane label="测试用例步骤" name="steps">
                  <el-table :data="detailStepsInfo" width="100%">
                    <el-table-column
                      prop="id"
                      label="ID"
                      align="center"
                      width="60">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="描述"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="expectation"
                      label="预期输出"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="state"
                      label="状态"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      align="center">
                      <template #header>
                        <span>操作</span>
                      </template>
                      <template #default="scope">
                        <ElButton @click="handleSteps('update', scope.row.testCaseId, scope.row.id)" type="text" size="small">更新</ElButton>
                        <ElButton
                          @click="handleSteps('updateState', scope.row.testCaseId, scope.row.id)" type="text" size="small">修改状态</ElButton>
                        <ElButton @click="handleSteps('delete', scope.row.testCaseId, scope.row.id)" type="text" size="small">删除</ElButton>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </template>
      </ElDrawer>
      <!-- 修改测试用例步骤 -->
      <el-dialog
        v-model="showUpdateStepModel"
        width="600px"
        :before-close="(done) => {$refs['updateStepForm'].resetFields();done();}"
        destroy-on-close>
        <template #title>修改测试用例步骤</template>
        <el-form
          :model="updateStepForm"
          ref="updateStepForm"
          label-position="right"
          label-width="100px"
          label-suffix="：">
          <el-form-item label="id" prop="id">
            <el-input
              v-model="updateStepForm.id"
              disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="description" prop="description">
            <el-input
              v-model="updateStepForm.description"
              type="textarea"
              :rows="4">
            </el-input>
          </el-form-item>
          <el-form-item label="expectation" prop="expectation">
            <el-input
              v-model="updateStepForm.expectation"
              type="textarea"
              :rows="4">
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleStepUpdateConfirm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 修改测试用例步骤state -->
      <el-dialog
        v-model="showUpdateStepStateModel"
        width="600px"
        :before-close="(done) => {$refs['updateStepForm'].resetFields();done();}"
        destroy-on-close>
        <template #title>修改测试用例步骤状态</template>
        <el-form
          :model="updateStepForm"
          ref="updateStepForm"
          label-position="right"
          label-width="100px"
          label-suffix="：">
          <el-form-item label="id" prop="id">
            <el-input
              v-model="updateStepForm.id"
              disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="state" prop="state">
            <ElSelect
              v-model="updateStepForm.state">
              <ElOption
                v-for="(state, index) in stateList"
                :key="index"
                :label="state"
                :value="state">
              </ElOption>
            </ElSelect>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleStepUpdateStateConfirm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 修改测试用例title -->
      <el-dialog
        v-model="showEditTestCaseModel"
        width="600px"
        :before-close="(done) => {$refs['detailTestCaseInfo'].resetFields();done();}"
        destroy-on-close>
        <template #title>编辑测试用例标题</template>
        <el-form
          :model="detailTestCaseInfo"
          ref="detailTestCaseInfo"
          label-position="right"
          label-width="100px"
          label-suffix="：">
          <el-form-item label="id" prop="id">
            <el-input
              v-model="detailTestCaseInfo.id"
              disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="title" prop="title">
            <el-input
              v-model="detailTestCaseInfo.title"
              type="textarea"
              :rows="4">
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleTestCaseEditConfirm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </ElTabPane>
    <ElTabPane label="自动化测试" name="autotest">
      <ElTable :data="autoTestResult" width="100%">
        <ElTableColumn
          prop="id"
          label="ID"
          align="center"
          width="60">
        </ElTableColumn>
        <ElTableColumn
          prop="testId"
          label="所属测试ID"
          align="center"
          width="120">
        </ElTableColumn>
        <ElTableColumn
          prop="executeTime"
          label="执行时间"
          align="center"
          width="250">
        </ElTableColumn>
        <ElTableColumn
          prop="timeList"
          label="执行时间列表"
          align="center">
        </ElTableColumn>
        <ElTableColumn
          prop="success"
          label="success"
          align="center"
          width="100">
        </ElTableColumn>
        <ElTableColumn
          prop="failure"
          label="failure"
          align="center"
          width="100">
        </ElTableColumn>
        <ElTableColumn
          prop="maxTime"
          label="Max"
          align="center"
          width="100">
        </ElTableColumn>
        <ElTableColumn
          prop="minTime"
          label="Min"
          align="center"
          width="100">
        </ElTableColumn>
        <ElTableColumn
          prop="averageTime"
          label="Average"
          align="center"
          width="100">
        </ElTableColumn>
        <ElTableColumn
          prop="pipelineRecordId"
          label="流水线ID"
          align="center"
          width="100">
        </ElTableColumn>
      </ElTable>
    </ElTabPane>
  </ElTabs>
</template>

<script>
import vueJsonEditor from 'vue-json-editor';
import { APITestAPI, FuncTestAPI, AutoTestAPI } from '@/api';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';

export default {
  components: {
    vueJsonEditor,
  },
  data() {
    return {
      currentProjectId: -1,
      activeTab: 'apitest',
      apitests: [],
      detailDrawer: false,
      detailAPIInfo: [],
      detailTab: 'basic_info',
      testResults: [],
      showAPITestCreateModel: false,
      createAPITestForm: {
        testName: '',
        url: '',
        params: {},
        method: '',
        qps: '',
        createTime: '',
        username: '',
      },
      methodList: ['GET', 'POST'],
      jsonValid: true,
      latestDrawer: false,
      latestResultInfo: {},
      qps: 0,
      timer: null,
      testcases: [],
      showTestCaseCreateModel: false,
      createTestCaseForm: {
        projectId: -1,
        title: '',
      },
      stepsDrawer: false,
      detailTestCaseInfo: [],
      stepsTab: 'steps',
      detailStepsInfo: {},
      showUpdateStepModel: false,
      updateStepForm: {},
      showEditTestCaseModel: false,
      stateList: ['待测试', '已测试', '出现bug'],
      showUpdateStepStateModel: false,
      deployHistoryInfo: {},
      deployHistoryDrawer: false,
      autoTestResult: [],
    };
  },
  async mounted() {
    this.currentProjectId = this.$store.state.workspace.currentProjectId;
    this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
    this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
    this.autoTestResult = await AutoTestAPI.getAutoTestResultByProjectId(this.$store.state.workspace.currentProjectId);
  },
  methods: {
    async handleClick(action, id) {
      switch (action) {
        case 'create': {
          this.showAPITestCreateModel = true;
          break;
        }
        case 'latest': {
          this.latestResultInfo = await APITestAPI.getLatestResultByTestId(id);
          if (this.latestResultInfo === null) {
            ElMessage.error('还未执行！');
          } else {
            this.apitests.forEach((item) => {
              if (item.testId === id) {
                this.qps = item.qps;
              }
            });
            this.latestDrawer = true;
            const that = this;
            this.timer = setTimeout(() => {
              this.$nextTick(() => {
                that.initChart1();
                that.initChart2();
              });
            }, 1500);
          }
          break;
        }
        case 'detail': {
          this.apitests.forEach((item) => {
            if (item.testId === id) {
              this.detailAPIInfo = item;
            }
          });
          this.testResults = await APITestAPI.getAPITestResultByTestId(id);
          this.detailDrawer = true;
          break;
        }
        case 'trigger': {
          await APITestAPI.executeAPITestByTestId(id);
          break;
        }
        case 'delete': {
          await APITestAPI.deleteAPITestByTestId(id);
          ElMessage.success('删除成功！');
          this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
          break;
        }
        default: {
          console.warn('Unknown type of action.');
        }
      }
    },
    onJsonChange(value) {
      this.onJsonSave(value);
    },
    onJsonSave(value) {
      this.createAPITestForm.params = value;
      console.log(this.createAPITestForm.params);
      this.jsonValid = true;
    },
    onError(value) {
      this.jsonValid = false;
    },
    async handleAPITestCreateConfirm() {
      this.$refs.createAPITestForm.validate(async (valid) => {
        if (valid) {
          this.createAPITestForm.createTime = this.getCurrentTime();
          await APITestAPI.createAPITest({
            projectId: this.$store.state.workspace.currentProjectId,
            createTime: this.createAPITestForm.createTime,
            username: this.$store.state.user.username,
            testName: this.createAPITestForm.testName,
            url: this.createAPITestForm.url,
            params: this.createAPITestForm.params,
            method: this.createAPITestForm.method,
            qps: this.createAPITestForm.qps,
          });
          this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
          this.$refs.createAPITestForm.resetFields();
          this.showAPITestCreateModel = false;
          ElMessage.success('创建成功！');
        }
      });
    },
    getCurrentTime() {
      const yy = new Date().getFullYear();
      const mm = new Date().getMonth() + 1;
      const dd = new Date().getDate();
      const hh = new Date().getHours();
      const mf = new Date().getMinutes() < 10 ? `0${new Date().getMinutes()}` : new Date().getMinutes();
      const ss = new Date().getSeconds() < 10 ? `0${new Date().getSeconds()}` : new Date().getSeconds();
      return `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`;
    },
    async initChart1() {
      const chart1 = echarts.init(document.getElementById('chart1'));
      const options1 = {
        title: {
          text: `并发数: ${this.qps}`,
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '50%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            data: [
              { value: this.latestResultInfo.success, name: '成功', itemStyle: { color: '#CCFF99' } },
              { value: this.latestResultInfo.failure, name: '失败', itemStyle: { color: '#FF6600' } },
            ],
          },
        ],
      };
      chart1.setOption(options1);
    },
    async initChart2() {
      const chart2 = echarts.init(document.getElementById('chart2'));
      const option2 = {
        title: {
          text: '访问时间曲线图',
          bottom: '5%',
          left: 'center',
        },
        tooltip: {
          trigger: 'trigger',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            name: '执行时间/单位ms',
            type: 'value',
            min: 'dataMin',
            max: 'dataMax',
          },
        ],
        series: [
          {
            name: '访问时间',
            data: this.latestResultInfo.timeList,
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 3,
            symbol: 'circle',
            itemStyle: { color: '#8D67FF' },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' },
              ],
            },
          },
        ],
      };
      chart2.setOption(option2);
    },
    async handleTestCasesClick(action, id) {
      switch (action) {
        case 'create': {
          this.showTestCaseCreateModel = true;
          break;
        }
        case 'latest': {
          this.deployHistoryInfo = await FuncTestAPI.getLatestRecord(this.$store.state.workspace.currentProjectId);
          console.log(this.deployHistoryInfo);
          this.deployHistoryDrawer = true;
          break;
        }
        case 'finish': {
          await FuncTestAPI.finishTestCase(id);
          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
          break;
        }
        case 'reopen': {
          await FuncTestAPI.reopenTestCase(id);
          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
          break;
        }
        case 'edit': {
          this.testcases.forEach((item) => {
            if (item.id === id) {
              this.detailTestCaseInfo = item;
            }
          });
          this.showEditTestCaseModel = true;
          break;
        }
        case 'delete': {
          await FuncTestAPI.deleteTestCase(id);
          ElMessage.success('删除成功！');
          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
          break;
        }
        case 'steps': {
          this.testcases.forEach((item) => {
            if (item.id === id) {
              this.detailTestCaseInfo = item;
            }
          });
          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(id);
          this.stepsDrawer = true;
          break;
        }
        default: {
          console.warn('Unknown type of action.');
        }
      }
    },
    async handleTestCaseCreateConfirm() {
      this.$refs.createTestCaseForm.validate(async (valid) => {
        if (valid) {
          this.createTestCaseForm.projectId = this.$store.state.workspace.currentProjectId;
          await FuncTestAPI.createTestCase(this.createTestCaseForm.projectId, this.createTestCaseForm.title);
          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
          this.$refs.createTestCaseForm.resetFields();
          this.showTestCaseCreateModel = false;
          ElMessage.success('创建成功！');
        }
      });
    },
    async handleSteps(action, caseId, stepId) {
      switch (action) {
        case 'create': {
          await FuncTestAPI.createTestCaseStep(caseId);
          ElMessage.success('创建成功！');
          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(caseId);
          break;
        }
        case 'delete': {
          await FuncTestAPI.deleteTestCaseStep(stepId);
          ElMessage.success('删除成功！');
          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(caseId);
          break;
        }
        case 'update': {
          this.showUpdateStepModel = true;
          this.detailStepsInfo.forEach((item) => {
            if (item.id === stepId) {
              this.updateStepForm = item;
            }
          });
          break;
        }
        case 'updateState': {
          this.showUpdateStepStateModel = true;
          this.detailStepsInfo.forEach((item) => {
            if (item.id === stepId) {
              this.updateStepForm = item;
            }
          });
          break;
        }
        default: {
          console.warn('Unknown type of action.');
        }
      }
    },
    async handleStepUpdateConfirm() {
      this.$refs.updateStepForm.validate(async (valid) => {
        if (valid) {
          await FuncTestAPI.updateTestCaseStep(this.updateStepForm.id, this.updateStepForm.description, this.updateStepForm.expectation);
          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(this.updateStepForm.testCaseId);
          this.$refs.updateStepForm.resetFields();
          this.showUpdateStepModel = false;
          ElMessage.success('修改成功！');
        }
      });
    },
    async handleStepUpdateStateConfirm() {
      this.$refs.updateStepForm.validate(async (valid) => {
        if (valid) {
          let state;
          if (this.updateStepForm.state === '待测试') {
            state = 'WAITING';
          } else if (this.updateStepForm.state === '已测试') {
            state = 'PASS';
          } else if (this.updateStepForm.state === '出现bug') {
            state = 'BUG';
          }
          await FuncTestAPI.updateTestCaseStepState(this.updateStepForm.id, state);
          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(this.updateStepForm.testCaseId);
          this.$refs.updateStepForm.resetFields();
          this.showUpdateStepStateModel = false;
          ElMessage.success('修改成功！');
        }
      });
    },
    async handleTestCaseEditConfirm() {
      this.$refs.detailTestCaseInfo.validate(async (valid) => {
        if (valid) {
          await FuncTestAPI.updateTestCase(this.detailTestCaseInfo.id, this.detailTestCaseInfo.title);
          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
          this.$refs.detailTestCaseInfo.resetFields();
          this.showEditTestCaseModel = false;
          ElMessage.success('修改成功！');
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 80%;
  margin: auto auto;
}
.add-button {
  margin-left: 14px;
}
.entry-row {
  width: 100%;
  margin: 3px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  h3, h4{
    color: #172b4d;
  }
}
.node-type{
  color: #FFFFFF;
  border-radius: 3px;
  font-size: 14px;
  background-color: #42b983;
  text-align: center;
}
.create-APITest-form {
  width: 80%;
  margin: 0 auto;
}
</style>