test/resources/views/admin/flow/index.blade.php

@extends('admin/site/side_layout')
@section('header_extend')
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <style>
        .ul-content {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .ul-content li {
            padding: 20px 10px 10px;
            display: none;
        }

        .ul-content .active {
            display: block;
        }

        .my-table {
            margin-top: 10px;
            width: 100%;
        }

        .my-table tr {
            border: 1px solid #f1f1f1;
        }

        .my-table td {
            padding: 8px;
        }

        .operateAdd, .operateDel {
            font-weight: 600;
            cursor: pointer;
            text-align: center;
        }

        .mainStep {
            border: 1px solid #999;
            padding: 12px;
            margin-top: 20px;
        }

        .mainStepText {
            display: inline-block;
            width: 180px;
        }

        .dropdown {
            height: 34px;
            position: relative;
            top: -2px;
        }
    </style>
@endsection
@section('right')
    <ul class="nav nav-tabs">
        <li class="active"><a>流程</a></li>
        @if(in_array($authUser->role_id,[\App\Http\Models\Role::TYPE_MANAGE_LEADER]) || $authUser->is_super)
            <li><a href="/admin/flow-tpl/sites/{{$siteId}}">模板</a></li>
        @endif
    </ul>
    <ul class="ul-content">
        <li class="active">
            <form id="form">
                <main id="main">
                    @if($stageList->isEmpty())
                        <button type="button" class="btn btn-success" onclick="utils.initFlow()">根据模板初始化流程</button>
                    @endif

                    <button type="button" class="btn btn-success" onclick="utils.addMain()">新增步骤</button>
                    <button type="button" class="btn btn-info" onclick="utils.saveFlow()">保存</button>
                    <button type="button" class="btn btn-warning" onclick="utils.clearFlow()">清除</button>
                    <button type="button" class="btn btn-success" onclick="utils.flowReport()" style="margin-left:4px">
                        流程报表
                    </button>
                    <button type="button" class="btn btn-success" onclick="utils.deploy({{$siteId}})">网站部署</button>
                    <a onclick="utils.open()">{{$domain}}</a>
                    @foreach($stageList as $stage)
                        <div class="mainStep">
                            <h4 style="display: inline-block">建站步骤：
                                <input type="text" class="form-control mainStepText" name="step_title"
                                       value="{{$stage->title}}" data-id="{{$stage->id}}"></h4>
                            <h4 style="display: inline-block">预计时间：
                                <input type="text" class="form-control my-date" name="expected_date"
                                       value="{{$stage->expected_date??''}}"
                                       style="width: 110px;display: inline-block" onclick="utils.bindDate(this)"></h4>
                            <h4 style="display: inline-block">实际完成时间：
                                <input type="text" class="form-control my-date" name="complete_date"
                                       value="{{$stage->complete_date??''}}"
                                       style="width: 110px;display: inline-block" onclick="utils.bindDate(this)"></h4>
                            <h4 style="display: inline-block">逾期原因：
                                <select name="extension" id="extension" class="my-select" multiple
                                        data-container="body" data-live-search="true">
                                    <option value="1" @if(in_array(1,$stage->extension)) selected @endif>客户原因</option>
                                    <option value="2" @if(in_array(2,$stage->extension)) selected @endif>采编原因</option>
                                    <option value="3" @if(in_array(3,$stage->extension)) selected @endif>策划师原因</option>
                                    <option value="4" @if(in_array(4,$stage->extension)) selected @endif>设计原因</option>
                                    <option value="5" @if(in_array(5,$stage->extension)) selected @endif>项目经理原因</option>
                                    <option value="6" @if(in_array(6,$stage->extension)) selected @endif>其他原因</option>
                                </select>
                            </h4>
                            <a onclick="utils.addBig(this)">添加大流程</a>
                            <a onclick="utils.delMain(this)">删除步骤</a>
                            <div>
                                @foreach($stage->infoList as $info)
                                    <table class="my-table">
                                        <colgroup>
                                            <col style="width: 20%">
                                            <col style="width: 20%">
                                            <col style="width: 10%">
                                            <col style="width: 8%">
                                            <col style="width: 10%">
                                            <col style="width: 10%">
                                            <col style="width: 10%">
                                            <col style="width: 10%">
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <td>具体流程</td>
                                            <td>备注</td>
                                            <td>完成时间</td>
                                            <td>工时（小时）</td>
                                            <td>预计时间</td>
                                            <td>延误时间及原因</td>
                                            <td>
                                                对接人 预计时间:
                                                <input type="text" class="form-control my-date"
                                                       name="except_range_date"
                                                       value="{{$info->except_range_date}}" data-id="{{$info->id}}"
                                                       style="width: 110px;display: inline-block"
                                                       onclick="utils.bindDate(this)">
                                            </td>
                                            <td class="operateAdd">
                                                <a href="javascript:;" onclick="utils.add(this)">添加</a>
                                                <a href="javascript:" onclick="utils.delBig(this)">删除大流程</a>
                                            </td>
                                        </tr>
                                        </thead>
                                        <tbody class="connectedSortable">
                                        @foreach($info->detail_list as $item)
                                            <tr>
                                                <td><input type="text" class="form-control" name="flow_name"
                                                           value="{{$item['flow_name']??''}}"></td>
                                                <td><input type="text" class="form-control" name="flow_remark"
                                                           value="{{$item['flow_remark']??''}}"></td>
                                                <td><input type="text" class="form-control my-date"
                                                           onclick="utils.bindDate(this)" name="flow_done_date"
                                                           value="{{$item['flow_done_date']}}"></td>
                                                <td><input type="text" class="form-control" name="man_hour"
                                                           value="{{$item['man_hour']??''}}"></td>
                                                <td><input type="text" class="form-control my-date"
                                                           onclick="utils.bindDate(this)" name="flow_except_date"
                                                           value="{{$item['flow_except_date']??''}}"></td>
                                                <td><input type="text" class="form-control" name="reason"
                                                           value="{{$item['reason']??''}}"></td>
                                                <td>
                                                    @if(empty($item['duty_man']))
                                                        <select name="duty_user" class="my-select" multiple
                                                                data-container="body" data-live-search="true"
                                                                data-man="{{json_encode($item['duty_man']??[])}}">
                                                            @foreach($userList as $user)
                                                                <option value="{{$user['id']}}"
                                                                        @if(is_array($item['duty_user']??'') && in_array($user['id'],$item['duty_user'])) selected @endif>
                                                                    {{$user['nickname']}}
                                                                    【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    @else
                                                        <select name="duty_user" class="my-select" multiple
                                                                data-container="body" data-live-search="true"
                                                                data-man="{{json_encode($item['duty_man']??[])}}">
                                                            @foreach($userList as $user)
                                                                @if(!in_array($user['role_id'],$item['duty_man']??[])) @continue @endif
                                                                <option value="{{$user['id']}}"
                                                                        @if(is_array($item['duty_user']??'') && in_array($user['id'],$item['duty_user'])) selected @endif>
                                                                    {{$user['nickname']}}
                                                                    【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}
                                                                    】
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    @endif

                                                    <span style="font-weight: 600;">
                                                    @foreach($item['duty_man']??[] as $item)
                                                            {{\App\Http\Models\FlowInfoTpl::RoleScope[$item]??''}}
                                                        @endforeach
                                                    </span>
                                                </td>
                                                <td class="operateDel" onclick="utils.del(this)">删除</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                @endforeach

                            </div>
                        </div>
                    @endforeach
                </main>
            </form>

        </li>
        <li>123</li>

    </ul>
