refactor(规则词库): 重构词库管理界面，优化词条添加和删除逻辑

- 移除批量导入模块，将其功能整合到词条抽屉中
- 新增输入框动态切换功能，优化词条添加体验
- 改进词条删除逻辑，支持从服务器删除数据
- 优化模板下载功能，支持动态生成文件名

src/views/rules/words.vue

@@ -40,33 +40,6 @@
       </div>
     </div>
 
-    <!-- 下部：批量导入 -->
-    <div class="border-t mt-4">
-      <div class="bg-white rounded-lg shadow p-4">
-        <h2 class="text-lg font-semibold mb-4">批量导入</h2>
-        <div class="flex space-x-4">
-          <el-upload action="" :file-list="fileList" :before-upload="beforeUpload" class="flex-1">
-            <el-button type="primary"><el-icon>
-                <Upload />
-              </el-icon>上传文件</el-button>
-            <template #tip>
-              <div class="el-upload__tip">
-                <span v-if="fileList.length > 0">{{ fileList[0].name }}</span>
-              </div>
-            </template>
-          </el-upload>
-          <a href="/template.xlsx" download class="el-button el-button--primary">
-            <el-icon>
-              <Download />
-            </el-icon>下载模板
-          </a>
-          <el-button type="success" @click="importWords"><el-icon>
-              <UploadFilled />
-            </el-icon>导入词库</el-button>
-        </div>
-      </div>
-    </div>
-
     <!-- 词条抽屉 -->
     <el-drawer v-model="drawerVisible" title="词条列表" size="40%">
       <div class="p-4">
@@ -85,38 +58,71 @@
           </el-icon>
         </div>
         <div class="flex flex-wrap gap-2">
-          <el-tag class="m-1 cursor-pointer" @click="addNewWord">
+          <!-- <el-tag class="m-1 cursor-pointer" @click="addNewWord">
             <el-icon>
               <Plus />
             </el-icon> 添加
-          </el-tag>
+          </el-tag> -->
+          <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
+            @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" style="width: 60px;"/>
+          <el-button v-else class="m-1" size="small" @click="showInput">
+            + 添加
+          </el-button>
           <el-tag v-for="(word, idx) in filteredWords" :key="idx" class="m-1" closable @close="removeWord(idx)">
-            {{ word }}
+            {{ word.name }}
           </el-tag>
         </div>
       </div>
+
+      <div class="absolute bottom-0 left-0 right-0 p-4 bg-white border-t flex justify-between">
+        <el-button @click="downloadTemplate"><el-icon>
+            <Download />
+          </el-icon>下载模板</el-button>
+
+        <el-upload style="text-align: center;" accept=".xlsx" v-model:file-list="fileList" :headers="headers"
+          :data="upLoadParams" :show-file-list="false" class="upload-demo"
+          :action="uploadURL + wordCategories[currentCategoryIndex]?.id" :on-success="handleExcelSuccess">
+          <el-button type="success"><el-icon>
+              <UploadFilled />
+            </el-icon>导入词库</el-button>
+        </el-upload>
+        <!-- <el-button type="success" @click="handleFileUpload"><el-icon><UploadFilled /></el-icon>导入词库</el-button> -->
+      </div>
     </el-drawer>
   </div>
 </template>
 
 <script lang="ts" setup name="RuleWord">
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { createPageData, getPageListData, editPageData, deletePageData } from '@/api/main/system/system'
 
+import { getToken } from '@/utils/auth';
 
