sl-sfy-safety/src/views/message/systemNotifications/components/systemNotificationTable.vue

<template>
  <SearchBar />

  <el-button
    type="primary"
    @click="createNotification"
    style="margin-top: 24px; margin-bottom: 16px; width: 138px"
  >
    <img src="../img/create.png" style="margin-top: -1px; margin-right: 5px" />新建系统通知
  </el-button>

  <el-table
    :data="sysNotionData"
    stripe
    height="calc(100vh - 400px)"
    style="width: 100%; margin-top: 16px; --el-table-border-color: none"
  >
    <el-table-column prop="title" label="消息标题" />

    <el-table-column width="300" prop="pushChannel" label="推送渠道">
      <template #default="scope">
        <div>
          {{ scope.row.pushChannel.map((channel) => pushChannelMapping[channel]).join('，') }}
        </div>
      </template>
    </el-table-column>

    <el-table-column width="200" prop="recipientType" label="推送对象">
      <template #default="scope">
        <div>
          {{ recipientTypeMapping[scope.row.recipientType] }}
        </div>
      </template>
    </el-table-column>

    <el-table-column width="135" prop="status" label="推送状态">
      <template #default="scope">
        <img src="../img//prepareToPush.png" alt="" v-if="scope.row.status === 0" />
        <img src="../img/completed.png" alt="" v-else />
      </template>
    </el-table-column>

    <el-table-column prop="pushAt" label="推送时间" width="200px" />

    <el-table-column label="操作" fixed="right" width="120px">
      <template #default="scope">
        <div class="operation">
          <el-tooltip effect="light" content="查看" placement="bottom">
            <img src="@/views/message/alarmMessages/img/view.png" @click="handleView(scope.row.id, 'view')" />
          </el-tooltip>
           <el-tooltip class="box-item" effect="light" content="编辑" placement="bottom" v-if="scope.row.status === PushStatusEnum.PEDDING">
              <img src="@/views/message/alarmMessages/img/edit.png" @click="handleView(scope.row.id, 'edit')" />
            </el-tooltip>
          <el-tooltip effect="light" content="删除" placement="bottom">
            <img src="@/views/message/alarmMessages/img/delete.png" @click="handleDelete(scope.row.id)" />
          </el-tooltip>
        </div>
      </template>
    </el-table-column>

    <template #empty>
      <div class="emptyDiv">
        <img src="../img/empty.png" class="emptyImg" />
        <span class="emptySpan">暂无数据</span>
      </div>
    </template>
  </el-table>

  <div class="pagination" v-if="total != 0">
    <el-pagination
      :page-sizes="[10, 20, 30, 40, 50, 80]"
      :small="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog v-model="deleteDialog" width="424px" top="20%" class="deleteDialog">
    <template #header="">
      <div class="deleteDialogHeader">
        <img src="../img/deleteTip.png" class="deleteTip" />
        <span class="titleSpan">请确认是否删除</span>
      </div>
    </template>
    <span style="margin-left: 37px">删除之后，该条数据将无法恢复</span>
    <div class="dialogBottom">
      <el-button class="dialogBtn" @click="deleteDialog = false">取消</el-button>
      <el-button class="dialogBtn" type="primary" @click="confirmDelete">确定</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { pushChannelMapping, recipientTypeMapping, PushStatusEnum } from '../type';
  import SearchBar from './SearchBar.vue';
  import { storeToRefs } from 'pinia';
  import useSysNotion from '../store/index';
  import { deleteSystemMessage } from '@/api/message/system-notifications';
  import { ElMessage } from 'element-plus';

  const sysNotion = useSysNotion();
  const { total, page, pagesize, sysNotionData } = storeToRefs(sysNotion);
  const { getSysNotion } = sysNotion;
  const deleteDialog = ref(false);
  const router = useRouter();
  type ViewModel = 'view' | 'edit';

  const createNotification = () => {
    router.push('/message/sys-notification-config');
  };

  const handleView = (id: number, model: ViewModel ) => {
    router.push(`/message/sys-notification-config?id=${id}&viewModel=${model}`);
  };
  const deleteId = ref<number>(0);
  const handleDelete = (id: number) => {
    deleteDialog.value = true;
    deleteId.value = id;
  };

  const confirmDelete = () => {
    deleteSystemMessage(deleteId.value).then(() => {
      ElMessage({
        message: '删除成功',
        type: 'success',
        plain: true,
      });
      deleteDialog.value = false;
      getSysNotion();
    });
  };

  const handleSizeChange = (newPageSize: number) => {
    pagesize.value = newPageSize;
    getSysNotion();
  };

  const handleCurrentChange = (newCurrentPage: number) => {
    page.value = newCurrentPage;
    getSysNotion();
  };

  onMounted(() => {
    getSysNotion();
  });
</script>
<style lang="scss" scoped>
  .pagination {
    position: absolute;
    bottom: 35px;
    right: 67px;
  }

  .deleteDialog {
    .deleteDialogHeader {
      display: flex;
      .deleteTip {
        height: 24px;
        width: 24px;
      }
      .titleSpan {
        height: 24px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.88);
        line-height: 24px;
        text-align: center;
        margin-left: 12px;
      }
    }
    .dialogBottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
    }
  }

  .operation {
    display: flex;
    
    img + img {
      margin-left: 20px;
    }

    button {
     margin-: 20px;
    }
  }

  .emptyDiv {
    margin-top: 78px;
    margin: auto;
    width: 396px;
    .emptyImg {
      height: 257px;
    }
    .emptySpan {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.45);
      text-align: left;
      font-style: normal;
    }
  }

  :deep(.el-dialog) {
    border-radius: 8px;
  }
  .pushstatus {
    display: flex;
    justify-content: center;
    width: 100%;
  }
</style>