feat(book): update book page (#413)

Author: vanoneang

src/config/stage/book.js

@@ -22,7 +22,7 @@ const bookRouter = {
       type: 'view',
       name: 'BookCreate',
       route: '/book/add',
-      filePath: 'view/book/book-create.vue',
+      filePath: 'view/book/book.vue',
       inNav: true,
       icon: 'iconfont icon-add',
     },

src/view/book/book-list.vue

@@ -2,87 +2,80 @@
   <div>
     <!-- 列表页面 -->
     <div class="container" v-if="!showEdit">
-      <div class="header"><div class="title">图书列表</div></div>
+      <div class="header">
+        <div class="title">图书列表</div>
+      </div>
       <!-- 表格 -->
-      <lin-table
-        :tableColumn="tableColumn"
-        :tableData="tableData"
-        :operate="operate"
-        @handleEdit="handleEdit"
-        @handleDelete="handleDelete"
-        v-loading="loading"
-      ></lin-table>
+      <el-table :data="books" v-loading="loading">
+        <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
+        <el-table-column prop="title" label="书名"></el-table-column>
+        <el-table-column prop="author" label="作者"></el-table-column>
+        <el-table-column label="操作" fixed="right" width="275">
+          <template #default="scope">
+            <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
+            <el-button
+              plain
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-permission="{ permission: '删除图书', type: 'disabled' }"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
 
     <!-- 编辑页面 -->
-    <book-modify v-else @editClose="editClose" :editBookID="editBookID"></book-modify>
+    <book-modify v-else @editClose="editClose" :editBookId="editBookId"></book-modify>
   </div>
 </template>
 
 <script>
-import { reactive, onMounted, ref, toRefs } from 'vue'
+import { onMounted, ref } from 'vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import bookModel from '@/model/book'
-import LinTable from '@/component/base/table/lin-table'
-import BookModify from './book-modify'
+import BookModify from './book'
 
 export default {
   components: {
-    LinTable,
     BookModify,
   },
   setup() {
-    const bookList = reactive({
-      tableColumn: [
-        { prop: 'title', label: '书名' },
-        { prop: 'author', label: '作者' },
-      ],
-      operate: [
-        { name: '编辑', func: 'handleEdit', type: 'primary' },
-        {
-          name: '删除',
-          func: 'handleDelete',
-          type: 'danger',
-          permission: '删除图书',
-        },
-      ],
-      tableData: [],
-      loading: false,
+    const books = ref([])
+    const editBookId = ref(1)
+    const loading = ref(false)
+    const showEdit = ref(false)
+
+    onMounted(() => {
+      getBooks()
     })
 
     const getBooks = async () => {
       try {
-        bookList.loading = true
-        const books = await bookModel.getBooks()
-        bookList.loading = false
-        bookList.tableData = books
+        loading.value = true
+        books.value = await bookModel.getBooks()
+        loading.value = false
       } catch (error) {
-        bookList.loading = false
+        loading.value = false
         if (error.code === 10020) {
-          bookList.tableData = []
+          books.value = []
         }
       }
     }
 
-    onMounted(() => {
-      getBooks()
-    })
-
-    const showEdit = ref(false)
-    const editBookID = ref(1)
-
-    const handleEdit = val => {
+    const handleEdit = id => {
       showEdit.value = true
-      editBookID.value = val.row.id
+      editBookId.value = id
     }
 
-    const handleDelete = val => {
+    const handleDelete = id => {
       ElMessageBox.confirm('此操作将永久删除该图书, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       }).then(async () => {
-        const res = await bookModel.delectBook(val.row.id)
+        const res = await bookModel.delectBook(id)
         if (res.code < window.MAX_SUCCESS_CODE) {
           getBooks()
           ElMessage.success(`${res.message}`)
@@ -95,12 +88,16 @@ export default {
       getBooks()
     }
 
+    const indexMethod = index => index + 1
+
     return {
-      ...toRefs(bookList),
+      books,
+      loading,
       showEdit,
-      editBookID,
       editClose,
       handleEdit,
+      editBookId,
+      indexMethod,
       handleDelete,
     }
   },