fastadmin追加开始结束按钮,并实现功能

一、增加按钮

目录：public/assets/js/backend/pim/test.js

样式：

 代码（核心部分buttons:[ ]）：

{field: 'operate', title: __('Operate'), table: table,
     buttons:[
               {
                  name:'start',//名称开始按钮
                  text:'',//文本
                  classname:'btn btn-xs btn-info btn-ajax btn-restoreit',//按钮样式
                  icon:'fa fa-play',//图标
                  url:'pim/test/start',//请求的方法
                  confirm:'是否开始？',//确认
                  refresh:true,//一开始界面需要刷新
                },
                {
                  name:'finish',//名称结束按钮
                  text:'',//文本
                  classname:'btn btn-xs btn-danger btn-ajax btn-restoreit',//按钮样式
                  icon:'fa fa-stop',//图标
                  url:'pim/test/finish',//请求的方法
                  confirm:'是否结束？',//确认
                  refresh:true,//一开始界面需要刷新
                },
             ],
     //formatter: Table.api.formatter.operate,
     formatter:function(value,row,index){
         var that = $.extend({},this);//将this赋值给that,
         var table = $(that.table).clone(true);//通过that去引用table中的信息
         $(table).data("operate-edit",null);//隐藏操作中的编辑按钮，
         $(table).data("operate-del",null);//隐藏操作中的删除按钮，
         that.table = table;
         return Table.api.formatter.operate.call(that,value,row,index);//展示信息
     }
},

按钮样式：

1、大小：

btn-xs：特别小按钮

btn-sm：小按钮

btn-lg：大按钮

2、颜色

btn-info：一般信息（蓝色）

btn-danger：危险信息（红色）

btn-default：默认样式（白色）

btn-primary：首选项（深蓝）

btn-success：成功（绿色）

btn-warning：警告（黄色）

3、弹出窗口、ajax和新选项卡

btn-dialog：弹窗

btn-ajax：ajax请求

btn-addtabs：新选项卡

图标样式

地址：

https://fontawesome.dashgame.com/

根据icon:'fa fa-XXX'进行图标设置

例如：图库中的

 在代码中需写

二、fastadmin开始结束按钮功能实现

 （一）在新增时为开始结束按钮设置初始值

位置：application/admin/view/pim/test/add.html

更改value的值为固定值，这里是value="{:date('2022-10-10 00:00:00')}"

（这里假设startdate为开始时间，activitytime为结束时间）

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Startdate')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-startdate" class="form-control datetimepicker" data-date-format="YYYY-MM-DD" data-use-current="true" name="row[startdate]" type="text" value="{:date('2022-10-10 00:00:00')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Activitytime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-activitytime" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[activitytime]" type="text" value="{:date('2022-10-10 00:00:00')}">
        </div>
    </div>

（二）给表格单元格中的开始时间与结束时间设置

位置：public/assets/js/backend/pim/test.js

根据formatter方法，去判断每行的开始时间与结束时间是否为设定的固定值，如果是将其汉字“未开始”/“未结束”，这里是通过lang库进行的转换

