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

<div>
    @if( \Illuminate\Support\Facades\Gate::check('订单管理-工单处理-宝时编辑') ||
            \Illuminate\Support\Facades\Gate::check('订单管理-工单处理-商家编辑') ||
             \Illuminate\Support\Facades\Gate::check('订单管理-工单处理-承运商编辑'))
    <div class="add-btn"
         style="position: absolute;display: none;margin-top: -35px;z-index: 51"
         :id="'AddProcessLogBtn'+item.pending_detail.id">
        <button type="button" class="btn btn-primary"
                @click="showAddDiv('addWorkOrderProcessLogForm'+item.pending_detail.id)">新
        </button>
    </div>

    <div class="addLogDiv row m-0 p-0 form-group" style="display: none;"
         :id="'addWorkOrderProcessLogForm'+item.pending_detail.id">
        <input type="hidden" name="id" :value="item.pending_detail.id">
        <div style="width: 45px"></div>
        <div class="form-inline m-2">
            <input type="text" name="content" :id="'addWorkOrderProcessLogFormInput_'+item.pending_detail.id"
                   class="form-control m-0 p-0"
                   style="width: 275px"
                   required>
            <button type="button"
                    class="btn btn-primary ml-2 m-0 p-0"
                    style="width: 50px"
                    @click="formStoreProcessLog(item.pending_detail.id,item.id)">添加
            </button>
        </div>
    </div>
    @endif
    <template class="p-0 m-0" v-if="item.process_logs.length > 0">
        <table class="table table-sm p-0 m-0 " :id="'logs'+item.pending_detail.id">
            <tr class="align-center position-static"
                v-for="(log,logIndex) in item.process_logs"
                v-on:mouseover="showDelBtn($event)"
                v-on:mouseleave="hideDelBtn($event)"
                @click="removeFocusing($event)"
                v-show="showWorkOrderProcessLog === item.id || logIndex<2">
                <td style="max-width: 175px;min-width: 175px;">
                    <span v-text="log.content"></span>
                </td>
                <td class="text-muted" style="max-width: 55px;min-width: 55px;">
                    <span v-if="log.user" v-text="log.user.name"></span>
                </td>
                <td class="text-muted" style="max-width: 150px;min-width: 150px;">
                    <span v-text="log.created_at"></span>
                </td>
                @if( \Illuminate\Support\Facades\Gate::check('订单管理-工单处理-宝时编辑') || \Illuminate\Support\Facades\Gate::check('订单管理-工单处理-商家编辑') )
                <td style="max-width: 35px;min-width: 35px;" class="m-0 p-0 border-0">
                    <button type="button"
                            class="btn btn-sm btn-outline-danger m-0 del-btn invisible"
                            @click="destroyProcessLog(item,log,logIndex)">
                        删
                    </button>
                </td>
                @endif
            </tr>
        </table>
        <div class="d-flex justify-content-center">
            <button type="button" class="btn btn-sm btn-outline-primary align-middle mt-1 center-block"
                    v-if="item.process_logs.length > 2 && showWorkOrderProcessLog !== item.id"
                    @click="showWorkOrderProcessLog = item.id"
                    v-text="'记录共'+item.process_logs.length +'条,点击展开'"></button>

            <button type="button" class="btn btn-sm btn-outline-primary align-middle mt-1 center-block"
                    v-show="showWorkOrderProcessLog === item.id"
                    @click="showWorkOrderProcessLog = null">点击收起</button>
        </div>

    </template>
    <div v-else class="" style="height:50px">
    </div>
</div>