有意思的！

初始化需要ajax獲取資料！

搜尋商品需要ajax獲取資料！

提交資料需要ajax傳遞資料！

有了 vue-resource ，操作挺方便的。

這是html

<form class="form-horizontal addForm"
      id="edit_form">

    <div class="form-group">
        <label for="goods_id" class="col-lg-2 control-label">商品ID</label>
        <div class="col-lg-3"> <!-- 通過div控制長度 -->
            <input type="text" class="form-control" id="goods_id" placeholder="請輸入商品id進行搜尋">
        </div>

        <label for="goods_type" class="col-lg-2 control-label">型別</label>
        <div class="col-lg-2">
            <select id="goods_type" class="form-control">
                <option value="1">線上</option>
                <option value="2">門店</option>
            </select>
        </div>

        <label class="control-label col-lg-1 del-btn">
            <button type="button" class="btn btn-sm btn-primary"  @click="search">搜尋</button>
        </label>
    </div>


    <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"></label>
    </div>


    <div class="form-group" v-for="(item, i) in items">
        <label class="col-lg-1 control-label">ID:{{item.goods_id}}</label>
        <label class="col-lg-1 control-label">型別:
            <span v-if="item.type == 1">
                線上
            </span>
            <sapn v-else>
                門店
            </sapn>
        </label>

        <label class="col-lg-2 control-label">名稱:{{item.name}}</label>
        <label class="col-lg-1 control-label">圖片:</label>
        <div class="col-lg-2">
            <img :src="item.img_url" width="120px;">
        </div>


        <label for="is_heavy" class="col-lg-1 control-label">是否頭部：</label>
        <div class="col-lg-1">
            <input type="checkbox" class="" id="is_heavy" v-model="item.is_heavy">
        </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

<script>
    // 定義全域性鎖
    var lock_flag = false;
    var page = $('#page').val();

    var app = new Vue({
        el: '#edit_form',
        data: {
            items: []
        },
        mounted() {
            // 獲取資料並進行初始化操作
            var id = GetQueryString('id');
            this.$http.post('step_3_init',{
                id:id,
            },{emulateJSON:true}).then(function(res){
                if (res.body.errno !== 0) {
                    layer.msg(res.body.errdesc);
                    return false;
                }

                res.body.data.forEach(function (item,index) {
                    res.body.data[index]['is_heavy'] = parseInt(res.body.data[index]['is_heavy']);
                });

                this.items = res.body.data;
            },function(res){
                console.log(res.status);
            });
        },
        methods: {
            remove_item:function(index) {
                this.items.splice(index,1);
            },
            cancel:function() {
                window.location.href='index?page=' + page;
            },
            search:function() {
                var goods_id = parseInt($('#goods_id').val());
                var goods_type = $('#goods_type').val();

                if (!/^[0-9]*[1-9][0-9]*$/.test(goods_id)) {
                    layer.msg('請輸入商品id');
                    return;
                }

                //傳送 post 請求
                this.$http.post('get_search_goods',{
                    goods_id:goods_id,
                    goods_type:goods_type
                },{emulateJSON:true}).then(function(res){
                    if (res.body.errno !== 0) {
                        layer.msg(res.body.errdesc);
                        return false;
                    }
                    // 檢查相同的資料是否存在
                    var exist = 0;
                    this.items.forEach(function (item,index) {
                        if (item.id == res.body.data.id && item.type == res.body.data.type) {
                            exist ++;
                        }
                    });
                    if (exist > 0) {
                        layer.msg('商品資料已存在，請勿重複新增');
                        return;
                    }

                    this.items.push(res.body.data);
                },function(res){
                    console.log(res.status);
                });
            },
            submit:function() {
                if (!lock_flag) {
                    lock_flag = true;
                    var post_data = {};
                    post_data.id = $("#id").val();
                    post_data.items = this.items;

                    //傳送 post 請求
                    this.$http.post('step_3_save',post_data,{emulateJSON:true}).then(function(res){
                        if(res.body.errno == 0){
                            layer.msg("已儲存");
                            console.log(JSON.stringify(res));
                            setTimeout(function() {
                                window.location.href = 'index?page=' + page;
                            },2000);
                        }else{
                            // 解鎖
                            lock_flag = false;
                            layer.msg(res.body.errdesc);
                        }
                    },function(res){
                        lock_flag = false;
                        console.log(res.status);
                    });
                }

            }
        }
    });

</script>
 

