index.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
  3. <ContentWrap>
  4. <!-- 搜索工作栏 -->
  5. <el-form
  6. class="-mb-15px"
  7. :model="queryParams"
  8. ref="queryFormRef"
  9. :inline="true"
  10. label-width="68px"
  11. >
  12. <el-form-item label="用户编号" prop="userId">
  13. <el-input
  14. v-model="queryParams.userId"
  15. placeholder="请输入用户编号"
  16. clearable
  17. @keyup.enter="handleQuery"
  18. class="!w-240px"
  19. />
  20. </el-form-item>
  21. <el-form-item label="用户类型" prop="userType">
  22. <el-select
  23. v-model="queryParams.userType"
  24. placeholder="请选择用户类型"
  25. clearable
  26. class="!w-240px"
  27. >
  28. <el-option
  29. v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
  30. :key="dict.value"
  31. :label="dict.label"
  32. :value="dict.value"
  33. />
  34. </el-select>
  35. </el-form-item>
  36. <el-form-item label="模板编码" prop="templateCode">
  37. <el-input
  38. v-model="queryParams.templateCode"
  39. placeholder="请输入模板编码"
  40. clearable
  41. @keyup.enter="handleQuery"
  42. class="!w-240px"
  43. />
  44. </el-form-item>
  45. <el-form-item label="模版类型" prop="templateType">
  46. <el-select
  47. v-model="queryParams.templateType"
  48. placeholder="请选择模版类型"
  49. clearable
  50. class="!w-240px"
  51. >
  52. <el-option
  53. v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
  54. :key="dict.value"
  55. :label="dict.label"
  56. :value="dict.value"
  57. />
  58. </el-select>
  59. </el-form-item>
  60. <el-form-item label="创建时间" prop="createTime">
  61. <el-date-picker
  62. v-model="queryParams.createTime"
  63. value-format="YYYY-MM-DD HH:mm:ss"
  64. type="daterange"
  65. start-placeholder="开始日期"
  66. end-placeholder="结束日期"
  67. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  68. class="!w-240px"
  69. />
  70. </el-form-item>
  71. <el-form-item>
  72. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  73. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  74. </el-form-item>
  75. </el-form>
  76. </ContentWrap>
  77. <!-- 列表 -->
  78. <ContentWrap>
  79. <el-table v-loading="loading" :data="list">
  80. <el-table-column label="编号" align="center" prop="id" />
  81. <el-table-column label="用户类型" align="center" prop="userType">
  82. <template #default="scope">
  83. <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
  84. </template>
  85. </el-table-column>
  86. <el-table-column label="用户编号" align="center" prop="userId" width="80" />
  87. <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
  88. <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
  89. <el-table-column
  90. label="模版内容"
  91. align="center"
  92. prop="templateContent"
  93. width="200"
  94. show-overflow-tooltip
  95. />
  96. <el-table-column
  97. label="模版参数"
  98. align="center"
  99. prop="templateParams"
  100. width="180"
  101. show-overflow-tooltip
  102. >
  103. <template #default="scope"> {{ scope.row.templateParams }}</template>
  104. </el-table-column>
  105. <el-table-column label="模版类型" align="center" prop="templateType" width="120">
  106. <template #default="scope">
  107. <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
  108. </template>
  109. </el-table-column>
  110. <el-table-column label="是否已读" align="center" prop="readStatus" width="100">
  111. <template #default="scope">
  112. <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
  113. </template>
  114. </el-table-column>
  115. <el-table-column
  116. label="阅读时间"
  117. align="center"
  118. prop="readTime"
  119. width="180"
  120. :formatter="dateFormatter"
  121. />
  122. <el-table-column
  123. label="创建时间"
  124. align="center"
  125. prop="createTime"
  126. width="180"
  127. :formatter="dateFormatter"
  128. />
  129. <el-table-column label="操作" align="center" fixed="right">
  130. <template #default="scope">
  131. <el-button
  132. link
  133. type="primary"
  134. @click="openDetail(scope.row)"
  135. v-hasPermi="['system:notify-message:query']"
  136. >
  137. 详情
  138. </el-button>
  139. </template>
  140. </el-table-column>
  141. </el-table>
  142. <!-- 分页 -->
  143. <Pagination
  144. :total="total"
  145. v-model:page="queryParams.pageNo"
  146. v-model:limit="queryParams.pageSize"
  147. @pagination="getList"
  148. />
  149. </ContentWrap>
  150. <!-- 表单弹窗:详情 -->
  151. <NotifyMessageDetail ref="detailRef" />
  152. </template>
  153. <script lang="ts" setup>
  154. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  155. import { dateFormatter } from '@/utils/formatTime'
  156. import * as NotifyMessageApi from '@/api/system/notify/message'
  157. import NotifyMessageDetail from './NotifyMessageDetail.vue'
  158. defineOptions({ name: 'SystemNotifyMessage' })
  159. const loading = ref(true) // 列表的加载中
  160. const total = ref(0) // 列表的总页数
  161. const list = ref([]) // 列表的数据
  162. const queryParams = reactive({
  163. pageNo: 1,
  164. pageSize: 10,
  165. userType: undefined,
  166. userId: undefined,
  167. templateCode: undefined,
  168. templateType: undefined,
  169. createTime: []
  170. })
  171. const queryFormRef = ref() // 搜索的表单
  172. /** 查询列表 */
  173. const getList = async () => {
  174. loading.value = true
  175. try {
  176. const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
  177. list.value = data.list
  178. total.value = data.total
  179. } finally {
  180. loading.value = false
  181. }
  182. }
  183. /** 搜索按钮操作 */
  184. const handleQuery = () => {
  185. queryParams.pageNo = 1
  186. getList()
  187. }
  188. /** 重置按钮操作 */
  189. const resetQuery = () => {
  190. queryFormRef.value.resetFields()
  191. handleQuery()
  192. }
  193. /** 详情操作 */
  194. const detailRef = ref()
  195. const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
  196. detailRef.value.open(data)
  197. }
  198. /** 初始化 **/
  199. onMounted(() => {
  200. getList()
  201. })
  202. </script>