FE_occupationlab_server/src/pages/activity/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="'/activity/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="'/activity/list:管理:公告通知:编辑'">编辑</el-button>
                    <el-button type="text" @click="del(scope.row)" v-auth="'/activity/list:管理:公告通知:删除'">删除</el-button>
                    <el-switch
                        v-auth="'/activity/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">
            </el-pagination>
        </div>
    </div>
</template>

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

export default {
    name: "matchSignup",
    data() {
        return {
            token: util.local.get(Setting.tokenKey),
            id: this.$route.query.id,
            keyword: "",
            listData: [],
            multipleSelection: [],
            pageNo: 1,
            pageSize: 10,
            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.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'
            }).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>