car-wash-java/admin-web-new/src/views/admin/message/index.vue

<script setup lang="ts">
import { reactive, onMounted, ref, nextTick } from "vue";
import { getMessageList, sendMessage, deleteMessage, batchReadMessage, batchDeleteMessage, searchAdminUser } from "@/api/message";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ElMessage, ElMessageBox } from "element-plus";
import { getDictOptions, formatDict, getDictColor } from "@/utils/dict";

defineOptions({ name: "AdminMessage" });

const queryRef = ref();

const state = reactive({
  formQuery: {
    title: "",
    type: "" as number | string,
    status: "" as number | string
  },
  pageQuery: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  tableData: {
    height: 500,
    data: [] as Array<any>,
    loading: false
  },
  selectedIds: [] as number[]
});

// 发送消息弹窗
const sendVisible = ref(false);
const sendLoading = ref(false);
const sendForm = reactive({
  title: "",
  type: 1,
  priority: 0,
  sendType: "all" as "all" | "selected",
  receiverIds: [] as number[],
  content: ""
});
const userOptions = ref<any[]>([]);

// 详情弹窗
const detailVisible = ref(false);
const currentMsg = ref<any>(null);

const typeOptions = () => getDictOptions("message_type");
const priorityOptions = () => getDictOptions("priority");

onMounted(() => {
  loadData();
  nextTick(() => {
    const bodyHeight = document.body.clientHeight;
    const queryHeight = queryRef.value?.$el?.clientHeight || 0;
    state.tableData.height = bodyHeight - queryHeight - 280;
  });
});

const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageNum = 1;
  }
  state.tableData.loading = true;
  getMessageList({ ...state.formQuery, ...state.pageQuery })
    .then((res: any) => {
      const { list, total } = res || {};
      state.tableData.data = list || [];
      state.pageQuery.total = total || 0;
    })
    .catch(() => {
      state.tableData.data = [];
    })
    .finally(() => {
      state.tableData.loading = false;
    });
};

const handleSizeChange = (size: number) => {
  state.pageQuery.pageSize = size;
  loadData(true);
};

const handleCurrentChange = (page: number) => {
  state.pageQuery.pageNum = page;
  loadData();
};

const handleSearch = () => {
  loadData(true);
};

const handleReset = () => {
  state.formQuery = {
    title: "",
    type: "",
    status: ""
  };
  loadData(true);
};

const handleSelectionChange = (rows: any[]) => {
  state.selectedIds = rows.map(k => k.id);
};

const handleView = (row: any) => {
  currentMsg.value = row;
  detailVisible.value = true;
};

const handleDelete = (row: any) => {
  ElMessageBox.confirm("确定要删除此消息吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteMessage(row.id).then(() => {
      ElMessage.success("删除成功");
      loadData(true);
    });
  }).catch(() => {});
};

const handleBatchRead = () => {
  if (state.selectedIds.length === 0) {
    ElMessage.warning("请选择消息");
    return;
  }
  batchReadMessage({ ids: state.selectedIds }).then(() => {
    ElMessage.success("已标记为已读");
    loadData(true);
  });
};

const handleBatchDelete = () => {
  if (state.selectedIds.length === 0) {
    ElMessage.warning("请选择消息");
    return;
  }
  ElMessageBox.confirm("确定要批量删除选中的消息吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    batchDeleteMessage({ ids: state.selectedIds }).then(() => {
      ElMessage.success("删除成功");
      loadData(true);
    });
  }).catch(() => {});
};

// 发送消息
const handleOpenSend = () => {
  Object.assign(sendForm, {
    title: "",
    type: 1,
    priority: 0,
    sendType: "all",
    receiverIds: [],
    content: ""
  });
  userOptions.value = [];
  sendVisible.value = true;
};

const handleSendTypeChange = (val: string) => {
  if (val !== "selected") {
    sendForm.receiverIds = [];
  }
};

const searchUsers = (query: string) => {
  if (!query) {
    userOptions.value = [];
    return;
  }
  searchAdminUser({ keyword: query, pageSize: 20 }).then((res: any) => {
    userOptions.value = (res || []).map((k: any) => ({
      label: `${k.nickname || k.username} (${k.mobilePhone || ""})`,
      value: k.id || k.userId
    }));
  });
};

const handleSendSubmit = async () => {
  if (!sendForm.title || !sendForm.content) {
    ElMessage.warning("请填写标题和内容");
    return;
  }
  sendLoading.value = true;
  try {
    await sendMessage({
      title: sendForm.title,
      content: sendForm.content,
      type: sendForm.type,
      priority: sendForm.priority,
      sendAll: sendForm.sendType === "all",
      receiverIds: sendForm.sendType === "selected" ? sendForm.receiverIds : []
    });
    ElMessage.success("发送成功");
    sendVisible.value = false;
    loadData(true);
  } catch (e) {
    ElMessage.error("发送失败");
  } finally {
    sendLoading.value = false;
  }
};
</script>

