<!DOCTYPE html>
<html>
<head>
<meta charset="utf
-8">
<title>收费项目明细添加</title>
<meta name="renderer" content="webkit">
<meta http
-eq
uiv="X
-UA
-Compatible" content="IE=edge,
chrome=
1">
<meta name="viewport" content="width=device
-width, initial
-scale=
1, maximum
-scale=
1">
<link rel="stylesheet" href="https://www.lay
uicdn.com/lay
ui-v2.6.8/css/lay
ui.css">
<style>
body {
background
-color: #f2f3f5;
font-family: "Helvetica Neue", Helvetica, Arial, sans
-serif;
}
.x
-body {
padding: 20
px;
background
-color: #fff;
border
-radius: 5
px;
box
-shadow: 0 2
px 5
px rgba(0,0,0,0.05);
margin: 20
px auto;
max
-width: 800
px;
}
.form
-header {
font-size:
18
px;
font-weight: bold;
padding
-bottom:
15
px;
margin
-bottom: 20
px;
border
-bottom:
1px solid #eee;
color: #333;
}
.x
-red {
color: #ff5722;
}
.lay
ui-form
-label {
width:
120
px;
font-weight: 500;
}
.lay
ui-input
-block {
margin
-left:
150
px;
}
.submit
-btn {
margin
-top: 30
px;
text
-align: center;
}
.error
-tip {
color: #ff5722;
font-size:
12px;
margin
-top: 5
px;
display: none;
}
.has
-error .error
-tip {
display: block;
}
.loading
-overlay {
position: fixed;
top: 0;
left: 0;
width:
100%;
height:
100%;
background: rgba(255,255,255,0.7);
z
-index: 9999;
display: flex;
align
-items: center;
justify
-content: center;
}
</style>
</head>
<body>
<div id="app">
<div class="x
-body">
<div class="form
-header">收费项目明细添加</div>
<form class="lay
ui-form lay
ui-form
-pane">
<input type="hidden" name="id" v
-model="formData.id">
<!
-- 所属小区（改为文本框）
-->
<div class="lay
ui-form
-item" :class="{'has
-error': errors.community_name}">
<label class="lay
ui-form
-label">
<span class='x
-red'>*</span>所属小区
</label>
<div class="lay
ui-input
-block">
<!
-- 关键修改
1：select改为input
-->
<input type="text" v
-model="formData.community_name" class="lay
ui-input"
placeholder="请输入所属小区名称" lay
-verify="req
uired">
<div class="error
-tip" v
-if="errors.community_name">{{ errors.community_name }}</div>
</div>
</div>
<!
-- 收费项目（改为文本框）
-->
<div class="lay
ui-form
-item" :class="{'has
-error': errors.project_name}">
<label class="lay
ui-form
-label">
<span class='x
-red'>*</span>收费项目
</label>
<div class="lay
ui-input
-block">
<!
-- 关键修改2：select改为input
-->
<input type="text" v
-model="formData.project_name" class="lay
ui-input"
placeholder="请输入收费项目名称" lay
-verify="req
uired">
<div class="error
-tip" v
-if="errors.project_name">{{ errors.project_name }}</div>
</div>
</div>
<!
-- 业主（改为文本框）
-->
<div class="lay
ui-form
-item" :class="{'has
-error': errors.owner_name}">
<label class="lay
ui-form
-label">
<span class='x
-red'>*</span>业主
</label>
<div class="lay
ui-input
-block">
<!
-- 关键修改3：select改为input
-->
<input type="text" v
-model="formData.owner_name" class="lay
ui-input"
placeholder="请输入业主姓名" lay
-verify="req
uired">
<div class="error
-tip" v
-if="errors.owner_name">{{ errors.owner_name }}</div>
</div>
</div>
<!
-- 应收金额
-->
<div class="lay
ui-form
-item" :class="{'has
-error': errors.yf_money}">
<label class="lay
ui-form
-label">
<span class='x
-red'>*</span>应收金额(￥)
</label>
<div class="lay
ui-input
-block">
<input type="number" v
-model="formData.yf_money" autocomplete="off" placeholder="请输入应收金额"
class="lay
ui-input" @input="validateMoney('yf_money')">
<div class="error
-tip" v
-if="errors.yf_money">{{ errors.yf_money }}</div>
</div>
</div>
<!
-- 实收金额
-->
<div class="lay
ui-form
-item" :class="{'has
-error': errors.ss_money}">
<label class="lay
ui-form
-label">
<span class='x
-red'>*</span>实收金额(￥)
</label>
<div class="lay
ui-input
-block">
<input type="number" v
-model="formData.ss_money" autocomplete="off" placeholder="请输入实收金额"
class="lay
ui-input" @input="validateMoney('ss_money')">
<div class="error
-tip" v
-if="errors.ss_money">{{ errors.ss_money }}</div>
</div>
</div>
<!
-- 缴费日期
-->
<div class="lay
ui-form
-item" :class="{'has
-error': errors.jf_time}">
<label class="lay
ui-form
-label">
<span class='x
-red'>*</span>缴费日期
</label>
<div class="lay
ui-input
-inline">
<input class="lay
ui-input" v
-model="formData.jf_time" placeholder="点击选择日期"
id="paymentDate" readonly>
</div>
<div class="error
-tip" v
-if="errors.jf_time">{{ errors.jf_time }}</div>
</div>
<!
-- 备注
-->
<div class="lay
ui-form
-item">
<label class="lay
ui-form
-label">
<span class='x
-red'>*</span>备注
</label>
<div class="lay
ui-input
-block">
<textarea placeholder="请输入备注内容" v
-model="formData.desc" class="lay
ui-textarea"></textarea>
</div>
</div>
<!
-- 提交按钮
-->
<div class="lay
ui-form
-item submit
-btn">
<button class="lay
ui-btn lay
ui-btn
-normal" type="button" @click="submitForm">
保存
</button>
<button class="lay
ui-btn lay
ui-btn
-primary" type="button" @click="resetForm">
重置
</button>
</div>
</form>
</div>
<!
-- 加载中提示
-->
<div class="loading
-overlay" v
-if="loading">
<div class="lay
ui-anim lay
ui-anim
-rotate lay
ui-anim
-loop">
<i class="lay
ui-icon lay
ui-icon
-loading" style="
font-size: 40
px; color: #
1E9FFF;"></i>
</div>
<div style="margin
-top:
10
px; color: #666;">提交中，请稍候...</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.
14/dist/vue.js"></script>
<script src="https://www.lay
uicdn.com/lay
ui-v2.6.8/lay
ui.js"></script>
<script>
new Vue({
el: '#app',
data: {
formData: {
id: '',
community_name: '', // 关键修改4：字段名从community_id改为community_name
project_name: '', // 关键修改5：字段名从project_id改为project_name
owner_name: '', // 关键修改6：字段名从personnel_id改为owner_name
yf_money: '',
ss_money: '',
jf_time: '',
desc: ''
},
errors: {
community_name: '', // 关键修改7：错误字段名同步调整
project_name: '',
owner_name: '',
yf_money: '',
ss_money: '',
jf_time: ''
},
loading: false,
laydate: null
},
mounted() {
lay
ui.use(['laydate', 'form'], () => {
this.laydate = lay
ui.laydate;
lay
ui.form.render();
this.initDatePicker();
});
},
methods: {
initDatePicker() {
this.laydate.render({
elem: '#paymentDate',
type: 'date',
value: this.formData.jf_time || new Date(),
min: '20
10
-0
1-0
1',
max: '2099
-12-3
1',
done: (value) => {
this.formData.jf_time = value;
this.validateField('jf_time');
}
});
},
validateMoney(field) {
const value = this.formData[field];
if (!value) {
this.errors[field] = '金额不能为空';
} else if (isNaN(value) || parseFloat(value) <= 0) {
this.errors[field] = '请输入有效的金额';
} else {
this.errors[field] = '';
}
},
validateField(field) {
switch(field) {
// 关键修改8：验证字段名同步调整
case 'community_name':
this.errors.community_name = this.formData.community_name ? '' : '请输入所属小区';
break;
case 'project_name':
this.errors.project_name = this.formData.project_name ? '' : '请输入收费项目';
break;
case 'owner_name':
this.errors.owner_name = this.formData.owner_name ? '' : '请输入业主';
break;
case 'yf_money':
this.validateMoney('yf_money');
break;
case 'ss_money':
this.validateMoney('ss_money');
break;
case 'jf_time':
this.errors.jf_time = this.formData.jf_time ? '' : '请选择缴费日期';
break;
}
},
validateForm() {
// 关键修改9：验证字段名同步调整
this.validateField('community_name');
this.validateField('project_name');
this.validateField('owner_name');
this.validateField('yf_money');
this.validateField('ss_money');
this.validateField('jf_time');
// 检查是否有错误
for (let key in this.errors) {
if (this.errors[key]) return false;
}
// 验证实收金额不小于应收金额
if (parseFloat(this.formData.ss_money) < parseFloat(this.formData.yf_money)) {
this.errors.ss_money = '实收金额不能小于应收金额';
return false;
}
return true;
},
submitForm() {
if (!this.validateForm()) {
lay
ui.layer.msg('请正确填写表单', {icon: 5});
return;
}
this.loading = true;
// 模拟AJAX提交
setTimeout(() => {
this.loading = false;
// 模拟成功响应（这里保存的是文本输入值）
lay
ui.layer.msg('添加成功', {icon:
1, time:
1500}, () => {
if (window.parent && window.parent.layer) {
const index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.location.reload();
}
this.resetForm();
});
},
1500);
},
resetForm() {
this.formData = {
id: '',
community_name: '',
project_name: '',
owner_name: '',
yf_money: '',
ss_money: '',
jf_time: '',
desc: ''
};
for (let key in this.errors) {
this.errors[key] = '';
}
this.initDatePicker();
}
}
});
</script>
</body>
</html>
删除备注
当尝试在Chrome浏览器中设置小于12px的字体大小时，实际显示仍为12px。本文介绍了解决此问题的方法，包括使用-webkit-text-size-adjust属性。
扫一扫
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
