patrol-wzgl-web/src/views/books/books.vue

<template>
  <div>
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="基础信息" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="搜索姓名" />

            <Select v-model="select.team_id" style="width: 200px;margin-left: 10px;" placeholder="搜索队伍" clearable>
              <Option v-for="item in listTeam" :key="item.id" :value="item.id">{{ item.mingcheng }}</Option>
            </Select>
            <Button type="primary" style="margin-left: 10px;" @click="getList">查询</Button>
            <Button type="primary" style="margin-left: 10px;" @click="$refs['addBook'].type='add',$refs['addBook'].setlistTeam(listTeam),
            $refs['addBook'].isShow=true">添加</Button>
            <!-- <Button icon="ios-add" type="primary" style="margin-left: 10px;"
              @click="$refs['imports'].show()">导入</Button> -->
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :total="total"  @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
      :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <div>
              <Button type="primary" size="small" @click="$refs['addBook'].type='editor',
              $refs['addBook'].id=scope.row.id,
              $refs['addBook'].setlistTeam(listTeam),
              $refs['addBook'].isShow=true">编辑</Button>
              <Poptip transfer confirm title="确认要删除吗？" @on-ok="delRow(scope.row.id)">
                <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
              </Poptip>
            </div>
          </template>
        </el-table-column>
      </template>

    </xy-table>
    <addBook ref="addBook" @refresh="getList"></addBook>
  </div>

</template>

<script>
  import {
    index,
    destroy
  } from "@/api/system/baseForm.js"
  import addBook from './components/addBook.vue'
  export default {
    components: {
      addBook,
    },
    data() {

      return {
        select: {
          page: 1,
          page_size: 10,
          keyword: '',
          table_name: 'books',
          team_id:'',
        },

        total: 0,
        list: [],
        listTeam:[],

        table: [{
          label: '序号',
          type: 'index',
          fixed: 'left',
          width: 80,
        }, {
          label: '所在队伍',
          prop: 'suozaiduiwu',
          align: 'left',
        }, {
          label: '姓名',
          prop: 'xingming',
          align: 'left',
          width: 120
        }, {
          label: '联系电话',
          prop: 'lianxidianhua',
          width: 120,
        }, {
          label: '创建日期',
          prop: 'created_at',
          width: 120,
          formatter: (cell, data, value) => {
            return value ? value.substring(0, 10) : ''
          }
        }],
      }
    },
    created() {
      this.getTeamList()
      this.getList()
    },
    methods: {
      async getList() {
        const res = await index({
          ...this.select,
          filter: [{
            key:'team_id',
            op:'eq',
            value:this.select.team_id
          },{
            key:'xingming',
            op:'eq',
            value:this.select.keyword
          }],
        })
        this.list = res.data
        this.total = res.total
      },
      async getTeamList(){
        const res = await index({
          page: 1,
          page_size: 10,
          table_name: 'teams'
        })
        this.listTeam = res.data
      },
      pageChange(e) {
        this.select.page = e
        this.getList()
      },
      pageSizeChange(e){
        this.select.page_size = e
        this.getList()
      },
      delRow(id) {
        if (id) {
          destroy({
            id: id,
            table_name: this.select.table_name,
          }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getList()
          })
        }
      },
    }
  }
</script>

<style >

</style>