baoshi-was/resources/views/personnel/laborApply/index.blade.php

@extends('layouts.app')
@section('title')查看-临时工申请协调@endsection

@section('content')
    <div id="list" class="d-none">
        <div class="container-fluid">
            <div id="form_div"></div>
            <div class="ml-3 form-inline" id="btn">
                @can('临时工申请协调-查看-重新生成劳务派遣数据')
                    <span class="ml-1">
                        <a title="00:00 - 01:00 禁止生成数据" href="{{ route('laborApply.createDispatch') }}" type="button"
                           class="btn btn-sm ml-2 btn-outline-danger">重新生成劳务派遣数据</a>
                    </span>
                @endcan
            </div>
            @include('shared._messages')
            <table class="table table-striped table-bordered table-hover card-body td-min-width-80" id="table">
                <tr v-for="(labor_apply,i) in labor_applies" @click="selectTr===i+1?selectTr=0:selectTr=i+1"
                    :class="selectTr===i+1?'focusing' : ''">
                    <td>
                        <input class="checkItem" type="checkbox" :value="labor_apply.id">
                    </td>
                    <td>@{{ i+1 }}</td>
                    <td>
                        <span :class="getStatusClass(labor_apply.status)">@{{ labor_apply.status }}</span>
                    </td>
                    <td>@{{ labor_apply.created_at }}</td>
                    <td>@{{ labor_apply.remark }}</td>
                    <td>@{{ labor_apply.warehouse && labor_apply.warehouse.name }}</td>
                    <td>@{{ labor_apply.user_work_group && labor_apply.user_work_group.name }}</td>
                    <td>@{{ labor_apply.apply_user && labor_apply.apply_user.name }}</td>
                    <td>@{{ labor_apply.man_num }}</td>
                    <td>@{{ labor_apply.woman_num }}</td>
                    <td>@{{ labor_apply.actual_num }}</td>
                    <td>@{{ labor_apply.arrive_rate }}</td>
                    <td>
                        <a v-if="labor_apply.status === '创建'" :href="getEditlUrl(labor_apply)"
                           class="btn btn-outline-secondary btn-sm" role="button">修改</a>
                        <form v-if="labor_apply.status === '创建'" :action="getBaseUrl(labor_apply)" method="post"
                              style="display: inline-block;"
                              onsubmit="return confirm('您确定要删除吗？');">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}
                            <button type="submit" class="btn btn-outline-danger btn-sm">
                                <i class="far fa-trash-alt"></i> 删除
                            </button>
                        </form>
                    </td>
                </tr>
            </table>
            {{ $labor_applies->links() }}
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        new Vue({
            el: "#list",
            data: {
                labor_applies: [
                    @foreach( $labor_applies as $labor_apply )
                        {!! $labor_apply !!},
                    @endforeach
                ],
                selectTr: 0,
                warehouses: [
                    @foreach( $warehouses as $item )
                    {
                        name: '{{ $item->id }}', value: '{{ $item->name }}'
                    },
                    @endforeach
                ],
                user_work_groups: [
                        @foreach( $user_work_groups as $item )
                    {
                        name: '{{ $item->id }}', value: '{{ $item->name }}'
                    },
                    @endforeach
                ],
                statuses: [
                    {name: 1, value: '创建'},
                    {name: 2, value: '指派成功'},
                    {name: 3, value: '劳务接单'},
                    {name: 4, value: '任务完结'},
                ]
            },
            created() {
                //计算到岗率
                this.labor_applies.map(item => {
                    const created_at = item.created_at;
                    const user_workgroup_id = item.user_workgroup_id;
                    const same_items = this.labor_applies.filter(f_item => {
                        return f_item.created_at.slice(0, 10) === created_at.slice(0, 10) && f_item.user_workgroup_id === user_workgroup_id
                    });
                    const total_applied_num = same_items.reduce((sum, current) => {
                        return sum + (current.man_num + current.woman_num);
                    }, 0)
                    const arrive_rate = Math.floor((item.actual_num / total_applied_num) * 100);
                    item.arrive_rate = arrive_rate + '%';
                    return item;
                });
            },
            mounted() {
                $('#list').removeClass('d-none');
                let _this = this;
                $(".up").slideUp();
                let data = [
                    [
                        //申请人
                        {name: 'apply_user', type: 'input', tip: '搜索申请人', placeholder: '申请人'},
                        //创建起始时间
                        {name: 'created_at_start', type: 'dateTime', tip: '选择显示创建时间的起始时间'},
                        //仓库
                        {
                            name: 'warehouse',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '仓库'],
                            placeholder: ['仓库', '定位或多选仓库'],
                            data: _this.warehouses
                        },
                        //状态
                        {
                            name: 'status',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '状态'],
                            placeholder: ['状态', '定位或多选状态'],
                            data: _this.statuses
                        },
                    ],
                    [
                        //用工要求
                        {name: 'remark', type: 'input', tip: '搜索用工要求', placeholder: '用工要求'},
                        //创建截止时间
                        {name: 'created_at_end', type: 'dateTime', tip: '选择显示创建时间的截止时间'},
                        //仓库小组
                        {
                            name: 'user_work_group',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '仓库小组'],
                            placeholder: ['仓库小组', '定位或多选仓库小组'],
                            data: _this.user_work_groups
                        },
                    ]
                ];
                _this.form = new query({
                    el: '#form_div',
                    condition: data,
                    appendDom: "btn",
                });
                _this.form.init();
                let column = [
                    {name: 'index', value: '序号', neglect: true},
                    {name: 'status', value: '状态'},
                    {name: 'created_at', value: '申请日期'},
                    {name: 'remark', value: '用工要求'},
                    {name: 'warehouse', value: '仓库'},
                    {name: 'user_workgroup_id', value: '仓库小组'},
                    {name: 'apply_user', value: '申请人'},
                    {name: 'man_num', value: '男工人数'},
                    {name: 'woman_num', value: '女工人数'},
                    {name: 'actual_num', value: '到岗人数'},
                    {name: 'arrive_rate', value: '到岗率'},
                    {name: 'do', value: '操作'},
                ];
                new Header({
                    el: "table",
                    name: "labor_applies",
                    column: column,
                    data: this.labor_applies,
                    restorationColumn: 'addtime',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                getEditlUrl(obj) {
                    return "{{ url('personnel/laborApply') }}/" + obj.id + '/edit';
                },
                getBaseUrl(obj) {
                    return "{{ url('personnel/laborApply') }}/" + obj.id;
                },
                //获取状态的徽章（badge）组件的外观
                getStatusClass(status) {
                    let result = '';
                    switch (status) {
                        case '创建':
                            result = 'badge badge-light'
                            break;
                        case '指派成功':
                            result = 'badge badge-info'
                            break;
                        case '劳务接单':
                            result = 'badge badge-primary'
                            break;
                        case '任务完结':
                            result = 'badge badge-success'
                            break;
                        default:
                            result = 'badge badge-info'
                    }
                    return result;
                }
            }
        });
    </script>
@endsection