可以添加,可以删除。动态的添加数据。

不用操作dom,只要操作json数据即可。

<form class="form-horizontal addForm"
id="edit_form">
<div class="form-group col-lg-12">
<label class="control-label col-lg-4"></label>
<label class="col-lg-5 text-left">配料</label>
<label class="control-label col-lg-1">
<button type="button" class="btn btn-xs btn-danger add-img" @click="add_item">添加配料</button>
</label>
</div> <div class="form-group" v-for="(item, i) in items">
<label for="name" class="col-lg-2 control-label">名称</label>
<div class="col-lg-3"> <!-- 通过div控制长度 -->
<input type="text" class="form-control" id="name" v-model="item.name" placeholder="料酒">
</div> <label for="model" class="col-lg-2 control-label">规格</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="model" v-model="item.model" placeholder="1勺">
</div> <label class="control-label col-lg-1 del-btn">
<button type="button" class="btn btn-xs btn-danger del-img" @click="remove_item(i)">删除</button>
</label>
</div> <input type="hidden" name="id" id="id" value="{$id}" />
<input type="hidden" name="page" id="page" value="{$page}" />
<div class="form-group">
<div class="col-lg-2 col-lg-offset-3">
<button type="button" class="btn btn-primary col-lg-8" @click="submit">下一步</button>
</div> <div class="col-lg-2">
<button type="button" class="btn btn-danger col-lg-8" @click="cancel">取消</button>
</div>
<div class="clear"></div>
</div>
</form>

下面是JS

// 定义全局锁
var lock_flag = false;
var page = $('#page').val(); var in_data = '<?php echo json_encode($mill_dishes_material_list);?>';
in_data = JSON.parse(in_data);
console.log(in_data); var app = new Vue({
el: '#edit_form',
data: {
items: in_data ? in_data : []
},
methods: {
add_item:function() {
var item = {
'id':'',
'name':'',
'model':''
};
this.items.push(item);
},
remove_item:function(index) {
this.items.splice(index,1);
},
cancel:function() {
window.location.href='index?page=' + page;
},
submit:function() {
if (this.items.length == 0) {
layer.msg('请填写配料信息');
return;
} var error = 0;
this.items.forEach(function (item,index) {
if (item.name == '' || item.model== '') {
error ++;
}
}); if (error > 0) {
layer.msg('请完整填写信息');
return;
} if (!lock_flag) {
lock_flag = true;
var post_data = {};
post_data.id = $("#id").val();
post_data.items = this.items;
$.ajax({
url: 'step_2_save',
data: JSON.stringify(post_data),
type: 'POST',
dataType:"json",
contentType:"application/json",
processData: false,
success: function (obj) {
lock_flag = false;
if(obj.errno == 0){
layer.msg("已保存,进入下一页");
setTimeout(function() {
window.location.href = 'step_3?id=' + obj.id + '&page=' + page;
},2000);
}else{
// 解锁
lock_flag = false;
layer.msg(obj.errdesc);
}
},
error: function (data) {
// 解锁
lock_flag = false;
layer.msg('系统错误');
}
});
} }
}
});

下面是后台处理

vendor('Func.Json');
$json = new Json();
// json传入的数据
$json_data = json_decode(file_get_contents("php://input"),true);
$id = (int)$json_data['id'];
$items = $json_data['items']; $mill_dishes_material_model = M('mill_dishes_material');
$mill_dishes_material_model->where(['dishes_id'=>$id])->save(['is_del'=>1]);
foreach ($items as $k=>$item) {
// 进行添加修改操作
$info = $mill_dishes_material_model->where(['id'=>$item['id']])->find();
if ($info) { // 修改
$op_data = [
'name' => $item['name'],
'model' => $item['model'],
'is_del' => 0
];
$mill_dishes_material_model->where(['id'=>$item['id']])->save($op_data);
} else { // 添加
$op_data = [
'dishes_id' => $id,
'name' => $item['name'],
'model' => $item['model'],
'add_time' => time()
];
$mill_dishes_material_model->add($op_data);
}
} $json->setErr(0, '操作成功');
$json->setAttr('id', $id);
$json->send();

