feature/表格数据限制提示

src/components/ExcelView/index.vue

@@ -61,6 +61,16 @@ const props = defineProps({
       opreaTitle: true,
     }),
   },
+  //校验区域
+  verifications: {
+    type: Array,
+    default: () => [],
+  },
+  //校验状态
+  checkStatus: {
+    type: Boolean,
+    default: false,
+  },
 });
 //update:data ： v-model表格data ，confirm : 获取此时表格data
 const emits = defineEmits(["update:data", "confirm"]);
@@ -189,6 +199,57 @@ const saveCellData = () => {
   };
   enter();
 };
+function convertFromReadableFormat(rangeString) {
+  // 解析单元格区域描述，例如 "A1:A10"
+  const regex = /([A-Z]+)(\d+):([A-Z]+)(\d+)/;
+  const match = rangeString.match(regex);
+
+  if (!match) {
+    throw new Error("Invalid range format");
+  }
+
+  const startColumn = match[1]; // 起始列，例如 "A"
+  const startRow = parseInt(match[2], 10); // 起始行，例如 1
+  const endColumn = match[3]; // 结束列，例如 "A"
+  const endRow = parseInt(match[4], 10); // 结束行，例如 10
+
+  // 将列名转换为列索引，例如 "A" -> 0, "B" -> 1, ...
+  const startColumnIndex = startColumn.charCodeAt(0) - 65;
+  const endColumnIndex = endColumn.charCodeAt(0) - 65;
+
+  // 构建结果对象
+  const result = {
+    row: startRow - 1,
+    column: startColumnIndex,
+    row_end: endRow - 1,
+    column_end: endColumnIndex,
+  };
+
+  return result;
+}
+//配置单元格校验
+const setVerification = () => {
+  for (let i = 0; i < props.verifications.length; i++) {
+    if (
+      !props.verifications[i].checkStr ||
+      props.verifications[i].checkStr === ""
+    ) {
+    } else {
+      let option = {
+        type: "number",
+        type2: "bw",
+        value1: JSON.parse(props.verifications[i].checkStr).down,
+        value2: 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 }
+      );
+    }
+  }
+};
 defineExpose({ confirm, reset, saveCellData, getRangeAxis });
 onMounted(() => {
   if (props.data == null) {
@@ -203,6 +264,17 @@ onMounted(() => {
   }
   luckysheet.create(resetOb.value);
 });
+watch(
+  () => props.verifications,
+  () => {
+    nextTick(() => {
+      if (props.checkStatus == true && props.verifications.length > 0) {
+        setVerification();
+      }
+    });
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>

src/views/base/excel/template/index.vue

@@ -62,134 +62,173 @@
           />
         </div>
         <div class="form" v-if="options.edit">
-          <el-form
-            ref="formRef"
-            :model="formVlaue"
-            :rules="rules"
-            label-width="auto"
-            status-icon
-          >
-            <el-form-item label="表格名称" prop="formName">
-              <el-input v-model="formVlaue.formName" />
-            </el-form-item>
-            <el-form-item label="表格类型" prop="formType">
-              <el-select
-                v-model="formVlaue.formType"
-                placeholder="请选择表格类型"
-              >
-                <el-option
-                  v-for="(item, index) in dicts.excel_type"
-                  :key="index"
-                  :label="item.dictLabel"
-                  :value="item.dictValue"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="启用状态" prop="state">
-              <el-select v-model="formVlaue.state" placeholder="请选择状态">
-                <el-option
-                  v-for="(item, index) in dicts.excel_states"
-                  :key="index"
-                  :label="item.dictLabel"
-                  :value="item.dictValue"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <div class="btns">
-                <el-button
-                  v-if="!operaEditStatus"
-                  type="primary"
-                  @click="submitForm(formRef)"
-                >
-                  创 建
-                </el-button>
-                <el-button
-                  v-if="operaEditStatus"
-                  type="primary"
-                  @click="updateExForm(formRef)"
+          <el-scrollbar>
+            <el-form
+              ref="formRef"
+              :model="formVlaue"
+              :rules="rules"
+              label-width="auto"
+              :show-message="false"
+              status-icon
+            >
+              <el-form-item label="表格名称" prop="formName">
+                <el-input v-model="formVlaue.formName" />
+              </el-form-item>
+              <el-form-item label="表格类型" prop="formType">
+                <el-select
+                  v-model="formVlaue.formType"
+                  placeholder="请选择表格类型"
                 >
-                  更 新
-                </el-button>
-                <el-button v-if="!operaEditStatus" @click="resetForm(formRef)"
-                  >重 置</el-button
+                  <el-option
+                    v-for="(item, index) in dicts.excel_type"
+                    :key="index"
+                    :label="item.dictLabel"
+                    :value="item.dictValue"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="启用状态" prop="state">
+                <el-select v-model="formVlaue.state" placeholder="请选择状态">
+                  <el-option
+                    v-for="(item, index) in dicts.excel_states"
+                    :key="index"
+                    :label="item.dictLabel"
+                    :value="item.dictValue"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <div class="btns">
+                  <el-button
+                    v-if="!operaEditStatus"
+                    type="primary"
+                    @click="submitForm(formRef)"
+                  >
+                    创 建
+                  </el-button>
+                  <el-button
+                    v-if="operaEditStatus"
+                    type="primary"
+                    @click="updateExForm(formRef)"
+                  >
+                    更 新
+                  </el-button>
+                  <el-button v-if="!operaEditStatus" @click="resetForm(formRef)"
+                    >重 置</el-button
+                  >
+                  <el-button type="primary" @click="resetData">
+                    取 消
+                  </el-button>
+                </div>
+              </el-form-item>
+            </el-form>
+            <div class="add">
+              <div class="body">
+                <el-form
+                  ref="formRef1"
+                  :model="addForm"
+                  :rules="addRules"
+                  label-width="auto"
+                  status-icon
+                  :show-message="false"
+                  style="width: 410px"
                 >
-                <el-button type="primary" @click="resetData"> 取 消 </el-button>
+                  <el-form-item label="数据名称" prop="paramName">
+                    <el-input v-model="addForm.paramName" />
+                  </el-form-item>
+                  <el-form-item label="同步坐标" prop="position">
+                    <el-input :disabled="true" v-model="addForm.position" />
+                  </el-form-item>
+                  <el-form-item label="上限值" prop="up">
+                    <el-input v-model="addForm.up" />
+                  </el-form-item>
+                  <el-form-item label="下限值" prop="down">
+                    <el-input v-model="addForm.down" />
+                  </el-form-item>
+                  <el-form-item label="标准值" prop="standard">
+                    <el-input v-model="addForm.standard" />
+                  </el-form-item>
+                  <el-form-item label="数据来源" prop="source">
+                    <el-input v-model="addForm.source" />
+                  </el-form-item>
+                  <el-form-item>
+                    <div class="btns">
+                      <el-button
+                        :disabled="!operaEditStatus"
+                        type="primary"
+                        @click="creatAddForm()"
+                      >
+                        新增
+                      </el-button>
+                    </div>
+                  </el-form-item>
+                </el-form>
               </div>
-            </el-form-item>
-          </el-form>
-          <div class="add">
-            <div class="body">
-              <el-form
-                ref="formRef1"
-                :model="addForm"
-                :rules="addRules"
-                label-width="auto"
-                status-icon
+            </div>
+            <div class="table">
+              <el-table
+                id="table"
+                border
+                :data="settings"
+                style="width: 430px; max-height: 240px"
               >
-                <el-form-item label="数据名称" prop="paramName">
-                  <el-input v-model="addForm.paramName" />
-                </el-form-item>
-                <el-form-item label="同步坐标" prop="position">
-                  <el-input :disabled="true" v-model="addForm.position" />
-                </el-form-item>
-                <el-form-item>
-                  <div class="btns">
+                <el-table-column prop="paramName" label="名称" />
+                <el-table-column prop="position" label="坐标" />
+                <el-table-column prop="checkStr" width="60" label="上限值">
+                  <template #default="{ row }">
+                    <span>{{ row.up ? row.up : "-" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="checkStr" width="60" label="下限值">
+                  <template #default="{ row }">
+                    <span>{{ row.down ? row.down : "-" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="checkStr" width="60" label="标准值">
+                  <template #default="{ row }">
+                    <span>{{ row.standard ? row.standard : "-" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="checkStr" width="60" label="数据来源">
+                  <template #default="{ row }">
+                    <span>{{ row.source ? row.source : "-" }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="60">
+                  <template #default="{ row }">
                     <el-button
-                      :disabled="!operaEditStatus"
+                      link
                       type="primary"
-                      @click="creatAddForm()"
+                      size="small"
+                      @click="deleteSettings(row.id)"
+                      >删除</el-button
                     >
-                      新增
-                    </el-button>
-                  </div>
-                </el-form-item>
-              </el-form>
+                  </template>
+                </el-table-column>
+              </el-table>
             </div>
-          </div>
-          <div class="table">
-            <el-table
-              id="table"
-              border
-              :data="settings"
-              style="width: 260px; max-height: 240px"
-            >
-              <el-table-column prop="paramName" label="名称" />
-              <el-table-column prop="position" label="坐标" />
-              <el-table-column label="操作" width="60">
-                <template #default="{ row }">
-                  <el-button
-                    link
-                    type="primary"
-                    size="small"
-                    @click="deleteSettings(row.id)"
-                    >删除</el-button
-                  >
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-          <div class="btns">
-            <el-button
-              :disabled="searchForm.pageNo == 1"
-              link
-              type="primary"
-              @click="deletePage"
-            >
-              上一页
-            </el-button>
-            <el-button
-              :disabled="
-                searchForm.totalPages == searchForm.pageNo ||
-                searchForm.totalPages == 0
-              "
-              link
-              type="primary"
-              @click="addPage"
-            >
-              下一页
-            </el-button>
-          </div>
+            <div class="btns">
+              <el-button
+                :disabled="searchForm.pageNo == 1"
+                link
+                type="primary"
+                @click="deletePage"
+              >
+                上一页
+              </el-button>
+              <el-button
+                :disabled="
+                  searchForm.totalPages == searchForm.pageNo ||
+                  searchForm.totalPages == 0
+                "
+                link
+                type="primary"
+                @click="addPage"
+              >
+                下一页
+              </el-button>
+            </div>
+          </el-scrollbar>
         </div>
         <div class="form" v-else>
           <el-button type="primary" @click="resetData"> 返 回 </el-button>
@@ -197,7 +236,7 @@
             <el-table
               border
               :data="settings"
-              style="width: 260px; max-height: 240px"
+              style="width: 450px; max-height: 240px"
             >
               <el-table-column prop="paramName" label="数据名称" />
               <el-table-column prop="position" label="同步坐标" />
@@ -263,7 +302,6 @@ const resetData = () => {
     print: true,
     edit: true,
   };
-
   exceldata.value = null;
   selectId.value = null;
   operaEditStatus.value = false;
@@ -551,6 +589,10 @@ const useAddFormHook = () => {
   const addForm = ref({
     paramName: "",
     position: "",
+    up: "",
+    down: "",
+    standard: "",
+    source: "",
   });
   const addPage = () => {
     searchForm.value.pageNo = searchForm.value.pageNo + 1;
@@ -566,12 +608,25 @@ const useAddFormHook = () => {
       ...searchForm.value,
     });
     settings.value = data.records;
+    settings.value.forEach((item: any) => {
+      if (item.checkStr) {
+        item.up = JSON.parse(item.checkStr).up;
+        item.down = JSON.parse(item.checkStr).down;
+        item.standard = JSON.parse(item.checkStr).standard;
+        item.source = JSON.parse(item.checkStr).source;
+      }
+    });
     if (settings.value.length == 0 && searchForm.value.pageNo > 1) {
       deletePage();
     }
     searchForm.value.totalPages = data.totalPages;
   };
   const addSettings = async () => {
+    addForm.value.checkStr = JSON.stringify({
+      up: addForm.value.up,
+      down: addForm.value.down,
+      standard: addForm.value.standard,
+    });
     const { data, code } = await addSettingsData({
       excelFormId: selectId.value,
       ...addForm.value,
@@ -622,6 +677,24 @@ const useAddFormHook = () => {
         trigger: "blur",
       },
     ],
+    up: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    down: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    standard: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
   });
   return {
     formRef1,
@@ -659,22 +732,27 @@ onMounted?.(() => {
 </script>
 <style lang="scss" scoped>
 .table {
-  width: 260px;
+  width: 430px;
   padding-top: 20px;
 }
 .btns {
   width: 100%;
   justify-content: center;
-  height: 40px;
+  height: 30px;
   display: flex;
   align-items: center;
+  .el-button {
+    height: 20px;
+  }
 }
 .add {
-  height: 140px;
+  width: 430px;
+  height: 220px;
   display: flex;
   flex-direction: column;
   .body {
     display: flex;
+    width: 430px;
     flex: 1;
   }
 }
@@ -688,14 +766,16 @@ onMounted?.(() => {
 
   .exView {
     position: relative;
-    width: calc(100% - 300px);
+    width: calc(100% - 450px);
     height: 100%;
   }
   .form {
-    width: 300px;
+    width: 450px;
     height: 100%;
     font-size: 24px;
     padding: 20px;
+    padding-right: 0px;
+
     .title {
       text-align: center;
       margin-bottom: 10px;
@@ -707,4 +787,10 @@ onMounted?.(() => {
     }
   }
 }
+:deep(.el-form-item) {
+  margin-bottom: 2px !important;
+}
+:deep(.el-input__inner) {
+  height: 24px !important;
+}
 </style>

src/views/pro/traceability/components/updateExcel.vue

@@ -6,6 +6,8 @@
         :option="options"
         @confirm="confirm"
         v-model:data="exceldata"
+        :checkStatus="true"
+        :verifications="setting"
       />
     </div>
     <div class="btns" v-if="options.edit !== false">
@@ -24,6 +26,7 @@ import { useCrud } from "@/hooks/userCrud";
 import { setExcelData } from "@/api/excel/index.ts";
 import ExcelView from "@/components/ExcelView/index.vue";
 import { useDictionaryStore } from "@/store";
+const setting = ref([]);
 const props = defineProps({
   data: {
     type: Object,
@@ -317,11 +320,13 @@ watch(
   () => {
     //@ts-ignore
     rowData.value = props.data;
+   
     exceldata.value = JSON.parse(rowData.value.writeData);
     excelKey1.value = !excelKey1.value;
     if (rowData.value.lookStatus == true) {
       options.value.edit = false;
     }
+    setting.value = rowData.value.settings;
   },
   { immediate: true }
 );