以之前对话中的收费项目管理为模版，修改该代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf
-8">
<title>收费项目明细管理</title>
<meta name="renderer" content="webkit">
<meta http
-equiv="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.
layuicdn.com/
layui-v2.6.8/css/
layui.css">
<style>
.x
-nav { padding: 0 20px; position: relative; z
-index: 99; border
-bottom: 1px solid #e5e5e5; line
-height: 60px; }
.x
-body { padding: 20px; }
.
layui-table td, .
layui-table th { padding: 9px 15px; }
.td
-manage a { margin: 0 5px; }
.dialog
-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z
-index: 999;
display: flex;
justify
-content: center;
align
-items: center;
}
.dialog
-content {
background: #fff;
padding: 20px;
border
-radius: 5px;
width: 800px;
max
-height: 90vh;
overflow
-y: auto;
}
.x
-red { color: red; }
</style>
</head>
<body>
<div id="app">
<!
-- 面包屑导航
-->
<div class="x
-nav">
<span class="
layui-breadcrumb">
<a>首页</a>
<a>收费管理</a>
<a><cite>收费项目明细列表</cite></a>
</span>
<a class="
layui-btn
layui-btn
-sm" style="float:right" href="
javascript:location.replace(location.href)" @click="refresh">
<i class="
layui-icon
layui-icon
-refresh"></i> 刷新
</a>
</div>
<div class="x
-body">
<!
-- 操作栏
-->
<div class="
layui-row">
<a class="
layui-btn" href="promx_add.html">
<i class="
layui-icon
layui-icon
-add
-1"></i> 添加收费项目明细
</a>
</div>
<!
-- 数据表格（移除备注列）
-->
<table class="
layui-table">
<thead>
<tr>
<th>ID</th>
<th>所属小区</th>
<th>收费项目</th>
<th>应收金额(￥)</th>
<th>实收金额(￥)</th>
<th>缴费时间</th> <!
-- 调整列顺序
-->
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v
-for="(item, index) in detailList" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.x_id}}</td>
<td>{{ item.m_id }}</td>
<td>{{ item. e_amount}}</td>
<td>{{ item.a_amount }}</td>
<td>{{ item.pay_Time }}</td> <!
-- 移除原备注列
-->
<td class="td
-manage">
<a @click="editItem(index)" title="编辑">
<i class="
layui-icon
layui-icon
-edit"></i>
</a>
<a @click="deleteItem(index)" title="删除">
<i class="
layui-icon
layui-icon
-delete"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!
-- 编辑弹框
-->
<div v
-if="dialogVisible" class="dialog
-mask">
<div class="dialog
-content">
<h3>{{ dialogTitle }}</h3>
<form class="
layui-form
layui-form
-pane">
<input type="hidden" v
-model="formData.id">
<div class="
layui-form
-item">
<label class="
layui-form
-label">
<span class='x
-red'>*</span>所属小区
</label>
<div class="
layui-input
-block">
<input type="text" v
-model="formData.x_id" placeholder="请输入所属小区编号"
class="
layui-input" lay
-verify="required">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">
<span class='x
-red'>*</span>收费项目编号
</label>
<div class="
layui-input
-block">
<input type="text" v
-model="formData.m_id" placeholder="请输入项目编号"
class="
layui-input" lay
-verify="required">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">
<span class='x
-red'>*</span>应付费用
</label>
<div class="
layui-input
-block">
<input type="text" v
-model="formData.e_amount" placeholder="请输入应付金额"
class="
layui-input" lay
-verify="required">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">
<span class='x
-red'>*</span>实付费用
</label>
<div class="
layui-input
-block">
<input type="text" v
-model="formData.a_amount" placeholder="请输入实付金额"
class="
layui-input" lay
-verify="required">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">
<span class='x
-red'>*</span>支付时间
</label>
<div class="
layui-input
-inline">
<!
-- 关键：保留唯一id用于绑定日期选择器
-->
<input class="
layui-input" v
-model="formData.pay_Time" placeholder="点击选择日期"
id="checkInDate" lay
-verify="required">
</div>
</div>
<div class="
layui-form
-item">
<button class="
layui-btn
layui-btn
-primary" type="button" @click="dialogVisible = false">取消</button>
<button class="
layui-btn" type="button" @click="submitForm">确定</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://www.
layuicdn.com/
layui-v2.6.8/
layui.js"></script>
<script>
// 获取收费明细数据（与原逻辑一致）
function getDetailData() {
const data = localStorage.getItem('detailData');
const defaultData = [
{ id: '3', x_id: '林科大小区', m_id: '厕所广告位1', e_amount: 500, a_amount: 500,pay_Time: '2020
-01
-05' },
{ id: '2', x_id: '林科大小区', m_id: '垃圾桶', e_amount: 50, a_amount: 50,pay_Time: '2020
-01
-05' },
{ id: '1', x_id: '林科大万府', m_id: '停车位', e_amount: 500, a_amount: 500,pay_Time: '2020
-01
-05' }
];
try {
return data ? JSON.parse(data) : defaultData;
} catch (error) {
console.error('localStorage数据解析失败，使用默认数据', error);
return defaultData;
}
}
new Vue({
el: '#app',
data: {
proList: getDetailData(),
dialogVisible: false,
dialogTitle: '编辑收费项目',
currentIndex:
-1,
formData: {
id: '',
x_id: '',
m_id: '',
a_amount:'',
e_amount: '',
pay_Time: ''
}
},
mounted() {
this.init
Layui();
},
methods: {
init
Layui() {
layui.use(['form', 'laydate', 'layer'], () => {
window.layer =
layui.layer;
// 预加载laydate模块（关键：为弹框初始化做准备）
this.laydate =
layui.laydate;
layui.form.render();
});
},
refresh() {
this.detailList = getDetailData();
layer.msg('刷新成功', {icon: 1});
},
// editItem(index) {
// const item = this.detailList[index];
// window.open(`pro_detail_edit.html?id=${item.id}`, '_blank');
// },
editItem(index) {
this.dialogTitle = '编辑收费项目';
this.currentIndex = index;
this.formData = JSON.parse(JSON.stringify(this.detailList[index]));
this.dialogVisible = true;
// 关键修改：弹框显示后初始化日期选择器
this.$nextTick(() => {
// 重新渲染日期选择器并设置当前值
this.laydate.render({
elem: '#checkInDate', // 绑定输入框的id
max: '2099
-12
-31',
value: this.formData.pay_Time, // 显示当前记录的创建时间
done: (value) => {
this.formData.pay_Time = value; // 选择日期后更新数据
}
});
});
},
deleteItem(index) {
const _this = this;
layer.confirm('确定要删除这条记录吗？', function(){
_this.detailList.splice(index, 1);
localStorage.setItem('detailData', JSON.stringify(_this.detailList));
_this.detailList = [..._this.detailList];
layer.msg('删除成功', {icon: 1});
});
},
submitForm() {
if (!this.validateForm()) return;
this.proList.splice(this.currentIndex, 1, this.formData);
localStorage.setItem('proData', JSON.stringify(this.detailList));
this.dialogVisible = false;
this.detailList = [...this.detailList];
layer.msg('编辑成功', {icon: 1});
},
validateForm() {
if (!this.formData.x_id) {
layer.msg('请输入所属小区', {icon: 5});
return false;
}
if (!this.formData.m_id) {
layer.msg('请输入项目编号', {icon: 5});
return false;
}
if (!this.formData.a_amount) {
layer.msg('请输入应付金额', {icon: 5});
return false;
}
if (!this.formData.e_amount) {
layer.msg('请输入实付金额', {icon: 5});
return false;
}
if (!this.formData.m_id) {
layer.msg('项目名称不能为空', {icon: 5});
return false;
}
if (!this.formData.pay_Time) {
layer.msg('请选择创建时间', {icon: 5});
return false;
}
return true;
},
}
}
);
</script>
</body>
</html>
扫一扫
3631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
