质量审核记录

src/views/query/qualityAudits/index.vue

@@ -19,22 +19,24 @@
         </div>
       </div>
       <!-- 表格主体 -->
-      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
-        <el-table-column align="left" width="80px" :show-overflow-tooltip="true">
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" class="el-table--small">
+        <el-table-column align="center" width="50">
           <template #header>
-            <div class="header-with-diagonal">
-              <span class="hour-label">时</span>
-              <div class="diagonal-line"></div>
-              <span class="day-label">日</span>
+            <div class="group-bias-divide">
+              <div class="top">日</div>
+              <div class="bottom">时</div>
             </div>
           </template>
           <template #default="scope">
-            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
+            {{ (scope.$index + 1).toString().padStart(2, '0') }}
           </template>
         </el-table-column>
 
         <template v-for="item in columns" :key="item">
-          <el-table-column v-bind="item" :align="item.align ?? 'center'" :reserve-selection="item.type == 'selection'">
+          <el-table-column v-bind="item" :align="item.align ?? 'center'">
+            <template #default="scope">
+              <img class="img-documented" src="@/assets/images/documented.png">
+            </template>
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -74,8 +76,29 @@ const resetQuery = () => {
 
 };
 
-const processTableData = ref([
-]);
+const processTableData = ref(processTableDatas());
+
+function processTableDatas(){
+  const datas = [];
+  for (let i = 1; i <= 24; i++) {
+    const datas2 = [];
+    datas2.push({day1 : "1"})
+    datas2.push({day2 : "1"})
+    datas2.push({day3 : "1"})
+    datas2.push({day4 : "1"})
+    datas2.push({day5 : "1"})
+    datas2.push({day6 : "1"})
+    datas2.push({day7 : "1"})
+    datas2.push({day8 : "1"})
+    datas2.push({day9 : "1"})
+    datas2.push({day10 : "1"})
+    datas2.push({day11 : "1"})
+    datas2.push({day12 : "1"})
+    datas2.push({day13 : "1"})
+    datas.push(datas2)
+  }
+  return datas;
+}
 
 // 假设当前月份为5月
 const month = 5;
@@ -86,39 +109,60 @@ function generateColumns(month: number): ColumnProps[] {
   const daysInMonth = new Date(new Date().getFullYear(), month, 0).getDate();
   const columns = [];
   for (let i = 1; i <= daysInMonth; i++) {
-    columns.push({ prop: `day${i}`, label: i.toString().padStart(2, '0'),width:50 });
+    columns.push({ prop: `day${i}`, label: i.toString().padStart(2, '0'),width:51});
   }
-
+  console.log(columns)
   return columns;
 }
 
 </script>
-<style>
-.header-with-diagonal {
-  position: relative;
-  text-align: center;
-  height: 25px;
+<style scoped>
+:deep .el-table--small .el-table__row {
+  height: 33px !important;
+  font-size: 13px !important;
 }
-
-.hour-label {
-  position: absolute;
-  bottom: 0;
-  left: 0;
+:deep .el-table--small .el-table__header th {
+  height: 31px !important;
+  font-size: 14px !important;
 }
+</style>
+<style lang='scss' scoped>
+:deep(.group-bias-divide) {
+  .top {
+    text-align: right;
+    padding-right: 0px;
+    box-sizing: border-box;
+    line-height: 9px;
+    font-size: 11px;
+  }
 
-.day-label {
-  position: absolute;
-  top: 0;
-  right: 0;
+  .bottom {
+    text-align: left;
+    padding-left: 0px;
+    padding-top: 1px;
+    box-sizing: border-box;
+    line-height: 10px;
+    font-size: 11px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 1px !important;
+      height: 90px !important;
+      top: auto !important;
+      left: auto !important;
+      bottom: 0 !important;
+      right: 0 !important;
+      background-color: #C7E2FF;
+      display: block;
+      transform: rotate(300deg);
+      transform-origin: bottom;
+    }
+  }
 }
 
-.diagonal-line {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: #000;
-  transform: rotate(25deg);
-  transform-origin: left center;
+.img-documented{
+  width: 15px;
+  height: 15px;
 }
 </style>