vue 父子组件实现图书管理

详情：https://gitee.com/eduworkflow/opwf-front

子组件

<template>
  <div>
    <el-dialog
      title="新增图书"
      :visible="visible"
    >
      <div><span>图书名称:</span>
        <el-input
          class='elinput'
          v-model="data.btitle"
        ></el-input>
      </div>
      <div><span>发布日期:</span>
        <el-input
          class='elinput'
          v-model="data.bpub_date"
        >
        </el-input>
      </div>
      <div><span>阅读量:</span>
        <el-input
          class='elinput'
          v-model="data.bread"
        ></el-input>
      </div>
      <div><span>评论量:</span>
        <el-input
          class='elinput'
          v-model="data.bcomment"
        ></el-input>
      </div>

      <el-button @click="cancel">取 消</el-button>
      <el-button
        type="primary"
        @click="addBook"
      >确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
// import { addbook } from '@/http/apis'
export default {
  props: ['data', 'visible'],
  data() {
    return {
    }
  },
  methods: {
    addBook() {
      this.$emit('update:visible', false)  // 隐藏弹出框
      this.$emit('save')
    },
    cancel() {
      this.$emit('update:visible', false)
    }
  },
  mounted() {
  }
}
</script>

<style>
.elinput {
  width: 220px;
  height: 40px;
}
</style>

父组件

<template>
  <div>
    <h1>图书管理系统 {{ dialogVisible }}</h1>
    <div style="margin: 30px;">
      <button @click="addNew">新增图书</button>
      <BookEdit
        v-show='dialogVisible'
        :visible.sync='dialogVisible'
        :data='editData'
        @save='save'
      ></BookEdit>
    </div>

    <div>
      <table style='margin: auto; border: solid 1px black;'>
        <tr>
          <th>图书编号</th>
          <th>图书名字</th>
          <th>出版时间</th>
          <th>阅读数</th>
          <th>评论数</th>
          <th>操作</th>
        </tr>
        <tr
          v-for="(book, index) in books"
          :key="book.id"
        >
          <td>{{book.id}}</td>
          <td>{{book.btitle}}</td>
          <td>{{book.bpub_date}}</td>
          <td>{{book.bread}}</td>
          <td>{{book.bcomment}}</td>
          <td>
            <button @click="edit(book)">修改</button>
            <button @click="del(book.id)">删除</button>
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import { getBookList, addBook, updateBook, delBook } from '@/http/apis'
import BookEdit from './components/BookEdit'

export default {
  components: {
    BookEdit,
  },
  data() {
    return {
      dialogVisible: false,
      books: [
        { id: 3, btitle: "...", bpub_date: "2020-08-11", bread: 100, bcomment: 50 }
      ],
      editData: {  // 编辑的内容
        btitle: "",
        bpub_date: "",
        bread: 0,
        bcomment: 0
      }
    }
  },
  methods: {
    // 1.点击新增图书时初始化数据
    addNew() {
      this.editData = {  // 初始化 编辑内容
        btitle: "",
        bpub_date: "",
        bread: 100,
        bcomment: 0
      }
      this.dialogVisible = true  // 显示弹框
    },

    // 2.获取图书列表
    get() {
      getBookList().then((data) => {
        // console.log(data)
        // books: [{btitle: "西游记", bpub_date: "2020-08-11", bread: 100, bcomment: 50}]
        this.books = data.books
      })
    },

    // 3.修改或者添加图书
    save() {
      // 根据editData中的id判断是更新还是新增
      // debugger
      console.log(this.editData)
      if (this.editData.id) {
        // 如果有id, 修改图书
        // 修改请求
        let params = this.editData
        updateBook(params).then((res)=>{
          console.log(res)
          this.get()
        })
      } else {
        // 增加图书
        addBook(this.editData).then((res) => {
          this.get()
        })
      }
    },

    // 点击修改弹出修改页面
    edit(book) {
      this.editData = book
      this.dialogVisible = true
    },

    // 删除
    del(book_id) {
      let params = {
        id: book_id
      }
      delBook(params).then((res)=>{
        console.log(res)
        this.get()
      })
    }
  },
  created() {
    this.get()
  }
}
</script>

<style>
table tr td {
  width: 150px;
  border: solid 1px black;
}
</style>