查询所有班级

package.json

@@ -64,6 +64,7 @@
     "@fast-crud/ui-interface": "^1.13.6",
     "@fast-crud/ui-naive": "^1.13.6",
     "@soybeanjs/vue-materials": "^0.1.9",
+    "@vicons/ionicons5": "^0.12.0",
     "@vueuse/core": "^10.1.2",
     "axios": "1.4.0",
     "clipboard": "^2.0.11",

pnpm-lock.yaml

@@ -37,6 +37,9 @@ dependencies:
   '@soybeanjs/vue-materials':
     specifier: ^0.1.9
     version: 0.1.9(vue@3.3.4)
+  '@vicons/ionicons5':
+    specifier: ^0.12.0
+    version: 0.12.0
   '@vueuse/core':
     specifier: ^10.1.2
     version: 10.1.2(vue@3.3.4)
@@ -4174,6 +4177,10 @@ packages:
     resolution: {integrity: sha512-i+7YwlpCrqD6m9esbZLy1bpVQlh4CKugtS3OzgfNw6BLTQQK6HT7drktaJgcESj/BTr4avdNbAtMQXx56wSVMg==}
     dev: true
 
+  /@vicons/ionicons5@0.12.0:
+    resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
+    dev: false
+
   /@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.8)(vue@3.3.4):
     resolution: {integrity: sha512-+Jb7ggL48FSPS1uhPnJbJwWa9Sr90vQ+d0InW+AhBM22n+cfuYqJZDckBc+W3QSHe1WDvewMZfa4wZOtk5pRgw==}
     engines: {node: ^14.18.0 || >=16.0.0}

src/locales/lang/zh-cn.ts

@@ -76,7 +76,7 @@ const locale: LocaleMessages<I18nType.Schema> = {
         role: '角色管理',
         route: '路由管理',
         user: '用户管理',
-				lesson:"课程管理"
+				lesson:"班级管理"
       },
       about: '关于'
     }

src/service/api/lesson.ts