{
    field: 'startdate', title: __('Startdate'), operate:'RANGE', addclass:'datetimerange', autocomplete:false,
        formatter:function(value,row,index){
            if(row.startdate=='2022-10-10  00:00:00'){
                return __('willstart');//相当于新建立的开始时间都表示为“未开始”
            }
            else{
                return row.startdate;//当开始时间不是设定的时间，就表示为当前时间值
            }
       }
},
{
    field: 'activitytime', title: __('Activitytime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false,
        formatter:function(value,row,index){
            if(row.activitytime=='2022-10-10 00:00:00'){
                return __('willend');//相当于新建立的开始时间都表示为“未结束”
            }
            else{
                return row.activitytime;//当结束时间不是设定的时间，就表示为当前时间值
            }
        }
}

 语言转换位置：application/admin/lang/zh-cn/pim/test.php

'willstart'           => '未开始',
'willend'             => '未结束'

（三）给按钮添加方法

位置：application/admin/controller/pim/test.php

在代码中之前设置过限制数据权限功能

 //数据限制除了管理员，其余用户只能看见自己的信息
 protected $dataLimit = true; //默认基类中为false，表示不启用，可额外使用auth和personal两个值
 protected $dataLimitField ="admin_id";//数据关联字段,当前控制器对应的模型表中必须存在该字段

开始方法

//开始事务需要获取到参数
   public function start($ids=null)
   {
        //step1从数据库取得该条数据
        $row = $this->model->get($ids);//用this去操作对应的model，按照参数ids去get数据
        if(!$row){
            $this->error(__('No results where found'));//如果行数据不存在，返回No results where found在语言库中对应的信息
        }
         //step2检查是否有数据操作权限
        $adminIds = $this->getDataLimitAdminIds();//查询能操作这个数据的所有用户的列表
        if(is_array($adminIds)){//判断是不是数组
            if(!in_array($row[$this->dataLimitField],$adminIds)){//判断当前用户是不是在数组中in_array(要在数组搜索的值,搜索的数组)
                 $this->error(__('You have no permission'));//如果行数据不存在，返回You have no permission在语言库中对应的信息
            }
        }
          //step3更新数据库
        if($this->request->isPost()){//使用post传参，表明数据库的修改
            $row->status=1;//将数据库中该行栏位status更改为1
            $row->startdate=date('Y-m-d H:i:s');//将数据库中该行栏位startdate更改为当前时间
            $row->save();//对修改的数据进行保存
        }
        //step4返回处理结果
        $rst = array(
                'code' => 1,
                'msg'  => "事务成功开始",//消息提示
                'data' => $row,//返回的行数据
                'url'  => '.',//当前页面跳转
                'wait' =>3//消息提示的时间
            );
        return json($rst);//输出数组信息
        
    }

结束方法

public function finish($ids=null){
        //step1从数据库取得该条数据
        $row = $this->model->get($ids);
        if(!$row){
            $this->error(__('No results where found'));
        }
        //step2检查是否有数据操作权限
        $adminIds = $this->getDataLimitAdminIds();//查询能操作这个数据的所有用户的列表
        if(is_array($adminIds)) {
            if(!in_array($row[$this->dataLimitField],$adminIds)){
                $this->error(__('You have no permission'));//如果行数据不存在，返回You have no permission在语言库中对应的信息
            }
        }
        //step3更新数据库
        if($this->request->isPost()){//使用post传参，表明数据库的修改
            $row->status=2;
            $row->activitytime=date('Y-m-d H:i:s');
            $row->save();
        }
        //step4返回处理结果
        $rst = array(
                'code' => 1,
                'msg'  => "事务成功结束",
                'data' => $row,
                'url'  => '.',
                'wait' =>3
            );
        return json($rst);//输出数组信息s
     }

（四）完善功能

当状态为0（“未开始”），只显示“开始”按钮

当状态为1（“进行中”），只显示“结束”按钮

当状态为2（“已完成”），“开始”“结束”按钮均不显示

位置：public/assets/js/backend/pim/test.js

修改隐藏按钮的操作，见formatter中的操作

{field: 'operate', title: __('Operate'), table: table,
     buttons:[
                {
                   name:'start',//名称开始按钮
                   text:'',//文本
                   classname:'btn btn-xs btn-info btn-ajax btn-restoreit',
                   icon:'fa fa-play',//图标
                   url:'pim/test/start',
                   confirm:'是否开始？',//确认
                   refresh:true,//一开始界面需要刷新
                 },
                 {
                   name:'finish',//名称结束按钮
                   text:'',//文本
                   classname:'btn btn-xs btn-danger btn-ajax btn-restoreit',
                   icon:'fa fa-stop',//图标
                   url:'pim/test/finish',//请求的方法
                   confirm:'是否结束？',//确认
                   refresh:true,//一开始界面需要刷新
                 },
              ],
      events: Table.api.events.operate, 
      //formatter: Table.api.formatter.operate,
      formatter:function(value,row,index){
          var that = $.extend({},this);//将this赋值给that,
          var table = $(that.table).clone(true);//通过that去引用table中的信息
          if(row.status=='0'){//如果状态为0表示未开始
                 $(table).data("operate-finish",null);//隐藏结束按钮
          }
          else if(row.status=='1'){//如果状态为1表示进行中
                 $(table).data("operate-start",null);//隐藏开始按钮
          }
          else if(row.status=='2'){//如果状态为2表示已结束
                 $(table).data("operate-finish",null);//隐藏结束按钮
                 $(table).data("operate-start",null);//隐藏开始按钮
          }
          $(table).data("operate-edit",null);//隐藏操作中的编辑按钮，
          $(table).data("operate-del",null);//隐藏操作中的删除按钮，
          that.table = table;
          return Table.api.formatter.operate.call(that,value,row,index);//展示信息
      }
},

（五）进行页面的功能权限设置

位置：application/admin/view/pim/test/index.html

在权限判断中加入对开始，结束的判断

 <!--权限判断-->
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
       data-operate-edit="{:$auth->check('pim/test/edit')}"
       data-operate-del="{:$auth->check('pim/test/del')}"
       data-operate-start="{:$auth->check('pim/test/start')}"
       data-operate-finish="{:$auth->check('pim/test/finish')}"
       width="100%">
</table>

（六）对权限进行设置

由于现在的权限是不包含start与finish

需要重新建立菜单，新增角色权限

覆盖现有菜单

 进入权限管理，新增权限