patrol-wzgl-web/src/views/storages/index.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="名称搜索" />
            <Button type="primary" @click="getList">查询</Button>
            <Button type="primary" style="margin-left: 10px;" @click="$refs['addStorage'].type='add',
            $refs['addStorage'].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['addStorage'].type='editor',
              $refs['addStorage'].id=scope.row.id,
              $refs['addStorage'].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>
    <addStorage ref="addStorage" @refresh="getList"></addStorage>
  </div>

</template>

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

      return {
        select: {
          page: 1,
          page_size: 10,
          keyword: '',
          table_name: 'materialstorages'
        },
        total: 0,
        list: [],
        table: [{
          label: '序号',
          type: 'index',
          fixed: 'left',
          width: 80,
        }, {
          label: '仓库名称',
          prop: 'cangkumingcheng',
          width: 240,
          align: 'left',
          fixed: 'left'
        }, {
          label: '仓库编码',
          prop: 'cangkubianma',
          align: 'left',
          width: 240
        }, {
          label: '所在区域',
          prop: 'suozaiquyu',
          width: 120,
        }, {
          label: '建设年代',
          prop: 'jiansheniandai',
          width: 120,
        }, {
          label: '仓库地址',
          prop: 'cangkudizhi',
          width: 120,
        }, {
          label: '仓库面积',
          prop: 'cangkumianji',
          width: 120,
        }, {
          label: '负责人',
          prop: 'fuzeren',
          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.getList()
    },
    methods: {
      async getList() {
        const res = await index({
          ...this.select,
          filter: [{
            key:'cangkumingcheng',
            op:'like',
            value:this.select.keyword
          }],
        })
        this.list = res.data
        this.total = res.total
      },
      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>