QRAPI/Web/src/views/system/message/publishIndex.vue

<template>
  <div class="app-container" v-loading="state.loading">
    <el-card class="search-container">
      <el-form :inline="true">
        <el-form-item label="标题">
          <el-input v-model="state.queryParams.title" placeholder="标题" clearable />
        </el-form-item>
        <el-form-item label="类型">
          <EnumSelect v-model="state.queryParams.type" enum="MessageTypeEnum" clearable style="width:210px"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery" icon="Search" v-auth="'publishIndex:page'">
            查询
          </el-button>
          <el-button
            type="primary"
            @click="() => messageEditDialogRef.openDialog()"
            v-auth="'publishIndex:add'"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="paged-table-container">
      <el-table ref="tableRef" row-key="id" :data="state.tableData" border>
        <el-table-column type="index" width="50">
          <template #default="scope">
            {{ scope.$index + 1 + (state.pageParams.Page - 1) * state.pageParams.PageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="messageTypeText" label="类型" />
        <el-table-column prop="statusText" label="状态" >
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="success" disable-transitions>{{scope.row.statusText}}</el-tag>
            <el-tag v-else-if="scope.row.status === 0" type="info" disable-transitions>{{scope.row.statusText}}</el-tag>
            <el-tag v-else type="danger" disable-transitions>{{scope.row.statusText}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publishAt" label="发布时间" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="left" width="260" show-overflow-tooltip>
          <template #default="scope">
            <el-button
              link
              icon="Edit"
              type="primary"
              @click="() => messageEditDialogRef.openDialog(scope.row.id)"
              v-auth="'publishIndex:edit'"
              v-if="scope.row.status === 0|| scope.row.status === 2"
            >
              编辑
            </el-button>
            <el-button
              link
              icon="Edit"
              type="warning"
              @click="()=>publishDialogRef.openDialog(scope.row.id)"
              v-auth="'publishIndex:publish'"
              v-if="scope.row.status === 0|| scope.row.status === 2"
            >
              发布
            </el-button>
            <el-button
              link
              icon="Back"
              type="warning"
              @click="()=>handleRecalled([scope.row.id])"
              v-auth="'publishIndex:recalled'"
              v-if="scope.row.status === 1"
            >
              撤回
            </el-button>
            <el-button
              link
              icon="Delete"
              type="danger"
              @click="handleDelete([scope.row.id])"
              v-auth="'publishIndex:delete'"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 15px;float:right"
        v-model:currentPage="state.pageParams.Page"
        v-model:page-size="state.pageParams.PageSize"
        :total="state.pageParams.Total"
        background
        layout="total, sizes,prev, pager, next"
        @size-change="handleQuery"
        @current-change="handleQuery"
        :page-sizes="[10, 20, 50, 100]"
      />
    </el-card>
    <MessageEditDialog ref="messageEditDialogRef" @onClose="handleQuery" />
    <PublishDialog ref="publishDialogRef" @onClose="handleQuery" />
  </div>
</template>
<script setup>
defineOptions({ name: 'publishIndex' })
import { reactive, ref, onMounted } from 'vue'
import MessageEditDialog from './components/editDialog.vue'
import PublishDialog from './components/publishDialog.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import EnumSelect from '../components/enumSelect.vue'
import { pagedPublish,deleteMessage,recalledMessage } from '@/api/system/messageApi'

const state = reactive({
  loading: false,
  queryParams: {
    name: '',
    type: ''
  },
  pageParams: {
    Page: 1,
    PageSize: 10,
    Total: 0
  },
  tableData: []
})

const messageEditDialogRef = ref()
const publishDialogRef=ref()

onMounted(() => {
  handleQuery()
})

function handleQuery() {
  state.loading = true
  pagedPublish(Object.assign({}, state.queryParams, state.pageParams))
    .then((resp) => {
      state.tableData = resp.data.data
      state.pageParams.Total = resp.data.total
    })
    .finally(() => (state.loading = false))
}

function handleRecalled(ids){
  ElMessageBox.confirm('是否撤回通知公告？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    state.loading = true
    recalledMessage({ ids })
      .then(() => {
        ElMessage({
          message: '撤回成功',
          type: 'success'
        })
        handleQuery()
      })
      .finally(() => (state.loading = false))
  })
}

function handleDelete(ids) {
  ElMessageBox.confirm('是否删除通知公告？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    state.loading = true
    deleteMessage({ ids })
      .then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        handleQuery()
      })
      .finally(() => (state.loading = false))
  })
}
</script>