baoshi-was/resources/views/personnel/laborApply/dispatch/detail/edit.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="storeDetail"
                      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="男" :selected="item.gender==='男'">男</option>
                                        <option value="女" :selected="item.gender==='女'">女</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]'"
                                           v-model="item.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]'"
                                           v-model="item.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="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: {!! $laborCompanyDispatch->laborCompanyDispatchDetails !!},
                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;
                        let result = this.checkId(card_id);


                        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 (!result.pass) {
                            window.tempTip.show(`第${i + 1}${result.msg}`);
                            flag = false;
                        }
                        if (!flag) {
                            return flag;
                        }
                    }
                    document.getElementById("storeDetail").submit();
                },
                checkId(code) {

                    //身份证号合法性验证
                    //支持15位和18位身份证号
                    //支持地址编码、出生日期、校验位验证
                    let city = {
                        11: "北京",
                        12: "天津",
                        13: "河北",
                        14: "山西",
                        15: "内蒙古",
                        21: "辽宁",
                        22: "吉林",
                        23: "黑龙江 ",
                        31: "上海",
                        32: "江苏",
                        33: "浙江",
                        34: "安徽",
                        35: "福建",
                        36: "江西",
                        37: "山东",
                        41: "河南",
                        42: "湖北 ",
                        43: "湖南",
                        44: "广东",
                        45: "广西",
                        46: "海南",
                        50: "重庆",
                        51: "四川",
                        52: "贵州",
                        53: "云南",
                        54: "西藏 ",
                        61: "陕西",
                        62: "甘肃",
                        63: "青海",
                        64: "宁夏",
                        65: "新疆",
                        71: "台湾",
                        81: "香港",
                        82: "澳门",
                        91: "国外 "
                    };
                    let row = {
                        'pass': true,
                        'msg': '验证成功'
                    };
                    if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(code)) {
                        row = {
                            'pass': false,
                            'msg': '身份证号格式错误'
                        };
                    } else if (!city[code.substr(0, 2)]) {
                        row = {
                            'pass': false,
                            'msg': '身份证号地址编码错误'
                        };
                    }
                    return row;
                }
            }
        });

    </script>
@endsection