修改列表页面

修改筛选条件

一. 实现本表的name字段模糊匹配搜索

1. 修改模板:只需要修改input标签属性v-model绑定的键即可

<template scope="props" slot="sizer-where">
  <div class="input-group input-group-sm" style="width:165px;">
     <input class="form-control" v-model="props.where['id']" placeholder="请输入关键字" type="text">
  </div>
</template>

改成:

  <template scope="props" slot="sizer-where">
                <el-date-picker
                        style="width: 110px"
                        :editable="false"
                        v-model="props.where['updated_at'][0]"
                        :format="'yyyy-MM-dd 00:00:00'"
                        size="small"
                        :clearable="true"
                        @change="props.changeDate(props.where['updated_at'],0,arguments[0])"
                        placeholder="修改时间开始">
                </el-date-picker>
                <el-date-picker
                        style="width: 110px"
                        :editable="false"
                        v-model="props.where['updated_at'][1]"
                        size="small"
                        :clearable="true"
                        :format="'yyyy-MM-dd 23:59:59'"
                        @change="props.changeDate(props.where['updated_at'],1,arguments[0])"
                        placeholder="修改时间结束">
                </el-date-picker>
                <select class="form-control input-sm" v-model="props.where['method']">
                    <option value="">请求方式</option>
                    <option v-for="(value,index) in maps['method']" :value="index">{{value}}</option>
                </select>
                <select class="form-control input-sm" v-model="props.where['is_page']">
                    <option value="">是否为页面</option>
                    <option v-for="(value,index) in maps['is_page']" :value="index">{{value}}</option>
                </select>
                <div class="input-group input-group-sm" style="width:165px;">
                    <input class="form-control" v-model="props.where['name']" placeholder="请输入关键字" type="text">
                </div>
            </template>

1. 修改控制器:在创建出来的TestController控制器中指定sizer属性对应的筛选条件即可

    protected $sizer = [
        'name'=>'like',
        'method'=>'&',
        'is_page'=>'=',
        'updated_at'=>[
            '>=',
            '<='
        ]
    ];

3.最后编译一下模板cmd中执行

cnpm run production

完毕

二. 实现在关联表user中的字段name模糊匹配搜索

1. 修改模板:只需要修改input标签属性v-model绑定的键即可

<template scope="props" slot="sizer-where">
  <div class="input-group input-group-sm" style="width:165px;">
     <input class="form-control" v-model="props.where['id']" placeholder="请输入关键字" type="text">
  </div>
</template>

改成:

<template scope="props" slot="sizer-where">
  <div class="input-group input-group-sm" style="width:165px;">
     <input class="form-control" v-model="props.where['user.name']" placeholder="请输入关键字" type="text">
  </div>
</template>

1. 修改控制器:在创建出来的TestController控制器中指定指定sizer属性对应的筛选条件即可

    protected $sizer = [
        'user.name'=>'like'
    ];

3.最后编译一下模板cmd中执行

cnpm run production

筛选查询关联表的字段使用"."拼接即可 完毕

修改列表展示

一. 将关联表数据字段在页面展现

在控制器中的showIndexFields属性上指定需要从数据库查询的字段

    /**
     * Index页面字段名称显示
     * @var array
     */
    public $showIndexFields=[
        'id','user_id','name','icon','method','month','color','num','parent_id','created_at',
        'user'=>['id','name'],
        'parent'=>['id','name']
    ];

二. 修改需要显示的模板

我们这里只需要注释掉不需要展示的字段即可;

关联表的字段显示填写"user.name"(关联模型.字段名);

修改该列title只需将对应的name属性修改即可:"用户ID"修改成"用户名称";

目前的排序规则只能支持本表的字段排序非本表字段需要修改order为false或者指定orderField属性为本表的某个字段;

<script>
    export default {
        components: {},
        data(){
            var data = this.$store.state;
            data.config = {
                dataUrl: data.configUrl.listUrl, //数据获取地址
                editUrl: data.configUrl.showUrl, //数据编辑页面
                destroyUrl: data.configUrl.destroyUrl, //删除数据地址
                exportUrl: data.configUrl.exportUrl,
                fields: {
                    //"id": {"name": "ID", "order": true},
                    "user.name": {"name": "用户名称", "order": true,orderField:'user_id'},
                    "name": {"name": "名称", "order": true},
                    //"email": {"name": "电子邮箱", "order": true},
                    "is_page": {"name": "是否为页面", "order": true},
                    "status": {"name": "状态", "order": true},
                    "icons": {"name": "图标", "order": true},
                    "method": {"name": "请求方式", "order": true},
                    //"date_at": {"name": "日期", "order": true},
                    "month_at": {"name": "月份", "order": true},
                    //"time": {"name": "时间选择器", "order": true},
                    //"time_picker": {"name": "时间到秒", "order": true},
                    "color": {"name": "颜色选择器", "order": true},
                    //"switch": {"name": "开关", "order": true},
                    //"slider": {"name": "滑块", "order": true},
                    //"rate": {"name": "评分星星", "order": true},
                    "num": {"name": "数字", "order": true},
                    //"description": {"name": "描述", "order": true},
                    //"img": {"name": "图片", "order": true},
                    //"ueditor": {"name": "百度编辑器", "order": true},
                    "parent.name": {"name": "父级", "order": true,orderField:'parent_id'},
                    //"created_at": {"name": "创建时间", "order": true},
                    "updated_at": {"name": "修改时间", "order": true}
                },
                operation: true //需要操作列
            };
            return data;
        },
        mounted() {

        },
        methods: {
            //修改数据源
            updateData: function (datas) {
                this.lists = datas;
            }
        }
    }
</script>

最后编译一下模板cmd中执行

cnpm run production

默认筛选项和默认排序直接在控制器设置

    /**
     * 默认排序
     * @var array
     */
    protected $orderDefault = [
        'created_at'=>'desc',
        'id'=>'asc'
    ];

    /**
     * 筛选条件默认值
     * @var array
     */
    protected $sizerDefault=[
        'is_page'=>1
    ];