fix: 功能样式,统一优化完善。

This commit is contained in:
tianyongbao
2026-06-28 12:06:05 +08:00
parent a506f2de98
commit f353971554
39 changed files with 1096 additions and 374 deletions

View File

@@ -9,7 +9,7 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="180rpx"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
<u-form-item label="字典类型">
<u--input v-model="form.dictType" readonly disabledColor="#ffffff" placeholder="字典类型"
@@ -18,23 +18,23 @@
<u-form-item label="数据标签" prop="dictLabel" required>
<u--input v-model="form.dictLabel" placeholder="请输入数据标签"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictLabel')"></u--input>
</u-form-item>
<u-form-item label="数据键值" prop="dictValue" required>
<u--input v-model="form.dictValue" placeholder="请输入数据键值"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictValue')"></u--input>
</u-form-item>
<u-form-item label="显示排序" prop="dictSort" required>
<u--input v-model="form.dictSort" type="number" placeholder="请输入显示排序"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictSort')"></u--input>
</u-form-item>
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true">
<view class="input-with-arrow">
<u--input v-model="listClassName" readonly disabledColor="#ffffff" placeholder="请选择回显样式"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('listClassName')"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -42,7 +42,7 @@
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
<view class="input-with-arrow">
<u--input v-model="statusName" readonly disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
inputAlign="left" :customStyle="getInputStyle('statusName')"></u--input>
<text class="arrow-icon"></text>
</view>
</u-form-item>
@@ -95,6 +95,19 @@ const inputBaseStyle = {
width: '100%',
boxSizing: 'border-box'
}
const errorFields = ref([])
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const form = reactive({
dictCode: undefined,
@@ -178,6 +191,7 @@ function handleListClassConfirm(e) {
// 提交
function submit() {
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.dictCode) {
updateData(form).then(() => {
@@ -196,11 +210,11 @@ function submit() {
})
})
}
}).catch(() => {
proxy.$refs['uToast'].show({
type: 'error',
message: '请填写完整信息'
})
}).catch(errors => {
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>