fiction-admin/src/views/home/home.vue

<template>
  <div class="home-box">
    <el-main>
      <ActionButton @handle-refresh="refreshData" />

      <div class="mod-title">Banner模块</div>
      <div class="banner-box">
        <el-table ref="dataList" :data="banner">
          <el-table-column label="序号" type="index" width="80" align="center">
          </el-table-column>
          <el-table-column label="名称" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入名称" v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="书籍" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="onBooksAdd(scope.$index)"
              ></el-button>
              <el-tag style="margin-left: 10px" v-if="scope.row.value">{{
                scope.row.book_info.book_name
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="flex-box">
                <CustomButton
                  tip-text="删除"
                  type="danger"
                  is-svg
                  icon="delete"
                  @onClick="onDeleteBanner(scope.$index)"
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          style="margin: 15px 0 15px 30px"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="onPushBanner"
          >模块</el-button
        >
      </div>

      <div class="mod-title">书籍展示模块</div>

      <div class="banner-box">
        <el-table ref="dataList" :data="book_show">
          <el-table-column label="序号" type="index" width="80" align="center">
          </el-table-column>
          <el-table-column label="书籍标题" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入名称" v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="排列样式" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.value.style" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="书籍分类" align="center">
            <template slot-scope="scope">
              <el-select
                v-model.number="scope.row.value.category_id"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in booksData"
                  :key="item.value"
                  :label="item.category_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="flex-box">
                <CustomButton
                  tip-text="删除"
                  type="danger"
                  is-svg
                  icon="delete"
                  @onClick="onDeleteBook(scope.$index)"
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button
            style="margin: 15px 0 15px 30px"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="onPushBook"
            >模块</el-button
          >

          <el-tooltip content="最多添加8个模块" placement="top" effect="light">
            <i class="el-icon-question" style="color: #3da2ff; margin-left: 10px"></i>
          </el-tooltip>
        </div>
      </div>
      <el-footer height="10%">
        <el-button type="primary" style="margin-right: 27px" @click="submitForm"
          >保存</el-button
        >
        <el-button type="info" plain @click="resetForm('selectItem')">重置</el-button>
      </el-footer>
    </el-main>

    <BooksDialog
      :isBooksShow="isBooksShow"
      @onSelectItem="onSelectItem"
      @handle-close="isBooksShow = false"
      :booksData="booksData"
    ></BooksDialog>
  </div>
</template>

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

import BooksDialog from "./books-dialog/books-dialog";

import { getCategoryList } from "@/api/sort-management";
import { getHomePage, homeSetting } from "@/api/home";

getHomePage;
export default {
  components: {
    ActionButton,
    CustomButton,
    BooksDialog,
  },
  data() {
    return {
      selectIndex: null,
      isBooksShow: false,
      banner: [],
      book_show: [],
      booksData: [],
      options: [
        {
          value: "1",
          label: "竖向排列",
        },
        {
          value: "2",
          label: "横向排列",
        },
      ],
    };
  },

  mounted() {
    this.init();
    this.openCheckBooksDialog();
  },

  methods: {
    // 初始化
    init() {
      getHomePage().then((res) => {
        
        if (res.data.banner) {
          this.banner = res.data.banner;
          this.book_show = res.data.book_show;
        } else {
          this.book_show = [
            {
              name: "",
              value: { style: "", category_id: "" },
              status: "",
            },
            {
              name: "",
              value: { style: "", category_id: "" },
              status: "",
            },
          ];
          this.banner = [
            { name: "", value: "", status: "" },
            { name: "", value: "", status: "" },
          ];
        }
      });
    },

    /**
     * 添加书籍
     */

    onBooksAdd(i) {
      this.isBooksShow = true;
      this.selectIndex = i;
    },

    onSelectItem(data) {
      this.isBooksShow = false;
      this.banner[this.selectIndex].value = data.book_id;

      this.banner[this.selectIndex].book_info = data;
    },

    // 删除banner
    onDeleteBanner(i) {
      this.banner.splice(i, 1);
    },
    onDeleteBook(i) {
      this.book_show.splice(i, 1);
    },

    // 刷新
    refreshData() {
      console.log("刷新");
    },

    // 打开查看书籍弹窗
    openCheckBooksDialog() {
      this.booksData = [];
      getCategoryList({
        source_platform: "1",
        need_num: true,
      }).then((res) => {
        this.booksData = res.data; // 分类列表
      });
    },
    onPushBanner() {
      this.banner.push({
        name: "",
        value: "",
        status: "",
      });
    },
    onPushBook() {
      this.book_show.push({
        name: "",
        value: { style: "", category_id: "" },
        status: "",
      });
    },

    submitForm() {
      homeSetting({
        book_show: this.book_show,
        banner: this.banner,
      }).then((res) => {
        this.init();

        this.$message.success("保存成功");
      });
    },
    resetForm() {
      this.init();
    },
  },
};
</script>

<style lang="scss" scoped>
.mod-title {
  color: #333333;
  font-size: 14px;
  font-weight: bold;
}

.banner-box {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e3e3e3;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  margin: 12px 0 20px;
}
</style>