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

<template>
  <el-tabs class="tabs" v-model="activeTab">
    <el-tab-pane label="接口测试" name="interfaceTest">
      <el-table :data="interfaceTests" style="width: 100%" height="600">
        <el-table-column type="expand">
          <template #default="props">
            <el-row type="flex" justify="center">
              <el-col :span="24">
                <el-row class="entry-row">
                  <el-col :span="2">
                    <h4>待测url：</h4>
                  </el-col>
                  <el-col :span="18">
                    <div>{{props.row.url}}</div>
                  </el-col>
                </el-row>
                <el-row class="entry-row">
                  <el-col :span="2">
                    <h4>测试方法：</h4>
                  </el-col>
                  <el-col :span="18">
                    <el-tag :type="props.row.method === 'GET' ? 'success' : ''">{{props.row.method}}</el-tag>
                  </el-col>
                </el-row>
                <el-row class="entry-row">
                  <el-col :span="2">
                    <h4 v-if="props.row.method === 'GET'">url携带参数：</h4>
                    <h4 v-else>请求体：</h4>
                  </el-col>
                  <el-col :span="8">
                    <el-input :value="strToJSON(props.row.params)" type="textarea" :rows="4" disabled></el-input>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="60"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="测试名称"
          width="300"
          align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          align="center"
          width="170">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="170">
        </el-table-column>
        <el-table-column
          label="详情"
          align="center">
          <template #default="scope">
            <el-button
              @click="handleClick('detail', scope.row.id)"
              type="text"
              size="small">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center">
          <template #header>
            <span>操作</span>
            <el-button @click="handleClick('create')" type="text" class="add-button">新建</el-button>
          </template>
          <template #default="scope">
            <el-button @click="handleClick('trigger', scope.row.id)" type="text" size="small">触发</el-button>
            <el-button @click="handleClick('delete', scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="黑盒测试" name="funcTest">
      <el-table :data="testcases" width="100%">
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="60"></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          align="center">
        </el-table-column>
        <el-table-column
          prop="taskId"
          label="关联的任务ID"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          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">
              <el-tag>进行中<i class="el-icon-loading"></i></el-tag>
            </template>
            <template v-else-if="scope.row.pass === true">
              <el-tag type="success">已完成</el-tag>
            </template>
            <template v-else>
              <el-tag type="warning">未知状态</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="详情"
          align="center"
          width="120">
          <template #default="scope">
            <el-button
              @click="handleTestCasesClick('steps', scope.row.id)"
              type="text"
              size="small">测试用例步骤列表</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center">
          <template #header>
            <span>操作</span>
            <el-button
              @click="handleTestCasesClick('latest', 0)"
              type="text"
              class="add-button">部署的历史记录</el-button>
            <el-button @click="handleTestCasesClick('create')" type="text" class="add-button">新建</el-button>
          </template>
          <template #default="scope">
            <el-button v-if="scope.row.pass === false" @click="handleTestCasesClick('finish', scope.row.id)" type="text" size="small">
              完成测试
            </el-button>
            <el-button v-else @click="handleTestCasesClick('finish', scope.row.id)" type="text" size="small" disabled>完成测试</el-button>
            <el-button v-if="scope.row.pass === true" @click="handleTestCasesClick('reopen', scope.row.id)" type="text" size="small">
              重新开放测试
            </el-button>
            <el-button v-else @click="handleTestCasesClick('reopen', scope.row.id)" type="text" size="small" disabled>重新开放测试</el-button>
            <el-button @click="handleTestCasesClick('edit', scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button @click="handleTestCasesClick('delete', scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
  <el-dialog
    v-model="createInterfaceDialog"
    width="600px"
    :before-close="(done) => {$refs['createInterfaceTestForm'].resetFields();done();}"
    destroy-on-close>
    <template #title>创建接口测试</template>
    <el-form
      :model="createInterfaceTestForm"
      ref="createInterfaceTestForm"
      label-position="right"
      label-width="100px"
      label-suffix="："
      style="width: 80%; margin: 0 auto;">
      <el-form-item label="测试名称" prop="name" required>
        <el-input v-model="createInterfaceTestForm.name" placeholder="请输入接口测试的名称"></el-input>
      </el-form-item>
      <el-form-item label="待测URL" prop="url" required>
        <el-input v-model="createInterfaceTestForm.url" placeholder="请输入待测试的URL"></el-input>
      </el-form-item>
      <el-form-item label="方法" prop="method" required>
        <el-select v-model="createInterfaceTestForm.method" placeholder="请选择待测URL的方法">
          <el-option
            v-for="(method, index) in methodList"
            :key="index"
            :value="method">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="createInterfaceTestForm.method === 'POST' ? '请求体' : '携带参数'" prop="params">
        <div>
          <vue-json-editor
            :height="'400px'"
            v-model="createInterfaceTestForm.params"
            :show-btns="false"
            mode="code"
            :modes="['code']"
            lang="zh"
            @json-change="onJsonChange"
            @json-save="onJsonSave"
          ></vue-json-editor>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleInterfaceCreateConfirm()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-drawer
    v-model="detailDrawer"
    :size="650">
    <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>#{{detailInterfaceTestInfo.id}}</span>
          </template>
        </el-col>
        <el-col :span="20">
          <template class="entry-row">
            <span>{{detailInterfaceTestInfo.name}}</span>
          </template>
        </el-col>
      </el-row>
    </template>
    <template #default>
      <el-divider content-position="left">测试任务信息</el-divider>
      <div style="width: 80%; margin: 0 auto">
        <el-row type="flex" align="center">
          <el-col :span="24">
            <el-row class="entry-row">
              <el-col :span="6">
                <h4>待测url：</h4>
              </el-col>
              <el-col :span="18">
                <div>{{detailInterfaceTestInfo.url}}</div>
              </el-col>
            </el-row>
            <el-row class="entry-row">
              <el-col :span="6">
                <h4>测试方法：</h4>
              </el-col>
              <el-col :span="18">
                <el-tag :type="detailInterfaceTestInfo.method === 'GET' ? 'success' : ''">{{detailInterfaceTestInfo.method}}</el-tag>
              </el-col>
            </el-row>
            <el-row class="entry-row">
              <el-col :span="6">
                <h4 v-if="detailInterfaceTestInfo.method === 'GET'">url携带参数：</h4>
                <h4 v-else>请求体：</h4>
              </el-col>
              <el-col :span="18">
                <el-input :value="strToJSON(detailInterfaceTestInfo.params)" type="textarea" :rows="4" disabled></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-divider content-position="left">测试执行结果</el-divider>
      <div style="width: 95%; margin: 0 auto">
        <el-tabs v-model="activeTab1">
          <el-tab-pane label="手动触发结果" name="artificial">
            <el-table :data="interfaceTestResults" style="width: 100%" height="800" border>
              <el-table-column type="expand">
                <template #default="props">
                  <el-row type="flex" justify="center">
                    <el-col :span="24">
                      <el-row class="entry-row">
                        <el-col :span="4">
                          <h4>返回结果：</h4>
                        </el-col>
                        <el-col :span="20">
                          <el-input :value="strToJSON(props.row.result)" type="textarea" :rows="8" disabled></el-input>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                prop="id"
                label="ID"
                width="40"
                align="center">
              </el-table-column>
              <el-table-column
                prop="executeTime"
                label="执行时间"
                width="170"
                align="center">
              </el-table-column>
              <el-table-column
                prop="username"
                label="执行者"
                width="100"
                align="center">
              </el-table-column>
              <el-table-column
                prop="code"
                label="状态码"
                width="80"
                align="center">
                <template #default="scope">
                  <el-tag disable-transitions>{{scope.row.code}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="cost"
                label="耗时/ms"
                align="center">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="自动化测试结果">
            <el-table :data="interfaceTestAutoResults" style="width: 100%" height="800" border>
              <el-table-column type="expand">
                <template #default="props">
                  <el-row type="flex" justify="center">
                    <el-col :span="24">
                      <el-row class="entry-row">
                        <el-col :span="4">
                          <h4>返回结果：</h4>
                        </el-col>
                        <el-col :span="20">
                          <el-input :value="strToJSON(props.row.result)" type="textarea" :rows="8" disabled></el-input>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                prop="id"
                label="ID"
                width="40"
                align="center">
              </el-table-column>
              <el-table-column
                prop="deploymentId"
                label="流水线ID"
                width="100"
                align="center">
              </el-table-column>
              <el-table-column
                prop="executeTime"
                label="执行时间"
                width="170"
                align="center">
              </el-table-column>
              <el-table-column
                prop="username"
                label="执行者"
                width="100"
                align="center">
              </el-table-column>
              <el-table-column
                prop="code"
                label="状态码"
                width="80"
                align="center">
                <template #default="scope">
                  <el-tag disable-transitions>{{scope.row.code}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="cost"
                label="耗时/ms"
                align="center">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </el-drawer>
  <!-- 部署的历史记录 -->
  <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="70px"
      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-item label="taskId" prop="taskId">
        <el-select v-model="createTestCaseForm.taskId">
          <el-option
            v-for="item in taskIdList"
            :key="item"
            :value="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleTestCaseCreateConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 测试用例步骤详情 -->
  <el-drawer
    v-model="stepsDrawer"
    :size="700">
    <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="8">
          <template class="entry-row">
            <span>{{detailTestCaseInfo.title}}</span>
          </template>
        </el-col>
      </el-row>
    </template>
    <template #default>
      <el-divider content-position="left">新建测试用例步骤</el-divider>
      <div style="width: 90%; margin: 0 auto;">
        <el-button @click="handleSteps('create', detailTestCaseInfo.id, 0)" type="text" class="add-button">新建测试用例步骤</el-button>
      </div>
      <el-divider content-position="left">测试用例步骤</el-divider>
      <div style="width: 95%; margin: 0 auto;">
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <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">
                      <el-button @click="handleSteps('update', scope.row.testCaseId, scope.row.id)" type="text" size="small">更新</el-button>
                      <el-button
                        @click="handleSteps('updateState', scope.row.testCaseId, scope.row.id)" type="text" size="small">修改状态</el-button>
                      <el-button @click="handleSteps('delete', scope.row.testCaseId, scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-drawer>
  <!-- 修改测试用例步骤 -->
  <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">
        <el-select
          v-model="updateStepForm.state">
          <el-option
            v-for="(state, index) in stateList"
            :key="index"
            :label="state"
            :value="state">
          </el-option>
        </el-select>
      </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>
</template>

<script>
import vueJsonEditor from 'vue-json-editor';
import { InterfaceTestAPI, FuncTestAPI } from '@/api';
import { ElMessage } from 'element-plus';

export default {
  components: {
    vueJsonEditor,
  },
  data() {
    return {
      currentProjectId: -1,
      activeTab: 'interfaceTest',
      activeTab1: 'artificial',
      interfaceTests: [],
      createInterfaceDialog: false,
      createInterfaceTestForm: {},
      methodList: ['GET', 'POST'],
      jsonValid: true,
      detailInterfaceTestInfo: {},
      interfaceTestResults: [],
      interfaceTestAutoResults: [],
      detailDrawer: false,
      testcases: [],
      taskIdList: [],
      showTestCaseCreateModel: false,
      deployHistoryInfo: {},
      deployHistoryDrawer: false,
      detailTestCaseInfo: {},
      showEditTestCaseModel: false,
      detailStepsInfo: {},
      stepsDrawer: false,
      showUpdateStepModel: false,
      updateStepForm: {},
      showUpdateStepStateModel: false,
      createTestCaseForm: {},
      stateList: ['待测试', '已测试', '出现bug'],
    };
  },
  async mounted() {
    this.currentProjectId = this.$store.state.workspace.currentProjectId;
    this.interfaceTests = await InterfaceTestAPI.getAll(this.currentProjectId);
    this.testcases = await FuncTestAPI.getTestCases(this.currentProjectId);
    this.taskIdList = await FuncTestAPI.getTreeIdList(this.currentProjectId);
  },
  methods: {
    strToJSON(params) {
      return JSON.stringify(params, null, 4);
    },
    async handleClick(action, id) {
      switch (action) {
        case 'create': {
          this.createInterfaceDialog = true;
          break;
        }
        case 'delete': {
          await InterfaceTestAPI.deleteTest(id);
          ElMessage.success('删除成功！');
          this.interfaceTests = await InterfaceTestAPI.getAll(this.currentProjectId);
          break;
        }
        case 'trigger': {
          await InterfaceTestAPI.executeTest(id, this.$store.state.user.username, 'artificial');
          this.timer = setTimeout(() => {
            this.$nextTick(() => {
              ElMessage.success('执行成功！');
            });
          }, 3000);
          break;
        }
        case 'detail': {
          this.interfaceTests.forEach((item) => {
            if (item.id === id) {
              this.detailInterfaceTestInfo = item;
            }
          });
          this.interfaceTestResults = await InterfaceTestAPI.getResults(id);
          this.interfaceTestAutoResults = await InterfaceTestAPI.getAutoResults(id);
          this.interfaceTestResults.forEach((item) => {
            item.result = JSON.parse(item.result);
          });
          this.interfaceTestAutoResults.forEach((item) => {
            item.result = JSON.parse(item.result);
          });
          this.detailDrawer = true;
          break;
        }
        default: {
          console.log('Unknown type of action.');
        }
      }
    },
    onJsonChange(value) {
      this.onJsonSave(value);
    },
    onJsonSave(value) {
      this.createInterfaceTestForm.params = value;
    },
    async handleInterfaceCreateConfirm() {
      this.$refs.createInterfaceTestForm.validate(async (valid) => {
        if (valid) {
          await InterfaceTestAPI.createTest({
            projectId: this.currentProjectId,
            createTime: '',
            username: this.$store.state.user.username,
            name: this.createInterfaceTestForm.name,
            url: this.createInterfaceTestForm.url,
            method: this.createInterfaceTestForm.method,
            params: this.createInterfaceTestForm.params,
          });
          this.interfaceTests = await InterfaceTestAPI.getAll(this.currentProjectId);
          this.$refs.createInterfaceTestForm.resetFields();
          this.createInterfaceDialog = false;
          ElMessage.success('创建成功！');
        }
      });
    },
    async handleTestCasesClick(action, id) {
      switch (action) {
        case 'create': {
          this.showTestCaseCreateModel = true;
          break;
        }
        case 'latest': {
          this.deployHistoryInfo = await FuncTestAPI.getLatestRecord(this.$store.state.workspace.currentProjectId);
          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.createTestCaseForm.taskId,
          );
          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);
          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(caseId);
          ElMessage.success('创建成功！');
          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;
}
</style>