index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <template>
  2. <content-wrap>
  3. <!-- 搜索工作栏 -->
  4. <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
  5. <el-form-item label="公告标题" prop="title">
  6. <el-input
  7. v-model="queryParams.title"
  8. placeholder="请输入公告标题"
  9. clearable
  10. @keyup.enter="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="公告类型" prop="type">
  14. <el-select v-model="queryParams.type" placeholder="请选择公告类型" clearable>
  15. <el-option
  16. v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE)"
  17. :key="parseInt(dict.value)"
  18. :label="dict.label"
  19. :value="parseInt(dict.value)"
  20. />
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="状态" prop="status">
  24. <el-select v-model="queryParams.type" placeholder="请选择状态" clearable>
  25. <el-option
  26. v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
  27. :key="parseInt(dict.value)"
  28. :label="dict.label"
  29. :value="parseInt(dict.value)"
  30. />
  31. </el-select>
  32. </el-form-item>
  33. <el-form-item>
  34. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  35. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  36. <el-button
  37. type="primary"
  38. @click="openModal('create')"
  39. v-hasPermi="['system:notice:create']"
  40. >
  41. <Icon icon="ep:plus" class="mr-5px" /> 新增
  42. </el-button>
  43. </el-form-item>
  44. </el-form>
  45. <!-- 列表 -->
  46. <el-table v-loading="loading" :data="list" align="center">
  47. <el-table-column label="公告主键" align="center" prop="id" />
  48. <el-table-column label="公告标题" align="center" prop="title" />
  49. <el-table-column label="公告类型" align="center" prop="type">
  50. <template #default="scope">
  51. <dict-tag :type="DICT_TYPE.SYSTEM_NOTICE_TYPE" :value="scope.row.type" />
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="状态" align="center" prop="status">
  55. <template #default="scope">
  56. <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
  57. </template>
  58. </el-table-column>
  59. <el-table-column
  60. label="公告内容"
  61. align="center"
  62. prop="content"
  63. :show-overflow-tooltip="true"
  64. />
  65. <el-table-column
  66. label="创建时间"
  67. align="center"
  68. prop="createTime"
  69. width="180"
  70. :formatter="dateFormatter"
  71. />
  72. <el-table-column label="操作" align="center">
  73. <template #default="scope">
  74. <el-button
  75. link
  76. type="primary"
  77. @click="openModal('update', scope.row.id)"
  78. v-hasPermi="['system:notice:update']"
  79. >
  80. 编辑
  81. </el-button>
  82. <el-button
  83. link
  84. type="danger"
  85. @click="handleDelete(scope.row.id)"
  86. v-hasPermi="['system:notice:delete']"
  87. >
  88. 删除
  89. </el-button>
  90. </template>
  91. </el-table-column>
  92. </el-table>
  93. <!-- 分页 -->
  94. <Pagination
  95. :total="total"
  96. v-model:page="queryParams.pageNo"
  97. v-model:limit="queryParams.pageSize"
  98. @pagination="getList"
  99. />
  100. </content-wrap>
  101. <NoticeForm ref="modalRef" @success="getList" />
  102. </template>
  103. <script setup lang="tsx">
  104. import { DICT_TYPE, getDictOptions } from '@/utils/dict'
  105. import { dateFormatter } from '@/utils/formatTime'
  106. import * as NoticeApi from '@/api/system/notice'
  107. import { DictTag } from '@/components/DictTag'
  108. import NoticeForm from './form.vue'
  109. const message = useMessage() // 消息弹窗
  110. const { t } = useI18n() // 国际化
  111. const loading = ref(true) // 列表的加载中
  112. const total = ref(0) // 列表的总页数
  113. const list = ref([]) // 列表的数据
  114. const queryParams = reactive({
  115. title: '',
  116. type: undefined,
  117. status: undefined,
  118. pageNo: 1,
  119. pageSize: 100
  120. })
  121. const queryFormRef = ref() // 搜索的表单
  122. /** 查询公告列表 */
  123. const getList = async () => {
  124. loading.value = true
  125. try {
  126. const data = await NoticeApi.getNoticePageApi(queryParams)
  127. list.value = data.list
  128. total.value = data.total
  129. } finally {
  130. loading.value = false
  131. }
  132. }
  133. /** 搜索按钮操作 */
  134. const handleQuery = () => {
  135. queryParams.pageNo = 1
  136. getList()
  137. }
  138. /** 重置按钮操作 */
  139. const resetQuery = () => {
  140. queryFormRef.value.resetFields()
  141. handleQuery()
  142. }
  143. /** 添加/修改操作 */
  144. const modalRef = ref()
  145. const openModal = (type: string, id?: number) => {
  146. modalRef.value.openModal(type, id)
  147. }
  148. /** 删除按钮操作 */
  149. const handleDelete = async (id: number) => {
  150. try {
  151. // 删除的二次确认
  152. await message.delConfirm()
  153. // 发起删除
  154. await NoticeApi.deleteNoticeApi(id)
  155. message.success(t('common.delSuccess'))
  156. // 刷新列表
  157. await getList()
  158. } catch {}
  159. }
  160. /** 初始化 **/
  161. onMounted(() => {
  162. getList()
  163. })
  164. </script>