test/resources/views/admin/work_task/site_task.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">
    <link href="{{asset('js/plugins/jquery-pretty-radio-checkbox/css/jquery-labelauty.css')}}" rel="stylesheet">

    <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;
        }

        .my-select {
            /*width: 60% !important;*/
        }

        .radio-label,
        .radio-check {
            display: inline-block;
            position: relative;
            margin-right: 5px;
        }

        .radio-label input[type="checkbox"] {
            appearance: none; /*清楚默认样式*/
            -webkit-appearance: none;
            /* opacity: 0; */
            outline: none;
            position: absolute;
            z-index: 2;
            width: 6px;
            height: 6px;
            top: 10px;
            left: 10px;
            border-radius: 50%;
            background: #b4b4b4;
        }

        .radio-label label {
            display: inline-block;
            min-width: 50px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            padding-right: 10px;
            border-radius: 5px;
            padding-left: 25px;
            color: #fff;
            background-color: #c9c9c9;
        }

        .radio-label input[type="checkbox"]:checked {
            opacity: 0;
        }

        .radio-label input[type="checkbox"]:checked + label {
            color: #fff;
            background-color: #3597db;
        }

        .radio-label input[type="checkbox"]:checked + label::after {
            content: "";
            position: absolute;
            left: 12px;
            top: 5px;
            width: 5px;
            height: 12px;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            transform: rotate(45deg);
        }

        .dropdown.bootstrap-select {
            width: 240px !important;
        }
    </style>
@endsection

