test/resources/views/admin/flow/tpl.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;
        }
    </style>
@endsection

@section('right')
    <ul class="nav nav-tabs">
        <li><a href="/admin/flow/sites/{{$siteId}}">流程</a></li>
        <li class="active"><a>模板</a></li>
    </ul>
    <ul class="ul-content">
        <li class="active">
            <main id="main">
                <button type="button" class="btn btn-success" onclick="utils.addMain()">新增步骤</button>
                <button type="button" class="btn btn-info" onclick="utils.saveFlowTpl()">保存</button>

                @foreach($tplStageList 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}}"
                                                                      style="width: 260px;display: inline-block">
                        </h4>
                        <a onclick="utils.addBig(this)">添加大流程</a>
                        <a onclick="utils.delMain(this)">删除步骤</a>
                        <div>
                            @foreach($stage->infoTplList as $info)
                                <table class="my-table">
                                    <colgroup>
                                        <col span="3" style="width: 20%">
                                        <col style="width: 12%">
                                        <col style="width: 10%">
                                        <col style="width: 18%">
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <td>具体流程 <input type="hidden" value="{{$info->id}}" name="infoId"></td>
                                        <td>备注</td>

                                        <td>完成时间</td>
                                        <td>对接人</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>
                                                <select name="duty_man" class="my-select" multiple
                                                        data-container="body">
                                                    @foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
                                                        <option value="{{$roleId}}"
                                                                @if(is_array($item['duty_man']) && in_array($roleId,$item['duty_man'])) selected @endif>
                                                            {{$roleName}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td class="operateDel" onclick="utils.del(this)">删除</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            @endforeach

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

        </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');
            $('.my-select').selectpicker();
        });
        var utils = {
            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>\n' +
                    '                                    <select name="duty_man" class="my-select" multiple data-container="body">\n' +
                    @foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
                        '                                    <option value="{{$roleId}}">{{$roleName}}</option>' +
                    @endforeach
                        '                                    </select>' +
                    '                                </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) {
                var mergedTd = $(_this).parent().parent().find(".mergedTd")
                var rowspan = mergedTd.attr('rowspan');
                mergedTd.attr('rowspan', rowspan - 1);
                $(_this).parent().remove();
            },
            addBig: function (_this) {

                var str = '<table class="my-table">\n' +
                    '                            <colgroup>\n' +
                    '                                <col span="3" style="width: 20%">\n' +
                    '                                <col style="width: 12%">\n' +
                    '                                <col style="width: 10%">\n' +
                    '                                <col style="width: 18%">\n' +
                    '                            </colgroup>\n' +
                    '                            <thead>\n' +
                    '                            <tr>\n' +
                    '                                <td>具体流程 <input type="hidden" value="0" name="infoId"> </td>\n' +
                    '                                <td>备注</td>\n' +
                    '\n' +
                    '                                <td>完成时间</td>\n' +
                    '                                <td>对接人</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>\n' +
                    '                                    <select name="duty_man" class="my-select" multiple data-container="body">\n' +
                    @foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
                        '                                    <option value="{{$roleId}}">{{$roleName}}</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' +
                    '                    <a onclick="utils.addBig(this)">添加大流程</a>\n' +
                    '                    <a onclick="utils.delMain(this)">删除步骤</a>\n' +
                    '                    <div>\n' +
                    '                        <table class="my-table">\n' +
                    '                            <colgroup>\n' +
                    '                                <col span="3" style="width: 20%">\n' +
                    '                                <col style="width: 12%">\n' +
                    '                                <col style="width: 10%">\n' +
                    '                                <col style="width: 18%">\n' +
                    '                            </colgroup>\n' +
                    '                            <thead>\n' +
                    '                            <tr>\n' +
                    '                                <td>具体流程 <input type="hidden" value="0" name="infoId"> </td>\n' +
                    '                                <td>备注</td>\n' +
                    '\n' +
                    '                                <td>完成时间</td>\n' +
                    '                                <td>对接人</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>\n' +
                    '                                    <select name="duty_man" class="my-select" multiple data-container="body">\n' +
                    @foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
                        '<option value="{{$roleId}}">{{$roleName}}</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();
            },


            saveFlowTpl: 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 stepData = {step_title: step_title, step_id: stepId, children: []};
                    if (!step_title) {
                        errMsg += '建站步骤不能为空<br>';
                    }
                    $(this).find("table").each(function () {

                        var flowData = {
                            info_id: $(this).find("[name=infoId]").val(),
                            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 duty_man = $(this).find("[name=duty_man]").val();
                            if (!flow_name) {
                                errMsg += '具体流程不能为空<br>';
                            }
                            var temp = {
                                flow_name: flow_name,
                                flow_remark: flow_remark,
                                flow_done_date: flow_done_date,
                                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-tpl-save/sites/{{$siteId}}',
                    type: 'post',
                    data: {
                        dataList: flowAll
                    }
                };
                tips.ajax(ajaxConfig);
            },
            bindDate: function (that) {
                var routeTime = {
                    type: 'date',
                    elem: that
                };
                laydate.render(routeTime);
            },
        };

    </script>
@endsection