You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

240 lines
7.1 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<!-- 搜索 -->
<content-wrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form-item label="敏感词" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入敏感词"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="标签" prop="tag">
<el-select
v-model="queryParams.tag"
placeholder="请选择标签"
clearable
@keyup.enter="handleQuery"
>
<el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="parseInt(dict.value)"
:label="dict.label"
:value="parseInt(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')]"
/>
</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-button
type="primary"
plain
@click="openModal('create')"
v-hasPermi="['system:sensitive-word:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="warning"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:sensitive-word:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button type="success" plain @click="handleTest">
<Icon icon="ep:document-checked" class="mr-5px" /> 测试
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="敏感词" align="center" prop="name" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="描述" align="center" prop="description" />
<el-table-column label="标签" align="center" prop="tags">
<template #default="scope">
<el-tag
:disable-transitions="true"
:key="index"
v-for="(tag, index) in scope.row.tags"
:index="index"
class="mr-5px"
>
{{ tag }}
</el-tag>
&nbsp; &nbsp;
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['infra:config:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:config:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
<!-- 表单弹窗:添加/修改 -->
<SensitiveWordForm ref="modalRef" @success="getList" />
<!-- 表单弹窗:测试敏感词 -->
<SensitiveWordTestForm ref="modalTestRef" />
</template>
<script setup lang="ts" name="SensitiveWord">
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as SensitiveWordApi from '@/api/system/sensitiveWord'
import SensitiveWordForm from './form.vue' // TODO @blue-syd
import SensitiveWordTestForm from './testForm.vue'
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) //
const total = ref(0) //
const list = ref([]) //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
tag: undefined,
status: undefined,
createTime: []
})
const queryFormRef = ref() //
const exportLoading = ref(false) //
const tags = ref([])
/** */
const getList = async () => {
loading.value = true
try {
const data = await SensitiveWordApi.getSensitiveWordPage(queryParams) // TODO @blue-syd去掉 API 后缀哈
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 modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, tags.value, id)
}
// TODO @blue-syd还少一个【测试】按钮的功能参见 http://dashboard.yudao.iocoder.cn/system/sensitive-word
/* 测试敏感词按钮操作 */
const modalTestRef = ref()
const handleTest = () => {
modalTestRef.value.openModal(tags.value)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await SensitiveWordApi.deleteSensitiveWord(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await SensitiveWordApi.exportSensitiveWord(queryParams) // TODO @blue-syd去掉 API 后缀哈
download.excel(data, '敏感词.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 获得 Tag 标签列表 */
const getTags = async () => {
tags.value = await SensitiveWordApi.getSensitiveWordTags() // TODO @blue-syd去掉 API 后缀哈
}
/** 初始化 **/
onMounted(() => {
getTags()
getList()
})
</script>