|
|
@@ -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>
|
