baoshi-was/resources/views/order/workOrder/create.blade.php

@extends("layouts.app")
@section('title','工单创建')

@section("content")
    <div class="container-fluid d-none card" id="list">
        @if(isset($reslut))
            <div @if($reslut['success']) class="alert-success" @else class="alert-warning" @endif>
                {{ $reslut['message'] }}
            </div>
        @endif

        <div class="card-body bg-light">
            <div class="col-8 offset-2 row bg-white">
                <span class="btn col-4 left" @click="changeStep(1)">
                    <!-- 三种：选中，未选，编辑后-->
                    <span class="fa-stack fa-lg">
                        <template v-if="step === 1">
                            <i class="fa fa-circle-thin fa-stack-2x" style="color: #269dec"></i>
                            <span class="fa" style="color:#269dec">1</span>
                        </template>
                        <template v-if="step > 1">
                            <i class="fa fa-check-circle-o fa-stack-2x" style="color: #269dec"></i>
                        </template>
                    </span>
                    选择工单类型
                </span>
                <!--  fa-check-circle-o 选中-->
                <span class="btn col-4 left" @click="changeStep(2)">
                    <span class="fa-stack fa-lg">
                        <template v-if="step === 2">
                            <i class="fa fa-circle-thin fa-stack-2x" style="color: #269dec"></i>
                            <span style="color:#269dec">2</span>
                        </template>
                        <template v-if="step < 2">
                             <i class="fa fa-circle-thin fa-stack-2x" style="color: #888"></i>
                             <span style="color:#888">2</span>
                        </template>
                        <template v-if="step > 2">
                            <i class="fa fa-check-circle-o fa-stack-2x" style="color: #269dec"></i>
                        </template>
                    </span>
                    选择工单子类型
                </span>
                <span class="btn col-4 left" @click="changeStep(3)">
                       <span class="fa-stack fa-lg">
                            <template v-if="step === 3">
                                <i class="fa fa-circle-thin fa-stack-2x" style="color: #269dec"></i>
                                <span style="color:#269dec">3</span>
                            </template>
                            <template v-if="step < 3">
                                <i class="fa fa-circle-thin fa-stack-2x" style="color: #888"></i>
                                <span style="color: #888">3</span>
                            </template>
                        </span>
                    创建工单
                </span>
            </div>
            <hr class="">
            <div class="card-body bg-light">

                <div class="col-8 offset-2 row bg-white card" v-if="step === 1">
                    <div class="card-body">
                        <div v-for="(item) in workOrderTypes" class="col-4  d-inline-block ">
                            <div class="p-3 m-2 bg-light text-break" @click="selectWorkOrderType(item)">
                                <strong> @{{ item.name }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-8 offset-2 row bg-white card" v-if="step === 2">
                    <div class="card-body">
                        <div v-for="(item) in workOrderChildTypes" class="col-4 d-inline-block">
                            <div class="p-3 m-2 bg-light text-break" @click="selectWorkOrderChildType(item)">
                                <strong> @{{ item.name }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-8 offset-2 row bg-white card" v-if="step === 3">
                    <form action="{{url("order/workOrder/store")}}" method="post" id="store_form">
                        @csrf
                        @method('POST')
                        <input type="text" class="d-none" name="work_order_type_id" :value="workOrder.work_order_type_id">
                        <input type="text" class="d-none" name="work_order_child_type_id"
                               :value="workOrder.work_order_child_type_id">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="grad" class="">任务紧急程度</label>
                                <div class="pl-1">
                                    <div v-for="(item,i) in grads">
                                        <input type="radio" :id="'grad'+i" name="grad" :value="item.value" v-model="workOrder.grad">
                                        <label :for="'grad'+i">@{{ item.name }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark">详细内容</label>
                                <textarea class="form-control" name="remark" id="remark" v-model="workOrder.remark">
                            </textarea>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-md btn-outline-primary" type="button" @click="checkSubmit">提交</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection()

@section("lastScript")
    <script>
        let list = new Vue({
            el: "#list",
            data: {
                step: 1,
                workOrderTypes: [
                        @foreach($workOrderTypes as $workOrderType)
                    {
                        id: '{{$workOrderType->id}}',
                        name: '{{$workOrderType->name}}',
                        child_types: [
                                @foreach($workOrderType->childTypes  as $type)
                            {
                                id: '{{$type->id}}', name: '{{$type->name}}',
                            },
                            @endforeach
                        ],
                    },
                    @endforeach],
                workOrderChildTypes: [],
                grads: [
                        @foreach($grads as $key=>$item)
                    {
                        name: '{{$key}}', value: '{{$item}}'
                    },
                    @endforeach
                ],
                workOrder: {
                    work_order_type_id: null,
                    work_order_child_type_id: null,
                    grad: 1,
                    remark:null,
                },
            },
            watch: {
                step: function (newValue, OldValue) {
                    if (newValue === 1) {
                        this.workOrder.work_order_child_type_id = null;
                        this.workOrder.grad = 1;
                    } else if (newValue === 2) {
                        this.workOrder.grad = 1;
                    }
                },
            },
            created() {
                $("#list").removeClass("d-none");
            },
            methods: {
                changeStep(step) {
                    if (step < this.step) {
                        this.step = step;
                        return;
                    }
                    if (step === 2) {
                        if (this.workOrder.work_order_type_id === null) return;
                        else this.step = step;
                    } else if (step === 3) {
                        if (this.workOrder.work_order_child_type_id === null) return;
                        else this.step = step;
                    }
                },
                selectWorkOrderType(item) {
                    this.workOrder.work_order_type_id = item.id;
                    this.workOrderChildTypes = item['child_types'];
                    this.changeStep(2);
                },
                selectWorkOrderChildType(item) {
                    this.workOrder.work_order_child_type_id = item.id;
                    this.changeStep(3);
                },
                checkSubmit(){
                    if (this.workOrder.grad === null){
                        return false;
                    }
                    if (this.workOrder.remark === null){
                        window.tempTip.show("详细内容未必填项！");
                        return false;
                    }
                    document.getElementById('store_form').submit();
                },
            }
        });
    </script>
@endsection