baoshi-was/resources/views/personnel/laborApply/dispatch/detail/create.blade.php

@extends('layouts.app')
@section('title')录入-劳务派遣明细详情@endsection

@section('content')
    <div class="container-fluid" id="list">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <form action="{{ route('laborCompanyDispatch.storeDetail', $laborCompanyDispatch->id) }}" method="post"
                      style="display: inline-block;"
                      onsubmit="return confirm('您确定要提交吗？');">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <template v-for="(item,i) in items">
                            <div class="row mt-3">
                                <label class="col-lg-1 col-sm-3 col-form-label" :for="'users['+i+'][name]'">姓名</label>
                                <div class="col-lg-2 col-sm-12">
                                    <input class="form-control" type="text" :name="'users['+i+'][name]'"
                                           :id="'users['+i+'][name]'" required>
                                </div>
                                <label class="col-lg-1 col-sm-3 col-form-label" :for="'users['+i+'][gender]'">性别</label>
                                <div class="col-lg-2 col-sm-12">
                                    <select class="form-control" :name="'users['+i+'][gender]'"
                                            required>
                                        <option value="" hidden disabled selected>性别</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                                <label class="col-lg-1 col-sm-3 col-form-label" :for="'users['+i+'][age]'">年龄</label>
                                <div class="col-lg-2 col-sm-12">
                                    <input class="form-control" type="number" :name="'users['+i+'][age]'"
                                           :id="'users['+i+'][age]'">
                                </div>
                                <label class="col-lg-1 col-sm-3 col-form-label" :for="'users['+i+'][cardId]'">身份证</label>
                                <div class="col-lg-2 col-sm-12">
                                    <input class="form-control" type="text" :name="'users['+i+'][card_id]'"
                                           :id="'users['+i+'][card_id]'">
                                </div>
                                <div v-if="i!==0" class="col-1 ml-1">
                                    <button class="btn btn-sm btn-primary float-right" type="button"
                                            @click="items.splice(i,1)">-
                                    </button>
                                </div>
                            </div>

                        </template>
                        <button class="btn btn-sm btn-primary float-right" type="button"
                                @click="addItem();">添加
                        </button>
                    </div>
                    <button type="submit" class="btn btn-success btn-sm">
                        <i class="far fa-trash-alt"></i> 提交
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el: "#list",
            data: {
                items: [{}],
                labor_company_dispatch: {!! $laborCompanyDispatch !!},
            },
            mounted() {

            },

            methods: {
                addItem() {
                    let sum_man_num = this.labor_company_dispatch.man_num + this.labor_company_dispatch.woman_num;
                    if (this.items.length <= sum_man_num - 1) {
                        this.items.push({});
                    } else {
                        window.tempTip.show("不能超过最大人数限制！");
                    }
                }
            }
        });

    </script>
@endsection