liche/admin/views/auto/finance/lists.php

<div class="coms-table-wrap">
    <div class="coms-table-hd clearfix no-border">
        <form action="/auto/finance/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 w100">车型：</label>
                <div class="am-para-inline w120">
                    <select name="brand_id" v-model="params.brand_id">
                        <option value="">选择品牌</option>
                        <option :value="v.id" v-for="(v,i) in brandAry">{{v.name}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group fl">
                <div class="am-para-inline w120">
                    <select name="s_id" v-model="params.s_id">
                        <option value="">选择车系</option>
                        <option :value="v.id" v-for="(v,i) in seryAry">{{v.name}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group fl">
                <div class="am-para-inline w120">
                    <select name="v_id" v-model="params.v_id">
                        <option value="">选择车型</option>
                        <option :value="v.id" v-for="(v,i) in attrvAry">{{v.title}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <div class="am-para-inline w120">
                    <select name="cor_id" v-model="params.cor_id">
                        <option value="">车身颜色</option>
                        <option :value="v.id" v-for="(v,i) in attrcorAry">{{v.title}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group fl">
                <label class="am-para-label">状态：</label>
                <div class="am-para-inline w150">
                    <select name="status" v-model="params.status">
                        <option value="">请选择</option>
                        <option :value="i" v-for="(v,i) in statusAry">{{v}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group fl ml20">
                <button type="submit" class="am-btn am-btn-sm am-btn-success w100">搜索</button>
                <a data-modal="/auto/finance/get" data-title="添加数据" class="am-btn am-btn-sm am-btn-success w100">新增</a>
            </div>
        </div>
        </form>
    </div>
    <div class="coms-table-bd">
        <div class="fr">共有<?= $pager['totle'] ?>条数据</div>
        <table class="am-table am-table-bordered">
            <thead>
            <tr>
                <th width="5%"><span>ID</span></th>
                <th width="15%"><span>车型</span></th>
                <th width="15%"><span>金融产品</span></th>
                <th width="10%"><span>期数</span></th>
                <th width="15%"><span>首付</span></th>
                <th width="15%"><span>月供</span></th>
                <th width="15%"><span>服务费</span></th>
                <th width=""><span>操作</span></th>
            </tr>
            </thead>
            <tbody>
                <template v-for="(v,i) in lists">
                    <tr >
                        <td>{{v.id}}</td>
                        <td>{{v.car}}</td>
                        <td>{{v.fin_name}}</td>
                        <td>{{v.num}}</td>
                        <td>{{v.first_pay}}</td>
                        <td>{{v.month_pay}}</td>
                        <td>{{v.srv_pay}}</td>
                        <td>
                            <a href="javascript:void(0);" class="am-btn am-btn-primary am-btn-xs"
                                :data-modal="'/auto/finance/get?id='+v.id" :data-title="v.title">编辑</a>
                            <a :data-update="v.id" data-action="/auto/finance/edit_status" class="am-btn am-btn-danger am-btn-xs"
                               data-field="status" data-value="0" v-if="1==v.status">关闭</a>
                            <a :data-update="v.id" data-action="/auto/finance/edit_status" class="am-btn am-btn-success am-btn-xs"
                               data-field="status" data-value="1" v-if="0==v.status">开启</a>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
    <div class="coms-table-ft clearfix">
        <div class="coms-pagination fr mr20">
            <?php page_view($pager) ?>
        </div>
    </div>
</div>
<script>
    var vue_obj;
    var loading = 0;
    $(function(){
        vue_obj = new Vue({
            el: '.coms-table-wrap',
            data: {
                params:[],
                lists:[],
                statusAry:[],
                seryAry:[],
                brandAry:[],
                attrvAry:[],
                attrcorAry: [],//车身颜色选项
            },
            mounted:function() {
                var vm = this;
                var lists = [];
                lists = <?=json_encode($lists)?>;
                vm.params = <?=json_encode($params)?>;
                vm.statusAry = <?=json_encode($statusAry)?>;
                vm.lists = lists;

                vm.init_brands();
            },
            methods:{
                init_brands:function(){
                    var vm = this;
                    $.ajax({
                        url: '/auto/brand/json_lists',
                        type: 'post',
                        dataType: 'json',
                        data: {status:1},
                        beforeSend: function () {},
                        success: function (data) {
                            if (1 == data.code) {
                                vm.brandAry = data.data.list;
                            }
                        },
                        complete: function () {}
                    });
                },
            },
            watch: {
                'params.brand_id':function(nv, ov){
                    var vm = this;
                    vm.seryAry = {};
                    if(nv > 0){
                        $.ajax({
                            url: '/auto/series/json_lists',
                            type: 'post',
                            dataType: 'json',
                            data: {brand_id:nv},
                            beforeSend: function () {},
                            success: function (data) {
                                if (1 == data.code) {
                                    var lists = data.data.list;
                                    var seryAry = {};
                                    for (var i in lists){
                                        var row = lists[i];
                                        seryAry[row.id] = row.name;
                                    }
                                    vm.seryAry = lists;
                                    if(vm.params.s_id>0 && undefined == seryAry[vm.params.s_id]){
                                        vm.params.s_id = '';
                                    }
                                }
                            },
                            complete: function () {
                                loading = 0;
                                layer.closeAll('loading');
                            }
                        });
                    } else {
                        vm.params.s_id = '';
                    }
                },
                'params.s_id':function(nv, ov){
                    var vm = this;
                    if (nv > 0) {
                        //车身颜色
                        $.ajax({
                            type: 'post',
                            url: '/auto/attr/json_lists',
                            dataType: 'json',
                            data: {
                                s_id: nv,
                                status: 1,
                                type: 0
                            },
                            success: function (response) {
                                if (response.code == 1) {
                                    vm.attrcorAry = response.data.list;
                                }
                            }
                        });
                        //型号
                        $.ajax({
                            type: 'post',
                            url: '/auto/attr/json_lists',
                            dataType: 'json',
                            data: {
                                s_id: nv,
                                status: 1,
                                type: 1
                            },
                            success: function (response) {
                                if (response.code == 1) {
                                    vm.attrvAry = response.data.list;
                                }
                            }
                        });
                    } else {
                        vm.attrcorAry = [];
                        vm.attrvAry = [];
                        vm.params.cor_id = '';
                        vm.params.v_id = '';
                    }
                }
            }
        });

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