school_website/ruoyi-ui/src/views/cms/content/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--栏目数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="categoryName"
            placeholder="请输入栏目名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="categoryOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <!--          内容列表-->
        <el-tab-pane label="内容列表" name="contentList">
          <cms-content-list v-if="activeName==='contentList'" :cid="selectCategoryId" :temp="temp"></cms-content-list>
        </el-tab-pane>
        <!--          回收站-->
        <el-tab-pane label="回收站" name="recycle">
          <cms-recycle-list v-if="activeName==='recycle'" :cid="selectCategoryId"></cms-recycle-list>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import {categoryTreeSelect, delContent, getContent, listContent} from "@/api/cms/content";
import CMSContentList from '@/views/cms/content/contentList';
import CMSContentRecycleList from '@/views/cms/content/contentRecycleList'
export default {
  name: "Content",
  components: {
    'cms-content-list': CMSContentList,
    'cms-recycle-list': CMSContentRecycleList
  },
  dicts: ['cms_category_disable', "cms_content_type"],
  data() {
    return {
      selectCategoryId: '',
      activeName: "contentList",
      // 内容表格数据
      contentList: null,
      // 遮罩层
      loading: true,
      // 栏目名称
      categoryName: undefined,
      // 栏目树选项
      categoryOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contentTitle: null,
        contentAuthor: null,
        contentType: null,
        isDisable: null
      },
      // 显示搜索条件
      showSearch: true,
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 非多个禁用
      multiple: true,
      // 列信息
      columns: [
        {key: 0, label: `内容标题`, visible: true},
        {key: 1, label: `内容描述`, visible: true},
        {key: 2, label: `内容类型`, visible: true},
        {key: 3, label: `内容状态`, visible: true},
        {key: 4, label: `创建时间`, visible: true},
      ],
      temp: "0"
    }
  },
  watch: {
    // 根据名称筛选部门树
    categoryName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getCategoryTree();
  },
  methods: {
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        categoryId: null,
        contentTitle: null,
        contentDetails: null,
        contentDescription: null,
        contentImg: null,
        contentAuthor: null,
        contentSource: null,
        isAccessory: null,
        accessoryUrl: null,
        contentType: null,
        contentCount: null,
        isDisable: null,
        remark: null,
        delFlag: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null
      };
      this.resetForm("form");
    },
    /** 查询内容列表 */
    getList() {
      this.loading = true;
      listContent(this.queryParams).then(response => {
        this.contentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.selectCategoryId = data.id;
      this.temp = data.temp;
    },
    /** 查询栏目下拉树结构 */
    getCategoryTree() {
      categoryTreeSelect().then(response => {
        this.categoryOptions = response.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleTabClick (tab, event) {

    },
  }
};
</script>