這是php

    // 相關的商品
    public function step_3() {
        $id = (int)$_GET['id'];
        $this->assign('id',$id);

        $page = (int)$_GET['page'];
        $this->assign('page', $page);

        $mill_dishes_model = M('mill_dishes');
        $result = $mill_dishes_model->where(array('id'=>$id))->find();
        if(!$result){
            $this->success('資料不存在','index?page='.$page);
            return false;
        }

        // 獲取配料資料
        $this->display();
    }

    // 初始化
    public function step_3_init() {
        vendor('Func.Json');
        $json = new Json();
        $id = (int)$_POST['id'];

        // 獲取配料資料
        $mill_dishes_cross_model = M('mill_dishes_cross');
        $mill_dishes_cross_list = $mill_dishes_cross_model->where(['dishes_id'=>$id,'is_del'=>0])->field('id,goods_id,type,is_heavy')->select();

        foreach ($mill_dishes_cross_list as $k=>&$v) {
            // 獲取商品名稱圖片
            if ($v['type'] == 1) {
                $goods_model = M('goods');
                $info = $goods_model->where(['id'=>$v['goods_id']])->find();
                $v['name'] = $info['name'];
                $v['img_url'] = C('CDN_HOST') . $info['img_list'];
            } else {
                $store_goods_model = M('store_goods');
                $info = $store_goods_model->where(['id'=>$v['goods_id']])->find();
                $v['name'] = $info['name'];
                $v['img_url'] = C('CDN_HOST') . $info['main_image'];
            }
        }

        $json->setErr(0, '操作成功');
        $json->setAttr('data', $mill_dishes_cross_list);
        $json->send();
    }

    // 相關的商品儲存
    public function step_3_save() {
        vendor('Func.Json');
        $json = new Json();
        // json傳入的資料
        $id = (int)$_POST['id'];
        $items = $_POST['items'];

        $mill_dishes_cross_model = M('mill_dishes_cross');
        $mill_dishes_cross_model->where(['dishes_id'=>$id])->save(['is_del'=>1]);
        foreach ($items as $k=>$item) {
            // 進行新增修改操作
            $info = $mill_dishes_cross_model->where(['id'=>$item['id']])->find();
            if ($info) { // 修改
                $op_data = [
                    'goods_id'      => $item['goods_id'],
                    'type'     => $item['type'],
                    'is_heavy'     => $item['is_heavy'] == 'true' ? 1 : 0,
                    'is_del'    => 0
                ];
                $mill_dishes_cross_model->where(['id'=>$item['id']])->save($op_data);
            } else { // 新增
                $op_data = [
                    'dishes_id' => $id,
                    'goods_id'      => $item['goods_id'],
                    'type'     => $item['type'],
                    'is_heavy'     => $item['is_heavy'] == 'true' ? 1 : 0,
                    'add_time'  => time()
                ];
                $mill_dishes_cross_model->add($op_data);
            }
        }

        $json->setErr(0, '操作成功');
        $json->setAttr('id', $id);
        $json->send();
    }

    // 搜尋商品
    public function get_search_goods() {
        vendor('Func.Json');
        $json = new Json();
        $goods_id = $_POST['goods_id'];
        if (!$goods_id){
            $json->setErr('10001','缺少引數goods_id');
            $json->Send();
        }

        $goods_type = $_POST['goods_type'];
        if (!$goods_type){
            $json->setErr('10002','缺少引數goods_type');
            $json->Send();
        }

        $out_data = [];
        if ($goods_type == 1) { // 獲取線上商品
            $goods_model = M('goods');
            $info = $goods_model->where(['id'=>$goods_id,'is_sold'=>1,'status'=>1])->find();
            if (!$info) {
                $json->setErr('10003','商品不存在或已下架');
                $json->Send();
            }

            $out_data = [
                'id' => 0,
                'goods_id' => $info['id'],
                'name' => $info['name'],
                'img_url' =>C('CDN_HOST') . $info['img_list'],
                'type' => 1,
                'is_heavy' => 0
            ];

        } else { // 獲取門店商品
            $store_goods_model = M('store_goods');
            $info = $store_goods_model->where(['id'=>$goods_id,'is_sale'=>1,'is_del'=>0])->find();
            if (!$info) {
                $json->setErr('10003','商品不存在或已下架');
                $json->Send();
            }

            $out_data = [
                'id' => 0,
                'goods_id' => $info['id'],
                'name' => $info['name'],
                'img_url' =>C('CDN_HOST') . $info['main_image'],
                'type' => 2,
                'is_heavy' => 0
            ];
        }

        $json->setErr(0, '操作成功');
        $json->setAttr('data', $out_data);
        $json->send();
    }