xcx

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

         <div class="flex-item flex-h"></div>
         <ul style="white-space: normal;">
           <li style="margin-bottom: 15px;">
-            <el-input placeholder="请输入条形码" v-model="postData.BarCode"></el-input>
+            <el-input placeholder="请输入条形码" v-model="postData.barcode"></el-input>
           </li>
           <li style="margin-bottom: 15px;">
-            <el-input placeholder="请输入图书名" v-model="postData.BookName"></el-input>
+            <el-input placeholder="请输入图书名" v-model="postData.bookname"></el-input>
           </li>
           <li style="margin-bottom: 15px;">
-            <el-input placeholder="请输入用户名" v-model="postData.UserName"></el-input>
+            <el-input placeholder="请输入用户名" v-model="postData.customername"></el-input>
           </li>
           <li style="margin-bottom: 15px;">
-            <el-input placeholder="请输入手机号" v-model="postData.Tel"></el-input>
+            <el-input placeholder="请输入手机号" v-model="postData.customerphone"></el-input>
           </li>
           <li style="margin-bottom: 15px;">
             <el-select v-model="CaseId" placeholder="请选择案场">
     </div>
     <div class="system-table-box">
       <el-table :data="list" stripe style="width: 100%">
-        <el-table-column prop="GoodsName" label="案场"></el-table-column>
+        <el-table-column label="案场">
+          <template slot-scope="scope">{{returnCaseName(scope.row.CaseId)}}</template>
+        </el-table-column>
         <el-table-column label="图片" width="300">
           <template slot-scope="scope">
-            <img :src="((scope.row.Images || [])[0] || {}).ImgUrl" style="width:200px;">
+            <img :src="scope.row.BookImg" style="height: 150px;">
           </template>
         </el-table-column>
-        <el-table-column prop="BarCode" label="条形码"></el-table-column>
+        <el-table-column prop="BookBarcode" label="条形码"></el-table-column>
         <el-table-column prop="BookName" label="图书名"></el-table-column>
-        <el-table-column prop="UserName" label="用户名"></el-table-column>
-        <el-table-column prop="Tel" label="手机号"></el-table-column>
-        <el-table-column prop="xxDate" label="预约时间"></el-table-column>
-        <el-table-column prop="xxDate" label="保留时间"></el-table-column>
+        <el-table-column prop="CustomerName" label="用户名"></el-table-column>
+        <el-table-column prop="CustomerPhone" label="手机号"></el-table-column>
+        <el-table-column label="预约时间">
+          <template slot-scope="scope">{{toolClass.dateFormat(scope.row.ReserveDate)}}</template>
+        </el-table-column>
+        <el-table-column label="保留时间">
+          <template slot-scope="scope">{{toolClass.dateFormat(scope.row.ReserveEndDate)}}</template>
+        </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
-            <el-button size="mini" type="warning">取消预约</el-button>
+            <el-button size="mini" type="warning" @click="cancel(scope.row.BookBorrowRecordId)">取消预约</el-button>
           </template>
         </el-table-column>
       </el-table>
       <el-pagination
-        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page.sync="postData.page"
         :page-size="postData.pagesize"
   name: 'borrowList',
   data () {
     return {
-      total: 1000,
+      total: 1,
       postData: {
-        BarCode: '',
-        BookName: '',
-        UserName: '',
-        Tel: '',
-        Status: '',
-        CaseId: '',
+        barcode: '',
+        bookname: '',
+        customername: '',
+        customerphone: '',
+        borrowstatus: '4',
+        caseid: '',
         page: 1,
         pagesize: 10
       },
       statusList: [{
         id: '',
         value: ''
-      }],
-      list: []
+      }]
     }
   },
   created () {
+    this.getBorrowList({ ...this.postData }).then((res) => {
+      this.page = res.page
+      this.total = res.pagenum
+    })
   },
   computed: {
     ...mapState({
       orgid: x => x.app.user.OrgId
     }),
     ...mapLibSate({
+      list: x => x.borrow.list
     }),
     CaseId: {
       get () {
-        return this.postData.CaseId || this.defaultCaseId
+        return this.postData.caseid || this.defaultCaseId
       },
       set (val) {
-        this.postData.CaseId = val
+        this.postData.caseid = val
       }
     }
   },
   methods: {
-    ...mapLibActions([]),
-    search () {
-
+    ...mapLibActions(['getBorrowList', 'cancelBorrow']),
+    cancel (id) {
+      this.$confirm('确认取消预约?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.cancelBorrow(id).then(() => {
+          this.getBorrowList({ ...this.postData }).then((res) => {
+            this.page = res.page
+            this.total = res.pagenum
+          })
+        })
+      })
     },
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+    search () {
+      this.page = 1
+      this.getBorrowList({ ...this.postData }).then((res) => {
+        this.page = res.page
+        this.total = res.pagenum
+      })
     },
     handleCurrentChange (val) {
+      this.postData.page = val
+      this.getBorrowList({ ...this.postData }).then((res) => {
+        this.page = res.page
+        this.total = res.pagenum
+      })
     },
