fiction-admin/src/views/sort-management/index.vue

<template>
  <el-container>
    <el-main>
      <el-form
        v-if="isSearchVisible"
        size="mini"
        label-position="right"
        label-width="100px"
        :inline="true"
        :model="formData"
        style="margin-bottom: 30px"
      >
        <div class="head-box">
          <el-form-item label="会员ID">
            <el-input v-model="formData.uid"></el-input>
          </el-form-item>
          <el-form-item label="会员昵称">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formData.comment"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </div>
      </el-form>

      <ActionButton
        @handle-refresh="refreshData"
        @handle-search="isSearchVisible = !isSearchVisible"
      />

      <div>
        <el-table :data="[{}]">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column label="分类" align="center"></el-table-column>
          <el-table-column label="书源" align="center"></el-table-column>
          <el-table-column label="采集书籍数量" align="center"></el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <CustomButton
                tip-text="查看明细"
                type="warning"
                icon="el-icon-tickets"
              ></CustomButton>
              <CustomButton
                tip-text="编辑"
                type="primary"
                icon="edit"
                is-svg
              ></CustomButton>
              <CustomButton
                tip-text="删除"
                type="danger"
                icon="delete"
                is-svg
                @onClick="handleDelete(scope.$index)"
              ></CustomButton>
            </template>
          </el-table-column>
        </el-table>

        <el-footer>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20, 30]"
            :page-size="limit"
            layout="total, prev, pager, next, sizes, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-footer>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import ActionButton from "@/components/ActionButton/index";
import CustomButton from "@/components/CustomButton/index";

export default {
  components: {
    ActionButton,
    CustomButton,
  },
  data() {
    return {
      formData: {},
      isSearchVisible: false,

      // 分页数据
      totalCount: 0,
      currentPage: 1,
      limit: 20,
      // 返回的数据
      tableData: [],
    };
  },
  methods: {
    refreshData() {
      console.log("刷新");
    },

    handleDelete(index) {
      console.log(index, "删除");
    },

    // limit 改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this._fetchData();
    },
    // 当前页面改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this._fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.head-box {
  border-bottom: #f2f2f2 1px solid;
  display: flex;
  justify-content: space-between;
  padding: 0 50px 0 0px;
  box-sizing: border-box;
  .el-input__inner {
    width: 250px;
  }
}

.el-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>