index.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <!-- 搜索工作栏 -->
  3. <ContentWrap>
  4. <el-form
  5. ref="queryFormRef"
  6. :inline="true"
  7. :model="queryParams"
  8. class="-mb-15px"
  9. label-width="68px"
  10. >
  11. <el-form-item label="敏感词" prop="name">
  12. <el-input
  13. v-model="queryParams.name"
  14. class="!w-240px"
  15. clearable
  16. placeholder="请输入敏感词"
  17. @keyup.enter="handleQuery"
  18. />
  19. </el-form-item>
  20. <el-form-item label="标签" prop="tag">
  21. <el-select
  22. v-model="queryParams.tag"
  23. class="!w-240px"
  24. clearable
  25. placeholder="请选择标签"
  26. @keyup.enter="handleQuery"
  27. >
  28. <el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item label="状态" prop="status">
  32. <el-select v-model="queryParams.status" clearable placeholder="请选择启用状态">
  33. <el-option
  34. v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
  35. :key="dict.value"
  36. :label="dict.label"
  37. :value="dict.value"
  38. class="!w-240px"
  39. />
  40. </el-select>
  41. </el-form-item>
  42. <el-form-item label="创建时间" prop="createTime">
  43. <el-date-picker
  44. v-model="queryParams.createTime"
  45. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  46. class="!w-240px"
  47. end-placeholder="结束日期"
  48. start-placeholder="开始日期"
  49. type="daterange"
  50. value-format="YYYY-MM-DD HH:mm:ss"
  51. />
  52. </el-form-item>
  53. <el-form-item>
  54. <el-button @click="handleQuery">
  55. <Icon class="mr-5px" icon="ep:search" />
  56. 搜索
  57. </el-button>
  58. <el-button @click="resetQuery">
  59. <Icon class="mr-5px" icon="ep:refresh" />
  60. 重置
  61. </el-button>
  62. <el-button
  63. v-hasPermi="['system:sensitive-word:create']"
  64. plain
  65. type="primary"
  66. @click="openForm('create')"
  67. >
  68. <Icon class="mr-5px" icon="ep:plus" />
  69. 新增
  70. </el-button>
  71. <el-button
  72. v-hasPermi="['system:sensitive-word:export']"
  73. :loading="exportLoading"
  74. plain
  75. type="success"
  76. @click="handleExport"
  77. >
  78. <Icon class="mr-5px" icon="ep:download" />
  79. 导出
  80. </el-button>
  81. <el-button plain type="warning" @click="openTestForm">
  82. <Icon class="mr-5px" icon="ep:document-checked" />
  83. 测试
  84. </el-button>
  85. </el-form-item>
  86. </el-form>
  87. </ContentWrap>
  88. <!-- 列表 -->
  89. <ContentWrap>
  90. <el-table v-loading="loading" :data="list">
  91. <el-table-column align="center" label="编号" prop="id" />
  92. <el-table-column align="center" label="敏感词" prop="name" />
  93. <el-table-column align="center" label="状态" prop="status">
  94. <template #default="scope">
  95. <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
  96. </template>
  97. </el-table-column>
  98. <el-table-column align="center" label="描述" prop="description" />
  99. <el-table-column align="center" label="标签" prop="tags">
  100. <template #default="scope">
  101. <el-tag
  102. v-for="tag in scope.row.tags"
  103. :key="tag"
  104. :disable-transitions="true"
  105. class="mr-5px"
  106. >
  107. {{ tag }}
  108. </el-tag>
  109. </template>
  110. </el-table-column>
  111. <el-table-column
  112. :formatter="dateFormatter"
  113. align="center"
  114. label="创建时间"
  115. prop="createTime"
  116. width="180"
  117. />
  118. <el-table-column align="center" label="操作">
  119. <template #default="scope">
  120. <el-button
  121. v-hasPermi="['infra:config:update']"
  122. link
  123. type="primary"
  124. @click="openForm('update', scope.row.id)"
  125. >
  126. 编辑
  127. </el-button>
  128. <el-button
  129. v-hasPermi="['infra:config:delete']"
  130. link
  131. type="danger"
  132. @click="handleDelete(scope.row.id)"
  133. >
  134. 删除
  135. </el-button>
  136. </template>
  137. </el-table-column>
  138. </el-table>
  139. <!-- 分页 -->
  140. <Pagination
  141. v-model:limit="queryParams.pageSize"
  142. v-model:page="queryParams.pageNo"
  143. :total="total"
  144. @pagination="getList"
  145. />
  146. </ContentWrap>
  147. <!-- 表单弹窗:添加/修改 -->
  148. <SensitiveWordForm ref="formRef" @success="getList" />
  149. <!-- 表单弹窗:测试敏感词 -->
  150. <SensitiveWordTestForm ref="testFormRef" />
  151. </template>
  152. <script lang="ts" setup>
  153. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  154. import { dateFormatter } from '@/utils/formatTime'
  155. import download from '@/utils/download'
  156. import * as SensitiveWordApi from '@/api/system/sensitiveWord'
  157. import SensitiveWordForm from './SensitiveWordForm.vue'
  158. import SensitiveWordTestForm from './SensitiveWordTestForm.vue'
  159. defineOptions({ name: 'SystemSensitiveWord' })
  160. const message = useMessage() // 消息弹窗
  161. const { t } = useI18n() // 国际化
  162. const loading = ref(true) // 列表的加载中
  163. const total = ref(0) // 列表的总页数
  164. const list = ref([]) // 列表的数据
  165. const queryParams = reactive({
  166. pageNo: 1,
  167. pageSize: 10,
  168. name: undefined,
  169. tag: undefined,
  170. status: undefined,
  171. createTime: []
  172. })
  173. const queryFormRef = ref() // 搜索的表单
  174. const exportLoading = ref(false) // 导出的加载中
  175. const tagList = ref([]) // 标签数组
  176. /** 查询列表 */
  177. const getList = async () => {
  178. loading.value = true
  179. try {
  180. const data = await SensitiveWordApi.getSensitiveWordPage(queryParams)
  181. list.value = data.list
  182. total.value = data.total
  183. } finally {
  184. loading.value = false
  185. }
  186. }
  187. /** 搜索按钮操作 */
  188. const handleQuery = () => {
  189. queryParams.pageNo = 1
  190. getList()
  191. }
  192. /** 重置按钮操作 */
  193. const resetQuery = () => {
  194. queryFormRef.value.resetFields()
  195. handleQuery()
  196. }
  197. /** 添加/修改操作 */
  198. const formRef = ref()
  199. const openForm = (type: string, id?: number) => {
  200. formRef.value.open(type, id)
  201. }
  202. /** 测试敏感词按钮操作 */
  203. const testFormRef = ref()
  204. const openTestForm = () => {
  205. testFormRef.value.open()
  206. }
  207. /** 删除按钮操作 */
  208. const handleDelete = async (id: number) => {
  209. try {
  210. // 删除的二次确认
  211. await message.delConfirm()
  212. // 发起删除
  213. await SensitiveWordApi.deleteSensitiveWord(id)
  214. message.success(t('common.delSuccess'))
  215. // 刷新列表
  216. await getList()
  217. } catch {}
  218. }
  219. /** 导出按钮操作 */
  220. const handleExport = async () => {
  221. try {
  222. // 导出的二次确认
  223. await message.exportConfirm()
  224. // 发起导出
  225. exportLoading.value = true
  226. const data = await SensitiveWordApi.exportSensitiveWord(queryParams)
  227. download.excel(data, '敏感词.xls')
  228. } catch {
  229. } finally {
  230. exportLoading.value = false
  231. }
  232. }
  233. /** 初始化 **/
  234. onMounted(async () => {
  235. await getList()
  236. // 获得 Tag 标签列表
  237. tagList.value = await SensitiveWordApi.getSensitiveWordTagList()
  238. })
  239. </script>