设备点检静态界面

src/views/pro-steps/components/dianjian.vue

@@ -1,6 +1,89 @@
 <template>
-  <div class="stepsViewScroll" style="width: calc(100% - 40px)">
-    <div class="recordBox" v-for="(item, index) in checkListData" :key="index">
+  <div style="height: calc(100vh - 220px)">
+    <div class="scanCode">
+      <ScanCodeInput v-model="scanCode" @keyup.enter="enterfnc" />
+    </div>
+    <div class="materialInfoBody">
+      <el-scrollbar @click.stop style="height: calc(100vh - 360px)">
+        <el-table
+          :data="tableData"
+          @cell-click="cellClick"
+          :cell-class-name="cellClassName"
+          border
+          style="width: 100%; height: calc(100vh - 360px); z-index: 1"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            width="120"
+            align="center"
+          />
+          <el-table-column
+            prop="materialName"
+            label="设备名称"
+            align="center"
+          />
+          <el-table-column prop="materialModel" label="型号" align="center" />
+          <el-table-column prop="deviceCode" align="center" label="设备编号">
+            <template #default="scope">
+              <div v-if="scope.row.setStatus" style="display: flex">
+                <el-input
+                  @click.stop
+                  v-model="scope.row.deviceCode"
+                  placeholder="请输入设备编号"
+                  style="width: 150px"
+                />
+                <el-button
+                  type="primary"
+                  style="margin-left: 5px"
+                  link
+                  @click.stop="getInfo(scope.$index, scope.row.deviceCode)"
+                  >完成</el-button
+                >
+              </div>
+              <div v-else>{{ scope.row.deviceCode }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date1"
+            label="计量有效期"
+            width="160"
+            align="center"
+          >
+            <template #default="scope">
+              <div
+                :class="
+                  isNowLessThanOrEqualTo(scope.row.date1) != true
+                    ? 'redDate'
+                    : ''
+                "
+              >
+                {{ scope.row.date1 }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date2"
+            width="160"
+            label="唯保有效期"
+            align="center"
+          />
+        </el-table>
+      </el-scrollbar>
+      <div class="btns">
+        <el-button
+          style="width: 80px; height: 40px; font-size: 16px"
+          type="primary"
+          >保存</el-button
+        >
+        <el-button
+          style="width: 80px; height: 40px; font-size: 16px"
+          type="primary"
+          >取消</el-button
+        >
+      </div>
+    </div>
+    <!-- <div class="recordBox" v-for="(item, index) in checkListData" :key="index">
       <div class="leftMsg">
         <div class="msgHeader">
           <div class="titleText">{{ item.checkName }}</div>
@@ -13,7 +96,7 @@
         </div>
       </div>
       <div class="rightOperate">
-        <!-- 占位div -->
+
         <div style="width: 280px; font-size: 20px">
           内容：{{ item.content }}
         </div>
@@ -37,14 +120,73 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import { checkList, checkUpdate } from "@/api/prosteps/dianjian";
 import { useProcessStore } from "@/store";
 defineOptions({ name: "Dianjian" });
+const scanCode = ref("");
+function isNowLessThanOrEqualTo(targetDateStr) {
+  const now = new Date(); // 当前时间
+  const targetDate = new Date(targetDateStr); // 转换为 Date 对象
+  // 去掉时间部分，只比较年月日
+  const nowDateOnly = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate()
+  );
+  const targetDateOnly = new Date(targetDate);
+  return nowDateOnly <= targetDateOnly ? true : false;
+}
+// const cellClassName = ({ row, column, rowIndex, columnIndex }) => {
+//   if (columnIndex == 4) {
+//     if (isNowLessThanOrEqualTo(row.date1) != true) {
+//       return "redData";
+//     }
+//   } else if (columnIndex == 5) {
+//     if (isNowLessThanOrEqualTo(row.date2) != true) {
+//       return "redData";
+//     }
+//   }
+// };
+
+const tableData = ref([
+  {
+    materialName: "电动推杆",
+    materialModel: "SG-001",
+    deviceCode: 20,
+
+    date1: "2026-05-05",
+    date2: "2026-05-08",
+    setStatus: false,
+    index: 0,
+  },
+  {
+    materialName: "微波片",
+    materialModel: "AX-21231",
+    deviceCode: "",
+
+    date1: "2021-05-05",
+    date2: "2026-05-05",
+    setStatus: false,
+    index: 1,
+  },
+]);
+const getInfo = (index, code) => {
+  ElMessage.success("查询成功");
+  tableData.value[index].setStatus = false;
+};
+const cellClick = (row, column, cell, event) => {
+  console.log(row, column, cell, event);
+  if (column.label == "设备编号") {
+    tableData.value[row.index].setStatus =
+      !tableData.value[row.index].setStatus;
+  }
+};
+const enterfnc = () => {};
 const checkListData = ref([]);
 const store = useProcessStore();
 const getCheckList = async () => {
@@ -81,7 +223,7 @@ const updateCheck = async (item, res) => {
     item.result = res;
   });
 };
