avue-crud组件

vue

<template>

  <div class="mod-prod">

    <avue-crud ref="crud"

               :page="page"

               :data="dataList"

               :table-loading="dataListLoading"

               :update-before="dataListLoading"

               :permission="permission"

               :option="tableOption"

               @row-save="addHandle"

               @row-update="updateHandle"

               @row-del="deleteHandle"

               @search-change="searchChange"

               @selection-change="selectionChange"

               @on-load="getDataList">

      <template slot="menuLeft">

        <el-button type="danger"

                   @click="deleteHandle()"

                   size="small"

                   :disabled="dataListSelections.length <= 0">批量删除</el-button>

      </template>

    </avue-crud>

  </div>

</template>

<script>

import { tableOption } from '@/crud/sys/pay-integral-manager'

export default {

  data () {

    return {

      dataForm: {

        prodName: ''

      },

      permission: {

        delBtn: this.isAuth('prod:prod:delete')

      },

      dataList: [],

      page: {

        total: 0, // 总页数

        currentPage: 1, // 当前页数

        pageSize: 10 // 每页显示多少条

      },

      dataListSelections: [],

      dataListLoading: false,

      tableOption: tableOption,

      resourcesUrl: window.SITE_CONFIG.resourcesUrl

    }

  },

  methods: {

    // 获取数据列表

    getDataList (page, params) {

      this.dataListLoading = true

      this.$http({

        url: this.$http.adornUrl('/integral/payIntegral/page'),

        method: 'get',

        params: this.$http.adornParams(

          Object.assign(

            {

              current: page == null ? this.page.currentPage : page.currentPage,

              size: page == null ? this.page.pageSize : page.pageSize

            },

            params

          )

        )

      }).then(({ data }) => {

        this.dataList = data.records

        this.page.total = data.total

        this.dataListLoading = false

      })

    },

    // 新增

    addHandle(row,done){

        console.log(row)

        this.$http({

            url: this.$http.adornUrl(`/integral/payIntegral/save`),

            method: 'post',

            data: this.$http.adornData(row,false)

          }).then(({ data }) => {

            this.$message({

              message: '操作成功',

              type: 'success',

              duration: 1500,

              onClose: () => {

                this.getDataList(this.page)

              }

            })

            done();

          })

    },

    // 编辑

    updateHandle(row,done){

        this.$http({

            url: this.$http.adornUrl(`/integral/payIntegral/put`),

            method: 'put',

            data: this.$http.adornData(row,false)

          }).then(({ data }) => {

            this.$message({

              message: '操作成功',

              type: 'success',

              duration: 1500,

              onClose: () => {

                this.getDataList(this.page)

              }

            })

            done();

          })

    },

    // 删除

    deleteHandle (row) {

        console.log("ddd")

        var ids = this.dataListSelections.length <= 0 ? [row.id] : this.dataListSelections.map(item => {

        return item.id

      })

      this.$confirm(`确定进行[${this.dataListSelections.length <= 0 ? '删除' : '批量删除'}]操作?`, '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      })

        .then(() => {

          this.$http({

            url: this.$http.adornUrl(`/integral/payIntegral/delete`),

            method: 'delete',

            data: this.$http.adornData(ids, false)

          }).then(({ data }) => {

            this.$message({

              message: '操作成功',

              type: 'success',

              duration: 1500,

              onClose: () => {

                this.getDataList(this.page)

              }

            })

          })

        })

        .catch(() => { })

    },

    // 条件查询

    searchChange (params) {

      this.getDataList(this.page, params)

    },

    // 多选变化

    selectionChange (val) {

        console.log(val)

      this.dataListSelections = val

    }

  }

}

</script>

js

export const tableOption = {

    border: true,

    selection: true,

    index: false,

    indexLabel: '序号',

    stripe: true,

    menuAlign: 'center',

    menuWidth: 350,

    align: 'center',

    refreshBtn: true,

    searchSize: 'mini',

    addBtn: true,

    editBtn: true,

    delBtn: true,

    viewBtn: true,

    props: {

      label: 'label',

      value: 'value'

    },

    column: [{

      label: '积分兑换id',

      prop: 'id',

      width: 100,

      editDisplay:false,

      addDisplay:false,

    }, {

      label: '兑换名',

      prop: 'payName',

      search: true,

      width: 150,

    }, {

      label: '兑换地址',

      prop: 'payUrl',

      width: 480,

    }, {

      label: '积分查询',

      prop: 'queryUrl',

      width: 260,

    }]

  }