检查页面优化

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

@@ -8,6 +8,10 @@
             <el-input v-model="queryParams.templateName" placeholder="请输入方案名称" clearable
               @keyup.enter.native="handleQuery" />
           </el-form-item>
+          <el-form-item label="方案单位" prop="templateUnit">
+            <el-input v-model="queryParams.templateUnit" placeholder="请输入方案单位" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
@@ -17,16 +21,28 @@
           </el-col>
         </el-row>
 
-        <el-table highlight-current-row border @row-click="handleRowClick" v-loading="loading"
+        <div class="template-list" v-loading="loading">
-          :data="inspectionItemTemplateList" @selection-change="handleSelectionChange">
+          <div
-          <el-table-column label="方案名称" align="center" prop="templateName" />
+            v-for="item in inspectionItemTemplateList"
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            :key="item.templateId"
-            <template slot-scope="scope">
+            class="template-item"
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+            :class="{ 'active': currentTemplate && currentTemplate.templateId === item.templateId }"
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+            @click="handleRowClick(item)"
-            </template>
+          >
-          </el-table-column>
+            <div class="template-item-header">
-        </el-table>
+              <span class="template-item-title">{{ item.templateName }}</span>
+              <div class="template-item-actions">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(item)">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(item)">删除</el-button>
+              </div>
+            </div>
+            <div class="template-item-meta">
+              <span class="template-unit">所属单位：{{ item.templateUnit || '-' }}</span>
+            </div>
+            <div v-if="item.templateDesc" class="template-item-desc">{{ item.templateDesc }}</div>
+          </div>
+          <el-empty v-if="inspectionItemTemplateList.length === 0" description="暂无数据" :image-size="100" />
+        </div>
 
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -37,6 +53,9 @@
             <el-form-item label="方案名称" prop="templateName">
               <el-input v-model="form.templateName" placeholder="请输入方案名称" />
             </el-form-item>
+            <el-form-item label="方案单位" prop="templateUnit">
+              <el-input v-model="form.templateUnit" placeholder="请输入方案单位" />
+            </el-form-item>
             <el-form-item label="方案描述" prop="templateDesc">
               <el-input v-model="form.templateDesc" type="textarea" placeholder="请输入内容" />
             </el-form-item>
@@ -180,6 +199,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         templateName: undefined,
+        templateUnit: undefined,
         templateDesc: undefined,
         inspectionItem: undefined,
       },
@@ -190,6 +210,7 @@ export default {
       },
       checkItemList: [],
       rightLoading: false,
+      isRowClicking: false,
       currentTemplate: null,
       addItemOpen: false,
       addItemForm: {
@@ -220,11 +241,20 @@ export default {
       });
     },
     handleRowClick(row) {
+      if (this.isRowClicking) {
+        this.$message.info('正在查看数据，请稍后');
+        return;
+      }
+      this.isRowClicking = true;
       this.currentTemplate = row;
       this.rightLoading = true;
       getInfoByInspectionItem(row.inspectionItem).then(response => {
         this.checkItemList = response.data || [];
         this.rightLoading = false;
+        this.isRowClicking = false;
+      }).catch(() => {
+        this.rightLoading = false;
+        this.isRowClicking = false;
       });
     },
     loadAvailableCheckItems() {
@@ -425,3 +455,113 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.template-list {
+  height: calc(100vh - 200px);
+  overflow-y: auto;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.template-item {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.template-item:hover {
+  border-color: #409eff;
+  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+.template-item.active {
+  border-color: #409eff;
+  background: linear-gradient(135deg, #ecf5ff 0%, #f0f7ff 100%);
+  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.25);
+}
+
+.template-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.template-item-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.template-item-actions {
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.template-item:hover .template-item-actions {
+  opacity: 1;
+}
+
+.template-item.active .template-item-actions {
+  opacity: 1;
+}
+
+.template-item-meta {
+  font-size: 13px;
+  color: #67c23a;
+  margin-top: 8px;
+}
+
+.template-unit {
+  padding: 2px 8px;
+  background: #f0f9eb;
+  border-radius: 4px;
+}
+
+.template-item-desc {
+  font-size: 13px;
+  color: #909399;
+  line-height: 1.5;
+  padding-top: 10px;
+  margin-top: 10px;
+  border-top: 1px solid #f0f0f0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* 滚动条样式 */
+.template-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.template-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.template-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.template-list::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>