goelia-ai-admin/src/views/music-library-manager/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-container-lt">
        <el-form :inline="true" label-position="left" :model="listQuery">
          <el-form-item>
            <el-input clearable v-model="listQuery.musicCategoryName" placeholder="音乐类目名称"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="getList()">搜索</el-button >
            <el-button type="primary" @click="add()">新增</el-button >
        </el-form>
      </div>
    </div>
    <div class="table-container">
      <el-table  style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
        stripe border fit highlight-current-row>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="音乐类目名称" min-width="100" align="center" prop="musicCategoryName" />
        <el-table-column label="音乐分类" min-width="130" align="center">
          <template slot-scope="scope">
            {{  scope.row.type == 0 ? '类目' : '音乐' }}
          </template>
        </el-table-column>
        <el-table-column label="类目排序" min-width="100" align="center" prop="musicCategorySort" />
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="success" size="mini" icon="el-icon-edit" circle @click="handleEdit(scope.row)" />
            </el-tooltip>
            <el-tooltip class="more" effect="dark" content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete-solid" circle
                @click="handleDelete(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <swPage v-if="total > 0" key="2" :listQuery="listQuery" :total="total" pos="btmRight" @retPage="retPage" />
    <MusicLibraryFormModal ref="MusicLibraryFormModal" @confirm="retPage"></MusicLibraryFormModal>
  </div>
</template>

<script>
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import { auditStatus } from "@/constants/index";
import { getValueByKey } from "@/utils/index";
import { fetchMusicConfigList, deleteMusicCategoryInfo } from "@/api/musicLibraryManager";
import permission from "@/directive/permission";
import MusicLibraryFormModal from "./components/MusicLibraryFormModal";

export default {
  name: "videoCoverManager",
  directives: {
    waves,
    permission
  },
  components: {
    swPage,
    MusicLibraryFormModal
  },
  computed: {
  },
  data() {
    return {
      auditStatus,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      downloadingRows: {},
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        type: 0,
        musicCategoryName: null
      }
    };
  },
  //页面创建的时候执行
  created() {
    this.getList();
  },
  methods: {
    getValueByKey,
    getList() {
      this.listLoading = true;
      const params = this.listQuery
      if (!this.listQuery.musicCategoryName) {
        delete params.musicCategoryName
      }
      fetchMusicConfigList(params).then(res => {
        if (200 == res.code) {
          this.total = res.data.total;
          this.list = res.data.rows;
        }
        this.listLoading = false;
      });
    },
    retPage() {
      //分页
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleEdit(row) {
      this.$refs.MusicLibraryFormModal.show(row, 'edit');
    },
    add() {
      this.$refs.MusicLibraryFormModal.show(null, 'add');
    },
    handleDelete(row) {
      //删除
      this.$confirm("删除类目该类目下所有音乐都会删除，确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const { id } = row;
        deleteMusicCategoryInfo([id]).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 3000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/layout.scss";

.button {
  .el-button {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>