工单index create 页面

resources/views/order/workOrder/create.blade.php

@@ -0,0 +1,198 @@
+@extends("layouts.app")
+
+@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

resources/views/order/workOrder/index.blade.php

@@ -0,0 +1,105 @@
+@extends("layouts.app")
+
+@section("content")
+    <div class="container-fluid" id="list">
+        <div id="form_div"></div>
+        <table class="table table-striped table-md">
+            <thead>
+            <tr>
+                <th>序号</th>
+                <th>工单编号</th>
+                <th>工单等级</th>
+                <th>相关类型</th>
+                <th>问题描述</th>
+                <th>状态</th>
+                <th>创建人</th>
+                <th>提交时间</th>
+                <th>审核人</th>
+                <th>审核时间</th>
+                <th>操作</th>
+            </tr>
+            </thead>
+            <tbody>
+            <template v-for="(item,i) in workOrders">
+                <tr @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
+                    <td>@{{i+1}}</td>
+                    <td>@{{item.id}}</td>
+                    <td>
+                        <template v-if="item.status === '已处理'">
+                            <span class="badge badge-secondary">@{{ item.grad }}</span>
+                        </template>
+                        <template v-else>
+                            <span class="badge badge-light" v-if="item.grad === '一般'">@{{ item.grad }}</span>
+                            <span class="badge badge-info" v-if="item.grad === '重要'">@{{ item.grad }}</span>
+                            <span class="badge badge-warning" v-if="item.grad === '紧急'">@{{ item.grad }}</span>
+                        </template>
+                    </td>
+                    <td>@{{item.type ? item.type.name : '' }} - @{{ item.child_type ? item.child_type.name : '' }}</td>
+                    <td>@{{ item.remark }}</td>
+                    <td>@{{ item.status }}</td>
+                    <td>@{{ item.creator.name }}</td>
+                    <td>@{{ item.created_at }}</td>
+                    <td>@{{ item.reviewer ? item.reviewer.name : ''}}</td>
+                    <td>@{{ item.review_at }}</td>
+                    <td>
+                        @can('订单管理-工单处理-编辑')
+                            <button class="btn btn-sm btn-outline-primary" v-if="item.status !== '已处理'"
+                                    @click="reviewWorkOrder(item,i)">审核
+                            </button>
+                        @endcan()
+                    </td>
+                </tr>
+            </template>
+            </tbody>
+            {{ $workOrders->withQueryString()->links() }}
+        </table>
+    </div>
+@endsection()
+
+@section("lastScript")
+    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
+    <script>
+        let list = new Vue({
+            el: "#list",
+            data: {
+                workOrders: {!! $workOrders->toJson() !!}['data'],
+                selectTr: null,
+            },
+            created() {
+                let data = [
+                    [
+                        {name: 'created_at_start', type: 'dateTime', tip: '创建开始时间'},
+                        {name: 'created_at_end', type: 'dateTime', tip: '创建结束日期'},
+                        {name: 'review_at_start', type: 'dateTime', tip: '审核开始时间'},
+                        {name: 'review_at_end', type: 'dateTime', tip: '审核结束时间'},
+                    ],
+                ];
+                this.form = new query({
+                    el: '#form_div',
+                    condition: data,
+                    appendDom: "btn",
+                    paginations: [50, 100, 200, 500, 1000, 20],
+                })
+                this.form.init();
+            },
+            methods: {
+                // todo 审核工单
+                reviewWorkOrder(item, i) {
+                    let url = '{{url('apiLocal/workOrder/review')}}';
+                    let data = {id: item.id};
+                    window.axios.post(url, data).then(res => {
+                        if (res.data.success) {
+                            this.$set(this.workOrders, i, res.data.data);
+                            console.log(res.data.data);
+                            window.tempTip.showSuccess("审核完成");
+                        } else {
+                            window.tempTip.show(res.data.message ? '审核异常' : res.data.message);
+                        }
+                    }).catch(err => {
+                        window.tempTip.show(err)
+                    })
+                },
+            },
+        });
+    </script>
+@endsection