-const setBoxStatus = (status: string) => {
+const setBoxStatus = (status) => {
   let style = "";
   switch (status) {
     case "1":
@@ -102,12 +244,43 @@ const hege = async (index) => {
 const buhege = async (index) => {
   updateCheck(checkListData.value[index], "2");
 };
-onMounted(() => {
-  getCheckList();
-});
+// onMounted(() => {
+//   getCheckList();
+// });
 </script>
 
 <style lang="scss" scoped>
+.redDate {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: red !important;
+  color: white;
+  width: 100%;
+  height: 100%;
+  line-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.materialInfoBody {
+  width: 100%;
+  height: calc(100vh - 360px);
+  margin-top: 10px;
+  .btns {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+}
+.scanCode {
+  width: 400px;
+  margin-top: $p5;
+  border-radius: 25px;
+  overflow: hidden;
+}
 .titleText {
   font-size: $f24;
   font-weight: $Medium;

src/views/pro-steps/components/excel.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="padding: 20px 0">
     <div v-if="!excelViewStatus">
-      <el-table :data="tableData" class="tableView">
+      <el-table :data="tableData" border class="tableView">
         <el-table-column
           fixed
           prop="formName"
@@ -248,7 +248,6 @@ onMounted(() => {
 }
 .btnText {
   font-size: $f20;
-  color: white;
 }
 .excelView {
   width: 100%;
@@ -295,4 +294,7 @@ onMounted(() => {
 .green-text {
   color: green;
 }
+:deep(.el-table__cell) {
+  background-color: #d5dade !important;
+}
 </style>

src/views/pro-steps/components/wuliaocaiji.vue

@@ -7,7 +7,7 @@
       <el-table
         :data="tableData"
         border
-        style="width: 100%; height: calc(100vh - 360px)"
+        style="width: 100%; height: calc(100vh - 360px); z-index: 1"
       >
         <el-table-column label="序号" type="index" width="120" align="center" />
         <el-table-column prop="materialModel" label="物料规格" align="center" />

src/views/pro-steps/index.vue

@@ -1754,12 +1754,12 @@ const defaultComponents = [
   //   path: "shebeijilu",
   //   name: "Shebeijilu",
   // },
-  // {
-  //   compentName: "检验",
-  //   iconName: "dianjian",
-  //   path: "dianjian",
-  //   name: "Dianjian",
-  // },
+  {
+    compentName: "设备点检",
+    iconName: "dianjian",
+    path: "dianjian",
+    name: "Dianjian",
+  },
 ];
 //当前路由在setpComponents中的index
 const selectIndex = ref(null);
@@ -2040,9 +2040,12 @@ watch(
   background-color: #00000020 !important;
 }
 :deep(.el-table--fit) {
-  background-color: #d5dade !important;
+  background-color: #d5dade;
 }
 :deep(.el-table__cell) {
+  background-color: #d5dade;
+}
+:deep(.el-table__header > thead > tr > .el-table__cell) {
   background-color: #d5dade !important;
 }
 </style>