FE_occupationlab_server/src/pages/match/manage/notice.vue

<template>
  <!-- 报名人员 -->
  <div class="page-content"
       style="padding: 24px">
    <div class="tool"
         style="justify-content: flex-end">
      <el-button type="primary"
                 round
                 @click="add"
                 v-auth="'/match/list:管理:公告通知:新增'">新增</el-button>
    </div>

    <el-table ref="table"
              :data="listData"
              class="table"
              stripe
              header-align="center"
              @selection-change="handleSelectionChange"
              row-key="id">
      <el-table-column type="index"
                       width="60"
                       label="序号"
                       align="center">
        <template slot-scope="scope">
          {{ scope.$index + (pageNo - 1) * pageSize + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="announcementTitle"
                       label="标题名称">
      </el-table-column>
      <el-table-column prop="createTime"
                       label="创建时间">
      </el-table-column>
      <el-table-column prop="updateTime"
                       label="发布时间">
      </el-table-column>
      <el-table-column prop="phone"
                       label="状态">
        <template slot-scope="scope">
          {{ scope.row.status ? '已发布' : '草稿' }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="250">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="edit(scope.row)"
                     v-auth="'/match/list:管理:公告通知:编辑'">编辑</el-button>
          <el-button type="text"
                     @click="del(scope.row)"
                     v-auth="'/match/list:管理:公告通知:删除'">删除</el-button>
          <el-switch v-auth="'/match/list:管理:公告通知:启用'"
                     v-model="scope.row.isOpen"
                     :active-text="scope.row.isOpen ? '关' : '开'"
                     :active-value="0"
                     :inactive-value="1"
                     style="margin: 0 10px 0 5px"
                     @change="switchOff($event,scope.row,scope.$index)"></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next"
                     :total="totals"
                     @current-change="handleCurrentChange"
                     :current-page="pageNo"
                     :page-size="pageSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import util from "@/libs/util";
import Setting from "@/setting";

export default {
  data () {
    return {
      token: util.local.get(Setting.tokenKey),
      id: this.$route.query.id,
      keyword: "",
      listData: [],
      multipleSelection: [],
      pageNo: +this.$route.query.page || 1,
      pageSize: 1,
      totals: 0
    };
  },
  watch: {
    keyword: function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.getData();
      }, 500);
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.$post(`${this.api.queryAnnouncementByCompetitionId}?pageNum=${this.pageNo}&pageSize=${this.pageSize}&competitionId=${this.id}`).then(({ data }) => {
        this.listData = data.records
        this.totals = data.total
        this.$refs.table.clearSelection()
      }).catch(res => { })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleCurrentChange (val) {
      this.$router.push({
        path: 'manage',
        query: {
          ...this.$route.query,
          page: val
        }
      })
      this.pageNo = val;
      this.getData();
    },
    del (row) {
      this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$post(`${this.api.deleteAnnouncement}?id=${row.id}`).then(res => {
            util.successMsg("删除成功");
            this.getData();
          }).catch(res => {
          });
        })
        .catch(() => {
        });
    },
    switchOff (val, row, index) {
      if (val) {
        this.$put(`${this.api.disableAnnouncement}?id=${row.id}&isDisable=${val}`).then(res => { }).catch(err => { })
      } else if (!row.status) {
        this.$confirm('是否发布该公告？', '提示', {
          type: 'success',
          closeOnClickModal: false
        }).then(() => {
          this.$put(`${this.api.disableAnnouncement}?id=${row.id}&isDisable=${val}`).then(res => {
            this.$post(this.api.amendmentAnnouncement, {
              id: row.id,
              status: 1
            }).then(res => {
              this.getData()
            }).catch(err => { })
          }).catch(err => { })
        }).catch(() => {
          row.isOpen = 1
        })
      } else {
        this.$put(`${this.api.disableAnnouncement}?id=${row.id}&isDisable=${val}`).then(res => { }).catch(err => { })
      }
    },
    add () {
      this.$router.push(`noticeDetail?competitionId=${this.id}`)
    },
    edit (row) {
      this.$router.push(`noticeDetail?id=${row.id}&competitionId=${this.id}`)
    }
  }
};
</script>

<style scoped>
</style>