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

<template>
  <el-container>
    <el-main>
      <ActionButton
        :open-btn1="true"
        :text-btn1="'新增分类'"
        :open-btn5="true"
        :text-btn5="btn5Data.name"
        :type-btn5="'warning'"
        :icon-btn5="'el-icon-tickets'"
        @handle-button5="handleButton5"
        @handle-refresh="refreshData"
        @handle-button1="openEditDialog(null)"
        :dropdownData="dropdownData"
      />

      <div>
        <el-table :data="tableData" border fit tooltip-effect="dark">
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column label="分类" align="center" prop="category_name" />
          <el-table-column label="书源" align="center">
            <template slot-scope="scope">{{ btn5Data.name }}</template>
          </el-table-column>
          <el-table-column label="采集书籍数量" align="center" />
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <CustomButton
                tip-text="查看明细"
                type="warning"
                icon="el-icon-tickets"
                @onClick="openCheckBooksDialog(scope.row)"
              />
              <CustomButton
                tip-text="编辑"
                type="primary"
                icon="edit"
                is-svg
                @onClick="openEditDialog(scope.row)"
              />
              <CustomButton
                tip-text="删除"
                type="danger"
                icon="delete"
                is-svg
                @onClick="handleDelete(scope.$index)"
              />
            </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-footer>
      </div>
    </el-main>
    <!--    编辑、新增弹窗-->
    <EditDialog
      :is-dialog="isEditDialog"
      :dialog-title="editTitleDialog"
      @handle-close="isEditDialog = false"
      :btn5Data="btn5Data"
      :CategoryList="CategoryList"
    />
    <!--    查看书籍弹窗-->
    <CheckBooksDialog :is-dialog="isCheckDialog" @handle-close="isCheckDialog = false" />
  </el-container>
</template>

<script>
import ActionButton from "@/components/ActionButton/index";
import CustomButton from "@/components/CustomButton/index";
import EditDialog from "./components/edit-dialog";
import CheckBooksDialog from "./components/check-books-dialog";

import { getPlatformList, getCategoryList } from "@/api/sort-management";

export default {
  components: {
    ActionButton,
    CustomButton,
    EditDialog,
    CheckBooksDialog,
  },
  data() {
    return {
      isCheckDialog: false,
      isEditDialog: false,
      editTitleDialog: "",
      // 分页数据
      totalCount: 0,
      currentPage: 1,
      limit: 20,
      // 返回的数据
      tableData: [],
      dropdownData: [],
      CategoryList: [],
      btn5Data: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.onPlatformList();
    },

    onPlatformList() {
      getPlatformList().then((res) => {
        let obj = res.data;
        let arr = [];

        for (let i in obj) {
          arr.push({
            name: obj[i].name,
            value: obj[i].value,
            id: i,
          });
        }
        this.dropdownData = arr;
        this.btn5Data = arr[0];
        this.onCategoryList(arr[0].value);
      });
    },

    onCategoryList(source_platform) {
      getCategoryList({
        source_platform,
      }).then((res) => {
        this.tableData = res.data; // 分类列表
      });
    },

    handleButton5(data) {
      console.log(data)
      this.btn5Data = data;
        this.onCategoryList(data.value);

      this.$forceUpdate();
    },

    refreshData() {
      console.log("刷新");
    },
    // 打开编辑弹窗操作
    openEditDialog(row) {
      this.isEditDialog = true;
      if (row) {
        this.editTitleDialog = "编辑分类";
      } else {
        this.editTitleDialog = "新增分类";
      }
    },
    // 打开查看书籍弹窗
    openCheckBooksDialog() {
      this.isCheckDialog = true;
    },

    handleDelete(row) {
      this.$confirm(
        "是否确认删除该分类?删除后该分类信息将永久删除, 且不可复原, 请谨慎操作!",
        "删除提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.selectItem = row;
        })
        .catch(() => {});
    },

    // 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>