拷机

src/views/qualitymanagement/tcheck/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="title">
+  <div>
     <el-row>
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="拷机计划">
@@ -16,8 +16,8 @@
       </el-form>
     </el-row>
     <el-row :gutter="20">
-      <el-col :span="12">
-        <el-table v-loading="loading" :data="state.tcheck_tableData" border stripe style="width: 100%"
+      <el-col :span="8">
+        <!-- <el-table v-loading="loading" :data="state.tcheck_tableData" border stripe style="width: 100%"
           :height="tcheck_tableHeight" highlight-current-row @current-change="handleCurrentRowChange"
           @row-click="handleRowClick" :header-cell-style="{ background: '#606266', color: '#FFFFFF' }">
           <el-table-column fixed type="index" width="50" align="center" />
@@ -64,8 +64,49 @@
                 @click="handleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
-        </el-table>
-
+        </el-table> -->
+        <el-space direction="vertical" alignment="start" :size="5">
+        <el-col v-for="item in state.tcheck_tableData" :key="item.id" :span="5" style="margin-bottom: 10px" :offset="1">
+          <el-card style="width: 300px;">
+            <div slot="header" class="clearfix">
+              <i class="el-icon-user" /><span style="margin-left: 5px">{{
+                  item.checkName
+              }}</span>
+              <div style="display: inline-block; float: right; cursor: pointer">
+                <el-tooltip effect="dark" content="编辑" placement="top">
+                  <i class="el-icon-edit-outline" style="margin-left: 15px" />
+                </el-tooltip>
+              </div>
+            </div>
+            <div>
+              <ul class="role-info">
+                <li>
+                  <div class="role-left">计划时长：{{ item.checkDays }}</div>
+                </li>
+                <li>
+                  <div class="role-left">上传间隔：{{ item.checkIntverl }}</div>
+                </li>
+                <li>
+                  <div class="role-left">
+                    开始时间：
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div style="display: inline-block; float: left; cursor: pointer">
+              <el-tooltip effect="dark" content="开始拷机" placement="bottom">
+                <i class="el-icon-menu" />
+              </el-tooltip>
+            </div>
+            <div style="display: inline-block; float: right; cursor: pointer">
+              <el-tooltip effect="dark" content="删除" placement="bottom">
+                <i class="el-icon-delete" style="margin-left: 15px" />
+              </el-tooltip>
+            </div>
+          </el-card>
+
+        </el-col>
+        </el-space>
         <el-config-provider :locale="locale">
           <el-pagination v-model:currentPage="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
             :page-sizes="[10, 15, 20, 25, 100]" :small="state.small" :disabled="state.disabled"
@@ -445,7 +486,7 @@ const querySearchAsync = (queryString: string, callback: (arg: any) => void) =>
 
   });
 }
-const handleSelect = (item:any) => {
+const handleSelect = (item: any) => {
   console.log(item)
 }
 onMounted(() => {