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)"
    :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{ 'text-align': 'center' }"
    style="width: 100%; margin-top: 16px; --el-table-border-color: none"
  >
    <el-table-column width="380" prop="title" label="消息标题" />

    <el-table-column width="200" 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">
        <div class="pushstatus" v-if="scope.row.status === 0"
          ><img src="../img//prepareToPush.png" alt=""
        /></div>
        <div class="pushstatus" v-else><img src="../img/completed.png" alt="" /></div>
      </template>
    </el-table-column>

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

    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <div class="operation">
          <el-tooltip class="box-item" effect="light" content="查看" placement="bottom">
            <img src="../img/view.png" @click="handleView(scope.row.id)" />
          </el-tooltip>
          <el-tooltip class="box-item" effect="light" content="删除" placement="bottom">
            <img src="../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, pushStatusMapping } from '../type';
import SearchBar from './SearchBar.vue';
import { storeToRefs } from 'pinia';
import useSysNotion from '../store/index';
import { deleteSystemMessage } from '../api/index';
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();

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

const handleView = (id: number) => {
  router.push(`/message/sysnotion-config?id=${id}`);
};
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;
  justify-content: center;
  /* :first-child {
      margin-right: 20px;
    } */
  :nth-child(2) {
    margin-left: 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>