fix: 移动端表单优化
1. 新增页面必填项标记
- expense/Add.vue: 支出标题、支出类型、支出金额添加红色星号必填标记
- 其他使用 van-form 的页面已有 required 属性标记
2. 错误提示优化
- 将 showToast 改为 showFailToast 显示错误提示
- showFailToast 使用红色背景,错误信息更清晰可见
- 涉及文件:
- expense/Add.vue
- requirement/Add.vue
- receivable/Add.vue
- project/Add.vue
- customer/Add.vue
- my/ChangePassword.vue
This commit is contained in:
parent
b5a954f008
commit
69f437dbb3
@ -92,7 +92,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showSuccessToast } from 'vant'
|
||||
import { showFailToast, showSuccessToast } from 'vant'
|
||||
import { createCustomer } from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
@ -129,7 +129,7 @@ const onLevelConfirm = ({ selectedOptions }: any) => {
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!form.value.customerName) {
|
||||
showToast('请输入客户名称')
|
||||
showFailToast('请输入客户名称')
|
||||
return
|
||||
}
|
||||
|
||||
@ -148,7 +148,7 @@ const onSubmit = async () => {
|
||||
showSuccessToast('提交成功')
|
||||
router.back()
|
||||
} catch (e: any) {
|
||||
showToast(e.message || '提交失败')
|
||||
showFailToast(e.message || '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
|
||||
<div class="form-card mac-card fade-in-up">
|
||||
<div class="form-group">
|
||||
<label>支出标题</label>
|
||||
<label>支出标题 <span class="required">*</span></label>
|
||||
<input v-model="form.title" placeholder="输入标题" class="mac-input" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>支出类型</label>
|
||||
<label>支出类型 <span class="required">*</span></label>
|
||||
<div class="mac-select" @click="showTypePicker = true">
|
||||
<span :class="{ placeholder: !form.expenseTypeName }">
|
||||
{{ form.expenseTypeName || '选择类型' }}
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>支出金额</label>
|
||||
<label>支出金额 <span class="required">*</span></label>
|
||||
<div class="amount-input">
|
||||
<span class="currency">¥</span>
|
||||
<input v-model="form.amount" type="number" placeholder="0.00" />
|
||||
@ -69,7 +69,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showSuccessToast } from 'vant'
|
||||
import { showToast, showSuccessToast, showFailToast } from 'vant'
|
||||
import { createExpense, getExpenseTypeTree } from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
@ -102,15 +102,15 @@ const onDateConfirm = ({ selectedValues }: any) => {
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.title) {
|
||||
showToast('请输入支出标题')
|
||||
showFailToast('请输入支出标题')
|
||||
return
|
||||
}
|
||||
if (!form.expenseTypeId) {
|
||||
showToast('请选择支出类型')
|
||||
showFailToast('请选择支出类型')
|
||||
return
|
||||
}
|
||||
if (!form.amount) {
|
||||
showToast('请输入支出金额')
|
||||
showFailToast('请输入支出金额')
|
||||
return
|
||||
}
|
||||
|
||||
@ -132,7 +132,7 @@ const handleSubmit = async () => {
|
||||
router.back()
|
||||
} catch (e: any) {
|
||||
console.error('提交失败:', e)
|
||||
showToast(e.message || '提交失败')
|
||||
showFailToast(e.message || '提交失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@ -219,6 +219,11 @@ onMounted(async () => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-group label .required {
|
||||
color: var(--mac-danger);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.mac-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
|
||||
import { showFailToast, showSuccessToast, showConfirmDialog } from 'vant'
|
||||
import { updatePassword } from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
@ -76,12 +76,12 @@ const validateConfirmPassword = () => {
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (form.value.newPassword !== form.value.confirmPassword) {
|
||||
showToast('两次密码输入不一致')
|
||||
showFailToast('两次密码输入不一致')
|
||||
return
|
||||
}
|
||||
|
||||
if (form.value.oldPassword === form.value.newPassword) {
|
||||
showToast('新密码不能与旧密码相同')
|
||||
showFailToast('新密码不能与旧密码相同')
|
||||
return
|
||||
}
|
||||
|
||||
@ -112,7 +112,7 @@ const onSubmit = async () => {
|
||||
|
||||
} catch (e: any) {
|
||||
if (e.message !== 'cancel') {
|
||||
showToast(e.message || '修改失败')
|
||||
showFailToast(e.message || '修改失败')
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showSuccessToast } from 'vant'
|
||||
import { showFailToast, showSuccessToast } from 'vant'
|
||||
import { createProject, getCustomerList } from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
@ -188,7 +188,7 @@ const loadOptions = async () => {
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!form.value.projectName) {
|
||||
showToast('请输入项目名称')
|
||||
showFailToast('请输入项目名称')
|
||||
return
|
||||
}
|
||||
|
||||
@ -206,7 +206,7 @@ const onSubmit = async () => {
|
||||
showSuccessToast('提交成功')
|
||||
router.back()
|
||||
} catch (e: any) {
|
||||
showToast(e.message || '提交失败')
|
||||
showFailToast(e.message || '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showSuccessToast } from 'vant'
|
||||
import { showFailToast, showSuccessToast } from 'vant'
|
||||
import { createReceivable, getCustomerList, getProjectList } from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
@ -170,15 +170,15 @@ const loadOptions = async () => {
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!form.value.customerId) {
|
||||
showToast('请选择客户')
|
||||
showFailToast('请选择客户')
|
||||
return
|
||||
}
|
||||
if (!form.value.receivableAmount) {
|
||||
showToast('请输入应收金额')
|
||||
showFailToast('请输入应收金额')
|
||||
return
|
||||
}
|
||||
if (!form.value.receivableDate) {
|
||||
showToast('请选择应收日期')
|
||||
showFailToast('请选择应收日期')
|
||||
return
|
||||
}
|
||||
|
||||
@ -194,7 +194,7 @@ const onSubmit = async () => {
|
||||
showSuccessToast('提交成功')
|
||||
router.back()
|
||||
} catch (e: any) {
|
||||
showToast(e.message || '提交失败')
|
||||
showFailToast(e.message || '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showSuccessToast } from 'vant'
|
||||
import { showFailToast, showSuccessToast } from 'vant'
|
||||
import { createRequirement, getCustomerList, getProjectList } from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
@ -166,7 +166,7 @@ const loadOptions = async () => {
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!form.value.title) {
|
||||
showToast('请输入需求标题')
|
||||
showFailToast('请输入需求标题')
|
||||
return
|
||||
}
|
||||
|
||||
@ -182,7 +182,7 @@ const onSubmit = async () => {
|
||||
showSuccessToast('提交成功')
|
||||
router.back()
|
||||
} catch (e: any) {
|
||||
showToast(e.message || '提交失败')
|
||||
showFailToast(e.message || '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user