index.vue

<template>
  <div class="bloc-wrapper manage-container">
    <el-row>
      <el-col :span="12">
        <el-row class="manage-head-wrapper">
          <el-col :span="24">
            <div class="manage-input-box">
              <el-input v-model="name" clearable class="search-inp" placeholder="请输入名称"/>
            </div>
            <el-button type="primary" class="search-btn" @click="searchFun">{{$t('button.search')}}</el-button>
            <el-button
              type="primary"
              @click="addHandle"
              class="manage-add-btn"
              icon="el-icon-circle-plus-outline"
            >新增类型</el-button>
          </el-col>
        </el-row>
        <el-row class="manage-content">
          <el-col :span="24">
            <el-table
              v-loading='isLoading'
              :data="tableData"
              :max-height="tableHeight"
              style="width: 100%"
              header-row-class-name="manage-tab-head"
            >
              <el-table-column
                prop="tabOrder"
                align="center"
                :label="$t('table.order')"
                width="100"
              ></el-table-column>
              <el-table-column prop="name" align="center" label="业态名称">
                <template slot-scope="scope">
                  <span style="color: #409EFF;cursor: pointer;" @click="handleClick(scope.row)">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="intro" align="center" label="简介"></el-table-column>
              <el-table-column :label="$t('table.operate')" align="center" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="editRow(scope.row)"
                    type="text"
                    size="small"
                    class="tab-btn"
                  >{{$t('button.edit')}}</el-button>
                  <el-button
                    @click="addChild(scope.row)"
                    type="text"
                    size="small"
                    class="tab-btn"
                  >新增下级</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="manage-pagination"
              background
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              @size-change="sizeChange"
              @current-change="currentChange"
              layout="sizes, prev, pager, next, slot"
              :total="total"
            >
              <span
                class="slot-ele-total"
              >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span='12'>
          <child-table ref="childTableRef"></child-table>
      </el-col>
    </el-row>
    <add-dialog ref="addRef"></add-dialog>
  </div>
</template>

<script>
import addDialog from "./add";
import childTable from "./childTable";
export default {
  components: {
    "add-dialog": addDialog,
    'child-table': childTable
  },
  data() {
    return {
      name: "",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isLoading:''
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return windowInnerHeight - windowInnerHeight * 0.24;
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData(name,pid) {
      this.isLoading = true
      this.tableData = [];
      let tabelParams = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        name: this.name,
        pid: pid?pid:'-1',
      };
      this.$api.management.getFormatList(tabelParams)
        .then(data => {
          setTimeout(()=>{
            this.isLoading = false
          },100)
          const result = data.data;
          result.data.list.forEach((item, index) => {
          	item.tabOrder = (this.currentPage - 1) * this.pageSize + index + 1
          })
          this.tableData = result.data.list;
          this.total = result.data.total
        })
        .catch(error => {});
    },
    // 切换每页
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1
      this.getTableData()
    },
    // 切换分页
    currentChange(val) {
      this.currentPage = val;
      this.getTableData()
    },
    // 新增用户
    addHandle() {
      this.$refs.addRef.dialogInit('add');
    },
    // 新增下级
    addChild(row){
      let str = JSON.parse(JSON.stringify(row));
      this.$refs.addRef.dialogInit('add',row,'child');
    },
    //点击编辑弹框
    editRow(row) {
      let str = JSON.parse(JSON.stringify(row));
      this.$refs.addRef.dialogInit('edit',str);
    },
    handleClick(row){
      let str = JSON.parse(JSON.stringify(row));
      this.$refs.childTableRef.dialogInit(str);
    },
    // 搜索
    searchFun() {
      this.currentPage = 1;
      this.pageSize = 10;
      this.getTableData()
    }
  }
};
</script>

<style scoped>
.bloc-wrapper {
  width: 100%;
  height: 100%;
  font-size: 13px;
}
.manage-pagination{
  position: absolute;
  right: 15px;
  margin-top: 15px
}
</style>