baoshi-was/resources/views/maintenance/tutorial/create.blade.php

@extends('layouts.app')
@section('title')录入-教程@endsection
@section('head')
    <link rel="stylesheet" type="text/css" href="{{asset('css/trix.css')}}">
    <script type="text/javascript" src="{{mix('js/trix.js')}}"></script>
    <script>

        addEventListener("trix-file-accept", function(event) {
            var config = laravelTrixConfig(event);

            if(
                config.hideToolbar ||
                (config.hideTools && config.hideTools.indexOf("file-tools") != -1) ||
                (config.hideButtonIcons && config.hideButtonIcons.indexOf("attach") != -1)
            ) {
                return event.preventDefault();
            }
        });

        addEventListener("trix-attachment-remove", function(event) {
            var config = laravelTrixConfig(event);

            var xhr = new XMLHttpRequest();

            var attachment = event.attachment.attachment.attributes.values.url.split("/").pop();

            xhr.open("DELETE", "{{url('laravel-trix/attachment/:attachment')}}".replace(':attachment',attachment), true);

            setAttachementUrlCollectorValue('attachment-' + config['id'], function(collector){
                for( var i = 0; i < collector.length; i++){
                    if ( collector[i] === attachment) {
                        collector.splice(i, 1);
                    }
                }

                return collector;
            });

            xhr.send();
        });

        addEventListener("trix-attachment-add", function(event) {
            var config = laravelTrixConfig(event);

            if (event.attachment.file) {
                var attachment = event.attachment;

                config['attachment'] = attachment;

                uploadFile(config, setProgress, setAttributes, errorCallback);

                function setProgress(progress) {
                    attachment.setUploadProgress(progress);
                }

                function setAttributes(attributes) {
                    attachment.setAttributes(attributes);
                }

                function errorCallback(xhr,attachment){
                    attachment.remove();
                    alert(xhr.statusText);
                }
            }
        });


        function uploadFile(data, progressCallback, successCallback, errorCallback) {
            var formData = createFormData(data);
            var xhr = new XMLHttpRequest();

            xhr.open("POST", "{{url('laravel-trix/attachment')}}", true);

            xhr.upload.addEventListener("progress", function(event) {
                var progress = (event.loaded / event.total) * 100;
                progressCallback(progress);
            });

            xhr.addEventListener("load", function(event) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var response = JSON.parse(xhr.response);

                    setAttachementUrlCollectorValue('attachment-' + data['id'], function(collector){
                        collector.push(response.url.split("/").pop())

                        return collector;
                    });

                    successCallback({
                        url : response.url,
                        href: response.url
                    })
                } else {
                    errorCallback(xhr,data.attachment)
                }
            });

            xhr.send(formData);
        }

        function setAttachementUrlCollectorValue(inputId, callback){
            var attachmentCollector = document.getElementById(inputId);

            attachmentCollector.value = JSON.stringify(callback(JSON.parse(attachmentCollector.value)));
        }

        function createFormData(data) {
            var formData = new FormData();
            formData.append("Content-Type", data.attachment.file.type);
            formData.append("file", data.attachment.file);
            formData.append("field", data.field);
            formData.append("modelClass", data.modelClass);

            if(data.disk != undefined) {
                formData.append("disk", data.disk);
            }

            return formData;
        }
        function laravelTrixConfig (event) {
            return JSON.parse(event.target.getAttribute("data-config"));
        }
        window.onload = function() {
            var laravelTrixInstanceStyles =  document.getElementsByTagName('laravel-trix-instance-style');

            var style = document.createElement('style');
            style.type = 'text/css';

            for (var tag of laravelTrixInstanceStyles) {
                style.innerHTML += tag.textContent + ' ';
            }

            document.getElementsByTagName('head')[0].appendChild(style);
        }
    </script>
@endsection
@section('content')
        <div class="card col-md-8 offset-md-2" id="tutorial">
            <div class="card-body">
                <form method="POST" action="{{ url('maintenance/tutorial') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="owner_id" class="col-2 col-form-label text-right">所属货主</label>
                        <div class="col-8">
                            <select @if(isset($owner_id)) v-model="owner_id" @endif name="owner_id" class="form-control @error('owner_id') is-invalid @enderror" style="width: 50%">
                                <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">标题</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   name="name" autocomplete="off" value="{{ old('name') }}" required>
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div id="for-trix"></div>
                    <div class="form-group row">
                        <label for="initial_weight" class="col-2 col-form-label text-right">内容</label>
                        <div class="col-8" id="content"></div>
                    </div>
                    <div class="form-group row">
                        <label for="type" class="col-2 col-form-label text-right">类型</label>
                        <div class="col-8">
                            <select name="type" class="form-control" style="width: 50%;">
                                <option value="二次加工">二次加工</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-success form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="trix">
        @trix(\App\Tutorial::class, 'content')
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#tutorial",
            data:{
                owners:[
                    @foreach($owners as $owner)
                    {!! $owner !!},
                    @endforeach
                ],
                @if(isset($owner_id)) owner_id:'{{$owner_id}}', @endif
            },
            mounted() {
              let trix=$("#trix");
              $("#content").append(trix);
            },
        });
    </script>
@endsection