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;" id="create-form"
                      onsubmit="return check()">
                    {{ 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]'" v-model="item.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 v-model="item.gender">
                                        <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]'" required
                                           :id="'users['+i+'][age]'" v-model="item.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]'"  v-model="item.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="button" class="btn btn-success btn-sm" @click="check()">
                        <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("不能超过最大人数限制！");
                    }
                    console.log(this.items);
                },
                check() {
                    for(let i = 0;i< this.items.length;i++){
                        let item = this.items[i];
                        let {name, gender, age, card_id} = item;
                        let flag = true;
                        if (!name) {
                            window.tempTip.show(`第${i+1}条信息登记的姓名不符合要求`);
                            flag = false;
                        } else if (!age) {
                            window.tempTip.show(`第${i+1}条信息登记的年龄不符合要求`);
                            flag = false;
                        } else if (!gender) {
                            window.tempTip.show(`第${i+1}条信息登记的性别不符合要求`);
                            flag = false;
                        } else if (!this.checkId(card_id)) {
                            window.tempTip.show(`第${i+1}条信息身份证不符合要求`);
                            flag = false;
                        }
                        if (!flag) {
                            return flag;
                        }
                    }
                    document.getElementById("create-form").submit();
                },
                checkId(idCard) {
                    let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    return reg.test(idCard);
                }
            }
        });

    </script>
@endsection