Home Explore Help
Register Sign In
jiaxiaoqiang
/
JG-CLIENT-TEMP
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

工序表单校验样式修改实现

dengrui 4 weeks ago
parent
42a86e3152
commit
0af0702905
11 changed files with 8487 additions and 73 deletions
Split View Show Diff Stats
  1. 56 57
      index.html
  2. 2 2
      public/LuckExcel/luckysheet.umd.js
  3. 457 0
      public/luckysheet/iconfont.css
  4. 7039 0
      public/luckysheet/luckysheet.css
  5. 27 0
      public/luckysheet/luckysheet.umd.js
  6. 1 0
      public/luckysheet/plugin.js
  7. 10 0
      public/luckysheet/plugins.css
  8. 717 0
      public/luckysheet/pluginsCss.css
  9. 77 5
      src/components/ExcelView/index.vue
  10. 4 2
      src/plugins/permission.ts
  11. 97 7
      src/views/pro-steps/components/excel.vue

+ 56 - 57
index.html
View File 

@@ -1,71 +1,70 @@
 
 <!doctype html>
 
 <html lang="en">
 
-<head>
 
-  <meta charset="UTF-8"/>
 
-  <link href="/logo.png" rel="icon"/>
 
-  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
 
-  <meta
 
-    content="Vue3 + Vite5 + TypeScript5 + Element-Plus 的后台管理模板，配套接口文档和后端源码，vue-element-admin 的 Vue3 版本"
 
-    name="description"
 
-  />
 
-  <meta
 
-    content="vue,element-plus,typescript,vue-element-admin,vue3-element-admin"
 
-    name="keywords"
 
-  />
 
-  <title>金陵智造 | 鸿蒙工业系统</title>
 
-  <link rel="stylesheet" href="/LuckExcel/pluginsCss.css" />
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <link href="/logo.png" rel="icon" />
 
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 
+    <meta
 
+      content="Vue3 + Vite5 + TypeScript5 + Element-Plus 的后台管理模板，配套接口文档和后端源码，vue-element-admin 的 Vue3 版本"
 
+      name="description"
 
+    />
 
+    <meta
 
+      content="vue,element-plus,typescript,vue-element-admin,vue3-element-admin"
 
+      name="keywords"
 
+    />
 
+    <title>金陵智造 | 鸿蒙工业系统</title>
 
+    <link rel="stylesheet" href="/LuckExcel/pluginsCss.css" />
 
     <link rel="stylesheet" href="/LuckExcel/plugins.css" />
 
     <link rel="stylesheet" href="/LuckExcel/luckysheet.css" />
 
     <link rel="stylesheet" href="/LuckExcel/iconfont.css" />
 
     <script src="/LuckExcel/plugin.js"></script>
 
     <script src="/LuckExcel/luckysheet.umd.js"></script>
 
-</head>
 
+  </head>
 
 
-<body>
 
-<div id="app">
 
-</div>
 
-</body>
 
-<script src="/src/main.ts" type="module"></script>
 
+  <body>
 
+    <div id="app"></div>
 
+  </body>
 
+  <script src="/src/main.ts" type="module"></script>
 
 
-<style>
 
-  html,
 
-  body,
 
-  #app {
 
-    position: relative;
 
-    display: flex;
 
-    align-items: center;
 
-    justify-content: center;
 
-    width: 100%;
 
-    height: 100%;
 
-  }
 
+  <style>
 
+    html,
 
+    body,
 
+    #app {
 
+      position: relative;
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: center;
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
 
-  .loader {
 
-    position: relative;
 
-    width: 40px;
 
-    aspect-ratio: 0.577;
 
-    overflow: hidden;
 
-    clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
 
-    animation: l19 2s infinite linear;
 
-  }
 
+    .loader {
 
+      position: relative;
 
+      width: 40px;
 
+      aspect-ratio: 0.577;
 
+      overflow: hidden;
 
+      clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
 
+      animation: l19 2s infinite linear;
 
+    }
 
 
-  .loader::before {
 
-    position: absolute;
 
-    inset: -150%;
 
-    content: "";
 
-    background: repeating-conic-gradient(
 
-      from 30deg,
 
-      #ffabab 0 60deg,
 
-      #abe4ff 0 120deg,
 
-      #ff7373 0 180deg
 
-    );
 
-    animation: inherit;
 
-    animation-direction: reverse;
 
-  }
 
