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

<template>
  <div class="cms-content-list">
    <el-row :gutter="10" class="mb12">
      <el-col :span="1.5">
        <el-button
          plain
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          type="success"
          icon="el-icon-s-promotion"
          size="mini"
          :disabled="multiple"
          @click="handlePublish">发布
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          type="warning"
          icon="el-icon-download"
          size="mini"
          :disabled="multiple"
          @click="handleOffline">下线
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-form :model="queryParams" ref="queryForm" size="small" class="el-form-search" style="text-align:left;"
               :inline="true">
        <div class="mb12">
          <el-form-item prop="contentTitle">
            <el-input
              v-model="queryParams.contentTitle"
              placeholder="请输入内容标题"
              clearable
              style="width: 200px"
              @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item prop="contentType">
            <el-select
              v-model="queryParams.contentType"
              placeholder="内容类型"
              clearable
              style="width: 125px">
              <el-option
                v-for="dict in dict.type.cms_content_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="状态"
              clearable
              style="width: 110px">
              <el-option
                v-for="dict in dict.type.cms_content_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置刷新</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-row>
    <el-table
      v-loading="loading"
      ref="tableContentList"
      :data="contentList"
      size="small"
      @cell-dblclick="handleEdit"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="内容标题" align="center" prop="contentTitle"/>
      <el-table-column label="内容类型" align="center" prop="contentType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cms_content_type" :value="scope.row.contentType"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cms_content_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" align="center" prop="publishDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.publishDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下线时间" align="center" prop="offlineDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.offlineDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <span class="btn-cell-wrap">
            <el-button
              size="small"
              type="text"
              icon="el-icon-s-promotion"
              :disabled="scope.row.status === '1'"
              @click="handlePublish(scope.row)">发布</el-button>
          </span>
          <span class="btn-cell-wrap">
            <el-button
              size="small"
              type="text"
              icon="el-icon-download"
              :disabled="scope.row.status !== '1'"
              @click="handleOffline(scope.row)">下线</el-button>
          </span>
          <el-dropdown size="small">
            <el-link :underline="false" class="row-more-btn" icon="el-icon-more"></el-link>
            <el-dropdown-menu slot="dropdown">
              <!--              修改-->
              <el-dropdown-item icon="el-icon-edit" @click.native="handleEdit(scope.row)">修改</el-dropdown-item>
              <!--              删除-->
              <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
              <!--              下线-->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"/>
  </div>
</template>
<script>
import {changeContentByIds, delContent, getContent, listContent} from "@/api/cms/content";

export default {
  name: "CMSContentList",
  dicts: ['cms_content_type', 'cms_content_status'],
  props: {
    cid: {
      type: String,
      defaultValue: undefined,
      required: false
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      contentList: null,
      multiple: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contentTitle: undefined,
        contentType: undefined,
        status: undefined,
        categoryId: "0",
        delFlag: "0",
      },
      total: 0,
    }
  },
  watch: {
    cid(newVal) {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        categoryId: newVal,
        delFlag: "0",
      }
      this.getList()
    },
  },
  created() {
    if (this.cid === "") {
      this.queryParams.categoryId = "0"
    } else {
      this.queryParams.categoryId = this.cid.toString()
    }
    this.getList();
  },
  methods: {
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({path: '/content/editor', query: {"categoryId": this.queryParams.categoryId}})
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id ? [row.id] : this.selectedRows.map(row => row.id);
      this.$modal.confirm('是否确认删除所选内容？').then(function () {
        return delContent(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getContent(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改内容";
      });
    },
    // 发布
    handlePublish(row) {
      const statues = row.status ? [row.status] : this.selectedRows.map(row => row.status)
      if (statues.includes("1")) {
        this.$modal.msgError("所选内容已发布！！！");
      } else {
        const ids = row.id ? [row.id] : this.selectedRows.map(row => row.id);
        this.$modal.confirm('是否确认发布所选内容？').then(function () {
          return changeContentByIds(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("发布成功");
        }).catch(() => {
        });
      }
    },
    // 下线
    handleOffline(row) {
      const statues = row.status ? [row.status] : this.selectedRows.map(row => row.status)
      if (!statues.includes("1")) {
        this.$modal.msgError("所选内容为初稿或已下线内容，不能下线！！！");
      } else {
        const ids = row.id ? [row.id] : this.selectedRows.map(row => row.id);
        this.$modal.confirm('是否确认下线所选内容？').then(function () {
          return changeContentByIds(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("下线成功");
        }).catch(() => {
        });
      }
    },
    // 查询
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 查询内容列表 */
    getList() {
      this.loading = true;
      listContent(this.queryParams).then(response => {
        this.contentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 双击数据
    handleEdit(row) {
      this.$router.push({path: '/content/editor', query: {"contentId": row.id}})
    },
  }
};
</script>
<style scoped>
.cms-content-list .head-container .el-select .el-input {
  width: 110px;
}

.cms-content-list .el-divider {
  margin-top: 10px;
}

.cms-content-list .el-tabs__header {
  margin-bottom: 10px;
}

.cms-content-list .pagination-container {
  height: 30px;
}

.cms-content-list .row-more-btn {
  padding-left: 10px;
}

.cms-content-list .top-icon {
  font-weight: bold;
  font-size: 12px;
  color: green;
}

.cms-content-list .content_attr {
  margin-left: 2px;
}

.mb12 {
  margin-bottom: 12px;
}
</style>