feats

src/pages/system/library/borrow/bookreturn.vue

       </el-form>
     </div>
     <div v-else>
-
       <!-- 用户信息区 -->
-      <el-form label-width="100px">
+      <el-form label-width="120px" inline :style="{ width: '100%' }">
         <el-form-item label="姓名">
           <span>{{ borrowHistory.CustomerName }}</span>
         </el-form-item>
         </el-form-item>
       </el-form>
 
-      <!-- 过滤条件 -->
-      <el-form inline>
-        <el-form-item label="条形码">
-          <el-input v-model="formData.BookBarcode" :style="{ width: '200px' }" :disabled="true"></el-input>
-        </el-form-item>
-        <el-form-item label="书名" prop="BookName">
-          <el-input v-model="formData.BookName" :style="{ width: '200px' }"></el-input>
-        </el-form-item>
-        <el-form-item :style="{ float: 'right' }">
-          <el-button type="primary" @click="search()">搜索</el-button>
-        </el-form-item>
-      </el-form>
-
       <!-- 可借阅列表 -->
       <el-table :data="list" border style="width: 100%">
         <el-table-column prop="BookBarcode" label="条形码"></el-table-column>
         <el-table-column prop="BookName" label="书名"></el-table-column>
         <el-table-column prop="BookTypeName" label="分类"></el-table-column>
         <el-table-column prop="ReturnDate" label="规定归还日期"></el-table-column>
-        <el-table-column prop="LeftNum" label="逾期天数"></el-table-column>
+        <el-table-column label="逾期天数">
+          <template slot-scope="scope">
+            <span>{{ diffToday(scope.row.ReturnDate) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="150">
+          <template slot-scope="scope">
+            <el-button @click="isBookReturn(scope.row)" type="text" size="small">归还</el-button>
+          </template>
+        </el-table-column>
       </el-table>
 
       <div :style="{ paddingTop: '40px' }">
-        <el-button type="primary" @click="submit()">立即借阅</el-button>
         <el-button @click="$router.back()">取消</el-button>
       </div>
     </div>
 <script>
 import { createNamespacedHelpers, mapState } from 'vuex'
 
-const {
-  mapState: mapLibSate,
-  mapActions,
-} = createNamespacedHelpers('library')
+const { mapState: mapLibSate, mapActions } = createNamespacedHelpers('library')
 
 export default {
   name: 'bookReturn',
   data() {
     return {
       active: 0,
-      customerInfo: '',
-      borrowHistory: {},
-      formData: {},
-      selectList: [],
+      customerInfo: ''
     }
   },
   created() {
     if (id) {
       this.active = 1
 
-      this.getInfo({
-        BookId: id
-      }).catch(err => {
+      this.getBorrowHistory({ customerInfo: this.customerInfo }).catch(err => {
+        this.$message({
+          showClose: true,
+          message: err,
+          type: 'error'
+        })
+      })
+
+      this.getList({ customerInfo: this.customerInfo }).catch(err => {
         this.$message({
           showClose: true,
           message: err,
       orgid: x => x.app.user.OrgId
     }),
     ...mapLibSate({
-      list: s => s.borrow.list,
-      borrowHistory: s => s.borrow.history,
-    }),
+      list: s => s.bookReturn.list,
+      borrowHistory: s => s.borrow.history
+    })
   },
   methods: {
     ...mapActions({
       getBorrowHistory: 'getBorrowHistory',
-      getList: 'getBorrowList',
-      borrowBooks: 'borrowBooks'
+      getList: 'getReturnList',
+      returnBook: 'returnBook'
     }),
 
     nextStep() {
         return
       }
 
-      this.getBorrowHistory({ customerInfo: this.customerInfo }).then(() => {
-        this.active = 1
-      }).catch(err => {
-        this.$message({
-          showClose: true,
-          message: err,
-          type: 'error'
+      this.getBorrowHistory({ customerInfo: this.customerInfo })
+        .then(() => {
+          this.active = 1
         })
-      })
-    },
-
-    search() {
-      this.getBorrowList(this.formData).catch(err => {
-        this.$message({
-          showClose: true,
-          message: err,
-          type: 'error'
+        .catch(err => {
+          this.$message({
+            showClose: true,
+            message: err,
+            type: 'error'
+          })
         })
-      })
     },
 
-    submit() {
-      this.$confirm('确定借阅此书?', '提示', {
+    isBookReturn(book) {
+      this.$confirm('确定归还此书?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       })
         .then(() => {
-          this.borrowBooks(this.selectList).then(() => {
-            this.$message({
-              showClose: true,
-              message: '借阅成功',
-              type: 'success'
+          this.returnBook(book)
+            .then(() => {
+              this.$message({
+                showClose: true,
+                message: '归还成功',
+                type: 'success'
+              })
             })
-          }).catch(err => {
-            this.$message({
-              showClose: true,
-              message: err,
-              type: 'error'
+            .catch(err => {
+              this.$message({
+                showClose: true,
+                message: err,
+                type: 'error'
+              })
             })
-          })
         })
         .catch(x => x)
     },
+
+    diffToday(dt) {
+      const days =
+        (new window.Date().getTime() - dt.getTime()) / (1000 * 60 * 60 * 24)
+      return days <= 0 ? 0 : days
+    }
   }
 }
 </script>

src/pages/system/page.js

 
 import BorrowManager from './library/borrow' // 借阅管理
 import BorrowBooks from './library/borrow/borrow' // 借阅管理
+import ReturnBooks from './library/borrow/bookreturn' // 图书归还
 
 export default {
   router: [
           name: 'borrowBooks',
           component: BorrowBooks,
           children: []
+        },{ // 图书归还
+          path: 'bookreturn',
+          name: 'bookReturn',
+          component: ReturnBooks,
+          children: []
         }]
       }]
     },