+    .loader::before {
 
+      position: absolute;
 
+      inset: -150%;
 
+      content: "";
 
+      background: repeating-conic-gradient(
 
+        from 30deg,
 
+        #ffabab 0 60deg,
 
+        #abe4ff 0 120deg,
 
+        #ff7373 0 180deg
 
+      );
 
+      animation: inherit;
 
+      animation-direction: reverse;
 
+    }
 
 
-  @keyframes l19 {
 
-    100% {
 
-      transform: rotate(360deg);
 
+    @keyframes l19 {
 
+      100% {
 
+        transform: rotate(360deg);
 
+      }
 
     }
 
-  }
 
-</style>
 
+  </style>
 
 </html>

File diff suppressed because it is too large
+ 2 - 2
public/LuckExcel/luckysheet.umd.js


File diff suppressed because it is too large
+ 457 - 0
public/luckysheet/iconfont.css


File diff suppressed because it is too large
+ 7039 - 0
public/luckysheet/luckysheet.css


File diff suppressed because it is too large
+ 27 - 0
public/luckysheet/luckysheet.umd.js


File diff suppressed because it is too large
+ 1 - 0
public/luckysheet/plugin.js


File diff suppressed because it is too large
+ 10 - 0
public/luckysheet/plugins.css


File diff suppressed because it is too large
+ 717 - 0
public/luckysheet/pluginsCss.css


+ 77 - 5
src/components/ExcelView/index.vue
View File 

@@ -130,7 +130,68 @@ const resetOb = ref({
 
     cellFormat: true, // 设置单元格格式
 
   },
 
   data: null,
 
+  hook: {
 
+    cellUpdated: function (r, c, oldVal, newVal) {
 
+      const rule = getCellRule(r, c);
 
+      if (rule) {
 
+        const res = getCheckRes(newVal.v, rule);
 
+        if (res == false) {
 
+          newVal.bg = "#ea5530";
 
+          newVal.fc = "#ffffff";
 
+        } else {
 
+          newVal.bg = "";
 
+          newVal.fc = "#000000";
 
+        }
 
+      }
 
+    },
 
+  },
 
 });
 
+//数据渲染前根据规则设置cell样式
 
+const setCheckData = (data, dataVerification) => {
 
+  const setData = JSON.parse(JSON.stringify(data));
 
+  setData.forEach((element, row) => {
 
+    element.forEach((cell, col) => {
 
+      if (!cell) {
 
+        return;
 
+      } else {
 
+        const rule = dataVerification[`${row}_${col}`];
 
+        if (rule) {
 
+          //校验
 
+          const res = getCheckRes(cell.v, rule);
 
+          if (res == false) {
 
+            cell.bg = "#ea5530";
 
+            cell.fc = "#ffffff";
 
+          }
 
+        }
 
+      }
 
+    });
 
+  });
 
+  return setData;
 
+};
 
+//获取单元格规则
 
+const getCellRule = (row, column) => {
 
+  return luckysheet.getSheet().dataVerification[`${row}_${column}`];
 
+};
 
+//判断当前表格校验规则结果
 
+const getCheckRes = (val, rull) => {
 
+  let res = false;
 
+  switch (rull.type2) {
 
+    //类型为value1和value2直接
 
+    case "bw":
 
+      if (val >= Number(rull.value1) && val <= Number(rull.value2)) {
 
+        res = true;
 
+      }
 
+      break;
 
+  }
 
+  return res;
 
+};
 
+//设置某个单元格样式
 
+const setCellStyle = (row, column) => {
 
+  luckysheet.setCellValue(row, column, {
 
+    bg: "#ea5530",
 
+    fc: "#ffffff",
 
+  });
 
+};
 
 //print
 
 const print = () => {
 
   console.log(luckysheet);
 
@@ -181,6 +242,10 @@ const leadingExcel = (item, fileList) => {
 
     resetOb.value.data = data;
 
     emits("update:data", data);
 
     inName.value = file.name;
 
+    resetOb.value.data[0].data = setCheckData(
 
+      resetOb.value.data[0].data,
 
+      resetOb.value.data[0].dataVerification
 
+    );
 
     window.luckysheet.create(resetOb.value);
 
   });
 
 };
 
@@ -230,16 +295,18 @@ const setVerification = () => {
 
     ) {
 
     } else {
 
       let option = {
 
-        type: "number",
 
+        type: JSON.parse(props.verifications[i].checkStr).type,
 
         type2: "bw",
 
-        value1: JSON.parse(props.verifications[i].checkStr).down,
 
-        value2: JSON.parse(props.verifications[i].checkStr).up,
 
+        value1: Number(JSON.parse(props.verifications[i].checkStr).down),
 
+        value2: Number(JSON.parse(props.verifications[i].checkStr).up),
 
         hintShow: true,
 
         hintText: `请输入${JSON.parse(props.verifications[i].checkStr).down}-${JSON.parse(props.verifications[i].checkStr).up}的数字`,
 
       };
 
       luckysheet.setDataVerification(
 
         { ...option },
 
-        { range: props.verifications[i].position }
 
+        {
 
+          range: props.verifications[i].position,
 
+        }
 
       );
 
     }
 
   }
 
