xcx

src/pages/system/library/books/detail.vue

           <el-input v-model="formData.BookBarcode" :style="{ width: '200px' }" :disabled="true"></el-input>
         </el-form-item>
         <el-form-item label="案场" prop="CaseId">
-          <el-select v-model="formData.CaseId" placeholder="请选择案场">
+          <el-select v-model="formData.CaseId" placeholder="请选择案场" @change="filterTypes">
             <el-option
               v-for="item in cases"
               :key="item.CaseId"
               :label="item.CaseName"
               :value="item.CaseId"
-              @change="filterTypes"
             ></el-option>
           </el-select>
         </el-form-item>
     if (id) {
       this.active = 1
 
-      this.getInfo({
-        BookId: id
+      this.getInfo({ id }).then((x) => {
+        this.filterTypes(x.CaseId)
       }).catch(err => {
         this.$message({
           showClose: true,
   watch: {
     detail: {
       handler (nv, ov) {
+        console.log(nv)
         if (nv.BookId === this.formData.BookId) {
           return
         }
       },
       immediate: true,
     },
-    formData: {
-      handler (nv) {
-        this.mergeDetail(nv)
-      },
-      deep: true,
-    },
+    // formData: {
+    //   handler (nv) {
+    //     console.log('----------', nv)
+    //     this.bookImg = nv.BookImg
+    //   },
+    //   deep: true,
+    // },
   },
   methods: {
     ...mapMutations({
     },
 
     uploadSuccess(res) {
-      this.formData.BookImg = res.result.url
+      this.$set(this.formData, 'BookImg', res.result.url)
+      // this.formData.BookImg = res.result.url
     },
 
     filterTypes(val) {
-      const CaseId = val
-      this.getTypeList({ page: 0, CaseId, pagesize: 10000 })
+      this.getTypeList({ page: 0, caseid: val, pagesize: 10000 })
     },
 
     submit() {
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
-          this.updateDetail()
+          if (!this.formData.Price) {
+            this.formData.Price = 0
+          }
+
+          this.updateDetail(this.formData)
             .then(() => {
               this.$message({
                 showClose: true,

src/pages/system/library/books/list.vue

     <div>
       <el-form inline>
         <el-form-item label="案场">
-          <el-select v-model="caseId" size="medium" placeholder="请选择案场" @change="filterList">
+          <el-select v-model="caseId" size="medium" placeholder="请选择案场">
             <el-option
               v-for="item in cases"
               :key="item.CaseId"
           <el-input v-model="bookName"></el-input>
         </el-form-item>
         <el-form-item :style="{ float: 'right' }">
-          <el-button type="primary" size="medium">搜索</el-button>
+          <el-button type="primary" size="medium" @click="filterList">搜索</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div>
       <el-button plain @click="editBook()" size="medium">图书录入</el-button>
-      <el-button plain @click="showBatchInput()" size="medium">批量导入</el-button>
-      <el-button type="text" size="medium">点击下载导入模板</el-button>
+      <el-button plain @click="showDialog = true" size="medium">批量导入</el-button>
       <div :style="{ margin: '10px 0' }">
         <el-table :data="list" border style="width: 100%">
-          <el-table-column label="图片" width="250">
+          <el-table-column label="图片" width="128">
             <template slot-scope="scope">
-              <img width="150" :src="scope.row.BookImg" alt>
+              <img width="64" :src="scope.row.BookImg" alt>
             </template>
           </el-table-column>
           <el-table-column prop="BookBarcode" label="条码"></el-table-column>
         ></el-pagination>
       </div>
     </div>
+    <el-dialog
+      title="批量导入"
+      :visible.sync="showDialog"
+      width="50%">
+      <div :style="{ margin: 'auto', width: '80%' }">
+        <div><el-button @click="showBatchInput" :style="{ width: '100%' }">上传文件</el-button></div>
+        <div><el-button type="text" size="medium" :style="{ float: 'right' }">下载导入模板</el-button></div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="showDialog = false">确 定</el-button>
+        <el-button @click="showDialog = false">取 消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
       caseId: '',
       bookBarcode: '',
       bookName: '',
-      inputRef: window.document.createElement('input')
+      inputRef: window.document.createElement('input'),
+      showDialog: false,
     }
   },
   computed: {
       getList: 'getBookList',
       getTypeList: 'getTypeList',
       deleteBook: 'deleteBook',
-      setBookRecommend: 'setBookRecommend'
+      setBookRecommend: 'updateBookDetail',
+      batchImport: 'batchImport',
     }),
 
     // 查询过滤
     filterList({ page = 0 } = {}) {
       const caseId = this.caseId || this.defaultCase
-      this.getTypeList({ page: 0, pagesize: 1000, CaseId: caseId })
+      this.getTypeList({ page: 0, pagesize: 1000, caseid: caseId })
 
       this.getList({
         page,
-        CaseId: caseId,
-        BookBarcode: this.bookBarcode,
-        BookName: this.bookName
+        caseid: caseId,
+        barcode: this.bookBarcode,
+        name: this.bookName
       }).catch(err => {
         this.$message({
           showClose: true,
     // 设为/取消推荐
     setRecommend(book) {
       const tipMsg = book.IsRecommend === 1 ? '确定取消推荐?' : '确认设置为推荐?'
+      book.IsRecommend = Math.abs(book.IsRecommend - 1)
 
       this.$confirm(tipMsg, '提示', {
         confirmButtonText: '是',
     importBatch(e) {
       // 需要指定案场
       const caseName = this.getCaseName(this.caseId)
+      const file = e.target.files[0]
+      if (!file) {
+        this.$message({
+          showClose: true,
+          message: '请选择导入文件',
+          type: 'error'
+        })
+      }
 
       this.$confirm(`数据将被导入至【${caseName}】案场, 是否继续?`, '提示', {
         confirmButtonText: '确定',
         type: 'warning'
       })
         .then(() => {
-          // TODO
-          // const file = e.target.files[0];
+          const data = {
+            caseId: this.caseId,
+            excel: file,
+          }
+
+          this.batchImport(data).then(() => {
+            this.$confirm(`数据导入完成, 点击【确定】刷新页面`, '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              window.location.reload()
+            })
+          }).catch((err) => {
+            this.$message({
+              showClose: true,
+              message: err,
+              type: 'error'
+            })
+          })
+
+          // const loading = this.$loading({
+          //   lock: true,
+          //   text: '数据导入中, 可能耗时较长, 请稍后 ...',
+          // })
+
+          // window.setTimeout(() => loading.close(), 2000)
         })
         .catch(x => x)
     },

src/pages/system/library/books/types/detail.vue

         <el-input v-model="formData.BookTypeName" :style="{ width: '200px' }"></el-input>
       </el-form-item>
       <el-form-item :style="{ paddingTop: '40px' }">
-        <el-button type="primary" @click="submit()">立即创建</el-button>
+        <el-button type="primary" @click="submit()">保存</el-button>
         <el-button @click="$router.back()">取消</el-button>
       </el-form-item>
     </el-form>
   created() {
     const id = this.$route.params.id
     if (id) {
-      this.getInfo({
-        BookTypeId: id
-      }).catch(err => {
+      this.getInfo({ id }).catch(err => {
         this.$message({
           showClose: true,
           message: err,
     ...mapLibSate({
       detail: s => s.type.detail,
     }),
-    // formData: {
-    //   get: function() {
-    //     if (this.detail && this.detail.BookTypeId) {
-    //       return this.detail
-    //     }
-
-    //     return {
-    //       BookTypeId: '',
-    //       BookTypeName: '',
-    //       BookTypeImg: '',
-    //       CaseId: this.defaultCase,
-    //       OrgId: this.orgid,
-    //       Status: 1,
-    //       CreateDate: new Date()
-    //     }
-    //   },
-    //   set: function(val) {
-    //     console.log(val)
-    //     this.mergeDetail(val)
-    //   }
-    // }
   },
   watch: {
     detail: {
       },
       immediate: true,
     },
-    formData: {
-      handler (nv) {
-        this.mergeDetail(nv)
-      },
-      deep: true,
-    },
+    // formData: {
+    //   handler (nv) {
+    //     this.mergeDetail(nv)
+    //   },
+    //   deep: true,
+    // },
   },
   methods: {
     ...mapMutations({
     }),
 
     uploadSuccess(res) {
-      this.formData.BookTypeImg = res.result.url
+      this.$set(this.formData, 'BookTypeImg', res.result.url)
+      // this.formData.BookTypeImg = res.result.url
     },
 
     submit() {
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
-          this.updateDetail()
+          this.updateDetail(this.formData)
             .then(() => {
               this.$message({
                 showClose: true,

src/pages/system/library/books/types/list.vue

     <div>
       <el-form inline>
         <el-form-item label="案场">
-          <el-select v-model="caseId" size="medium" placeholder="请选择案场" @change="filterList">
+          <el-select v-model="caseId" size="medium" placeholder="请选择案场">
             <el-option
               v-for="item in cases"
               :key="item.CaseId"
           </el-select>
         </el-form-item>
         <el-form-item :style="{ float: 'right' }">
-          <el-button type="primary" size="medium">搜索</el-button>
+          <el-button type="primary" size="medium" @click="filterList">搜索</el-button>
         </el-form-item>
       </el-form>
     </div>
       <el-button plain @click="editType()" size="medium">新增分类</el-button>
       <div :style="{ margin: '10px 0' }">
         <el-table :data="list" border style="width: 100%">
-          <el-table-column label="图片" width="250">
+          <el-table-column label="图片" width="128">
             <template slot-scope="scope">
-              <img width="150" :src="scope.row.BookTypeImg" alt>
+              <img width="64" :src="scope.row.BookTypeImg" alt>
             </template>
           </el-table-column>
           <el-table-column prop="BookTypeName" label="名称"></el-table-column>
         <el-pagination
           layout="prev, pager, next"
           :current-page="page"
-          :total="1000"
+          :total="pagenum"
           @current-change="pageChange">
         </el-pagination>
       </div>
     ...mapLibSate({
       list: s => s.type.list,
       page: s => s.type.page,
+      pagenum: s => s.type.pagenum,
     })
   },
   created() {
   methods: {
     ...mapActions({
       getList: 'getTypeList',
-      deleteType: 'deleteType'
+      deleteType: 'deleteType',
     }),
 
     filterList({ page = 0 } = {}) {
+      const caseId = this.caseId || this.defaultCase
+      if (!caseId) return
+
       this.getList({
         page,
-        CaseId: this.caseId || this.defaultCase
+        caseid: caseId,
       }).catch(err => {
         this.$message({
           showClose: true,

src/store/library/index.js

 
   state: {
     page: 0,
+    pagenum: 0,
     list: [
       {
         BookId: '1',
     detail: {},
     type: {
       page: 0,
+      pagenum: 0,
       list: [
         {
           BookTypeId: '1',
       },
     },
     stock: {
+      page: 0,
+      pagenum: 0,
       list: [
         {
           RecordId: '1',
     },
     setBorrowList (state, payload) { // 更新借阅记录
       state.borrow.list = payload
-    }
+    },
+    setTypeList (state, payload) {
+      const { list, pagenum } = payload || {}
+      if (!!list) { // eslint-disable-line
+        state.type.list = list
+        state.type.pagenum = pagenum
+      } else {
+        state.type.list = []
+        state.type.pagenum = 0
+      }
+    },
+    deleteTypeList (state, payload = {}) {
+      state.type.list = state.type.list.filter(x => x.BookTypeId !== payload.BookTypeId)
+    },
+    setBookList (state, payload) {
+      const { list, pagenum } = payload || {}
+      if (!!list) { // eslint-disable-line
+        state.list = list
+        state.pagenum = pagenum
+      } else {
+        state.list = []
+        state.pagenum = 0
+      }
+    },
+    deleteBookList (state, payload = {}) {
+      state.list = state.list.filter(x => x.BookId !== payload.BookId)
+    },
   },
   actions: {
     cancelBorrow ({ commit }, payload) { // 取消预约
     },
     getTypeList ({ commit }, payload) {
       return new Promise((resolve, reject) => {
-
+        ajax({
+          ...api.bookType.list,
+          queryData: payload,
+        }).then((x) => {
+          commit('setTypeList', x)
+          resolve(x)
+        })
+          .catch(({ message }) => reject(message))
       })
     },
-    getTypeDetail ({ commit }, payload) {
+    getTypeDetail ({ commit }, payload = {}) {
       return new Promise((resolve, reject) => {
-
+        ajax({
+          ...api.bookType.detail,
+          urlData: { ...payload },
+        }).then((x) => {
+          commit('mergeTypeDetail', x)
+          resolve(x)
+        })
+          .catch(({ message }) => reject(message))
       })
     },
-    updateTypeDetail ({ commit }, payload) {
+    updateTypeDetail ({ commit }, payload = {}) {
       return new Promise((resolve, reject) => {
+        const id = payload.BookTypeId
+        payload.CreateDate = ''
 
+        const apiConf = !id ? api.bookType.save : api.bookType.update
+        ajax({
+          ...apiConf,
+          data: payload,
+        }).then((x) => {
+          commit('mergeTypeDetail', x)
+          resolve(x)
+        })
+          .catch(({ message }) => reject(message))
       })
     },
     deleteType ({ commit }, payload) {
       return new Promise((resolve, reject) => {
-
+        ajax({
+          ...api.bookType.delete,
+          urlData: { id: payload.BookTypeId },
+        }).then(() => {
+          commit('deleteTypeList', payload)
+          resolve()
+        })
+          .catch(({ message }) => reject(message))
       })
     },
     getBookList ({ commit }, payload) {
       return new Promise((resolve, reject) => {
-
+        ajax({
+          ...api.book.list,
+          queryData: payload,
+        }).then((x) => {
+          console.log(x)
+          commit('setBookList', x)
+          resolve(x)
+        })
+          .catch((err) => console.log(err) && reject(err.message))
       })
     },
-    getBookDetail ({ commit }, payload) {
+    getBookDetail ({ commit }, payload = {}) {
       return new Promise((resolve, reject) => {
-
+        ajax({
+          ...api.book.detail,
+          urlData: { ...payload },
+        }).then((x) => {
+          commit('mergeBookDetail', x)
+          resolve(x)
+        })
+          .catch(({ message }) => reject(message))
       })
     },
-    updateBookDetail ({ commit }, payload) {
+    updateBookDetail ({ commit }, payload = {}) {
       return new Promise((resolve, reject) => {
+        const id = payload.BookId
 
+        const apiConf = !id ? api.book.save : api.book.update
+        ajax({
+          ...apiConf,
+          data: payload,
+        }).then((x) => {
+          commit('mergeBookDetail', x)
+          resolve(x)
+        })
+          .catch(({ message }) => reject(message))
       })
     },
-    deleteBook ({ commit }, payload) {
+    deleteBook ({ commit }, payload = {}) {
       return new Promise((resolve, reject) => {
-
+        ajax({
+          ...api.book.delete,
+          urlData: { id: payload.BookId },
+        }).then((x) => {
+          commit('deleteBookList', payload)
+          resolve(x)
+        })
+          .catch(({ message }) => reject(message))
       })
     },
-    setBookRecommend ({ commit }, payload) {
+    getStockList ({ commit }, payload) {
       return new Promise((resolve, reject) => {
 
       })
     },
-    getStockList ({ commit }, payload) {
+    batchImport(_, payload) {
       return new Promise((resolve, reject) => {
-
+        ajax({
+          ...api.book.import,
+          data: payload,
+        }).then(() => {
+          resolve()
+        })
+          .catch(({ message }) => reject(message))
       })
-    },
+    }
   },
 }

src/util/api.js

       method: 'post',
       url: `${baseUrl}${common}/booktype`
     },
+    delete: {
+      method: 'delete',
+      url: `${baseUrl}${common}/booktype/:id`
+    },
+  },
+  book: {
+    list: {
+      method: 'get',
+      url: `${baseUrl}${common}/book`
+    },
+    detail: {
+      method: 'get',
+      url: `${baseUrl}${common}/book/:id`
+    },
+    save: {
+      method: 'post',
+      url: `${baseUrl}${common}/book`
+    },
+    update: {
+      method: 'put',
+      url: `${baseUrl}${common}/book`
+    },
+    delete: {
+      method: 'delete',
+      url: `${baseUrl}${common}/book/:id`
+    },
+    import: {
+      method: 'post',
+      url: `${baseUrl}${common}/book/excel`
+    },
   },
 }
 export default $api