baoshi-was/resources/views/maintenance/paperBox/edit.blade.php

@extends('layouts.app')
@section('title')编辑-纸箱@endsection

@section('content')
    <div class="container-fluid" id="form">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <form method="POST" action="{{ url('maintenance/paperBox/'.$paperBox->id) }}">
                    @csrf
                    @method('PUT')
                    <div class="form-group row text-center">
                        <div class="col-12 text-danger">

                            注意：为保证数据正确您输入的长宽高将会被重新定义<br>
                            最大值为长，其次为宽，最小为高
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="model" class="col-2 col-form-label text-right">型号</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('model') is-invalid @enderror"
                                   name="model" autocomplete="off" value="{{old('model')?old('model'):$paperBox->model}}" required>
                            @error('model')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="length" class="col-2 col-form-label text-right">长（cm）</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('length') is-invalid @enderror"
                                   name="length" autocomplete="off" value="{{old('length')?old('length'):$paperBox->length}}" required>
                            @error('length')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="width" class="col-2 col-form-label text-right">宽（cm）</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('width') is-invalid @enderror"
                                   name="width" autocomplete="off" value="{{old('width')?old('width'):$paperBox->width}}" required>
                            @error('width')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="height" class="col-2 col-form-label text-right">高（cm）</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('height') is-invalid @enderror"
                                   name="height" autocomplete="off" value="{{old('height')?old('height'):$paperBox->height}}" required>
                            @error('height')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="height" class="col-2 col-form-label text-right">选择货主</label>
                        <div class="col-3">
                            <div style="max-height: 130px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;opacity:0.5;text-align: center;transform:scale(0.9)"  v-if="owners.length>0">
                                <ul class="list-group tooltipTarget" title="双击添加货主">
                                    <li id="selectLi"  class="tooltipTarget"  v-for="owner in owners"  @dblclick="selectedOwner(owner)" style="list-style: none"><a >@{{ owner.name }}</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-5">
                            <div style="max-height: 130px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;text-align: center;" v-if="selectedOwners.length>0">
                                <ul class="list-group ">
                                    <li v-for="selectedOwner in selectedOwners" class="tooltipTarget" @dblclick="owner(selectedOwner)" title="双击删除货主"  style="list-style: none">
                                        <a>@{{ selectedOwner.name }}</a>
                                        <input hidden name="owner_id[]" :value="selectedOwner.id">
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-outline-dark form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <style>
        li a:hover{background-color: #4aa0e6;display: block;cursor:pointer}
    </style>
    <script>
        let vue=new Vue({
            el:'#form',
            data:{
                owners:[
                    @foreach($owners as $owner)
                        {id:'{{$owner->id}}',name:'{{$owner->name}}'},
                    @endforeach
                ],
                selectedOwners:[
                    @foreach($paperBox->owners as $paperBox_owner)
                        {id:'{{$paperBox_owner->id}}',name:'{{$paperBox_owner->name}}'},
                    @endforeach
                ],
            },

            methods:{
                selectedOwner(paperBox_owner){
                    let _this=this;
                    let location=true;
                    this.selectedOwners.some(function (selectedOwner) {
                        if(selectedOwner.id===paperBox_owner.id){
                            document.getElementById('selectLi').title='已存在';
                            location=false;
                            return true;
                        }
                    });
                    if (location){
                        _this.selectedOwners.push(paperBox_owner);
                    }
                },
                owner(selectedOwner){
                    let _this=this;
                    for (let i=0;i<this.selectedOwners.length;i++){
                        if (_this.selectedOwners[i]===selectedOwner){
                            _this.selectedOwners.splice(i,1);
                            break;
                        }
                    }
                },
            },
        });
    </script>
@endsection