上传

src/views/Clue/Skill/Comp/DialogSkill.vue

@@ -10,11 +10,11 @@
       <el-form-item label="问题" prop="question">
         <el-input v-model="formData.question" placeholder="请输入问题" />
       </el-form-item>
-      <el-form-item label="关键词" prop="keyword">
-        <el-input v-model="formData.keyword" placeholder="请输入关键词" />
+      <el-form-item label="关键词" prop="skillKey">
+        <el-input v-model="formData.skillKey" placeholder="请输入关键词，,以“,”分割" />
       </el-form-item>
-      <el-form-item label="答案" prop="answer">
-        <Editor v-model:modelValue="formData.answer" />
+      <el-form-item label="答案" prop="content">
+        <Editor v-model:modelValue="formData.content" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -24,6 +24,8 @@
   </Dialog>
 </template>
 <script name="DialogSkill" setup>
+import * as SkillApi from '@/api/clue/skill'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -33,12 +35,12 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   question: '',
-  keyword: [],
-  answer: ''
+  skillKey: '',
+  content: ''
 })
 const formRules = reactive({
   question: [{ required: true, message: '问题不能为空', trigger: 'blur' }],
-  answer: [{ required: true, message: '答案不能为空', trigger: 'blur,change' }]
+  content: [{ required: true, message: '答案不能为空', trigger: 'blur,change' }]
 })
 const formRef = ref() // 表单 Ref
 
@@ -52,7 +54,7 @@ const open = async (type, id) => {
   if (id) {
     formLoading.value = true
     try {
-      // formData.value = await UserApi.getUser(id)
+      formData.value = await SkillApi.getSkill(id)
     } finally {
       formLoading.value = false
     }
@@ -70,12 +72,11 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    // const data = formData.value as unknown as UserApi.UserVO
     if (formType.value === 'create') {
-      // await UserApi.createUser(data)
+      await SkillApi.createSkill(formData.value)
       message.success(t('common.createSuccess'))
     } else {
-      // await UserApi.updateUser(data)
+      await SkillApi.updateSkill(formData.value)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -90,8 +91,8 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     question: '',
-    keyword: [],
-    answer: ''
+    skillKey: '',
+    content: ''
   }
   formRef.value?.resetFields()
 }

src/views/Clue/Skill/index.vue

@@ -20,16 +20,16 @@
         </el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="tableList">
-      <el-table-column type="index" width="55" align="center" />
-      <el-table-column label="问题" align="center" prop="question" />
-      <el-table-column label="答案" align="center" prop="content">
+    <el-table v-loading="loading" :data="tableList">
+      <el-table-column type="index" width="55" />
+      <el-table-column label="问题" prop="question" />
+      <el-table-column label="答案" prop="content">
         <template #default="scope">
           <p v-dompurify-html="scope.row.content"></p>
         </template>
       </el-table-column>
-      <el-table-column label="关键词" align="center" prop="skillKey" />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="关键词" prop="skillKey" />
+      <el-table-column label="操作">
         <template #default="scope">
           <el-button
             type="primary"
@@ -52,7 +52,7 @@
     </el-table>
     <Pagination
       v-model:limit="searchForm.pageSize"
-      v-model:page="searchForm.pageNum"
+      v-model:page="searchForm.pageNo"
       :total="total"
       @pagination="handleQuery"
     />
@@ -61,16 +61,19 @@
 </template>
 
 <script setup name="ClueSkill">
+import * as SkillApi from '@/api/clue/skill'
 import DialogSkill from './Comp/DialogSkill.vue'
 
 const skillDialog = ref()
 
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
+const loading = ref(false)
 const searchForm = ref({
   question: '',
   pageSize: 20,
-  pageNum: 1
+  pageNo: 1
 })
 
 const total = ref(0)
@@ -81,18 +84,25 @@ function resetQuery() {
   searchForm.value = {
     question: '',
     pageSize: 20,
-    pageNum: 1
+    pageNo: 1
   }
   getList()
 }
 
 function handleQuery() {
-  searchForm.value.pageNum = 1
+  searchForm.value.pageNo = 1
   getList()
 }
 
-function getList() {
-  tableList.value = [{ question: '测试' }]
+async function getList() {
+  loading.value = true
+  try {
+    const data = await SkillApi.getSkillPage(searchForm.value)
+    tableList.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
 function handleAdd() {
@@ -100,21 +110,24 @@ function handleAdd() {
 }
 
 function handleUpdate(row) {
-  skillDialog.value.open('update', row)
+  skillDialog.value.open('update', row.id)
 }
 
 async function handleDelete(row) {
   try {
-    console.log(row)
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    // await UserApi.deleteUser(row.id)
+    await SkillApi.deleteSkill(row.skillId)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
   } catch {}
 }
+
+onMounted(() => {
+  handleQuery()
+})
 </script>
 
 <style lang="scss" scoped></style>