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

@extends("layouts.app")
@section('title','处理工单')
@section("content")
    <div class="container-fluid d-none" id="list">
        <div>
            <div class="">
                <div id="form_div" style="min-width: 1220px;"></div>
                <div class="form-inline mt-1" id="btn">
                    @can('订单管理-订单问题件生成')
                       <span class="ml-1">
                       <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="createOrderIssue(null,false)" style="background: #dad7e8;">生成问题件</button>
                       </span>
                   @endcan
                </div>

                <div>

                    <table class="table table-sm table-striped table-hover table-bordered td-min-width-80" id="table">
                        <tbody class="">
                        <template v-for="(item,i) in workOrders">
                            <tr @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                                <td>
                                    <label><input type="checkbox" :value="item.id"></label>
                                </td>
                                <td class="text-center">
                                    <span>@{{ i+1 }}</span>
                                    <span v-if="item.order  && item.order.issue" class="badge badge-primary">问题件</span>
                                </td>
                                <td class="text-center">
                                    <template v-if="item.status === '已处理'">
                                        <h5><span class="badge badge-secondary"
                                                  style="opacity: 0.7">@{{ item.grad }}</span></h5>
                                    </template>
                                    <template v-else>
                                        <h5><span class="badge badge-light" style="opacity: 0.7"
                                                  v-if="item.grad === '一般'">@{{ item.grad }}</span></h5>
                                        <h5><span class="badge badge-primary" style="opacity: 0.7"
                                                  v-if="item.grad === '重要'">@{{ item.grad }}</span></h5>
                                        <h5><span class="badge badge-warning" style="opacity: 0.7"
                                                  v-if="item.grad === '紧急'">@{{ item.grad }}</span></h5>
                                        <h5><span class="badge badge-danger" style="opacity: 0.7"
                                                  v-if="item.grad === '重要且紧急'">@{{ item.grad }}</span></h5>
                                    </template>
                                </td>
                                <td>@{{item.type ? item.type.name : '' }}</td>
                                <td class="text-center">@{{ item.status }}</td>
                                <td class="text-center">@{{ item.creator.name }}</td>
                                <td class="text-center">@{{ item.created_at }}</td>
                                <td class="text-center">@{{ item.remark }}</td>
                                <td class="text-center">
                                    <template v-if="item.order">
                                        <template v-if="item.order.packages && item.order.packages.length === 1">
                                            <p>@{{ item.order.packages[0].logistic_number }}</p>
                                        </template>
                                        <template v-else-if="item.order.packages && item.order.packages.length > 0">
                                            <template v-if="selectOrder === item.order.id">
                                                <template v-for="(package,index) in item.order.packages">
                                                    @{{ package.logistic_number }}
                                                </template>
                                            </template>
                                            <template v-else>
                                                <p>@{{ item.order.packages[0].logistic_number }}</p>
                                            </template>
                                            <button class="btn btn-sm btn-outline-primary"
                                                    @click="selectOrder = item.order.id">
                                                展开
                                            </button>
                                            <button class="btn btn-sm btn-outline-primary" @click="selectOrder = null">
                                                收起
                                            </button>
                                        </template>

                                    </template>
                                </td>
                                <td class="text-center">
                                    <template v-if="item.review_at">
                                        <div v-if="item.order && item.order.packages">
                                            <template v-for="package in item.order.packages">
                                                <template
                                                    v-if="package.transfer_status && package.transfer_status.length > 0">
                                                    <div v-if="selectOrderPackage === package.id">
                                                        <template v-for="transfer in package.transfer_status">
                                                            <p>@{{
                                                                transfer['accept_time']+':'+transfer['accept_address']
                                                                }}</p>
                                                        </template>
                                                    </div>
                                                    <div v-else>
                                                        @{{ package.transfer_status[0]['accept_time']+':'+package.transfer_status[0]['accept_address'] }}
                                                    </div>
                                                    <button class="btn btn-sm btn-outline-primary" v-if="selectOrderPackage !== package.id"
                                                            @click="selectOrderPackage = package.id">展开
                                                    </button>
                                                    <button class="btn btn-sm btn-outline-primary" v-else
                                                            @click="selectOrderPackage = null">收起
                                                    </button>
                                                </template>
                                            </template>
                                        </div>
                                    </template>
                                </td>
                                <td>@{{ item.reviewer ? item.reviewer.name : ''}}</td>
                                <td>@{{ item.review_at }}</td>
                                <td class="text-center">

                                    @can('订单管理-订单问题件生成')
                                        <template v-if="item.type && item.type.name === '订单拦截' && item.status !== '已处理' ">
                                            <button class="btn btn-sm btn-outline-primary" @click="createOrderIssue(item,true)" v-if="item.order && item.order.issue === null">
                                                生成问题件
                                            </button>
                                        </template>
                                    @endcan

                                    @can('订单管理-工单处理-审核')
                                        <button class="btn btn-sm btn-outline-success" v-if="item.status !== '已处理'" @click="review(item,i)">
                                            审核
                                        </button>
                                    @endcan
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                    {{ $workOrders->withQueryString()->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection()

@section("lastScript")
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/header.js')}}"></script>
    <script>
        let list = new Vue({
            el: "#list",
            data: {
                workOrders: {!! $workOrders->toJson() !!}['data'],
                selectTr: null,
                form: null,
                logistics: [
                    @foreach($logistics as $logistic)
                    {name:{{$logistic->id}}, value: '{{$logistic->name}}'},
                    @endforeach
                ],
                selectOrderPackage: null,
                selectOrder: null,
            },
            mounted() {
                console.log();
                let data = [[
                    {name: 'created_at_start', type: 'time', tip: ['工单创建开始日期', '时间']},
                    {name: 'created_at_end', type: 'time', tip: ['工单创建结束日期', '时间']},
                    {
                        name: 'logistic',
                        type: 'select_multiple_select',
                        data:this.logistics,
                        tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的承运商'],
                        placeholder: ['承运商', '定位或多选承运商']
                    },
                ], [{name: 'review_at_start', type: 'time', tip: ['工单审核开始日期', '时间']},
                    {name: 'review_at_end', type: 'time', tip: ['工单审核结束日期', '时间']},
                ]];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.form.init();
                let column = [
                    {name: 'no', value: '序号', neglect: true},
                    {name: 'grad', value: '工单等级'},
                    {name: 'type', value: '相关类型'},
                    {name: 'status', value: '状态', neglect: true},
                    {name: 'creator', value: '创建人'},
                    {name: 'submit_at', value: '提交时间'},
                    {name: 'workOrderInfo', value: '问题描述'},
                    {name: 'logisticNumber', value: '快递单号'},
                    {name: 'Info', value: '物流跟踪信息', neglect: true},
                    {name: 'reviewer', value: '审核人'},
                    {name: 'review_at', value: '审核时间'},
                    {name: 'operation', value: '操作', neglect: true},
                ];

                new Header({
                    el: "table",
                    name: "area",
                    column: column,
                    data: this.workOrders,
                    fixedTop: ($('#form_div').height()) + 2,
                }).init();
                $("#list").removeClass("d-none");
            },
            created() {
                let self = this;
                $.each(this.workOrders, function (index, workOrder) {
                    if (!workOrder.order) return;
                    if (!workOrder.order.packages) return;
                    self.sortOrder(workOrder);
                });
            },
            methods: {
                sortOrder(workOrder) {
                    let self = this;
                    if (!workOrder.order) return;
                    if (!workOrder.order.packages) return;
                    $.each(workOrder.order.packages, function (i, item) {
                        self.sortTransfer(item);
                    })
                },
                sortTransfer(item) {
                    if (!("transfer_status" in item)) return;
                    if (item.transfer_status == null || !(item.transfer_status instanceof Array)) return;
                    item.transfer_status.sort(function (item1, item2) {
                        let date1 = new Date(item1['accept_time']);
                        let date2 = new Date(item2['accept_time']);
                        if (date1 - date2 > 0) return -1;
                        if (date1 - date2 < 0) return 1;
                        return 0;
                    });
                },
                review(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);
                            this.sortOrder(res.data.data);
                            window.tempTip.showSuccess("审核完成");
                        } else {
                            window.tempTip.show(res.data.message ? res.data.message : '审核异常');
                        }
                    }).catch(err => {
                        window.tempTip.show(err)
                    })
                },
                createOrderIssue(item, tag) { // 生成问题件
                    let url = '{{url('apiLocal/workOrder/createOrderIssue')}}';
                    let data = {};
                    let _this = this;
                    if (tag) data.ids = [item.id];
                    else data.ids = checkData;

                    if (!confirm('是否生成对应的问题件')) return;

                    window.axios.post(url, data).then(res => {
                        if (res.data.success) {
                            if(res.data.data ){
                                $.each(res.data.data,(i,data)=>{
                                    $.each(_this.workOrders,(index,item)=>{
                                        if (item.id === data.id){
                                            _this.$set(this.workOrders,index,data);
                                        }
                                    });
                                });
                            }
                            this.$forceUpdate();
                            window.tempTip.showSuccess('已生成对应的问题件');
                        } else {
                            window.tempTip.show(res.data.message ? res.data.message : '生成问题件异常');
                        }
                    }).catch(err => {
                        window.tempTip.show(err)
                    });
                },

            },
        });
    </script>
@endsection