【fastadmin】表格联动实现业务员数据预览与分配

最新推荐文章于 2024-09-12 16:43:23 发布

hj1043

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量420

点赞数 8

分类专栏： fastadmin PHP 文章标签：前端 javascript php

本文链接：https://blog.csdn.net/hj1043/article/details/142124102

版权

fastadmin 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

PHP

18 篇文章 0 订阅

订阅专栏

实现的功能：

1、设置当前展会：关联本展会的业务员及业务数据（类似多级联动的一级），以弹窗形式出现，选择展会后刷新父窗口；

2、表格1（业务员列表）与表格2（业务数据列表）之间的联动；

“设置当前展会”实现代码

exhibitionindex控制器

    // 设置当前展会
    public function exhibitionindex(){
        if (false === $this->request->isAjax()) {
            return $this->view->fetch('exhibition_index');
        }
        [$where, $sort, $order, $offset, $limit] = $this->buildparams();
        $list = $this->zlfdb()->table('Exhibition')
            ->where($where)
            ->order($sort, $order)
            ->paginate($limit);
        $result = ['total' => $list->total(), 'rows' => $list->items()];
        return json($result);
    }

exhibitionindex前端页面

<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('zlf/actor/edit')}"
                           data-operate-del="{:$auth->check('zlf/actor/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

exhibitionindex前端页面 js

        exhibitionindex: () => {
                    // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'zlf/actor/exhibitionindex' + location.search,
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'ExhID',
                sortName: 'ExhID',
                fixedColumns: true,
                fixedRightNumber: 1,
                search: false,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'ExhID', title: __('展会ID'),visible:false},
                        {field: 'exhsName', title: __('展会简称'),align:'left'},
                        {field: 'exhName', title: __('展会名称'),align:'left'},
                        {field: 'exhcity', title: __('举办城市'), operate: 'LIKE',visible:false, table: table, class: 'autocontent', formatter: Table.api.formatter.content},
                        {field: 'exhbtime', title: __('开始时间'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime,datetimeFormat:'YYYY-MM-DD'},
                        {field: 'exhetime', title: __('结束时间'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.datetime,datetimeFormat:'YYYY-MM-DD'},
                        //操作栏,默认有编辑、删除或排序按钮,可自定义配置buttons来扩展按钮
                        {
                            field: 'operate',
                            width: "150px",
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'detail',
                                    title: __('数据分配'),
                                    text:'设为当前展会',
                                    extend:'data-area=\'["80%","80%"]\'',
                                    classname: 'btn btn-xs btn-primary btn-click',
                                    icon: 'fa fa-list',
                                    click:function(value, row, index){
                                        // const exhibitionInfo = row
                                        localStorage.setItem('currentExhibition',JSON.stringify(row))
                                        Layer.msg('欧克') 
                                        parent.layer.closeAll();
                                        parent.location.reload();
                                    }
                                },
                            ],
                            formatter: Table.api.formatter.operate
                        },
                    ]
                ]
            });
            // 为表格绑定事件
            Table.api.bindevent(table);
        },

“表格联动”实现代码

agent_data_assign控制器

    // 展商数据分配
    public function agent_data_assign(){
        $ExhID = $this->request->param('ExhID');
        if (false === $this->request->isAjax()) {
            return $this->view->fetch('agent_data_assign');
        }
        
        [$where, $sort, $order, $offset, $limit] = $this->buildparams();
        $list = $this->zlfdb->table('Actor')
                    ->where($where)
                    ->where('ExhID',intval($ExhID))
                    ->field('ExhID,AtrName,AtrAddress,AtrZipCode,AtrType,AtrFiStatus,AtrSaleDate,AtrSaleName,AtrSaleID,AtrCreateTime,AtrSysState,ComAddress,ComZipCode,AtrCountry,AtrCity,ComID,AtrDataSource')
                    ->paginate($limit);
        $result = ['total' => $list->total(), 'rows' => $list->items()];
        return json($result);
    }
    
    // 业务员列表
    public function agent_list(){
        $ExhID = $this->request->param('ExhID');
        [$where, $sort, $order, $offset, $limit] = $this->buildparams();
        $list = $this->zlfdb->table('Actor')
                    ->where($where)
                    ->where('ExhID',intval($ExhID))
                    ->field('AtrSaleID,AtrSaleName,count(*) as jls ')
                    ->group('AtrSaleID,AtrSaleName')
                    // ->paginate($limit);
                    ->select();
        $result = ['total' =>count($list), 'rows' => $list];
        return json($result);
    }
    
    // 批量分配
    public function data_assign($ids){
        // AtrID
        $ids = $ids ?: $this->request->get("ids");
        $ExhID = $this->request->param('ExhID');
        if (empty($ids)) {
            $this->error(__('Parameter %s can not be empty', 'ids'));
        }
     
        if (false === $this->request->isAjax()) {
            $this->view->assign('ids',$ids);
            $this->view->assign('ExhID',$ExhID);
            return $this->view->fetch('assign');
        }
        $params = $this->request->post('row/a');
        if (empty($params)) {
            $this->error(__('Parameter %s can not be empty', ''));
        }

        // 查找公司信息
        $companys = $this->zlfdb->table('Actor')
                    ->field('ExhID,AtrName,AtrAddress,AtrZipCode,AtrType,AtrFiStatus,AtrSaleDate,AtrSaleName,AtrSaleID,AtrCreateTime,AtrSysState,ComAddress,ComZipCode,AtrCountry,AtrCity,ComID,AtrDataSource')
            ->where('AtrSaleID','in',explode(',',$params['ids']))
            ->where('ExhID',intval($params['ExhID']))
            ->select();
            
        foreach ($companys as &$val){
            $val['ExhID'] = $params['ExhID2'];
            $val['AtrFiStatus'] = '潜在展商';
            $val['AtrDataSource'] = '分配新';
            $val['AtrCreateTime'] = date('Y-m-d H:i:s',time());
            unset($val['ROW_NUMBER']);
        }
        // 插入到数据库
        Db::startTrans();
        try {
            $result = $this->zlfdb->table('Actor')->insertAll($companys);
            Db::commit();
        } catch (ValidateException|PDOException|Exception $e) {
            Db::rollback();
            $this->error($e->getMessage());
        }
        if ($result === false) {
            $this->error(__('No rows were inserted'));
        }
        $this->success();
    }

