backend/src/views/system/smssettings/tasklist.vue

<template>
  <div class="container-box">
    <div class="header-bar">
      <h2>短信任务列表</h2>
      <div>
        <el-button type="primary" @click="handleSearch">
          搜索
        </el-button>
        <el-button @click="fetchTasks" :loading="loading">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <el-divider />

    <div class="search-bar">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="手机号">
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号关键词"
            style="width: 220px"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部" style="width: 160px">
            <el-option label="全部" value="" />
            <el-option label="待发送" :value="0" />
            <el-option label="处理中" :value="1" />
            <el-option label="失败" :value="2" />
            <el-option label="已上报" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="loading" :data="pagedList" style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="phone" label="手机号" min-width="150" />
      <el-table-column
        prop="content"
        label="短信内容"
        min-width="260"
        show-overflow-tooltip
      />
      <el-table-column prop="code" label="验证码" width="120" />
      <el-table-column prop="status" label="状态" width="130">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="180" />
      <el-table-column prop="update_time" label="更新时间" width="180" />
    </el-table>

    <div class="pagination" v-if="total > 0">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="applyPagination"
        @current-change="applyPagination"
      />
    </div>

  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getSmsTaskList } from "../../../api/sms";

const loading = ref(false);

const searchForm = reactive({
  phone: "",
  status: "",
});

const tasks = ref<any[]>([]);
const pagedList = ref<any[]>([]);

const pagination = reactive({
  current: 1,
  size: 10,
});

const total = ref(0);

const getStatusTagType = (status: any) => {
  const map: Record<string | number, string> = {
    0: "info",
    1: "warning",
    2: "danger",
    3: "success",
  };
  return map[status] || "info";
};

const getStatusText = (status: any) => {
  const map: Record<string | number, string> = {
    0: "待发送",
    1: "发送中",
    2: "发送失败",
    3: "发送成功",
  };
  return map[status] || String(status ?? "");
};

const applyPagination = () => {
  total.value = tasks.value.length;
  const start = (pagination.current - 1) * pagination.size;
  const end = start + pagination.size;
  pagedList.value = tasks.value.slice(start, end);
};

const fetchTasks = async () => {
  loading.value = true;
  try {
    const res = await getSmsTaskList({
      status: searchForm.status,
      phone: searchForm.phone,
    });
    if (res.code === 200) {
      tasks.value = res.list || [];
      pagination.current = 1;
      applyPagination();
    } else {
      ElMessage.error(res.msg || "获取短信任务列表失败");
    }
  } catch (error: any) {
    ElMessage.error(error?.message || "获取短信任务列表失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  pagination.current = 1;
  fetchTasks();
};

const resetSearch = () => {
  searchForm.phone = "";
  searchForm.status = "";
  pagination.current = 1;
  fetchTasks();
};

onMounted(() => {
  fetchTasks();
});
</script>

<style scoped lang="less">
.container-box {
  padding: 20px;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-bar {
  margin-bottom: 16px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>