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">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { showToast, showSuccessToast } from 'vant'
|
import { showFailToast, showSuccessToast } from 'vant'
|
||||||
import { createCustomer } from '@/api'
|
import { createCustomer } from '@/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -129,7 +129,7 @@ const onLevelConfirm = ({ selectedOptions }: any) => {
|
|||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
if (!form.value.customerName) {
|
if (!form.value.customerName) {
|
||||||
showToast('请输入客户名称')
|
showFailToast('请输入客户名称')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -148,7 +148,7 @@ const onSubmit = async () => {
|
|||||||
showSuccessToast('提交成功')
|
showSuccessToast('提交成功')
|
||||||
router.back()
|
router.back()
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
showToast(e.message || '提交失败')
|
showFailToast(e.message || '提交失败')
|
||||||
} finally {
|
} finally {
|
||||||
submitting.value = false
|
submitting.value = false
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,12 +10,12 @@
|
|||||||
|
|
||||||
<div class="form-card mac-card fade-in-up">
|
<div class="form-card mac-card fade-in-up">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>支出标题</label>
|
<label>支出标题 <span class="required">*</span></label>
|
||||||
<input v-model="form.title" placeholder="输入标题" class="mac-input" />
|
<input v-model="form.title" placeholder="输入标题" class="mac-input" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>支出类型</label>
|
<label>支出类型 <span class="required">*</span></label>
|
||||||
<div class="mac-select" @click="showTypePicker = true">
|
<div class="mac-select" @click="showTypePicker = true">
|
||||||
<span :class="{ placeholder: !form.expenseTypeName }">
|
<span :class="{ placeholder: !form.expenseTypeName }">
|
||||||
{{ form.expenseTypeName || '选择类型' }}
|
{{ form.expenseTypeName || '选择类型' }}
|
||||||
@ -25,7 +25,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>支出金额</label>
|
<label>支出金额 <span class="required">*</span></label>
|
||||||
<div class="amount-input">
|
<div class="amount-input">
|
||||||
<span class="currency">¥</span>
|
<span class="currency">¥</span>
|
||||||
<input v-model="form.amount" type="number" placeholder="0.00" />
|
<input v-model="form.amount" type="number" placeholder="0.00" />
|
||||||
@ -69,7 +69,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { showToast, showSuccessToast } from 'vant'
|
import { showToast, showSuccessToast, showFailToast } from 'vant'
|
||||||
import { createExpense, getExpenseTypeTree } from '@/api'
|
import { createExpense, getExpenseTypeTree } from '@/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -102,15 +102,15 @@ const onDateConfirm = ({ selectedValues }: any) => {
|
|||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
if (!form.title) {
|
if (!form.title) {
|
||||||
showToast('请输入支出标题')
|
showFailToast('请输入支出标题')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!form.expenseTypeId) {
|
if (!form.expenseTypeId) {
|
||||||
showToast('请选择支出类型')
|
showFailToast('请选择支出类型')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!form.amount) {
|
if (!form.amount) {
|
||||||
showToast('请输入支出金额')
|
showFailToast('请输入支出金额')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -132,7 +132,7 @@ const handleSubmit = async () => {
|
|||||||
router.back()
|
router.back()
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
console.error('提交失败:', e)
|
console.error('提交失败:', e)
|
||||||
showToast(e.message || '提交失败')
|
showFailToast(e.message || '提交失败')
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
@ -219,6 +219,11 @@ onMounted(async () => {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-group label .required {
|
||||||
|
color: var(--mac-danger);
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.mac-input {
|
.mac-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
|
|||||||
@ -58,7 +58,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
|
import { showFailToast, showSuccessToast, showConfirmDialog } from 'vant'
|
||||||
import { updatePassword } from '@/api'
|
import { updatePassword } from '@/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -76,12 +76,12 @@ const validateConfirmPassword = () => {
|
|||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
if (form.value.newPassword !== form.value.confirmPassword) {
|
if (form.value.newPassword !== form.value.confirmPassword) {
|
||||||
showToast('两次密码输入不一致')
|
showFailToast('两次密码输入不一致')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (form.value.oldPassword === form.value.newPassword) {
|
if (form.value.oldPassword === form.value.newPassword) {
|
||||||
showToast('新密码不能与旧密码相同')
|
showFailToast('新密码不能与旧密码相同')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -112,7 +112,7 @@ const onSubmit = async () => {
|
|||||||
|
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
if (e.message !== 'cancel') {
|
if (e.message !== 'cancel') {
|
||||||
showToast(e.message || '修改失败')
|
showFailToast(e.message || '修改失败')
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
submitting.value = false
|
submitting.value = false
|
||||||
|
|||||||
@ -117,7 +117,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, computed } from 'vue'
|
import { ref, onMounted, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { showToast, showSuccessToast } from 'vant'
|
import { showFailToast, showSuccessToast } from 'vant'
|
||||||
import { createProject, getCustomerList } from '@/api'
|
import { createProject, getCustomerList } from '@/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -188,7 +188,7 @@ const loadOptions = async () => {
|
|||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
if (!form.value.projectName) {
|
if (!form.value.projectName) {
|
||||||
showToast('请输入项目名称')
|
showFailToast('请输入项目名称')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -206,7 +206,7 @@ const onSubmit = async () => {
|
|||||||
showSuccessToast('提交成功')
|
showSuccessToast('提交成功')
|
||||||
router.back()
|
router.back()
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
showToast(e.message || '提交失败')
|
showFailToast(e.message || '提交失败')
|
||||||
} finally {
|
} finally {
|
||||||
submitting.value = false
|
submitting.value = false
|
||||||
}
|
}
|
||||||
|
|||||||
@ -102,7 +102,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { showToast, showSuccessToast } from 'vant'
|
import { showFailToast, showSuccessToast } from 'vant'
|
||||||
import { createReceivable, getCustomerList, getProjectList } from '@/api'
|
import { createReceivable, getCustomerList, getProjectList } from '@/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -170,15 +170,15 @@ const loadOptions = async () => {
|
|||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
if (!form.value.customerId) {
|
if (!form.value.customerId) {
|
||||||
showToast('请选择客户')
|
showFailToast('请选择客户')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!form.value.receivableAmount) {
|
if (!form.value.receivableAmount) {
|
||||||
showToast('请输入应收金额')
|
showFailToast('请输入应收金额')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!form.value.receivableDate) {
|
if (!form.value.receivableDate) {
|
||||||
showToast('请选择应收日期')
|
showFailToast('请选择应收日期')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -194,7 +194,7 @@ const onSubmit = async () => {
|
|||||||
showSuccessToast('提交成功')
|
showSuccessToast('提交成功')
|
||||||
router.back()
|
router.back()
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
showToast(e.message || '提交失败')
|
showFailToast(e.message || '提交失败')
|
||||||
} finally {
|
} finally {
|
||||||
submitting.value = false
|
submitting.value = false
|
||||||
}
|
}
|
||||||
|
|||||||
@ -93,7 +93,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, computed } from 'vue'
|
import { ref, onMounted, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { showToast, showSuccessToast } from 'vant'
|
import { showFailToast, showSuccessToast } from 'vant'
|
||||||
import { createRequirement, getCustomerList, getProjectList } from '@/api'
|
import { createRequirement, getCustomerList, getProjectList } from '@/api'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -166,7 +166,7 @@ const loadOptions = async () => {
|
|||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
if (!form.value.title) {
|
if (!form.value.title) {
|
||||||
showToast('请输入需求标题')
|
showFailToast('请输入需求标题')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -182,7 +182,7 @@ const onSubmit = async () => {
|
|||||||
showSuccessToast('提交成功')
|
showSuccessToast('提交成功')
|
||||||
router.back()
|
router.back()
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
showToast(e.message || '提交失败')
|
showFailToast(e.message || '提交失败')
|
||||||
} finally {
|
} finally {
|
||||||
submitting.value = false
|
submitting.value = false
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user