feat: 新增质检模块功能并优化界面交互

refactor: 重构质检任务和历史记录页面布局
feat: 添加Greeting组件并集成到首页
feat: 实现质检项选择和详情展示功能
feat: 新增实验室和工段质检页面
style: 优化表格样式和交互体验

klp-ui/src/views/mes/qc/history/index.vue

@@ -28,22 +28,26 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable v-loading="loading" :data="checkTaskList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="taskId" v-if="true"/>
+    <!-- 上方任务列表表格 -->
+    <div class="mb10">
+      <div class="table-title">检验历史列表</div>
+      <KLPTable ref="historyTable" height="300px" highlight-current-row v-loading="loading" :data="checkTaskList" @row-click="handleRowClick" row-class-name="tableRowClassName">
       <el-table-column label="任务名称" align="center" prop="taskName" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="工段" align="center" prop="workshopSection" />
+      <el-table-column label="工序" align="center" prop="process" />
+      <el-table-column label="机组" align="center" prop="unitGroup" />
+      <el-table-column label="检验结果" align="center" prop="inspectionResult">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleDetail(scope.row)"
-          >详情</el-button>
+          <el-tag :type="scope.row.inspectionResult === 1 ? 'success' : (scope.row.inspectionResult === 2 ? 'danger' : 'info')">
+            {{ scope.row.inspectionResult === 0 ? '未检验' : (scope.row.inspectionResult === 1 ? '合格' : (scope.row.inspectionResult === 2 ? '不合格' : '')) }}
+          </el-tag>
         </template>
       </el-table-column>
-    </KLPTable>
+      <el-table-column label="检验类型" align="center" prop="inspectionType" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      </KLPTable>
+
+    </div>
 
     <pagination
       v-show="total>0"
@@ -53,33 +57,61 @@
       @pagination="getList"
     />
 
-    <!-- 检查任务详情弹窗（可复用task页面的实现） -->
-    <!-- ...如需详情弹窗可参考task/index.vue... -->
-    <el-dialog :title="'检查任务详情'" :visible.sync="detailOpen" width="600px" append-to-body>
-      <el-descriptions :column="1" border>
-        <el-descriptions-item label="任务名称">{{ detailData.taskName }}</el-descriptions-item>
-        <el-descriptions-item label="备注">{{ detailData.remark }}</el-descriptions-item>
-        <el-descriptions-item label="检查项">
-          <div v-for="item in detailData.itemList" :key="item.itemId" style="margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;">
-            <div style="display: flex; align-items: center;">
-              <el-tag type="info" style="margin-right: 12px;">{{ item.itemName }}</el-tag>
+    <!-- 下方检测详情表格 -->
+    <div class="detail-section">
+      <div class="table-title">检测详情</div>
+      <div v-if="selectedTask && detailData.itemList && detailData.itemList.length > 0">
+        <KLPTable v-loading="loading" :data="detailData.itemList" style="margin-top: 10px;">
+          <el-table-column label="检查项" align="center" prop="itemName">
+            <template slot-scope="scope">
+              <el-tag type="info">{{ scope.row.itemName }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="定性定量" align="center">
+            <template slot-scope="scope">
+              <el-tag v-if="scope.row.qualitativeQuantitative !== undefined" :type="scope.row.qualitativeQuantitative === 0 ? 'primary' : 'warning'">
+                {{ scope.row.qualitativeQuantitative === 0 ? '定性' : '定量' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="标准目标" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.standardTarget }} {{ scope.row.unit || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="目标上限" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.targetUpper }} {{ scope.row.unit || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="目标下限" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.targetLower }} {{ scope.row.unit || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="实测值" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.actualMeasure }} {{ scope.row.unit || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center">
+            <template slot-scope="scope">
               <el-tag
-                :type="item.status == 1 ? 'success' : (item.status == 2 ? 'danger' : 'info')"
-                style="margin-right: 16px; min-width: 60px; text-align: center;"
+                :type="scope.row.status == 1 ? 'success' : (scope.row.status == 2 ? 'danger' : 'info')"
               >
-                <span v-if="item.status == 0">未检测</span>
-                <span v-else-if="item.status == 1">通过</span>
-                <span v-else-if="item.status == 2">不通过</span>
+                <span v-if="scope.row.status == 0">未检测</span>
+                <span v-else-if="scope.row.status == 1">通过</span>
+                <span v-else-if="scope.row.status == 2">不通过</span>
                 <span v-else>未知</span>
               </el-tag>
-            </div>
-          </div>
-        </el-descriptions-item>
-      </el-descriptions>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleDetailClose">关 闭</el-button>
-      </span>
-    </el-dialog>
+            </template>
+          </el-table-column>
+        </KLPTable>
+      </div>
+      <div v-else class="empty-tip">
+        <el-empty description="请选择一个检验历史任务查看详情"></el-empty>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -91,9 +123,6 @@ export default {
   data() {
     return {
       loading: true,
-      ids: [],
-      single: true,
-      multiple: true,
       showSearch: true,
       total: 0,
       checkTaskList: [],
@@ -102,11 +131,12 @@ export default {
         pageSize: 20,
         taskName: undefined,
       },
-      detailOpen: false,
       detailData: {},
+      // 当前选中的任务（单选）
+      selectedTask: null,
     }
   },
-  created() {
+  mounted() {
     this.getList()
   },
   methods: {
@@ -126,28 +156,65 @@ export default {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.taskId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+    
+    // 点击行选中任务
+    handleRowClick(row) {
+      if (this.selectedTask && this.selectedTask.taskId === row.taskId) {
+        // 点击当前选中行，取消选中
+        this.selectedTask = null
+        this.detailData = {}
+      } else {
+        // 选中新行
+        this.selectedTask = row
+        this.loadTaskDetail(row.taskId)
+      }
+    },
+    
+    // 表格行样式
+    tableRowClassName({row, rowIndex}) {
+      return this.selectedTask && this.selectedTask.taskId === row.taskId ? 'current-row' : ''
+    },
+    
+    // 加载任务详情
+    loadTaskDetail(taskId) {
+      this.loading = true
+      getCheckTask(taskId).then(response => {
+        this.detailData = response.data
+      }).finally(() => {
+        this.loading = false
+      })
     },
     handleExport() {
       this.download('qc/checkTask/export', {
         ...this.queryParams
       }, `checkTask_${new Date().getTime()}.xlsx`)
-    },
-    handleDetail(row) {
-      this.loading = true
-      getCheckTask(row.taskId).then(response => {
-        this.detailData = response.data
-        this.detailOpen = true
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    handleDetailClose() {
-      this.detailOpen = false
-      this.getList()
+    }
+  },
+  
+  // 添加样式
+  computed: {
+    styles() {
+      return {
+        mb10: { marginBottom: '10px' },
+        detailSection: { 
+          marginTop: '20px', 
+          border: '1px solid #e6e6e6', 
+          borderRadius: '4px', 
+          padding: '10px'
+        },
+        tableTitle: { 
+          fontSize: '16px', 
+          fontWeight: 'bold', 
+          marginBottom: '10px',
+          color: '#333'
+        },
+        emptyTip: { 
+          textAlign: 'center', 
+          padding: '40px 0',
+          backgroundColor: '#fafafa',
+          borderRadius: '4px'
+        }
+      }
     }
   }
 }