|
|
@@ -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
|