fix:一体机检验添加管号选择区间

src/views/pro-operation/check-out/info.vue

@@ -37,18 +37,18 @@
             label="管号："
             prop="seqNoList"
           >
-            <el-select
-              v-model="form.seqNoList"
-              placeholder="Select"
-              @change="getType"
-              multiple
-            >
-              <el-option
-                v-for="item in seqList"
-                :key="item.value"
-                :label="item.seqNo"
-                :value="item.seqNo"
-              />
+            <el-select v-model="form.seqNoList" placeholder="Select" @change="getType" multiple>
+              <template #header>
+                <div class="guanhao-header">
+                  <el-checkbox v-model="checkAll" @change="handleCheckAll">全选</el-checkbox>
+                  <span>管号数量:{{ seqList.length }}</span>
+                  <el-input v-model="startSelect" placeholder="请输入选中前面数量" />
+                  <span>-</span>
+                  <el-input v-model="endSelect" placeholder="请输入选中后面数量" />
+                  <el-button type="primary" @click="selectSeqList">选择</el-button>
+                </div>
+              </template>
+              <el-option v-for="item in seqList" :key="item.seqNo" :label="item.seqNo" :value="item.seqNo" />
             </el-select>
           </el-form-item>
         </el-form>
@@ -98,6 +98,9 @@ const checkPop = ref(false);
 const stationList = ref([]);
 const formKey = ref(false);
 const seqList = ref([]);
+const startSelect = ref();
+const endSelect = ref();
+const checkAll = ref(false);
 const getSeqsList = async () => {
   const { data } = await getSeqList({
     state: 0,
@@ -107,6 +110,42 @@ const getSeqsList = async () => {
   });
   seqList.value = data;
 };
+
+const selectSeqList = () => {
+  startSelect.value = Number(startSelect.value);
+  endSelect.value = Number(endSelect.value);
+  if (isNaN(startSelect.value) || isNaN(endSelect.value)) {
+    ElMessage.error("请输入有效的数字");
+    return;
+  }
+  if (startSelect.value === null || endSelect.value === null) {
+    ElMessage.error("请输入选中前面和后面的数量");
+    return;
+  }
+  if (startSelect.value > endSelect.value) {
+    ElMessage.error("前面数量不能大于后面数量");
+    return;
+  }
+  if (startSelect.value < 1 || endSelect.value < 1) {
+    ElMessage.error("前面和后面数量不能小于1");
+    return;
+  }
+  if (startSelect.value > seqList.length || endSelect.value > seqList.length) {
+    ElMessage.error("前面和后面数量不能大于管号总数");
+    return;
+  }
+  form.value.seqNoList = seqList.value.slice(startSelect.value - 1, endSelect.value).map((item) => item.seqNo);
+  checkAll.value = form.value.seqNoList.length === seqList.value.length;
+};
+
+const handleCheckAll = (val) => {
+  if (val) {
+    form.value.seqNoList = seqList.value;
+  } else {
+    form.value.seqNoList = [];
+  }
+};
+
 const open = () => {
   formKey.value = !formKey.value;
   resetForm();
@@ -229,4 +268,20 @@ onMounted(() => {});
 :deep(.el-textarea__inner) {
   font-size: $f20;
 }
+
+.guanhao-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  gap: 20px;
+  .el-checkbox {
+    display: flex;
+    align-items: center;
+    margin-top: 0;
+  }
+  .el-input {
+    width: 230px;
+  }
+}
 </style>