填写打印范围以及处理可能需要多次替换英文的问题

mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/Previewdialog.vue

@@ -1,22 +1,18 @@
 <template>
   <Dialog v-model="dialogVisible" title="打印预选">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      label-width="178px"
-    >
+    <el-form ref="formRef" :model="formData" label-width="178px">
       <el-form-item label="要打印的箱数量为：" prop="" style="display: flex">
         <span> {{ minAmount }}</span>
       </el-form-item>
-      <el-form-item label="打印范围选择:" prop="" style="margin-bottom: 50px">
-        <select class="!w-240px" @change="handleChangeRange()" v-model="rangeval">
-          <option v-for="range in ranges" :key="range.label" :value="range.label">{{
-            range.label
-          }}</option>
-        </select>
+      <el-form-item label="开始打印页数:" prop="">
+        <el-input-number :min="1" :max="minAmount" v-model="rangeval.min" />
+      </el-form-item>
+      <el-form-item label="结束打印页数:" prop="" style="margin-bottom: 50px">
+        <el-input-number :min="1" :max="minAmount" v-model="rangeval.max" />
       </el-form-item>
     </el-form>
     <template #footer>
+      <el-button @click="handleChangeRange()" type="primary">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -26,7 +22,7 @@
 import * as ProjectOrderApi from '@/api/biz/projectorder'
 import printDialog from './printDialog.vue'
 defineOptions({ name: 'SystemDeptForm' })
-
+const message = useMessage()
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formData: any = ref({
   id: undefined
@@ -68,7 +64,6 @@ const open = async (fdata, val) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-
 /** 重置表单 */
 const resetForm = () => {}
 
@@ -76,11 +71,29 @@ const resetForm = () => {}
 const selectedRow = ref<string | null>(null) // 新增，用于存储当前选中的行
 const ranges = ref([])
 const printref = ref()
-const rangeval = ref()
+const rangeval = ref({
+  min: undefined,
+  max: undefined
+})
 const handleChangeRange = () => {
+  if (rangeval.value.min == undefined || rangeval.value.max == undefined) {
+    message.error('请填写完整打印页数')
+    return
+  } else if (rangeval.value.min > rangeval.value.max) {
+    message.error('结束页数不能小于开始页数')
+    return
+  }else if(rangeval.value.max-rangeval.value.min>99  ){
+    message.error('打印范围不得超过100页')
+    return
+  }
+  // console.log('打印范围:',rangeval.value.max-rangeval.value.min);
+  
   // console.log(Fdata.value, vals.value, rangeval.value,'preview')
   printref.value.open(Fdata.value, vals.value, rangeval.value)
   selectedRow.value = null
-  rangeval.value = null
+  rangeval.value = {
+    min: undefined,
+    max: undefined
+  }
 }
 </script>

mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/printDialog.vue

@@ -145,8 +145,10 @@ const open = async (Fdata, vals, val) => {
     const matchingCnen = cnenList.value.find((cnen) => item.projectSubName.includes(cnen.cn))
     let projectSubNames = item.projectSubName
     if (matchingCnen) {
-      const regex = new RegExp(matchingCnen.cn, 'g')
-      projectSubNames = projectSubNames.replace(regex, `${matchingCnen.en}`)
+      cnenList.value.forEach((cnen) => {
+        const regex = new RegExp(cnen.cn, 'g')
+        projectSubNames = projectSubNames.replace(regex, `${cnen.en}`)
+      })
     }
     const row = {
       projectSubName: item.projectSubName + '(' + projectSubNames + ')',
@@ -157,47 +159,45 @@ const open = async (Fdata, vals, val) => {
   // 循环结束后，再对所有收集的 specs 进行去重
   const uniqueSpecs = new Set(allSpecs)
   specarr.value = Array.from(uniqueSpecs)
-  // 检查val是否在1到100范围内且不包含负号
-  // 删除可能存在的负号（虽然在这个例子中并不需要）
 
-  val = val.replace('-', ',')
-  val = val.split(',')
-  // console.log(val)
-
-  for (let i = val[0] * 1; i <= val[1] * 1; i++) {
+  for (let i = val.min; i <= val.max * 1; i++) {
     // 构建新的字符串并添加到printCodeName数组
     const newName = `${Fdata.id}-${vals[0].clauseId}-${i}`
-    printCodeName.value.push(newName)
+    const row = {
+      index: i,
+      name: newName
+    }
+    printCodeName.value.push(row)
   }
   // console.log(printCodeName.value)
 
   dialogVisible.value = true
   await Promise.all(
-    printCodeName.value.map(async (item, index) => {
-      const qrCodeData = await QRCode.toDataURL(item)
+    printCodeName.value.map(async (item) => {
+      const qrCodeData = await QRCode.toDataURL(item.name)
       const qrCodeElement = document.getElementById('qrCodeContainer')
       if (qrCodeElement) {
         var tempString = ''
         datavals.value.forEach((e) => {
           tempString +=
             '<p style="margin-left:30px;">' + e.projectSubName + ' , ' + e.amount + '</p>'
-        })
-        qrCodeElement.innerHTML +=
-          `<div class="page qr-page">
+        }),
+          (qrCodeElement.innerHTML +=
+            `<div class="page qr-page">
          <div class="qr-code-container" style=" padding:0 5mm; border:1px #d3d3d3 solid;display:flex; justify-content: flex-start; font-size:16px;font-weight:700;">
            <img src="${qrCodeData}" width="30%"  alt="QR Code"/>
             <div style="margin-left:5mm;text-align:left;" >
             <p>订单名称(Order name)：${Fdata.code}</p>
             <hr/>
-             <p>序号(Serial number)：${specarr.value}-${index + 1}</p>
+             <p>序号(Serial number)：${specarr.value}-${item.index}</p>
             <hr/>
             <p>产品清单(Product list)：</p>` +
-          tempString +
-          `
+            tempString +
+            `
              </div>
         </div>
 
-      </div>`
+      </div>`)
       }
     })
   )