換個思維,boot結合vue做後臺管理
阿新 • • 發佈:2018-11-08
可以新增,可以刪除。動態的新增資料。
不用操作dom,只要操作json資料即可。
<form class="form-horizontal addForm" id="edit_form" @submit="checkForm" method="post" action="step_2_save" name="form1" enctype="multipart/form-data"> <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="submit" class="btn btn-primary col-lg-8" id="edit_btn">下一步</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 }, methods: { add_item:function() { var item = { 'id':'', 'name':'', 'model':'' }; this.items.push(item); }, remove_item:function(index) { this.items.splice(index,1); }, checkForm: function (e) { if (this.items.length == 0) { layer.msg('請填寫配料資訊'); e.preventDefault(); } this.items.forEach(function (item,index) { if (item.name == '' || item.model== '') { layer.msg('請完整填寫資訊'); e.preventDefault(); } }); 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('系統錯誤'); } }); } e.preventDefault(); }, cancel:function() { window.location.href='index?page=' + page; } } });
下面是後臺處理
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();