@section('content')
    <div style="display: flex;justify-content: space-between;padding: 10px;">
        <select class="selectpicker form-control"
                id="site_ids" name="site_ids" data-live-search="true"
                title="请选择站点" autocomplete="off">
            <option value="">请选择站点</option>
            @foreach ($sites as $site)
                <option value="{{$site->id}}">{{$site->cn_title}}</option>
            @endforeach
        </select>
        <button type="button" class="btn btn-success" onclick="utils.saveFlow()">保存
        </button>
    </div>

    <ul class="ul-content">
        <li class="active">
            <form id="form">
            </form>
        </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>


        var site;
        var siteStatus;
        var role;
        var optimizationPersonnel;

        $("#site_ids").change(function () {
            var siteId = $('#site_ids').val();
            if (!siteId) {
                siteId = 0;
            }
            var ajaxConfig = {
                url: '/admin/work-task/site-status/' + siteId,
                type: 'post',
                /**
                 * @param result.data.siteStatus int
                 * @param result.data.tasksList array
                 * @param result.data.rolesList array
                 * @param result.data.optimizationPersonnel array
                 */
                success: function (result) {

                    var fulfil = [];
                    var user = [];

                    site = result.data.siteId;
                    siteStatus = result.data.siteStatus;
                    role = result.data.rolesList;
                    optimizationPersonnel = result.data.optimizationPersonnel;

                    var html =
                        '<main id="main">' +
                        '<table class="my-table">' +
                        '<colgroup>' +
                        '<col style="width:5%">' +
                        '<col style="width:15%">' +
                        '<col style="width:25%">' +
                        '<col style="width:10%">' +
                        '<col style="width:15%">' +
                        '<col style="width:15%">' +
                        '<col style="width:15%">' +
                        '</colgroup>' +
                        '<thead>' +
                        '<tr>' +
                        '<td class="operateAdd">' +
                        '<a href="javascript:;" onclick="utils.add(this)"><i class="fa fa-plus" aria-hidden="true" style="font-size: 18px"></i></a>' +
                        '</td>' +
                        '<td>标题</td>' +
                        '<td>内容</td>' +
                        '<td>是否完成</td>' +
                        '<td>安排时间</td>' +
                        '<td>完成时间</td>' +
                        '<td>人员</td>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>';

                    if (result.data.infoList.length > 0) {

                        $.each(result.data.tasksList, function (index, value) {
                            var object = {};
                            object.fulfil = value.fulfil;
                            object.task_id = value.task_id;
                            fulfil.push(object);

                            var userObject = {};
                            userObject.user_id = value.personnel;
                            userObject.task_id = value.task_id;

                            user.push(userObject);
                            var title = value.title;
                            if (!value.title) {
                                title = '';
                            }

                            var data = value.data;
                            if (!value.data) {
                                data = '';
                            }

                            var flow_except_date = value.flow_except_date;
                            if (!value.flow_except_date) {
                                flow_except_date = '';
                            }

                            var initial_date = value.initial_date;
                            if (!value.initial_date) {
                                initial_date = '';
                            }

                            html +=
                                '<tr>' +
                                '<td class="operateDel" onclick="utils.del(this)"><i class="fa fa-times" aria-hidden="true" style="font-size:18px"></i></td>' +
                                '<td>' +
                                '<input type="text" class="form-control" name="title" value="' + title + '"></td>' +
                                '<td>' +
                                '<input type="text" class="form-control" name="data" value="' + data + '"></td>' +
                                '<td>' +
                                '<select class="form-control"  id="fulfil' + value.task_id + '" name="fulfil">' +
                                '<option value="1">未完成</option>' +
                                '<option value="2">完成</option>' +
                                '</select>' +
                                '</td>' +
                                '<td>' +
                                '<input type="text" class="form-control deadline" name="initial_date" value="' + initial_date + '" autocomplete="off">' +
                                '</td>' +
                                '<td>' +
                                '<input type="text" class="form-control deadline"  name="flow_except_date" value="' + flow_except_date + '" autocomplete="off">' +
                                '</td>' +
                                '<td>' +
                                '<select class="my-select"  id="personnel' + value.task_id + '" name="personnel" data-container="body" data-live-search="true">';
                            html += '<option value="0">请选择人员</option>';
                            $.each(result.data.optimizationPersonnel, function (kk, vv) {
                                html += '<option value="' + vv.id + '">' + vv.nickname + '</option>';
                            });

                            html += '</select>' +
                                '</td>' +
                                '</tr>';
                        });
                    }
                    html += '</tbody>' +
                        '</table>' +
                        '</main>';

                    var object = $('#form');
                    object.empty();
                    object.append(html);

                    //时间插件
                    lay('.deadline').each(function () {
                        laydate.render({
                            elem: this
                            , trigger: 'click'
                        });
                    });
                    $('.my-select').selectpicker();

                    if (result.data.infoList.length > 0) {

                        $.each(result.data.infoList, function (index, value) {
                            $('#color' + value).attr('checked', 'checked');
                        });
                    }

                    if (fulfil.length > 0) {
                        $.each(fulfil, function (index, value) {
                            $('#fulfil' + value.task_id).val(value.fulfil);
                        });
                    }

                    if (user.length > 0) {

                        $.each(user, function (index, value) {
                            $('#personnel' + value.task_id).val(value.user_id).trigger("change");
                        });
                    }
                }
            };
            tips.ajax(ajaxConfig);
        });

        var utils = {
            add: function (_this) {
                var rowspan = $(_this).parent().next().attr('rowspan');
                $(_this).parent().next().attr('rowspan', rowspan + 1);
                var str =
                    '<tr>' +
                    '<td class="operateDel" onclick="utils.del(this)"><i class="fa fa-times" aria-hidden="true" style="font-size:18px"></i></td>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="title">' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="data">' +
                    '</td>' +
                    '<td>' +
                    '<select class="form-control"  id="fulfil" name="fulfil">' +
                    '<option value="1" >未完成</option>' +
                    '<option value="2" >完成</option>' +
                    '</select>' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control deadline" name="initial_date" autocomplete="off" value="{{$date}}">' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control deadline" name="flow_except_date"  autocomplete="off">' +
                    '</td>' +
                    '<td>' +
                    '<select class="my-select"  id="personnel" name="personnel" data-container="body" data-live-search="true">';
                str += '<option value="0">请选择人员</option>';
                $.each(optimizationPersonnel, function (kk, vv) {
                    str += '<option value="' + vv.id + '">' + vv.nickname + '</option>';
                });
                str += '</select>' +
                    '</td>' +
                    '</tr>';

                $(_this).parent().parent().parent().next().prepend(str);
                //时间插件
                lay('.deadline').each(function () {
                    laydate.render({
                        elem: this
                        , trigger: 'click'
                    });
                });
                $('.my-select').selectpicker();
            },
            del: function (_this) {
                $(_this).parent().remove();
            },
            saveFlow: function () {
                var flowData = [];
                var infoList = [];

                $('input[name="info"]:checked').each(function () {
                    infoList.push($(this).val());
                });
                var list = infoList.toString();

                $(".my-table").each(function () {

                    $(this).find("tbody tr").each(function () {

                        var title = $(this).find("[name=title]").val();
                        var data = $(this).find("[name=data]").val();
                        var flow_except_date = $(this).find("[name=flow_except_date]").val();
                        var initial_date = $(this).find("[name=initial_date]").val();
                        var fulfil = $(this).find("[name=fulfil]").val();
                        var personnel = $(this).find("[name=personnel]").val();

                        var temp = {
                                title: title,
                                data: data,
                                fulfil: fulfil,
                                flow_except_date: flow_except_date,
                                initial_date: initial_date,
                                personnel: personnel
                            }
                        ;
                        flowData.push(temp);
                    });
                });
                var ajaxConfig = {
                    url: '/admin/work-task/save/siteId/' + site + '/status/' + siteStatus,
                    type: 'post',
                    data: {
                        infoList: list,
                        dataList: flowData
                    },
                    success: function () {
                        layer.msg('操作成功', {
                            icon: 1,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            parent.location.reload()
                        });
                    }
                };
                tips.ajax(ajaxConfig);
            }
        };

    </script>
@endsection