@endsection

@section('footer_extend')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script src="{{asset('js/jquery-ui-1.10.4.min.js')}}"></script>

    <script>
        $(function () {
            $('.my-select').selectpicker({
                liveSearch: true
            });
            $("tbody").sortable({
                connectWith: ".connectedSortable"
            }).disableSelection();
        });

        $(function () {
            $(".my-date").trigger('click'); //触发laydate绑定
            $('.my-select').selectpicker();
        });
        var utils = {
            flowReport: function () {
                window.open('/wap/{{base64_encode($siteId)}}/flow');
            },
            clearFlow: function () {
                layer.confirm('是否确认清除流程', {icon: 3, title: '提示'}, function (index) {
                    //do something

                    var ajaxConfig = {
                        url: '/admin/flow-clear/sites/{{$siteId}}',
                        type: 'delete',
                        success: function () {
                            window.location.reload();
                        }
                    };
                    tips.ajax(ajaxConfig);
                });

            },
            add: function (_this) {
                var rowspan = $(_this).parent().next().attr('rowspan');
                $(_this).parent().next().attr('rowspan', rowspan + 1)

                var str = ' <tr>\n' +
                    '                                <td><input type="text" class="form-control" name="flow_name"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="flow_remark"></td>\n' +
                    '                                <td><input type="text" class="form-control my-date" name="flow_done_date" onclick="utils.bindDate(this)"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="man_hour"></td>\n' +
                    '                                <td><input type="text" class="form-control my-date" name="flow_except_date" onclick="utils.bindDate(this)"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="reason"></td>\n' +
                    '                                <td>\n' +
                    '                                    <select name="duty_user" class="my-select" multiple data-container="body" data-live-search="true">\n' +
                    @foreach($userList as $user)
                        '                                        <option value="{{$user['id']}}"> {{$user['nickname']}}【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】 </option>' +
                    @endforeach
                        '                                    </select>\n' +
                    '                                </td>\n' +
                    '                                <td class="operateDel" onclick="utils.del(this)">删除</td>\n' +
                    '                            </tr>';
                $(_this).parent().parent().parent().next().append(str);
                $(".my-date").trigger('click');
                $('.my-select').selectpicker();
            },
            del: function (_this) {
                $(_this).parent().remove();
            },
            addBig: function (_this) {

                var str = '<table class="my-table">\n' +
                    '                            <colgroup>\n' +
                    '                                 <col style="width: 20%">\n' +
                    '                                 <col style="width: 20%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 8%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                            </colgroup>\n' +
                    '                            <thead>\n' +
                    '                            <tr>\n' +
                    '                                <td>具体流程</td>\n' +
                    '                                <td>备注</td>\n' +
                    '                                <td>完成时间</td>\n' +
                    '                                <td>工时（小时）</td>\n' +
                    '                                <td>预计时间</td>\n' +
                    '                                <td>延误时间及原因</td>\n' +
                    '                                <td>对接人 预计时间' +
                    '                                    <input type="text" class="form-control my-date" name="except_range_date"\n' +
                    '                                           style="width: 110px;display: inline-block" onclick="utils.bindDate(this)">' +
                    '                                </td>\n' +
                    '                                <td class="operateAdd">\n' +
                    '                                    <a href="javascript:;" onclick="utils.add(this)">添加</a>\n' +
                    '                                    <a href="javascript:" onclick="utils.delBig(this)">删除大流程</a>\n' +
                    '                                </td>\n' +
                    '                            </tr>\n' +
                    '                            </thead>\n' +
                    '                            <tbody>\n' +
                    '                            <tr>\n' +
                    '                                <td><input type="text" class="form-control" name="flow_name"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="flow_remark"></td>\n' +
                    '                                <td><input type="text" class="form-control my-date" name="flow_done_date" onclick="utils.bindDate(this)"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="man_hour"></td>\n' +
                    '                                <td><input type="text" class="form-control my-date" name="flow_except_date" onclick="utils.bindDate(this)"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="reason"></td>\n' +
                    '                                <td>\n' +
                    '                                    <select name="duty_user" class="my-select" multiple data-container="body" data-live-search="true">\n' +
                    @foreach($userList as $user)
                        '                                        <option value="{{$user['id']}}"> {{$user['nickname']}}【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】 </option>' +
                    @endforeach
                        '                                    </select>\n' +
                    '                                </td>\n' +
                    '                                <td class="operateDel" onclick="utils.del(this)">删除</td>\n' +
                    '                            </tr>\n' +
                    '                            </tbody>\n' +
                    '                        </table>';

                $(_this).next().next().append(str);
                $(".my-date").trigger('click');
                $('.my-select').selectpicker();
            },
            delBig: function (_this) {
                $(_this).parent().parent().parent().parent().remove()
            },
            delMain: function (_this) {
                $(_this).parent().remove()
            },
            addMain: function () {
                var str = ' <div class="mainStep">\n' +
                    '                           <h4 style="display: inline-block">建站步骤：' +
                    '                               <input type="text" class="form-control mainStepText"\n' +
                    '                                       name="step_title" data-id="0"></h4>\n' +
                    '                            <h4 style="display: inline-block">预计时间：\n' +
                    '                                <input type="text" class="form-control my-date" name="expected_date" value=""\n' +
                    '                                       style="width: 110px;display: inline-block" onclick="utils.bindDate(this)"></h4>\n' +
                    '                            <h4 style="display: inline-block">实际完成时间：\n' +
                    '                                <input type="text" class="form-control my-date" name="complete_date" value=""\n' +
                    '                                       style="width: 110px;display: inline-block" onclick="utils.bindDate(this)"></h4>\n' +
                    '                             <h4 style="display: inline-block">逾期原因：\n' +
                    '                                <select name="extension" id="extension" class="my-select" multiple\n' +
                    '                                        data-container="body" data-live-search="true">\n' +
                    '                                    <option value="1" >客户原因</option>\n' +
                    '                                    <option value="2" >采编原因</option>\n' +
                    '                                    <option value="3" >策划师原因</option>\n' +
                    '                                    <option value="4" >设计原因</option>\n' +
                    '                                    <option value="5" >项目经理原因</option>\n' +
                    '                                    <option value="6" >其他原因</option>\n' +
                    '                                </select>\n' +
                    '                            </h4>' +
                    '                    <a onclick="utils.addBig(this)">添加大流程</a>\n' +
                    '                    <a onclick="utils.delMain(this)">删除步骤</a>\n' +
                    '                    <div>\n' +
                    '                        <table class="my-table">\n' +
                    '                            <colgroup>\n' +
                    '                                 <col style="width: 20%">\n' +
                    '                                 <col style="width: 20%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 8%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                                 <col style="width: 10%">\n' +
                    '                            </colgroup>\n' +
                    '                            <thead>\n' +
                    '                            <tr>\n' +
                    '                                <td>具体流程</td>\n' +
                    '                                <td>备注</td>\n' +
                    '                                <td>完成时间</td>\n' +
                    '                                <td>工时（小时）</td>\n' +
                    '                                <td>预计时间</td>\n' +
                    '                                <td>延误时间及原因</td>\n' +
                    '                                <td>对接人 预计时间' +
                    '                                    <input type="text" class="form-control my-date" name="except_range_date"\n' +
                    '                                           style="width: 110px;display: inline-block" onclick="utils.bindDate(this)">' +
                    '                                </td>\n' +
                    '                                <td class="operateAdd">\n' +
                    '                                    <a href="javascript:;" onclick="utils.add(this)">添加</a>\n' +
                    '                                    <a href="javascript:" onclick="utils.delBig(this)">删除大流程</a>\n' +
                    '                                </td>\n' +
                    '                            </tr>\n' +
                    '                            </thead>\n' +
                    '                            <tbody>\n' +
                    '                            <tr>\n' +
                    '                                <td><input type="text" class="form-control" name="flow_name"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="flow_remark"></td>\n' +
                    '                                <td><input type="text" class="form-control my-date" name="flow_done_date" onclick="utils.bindDate(this)"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="man_hour"></td>\n' +
                    '                                <td><input type="text" class="form-control my-date" name="flow_except_date" onclick="utils.bindDate(this)"></td>\n' +
                    '                                <td><input type="text" class="form-control" name="reason"></td>\n' +
                    '                                <td>\n' +
                    '                                    <select name="duty_user" class="my-select" multiple data-container="body" data-live-search="true">\n' +
                    @foreach($userList as $user)
                        '                                        <option value="{{$user['id']}}">{{$user['nickname']}} 【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】 </option>' +
                    @endforeach
                        '                                    </select>\n' +
                    '                                </td>\n' +
                    '                                <td class="operateDel" onclick="utils.del(this)">删除</td>\n' +
                    '                            </tr>\n' +
                    '                            </tbody>\n' +
                    '                        </table>\n' +
                    '\n' +
                    '                    </div>\n' +
                    '                </div>';
                $("#main").append(str);
                $(".my-date").trigger('click');
                $('.my-select').selectpicker();
            },
            saveFlow: function () {

                var flowAll = [];
                var errMsg = '';
                $(".mainStep").each(function () {

                    var step_title_obj = $(this).find("[name=step_title]");
                    var step_title = step_title_obj.val();
                    var stepId = step_title_obj.data('id');

                    var expected_date_obj = $(this).find("[name=expected_date]");
                    var expected_date = expected_date_obj.val();

                    var complete_date_obj = $(this).find("[name=complete_date]");
                    var complete_date = complete_date_obj.val();

                    var extension_obj = $(this).find("[name=extension]");
                    var extension = extension_obj.val();

                    var stepData = {
                        step_title: step_title,
                        step_id: stepId,
                        expected_date: expected_date,
                        complete_date: complete_date,
                        extension: extension,
                        children: []
                    };

                    if (!step_title) {
                        errMsg += '建站步骤不能为空<br>';
                    }
                    $(this).find("table").each(function () {

                        var exceptObj = $(this).find("[name=except_range_date]");
                        var except_range_date = exceptObj.val();
                        if (!except_range_date) {
                            errMsg += '预计时间不能为空<br>';
                        }
                        var flowData = {
                            except_range_date: except_range_date,
                            info_id: exceptObj.data('id'),
                            children: []
                        };

                        $(this).find("tbody tr").each(function () {
                            var flow_name = $(this).find("[name=flow_name]").val();
                            var flow_remark = $(this).find("[name=flow_remark]").val();
                            var flow_done_date = $(this).find("[name=flow_done_date]").val();
                            var man_hour = $(this).find("[name=man_hour]").val();
                            var flow_except_date = $(this).find("[name=flow_except_date]").val();
                            var reason = $(this).find("[name=reason]").val();
                            var duty_user = $(this).find("[name=duty_user]").val();
                            var duty_man = $(this).find("[name=duty_user]").data('man');
                            if (!duty_man) {
                                duty_man = [];
                            }
                            if (!duty_user) {
                                duty_user = [];
                            }

                            if (!flow_name) {
                                errMsg += '具体流程不能为空<br>';
                            }

                            var temp = {
                                flow_name: flow_name,
                                flow_remark: flow_remark,
                                flow_done_date: flow_done_date,
                                man_hour: man_hour,
                                flow_except_date: flow_except_date,
                                reason: reason,
                                duty_user: duty_user,
                                duty_man: duty_man
                            };

                            flowData.children.push(temp);

                        });
                        stepData.children.push(flowData);
                    });
                    flowAll.push(stepData);
                });


                if (errMsg !== '') {
                    layer.alert(errMsg, {icon: 5});
                    return;
                }

                var ajaxConfig = {
                    url: '/admin/flow-save/sites/{{$siteId}}',
                    type: 'post',
                    data: {
                        dataList: flowAll
                    },
                    success: function () {
                        layer.msg('操作成功', {
                            icon: 1,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            window.location.reload()
                        });
                    }
                };
                tips.ajax(ajaxConfig);

            },
            initFlow: function () {

                var ajaxConfig = {
                    url: '/admin/flow-init/sites/{{$siteId}}',
                    type: 'post',
                    success: function () {
                        window.location.reload();
                    }
                };
                tips.ajax(ajaxConfig);
            },
            bindDate: function (that) {
                var routeTime = {
                    type: 'date',
                    elem: that
                };
                laydate.render(routeTime);
            },
            deploy: function (siteId) { //部署

                layer.confirm('是否确认部署?', {icon: 3, title: '是否确认部署'}, function () {
                    var config = {
                        type: 'GET',
                        url: '/admin/process/deploy/' + siteId
                    };
                    config.success = function (result) {
                        layer.msg(result.message, {icon: 6, time: 1500}, function () {
                            window.location.reload();
                        });
                    };
                    tips.ajax(config);
                });
            },
            open: function () {
                window.open("http://{{$domain}}");
            }
        };

    </script>
@endsection