工序检验静态页面

src/router/modules/process.ts

@@ -122,6 +122,15 @@ export default {
           },
         },
         {
+          path: "jianyan",
+          component: () => import("@/views/pro-steps/components/jianyan.vue"),
+          name: "Jianyan",
+          meta: {
+            back: true,
+            keepAlive: true,
+          },
+        },
+        {
           path: "screwdriver",
           component: () =>
             import("@/views/pro-steps/components/screwdriver.vue"),

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

@@ -0,0 +1,410 @@
+<template>
+  <div style="padding: 20px 0">
+    <div v-if="!excelViewStatus">
+      <el-table :data="tableData" border class="tableView">
+        <el-table-column
+          fixed
+          prop="formName"
+          label="检验项名称"
+          align="center"
+        />
+        <el-table-column prop="writeData" align="center" label="是否已检验">
+          <template #default="scope">
+            <span
+              :class="{
+                'red-text': scope.row.writeData === '',
+                'green-text': scope.row.writeData !== '',
+              }"
+            >
+              {{ scope.row.writeData === "" ? "否" : "是" }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="200">
+          <template #default="scope">
+            <el-button
+              link
+              v-if="scope.row.writeData !== ''"
+              class="btnText"
+              type="primary"
+              @click="handleLook(scope.row)"
+            >
+              查看
+            </el-button>
+            <el-button
+              link
+              class="btnText"
+              type="primary"
+              @click="handleEdit(scope.row)"
+            >
+              编辑
+            </el-button>
+
+            <el-popconfirm
+              v-if="scope.row.writeData !== ''"
+              :visible="scope.row.dialogVisible"
+              title="您确认重置吗？（重置此操作不可逆）"
+              width="200"
+              @cancel="scope.row.dialogVisible = false"
+              @confirm="reset(scope.row)"
+            >
+              <el-button> 取消 </el-button>
+              <el-button type="primary"> 确认 </el-button>
+              <template #reference>
+                <el-button
+                  link
+                  class="btnText"
+                  type="primary"
+                  @click="scope.row.dialogVisible = true"
+                  >重置</el-button
+                >
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div v-else class="fullScreen">
+      <div class="excelView">
+        <div class="view">
+          <ExcelView
+            v-model:data="excelData"
+            :option="excelOptions"
+            ref="excelViewRef"
+            :checkStatus="true"
+            :verifications="setting"
+          />
+        </div>
+        <div class="opeara">
+          <div class="titles" style="margin-bottom: 20px">
+            当前操作表格：{{ title }}
+          </div>
+          <div class="hang">
+            <div class="titles" style="width: 180px">扫码登录：</div>
+            <ScanCodeInput
+              v-model="seqVal"
+              @keyup.enter="checkUserStatus = true"
+              @click.stop
+            />
+          </div>
+          <div style="width: 100%" v-if="checkUserStatus == true">
+            <div class="infobox">
+              <div class="infoTitle">检验员：admin</div>
+              <div class="infoTitle">部门：质量检验1部</div>
+            </div>
+            <div
+              style="
+                display: grid;
+                gap: 10px;
+                grid-template-columns: repeat(2, 1fr);
+              "
+            >
+              <div class="gridItem">
+                <el-button type="warning" class="btn" @click="submitData"
+                  >数据校验</el-button
+                >
+              </div>
+              <div class="gridItem">
+                <el-button
+                  v-if="excelOptions.edit"
+                  type="primary"
+                  class="btn"
+                  @click="submitData"
+                  >保存报表</el-button
+                >
+              </div>
+              <div class="gridItem">
+                <el-button
+                  v-if="excelOptions.edit"
+                  type="primary"
+                  class="btn"
+                  @click="submitData"
+                  >检验签章</el-button
+                >
+              </div>
+              <div class="gridItem">
+                <el-button class="btn" @click="checkUserStatus = fasle"
+                  >注销</el-button
+                >
+              </div>
+              <div class="gridItem">
+                <el-button class="btn" @click="resetData">返回</el-button>
+              </div>
+            </div>
+          </div>
+          <div
+            v-else
+            style="font-size: 20px; font-weight: 600; margin-top: 10px"
+          >
+            注：请检验人员先扫工牌登录
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { getExcelData, setExcelData } from "@/api/prosteps/excel";
+import { useProcessStore } from "@/store";
+import { useDictionaryStore } from "@/store";
+const checkUserStatus = ref(false);
+const user = ref("");
+const setting = ref([]);
+const title = ref("");
+const dictS = useDictionaryStore();
+const store = useProcessStore();
+const tableData = ref([]);
+const dataList = async () => {
+  const { data } = await getExcelData(store.scanInfo.id);
+  tableData.value = data;
+};
+const cellClick = (row, column, cell, event) => {
+  if (column.label == "数据值") {
+    tableData1.value[row.index].setStatus =
+      !tableData1.value[row.index].setStatus;
+  }
+};
+const tableData1 = 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 toSuccess = (index) => {
+  tableData.value[index].setStatus = true;
+};
+const useExcelHook = () => {
+  const excelViewStatus = ref(false);
+  const excelData = ref(null);
+  const excelViewRef = ref(null);
+  const excelSelectRow = ref(null);
+  const excelOptions = ref({
+    opreaState: false,
+    in: false,
+    out: false,
+    print: false,
+    edit: true,
+    inName: "",
+  });
+  const resetData = () => {
+    if (excelViewRef.value) {
+      excelViewRef.value.saveCellData();
+      excelViewRef.value.reset();
+    }
+    excelViewStatus.value = false;
+    excelData.value = null;
+    excelSelectRow.value = null;
+    excelOptions.value = {
+      opreaState: false,
+      in: false,
+      out: false,
+      print: false,
+      edit: true,
+      inName: "",
+    };
+    title.value = "";
+  };
+  const reset = async (row) => {
+    excelData.value = "";
+    const { data, code } = await setExcelData({
+      excelData: excelData.value,
+      formName: row.formName,
+      excelFormId: row.excelFormId,
+      formType: row.formType,
+      processId: store.scanInfo.id,
+    });
+    if (code == "200") {
+      ElMessage.success("操作成功！");
+      row.dialogVisible = false;
+      resetData();
+      dataList();
+    }
+  };
+  const handleEdit = (row) => {
+    excelSelectRow.value = row;
+    if (row.writeData == "") {
+      excelData.value = JSON.parse(row.excelData);
+    } else {
+      excelData.value = JSON.parse(row.writeData);
+    }
+    excelOptions.value.inName = row.formName;
+    title.value = row.formName;
+    excelViewStatus.value = true;
+    // setting.value = row.settings;
+    // setting.value = [
+    //   {
+    //     position: "D2:D15",
+    //     checkStr: JSON.stringify({
+    //       up: 20.0,
+    //       down: 1.0,
+    //       type: "number",
+    //     }),
+    //   },
+    // ];
+  };
+  const handleLook = (row) => {
+    excelOptions.value.edit = false;
+    excelData.value = JSON.parse(row.writeData);
+    excelOptions.value.inName = row.formName;
+    excelViewStatus.value = true;
+  };
+  const submitData = async () => {
+    const blobPromise = excelViewRef.value.downloadBlobExcel();
+    blobPromise.then(async (blob) => {
+      const formData = new FormData();
+      excelData.value = excelViewRef.value.getData();
+      formData.append("file", blob);
+      formData.append("excelData", JSON.stringify(excelData.value)); // 确保非文件数据被正确格式化
+      formData.append("excelFormId", excelSelectRow.value.excelFormId);
+      formData.append("formName", excelSelectRow.value.formName);
+      formData.append("formType", excelSelectRow.value.formType);
+      formData.append("processId", store.scanInfo.id);
+      const { data, code } = await setExcelData(formData);
+      if (code == "200") {
+        ElMessage.success("操作成功！");
+        resetData();
+        dataList();
+      }
+    });
+  };
+  return {
+    excelViewStatus,
+    excelOptions,
+    excelData,
+    excelViewRef,
+    resetData,
+    handleEdit,
+    submitData,
+    handleLook,
+    reset,
+  };
+};
+const {
+  excelViewStatus,
+  excelOptions,
+  excelData,
+  excelViewRef,
+  resetData,
+  handleEdit,
+  submitData,
+  handleLook,
+  reset,
+} = useExcelHook();
+onMounted(() => {
+  dataList();
+});
+</script>
+
+<style lang="scss" scoped>
+.gridItem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+:deep(.luckysheet-scrollbar-y::-webkit-scrollbar) {
+  width: 30px !important;
+}
+:deep(.luckysheet-scrollbar-x::-webkit-scrollbar) {
+  height: 30px !important;
+}
+:deep(#luckysheet-scrollbar-y) {
+  width: 30px !important;
+}
+:deep(#luckysheet-scrollbar-x) {
+  height: 30px !important;
+}
+
+.fullScreen {
+  position: fixed;
+  width: 100vw;
+  height: 100vw;
+  z-index: 88;
+  top: 0;
+  left: 0;
+  background-color: rgb(241, 243, 245);
+}
+.btnText {
+  font-size: $f20;
+}
+.excelView {
+  width: 100%;
+  height: calc(100vh - 28px);
+  padding: 20px;
+  display: flex;
+  background-color: white;
+  border-radius: 16px;
+  .view {
+    position: relative;
+    flex: 1;
+    height: calc(100vh - 48px);
+  }
+  .opeara {
+    width: 500px;
+    height: 100%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .hang {
+      display: flex;
+      align-items: center;
+    }
+    .infobox {
+      width: 100%;
+      margin: 10px 0;
+      padding: 10px;
+      background-color: #eebe77;
+      border-radius: 16px;
+
+      .infoTitle {
+        font-size: 18px;
+        font-weight: bolder;
+      }
+    }
+    .titles {
+      width: 100%;
+      font-size: 25px;
+      text-align: center;
+    }
+  }
+}
+.tableView {
+  width: 100%;
+  height: calc(100vh - 260px);
+  padding: 20px 0px;
+  border-radius: 16px;
+}
+.btn {
+  width: 120px;
+  border-radius: 16px;
+  height: 40px;
+  font-size: 16px;
+  margin: 10px 0;
+}
+.red-text {
+  color: red;
+}
+.green-text {
+  color: green;
+}
+:deep(.el-table__cell) {
+  background-color: #d5dade !important;
+}
+</style>

src/views/pro-steps/index.vue

@@ -1747,13 +1747,12 @@ const defaultComponents = [
     path: "execl",
     name: "Excel",
   },
-
-  // {
-  //   compentName: "设备确认",
-  //   iconName: "shebeijilu",
-  //   path: "shebeijilu",
-  //   name: "Shebeijilu",
-  // },
+  {
+    compentName: "工序检验",
+    iconName: "shebeijilu",
+    path: "jianyan",
+    name: "Jianyan",
+  },
   {
     compentName: "设备点检",
     iconName: "dianjian",