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

<template>
  <div class="subPage edit-book" :style="{ padding: '20px' }">
    <div v-if="!active">
      <el-form style="text-align: center;">
        <el-form-item>
          <el-input v-model="customerInfo" placeholder="会员手机号或条形码" :style="{ width: '400px' }"></el-input>
        </el-form-item>
        <el-form-item :style="{ paddingTop: '20px' }">
          <el-button type="primary" @click="nextStep()">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>

      <!-- 用户信息区 -->
      <div :style="{ marginBottom: '20px', paddingBottom: '20px', borderBottom: '1px solid #eee' }">
        <el-row :gutter="20">
          <el-col :span="4">
            <span>姓名: </span><span>{{ borrowHistory.Name }}</span>
          </el-col>
          <el-col :span="4">
            <span>手机号: </span><span>{{ borrowHistory.Phone }}</span>
          </el-col>
          <el-col :span="4">
            <span>在借图书数量: </span><span>{{ borrowHistory.BorrowNum }}</span>
          </el-col>
          <el-col :span="4">
            <span>逾期图书数量: </span><span>{{ borrowHistory.LateNum }}</span>
          </el-col>
          <el-col :span="4">
            <span>历史是否有逾期: </span><span>{{ borrowHistory.IsLate === 'yes' ? '是' : '否' }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 过滤条件 -->
      <el-form inline>
        <el-form-item label="案场">
          <el-select v-model="caseId" size="medium" placeholder="请选择案场">
            <el-option
              v-for="item in cases"
              :key="item.CaseId"
              :label="item.CaseName"
              :value="item.CaseId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="条形码">
          <el-input ref="barcode" v-model="formData.barcode" :style="{ width: '200px' }"></el-input>
        </el-form-item>
        <el-form-item label="图书名">
          <el-input v-model="formData.name" :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%" @selection-change="x => selectList = x">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="BookBarcode" label="条形码"></el-table-column>
        <el-table-column prop="BookName" label="图书名"></el-table-column>
        <el-table-column label="分类">
          <template slot-scope="scope">
            <span>{{ getTypeName(scope.row.BookTypeId) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="LeftNum" label="可借数量"></el-table-column>
        <el-table-column prop="BorrowDays" label="规定借阅天数"></el-table-column>
      </el-table>

      <div :style="{ marginTop: '40px', marginBottom: '40px' }">
        <el-button type="primary" @click="submit()">立即借阅</el-button>
        <el-button @click="cancel()">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const {
  mapState: mapLibSate,
  mapActions,
  mapMutations,
} = createNamespacedHelpers('library')

export default {
  name: 'bookBorrow',
  data() {
    return {
      active: 0,
      customerInfo: '',
      formData: { caseid: '', barcode: '', name: '' },
      selectList: [],
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCase: x => x.app.cases.default,
      orgid: x => x.app.user.OrgId
    }),
    ...mapLibSate({
      list: s => s.list,
      types: s => s.type.list,
      borrowHistory: s => s.borrow.history,
    }),
    caseId: {
      get() {
        return this.formData.caseid || this.defaultCase
      },
      set(val) {
        this.formData.caseid = val
      },
    },
  },
  beforeRouteLeave (to, from, next) {
    this.resetStore('list')
    next()
  },
  methods: {
    ...mapMutations({
      resetStore: 'clearData',
    }),
    ...mapActions({
      getBorrowHistory: 'getBorrowHistory',
      getList: 'getBookList',
      getTypeList: 'getTypeList',
      borrowBooks: 'borrowBooks',
      setListNil: 'setListNil',
    }),

    nextStep() {
      if (!this.customerInfo) {
        this.$message({
          showClose: true,
          message: '请录入会员手机号或条形码',
          type: 'error'
        })
        return
      }

      this.getBorrowHistory({ customerInfo: this.customerInfo }).then(() => {
        this.active = 1
      }).catch(err => {
        this.$message({
          showClose: true,
          message: err,
          type: 'error'
        })
      })
    },

    search() {
      // 必须选案场
      if (!this.formData.caseid && !this.defaultCase) {
        this.$message({
          showClose: true,
          message: '请选择案场',
          type: 'error'
        })

        return
      }

      if (!this.formData.caseid) {
        this.formData.caseid = this.defaultCase
      }

      // 先扫码或者输入图书名称
      if (!this.formData.barcode && !this.formData.name) {
        this.$message({
          showClose: true,
          message: '请先扫码或者输入图书名称',
          type: 'error'
        })

        return
      }

      this.getTypeList({ page: 0, pagesize: 1000, caseid: this.formData.caseid })

      this.getList({
        ...this.formData,
        // customerphone: this.borrowHistory.Phone,
      }).then(res => {
        if (!res.list || res.list.length === 0) {
          this.$message({
            showClose: true,
            message: '没有查询到数据',
            type: 'error'
          })
        }
      }).catch(err => {
        this.$message({
          showClose: true,
          message: err,
          type: 'error'
        })
      })
    },

    submit() {
      if (!this.selectList || this.selectList.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择借阅图书',
          type: 'error'
        })

        return
      }

      this.$confirm('确定借阅此书?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const bookIds = this.selectList.map(({BookId}) => BookId).join(',')
          this.borrowBooks({
            bookIds,
            customerId: this.borrowHistory.CustomerId,
          }).then(() => {
            this.$message({
              showClose: true,
              message: '借阅成功',
              type: 'success'
            })
            this.formData.barcode = ''
            this.formData.name = ''
            this.getBorrowHistory({ customerInfo: this.customerInfo })
            this.setListNil()
          }).catch(err => {
            this.$message({
              showClose: true,
              message: err,
              type: 'error'
            })
          })
        })
        .catch(x => x)
    },

    getTypeName(id) {
      return (this.types.filter(x => x.BookTypeId === id)[0] || {}).BookTypeName
    },
    cancel() {
      this.customerInfo = ''
      this.active = 0
    }
  }
}
</script>

<style lang="scss">
</style>