功能更新：新增Bug管理模块，完善用户角色分配，优化项目设置

src/components/TestPlatform/Plan/PlanExecute.vue

@@ -1,108 +1,245 @@
 <template>
   <div class="page-wrap">
     <page-section title="计划执行">
-      <el-form :inline="true" size="small" @submit.native.prevent>
-        <el-form-item label="项目ID">
-          <el-input v-model="projectId" style="width: 120px;"></el-input>
-        </el-form-item>
-        <el-form-item label="计划ID">
-          <el-input v-model="planId" style="width: 120px;"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="fetchDetail">刷新</el-button>
-        </el-form-item>
-      </el-form>
-      <key-value-descriptions :items="summaryItems"></key-value-descriptions>
-      <el-divider></el-divider>
-      <el-form :model="executeForm" label-width="120px" size="small">
-        <el-form-item label="计划用例ID">
-          <el-input v-model="executeForm.planCaseId"></el-input>
-        </el-form-item>
-        <el-form-item label="执行状态">
-          <el-select v-model="executeForm.status">
-            <el-option label="通过" :value="1"></el-option>
-            <el-option label="失败" :value="2"></el-option>
-            <el-option label="阻塞" :value="3"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实际结果">
-          <el-input v-model="executeForm.actual_result" type="textarea" :rows="4"></el-input>
-        </el-form-item>
-        <el-form-item label="缺陷链接">
-          <el-input v-model="defectLinksText" placeholder="多个缺陷号用逗号分隔"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="submitting" @click="submitExecute">提交执行</el-button>
-        </el-form-item>
-      </el-form>
+      <div class="filter-toolbar">
+        <el-form :inline="true" size="small" class="filter-toolbar-form" @submit.native.prevent>
+          <el-form-item label="产品名称">
+            <el-input :value="productName" disabled style="width: 220px;"></el-input>
+          </el-form-item>
+          <el-form-item label="项目名称">
+            <el-input :value="projectName" disabled style="width: 220px;"></el-input>
+          </el-form-item>
+          <el-form-item label="计划名称">
+            <el-input :value="planNameDisplay" disabled style="width: 240px;"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="fetchPlanCases">刷新</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="filter-toolbar-actions">
+          <el-button size="small" @click="goBack">返回</el-button>
+        </div>
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="planCaseTableData"
+        border
+        style="margin-top: 12px;">
+        <el-table-column prop="planCaseId" label="计划用例ID" width="120"></el-table-column>
+        <el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
+        <el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
+        <el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
+        <el-table-column label="执行状态" width="110">
+          <template slot-scope="scope">
+            <el-tag size="mini" :type="formatExecuteStatusTag(scope.row.status)">{{ scope.row.statusLabel }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" @click="openExecuteDialog(scope.row)">执行</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        style="margin-top: 12px; text-align: right;"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :current-page="pageNo"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange">
+      </el-pagination>
+
+      <el-dialog
+        title=""
+        :visible.sync="executeDialogVisible"
+        width="760px">
+        <div class="detail-title">{{ selectedPlanCase ? (selectedPlanCase.caseTitle || selectedPlanCase.title || selectedPlanCase.caseKey || selectedPlanCase.caseId) : '' }}</div>
+        <div class="detail-section">
+          <div class="detail-section-title">前置条件</div>
+          <div class="detail-text">{{ caseDetail.preconditions || '-' }}</div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">执行步骤</div>
+          <div class="detail-text">{{ formatSteps(caseDetail.steps) || '-' }}</div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">预期结果</div>
+          <div class="detail-text">{{ caseDetail.expected_results || caseDetail.expectedResults || '-' }}</div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">执行结果</div>
+          <el-input
+            v-model="executeResultText"
+            type="textarea"
+            :rows="3"
+            placeholder="失败或阻塞时必填">
+          </el-input>
+        </div>
+        <span slot="footer">
+          <el-button @click="executeDialogVisible = false">取消</el-button>
+          <el-button type="success" :loading="submitting" @click="submitExecute(1)">通过</el-button>
+          <el-button type="danger" :loading="submitting" @click="submitExecute(2)">失败</el-button>
+          <el-button type="warning" :loading="submitting" @click="submitExecute(3)">阻塞</el-button>
+        </span>
+      </el-dialog>
     </page-section>
   </div>
 </template>
 
 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
-import KeyValueDescriptions from '@/components/TestPlatform/common/KeyValueDescriptions'
-import { executePlanCase, getPlanDetail } from '@/api/planApi'
+import { getCaseDetail } from '@/api/caseApi'
+import { executePlanCase, getPlanCaseList } from '@/api/planApi'
 
 export default {
   name: 'PlanExecute',
-  components: { PageSection, KeyValueDescriptions },
+  components: { PageSection },
   data() {
     return {
-      projectId: this.$route.query.projectId || 1,
+      projectId: this.$route.query.projectId || '',
       planId: this.$route.query.planId || '',
-      detail: {},
+      loading: false,
+      planCaseTableData: [],
+      total: 0,
+      selectedPlanCase: null,
+      caseDetail: {},
+      executeDialogVisible: false,
       submitting: false,
-      defectLinksText: '',
-      executeForm: {
-        planCaseId: '',
-        status: 1,
-        actual_result: ''
-      }
+      executeResultText: '',
+      pageNo: 1,
+      pageSize: 10
     }
   },
   computed: {
-    summaryItems() {
-      return [
-        { label: '计划ID', value: this.detail.id },
-        { label: '计划名称', value: this.detail.name },
-        { label: '总用例数', value: this.detail.total_cases },
-        { label: '已完成', value: this.detail.completed },
-        { label: '通过率', value: this.detail.pass_rate }
-      ]
+    productName() {
+      return this.$route.query.productName || ''
+    },
+    projectName() {
+      return this.$route.query.projectName || ''
+    },
+    planNameDisplay() {
+      return this.$route.query.planName || ''
     }
   },
   methods: {
-    fetchDetail() {
-      if (!this.planId) {
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNo = 1
+      this.fetchPlanCases()
+    },
+    handleCurrentChange(page) {
+      this.pageNo = page
+      this.fetchPlanCases()
+    },
+    fetchPlanCases() {
+      if (!this.planId || !this.projectId) {
+        this.planCaseTableData = []
+        this.total = 0
+        this.selectedPlanCase = null
+        this.caseDetail = {}
         return
       }
-      getPlanDetail(this.projectId, this.planId).then(res => {
-        this.detail = (res && res.data) || res || {}
+      this.loading = true
+      getPlanCaseList(this.projectId, this.planId, { pageNo: this.pageNo, pageSize: this.pageSize })
+        .then(listRes => {
+          const data = (listRes && listRes.data) || listRes || {}
+          const list = data.list || data.items || []
+          this.total = Number(data.total != null ? data.total : (Array.isArray(list) ? list.length : 0))
+          this.planCaseTableData = (Array.isArray(list) ? list : []).map(item => ({
+            planCaseId: item.id,
+            caseId: item.case_id || item.caseId,
+            status: item.status,
+            statusLabel: this.formatExecuteStatus(item.status),
+            actualResult: item.actual_result || item.actualResult || '',
+            caseKey: item.case_key || item.caseKey || '',
+            caseTitle: item.case_title || item.caseTitle || item.title || '',
+            title: item.title || item.case_title || item.caseTitle || ''
+          }))
+        })
+        .catch(() => {
+          this.planCaseTableData = []
+          this.total = 0
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    openExecuteDialog(row) {
+      if (!row) return
+      this.selectedPlanCase = row
+      this.executeResultText = ''
+      if (!row.caseId) {
+        this.caseDetail = {}
+        this.executeDialogVisible = true
+        return
+      }
+      getCaseDetail(this.projectId, row.caseId).then(res => {
+        const data = (res && res.data) || res || {}
+        this.caseDetail = data
+        this.executeDialogVisible = true
       }).catch(() => {
-        this.detail = {}
+        this.caseDetail = {}
+        this.executeDialogVisible = true
       })
     },
-    submitExecute() {
-      if (!this.executeForm.planCaseId) {
-        this.$message({ type: 'warning', message: '请输入计划用例ID' })
+    submitExecute(status) {
+      if (!this.selectedPlanCase || !this.selectedPlanCase.planCaseId) {
+        this.$message({ type: 'warning', message: '请先选择要执行的用例' })
+        return
+      }
+      if ((status === 2 || status === 3) && !String(this.executeResultText || '').trim()) {
+        this.$message({ type: 'warning', message: '失败或阻塞时请填写执行结果' })
         return
       }
       this.submitting = true
-      executePlanCase(this.projectId, this.planId, this.executeForm.planCaseId, {
-        status: this.executeForm.status,
-        actual_result: this.executeForm.actual_result,
-        defect_links: this.defectLinksText ? this.defectLinksText.split(',').map(item => item.trim()).filter(Boolean) : [],
+      executePlanCase(this.projectId, this.planId, this.selectedPlanCase.planCaseId, {
+        status,
+        actualResult: this.executeResultText,
+        defectLinks: [],
         attachments: []
       }).then(() => {
         this.$message({ type: 'success', message: '执行结果已提交' })
+        this.executeDialogVisible = false
+        this.fetchPlanCases()
       }).finally(() => {
         this.submitting = false
       })
+    },
+    formatSteps(steps) {
+      if (!steps) return ''
+      if (typeof steps === 'string') return steps
+      if (Array.isArray(steps)) {
+        return steps.map(item => {
+          if (typeof item === 'string') return item
+          return item.action || item.step || item.text || item.content || ''
+        }).filter(Boolean).join('\n')
+      }
+      return String(steps)
+    },
+    formatExecuteStatus(status) {
+      const map = { 0: '待执行', 1: '通过', 2: '失败', 3: '阻塞' }
+      return map[status] || status
+    },
+    formatExecuteStatusTag(status) {
+      const map = { 0: 'info', 1: 'success', 2: 'danger', 3: 'warning' }
+      return map[status] || 'info'
+    },
+    goBack() {
+      this.$router.push({
+        path: '/test-platform/plan',
+        query: {
+          productId: this.$route.query.productId || undefined,
+          projectId: this.projectId || undefined
+        }
+      })
     }
   },
   created() {
-    this.fetchDetail()
+    this.fetchPlanCases()
   }
 }
 </script>
@@ -111,4 +248,54 @@ export default {
 .page-wrap {
   padding: 20px;
 }
+
+.filter-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.filter-toolbar-form {
+  flex: 1;
+  min-width: 0;
+}
+
+.filter-toolbar-actions {
+  flex-shrink: 0;
+  padding-top: 4px;
+}
+
+.detail-panel {
+  margin-top: 16px;
+}
+
+.detail-title {
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #303133;
+  font-size: 18px;
+  line-height: 1.4;
+}
+
+.detail-text {
+  white-space: pre-wrap;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.detail-section {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+}
+
+.detail-section-title {
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
 </style>