agent_data_assign前端页面

<style type="text/css">
    .currentExh{
        font-weight: 600;
        color: blue;
        width: 100%;
        min-height: 50px;
    }
</style>

<div class="currentExh">
     <a href="javascript:;" class="btn-setCurrentExhibition">设置当前展会：</a>
    <span id="currentExhibition" style="color:#1797C0;margin-left: 2%;">请设置当前展会！</span>
</div>    
<div class="panel panel-default panel-intro">
    <div>
        <div id="toolbar" class="toolbar">
            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
        </div>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                   
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('zlf/actor/edit')}"
                           data-operate-del="{:$auth->check('zlf/actor/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

agent_data_assign js部分

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

     // 检查是否设置当前展会
            const currentExhibition = localStorage.getItem('currentExhibition')
            if(currentExhibition == null || currentExhibition == undefined){
                Fast.api.open("zlf/actor/exhibitionindex", '设置当前展会',{
                    area:['80%', '60%'],
                });
                // return false
            }
            const e = JSON.parse(currentExhibition)
            
            $("#currentExhibition").text(e.exhsName)
            
        //监听设置当前展会
        $(document).on("click", ".btn-setCurrentExhibition", function () {
             Fast.api.open("zlf/actor/exhibitionindex", '设置当前展会',{
                area:['80%', '60%'],
            });
        })
           
            
    var Controller = {
        agent_data_assign: function () {
            // 初始化表格参数配置
            Table.api.init();
            this.table.first();
            this.table.second();
        },
        table: {
            first: function () {
                // 表格1
                var table1 = $("#table1");
                table1.bootstrapTable({
                    url: 'zlf/agent/agent_list?ExhID='+e.ExhID + location.search,
                    toolbar: '#toolbar1',
                    sortName: 'AtrSaleID',
                    pk:'AtrSaleID',
                    search: false,
                    pagination: false,
                    columns: [
                        [
                            { checkbox: true,},
                            {field: 'AtrSaleID', title: 'ID',visible:false},
                            {field: 'AtrSaleName', title: __('Nickname')},
                            {field: 'jls', title: __('数据量')},
                            {
                                field: 'operate', title: __('Operate'), table: table1, events: Table.api.events.operate, buttons: [
                                    {
                                        name: 'log',
                                        title: '数据列表',
                                        text: '数据列表',
                                        icon: 'fa fa-list',
                                        classname: 'btn btn-primary btn-xs btn-click',
                                        click: function (e, data) {
                                            $("#myTabContent2 .form-commonsearch input[name='AtrSaleName']").val(data.AtrSaleName);
                                            $("#myTabContent2 .btn-refresh").trigger("click");
                                        }
                                    }
                                ], formatter: Table.api.formatter.operate
                            }
                        ]
                    ]
                });

                //批量分配
                $(document).on("click", ".btn-assign", function () {
                    var ids = Table.api.selectedids(table1);//获取选中列的id
                    console.log(ids)
                    if(ids.length==0){
                        layer.alert("最少选择一条记录操作");
                        return false;
                    }
                    Fast.api.open("zlf/agent/data_assign/ExhID/"+e.ExhID+"?ids="+ids.join(','), '批量分配',{area:['600px', '400px']});
                })
                // 为表格1绑定事件
                Table.api.bindevent(table1);
            },
            second: function () {
                // 表格2
                var table2 = $("#table2");
                table2.bootstrapTable({
                    url:  'zlf/agent/agent_data_assign?ExhID='+e.ExhID + location.search,
                    extend: {
                        index_url: '',
                        add_url: '',
                        edit_url: '',
                        del_url: '',
                        multi_url: '',
                        table: '',
                    },
                    toolbar: '#toolbar2',
                    sortName: 'id',
                    search: false,
                    columns: [
                        [
                             {checkbox: true},
                        {field: 'ExhID', title: __('展会ID'),visible:false},
                        {field: 'AtrSaleName', title: __('业务员')},
                        {field: 'AtrName', title: __('展商名称'),align:'left'},
                        // {field: 'AtrAddress', title: __('展商地址'),align:'left'},
                        // {field: 'AtrZipCode', title: __('邮编')},
                        // {field: 'AtrType', title: __('展商类型')},
                        {field: 'AtrFiStatus', title: __('展商状态')},
                        // {field: 'AtrSaleID', title: __('业务员ID')},
                        // {field: 'AtrSysState', title: __('展商类型')},
                        // {field: 'ComAddress', title: __('公司地址')},
                        // {field: 'ComZipCode', title: __('公司又变')},
                        // {field: 'AtrCountry', title: __('国家')},
                        // {field: 'AtrCity', title: __('城市')},
                        // {field: 'ComID', title: __('公司id')},
                        {field: 'AtrDataSource', title: __('来源')},
                        ]
                    ]
                });

                // 为表格2绑定事件
                Table.api.bindevent(table2);
            }
        },
         data_assign: function () {
                Form.api.bindevent($("form[role=form]"));
        },
    };
    return Controller;
});