@@ -256,14 +323,19 @@ onMounted(() => {
 
   if (props.option.edit == false) {
 
     resetOb.value.allowEdit = false;
 
   }
 
+  resetOb.value.data[0].data = setCheckData(
 
+    resetOb.value.data[0].data,
 
+    resetOb.value.data[0].dataVerification
 
+  );
 
   luckysheet.create(resetOb.value);
 
 });
 
+
 
 watch(
 
   () => props.verifications,
 
   () => {
 
     nextTick(() => {
 
       if (props.checkStatus == true && props.verifications.length > 0) {
 
-        setVerification();
 
+        // setVerification();
 
       }
 
     });
 
   },

+ 4 - 2
src/plugins/permission.ts
View File 

@@ -6,7 +6,6 @@ import { useSettingsStore, useUserStore } from "@/store";
 
 
 export function setupPermission() {
 
   router.beforeEach(async (to, from, next) => {
 
-    console.log(to, from);
 
     const userStore = useUserStore();
 
     NProgress.start();
 
     const isShow = inject("isShow");
 
@@ -20,7 +19,10 @@ export function setupPermission() {
 
     if (hasToken) {
 
       const dictStore = useDictionaryStore();
 
       dictStore.checkAllData();
 
-      if (!dictStore.dicts.value || JSON.stringify(dictStore.dicts.value) === "{}") {
 
+      if (
 
+        !dictStore.dicts.value ||
 
+        JSON.stringify(dictStore.dicts.value) === "{}"
 
+      ) {
 
         const res = await getUserDicts(dictStore.types);
 
         if (res.data) {
 
           dictStore.dicts = res?.data ?? [];

+ 97 - 7
src/views/pro-steps/components/excel.vue
View File 

@@ -76,9 +76,58 @@
 
           />
 
         </div>
 
         <div class="opeara">
 
-          <div class="titles">当前操作表格:</div>
 
-          <div class="titles">{{ title }}</div>
 
-          <div>
 
+          <div class="titles" style="margin-bottom: 20px">
 
+            当前操作表格：{{ title }}
 
+          </div>
 
+          <div class="titles" style="text-align: start; width: 100%">
 
+            设备数据采集列表：
 
+          </div>
 
+          <div class="tableView" style="height: calc(100vh - 460px)">
 
+            <el-table
 
+              :data="tableData1"
 
+              @cell-click="cellClick"
 
+              border
 
+              style="width: 100%; height: calc(100vh - 500px); z-index: 1"
 
+            >
 
+              <el-table-column type="selection" />
 
+              <el-table-column
 
+                label="序号"
 
+                width="80"
 
+                type="index"
 
+                align="center"
 
+              />
 
+              <el-table-column
 
+                prop="dataName"
 
+                label="数据名称"
 
+                align="center"
 
+              />
 
+              <el-table-column prop="dataValue" align="center" label="数据值">
 
+                <template #default="scope">
 
+                  <div v-if="scope.row.setStatus" style="display: flex">
 
+                    <el-input
 
+                      @click.stop
 
+                      v-model="scope.row.dataValue"
 
+                      placeholder="请输入数据值"
 
+                      style="width: 150px"
 
+                    />
 
+                    <el-button
 
+                      link
 
+                      style="margin-left: 10px"
 
+                      @click="toSuccess(scope.$index)"
 
+                      >完成</el-button
 
+                    >
 
+                  </div>
 
+                  <div v-else>{{ scope.row.dataValue }}</div>
 
+                </template>
 
+              </el-table-column>
 
+            </el-table>
 
+          </div>
 
+          <div
 
+            style="display: flex; width: 100%; justify-content: space-evenly"
 
+          >
 
+            <el-button type="success" class="btn" @click="submitData"
 
+              >获取数据</el-button
 
+            >
 
             <el-button
 
               v-if="excelOptions.edit"
 
               type="primary"
 
@@ -111,6 +160,37 @@ 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);
 
@@ -168,7 +248,17 @@ const useExcelHook = () => {
 
     excelOptions.value.inName = row.formName;
 
     title.value = row.formName;
 
     excelViewStatus.value = true;
 
-    setting.value = row.settings;
 
+    // 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;
 
@@ -262,14 +352,14 @@ onMounted(() => {
 
     height: calc(100vh - 48px);
 
   }
 
   .opeara {
 
-    width: 200px;
 
+    width: 500px;
 
     height: 100%;
 
     padding: 10px;
 
     display: flex;
 
     flex-direction: column;
 
     align-items: center;
 
     .titles {
 
-      width: 200px;
 
+      width: 100%;
 
       font-size: 25px;
 
       text-align: center;
 
     }
 
@@ -282,7 +372,7 @@ onMounted(() => {
 
   border-radius: 16px;
 
 }
 
 .btn {
 
-  width: 180px;
 
+  width: 120px;
 
   border-radius: 16px;
 
   height: 40px;
 
   font-size: 16px;