|
|
@@ -0,0 +1,235 @@
|
|
|
+<template>
|
|
|
+ <div class="main-container">
|
|
|
+ <TableBody>
|
|
|
+ <template #header>
|
|
|
+ <el-input
|
|
|
+ v-model="forbiddenWords.forbiddenWord"
|
|
|
+ style="width: 200px; margin: 10px 0 10px 20px"
|
|
|
+ placeholder="请输入违禁词"
|
|
|
+ clearable>
|
|
|
+ </el-input>
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ icon="Refresh"
|
|
|
+ style="margin-left:10px"
|
|
|
+ @click="resetSearch"
|
|
|
+ size="small">
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="Search"
|
|
|
+ @click="doRefresh"
|
|
|
+ size="small">
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template #tableConfig>
|
|
|
+ <TableConfig
|
|
|
+ v-model:border ="tableConfig.border"
|
|
|
+ v-model:stripe ="tableConfig.stripe"
|
|
|
+ @refresh="doRefresh"
|
|
|
+ >
|
|
|
+ <template #actions>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="PlusIcon"
|
|
|
+ @click="add"
|
|
|
+ >
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </TableConfig>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <el-table
|
|
|
+ ref="tableRef"
|
|
|
+ v-loding="tableLoading"
|
|
|
+ :data="dataList"
|
|
|
+ :header-cell-style="tableConfig.headerCellStyle"
|
|
|
+ :size="tableConfig.size"
|
|
|
+ :stripe="tableConfig.stripe"
|
|
|
+ :border="tableConfig.border"
|
|
|
+ :height="tableConfig.height"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="ID"
|
|
|
+ prop="id"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="违禁词"
|
|
|
+ prop="forbiddenWord"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="操作"
|
|
|
+ fixed="right"
|
|
|
+ width="220px"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click="edit(scope.row)"
|
|
|
+ >编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click="remove(scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <TableFooter
|
|
|
+ ref="tableFooter"
|
|
|
+ @refresh="doRefresh"
|
|
|
+ @pageChanged="doRefresh"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </TableBody>
|
|
|
+ <Dialog ref="dialogRef" style="width: 25%" title="添加">
|
|
|
+ <template #content>
|
|
|
+ <el-form
|
|
|
+ class="base-form-container"
|
|
|
+ :model="forbiddenWords"
|
|
|
+ :inline="true"
|
|
|
+ label-width="120px"
|
|
|
+ label-position="right"
|
|
|
+ >
|
|
|
+ <el-form-item label="违禁词">
|
|
|
+ <el-input v-model="forbiddenWords.forbiddenWord" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { useDataTable, usePost } from '@/hooks';
|
|
|
+import { onBeforeMount, onMounted, reactive, ref } from 'vue';
|
|
|
+import { forbiddenWordsLink, saveForbiddenWordsLink, delForbiddenWordsLink } from '@/api/url';
|
|
|
+import type { DialogType, TableFooter } from '@/components/types';
|
|
|
+import { ElMessage , ElMessageBox } from 'element-plus';
|
|
|
+import { id } from 'element-plus/es/locale';
|
|
|
+const forbiddenWords = reactive<ForbiddenWordsModel>({
|
|
|
+ id:0,
|
|
|
+ forbiddenWord: '',
|
|
|
+ isDefault: 0
|
|
|
+
|
|
|
+ });
|
|
|
+const post = usePost();
|
|
|
+const dialogRef = ref<DialogType>();
|
|
|
+const tableFooter = ref<TableFooter>();
|
|
|
+const tableRef = ref();
|
|
|
+const {
|
|
|
+ tableConfig,
|
|
|
+ tableLoading,
|
|
|
+ dataList,
|
|
|
+ offTableCollapseTransition,
|
|
|
+ handleSuccess,
|
|
|
+ useHeight
|
|
|
+} = useDataTable<ForbiddenWordsModel>();
|
|
|
+
|
|
|
+function add() {
|
|
|
+ forbiddenWords.forbiddenWord = "";
|
|
|
+ dialogRef.value?.show(() => {
|
|
|
+ post({
|
|
|
+ url: saveForbiddenWordsLink,
|
|
|
+ data: {
|
|
|
+ data: forbiddenWords
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ dialogRef.value?.close();
|
|
|
+ doRefresh();
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function doRefresh() {
|
|
|
+ post({
|
|
|
+ url: forbiddenWordsLink,
|
|
|
+ data: {
|
|
|
+ ...tableFooter.value?.withPageInfoData(),
|
|
|
+ data: forbiddenWords
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ return handleSuccess(res);
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ tableFooter.value?.setTotalSize(res.total);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const resetSearch = () => {
|
|
|
+ forbiddenWords.forbiddenWord = "";
|
|
|
+ doRefresh();
|
|
|
+}
|
|
|
+
|
|
|
+function editFunction() {
|
|
|
+ post({
|
|
|
+ url: saveForbiddenWordsLink,
|
|
|
+ data: {
|
|
|
+ data: forbiddenWords,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ doRefresh();
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ dialogRef.value?.close();
|
|
|
+ })
|
|
|
+ .catch(console.log);
|
|
|
+}
|
|
|
+
|
|
|
+function edit(item: any) {
|
|
|
+ forbiddenWords.id = item.id;
|
|
|
+ forbiddenWords.forbiddenWord = item.forbiddenWord;
|
|
|
+ dialogRef.value?.show(() => {
|
|
|
+ editFunction();
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function remove(item: any) {
|
|
|
+ ElMessageBox.confirm("确认删除【"+ item.forbiddenWord + "】吗?", "提示")
|
|
|
+ .then(() => {
|
|
|
+ post({
|
|
|
+ url: delForbiddenWordsLink,
|
|
|
+ data: {
|
|
|
+ data: {
|
|
|
+ id: item.id,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ doRefresh();
|
|
|
+ ElMessage.success('删除成功');
|
|
|
+ })
|
|
|
+ .catch(console.log);
|
|
|
+ })
|
|
|
+ .catch(console.log)
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ doRefresh();
|
|
|
+ useHeight();
|
|
|
+});
|
|
|
+onBeforeMount(offTableCollapseTransition);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.gender-container {
|
|
|
+ .gender-icon {
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|