vue2后台管理系统增删改查模版2

<template>
  <div class="small-user-wrapper">
    <!-- 搜索 -->
    <el-card class="box-card">
      <div class="filter-container">
        <el-form :model="searchInfo" label-width="120px">
          <Row>
            <Col :xs="24" :lg="6">
            <el-form-item label="规则名称：">
              <el-input v-model="searchInfo.title" placeholder="请输入规则名称" style="width: 200px; margin-right: 10px"
                @keyup.enter.native="search">
              </el-input>
            </el-form-item>
            </Col>
          </Row>
          <el-row type="flex" justify="end" style="margin-bottom:10px;align-items: center;">
            <el-button type="primary" icon="el-icon-search" style="margin-right: 10px" @click="search">搜索</el-button>
            <el-button type="dange" icon="el-icon-refresh" style="margin-right: 10px" @click="reset">重置</el-button>
            <!-- <el-button type="primary" style="margin-right: 10px">导出</el-button> -->
            <!-- <el-button type="primary" icon="el-icon-refresh" style="margin-right: 10px">刷新状态</el-button> -->
            <!-- <div class="screen" @click="more=!more">{{more?'收起':'更多'}}筛选<i :class="more?'el-icon-arrow-up':'el-icon-arrow-down'"></i></div> -->
          </el-row>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top:10px;">
      <el-row type="flex" justify="end" style="margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus" @click="updateData('add')">新增</el-button>
      </el-row>
      <Row class="table-container">
        <i-col :span="24">
          <div v-loading="tableLoading">
            <el-table :data="tableData" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
              header-cell-class-name="table-th"  :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="id" label="规则编号" />
              <el-table-column prop="title" label="规则名称" />
              <el-table-column prop="created_at" label="创建时间" />
              <el-table-column label="人数">
                <template slot-scope="{row}">
                  <el-button plain @click="openNumberDetails(row)">{{ row.count }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="300px" fixed="right">
                <template slot-scope="{row}">
                  <el-button type="primary" @click="goDetails(row)">详情</el-button>
                  <el-button type="primary" icon="el-icon-edit-outline" @click="updateData('edit',row)">编辑</el-button>
                  <el-button @click="removeTableData(row.id)" type="danger" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination v-show="total > 0" @size-change="handleSizeChange($event)"
              @current-change="handleCurrentChange($event)" :current-page="page"
              :page-sizes="[10, 20, 30, 40, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
              :total="total" style="margin-top:10px;">
            </el-pagination>
          </div>
        </i-col>
      </Row>
    </el-card>
    <group-member ref="groupMember"></group-member>
  </div>
</template>
    
<script>
import { cultivateInfo } from '@/api/cultivate';
import layoutMinix from '../../layout/components/mixins/layout';
import groupMember from './component/groupMember';
export default {
  components: {
    groupMember
  },
  mixins: [layoutMinix],
  data() {
    return {
      // 搜索条件对象
      searchInfo: {
        title: ""
      },
      // 表格数据
      tableData: [],
      // 表格loading
      tableLoading: false,
      page: 1,
      size: 10,
      total: null
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      this.page = 1;
      this.getData();
    },
    /**
     * 重置搜索
     */
    reset() {
      this.page = 1;
      Object.keys(this.searchInfo).forEach(key => {
        this.searchInfo[key] = "";
      })
      this.getData();
    },
    /**
     * 获取表格
     */
    async getData() {
      this.tableLoading = true;
      let params = {
        ...this.searchInfo,
        page: this.page,
        size: this.size,
      };
      let res = await cultivateInfo.getData(params)
      if (res.code == 200) {
        this.total = res.data.total;
        this.tableData = res.data.data;
      } else {
        this.$Message.error(`获取数据失败`);
      }
      this.tableLoading = false;
    },
    /**
     * 删除表格数据
     */
    removeTableData(id) {
      this.$confirm('确定这条删除吗？', '提示', { type: 'warning' }).then(async () => {
        let params = {
          id
        };
        let res = await cultivateInfo.removeData(params);
        if (res.code == 200) {
          this.$Message.success(`删除成功`);
          this.getData();
        } else {
          this.$Message.error(`删除失败`);
        }
      })
    },
    /**
     * 展示数量发生改变
     */
    handleSizeChange(val) {
        this.size = val;
        this.getData();
    },
    /**
     * 页数发生改变
     */
    handleCurrentChange(val) {
        this.page = val;
        this.getData();
    },
    /**
     * 新增或编辑数据
     */
    updateData(type,row) {
      if (type == "add") {
        this.$router.push({ path: '/updateCultivate', query: { status: type }});
      } else if (type == "edit") {
        this.$router.push({ path: '/updateCultivate', query: { status: type, id: row.id }});
      };
    },
    /**
     * 打开详情
     */
    goDetails(row) {
      this.$router.push({ name: 'cultivateDetail', query: { id: row.id }})
    },
    /** 
     * 打开人数详情
     */
    openNumberDetails (row) {
      this.$refs.groupMember.showModel(row.id);
    },
  }
};
</script>

<style lang="scss">
.small-user-wrapper {
  .ivu-btn>.ivu-icon {
    line-height: 1;
    font-size: 18px;
  }
}

.ivu-form-item-required .ivu-form-item-label:before {
  display: none;
}
.ivu-message{
  z-index: 3000 !important;
}
</style>