对所有小数点不能输入处理+设置数据负数处理

3 weeks ago · b33b620b2e
3 changed files with 173 additions and 44 deletions
--- a/activitylink/src/views/zhongchou/activity/index.vue
+++ b/activitylink/src/views/zhongchou/activity/index.vue
@ -240,7 +240,6 @@ const addActivity = async () => {
    });

    if (!valid) {
-      ElMessage.warning('请填写完整表单');
      return;
    }

@ -259,6 +258,7 @@ const addActivity = async () => {
    if (response.code === 200) {
      ElMessage.success('活动添加成功');
      centerDialogVisible.value = false;
+      resetForm();
      fetchActivityList();
    } else {
      ElMessage.error(response.message || '活动添加失败');
--- a/activitylink/src/views/zhongchou/activity/set/index.vue
+++ b/activitylink/src/views/zhongchou/activity/set/index.vue
@ -10,35 +10,34 @@

      <div class="setting-item">
        <label>初始数据：</label>
-        <div v-if="!isInitialDataSet">
-          <el-input-number :precision="0" v-model="setinitiaData" placeholder="分钟" size="large"></el-input-number>
-          &nbsp;&nbsp;分钟
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <el-button type="primary" @click="openInitialConfirmDialog">确认</el-button>
-        </div>
-        <div v-if="isInitialDataSet">{{ initialData }}分钟</div>
+        <div>{{ initialData }}分钟</div>

      </div>

-      <!-- 市场一 -->
-      <div class="setting-item">
-        <label>当前{{ marketOneName }}市场助力次数：{{ markerOneTotal }} 次</label>
-        <el-input-number :precision="0" v-model="addCountOne" placeholder="设置添加次数" size="large"></el-input-number>
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <el-button type="primary" @click="openConfirmDialog('one')">确认</el-button>
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <label>前端展示次数：{{ showOne }} 次</label>
-      </div>
-
-      <!-- 市场二 -->
-      <div class="setting-item">
-        <label>当前{{ marketTwoName }}市场助力次数：{{ markerTwoTotal }} 次</label>
-        <el-input-number :precision="0" v-model="addCountTwo" placeholder="设置添加次数" size="large"></el-input-number>
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <el-button type="primary" @click="openConfirmDialog('two')">确认</el-button>
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <label>前端展示次数：{{ showTwo }} 次</label>
-      </div>
+<!-- 市场一 -->
+<div class="setting-item">
+  <label class="fixed-label">当前{{ marketOneName }}市场助力次数：{{ markerOneTotal }} 次</label>
+  <el-input   v-model="addCountOne"
+  placeholder="设置添加次数"
+  size="large"
+  class="fixed-input"
+  
+  @input="handleIntegerInput1"></el-input>
+  <el-button type="primary" @click="openConfirmDialog('one')" class="fixed-button">确认</el-button>
+  <label class="fixed-label">前端展示次数：{{ showOne }} 次</label>
+</div>
+
+<!-- 市场二 -->
+<div class="setting-item">
+  <label class="fixed-label">当前{{ marketTwoName }}市场助力次数：{{ markerTwoTotal }} 次</label>
+  <el-input   v-model="addCountTwo"
+  placeholder="设置添加次数"
+  size="large"
+  class="fixed-input"
+  @input="handleIntegerInput2"></el-input>
+  <el-button type="primary" @click="openConfirmDialog('two')" class="fixed-button">确认</el-button>
+  <label class="fixed-label">前端展示次数：{{ showTwo }} 次</label>
+</div>

      <!-- 时间数据 -->
      <!-- <div class="setting-item">
@ -57,7 +56,7 @@
      </el-dialog>

      <!-- 初始数据确认对话框 -->
-      <el-dialog v-model="showInitialConfirmDialog" title="确认设置初始数据" width="30%" @closed="cancelset">
+      <!-- <el-dialog v-model="showInitialConfirmDialog" title="确认设置初始数据" width="30%" @closed="cancelset">
        <span>您确定要设置初始数据为 {{ setinitiaData }} 分钟吗？（只能修改一次！）</span>
        <template #footer>
          <span class="dialog-footer">
@ -65,7 +64,7 @@
            <el-button type="primary" @click="confirmInitialData">确 定</el-button>
          </span>
        </template>
-      </el-dialog>
+      </el-dialog> -->
    </div>
  </el-card>
 </template>
@ -132,7 +131,62 @@ const marketTwoName = ref('');
 //   }
 // };

+const timerOne = ref(null);
+const timerTwo = ref(null);
+
+const handleIntegerInput1 = (value) => {
+  // 清除之前的定时器
+  if (timerOne.value) {
+    clearTimeout(timerOne.value);
+  }
+
+  // 1. 替换所有非数字和非负号的字符
+  let filtered = value.replace(/[^-0-9]/g, '');

+  // 2. 如果以负号开头，只保留第一个负号，其余负号删除
+  if (filtered.includes('-')) {
+    const firstChar = filtered[0];
+    const rest = filtered.slice(1).replace(/-/g, ''); // 删除其余负号
+    filtered = firstChar === '-' ? '-' + rest : rest;
+  }
+
+  // 3. 如果是单独的 '-'，设置延迟校验
+  if (filtered === '-') {
+    timerOne.value = setTimeout(() => {
+      addCountOne.value = '';
+      timerOne.value = null;
+    }, 1000); // 延迟200ms
+  } else {
+    // 4. 更新绑定值
+    addCountOne.value = filtered;
+  }
+};
+
+const handleIntegerInput2 = (value) => {
+  // 清除之前的定时器
+  if (timerTwo.value) {
+    clearTimeout(timerTwo.value);
+  }
+
+  // 同上逻辑
+  let filtered = value.replace(/[^-0-9]/g, '');
+
+  if (filtered.includes('-')) {
+    const firstChar = filtered[0];
+    const rest = filtered.slice(1).replace(/-/g, '');
+    filtered = firstChar === '-' ? '-' + rest : rest;
+  }
+
+  // 如果是单独的 '-'，设置延迟校验
+  if (filtered === '-') {
+    timerTwo.value = setTimeout(() => {
+      addCountTwo.value = '';
+      timerTwo.value = null;
+    }, 1000); // 延迟200ms
+  } else {
+    addCountTwo.value = filtered;
+  }
+};
 const fetchData = async () => {
  try {
    // ✅ 修改传参方式为对象
@ -382,6 +436,34 @@ const goBack = () => {
  flex: 0 0 auto;
 }

+.setting-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+}
+
+.fixed-label {
+  width: 250px; /* 固定宽度 */
+  text-align: left; /* 右对齐，更美观 */
+  margin-right: 20px; /* 固定间距 */
+  white-space: nowrap; /* 防止换行 */
+}
+
+.fixed-input {
+  width: 230px; /* 固定宽度 */
+  margin-right: 30px; /* 固定间距 */
+}
+
+.fixed-button {
+  margin-right: 20px; /* 固定间距 */
+}
+
+/* 确保最后一个 label 不需要右边距 */
+.setting-item .fixed-label:last-child {
+  margin-right: 0;
+}
+
+
 h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
--- a/activitylink/src/views/zhongchou/level/index.vue
+++ b/activitylink/src/views/zhongchou/level/index.vue
@ -43,16 +43,28 @@
          <el-input v-model="addForm.gradeName" placeholder="请输入等级名称"></el-input>
        </el-form-item>
        <el-form-item label="数量" align="center">
-          <el-input-number v-model="addForm.amount" :precision="0" :min="0" placeholder="请输入数量"
-            style="width: 100%;"></el-input-number>
+          <el-input 
+            v-model="addForm.amount" 
+            @input="(val) => handleNumberInput('amount', val, addForm, 99999)" 
+            placeholder="请输入数量"
+            style="width: 100%;"
+          ></el-input>
        </el-form-item>
        <el-form-item label="每轮抽取人数" align="center">
-          <el-input-number v-model="addForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数"
-            style="width: 100%;"></el-input-number>
+          <el-input 
+            v-model="addForm.perWin" 
+            @input="(val) => handleNumberInput('perWin', val, addForm, 500)" 
+            placeholder="请输入抽取人数"
+            style="width: 100%;"
+          ></el-input>
        </el-form-item>
        <el-form-item label="排序" align="center">
-          <el-input-number v-model="addForm.sort" :precision="0" :min="0" placeholder="请输入排序等级"
-            style="width: 100%;"></el-input-number>
+          <el-input 
+            v-model="addForm.sort" 
+            @input="(val) => handleNumberInput('sort', val, addForm, 100000000)" 
+            placeholder="请输入排序等级"
+            style="width: 100%;"
+          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
@ -69,16 +81,28 @@
          <el-input v-model="editForm.gradeName" placeholder="请输入等级名称"></el-input>
        </el-form-item>
        <el-form-item label="数量" align="center">
-          <el-input-number v-model="editForm.amount" :precision="0" :min="0" placeholder="请输入数量"
-            style="width: 100%;"></el-input-number>
+          <el-input 
+            v-model="editForm.amount" 
+            @input="(val) => handleNumberInput('amount', val, editForm, 99999)" 
+            placeholder="请输入数量"
+            style="width: 100%;"
+          ></el-input>
        </el-form-item>
        <el-form-item label="每轮抽取人数" align="center">
-          <el-input-number v-model="editForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数"
-            style="width: 100%;"></el-input-number>
+          <el-input 
+            v-model="editForm.perWin" 
+            @input="(val) => handleNumberInput('perWin', val, editForm, 500)" 
+            placeholder="请输入抽取人数"
+            style="width: 100%;"
+          ></el-input>
        </el-form-item>
        <el-form-item label="排序" align="center">
-          <el-input-number v-model="editForm.sort" :precision="0" :min="0" placeholder="请输入排序等级"
-            style="width: 100%;"></el-input-number>
+          <el-input 
+            v-model="editForm.sort" 
+            @input="(val) => handleNumberInput('sort', val, editForm, 100000000)" 
+            placeholder="请输入排序等级"
+            style="width: 100%;"
+          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
@ -125,9 +149,9 @@ const editLevel = (row) => {
  editForm.value = {
    id: row.id,
    gradeName: row.gradeName,
-    amount: row.amount,
-    perWin: row.perWin,
-    sort: row.sort
+    amount: String(row.amount),
+    perWin: String(row.perWin),
+    sort: String(row.sort)
  }
  editVisible.value = true
 }
@ -249,6 +273,29 @@ const  deleteLevel = (row) => {
  })
 }

+// 处理数字输入并限制最大值
+const handleNumberInput = (field, value, form, maxValue) => {
+  // 1. 过滤非数字字符
+  let filteredValue = value.replace(/[^\d]/g, '');
+  
+  // 2. 处理空值情况
+  if (filteredValue === '') {
+    form[field] = '';
+    return;
+  }
+  
+  // 3. 转换为数字并限制最大值
+  let numValue = Number(filteredValue);
+  
+  // 4. 应用最大值限制
+  if (numValue > maxValue) {
+    form[field] = String(maxValue);
+  } else {
+    // 5. 保留原始输入（但去除前导零）
+    form[field] = numValue === 0 ? '0' : filteredValue.replace(/^0+/, '') || '0';
+  }
+};
+
 //清空表单（关闭对话框时调用）
 const resetForm = () => {
  addForm.value = {