+    returnCaseName (id) {
+      var name = ''
+      this.cases.map((item) => {
+        if (item.CaseId === id) name = item.CaseName
+      })
+      return name
+    }
   }
 }
 </script>

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

             <el-input placeholder="请输入图书名" v-model="postData.bookname"></el-input>
           </li>
           <li style="margin-bottom: 15px;">
-            <el-input placeholder="请输入借阅人" v-model="postData.borrowername"></el-input>
+            <el-input placeholder="请输入借阅人" v-model="postData.customername"></el-input>
           </li>
           <li style="margin-bottom: 15px;">
-            <el-input placeholder="请输入手机号" v-model="postData.tel"></el-input>
+            <el-input placeholder="请输入手机号" v-model="postData.customerphone"></el-input>
           </li>
           <li style="margin-bottom: 15px;">
             <el-select v-model="CaseId" placeholder="请选择案场">
     </div>
     <div class="system-table-box">
       <el-table :data="list" stripe style="width: 100%">
-        <el-table-column prop="GoodsName" label="案场"></el-table-column>
+        <el-table-column label="案场">
+          <template slot-scope="scope">{{returnCaseName(scope.row.CaseId)}}</template>
+        </el-table-column>
         <el-table-column label="图片" width="300">
           <template slot-scope="scope">
-            <img :src="((scope.row.Images || [])[0] || {}).ImgUrl" style="width:200px;">
+            <img :src="scope.row.BookImg" style="height: 150px;">
           </template>
         </el-table-column>
-        <el-table-column prop="BarCode" label="条形码"></el-table-column>
+        <el-table-column prop="BookBarcode" label="条形码"></el-table-column>
         <el-table-column prop="BookName" label="图书名"></el-table-column>
-        <el-table-column prop="BorrowerName" label="借阅人"></el-table-column>
-        <el-table-column prop="Tel" label="手机号"></el-table-column>
-        <el-table-column prop="CreateDate" label="借阅时间"></el-table-column>
-        <el-table-column prop="xxDate" label="规定归还时间"></el-table-column>
-        <el-table-column prop="xxDate" label="实际归还时间"></el-table-column>
-        <el-table-column prop="Status" label="状态"></el-table-column>
+        <el-table-column prop="CustomerName" label="借阅人"></el-table-column>
+        <el-table-column prop="CustomerPhone" label="手机号"></el-table-column>
+        <el-table-column label="借阅时间">
+          <template slot-scope="scope">{{toolClass.dateFormat(scope.row.BorrowDate)}}</template>
+        </el-table-column>
+        <el-table-column label="规定归还时间">
+          <template slot-scope="scope">{{toolClass.dateFormat(scope.row.EndDate)}}</template>
+        </el-table-column>
+        <el-table-column label="实际归还时间">
+          <template slot-scope="scope">{{toolClass.dateFormat(scope.row.ReturnDate)}}</template>
+        </el-table-column>
+        <el-table-column label="状态">
+          <template slot-scope="scope">{{returnStatus(scope.row.BorrowStatus)}}</template>
+        </el-table-column>
       </el-table>
       <el-pagination
         @current-change="handleCurrentChange"
   name: 'borrowList',
   data () {
     return {
-      total: 1000,
+      total: 1,
       postData: {
         barcode: '',
         bookname: '',
-        borrowername: '',
-        tel: '',
+        customername: '',
+        customerphone: '',
         borrowstatus: '',
         caseid: '',
         page: 1,
       statusList: [{
         id: '',
         value: ''
+      }, {
+        id: '0',
+        value: '延期'
+      }, {
+        id: '1',
+        value: '借阅中'
+      }, {
+        id: '2',
+        value: '已归还'
+      }, {
+        id: '3',
+        value: '逾期归还'
+      }, {
+        id: '4',
+        value: '预约中'
+      }, {
+        id: '5',
+        value: '过期'
+      }, {
+        id: '6',
+        value: '取消'
       }]
     }
   },
         this.total = res.pagenum
       })
     },
+    returnCaseName (id) {
+      var name = ''
+      this.cases.map((item) => {
+        if (item.CaseId === id) name = item.CaseName
+      })
+      return name
+    },
+    returnStatus (id) {
+      var status = ''
+      this.statusList.map((item) => {
+        if (item.id === id) status = item.value
+      })
+      return status
+    }
   }
 }
 </script>

src/store/library/index.js

     }
   },
   actions: {
+    cancelBorrow ({ commit }, payload) { // 取消预约
+      return new Promise((resolve, reject) => {
+        ajax(api.borrow.cancelBorrow.url, {
+          method: api.borrow.cancelBorrow.method,
+          urlData: { id: payload }
+        }).then(res => {
+          resolve(res)
+        }).catch(({ message }) => reject(message))
+      })
+    },
     getBorrowList ({ commit }, payload) { // 获取借阅记录
       return new Promise((resolve, reject) => {
         ajax(api.borrow.getBorrowList.url, {

src/util/api.js

     getBorrowList: {
       method: 'get',
       url: `${baseUrl}${common}/book/record`
-    },    
+    },
+    cancelBorrow: {
+      method: 'put',
+      url: `${baseUrl}${common}/book/cancel/:id`
+    }
   },
   bookType: {
     list: {