题目管理

src/api/question.js

@@ -9,3 +9,24 @@ export const useGetTypeList = (encoding) =>
 
 export const useAddTypeName = (typeName, encoding, userId) =>
   requset.post('question/add_typeName', { typeName, encoding, userId })
+
+export const useDeleteTypeName = (typeId) =>
+  requset.get('question/delete_type', {
+    params: {
+      typeId: typeId
+    }
+  })
+
+export const useChangeTypeName = (typeId, typeName, userId) =>
+  requset.post('question/change_type', {
+    typeId,
+    typeName,
+    userId
+  })
+
+export const useGetQuestionList = (encoding) =>
+  requset.get('question/get_questionList', {
+    params: {
+      encoding: encoding
+    }
+  })

src/views/question/QuestionManager.vue

@@ -1,5 +1,20 @@
 <script setup>
-import { Edit, Delete } from '@element-plus/icons-vue'
+import { Edit, Delete, View } from '@element-plus/icons-vue'
+import { useGetQuestionList } from '@/api/question'
+import { ref } from 'vue'
+import { useCompanyStore } from '@/stores'
+
+const questionList = ref([])
+
+const companyStore = useCompanyStore()
+
+const getQuestionList = async () => {
+  const res = await useGetQuestionList(companyStore.encoding)
+  console.log(res.data.data)
+  questionList.value = res.data.data
+}
+
+getQuestionList()
 </script>
 
 <template>
@@ -9,14 +24,16 @@ import { Edit, Delete } from '@element-plus/icons-vue'
     </template>
     <el-table
       v-loading="loading"
-      :data="channelList"
+      :data="questionList"
       stripe
       style="width: 100%"
     >
       <el-table-column type="index" label="序号" width="100" />
-      <el-table-column prop="cate_name" label="分类名称" />
-      <el-table-column prop="cate_alias" label="分类别名" />
-      <el-table-column label="操作" width="150">
+      <el-table-column prop="title" label="题目标题" />
+      <el-table-column prop="typeName" label="题库类型" />
+      <el-table-column prop="createTime" label="创建时间" />
+      <el-table-column prop="updateTime" label="更新时间" />
+      <el-table-column label="操作" width="200">
         <template #default="{ row }">
           <el-button
             type="primary"
@@ -32,6 +49,7 @@ import { Edit, Delete } from '@element-plus/icons-vue'
             circle
             plain
           ></el-button>
+          <el-button type="info" :icon="View" plain>更多</el-button>
         </template>
       </el-table-column>
       <template #empty>

src/views/question/QuestionTypePage.vue

@@ -6,6 +6,8 @@ import { useCompanyStore } from '@/stores'
 import { ref } from 'vue'
 import QuestionTypeEdit from './components/QuestionTypeEdit.vue'
 
+import QuestionDialog from './components/QuestionDialog.vue'
+
 const questionTypeList = ref([])
 const loading = ref(false)
 const companyStore = useCompanyStore()
@@ -22,8 +24,9 @@ const handleEdit = (row) => {
   dialog.value.open(row)
 }
 
+const deleteDialog = ref()
 const handleDelete = (row) => {
-  console.log(row)
+  deleteDialog.value.openDialog(row)
 }
 
 const onAddEdit = () => {
@@ -44,7 +47,7 @@ const onAddEdit = () => {
       style="width: 100%"
     >
       <el-table-column type="index" label="序号" width="100" />
-      <el-table-column prop="name" label="题库类型" />
+      <el-table-column prop="typeName" label="题库类型" />
       <el-table-column prop="createTime" label="创建时间" />
       <el-table-column prop="updateTime" label="更新时间" />
       <el-table-column label="操作" width="150">
@@ -73,5 +76,9 @@ const onAddEdit = () => {
       @getQuestionTypeList="getQuestionTypeList"
       ref="dialog"
     ></QuestionTypeEdit>
+    <QuestionDialog
+      @getQuestionTypeList="getQuestionTypeList"
+      ref="deleteDialog"
+    ></QuestionDialog>
   </page-container>
 </template>

src/views/question/components/QuestionDialog.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue'
+import { useDeleteTypeName } from '@/api/question'
+import { ElMessage } from 'element-plus'
+
+const centerDialogVisible = ref(false)
+
+const info = ref({})
+
+const openDialog = (row) => {
+  info.value = row
+  centerDialogVisible.value = true
+}
+
+const emit = defineEmits(['getQuestionTypeList'])
+const handleDelete = async () => {
+  await useDeleteTypeName(info.value.id)
+  ElMessage.success('删除题库成功！')
+  emit('getQuestionTypeList')
+  centerDialogVisible.value = false
+}
+
+defineExpose({
+  openDialog
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="centerDialogVisible"
+    title="警告"
+    width="30%"
+    align-center
+  >
+    <span
+      >您确定要删除题库<span class="typeNsme">{{ info.typeName }}</span
+      >以及该题库的所有题目?</span
+    >
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取消</el-button>
+        <el-button type="danger" @click="handleDelete"> 确定 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+.typeNsme {
+  font-weight: bold;
+  color: red;
+}
+</style>

src/views/question/components/QuestionTypeEdit.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ElMessage } from 'element-plus'
 import { ref } from 'vue'
-import { useAddTypeName } from '@/api/question'
+import { useAddTypeName, useChangeTypeName } from '@/api/question'
 import { useUserStore, useCompanyStore } from '@/stores'
 
 const dialogVisible = ref(false)
@@ -13,6 +13,7 @@ const FormModel = ref({
 const open = (row) => {
   console.log(row)
   dialogVisible.value = true
+  FormModel.value = { ...row }
 }
 
 const rules = {
@@ -22,11 +23,25 @@ const rules = {
 const companyStore = useCompanyStore()
 const userStore = useUserStore()
 const emit = defineEmits(['getQuestionTypeList'])
+const form = ref()
 const onADD = async () => {
+  await form.value.validate()
   if (FormModel.value.typeName === '') {
-    ElMessage.error('请输入内容')
+    ElMessage.error('请输入内容！')
     return
   }
+  const isEndit = FormModel.value.id
+
+  if (isEndit) {
+    await useChangeTypeName(
+      FormModel.value.id,
+      FormModel.value.typeName,
+      userStore.userInfo.id
+    )
+    ElMessage.success('修改题库成功！')
+    dialogVisible.value = false
+    emit('getQuestionTypeList')
+  } else {
     await useAddTypeName(
       FormModel.value.typeName,
       companyStore.encoding,
@@ -34,8 +49,15 @@ const onADD = async () => {
     )
     emit('getQuestionTypeList')
     FormModel.value.typeName = ''
+    ElMessage.success('添加题库成功！')
     dialogVisible.value = false
   }
+}
+const keyDown = (e) => {
+  if (e.keyCode === 13 || e.keyCode === 100) {
+    console.log('触发回车事件')
+  }
+}
 
 defineExpose({
   open
@@ -43,8 +65,13 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
+  <el-dialog
+    v-model="dialogVisible"
+    :title="FormModel.typeName ? '编辑题库' : '添加题库'"
+    width="30%"
+  >
     <el-form
+      ref="form"
       label-width="100px"
       style="padding-right: 30px"
       :model="FormModel"
@@ -60,7 +87,9 @@ defineExpose({
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="onADD"> 确认 </el-button>
+        <el-button type="primary" @click="onADD" @keydown.enter="keyDown()">
+          确认
+        </el-button>
       </span>
     </template>
   </el-dialog>