<!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="pro_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>
</tr>
</
thead>
<tbody>
<tr v-for="(item, index) in prolist" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.x_id }}</td>
<td>{{ item.m_count }}</td>
<td>{{ item.m_name }}</td>
<td>{{ item.creat_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 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_name" placeholder="请输入项目名称"
class="layui-input" 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>
// 从localStorage获取房产数据
function getproData() {
const data = localStorage.getItem('proData');
return data ? JSON.parse(data) : [
{
id: '3',
x_id: '1',
m_count: 'A栋',
m_name: '金华小区A栋',
create_Time: '2019-12-13'
},
{
id: '2',
x_id: '2',
m_count: 'A栋',
m_name: '金华小区A栋',
create_Time: '2019-12-11'
},
{
id: '1',
x_id: '3',
m_count: 'A栋',
m_name: '金华小区A栋',
create_Time: '2019-12-12'
}
];
}
new Vue({
el: '#app',
data: {
proList: getproData(),
dialogVisible: false,
dialogTitle: '编辑收费项目',
currentIndex: -1,
formData: {
id: '',
x_id: '',
m_count: '',
m_name: '',
create_Time: ''
}
},
mounted() {
this.initLayui();
},
methods: {
initLayui() {
layui.use(['form', 'laydate', 'layer'], () => {
const form = layui.form;
const laydate = layui.laydate;
window.layer = layui.layer;
form.render();
laydate.render({
elem: '#checkInDate',
max: '2099-12-31',
done: (value) => {
this.formData.create_Time = value;
}
});
});
},
refresh() {
this.proList = getproData();
layer.msg('刷新成功', {icon: 1});
},
editItem(index) {
this.dialogTitle = '编辑收费项目';
this.currentIndex = index;
this.formData = JSON.parse(JSON.stringify(this.proList[index]));
this.dialogVisible = true;
this.$nextTick(() => {
layui.form.render();
// 重新初始化日期选择器，确保显示正确的日期
layui.laydate.render({
elem: '#checkInDate',
max: '2099-12-31',
value: this.formData.create_Time,
done: (value) => {
this.formData.create_Time = value;
}
});
});
},
deleteItem(index) {
const _this = this;
layer.confirm('确定要删除这条记录吗？', function(){
_this.proList.splice(index, 1);
localStorage.setItem('houseData', JSON.stringify(_this.proList));
layer.msg('删除成功', {icon: 1});
});
},
submitForm() {
const form = layui.form;
// 验证表单
form.verify();
if (!this.validateForm()) {
return;
}
// 编辑
this.proList.splice(this.currentIndex, 1, this.formData);
// 保存到localStorage
localStorage.setItem('proData', JSON.stringify(this.proList));
this.dialogVisible = false;
layer.msg('编辑成功', {icon: 1});
},
validateForm() {
if (!this.formData.x_id) {
layer.msg('请输入所属小区', {icon: 5});
return false;
}
if (!this.formData.m_name) {
layer.msg('请输入名称', {icon: 5});
return false;
}
if (!this.formData.m_name) {
layer.msg('项目名称不能为空', {icon: 5});
return false;
}
return true;
},
}
});
</script>
</body>
</html>
表单无法显示数据，写出更改后的代码
扫一扫
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