换个思维,boot结合vue做后台管理的更多相关文章

  1. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  2. Vue + ElementUI 后台管理模板推荐

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...

  3. 第一次用angularJS做后台管理点滴

    很早以前就大概看过一点angualrjs,但是没有项目,一直没有进行下去,就是干巴巴的看着,过了一段时间发现什么也不记得了. 来yulebaby我的第一个后台管理是用easyui做的,做完那个以后发现 ...

  4. 手摸手,带你用vue实现后台管理权限系统及顶栏三级菜单显示

    手摸手,带你用vue实现后台管理权限系统及顶栏三级菜单显示 效果演示地址 项目demo展示 重要功能总结 权限功能的实现 权限路由思路: 根据用户登录的roles信息与路由中配置的roles信息进行比 ...

  5. MVC + LigerUI 做后台管理还真是清爽

    LigerUI是基于Jquery,轻量级UI框架.具体可以看官方演示 http://www.ligerui.com/ 我的简单后台 模拟Winodw桌面效果,挺不错呢.最喜欢的还是他的,下拉列表绑定G ...

  6. vue搭建后台管理页面(点击左侧导航,切换右侧内容)

    home.vue页面 <template> <div style="background-color: #EBEBEB;min-height:900px"> ...

  7. 项目:Vue+node+后台管理项目小结

    序:本文主要分两块说:项目机制,具体用到的知识块. 1. 项目机制 项目的原型以vue-cli为原型,进行项目的初步构建.项目以node.js服务和webpack打包机制为依托,将.vue文件打包为浏 ...

  8. vue+Element 后台管理骨架

    1.使用的是vue-cli 3.0起的 2.文件目录结构 3.整体的骨架是根据element 文档里头的Container容器布局来的(复制粘贴,喜欢什么色儿就改) aside这个 部分需要注意的是这 ...

  9. 使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法

    给链接或按钮  添加 onclick="self.parent.addTab('百度','http://www.baidu.com','icon-add')" 如: <a h ...

随机推荐

  1. [Algorithms] Longest Common Subsequence

    The Longest Common Subsequence (LCS) problem is as follows: Given two sequences s and t, find the le ...

  2. 《JAVA多线程编程核心技术》 笔记:第六章:单例模式与多线程

    一.立即加载/"饿汉模式"和延迟加载/"懒汉模式" 立即加载(又称饿汉模式):在使用类的时候已经将对象创建完毕,常见实现方法是直接new实例化 延迟加载(又称懒 ...

  3. macro-name replacement-text 宏 调试开关可以使用一个宏来实现

    C++ 预处理器_w3cschool https://www.w3cschool.cn/cpp/cpp-preprocessor.html C++ 预处理器 预处理器是一些指令,指示编译器在实际编译之 ...

  4. Java Concurrent happens-before

    happens-before relation on memory operations such as reads and writes of shared variables. The resul ...

  5. springboot整合fastjson 将null转成空字符串

    /** * @Auther: mxf * @Date: 2019/4/18 09:12 * @Description: */ @Configuration @EnableWebMvc public c ...

  6. django的序列化问题

    Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户,特别的Ajax请求一般返回的为Json格式 1.serializers from django.core import seria ...

  7. window7+wamp环境配置Oracle数据库连接

    最近开发需要使用的oracle数据库!翻看了PHP手册,也在网上找了些帖子!功夫不负有心人,花费了四五个小时的时间,终于找到了Oracle的配置方法.下面就讲解下如何配置Oracle数据库连接吧! 附 ...

  8. loadrunner winsocket sent buffer 乱码

    data.ws里手写的xml参数,调试脚本时一直显示乱码,解决方法如下: tools-recording options--sockets--winsock下: EBCID--translation ...

  9. Python基础学习之 函数

    阅读目录 第一篇:  函数初识 第二篇:  函数命名空间 作用域 闭包 第三篇:  装饰器 第四篇:  装饰器 面试题错误点 第五篇:  迭代器生成器 第六篇:  生成器进阶 第七篇:  递归 第八篇 ...

  10. xpath中遇到[<Element a at 0x39a9a80>](转)

    Element是什么 回归正题,大家晕头转脑的看完繁杂的语法之后,已经迫不及待写点什么东西了,然后部分同学可能遇到了这个 <Element a at 0x39a9a80>或者类似 Elem ...