yg-yygl 0.0.1

package/src/views/sys/sensitiveword/index.vue

@@ -0,0 +1,765 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus';
+
+import type { BusinessFilterItem, IconActionItem } from '@udp/component-ui';
+
+import type {
+  SensitiveWord,
+  SensitiveWordType,
+} from '../../../api/sensitiveword/types';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Dialog,
+  Icon,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { downloadFileFromBlob } from '@udp-core/shared/utils';
+
+import {
+  Folder,
+  Plus,
+  Search as SearchIcon,
+} from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import {
+  addSensitiveWordType,
+  batchReplaceSensitiveWord,
+  deleteSensitiveWord,
+  deleteSensitiveWordType,
+  exportSensitiveWord,
+  getSensitiveWordList,
+  getSensitiveWordTypeList,
+  importSensitiveWord,
+  updateSensitiveWordType,
+} from '../../../api/sensitiveword';
+import { MainContainer } from '../../../components/main-container';
+
+import SensitiveWordForm from './components/sensitive-word-form.vue';
+import SensitiveWordImport from './components/sensitive-word-import.vue';
+
+// 组件引用
+const sensitiveWordImportRef = ref();
+const sensitiveWordFormRef = ref();
+
+// 当前编辑的敏感词数据
+const currentEditData = ref<any>(null);
+
+// 树型列表相关
+const typeKeyword = ref('');
+const typeList = ref<SensitiveWordType[]>([]);
+const currentType = ref<null | SensitiveWordType>(null);
+const loadingType = ref(false);
+
+// 敏感词类型树相关
+const typeTreeRef = ref();
+const typeTreeData = ref<SensitiveWordType[]>([]);
+const expandAllFlag = ref(false);
+
+// 敏感词列表相关
+
+const searchItems: BusinessFilterItem[] = [
+  {
+    prop: 'senContent',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入敏感词内容',
+  },
+];
+
+const searchParams = ref<Record<string, any>>({});
+
+// 表格引用
+const tableRef = ref<InstanceType<typeof Table>>();
+
+// 表格列配置
+const columns = [
+  { prop: 'senTypeName', label: '敏感词类型', minWidth: 120 },
+  { prop: 'senContent', label: '敏感词内容', minWidth: 150 },
+  { prop: 'senReplace', label: '敏感词替换', minWidth: 150 },
+  { prop: 'updateTime', label: '更新时间', minWidth: 160 },
+];
+
+// API配置
+const api = {
+  list: (params: any) => getSensitiveWordList(params),
+  delete: (id: number | string) => deleteSensitiveWord({ id }),
+};
+
+// 使用表格hooks
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset: tableReset,
+  search,
+  deleteRow,
+  handleSizeChange,
+  handleCurrentPageChange,
+} = useTable({
+  api,
+  beforeRequest: (params: any) => {
+    params.model.senTypeId = currentType.value?.id || '';
+    // console.log('params', params);
+    return {
+      ...params,
+    };
+  },
+});
+
+// 表格/卡片视图切换
+const layoutType = ref<'card' | 'table'>('table');
+const cardOptions = {
+  title: 'senContent',
+  desc: 'senTypeName',
+  extra: 'updateTime',
+  columns,
+  showActions: true,
+  isEdit: true,
+  isDelete: true,
+  onEdit: (row: any) => handleEdit(row),
+  onDelete: (row: any, showConfirm: boolean) => deleteRow(row.id),
+};
+
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: any) => handleEdit(row as SensitiveWord),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: any) => handleDelete(row as SensitiveWord),
+  },
+];
+
+// 对话框相关
+const dialogVisible = ref(false);
+const dialogTitle = ref('');
+
+// 类型对话框相关
+const typeDialogVisible = ref(false);
+const typeDialogTitle = ref('');
+const typeFormRef = ref<FormInstance>();
+const typeFormData = reactive<{
+  id: number | string;
+  senTypeName: string;
+}>({
+  id: '',
+  senTypeName: '',
+});
+const typeFormRules = {
+  senTypeName: [
+    { required: true, message: '请输入类型名称', trigger: 'blur' },
+    {
+      min: 1,
+      max: 20,
+      message: '类型名称长度在 1 到 20 个字符',
+      trigger: 'blur',
+    },
+  ],
+};
+
+// 批量替换对话框相关
+const replaceDialogVisible = ref(false);
+const replaceFormRef = ref<FormInstance>();
+const replaceFormData = reactive({
+  senReplace: '',
+});
+const replaceFormRules = {
+  senReplace: [
+    { required: false, message: '请输入替换内容', trigger: 'blur' },
+    { max: 20, message: '替换内容长度不能超过 20 个字符', trigger: 'blur' },
+  ],
+};
+
+// 导入对话框相关
+const importDialogVisible = ref(false);
+const importing = ref(false);
+
+// 树形组件配置
+const treeProps = {
+  children: 'children',
+  label: 'senTypeName',
+  value: 'id',
+};
+
+// 自定义重置函数
+const reset = () => {
+  // 清空当前选中的类型
+  currentType.value = null;
+  searchParams.value = {};
+  // 取消树节点的当前选中状态
+  typeTreeRef.value?.setCurrentKey(null);
+  // 调用表格重置，不传递类型ID
+  tableReset();
+};
+
+// 加载敏感词类型列表
+const loadTypeList = async () => {
+  loadingType.value = true;
+  try {
+    const res = await getSensitiveWordTypeList({
+      senTypeName: typeKeyword.value,
+    });
+    // 将列表数据转换为树形结构 - 敏感词类型是扁平结构，不需要处理父子关系
+    typeTreeData.value = res || [];
+    // 同时更新下拉选择框的数据
+    typeList.value = res || [];
+  } finally {
+    loadingType.value = false;
+  }
+};
+
+// 过滤敏感词类型
+const filterTypes = async (value: string) => {
+  const res = await getSensitiveWordTypeList({ senTypeName: value });
+  typeTreeData.value = res || [];
+};
+
+// 监听搜索关键词变化
+watch(typeKeyword, (val) => {
+  expandAllFlag.value = val !== '';
+  filterTypes(val);
+});
+
+// 当导入对话框打开时，重置内部组件状态
+watch(importDialogVisible, (newVal) => {
+  if (newVal && sensitiveWordImportRef.value) {
+    // 对话框打开时，尝试清空之前的文件
+    sensitiveWordImportRef.value.clearFile();
+  }
+});
+
+// 选择敏感词类型
+const handleTypeSelect = (data: SensitiveWordType) => {
+  // 如果点击的是当前已选中的节点，则取消选中
+  if (currentType.value && currentType.value.id === data.id) {
+    currentType.value = null;
+    // 取消树节点的当前选中状态
+    typeTreeRef.value?.setCurrentKey(null);
+    search(searchParams.value); // 搜索全部但保留搜索内容
+  } else {
+    // 否则选中点击的节点
+    currentType.value = data;
+    // 刷新列表，传递当前选中的类型ID和搜索内容
+    search(searchParams.value); // 按类型ID搜索并保留搜索内容
+  }
+};
+
+// 新增敏感词
+const handleAdd = () => {
+  dialogTitle.value = '新增敏感词';
+  currentEditData.value = null;
+  dialogVisible.value = true;
+};
+
+// 编辑敏感词
+const handleEdit = (row: SensitiveWord) => {
+  dialogTitle.value = '编辑敏感词';
+  currentEditData.value = row;
+  dialogVisible.value = true;
+};
+
+// 提交敏感词表单
+const submitForm = async () => {
+  if (!sensitiveWordFormRef.value) return;
+
+  try {
+    const result = await sensitiveWordFormRef.value.handleSubmit();
+    if (result) {
+      dialogVisible.value = false;
+      currentEditData.value = null;
+      search();
+    }
+  } catch (error) {
+    console.error('提交敏感词表单失败', error);
+  }
+};
+
+// 删除敏感词
+const handleDelete = async (row: SensitiveWord) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    await deleteSensitiveWord({ id: row.id });
+    ElMessage.success('删除成功');
+    search();
+  } catch {
+    // 用户取消删除，不做处理
+  }
+};
+
+// 批量删除敏感词功能已移除
+
+// 新增敏感词类型
+const handleAddType = () => {
+  typeDialogTitle.value = '新增敏感词类型';
+  typeFormData.id = '';
+  typeFormData.senTypeName = '';
+  typeDialogVisible.value = true;
+};
+
+// 编辑敏感词类型
+const handleEditType = (type: SensitiveWordType) => {
+  typeDialogTitle.value = '编辑敏感词类型';
+  typeFormData.id = type.id;
+  typeFormData.senTypeName = type.senTypeName;
+  typeDialogVisible.value = true;
+};
+
+// 提交敏感词类型表单
+const submitTypeForm = async () => {
+  if (!typeFormRef.value) return;
+
+  await typeFormRef.value.validate(async (valid) => {
+    if (!valid) return;
+
+    try {
+      const api = typeFormData.id
+        ? updateSensitiveWordType
+        : addSensitiveWordType;
+      await api(typeFormData);
+      ElMessage.success('操作成功');
+      typeDialogVisible.value = false;
+      loadTypeList();
+    } catch (error) {
+      console.error('提交敏感词类型表单失败', error);
+    }
+  });
+};
+
+// 删除敏感词类型
+const handleDeleteType = async (type: SensitiveWordType) => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要删除该敏感词类型吗？删除后该类型下的所有敏感词将无法显示！',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    await deleteSensitiveWordType({ id: type.id });
+    ElMessage.success('删除成功');
+    loadTypeList();
+    if (currentType.value?.id === type.id) {
+      currentType.value = null;
+      // 取消树节点的当前选中状态
+      typeTreeRef.value?.setCurrentKey(null);
+      search();
+    }
+  } catch {
+    // 用户取消删除，不做处理
+  }
+};
+
+// 批量替换
+const handleBatchReplace = () => {
+  if (!currentType.value) {
+    ElMessage.warning('请先选择一个敏感词类型');
+    return;
+  }
+
+  replaceFormData.senReplace = '';
+  replaceDialogVisible.value = true;
+};
+
+// 提交批量替换
+const submitReplaceForm = async () => {
+  if (!replaceFormRef.value || !currentType.value) return;
+
+  await replaceFormRef.value.validate(async (valid) => {
+    if (!valid) return;
+
+    try {
+      if (!currentType.value) return;
+
+      await batchReplaceSensitiveWord({
+        senTypeId: currentType.value.id,
+        senReplace: replaceFormData.senReplace,
+      });
+
+      ElMessage.success('批量替换成功');
+      replaceDialogVisible.value = false;
+      search();
+    } catch (error) {
+      console.error('批量替换失败', error);
+    }
+  });
+};
+
+// 导入敏感词
+const handleImport = () => {
+  importDialogVisible.value = true;
+};
+
+// 导入取消
+const handleImportCancel = () => {
+  importDialogVisible.value = false;
+  // 清空已选择的文件
+  if (sensitiveWordImportRef.value) {
+    sensitiveWordImportRef.value.clearFile();
+  }
+};
+
+// 提交导入
+const submitImport = async () => {
+  const file = sensitiveWordImportRef.value?.getFile();
+  if (!file) {
+    ElMessage.warning('请先选择文件');
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append('file', file);
+
+  // 显示加载提示
+  const loadingMessage = ElMessage({
+    type: 'info',
+    message: '正在导入数据，请稍候...',
+    duration: 0,
+  });
+
+  importing.value = true;
+  try {
+    // 直接调用API，不解构返回值
+    await importSensitiveWord(formData);
+
+    // 关闭加载提示并显示成功消息
+    loadingMessage.close();
+    ElMessage.success('敏感词导入成功');
+    importDialogVisible.value = false; // 明确关闭导入窗口
+    sensitiveWordImportRef.value?.clearFile();
+    loadTypeList(); // 刷新类型列表
+    search(); // 刷新列表
+  } catch (error) {
+    // 关闭加载提示并显示错误消息
+    loadingMessage.close();
+    console.error('导入失败', error);
+  } finally {
+    importing.value = false;
+  }
+};
+
+// 导出敏感词
+const handleExport = async () => {
+  try {
+    // 获取表格当前显示的列
+    const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+    // 过滤出非隐藏列并获取其属性名
+    // 获取基础字段
+    const baseFields = normalizedColumns
+      .filter((item: any) => !item.hidden)
+      .map((item: any) => item.prop);
+
+    // 调用导出接口
+    const response = await exportSensitiveWord({
+      fileName: '敏感词数据',
+      filter: {
+        ...searchParams.value,
+        senTypeId: currentType.value?.id || '', // 加入当前选中的分类
+      },
+      columns: baseFields,
+    });
+
+    // 使用通用工具函数处理下载
+    downloadFileFromBlob({
+      fileName: '敏感词列表.xlsx',
+      source: response,
+    });
+
+    ElMessage.success('导出成功');
+  } catch (error) {
+    console.error('导出失败', error);
+  }
+};
+
+// 初始化页面
+onMounted(() => {
+  loadTypeList();
+  search();
+});
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  searchParams.value = params;
+  search(params);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+</script>
+
+<template>
+  <MainContainer :title="currentType?.senTypeName || '全量敏感词'">
+    <!-- 左侧敏感词类型树 -->
+    <template #side>
+      <div class="flex h-full w-[230px] flex-col border-r border-gray-200 p-4">
+        <!-- 搜索框和新增按钮 -->
+        <div class="mb-3 flex items-center gap-2">
+          <el-input
+            v-model="typeKeyword"
+            placeholder="分类名称"
+            clearable
+            class="flex-1"
+          >
+            <template #prefix>
+              <el-icon><SearchIcon /></el-icon>
+            </template>
+          </el-input>
+          <el-button class="px-3" :icon="Plus" @click="handleAddType" />
+        </div>
+
+        <!-- 类型树 -->
+        <div class="flex-1 overflow-y-auto">
+          <el-tree
+            ref="typeTreeRef"
+            :data="typeTreeData"
+            :props="treeProps"
+            :default-expand-all="expandAllFlag"
+            node-key="id"
+            :expand-on-click-node="false"
+            :highlight-current="true"
+            :current-node-key="currentType?.id?.toString()"
+            @node-click="handleTypeSelect"
+            class="custom-tree w-full bg-transparent"
+          >
+            <template #default="{ node, data }">
+              <div class="custom-node flex w-full items-center justify-between">
+                <div class="flex items-center">
+                  <el-icon class="mr-2"><Folder /></el-icon>
+                  <span class="w-[140px] truncate">{{ node.label }}</span>
+                </div>
+                <div class="node-actions">
+                  <el-popover
+                    placement="bottom"
+                    trigger="hover"
+                    :width="120"
+                    popper-style="min-width: 100px"
+                  >
+                    <template #reference>
+                      <Icon name="material-symbols:more-horiz" :size="18" />
+                    </template>
+                    <div class="flex flex-col items-start gap-2">
+                      <el-link
+                        target="_blank"
+                        underline="never"
+                        @click="handleEditType(data)"
+                      >
+                        编辑
+                      </el-link>
+                      <el-link
+                        target="_blank"
+                        underline="never"
+                        @click="handleDeleteType(data)"
+                      >
+                        删除
+                      </el-link>
+                      <el-link
+                        target="_blank"
+                        underline="never"
+                        @click="handleBatchReplace"
+                      >
+                        敏感词替换
+                      </el-link>
+                    </div>
+                  </el-popover>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+      </div>
+    </template>
+
+    <!-- 搜索栏 -->
+    <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="searchItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+
+      <Table
+        ref="tableRef"
+        :data="data"
+        :columns="columns"
+        :card-options="cardOptions"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        action-width="84px"
+        :show-layout="false"
+        :show-setting="false"
+        :layout-type="layoutType"
+        @refresh="refresh"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAdd">
+              新增敏感词
+            </IconButton>
+            <IconButton icon-type="import" @click="handleImport">导入</IconButton>
+            <IconButton icon-type="export" @click="handleExport">导出</IconButton>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+
+    <!-- 敏感词表单弹窗 -->
+    <Dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      :type="currentEditData ? 'edit' : 'add'"
+      width="500px"
+      :footer="true"
+      @confirm="submitForm"
+    >
+      <SensitiveWordForm
+        ref="sensitiveWordFormRef"
+        :type-list="typeList"
+        :current-type="currentType"
+        :edit-data="currentEditData"
+      />
+    </Dialog>
+
+    <!-- 敏感词类型表单弹窗 -->
+    <Dialog
+      v-model="typeDialogVisible"
+      :title="typeDialogTitle"
+      :type="typeFormData.id ? 'edit' : 'add'"
+      width="400px"
+      :footer="true"
+      @confirm="submitTypeForm"
+    >
+      <el-form
+        ref="typeFormRef"
+        :model="typeFormData"
+        :rules="typeFormRules"
+        label-width="100px"
+        label-position="top"
+      >
+        <el-form-item label="类型名称" prop="senTypeName">
+          <el-input
+            v-model="typeFormData.senTypeName"
+            placeholder="请输入类型名称"
+          />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+
+    <!-- 批量替换表单弹窗 -->
+    <Dialog
+      v-model="replaceDialogVisible"
+      title="批量替换敏感词"
+      icon="mdi:file-replace"
+      width="400px"
+      :footer="true"
+      @confirm="submitReplaceForm"
+    >
+      <el-form
+        ref="replaceFormRef"
+        :model="replaceFormData"
+        :rules="replaceFormRules"
+        label-width="100px"
+        label-position="top"
+      >
+        <el-form-item label="替换内容" prop="senReplace">
+          <el-input
+            v-model="replaceFormData.senReplace"
+            placeholder="请输入替换内容"
+          />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+
+    <!-- 导入弹窗 -->
+    <Dialog
+      v-model="importDialogVisible"
+      title="导入敏感词"
+      type="import"
+      @confirm="submitImport"
+      @cancel="handleImportCancel"
+    >
+      <SensitiveWordImport ref="sensitiveWordImportRef" />
+    </Dialog>
+  </MainContainer>
+</template>
+
+<style lang="scss" scoped>
+.rotate-90 {
+  transform: rotate(90deg);
+}
+
+.custom-tree {
+  :deep(.el-tree-node__content) {
+    height: 32px;
+    margin-bottom: 4px;
+    @apply rounded-lg;
+
+    &:hover {
+      background-color: var(--el-color-primary-light-9);
+
+      .node-actions {
+        visibility: visible;
+      }
+    }
+  }
+
+  :deep(.el-tree-node.is-current > .el-tree-node__content) {
+    background-color: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+  }
+
+  // 隐藏默认的展开图标
+  :deep(.el-tree-node__expand-icon) {
+    display: none;
+  }
+
+  // 调整节点内容的间距
+  :deep(.el-tree-node__content) {
+    padding-left: 8px !important;
+  }
+}
+
+.custom-node {
+  width: 100%;
+  padding: 0 4px;
+}
+
+.node-actions {
+  display: flex;
+  align-items: center;
+  visibility: hidden;
+}
+</style>