处理结果内容进行动画优化

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

@@ -111,15 +111,45 @@
                                 <td class="text-center">
                                     @{{ item.issue_order_type ?item.issue_order_type : '' }}
                                 </td>
-                                <td class="text-center">
+                                <td class="text-center p-0">
                                     <template v-if="item.issue_logs">
-                                        <table>
-                                            <tr v-for="log in item.issue_logs">
-                                                <td>@{{ log.content }}</td>
-                                                <td>@{{ log.username }}</td>
-                                                <td>@{{ log.created_at }}</td>
-                                            </tr>
-                                        </table>
+                                        <template v-if="item.issue_logs.length === 1">
+                                            <table class="table table-sm m-0">
+                                                <tr class="table table-sm">
+                                                    <td>@{{ item.issue_logs[0].content }}</td>
+                                                    <td>@{{ item.issue_logs[0].username }}</td>
+                                                    <td>@{{ item.issue_logs[0].created_at }}</td>
+                                                </tr>
+                                            </table>
+                                        </template>
+                                        <template v-else>
+                                            <transition name="fade">
+                                            <table class="table table-sm m-0" v-if="selectOrderIssue === item.id">
+
+                                                    <tr v-for="log in item.issue_logs">
+                                                        <td>@{{ log.content }}</td>
+                                                        <td>@{{ log.username }}</td>
+                                                        <td>@{{ log.created_at }}</td>
+                                                    </tr>
+                                            </table>
+                                            </transition>
+                                            <transition name="fade">
+                                            <table class="table table-sm m-0" v-else>
+                                                <tr>
+                                                <td>@{{ item.issue_logs[0].content }}</td>
+                                                <td>@{{ item.issue_logs[0].username }}</td>
+                                                <td>@{{ item.issue_logs[0].created_at }}</td>
+                                                </tr>
+                                            </table>
+                                            </transition>
+                                            <button class="btn btn-sm btn-outline-primary"
+                                                    v-show="selectOrderIssue !== item.id"
+                                                    @click="selectOrderIssue = item.id">展开
+                                            </button>
+                                            <button class="btn btn-sm btn-outline-primary" v-show="selectOrderIssue === item.id"
+                                                    @click="selectOrderIssue = null">收起
+                                            </button>
+                                        </template>
                                     </template>
                                 </td>
                                 <td class="text-center">
@@ -171,6 +201,14 @@
 @section("lastScript")
     <script type="text/javascript" src="{{asset('js/queryForm/queryForm.js')}}"></script>
     <script type="text/javascript" src="{{asset('js/queryForm/header.js')}}"></script>
+    <style>
+        .fade-enter-active, .fade-leave-active {
+            transition: opacity .5s;
+        }
+        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+            opacity: 0;
+        }
+    </style>
     <script>
         let list = new Vue({
             el: "#list",
@@ -192,6 +230,7 @@
                 ],
                 selectOrderPackage: null,
                 selectOrder: null,
+                selectOrderIssue:null,
             },
             mounted() {
                 console.log();
@@ -241,7 +280,11 @@
                     {name: 'status', value: '状态'},
                     {name:'result_explain',value:'情况说明'},
                     {name:'orderIssueType',value:'问题件类别'},
-                    {name:'orderIssueProcessLogs',value:"处理结果"},
+                    {name:'orderIssueProcessLogs',type:'multi',title:"处理结果",rows:[
+                            {value:"内容",col:"4"},
+                            {value:"操作人",col:"4"},
+                            {value:"时间",col:"4"},
+                    ]},
                     {name: 'Info', value: '物流跟踪信息', neglect: true},
                     {name: 'creator', value: '创建人'},
                     {name: 'submit_at', value: '提交时间'},