-const wordCategories = ref([
+const downLoadUrl = new URL('@/assets/downLoad/word_template.xlsx', import.meta.url).href
+
+const wordCategories: any = ref([
   // { name: '敏感词', count: 12 },
   // { name: '违禁词', count: 8 },
   // { name: '广告词', count: 5 },
 ])
 
 const drawerVisible = ref(false)
-const currentWords = ref<string[]>([])
+const currentWords = ref([])
 const currentCategoryIndex = ref(0)
 const fileList = ref<File[]>([])
 const searchQuery = ref('')
-const filteredWords = ref<string[]>([])
+const filteredWords: any = ref<string[]>([])
+const inputVisible = ref(false)
+const inputValue = ref('')
+const InputRef = ref(null)
+
+const headers = ref({
+  Authorization: 'Bearer ' + getToken(),
+});
+
+const upLoadParams = ref({});
+const uploadURL = ref(import.meta.env.VITE_APP_BASE_API + '/quality/searchLexicon/importExcel/');
 
 const filterWords = () => {
   if (!searchQuery.value) {
@@ -124,45 +130,47 @@ const filterWords = () => {
     return
   }
   filteredWords.value = currentWords.value.filter(word =>
-    word.toLowerCase().includes(searchQuery.value.toLowerCase())
+    word.name.toLowerCase().includes(searchQuery.value.toLowerCase())
   )
 }
 
-const addNewWord = () => {
-  const newWord = prompt('请输入新词条')
-  if (newWord) {
-    currentWords.value.push(newWord)
-    filterWords()
-  }
-}
-
 const removeWord = (index: number) => {
-  currentWords.value.splice(index, 1)
-  filterWords()
+  const info = filteredWords.value[index];
+  deletePageData(`/quality/searchLexicon/${info.id}`).then(({ state }) => {
+    if (state === 'success') {
+      ElMessage.success('删除成功');
+      filteredWords.value.splice(index, 1);
+      const currentIndex = currentWords.value.findIndex(item => item.id === info.id);
+      console.log(currentIndex, currentWords.value, info.id)
+      if (currentIndex !== -1) {
+        currentWords.value.splice(currentIndex, 1);
+      }
+
+      wordCategories.value[currentCategoryIndex.value].count--;
+      filterWords();
+    }
+  })
+  // currentWords.value.splice(index, 1);
+  // filterWords()
 }
 
 const showWordDrawer = (index: number) => {
   currentCategoryIndex.value = index
   // 模拟获取词条数据
-  currentWords.value = Array.from({ length: wordCategories.value[index].count }, (_, i) =>
-    `${wordCategories.value[index].name}-${i + 1}`
-  )
-  filteredWords.value = [...currentWords.value]
+  // currentWords.value = Array.from({ length: wordCategories.value[index].count }, (_, i) =>
+  //   `${wordCategories.value[index].name}-${i + 1}`
+  // )
+  // filteredWords.value = [...currentWords.value]
+  getList(wordCategories.value[index].id)
   drawerVisible.value = true
 }
 
-const beforeUpload = (file: File) => {
-  console.log('上传文件:', file)
-  fileList.value = [file]
-  return false
-}
-
 const downloadTemplate = () => {
-  console.log('下载模板')
-}
-
-const importWords = () => {
-  console.log('导入词库')
+  const fileName = `${wordCategories.value[currentCategoryIndex.value].name}_模板.xlsx`
+  const link = document.createElement('a')
+  link.href = downLoadUrl
+  link.download = fileName
+  link.click()
 }
 
 const handleDelete = (index: number) => {
@@ -188,11 +196,10 @@ const handleEdit = async (index: number) => {
       cancelButtonText: '取消',
       inputValue: originalName,
       inputPattern: /^\S+$/,
-      inputErrorMessage: '词库名称不能为空'
+      inputErrorMessage: '词库名称不能为空，且为中文'
     })
 
     if (!value.trim() || value === originalName) return
-
     const params = {
       id: wordCategories.value[index].id, // 假设接口需要ID参数
       term: value.trim(),
@@ -207,10 +214,11 @@ const handleEdit = async (index: number) => {
         type: 'success',
         message: '修改成功',
       });
-      wordCategories.value.splice(index, 1, {
-        ...wordCategories.value[index],
-        name: value.trim()
-      });
+      wordCategories.value[index].name = value.trim()
+      // wordCategories.value.splice(index, 1, {
+      //   ...wordCategories.value[index],
+      //   name: value.trim()
+      // });
     }
   } catch (error) {
     // 用户取消输入
@@ -248,15 +256,66 @@ const handleAddCategory = async () => {
   }
 }
 
-const getList = () => {
-  getPageListData('/quality/searchLexicon', { type: 1, pageNum: 1, pageSize: 10000 }).then((res) => {
+const getList = (category = 0) => {
+  const params = {
+    type: 1,
+    pageNum: 1,
+    pageSize: 10000,
+    category
+  };
+  if (category) params.type = 2;
+  getPageListData('/quality/searchLexicon', params).then((res) => {
     console.log(res);
     if (res.state === 'success') {
-      wordCategories.value = res.data.map((item: any) => ({ name: item.term, count: item.count, id: item.id }));
+      if (!category) wordCategories.value = res.data.map((item: any) => ({ name: item.term, count: item.count, id: item.id }));
+      else {
+        currentWords.value = res.data.map((item: any) => ({ name: item.term, count: item.count, id: item.id }));
+        filterWords();
+      }
     }
   });
 }
 
+const handleExcelSuccess = (response, uploadFile, uploadFiles) => {
+  // 提示导入成功
+  getList();
+  // getPlanpatient()
+};
+
+const showInput = () => {
+  inputVisible.value = true
+  inputValue.value = ''
+  nextTick(() => {
+    InputRef.value!.input!.focus()
+  })
+}
+
+const handleInputConfirm = () => {
+  inputVisible.value = false
+  const name = inputValue.value.trim()
+  if (name) {
+    // currentWords.value.push(inputValue.value)
+    
+    // filterWords()
+    const params = { term: name, type: 2, category: wordCategories.value[currentCategoryIndex.value].id };
+
+    createPageData('/quality/searchLexicon', params).then((res) => {
+      console.log(res);
+      if (res.state ==='success') {
+        ElMessage({
+          type:'success',
+          message: '添加成功',
+        });
+        const info = { name: res.data.term, id: res.data.id };
+        filteredWords.value = [info, ...filteredWords.value];
+        currentWords.value = [info,...currentWords.value];
+        wordCategories.value[currentCategoryIndex.value].count++;
+        filterWords();
+      }
+    })
+  }
+}
+
 onMounted(() => {
   getList();
 })