车辆保养记录详情

src/api/vehicle/upkeep/index.js

@@ -44,3 +44,10 @@ export function logPage(param) {
     params: param
   })
 }
+
+export function getLog(id) {
+  return fetch({
+    url: '/vehicle/upkeep/log/' + id,
+    method: 'get'
+  })
+}

src/views/vehicle/vehicleUpkeepLog/index.vue

@@ -42,23 +42,68 @@
           <span>{{scope.row.branchCompanyName}}</span>
         </template>
       </el-table-column>
+      <el-table-column align="center" label="操作" width="100">
+        <template scope="scope">
+          <el-button size="small" type="success" @click="getLogInfo(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <div v-show="!listLoading" class="pagination-container">
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
     </div>
+
+    <el-dialog title="保养详情" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form" label-width="100px">
+        <el-form-item label="车牌号" prop="name">
+          <el-input v-model="form.numberPlate" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="保养人" prop="operator">
+          <el-input v-model="form.operator"></el-input>
+        </el-form-item>
+        <el-form-item label="公里数" prop="mileage">
+          <el-input v-model="form.mileage"></el-input>
+        </el-form-item>
+        <el-form-item label="总费用" prop="amount">
+          <el-input v-model="form.amount"></el-input>
+        </el-form-item>
+        <el-form-item label="审批人" prop="approvers">
+          <el-input v-model="form.approvers"></el-input>
+        </el-form-item>
+        <el-form-item label="保养分公司" prop="approvers">
+          <el-input v-model="form.branchCompanyName"></el-input>
+        </el-form-item>
+        <el-form-item label="保养项目" prop="upkeepItems">
+          <el-checkbox v-for="item in form.upkeepItems" :label="item.id" checked>{{item.itemName}}</el-checkbox>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 <script>
   import {
-    logPage
+    logPage,
+    getLog
   } from '../../../api/vehicle/upkeep';
+  import rsCode from '../../../utils/rsCode';
 
   export default {
     name: 'vehicleUpkeepLog',
     data() {
       return {
+        form: {
+          vehicleId: null,
+          numberPlate: null,
+          operator: null,
+          date: null,
+          mileage: null,
+          amount: null,
+          approvers: null,
+          branchCompanyId: null,
+          branchCompanyName: null,
+          upkeepItems: []
+        },
         list: null,
         total: null,
         listLoading: true,
@@ -67,13 +112,22 @@
           limit: 20,
           numberPlate: undefined
         },
-        tableKey: 0
+        tableKey: 0,
+        dialogFormVisible: false
       }
     },
     created() {
       this.getList();
     },
     methods: {
+      getLogInfo(row) {
+        getLog(row.id).then(response => {
+          if (response.code === rsCode.RS_CODE_SUC) {
+            this.dialogFormVisible = true;
+            this.form = response.data;
+          }
+        });
+      },
       handleFilter() {
         this.getList();
       },