@@ -0,0 +1,53 @@
+import { request } from '../request';
+
+// 响应接口
+export interface SelectTotalRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 查询所有的班级类
+ * @returns
+ */
+export function selectTotal(): Promise<SelectTotalRes> {
+  return request.get(`/selectTotal`);
+}
+
+
+// 参数接口
+export interface AddClassParams {
+  id?: number;
+  name?: string;
+  manageId?: number;
+  assistantId?: number;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+// 响应接口
+export interface AddClassRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/** 
+ * 增加班级类
+ * @param {object} params EasEduClass
+ * @param {number} params.id 学员ID
+ * @param {string} params.name 班级名称
+ * @param {number} params.manageId 班级负责人ID
+ * @param {number} params.assistantId 助教老师ID
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function addClass(params: AddClassParams): Promise<AddClassRes> {
+  return request.post(`/addClass`, params);
+}

src/views/management/lesson/component/add_lesson.vue

@@ -0,0 +1,95 @@
+<template>
+ <n-form ref="formRef" :model="model" :rules="rules">
+    <n-form-item path="age" label="班级名称">
+      <n-input v-model:value="model.age" @keydown.enter.prevent />
+    </n-form-item>
+    <n-row :gutter="[0, 24]">
+      <n-col :span="24">
+        <div style="display: flex; justify-content: flex-end">
+          <n-button
+            :disabled="model.age === null"
+            round
+            type="primary"
+            @click="handleValidateButtonClick"
+          >
+            提交
+          </n-button>
+        </div>
+      </n-col>
+    </n-row>
+  </n-form>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import {
+  FormInst,
+  FormItemInst,
+  FormItemRule,
+  useMessage,
+  FormRules
+} from 'naive-ui'
+
+interface ModelType {
+  age: string | null
+}
+
+export default defineComponent({
+  setup (props,context) {
+    
+    const formRef = ref<FormInst | null>(null)
+    const rPasswordFormItemRef = ref<FormItemInst | null>(null)
+    const message = useMessage()
+    const modelRef = ref<ModelType>({
+      age: null,
+      password: null,
+      reenteredPassword: null
+    })
+    function validatePasswordStartWith (
+      rule: FormItemRule,
+      value: string
+    ): boolean {
+      return (
+        !!modelRef.value.password &&
+        modelRef.value.password.startsWith(value) &&
+        modelRef.value.password.length >= value.length
+      )
+    }
+    function validatePasswordSame (rule: FormItemRule, value: string): boolean {
+      return value === modelRef.value.password
+    }
+    const rules: FormRules = {
+      age: [
+        {
+          required: true,
+          validator (rule: FormItemRule, value: string) {
+            if (!value) {
+              return new Error('需要班级名称')
+            } 
+            return true
+          },
+          trigger: ['input', 'blur']
+        }
+      ],
+    }
+    return {
+      formRef,
+      rPasswordFormItemRef,
+      model: modelRef,
+      rules,
+      handlePasswordInput () {
+        if (modelRef.value.reenteredPassword) {
+          rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+        }
+      },
+      handleValidateButtonClick(){
+        message.success("提交成功")
+        this.$emit('showModal',false)
+      }
+    }
+  }
+})
+</script>
+
+<style scoped></style>

src/views/management/lesson/index.vue

@@ -1,14 +1,191 @@
 <template>
-	<div>
-		课程管理
-	</div>
+
+<!-- 上层状态 -->
+
+  <!-- 模态框 -->
+  <n-modal v-model:show="showModal" block-scroll close-on-esc trap-focus>
+    <n-card style="width: 600px" title="添加班级" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <n-form ref="formRef" :model="model" :rules="rules">
+        <n-form-item path="name" label="班级名称">
+          <n-input v-model:value="model.name" @keydown.enter.prevent />
+        </n-form-item>
+        <n-row :gutter="[0, 24]">
+          <n-col :span="24">
+            <div style="display: flex; justify-content: flex-end">
+              <n-button :disabled="model.name === null" round type="primary" @click="handleValidateButtonClick">
+                提交
+              </n-button>
+            </div>
+          </n-col>
+        </n-row>
+      </n-form>
+    </n-card>
+  </n-modal>
+
+  <n-grid x-gap="300" :cols="2">
+    <n-gi>
+      <n-input placeholder="搜索">
+        <template #prefix>
+          <n-icon :component="FlashOutline" />
+        </template>
+      </n-input>
+    </n-gi>
+    <n-gi>
+      <n-button type="primary" @click="showModal = true">
+        添加
+      </n-button>
+    </n-gi>
+  </n-grid>
+
+  <!-- 表格 -->
+  <div>
+    <n-data-table :bordered="false" :single-line="false" :columns="columns" :data="data" :pagination="pagination" />
+  </div>
 </template>
+<script lang="ts">
+import {
+  FormInst,
+  FormItemInst,
+  FormItemRule,
+  FormRules
+} from 'naive-ui'
+import { FlashOutline } from '@vicons/ionicons5'
+import { h, defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+import { NButton } from 'naive-ui'
+import type { DataTableColumns } from 'naive-ui'
+import { selectTotal, addClass } from '~/src/service/api/lesson'
+import { ref } from 'vue'
+//获取所有班级类
+type RowData = {
+  id: number
+  name: string
+  manageId?: number
+  assistantId?: number
+  createTime: string
+  createUid?: number
+  modifyTime: string
+  disabled?: string
+}
+const tableData = ref([]);
+function getTableData() {
+  selectTotal().then(r => {
+    tableData.value = r.data;
+  })
+}
+getTableData();
 
-<script setup lang="ts">
+const createColumns = ({
+  sendMail
+}: {
+  sendMail: (rowData: RowData) => void
+}): DataTableColumns<RowData> => {
+  return [
+    {
+      title: '序号',
+      key: 'id'
+    },
+    {
+      title: '班级名称',
+      key: 'name'
+    },
+    {
+      title: '创建时间',
+      key: 'createTime'
+    },
+    {
+      title: '更改时间',
+      key: 'modifyTime'
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      render(row) {
+        return h(
+          NButton,
+          {
+            size: 'small',
+            onClick: () => sendMail(row)
+          },
+          { default: () => '删除' }
+        )
+      }
+    }
+  ]
+}
+//---|
 
-</script>
 
-<style scoped>
+//增加班级类
+type easEduClass={
+  id:number,
+  name:string,
+  manageId:number,
+  assistantId:number,
+  createTime:string,
+  modifyTime:string,
+  createUid:string,
+  disabled:string
+}
+addClass().then(r=>{
+  console.log(r);
+  
+})
+export default defineComponent({
 
-</style>
+  setup() {
+    const showModal = ref(false);
+    const formRef = ref<FormInst | null>(null)
+    const rPasswordFormItemRef = ref<FormItemInst | null>(null)
+    const message = useMessage()
+    const modelRef = ref({
+      name: null,
+    })
+    const rules: FormRules = {
+      name: [
+        {
+          required: true,
+          validator(rule: FormItemRule, value: string) {
+            if (!value) {
+              return new Error('需要班级名称')
+            }
+            return true
+          },
+          trigger: ['input', 'blur']
+        }
+      ],
+    }
+    return {
+      formRef,
+      rPasswordFormItemRef,
+      model: modelRef,
+      rules,
+      handleValidateButtonClick() {
+        //点击添加
+        showModal.value = false;
+        message.success("添加成功");
+        modelRef.value.name = null;//清空表单值
 
+      },
+      showModal,
+      FlashOutline,
+      data: tableData,
+      columns: createColumns({
+        sendMail(rowData) {
+          message.info('send mail to ' + rowData.name)
+        }
+      }),
+      pagination: {
+        pageSize: 10
+      }
+    }
+  }
+})
+</script>
+<style scoped>
+.n-grid{
+  /* display: flex;
+  justify-content: center;
+  align-items: center; */
+}
+</style>