123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <template>
- <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
- <ContentWrap>
- <!-- 搜索工作栏 -->
- <el-form
- class="-mb-15px"
- :model="queryParams"
- ref="queryFormRef"
- :inline="true"
- label-width="68px"
- >
- <el-form-item label="用户编号" prop="userId">
- <el-input
- v-model="queryParams.userId"
- placeholder="请输入用户编号"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item label="用户类型" prop="userType">
- <el-select
- v-model="queryParams.userType"
- placeholder="请选择用户类型"
- clearable
- class="!w-240px"
- >
- <el-option
- v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="模板编码" prop="templateCode">
- <el-input
- v-model="queryParams.templateCode"
- placeholder="请输入模板编码"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item label="模版类型" prop="templateType">
- <el-select
- v-model="queryParams.templateType"
- placeholder="请选择模版类型"
- clearable
- class="!w-240px"
- >
- <el-option
- v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="创建时间" prop="createTime">
- <el-date-picker
- v-model="queryParams.createTime"
- value-format="YYYY-MM-DD HH:mm:ss"
- type="daterange"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item>
- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
- <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
- </el-form-item>
- </el-form>
- </ContentWrap>
- <!-- 列表 -->
- <ContentWrap>
- <el-table v-loading="loading" :data="list">
- <el-table-column label="编号" align="center" prop="id" />
- <el-table-column label="用户类型" align="center" prop="userType">
- <template #default="scope">
- <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
- </template>
- </el-table-column>
- <el-table-column label="用户编号" align="center" prop="userId" width="80" />
- <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
- <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
- <el-table-column
- label="模版内容"
- align="center"
- prop="templateContent"
- width="200"
- show-overflow-tooltip
- />
- <el-table-column
- label="模版参数"
- align="center"
- prop="templateParams"
- width="180"
- show-overflow-tooltip
- >
- <template #default="scope"> {{ scope.row.templateParams }}</template>
- </el-table-column>
- <el-table-column label="模版类型" align="center" prop="templateType" width="120">
- <template #default="scope">
- <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
- </template>
- </el-table-column>
- <el-table-column label="是否已读" align="center" prop="readStatus" width="100">
- <template #default="scope">
- <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
- </template>
- </el-table-column>
- <el-table-column
- label="阅读时间"
- align="center"
- prop="readTime"
- width="180"
- :formatter="dateFormatter"
- />
- <el-table-column
- label="创建时间"
- align="center"
- prop="createTime"
- width="180"
- :formatter="dateFormatter"
- />
- <el-table-column label="操作" align="center" fixed="right">
- <template #default="scope">
- <el-button
- link
- type="primary"
- @click="openDetail(scope.row)"
- v-hasPermi="['system:notify-message:query']"
- >
- 详情
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <Pagination
- :total="total"
- v-model:page="queryParams.pageNo"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
- </ContentWrap>
- <!-- 表单弹窗:详情 -->
- <NotifyMessageDetail ref="detailRef" />
- </template>
- <script lang="ts" setup>
- import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
- import { dateFormatter } from '@/utils/formatTime'
- import * as NotifyMessageApi from '@/api/system/notify/message'
- import NotifyMessageDetail from './NotifyMessageDetail.vue'
- defineOptions({ name: 'SystemNotifyMessage' })
- const loading = ref(true) // 列表的加载中
- const total = ref(0) // 列表的总页数
- const list = ref([]) // 列表的数据
- const queryParams = reactive({
- pageNo: 1,
- pageSize: 10,
- userType: undefined,
- userId: undefined,
- templateCode: undefined,
- templateType: undefined,
- createTime: []
- })
- const queryFormRef = ref() // 搜索的表单
- /** 查询列表 */
- const getList = async () => {
- loading.value = true
- try {
- const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
- list.value = data.list
- total.value = data.total
- } finally {
- loading.value = false
- }
- }
- /** 搜索按钮操作 */
- const handleQuery = () => {
- queryParams.pageNo = 1
- getList()
- }
- /** 重置按钮操作 */
- const resetQuery = () => {
- queryFormRef.value.resetFields()
- handleQuery()
- }
- /** 详情操作 */
- const detailRef = ref()
- const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
- detailRef.value.open(data)
- }
- /** 初始化 **/
- onMounted(() => {
- getList()
- })
- </script>
|