<template>
  <div class="page-container">
    <el-card shadow="hover">
      <!-- 搜索栏 -->
      <el-form ref="queryRef" :model="state.formQuery" inline class="search-form">
        <el-form-item label="标题">
          <el-input
            v-model="state.formQuery.title"
            placeholder="请输入标题"
            clearable
            style="width: 180px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="state.formQuery.type" placeholder="请选择" clearable style="width: 140px">
            <el-option v-for="opt in typeOptions()" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="state.formQuery.status" placeholder="请选择" clearable style="width: 120px">
            <el-option v-for="opt in getDictOptions('message_status')" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="useRenderIcon('ri/search-line')" @click="handleSearch">查询</el-button>
          <el-button :icon="useRenderIcon('ri/refresh-line')" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 操作栏 -->
      <div class="toolbar">
        <el-button type="primary" :icon="useRenderIcon('ri/add-line')" @click="handleOpenSend">发送消息</el-button>
        <el-button :icon="useRenderIcon('ri/mail-check-line')" :disabled="state.selectedIds.length === 0" @click="handleBatchRead">批量已读</el-button>
        <el-button type="danger" :icon="useRenderIcon('ri/delete-bin-line')" :disabled="state.selectedIds.length === 0" @click="handleBatchDelete">批量删除</el-button>
      </div>

      <!-- 表格 -->
      <el-table
        v-loading="state.tableData.loading"
        :data="state.tableData.data"
        :height="state.tableData.height"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <el-table-column type="selection" width="50" />
        <el-table-column label="ID" prop="id" width="80" />
        <el-table-column label="标题" prop="title" min-width="200" show-overflow-tooltip />
        <el-table-column label="类型" prop="type" width="120">
          <template #default="{ row }">
            <el-tag :type="getDictColor('message_type', row.type)" size="small">{{ formatDict('message_type', row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发送者" prop="senderName" width="100" />
        <el-table-column label="接收者" prop="receiverName" width="100" />
        <el-table-column label="优先级" prop="priority" width="100">
          <template #default="{ row }">
            <el-tag :type="getDictColor('priority', row.priority)" size="small">{{ formatDict('priority', row.priority) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="80">
          <template #default="{ row }">
            <el-tag :type="getDictColor('message_status', row.status)" size="small">{{ formatDict('message_status', row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发送时间" prop="createTime" width="170" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleView(row)">查看</el-button>
            <el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="state.pageQuery.pageNum"
          v-model:page-size="state.pageQuery.pageSize"
          :total="state.pageQuery.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 发送消息弹窗 -->
    <el-dialog v-model="sendVisible" title="发送消息" width="650px" destroy-on-close>
      <el-form :model="sendForm" label-width="100px">
        <el-form-item label="标题" required>
          <el-input v-model="sendForm.title" placeholder="请输入消息标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="sendForm.type" style="width: 100%">
            <el-option v-for="opt in typeOptions()" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="sendForm.priority" style="width: 100%">
            <el-option v-for="opt in priorityOptions()" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送方式">
          <el-radio-group v-model="sendForm.sendType" @change="handleSendTypeChange">
            <el-radio value="all">全部用户</el-radio>
            <el-radio value="selected">指定用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接收者" v-if="sendForm.sendType === 'selected'">
          <el-select
            v-model="sendForm.receiverIds"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="搜索并选择用户"
            :remote-method="searchUsers"
            :loading="false"
            style="width: 100%"
          >
            <el-option v-for="user in userOptions" :key="user.value" :label="user.label" :value="user.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容" required>
          <el-input v-model="sendForm.content" type="textarea" :rows="5" placeholder="请输入消息内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="sendVisible = false">取消</el-button>
        <el-button :loading="sendLoading" type="primary" @click="handleSendSubmit">发送</el-button>
      </template>
    </el-dialog>

    <!-- 消息详情弹窗 -->
    <el-dialog v-model="detailVisible" title="消息详情" width="600px" destroy-on-close>
      <template v-if="currentMsg">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="标题">{{ currentMsg.title }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag :type="getDictColor('message_type', currentMsg.type)" size="small">{{ formatDict('message_type', currentMsg.type) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="发送者">{{ currentMsg.senderName }}</el-descriptions-item>
          <el-descriptions-item label="发送时间">{{ currentMsg.createTime }}</el-descriptions-item>
        </el-descriptions>
        <div class="detail-section">
          <div class="section-title">消息内容</div>
          <div class="content-box">{{ currentMsg.content }}</div>
        </div>
      </template>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page-container {
  padding: 15px;
}

.search-form {
  margin-bottom: 15px;
}

.toolbar {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.detail-section {
  margin-top: 15px;

  .section-title {
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--el-text-color-primary);
  }

  .content-box {
    padding: 12px;
    background: var(--el-fill-color-lighter);
    border-radius: 4px;
    white-space: pre-wrap;
    line-height: 1.6;
  }
}
</style>