v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端表单必填项标记红色 * 号 + 提交校验

Browse Source 
- 客户单位/日期/纪要内容/计划拜访时间 标记 *
- 缺失必填项时 ElMessage.warning 提示
- CSS: .required-star { color: var(--vermilion); }

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
v6ole
2026-07-12 20:28:54 +08:00
parent 6d1ccbb246
commit ff0a38a369
6 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/DailyNoteForm.vue
+4 -2
View File
@@ -60,6 +60,7 @@ onMounted(async () => {
}) })
async function handleSubmit() { async function handleSubmit() {
if (!form.value.note_date) { ElMessage.warning('请选择日期'); return }
if (!form.value.content.trim()) { ElMessage.warning('请输入纪要内容'); return } if (!form.value.content.trim()) { ElMessage.warning('请输入纪要内容'); return }
submitLoading.value = true submitLoading.value = true
try { try {
@@ -108,7 +109,7 @@ async function handleDelete() {
<el-form label-position="top" class="editorial-form"> <el-form label-position="top" class="editorial-form">
<el-form-item> <el-form-item>
<template #label> <template #label>
<span class="form-label">日期</span> <span class="form-label">日期 <span class="required-star">*</span></span>
</template> </template>
<el-date-picker v-model="form.note_date" type="date" style="width:100%" /> <el-date-picker v-model="form.note_date" type="date" style="width:100%" />
</el-form-item> </el-form-item>
@@ -158,7 +159,7 @@ async function handleDelete() {
<el-form-item> <el-form-item>
<template #label> <template #label>
<span class="form-label">工作内容 <span class="form-label-required">*</span></span> <span class="form-label">工作内容 <span class="required-star">*</span></span>
</template> </template>
<el-input v-model="form.content" type="textarea" :rows="5" placeholder="今天做了什么..." /> <el-input v-model="form.content" type="textarea" :rows="5" placeholder="今天做了什么..." />
</el-form-item> </el-form-item>
@@ -288,4 +289,5 @@ async function handleDelete() {
animation: spin 0.6s linear infinite; animation: spin 0.6s linear infinite;
} }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
.required-star { color: var(--vermilion); font-weight: 700; }
</style> </style>
frontend/src/views/mobile/KeyVisitForm.vue
+2 -1
View File
@@ -137,7 +137,7 @@ async function handleDelete() {
<el-form label-position="top" class="editorial-form"> <el-form label-position="top" class="editorial-form">
<el-form-item> <el-form-item>
<template #label><span class="form-label">客户单位</span></template> <template #label><span class="form-label">客户单位 <span class="required-star">*</span></span></template>
<el-select v-model="form.customer_id" filterable remote :remote-method="handleCustomerSearch" placeholder="搜索客户" style="width:100%"> <el-select v-model="form.customer_id" filterable remote :remote-method="handleCustomerSearch" placeholder="搜索客户" style="width:100%">
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /> <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
<template #empty> <template #empty>
@@ -309,4 +309,5 @@ async function handleDelete() {
.delete-btn:hover { background: var(--vermilion); color: #fff; } .delete-btn:hover { background: var(--vermilion); color: #fff; }
.header-delete-btn { margin-left: auto; margin-top: 4px; padding: 6px 14px; background: none; color: var(--vermilion); border: 1px solid var(--vermilion); font-family: var(--font-body); font-size: 13px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .header-delete-btn { margin-left: auto; margin-top: 4px; padding: 6px 14px; background: none; color: var(--vermilion); border: 1px solid var(--vermilion); font-family: var(--font-body); font-size: 13px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.header-delete-btn:hover { background: var(--vermilion); color: #fff; } .header-delete-btn:hover { background: var(--vermilion); color: #fff; }
.required-star { color: var(--vermilion); font-weight: 700; }
</style> </style>
frontend/src/views/mobile/LeaveForm.vue
+3 -2
View File
@@ -123,12 +123,12 @@ async function handleDelete() {
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<template #label><span class="form-label">开始日期</span></template> <template #label><span class="form-label">开始日期 <span class="required-star">*</span></span></template>
<el-date-picker v-model="form.start_date" type="date" placeholder="选择开始日期" style="width:100%" /> <el-date-picker v-model="form.start_date" type="date" placeholder="选择开始日期" style="width:100%" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<template #label><span class="form-label">结束日期</span></template> <template #label><span class="form-label">结束日期 <span class="required-star">*</span></span></template>
<el-date-picker v-model="form.end_date" type="date" placeholder="选择结束日期" style="width:100%" /> <el-date-picker v-model="form.end_date" type="date" placeholder="选择结束日期" style="width:100%" />
</el-form-item> </el-form-item>
@@ -198,4 +198,5 @@ async function handleDelete() {
.delete-btn:hover { background: var(--vermilion); color: #fff; } .delete-btn:hover { background: var(--vermilion); color: #fff; }
.btn-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
.required-star { color: var(--vermilion); font-weight: 700; }
</style> </style>
frontend/src/views/mobile/MiniBusinessForm.vue
+2 -1
View File
@@ -118,7 +118,7 @@ async function handleDelete() {
<el-form label-position="top" class="editorial-form"> <el-form label-position="top" class="editorial-form">
<el-form-item> <el-form-item>
<template #label><span class="form-label">客户单位</span></template> <template #label><span class="form-label">客户单位 <span class="required-star">*</span></span></template>
<el-select v-model="form.customer_id" filterable remote :remote-method="handleCustomerSearch" placeholder="搜索客户" style="width:100%"> <el-select v-model="form.customer_id" filterable remote :remote-method="handleCustomerSearch" placeholder="搜索客户" style="width:100%">
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /> <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
<template #empty> <template #empty>
@@ -254,4 +254,5 @@ async function handleDelete() {
.header-delete-btn:hover { background: var(--vermilion); color: #fff; } .header-delete-btn:hover { background: var(--vermilion); color: #fff; }
.btn-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
.required-star { color: var(--vermilion); font-weight: 700; }
</style> </style>
frontend/src/views/mobile/VisitForm.vue
+2 -1
View File
@@ -226,7 +226,7 @@ async function handleDelete() {
<el-form label-position="top" class="editorial-form"> <el-form label-position="top" class="editorial-form">
<el-form-item> <el-form-item>
<template #label> <template #label>
<span class="form-label">客户单位</span> <span class="form-label">客户单位 <span class="required-star">*</span></span>
</template> </template>
<el-select <el-select
v-model="form.customer_id" v-model="form.customer_id"
@@ -659,4 +659,5 @@ async function handleDelete() {
.method--电话.method-chip--active { background: #5B7FA5; border-color: #5B7FA5; color: #fff; } .method--电话.method-chip--active { background: #5B7FA5; border-color: #5B7FA5; color: #fff; }
.method--微信.method-chip--active { background: #22c55e; border-color: #22c55e; color: #fff; } .method--微信.method-chip--active { background: #22c55e; border-color: #22c55e; color: #fff; }
.method--出差.method-chip--active { background: #C4934A; border-color: #C4934A; color: #fff; } .method--出差.method-chip--active { background: #C4934A; border-color: #C4934A; color: #fff; }
.required-star { color: var(--vermilion); font-weight: 700; }
</style> </style>
frontend/src/views/mobile/WorkPlanForm.vue
+5 -3
View File
@@ -72,7 +72,8 @@ async function handleQuickCreate() {
} }
async function handleSubmit() { async function handleSubmit() {
if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return } if (!form.value.customer_id) { ElMessage.warning('请选择客户单位'); return }
if (!form.value.plan_date) { ElMessage.warning('请选择计划拜访时间'); return }
submitLoading.value = true submitLoading.value = true
try { try {
if (isEdit.value) { if (isEdit.value) {
@@ -117,7 +118,7 @@ async function handleDelete() {
<el-form label-position="top" class="editorial-form"> <el-form label-position="top" class="editorial-form">
<el-form-item> <el-form-item>
<template #label><span class="form-label">客户单位</span></template> <template #label><span class="form-label">客户单位 <span class="required-star">*</span></span></template>
<el-select v-model="form.customer_id" filterable remote :remote-method="handleCustomerSearch" placeholder="搜索客户" style="width:100%"> <el-select v-model="form.customer_id" filterable remote :remote-method="handleCustomerSearch" placeholder="搜索客户" style="width:100%">
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /> <el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
<template #empty> <template #empty>
@@ -142,7 +143,7 @@ async function handleDelete() {
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<template #label><span class="form-label">计划拜访时间</span></template> <template #label><span class="form-label">计划拜访时间 <span class="required-star">*</span></span></template>
<el-date-picker v-model="form.plan_date" type="date" style="width:100%" /> <el-date-picker v-model="form.plan_date" type="date" style="width:100%" />
</el-form-item> </el-form-item>
@@ -234,4 +235,5 @@ async function handleDelete() {
.header-delete-btn:hover { background: var(--vermilion); color: #fff; } .header-delete-btn:hover { background: var(--vermilion); color: #fff; }
.btn-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
.required-star { color: var(--vermilion); font-weight: 700; }
</style> </style>