以之前对话中的收费项目管理为模版,修改该代码
<!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.initLayui();
},
methods: {
initLayui() {
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>