FE_middlePlatform_server/src/views/parnerOperation/mobileRole.vue

<template>
  <div class="page">
    <div class="tool">
      <div class="search-wrap">
        <el-input class="keyword" placeholder="请输入标题" v-model.trim="keyword" clearable></el-input>
      </div>
      <div class="actions">
        <el-button v-auth="'/site/list:内容管理:文章管理:删除'" @click="batchDel">批量删除</el-button>
        <el-button v-auth="'/site/list:内容管理:文章管理:新增'" type="primary" @click="add" >新增文章</el-button>
      </div>
    </div>
    <el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column>
      <el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column>
      <el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column>
      <el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column>
      <el-table-column prop="updateTime" label="修改日期" align="center" min-width="150"></el-table-column>
      <el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100"></el-table-column>
      <el-table-column prop="totalBrowsing" label="已学习人数" align="center" min-width="70"></el-table-column>
      <el-table-column prop="workNumber" label="状态" align="center" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.isRelease ? '已发布' : '草稿' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="170">
        <template slot-scope="scope">
          <el-button v-auth="'/site/list:内容管理:文章管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button v-auth="'/site/list:内容管理:文章管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button>
          <el-switch
            class="m-l-10"
            v-model="scope.row.isDisable"
            :active-value="0"
            :inactive-value="1"
            @change="switchOff($event, scope.row, scope.$index)">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import Setting from '@/setting'
import util from '@/libs/util'
import { mapMutations } from 'vuex'
export default {
    data() {
      return {
        keyword: '',
        list: [],
        page: 1,
        pageSize: 10,
        total: 0,
        modifiedTimeSort: '',
        publicationTimeSort: '',
        ordinalSort: 0,
        multipleSelection: [],
      };
    },
    watch: {
      keyword: function(val) {
        clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(() => {
          this.initData()
        }, 500)
      }
    },
    mounted() {
      // this.getData()
    },
    methods: {
      // 文章列表
      getData() {
        const { keyword } = this
        const data = {
          pageNum: this.page,
          pageSize: this.pageSize,
          ordinalSort: this.ordinalSort,
          title: this.field === 'title' ? keyword : '',
          founder: this.field === 'founder' ? keyword : '',
          column: this.field === 'column' ? keyword : '',
          editor: this.field === 'editor' ? keyword : ''
        }
        if (this.modifiedTimeSort !== '') data.modifiedTimeSort = this.modifiedTimeSort
        if (this.publicationTimeSort !== '') data.publicationTimeSort = this.publicationTimeSort
        this.$post(this.api.queryArticle, data).then(({ data }) => {
          this.list = data.records
          this.total = +data.total
        }).catch(err => {})
      },
      currentChange(val) {
        this.page = val
        this.getData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      initData() {
        this.$refs.table.clearSelection()
        this.page = 1
        this.getData()
      },
      // 批量删除
      batchDel() {
        const list = this.multipleSelection
        if (list.length) {
          this.$confirm('确定要删除吗？', '提示', {
            type: 'warning'
          }).then(() => {
            const data = []
            list.map(e => {
              data.push('ids=' + e.id)
            })
            this.$post(`${this.api.deleteArticle}?${data.join('&')}`).then(res => {
              this.$refs.table.clearSelection()
              util.successMsg("删除成功")
              this.getData()
            }).catch(res => {})
          }).catch(() => {})
        } else {
          util.errorMsg('请先选择数据 ！')
        }
      },
      // 删除
      handleDelete(row) {
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$post(`${this.api.deleteArticle}?ids=${row.id}`).then(res => {
            util.successMsg('删除成功')
            this.getData()
          }).catch(res => {})
        }).catch(() => {})
      },
      // 禁用启用
      switchOff(val, row) {
        this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {})
      },
      // 新增
      add() {
        this.$router.push(`/schemeSet`)
      },
      // 排序回调
      sortChange(column) {
        const { order } = column
        // 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个
        // 两个时间0默认倒序 1升序
        if (column.prop === 'updateTime') {
          this.modifiedTimeSort = order ? order === 'ascending' ? 1 : 0 : ''
          if (order) {
            this.publicationTimeSort = ''
            this.ordinalSort = ''
          }
        }
        if (column.prop === 'releaseTime') {
          this.publicationTimeSort = order ? order === 'ascending' ? 1 : 0 : ''
          if (order) {
            this.modifiedTimeSort = ''
            this.ordinalSort = ''
          }
        }
        // 序号排序 0默认升序 1倒序
        if (column.prop === 'sequence') {
          this.ordinalSort = order ? order === 'ascending' ? 0 : 1 : ''
          if (order) {
            this.publicationTimeSort = ''
            this.modifiedTimeSort = ''
          }
        }
        this.getData()
      },
      // 编辑
      edit(row) {
        this.$router.push(`add?id=${row.id}&columnId=${this.$refs.column.getCurrentKey()}&columnName=${this.$refs.column.getCurrentNode().columnName}`)
      },
    }
};
</script>

<style lang="scss" scoped>

</style>