liche/admin/views/sys/city/lists.php

<div class="coms-table-wrap">
    <div class="coms-table-hd clearfix no-border">
        <form action="/sys/city/city/lists" class="form-search" onsubmit="return false">
        <div class="am-form am-form-horizontal">
            <div class="am-form-group fl">
                <label class="am-para-label">城市名称：</label>
                <div class="am-para-inline w200">
                    <input type="text" name="keyword" id="input" v-model="params.keyword"/>
                </div>
            </div>
            <div class="am-form-group fl ml20">
                <button type="submit" class="am-btn am-btn-sm am-btn-success w100">搜索</button>
                <button data-modal="/sys/city/city/get" data-title="新增" type="button" class="am-btn am-btn-success w100 am-btn-sm">新增</button>
            </div>
            <div class="am-form-group fr" style="font-size: 15px;padding-right: 20px;padding-top: 6px;">
                共有<?=$pager['totle']?>条数据
            </div>
        </div>
        </form>
    </div>
    <div class="coms-table-bd">
        <table class="am-table am-table-bordered">
            <thead>
            <tr>
                <th width="15%"><span>城市ID</span></th>
                <th width="15%"><span>城市名称</span></th>
                <th width="10%"><span>挂牌价</span></th>
                <th width="10%"><span>操作</span></th>
                <th width=""><span>区域</span></th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in lists">
                    <td>{{v.city_id}}</td>
                    <td>{{v.name}}</td>
                    <td>
                        <input style="width: 100%" type="text" name="fee_carno" v-model="v.fee_carno" placeholder="输入挂牌价">
                    </td>
                    <td>
                        <a data-ajax="post" data-action="/sys/city/city/del" :data-params-id="v.id" class="am-btn am-btn-danger am-btn-xs">删除</a>
                    </td>
                    <td style="text-align: left">
                        <span class="mr5" v-for="(county, j) in v.countys">
                            <input type="checkbox" v-model="county.checked" @change="set_area(i)"/>{{county.county_name}}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td style="text-align: left"><button data-title="保存" type="button" class="am-btn am-btn-success am-btn-xs" @click="save_fee">保存挂牌价</button></td>
                    <td></td>
                    <td style="text-align: left">
                        <button data-title="保存" type="button" class="am-btn am-btn-success am-btn-xs" @click="save_area">保存区域设置</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="pb50"></div>
</div>
<script>
    var vue_obj;
    var loading = 0;
    $(function(){
        vue_obj = new Vue({
            el: '.coms-table-wrap',
            data: {
                params:[],
                lists:[]
            },
            mounted:function() {
                var vm = this;
                vm.params = <?=json_encode($params)?>;
                vm.lists = <?=json_encode($lists)?>;
            },
            methods:{
                set_city:function(city_idx){
                    var vm = this;
                    var city = vm.lists[city_idx];
                    var checked = city.checked;
                    for(var i in city.countys){
                        var county = city.countys[i];
                        county.checked = checked;
                    }
                },
                set_area:function(city_idx){
                    var vm = this;
                    var city = vm.lists[city_idx];
                    var checked = 0;
                    for(var i in city.countys){
                        var county = city.countys[i];
                        if(1 == county.checked){
                            checked = 1;
                            break;
                        }
                    }
                    city.checked = checked;
                },
                save_area:function(){
                    var vm = this;
                    if(1 == loading){
                        return 0;
                    }
                    loading = 1;

                    $.ajax({
                        url: '/sys/city/city/edit_areas',
                        type: 'post',
                        dataType: 'json',
                        data: {lists:JSON.stringify(vm.lists)},
                        beforeSend: function () {
                            layer.load(1, {
                                shade: [0.1, '#fff'] //0.1透明度的白色背景
                            });
                        },
                        success: function (data) {
                            loading = 0;
                            if (data['code']) {
                                layer.msg(data.msg, {
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                    $.form.reload();
                                });
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        complete: function () {
                            loading = 0;
                            layer.closeAll('loading');
                        }
                    });
                },
                //保存挂牌价
                save_fee:function(){
                    var vm = this;
                    if(1 == loading){
                        return 0;
                    }
                    loading = 1;

                    $.ajax({
                        url: '/sys/city/city/edit_fee',
                        type: 'post',
                        dataType: 'json',
                        data: {lists:JSON.stringify(vm.lists)},
                        beforeSend: function () {
                            layer.load(1, {
                                shade: [0.1, '#fff'] //0.1透明度的白色背景
                            });
                        },
                        success: function (data) {
                            loading = 0;
                            if (data['code']) {
                                layer.msg(data.msg, {
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                    $.form.reload();
                                });
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        complete: function () {
                            loading = 0;
                            layer.closeAll('loading');
                        }
                    });
                }
            },
            watch:{}
        });

        <?php page_script($pager) ?>
    });
</script>