若依项目-源码解读_若依源码-CSDN博客

本文链接：https://blog.csdn.net/qq_40603125/article/details/143688079

前端代码

在这里插入图片描述

按钮

在这里插入图片描述

工具栏

在这里插入图片描述

表格

在这里插入图片描述

分页

在这里插入图片描述

对话框

在这里插入图片描述

js代码

<script setup name="Course">
// 引入api  用于请求后台数据
import {
   
    listCourse, getCourse, delCourse, addCourse, updateCourse } from "@/api/course/course";

// 获取当前实例的代理对象  用于访问全局属性和方法
const {
   
    proxy } = getCurrentInstance();
// 引入对应的字典数据
const {
   
    course_subject } = proxy.useDict('course_subject');

// 定义响应式数据
// 课程管理列表
const courseList = ref([]);
// 控制对话框的显示隐藏
const open = ref(false);
// 控制加载状态
const loading = ref(true);
// 控制搜索框的显示隐藏
const showSearch = ref(true);
// 控制多选框的选中状态
const ids = ref([]);
// 控制按钮的禁用状态
const single = ref(true);
// 控制按钮的禁用状态
const multiple = ref(true);
// 控制分页的总条数
const total = ref(0);
// 控制对话框的标题
const title = ref("");

// 整个data是响应式的
const data = reactive({
   
   
  // 表单数据
  form: {
   
   },
  // 查询参数
  queryParams: {
   
   
    pageNum: 1,
    pageSize: 10,