ali_ai_learn_web/src/pages/LearningSystem/components/xuxibiji.vue

<template>
  <div class="xuxibiji">
    <div class="gap10">
      <div class="line_vertical"></div>
      <div class="font_size18 bold">{{$t('common.xuxibiji')}}</div>
    </div>
    <div class="addBtn flex-center gradient border_radius_10" @click="openAddDialog">
      <div class="gap10">
        <img :src="addIcon" alt="" style="width:30px;height:30px">
        <span class="font_size18">{{$t('common.add')}}{{$t('common.xuxibiji')}}</span>
      </div>
    </div>
    <div class="list_item padding16 border_radius_16 mt16 flex-center-between" 
    v-for="(item, index) in list" :key="index">
      <div class="flex_1">
        <div class="bold font_size18">{{item.noteTitle}}</div>
        <div class="gray999 mt5">{{$t('common.genxinyu')}} {{item.updateTime || item.createTime}}</div>
      </div>
      <div>
        <el-button type="primary" plain size="large" @click="openAddDialog(item)">
          <el-icon><EditPen /></el-icon>
          <span class="ml10">{{$t('common.edit')}}</span>
        </el-button>
        <el-button type="danger" plain size="large" @click="handleDelete(item)">
          <el-icon><Delete /></el-icon>
          <span class="ml10">{{$t('common.delete')}}</span>
        </el-button>
      </div>
    </div>
    <Pagination 
      :total="listTotal"
      :page-size="searchFom.pageSize"
      :current-page="searchFom.pageNum"
      @page-change="handlePageChange"
    />
    <BlockNoteEditorDialog ref="blockNoteEditorDialogRef" @submit="submit"/>
  </div>
</template>
<script setup>
import addIcon from '@/assets/imgs/add.png'
import BlockNoteEditorDialog from '@/components/BlockNoteEditorDialog.vue'
import Pagination from '@/components/Pagination.vue'
import { getnoteList,noteAdd,noteEdit,noteDel, getnoteDetail } from '@/api/note.js'
import { ref, onMounted,reactive,watch } from 'vue'
import DGTMessage from '@/utils/message'
import { ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n' 
const { t } = useI18n() 
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()
const props =defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})

//监听props.info.courseId变化
watch(() => props.info.courseId, (newVal, oldVal) => {
  if(newVal !== oldVal){
    // 课程ID变化时，重置分页参数
    searchFom.courseId = newVal
    getList('init');
  }
})

const comments = ref('');
const listTotal = ref(0);
const searchFom = reactive({
  courseId: props.info.courseId,
  pageNum: 1,
  pageSize: 10,
})
const list = ref([]);

const handlePageChange = (page) => {
  searchFom.pageNum = page
  // 这里可以添加获取数据的逻辑
  console.log('当前页:', page);
  getList();
}
// 查询寻找工作流列表
const getList = async (type) => {
  if(type === 'init'){
    searchFom.pageNum = 1
  }
  const res = await getnoteList(searchFom)
  if(res.code === 200){
    listTotal.value = res.total
    list.value = res.rows
  }
};
// 打开添加对话框
const blockNoteEditorDialogRef = ref(null)
const openAddDialog = (item={}) => {
  blockNoteEditorDialogRef.value.openDialog(item);
};
// 提交表单
const submit = (form) => {
  let params = {
    noteId: form.noteId,
    courseId: searchFom.courseId,
    noteTitle: form.noteTitle,
    noteContent: form.noteContent,
  }
  let req = noteAdd
  if(form.noteId){
    req = noteEdit
  }
  req(params).then(res => {
    console.log(res)
    if(res.code === 200){
      DGTMessage.success(t('workflowTrade.publishSuccess'))
      getList('init');
    }
  })
};
// 删除笔记
const handleDelete = (item) => {
  ElMessageBox.confirm(t('common.confirm')+t('common.delete')+'?', t('common.delete'), {
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(() => {
    noteDel({id: item.noteId}).then(res => {
      if(res.code === 200){
        DGTMessage.success(t('common.delete')+t('common.success'))
        getList('init');
      }
    })
  }).catch(() => {
    DGTMessage.info(t('common.cancel')+t('common.delete'));
  });
};



</script>
<style scoped lang="scss">
  .xuxibiji{
    .list_item{
      background: #F5F7FA;
    }
    .addBtn{
      cursor: pointer;
      margin-top: 20px;
      padding: 10px 20px;
      color: #fff;
    }

  }

</style>