yunyubang-supplier-web/src/views/bookStore/bookIndex.vue

<template>
  <div>
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目列表管理">
      <div slot="content"></div>
      <slot>
        <div class="selects">

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
              关键字
            </span>
            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
          </div>

          <Button style="margin-left: 10px" type="primary" @click="select={page:1,keyword:''}">重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="doSearch">查询</Button>
          <Button style="margin-left: 10px" type="primary" @click="add">新增</Button>
        </div>
      </slot>
    </lx-header>


    <xy-table :list="list" :table-item="table" :total="total">
      <template v-slot:btns>
        <el-table-column fixed="right" header-align="center" align="center" label="操作" width="300">
          <template slot-scope="scope">
            <div class="slot-btns">
              <Button type="primary" @click="edit(scope.row)">编辑</Button>
              <Button type="primary" @click="view(scope.row)"  style="margin-left: 10px;">查看</Button>
              <Button type="primary" @click="put(scope.row)"  style="margin-left: 10px;">入库</Button>
              <Button type="error" @click="deleteitem(scope.row)" style="margin-left: 10px;">删除</Button>
            </div>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <addBook ref="addBook" @refresh="load()"></addBook>
    <viewBook ref="viewBook" @refresh="load()"></viewBook>
    <putIn ref="putIn" @refresh="load()"></putIn>

  </div>
</template>

<script>
  import {
    list as index,
    save,
    del,
    show
  } from "@/api/bookStore/bookIndex";

  import addBook from '@/views/bookStore/components/addBook'
  import viewBook from '@/views/bookStore/components/viewBook'
  import putIn from '@/views/bookStore/components/putIn'

  export default {
    components: {
      addBook,
      viewBook,
      putIn
    },
    data() {
      return {
        select: {
          page: 1,
          page_size: 20,
          keyword: '',
        },
        total: 0,
        list: [],
        table: [{
            prop: 'name',
            label: '图书名称',
            align: 'left',
            width: 280,
            fixed: 'left',

          },{
            prop: 'small_cover',
            label: '图片',
            align: 'cneter',
            width: 140,
            fixed: 'left',
            customFn: (row) => {
              return ( <div style = {
                {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              } > <img src = {
                row.small_cover?.url
              } style='width:120px;height:120px'> </img></div> )
            }

          }, {
            prop: 'author',
            label: '作者',
            align: 'center',
            width: 120,
            fixed: 'left',

          }, {
            prop: 'bind_way',
            label: '装订方式',
            width: 180,
            align: 'center'

          }, {
            prop: 'publish_date',
            label: '出版日期',
            width: 180,
            align: 'center'
          },
          {
            prop: 'font_total',
            label: '图书页数',
            align: 'center',
            width: 180,
          },
          {
            prop: 'created_at',
            label: '创建信息',
            width: 180,
            formatter: (v1, v2, value) => {
              return value;
            }
          }
        ],
      }
    },
    methods: {
      put(row){
          this.$refs['putIn'].id = "";
          this.$refs['putIn'].bookid = row.id;
          this.$refs['putIn'].detail.book_id = row.id;
          
          this.$refs['putIn'].isShow = true;
          this.$refs['putIn'].type = 'add'
      },
      doSearch() {
        this.select.page = 1;
        this.load();
      },
      add() {
        this.$refs['addBook'].isShow = true
      },
      pageSizeChange(e) {
        this.select.page_size = e;
        this.select.page = 1;
        this.load();
      },
      async load() {
        const res = await index(this.select)
        this.total = res.total
        this.list = res.data
      },
      deleteitem(row) {
        del({
          id: row.id
        }).then(res => {
          this.load();
          this.$Message.success("操作成功");
        })
      },
      edit(row) {
        this.$refs['addBook'].id = row.id;
        this.$refs['addBook'].isShow = true;
        this.$refs['addBook'].type = 'editor'
      },
      view(row) {
        this.$refs['viewBook'].id = row.id;
        this.$refs['viewBook'].isShow = true;
      },
      pageChange(e) {
        this.select.page = e
        this.load()
      },
    },
    mounted() {
      this.load()
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
  .selects {
    display: flex;
    flex-wrap: wrap;

    &>div {
      margin-bottom: 6px;
    }
  }
</style>