|
|
|
@ -14,7 +14,7 @@ |
|
|
|
<div class="content-area"> |
|
|
|
<div class="table-container"> |
|
|
|
<el-table :data="currentPageData" style="width: auto" :row-style="{ height: '60px' } "> |
|
|
|
<el-table-column prop="activityName" label="活动名称"></el-table-column> |
|
|
|
<el-table-column prop="activityName" label="活动名称" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="marketOne" label="市场一"></el-table-column> |
|
|
|
<el-table-column prop="marketTwo" label="市场二"></el-table-column> |
|
|
|
|
|
|
|
@ -79,7 +79,11 @@ |
|
|
|
> |
|
|
|
<el-form ref="addForm" :model="activity" :rules="rules" label-width="80px"> |
|
|
|
<el-form-item label="活动名称" prop="activityName"> |
|
|
|
<el-input v-model="activity.activityName" placeholder="请输入活动名称" /> |
|
|
|
<el-input |
|
|
|
v-model="activity.activityName" |
|
|
|
placeholder="请输入活动名称" |
|
|
|
@input="handleActivityNameInput" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="股票一" prop="marketOne"> |
|
|
|
<el-select v-model="activity.marketOne" placeholder="请选择市场一" style="width: 100%"> |
|
|
|
@ -200,9 +204,9 @@ const fetchMarketList = async () => { |
|
|
|
} catch (error) { |
|
|
|
console.error('请求市场列表失败:', error) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}// 防抖标志 |
|
|
|
|
|
|
|
const isSubmitting = ref(false); |
|
|
|
// 取消添加 |
|
|
|
const cancel = () => { |
|
|
|
centerDialogVisible.value = false; |
|
|
|
@ -228,7 +232,15 @@ const addActivityShow = () => { |
|
|
|
const addForm = ref(); // 定义 addForm ref |
|
|
|
|
|
|
|
const addActivity = async () => { |
|
|
|
// 防抖检查 |
|
|
|
if (isSubmitting.value) { |
|
|
|
ElMessage.warning('操作过于频繁，请稍后再试'); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
try { |
|
|
|
isSubmitting.value = true; // 设置提交标志 |
|
|
|
|
|
|
|
const valid = await new Promise((resolve, reject) => { |
|
|
|
addForm.value.validate(valid => { |
|
|
|
if (valid) { |
|
|
|
@ -240,6 +252,22 @@ const addActivity = async () => { |
|
|
|
}); |
|
|
|
|
|
|
|
if (!valid) { |
|
|
|
isSubmitting.value = false; // 重置提交标志 |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
// 验证活动名称是否包含空格（双重保险） |
|
|
|
if (!activity.value.activityName || activity.value.activityName.trim() === '') { |
|
|
|
ElMessage.error('活动名称不能为空'); |
|
|
|
isSubmitting.value = false; // 重置提交标志 |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
// 确保活动名称中没有空格 |
|
|
|
const cleanedActivityName = activity.value.activityName.replace(/\s/g, ''); |
|
|
|
if (cleanedActivityName !== activity.value.activityName) { |
|
|
|
ElMessage.error('活动名称中不能包含空格'); |
|
|
|
isSubmitting.value = false; // 重置提交标志 |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
@ -266,6 +294,11 @@ const addActivity = async () => { |
|
|
|
} catch (error) { |
|
|
|
console.error('添加活动失败:', error); |
|
|
|
ElMessage.error('请求失败，请重试'); |
|
|
|
} finally { |
|
|
|
// 3秒后重置提交标志 |
|
|
|
setTimeout(() => { |
|
|
|
isSubmitting.value = false; |
|
|
|
}, 3000); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
@ -317,6 +350,7 @@ const activity = ref({ |
|
|
|
const rules = { |
|
|
|
activityName: [ |
|
|
|
{ required: true, message: '请输入活动名称', trigger: 'blur' } |
|
|
|
// 移除了自定义验证器，因为清理逻辑在提交时处理 |
|
|
|
], |
|
|
|
marketOne: [ |
|
|
|
{ required: true, message: '请选择市场一', trigger: 'change' } |
|
|
|
@ -334,7 +368,6 @@ const rules = { |
|
|
|
{ required: true, message: '请选择结束时间', trigger: 'change' } |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
// 分页配置 |
|
|
|
const currentPage = ref(1); |
|
|
|
const pageSize = ref(10); // 每页显示 10 条 |
|
|
|
@ -346,6 +379,13 @@ const currentPageData = computed(() => { |
|
|
|
return tableData.value.slice(start, end); |
|
|
|
}); |
|
|
|
|
|
|
|
// 处理活动名称输入，自动清除所有空格 |
|
|
|
const handleActivityNameInput = (value) => { |
|
|
|
// 清除所有空格 |
|
|
|
const cleanedValue = value.replace(/\s/g, ''); |
|
|
|
activity.value.activityName = cleanedValue; |
|
|
|
}; |
|
|
|
|
|
|
|
// 分页事件处理 |
|
|
|
const handleSizeChange = (val) => { |
|
|
|
pageSize.value = val; |
|
|
|
|
lihuilin
3 weeks ago