فهرست منبع

获取班级+添加班级+删除班级+更新班级

LiShiwei 1 سال پیش
والد
کامیت
4c48dc2456
2فایلهای تغییر یافته به همراه194 افزوده شده و 34 حذف شده
  1. 37 0
      src/service/api/lesson.ts
  2. 157 34
      src/views/management/lesson/index.vue

+ 37 - 0
src/service/api/lesson.ts

@@ -67,4 +67,41 @@ export interface DeleteClassRes {
  */
 export function deleteClass(id: number): Promise<DeleteClassRes> {
   return request.delete(`/deleteClass/${id}`);
+}
+
+
+//! 参数接口(更新)
+export interface UpdateClassParams {
+  id?: number;
+  name?: string;
+  manageId?: number;
+  assistantId?: number;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+// 响应接口
+export interface UpdateClassRes {
+  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 updateClass(params: UpdateClassParams): Promise<UpdateClassRes> {
+  return request.put(`/updateClass`, params);
 }

+ 157 - 34
src/views/management/lesson/index.vue

@@ -1,5 +1,4 @@
 <template>
-
   <!-- 模态框 -->
   <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">
@@ -20,6 +19,24 @@
     </n-card>
   </n-modal>
 
+  <n-modal v-model:show="showModalUpdate" 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="formRefUpdate" :model="modelUpdateRef" :rules="rules">
+        <n-form-item path="name" label="班级名称">
+          <n-input v-model:value="modelUpdateRef.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="modelUpdateRef.name === null" round type="primary" @click="handleUpdateClick">
+                提交
+              </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="搜索">
@@ -39,29 +56,32 @@
   <div>
     <n-data-table :bordered="false" :single-line="false" :columns="columns" :data="data" :pagination="pagination" />
   </div>
+
+  <!-- 删除弹出确定 -->
+  <!-- <n-popconfirm
+    @positive-click="handlePositiveClick"
+    @negative-click="handleNegativeClick"
+  >
+    <template #trigger>
+      <n-button>引用</n-button>
+    </template>
+    一切都将一去杳然,任何人都无法将其捕获。
+  </n-popconfirm> -->
 </template>
 <script lang="ts">
 import {
   FormInst,
   FormItemInst,
   FormItemRule,
-  FormRules
+  FormRules,
+  messageDark,
 } from 'naive-ui'
 import { FlashOutline } from '@vicons/ionicons5'
-import { h, defineComponent } from 'vue'
-import { useMessage } from 'naive-ui'
-import { NButton } from 'naive-ui'
+import { h, defineComponent, ref, onMounted } from 'vue'
+import { NButton, useMessage } from 'naive-ui'
 import type { DataTableColumns } from 'naive-ui'
-import { selectTotal, addClass,deleteClass } from '~/src/service/api/lesson'
-import { ref } from 'vue'
-import {
-  onBeforeMount,
-  onMounted,
-  onBeforeUpdate,
-  onUpdated,
-  onBeforeUnmount,
-  onUnmounted,
-} from 'vue'
+import { selectTotal, addClass, deleteClass, updateClass } from '~/src/service/api/lesson'
+import { setTimeout } from 'timers/promises'
 //获取所有班级类
 type RowData = {
   id: number
@@ -72,14 +92,27 @@ type RowData = {
   createUid?: number
   modifyTime: string
   disabled?: string
+  tag?: []
 }
 const tableData = ref([]);
-async function getTableData() {
+function getTableData() {
   selectTotal().then(r => {
     tableData.value = r.data;
+    // console.log(tableData.value);
+
+    //由于不能自定义添加标签,所以我们给数据添加一个tags来进行遍历按钮数据
+    //  let obj= Object.assign(tableData.value, { tags: ['删除', '更新'] });
+    for (let i = 0; i < tableData.value.length; i++) {
+      // console.log(tableData.value[i]);
+      Object.assign(tableData.value[i], { tags: ['删除', '更新'] });
+    }
+    // console.log(tableData.value);
+
   })
-}
 
+
+}
+let showModalUpdate = ref(false);
 const createColumns = ({
   sendMail
 }: {
@@ -104,24 +137,44 @@ const createColumns = ({
     },
     {
       title: '操作',
-      key: 'actions',
+      key: 'tags',
       render(row) {
-        return h(
-          NButton,
-          {
-            size: 'small',
-            onClick: () => sendMail(row)
-          },
-          { default: () => '删除' }
-        )
+        const tags = row.tags.map((tagKey) => {
+          return h(
+            NButton,
+            {
+              onClick: async () => {
+                if (tagKey == "删除") {
+                  deleteData(row.id);
+                  sendMail(tagKey);
+                }
+                else if (tagKey == "更新") {
+
+                  showModalUpdate.value = true;
+                  // UpdateClass(row);
+
+                  UpdateClassParams = row;
+                  // sendMail(tagKey);
+                  modelUpdateRef.value.name = row.name;
+
+                }
+                // deleteData(row.id);
+                // console.log(row, tagKey);
+                // getTableData();
+                // sendMail(tagKey);
+
+              },
+            },
+            {
+              default: () => tagKey
+            }
+          )
+        })
+        return tags
       }
     }
   ]
 }
-//---|
-// deleteClass().then(r=>{
-//   console.log(r);
-// })
 
 //增加班级类
 type easEduClass = {
@@ -145,33 +198,78 @@ let params: easEduClass = {
   createUid: 0,
   disabled: null
 }
-async function AddClassInter(params) {
+function AddClassInter(params) {
   if (params != "") {
     addClass(params).then(r => {
       console.log(r);
     })
-   
+
   }
   return;
 }
 
 //|
 //删除班级
+function deleteData(id: number) {
+  deleteClass(id).then(r => {
+    console.log(r);
+  })
+}
+
+//!更新班级类
+let UpdateClassParams = {
+  id: 0,
+  name: "",
+  manageId: 0,
+  assistantId: 0,
+  createTime: "",
+  modifyTime: "",
+  createUid: "",
+  disabled: ""
+}
+//获取时间函数
+function getLocalTime() {
+  let date = new Date();
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需要加1并补0
+  const day = String(date.getDate()).padStart(2, '0'); // 日需要补0
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+const modelUpdateRef = ref({
+  name: null,
+})
 
 
+function UpdateClass(params: UpdateClassParams) {
+  // updateClass(params);
+  //更改时间为获取当前时间
+  params.modifyTime = getLocalTime();
+  // console.log(params.modifyTime);//2023-08-09 09:31:26
+
+}
 export default defineComponent({
 
   setup() {
-    onMounted(async() => {
+    onMounted(async () => {
       getTableData();
     });
+
     const showModal = ref(false);
     const formRef = ref<FormInst | null>(null)
+    const formRefUpdate = ref<FormInst | null>(null)
     const rPasswordFormItemRef = ref<FormItemInst | null>(null)
     const message = useMessage()
+    const getDeleteInfo = () => {
+      console.log(message);
+      message.success("删除成功")
+    }
     const modelRef = ref({
       name: null,
     })
+
     const rules: FormRules = {
       name: [
         {
@@ -186,10 +284,35 @@ export default defineComponent({
         }
       ],
     }
+    async function handleUpdateClick() {
+      // console.log(modelUpdateRef.value.name);
+      //点击更新按钮之后
+      UpdateClassParams.name = modelUpdateRef.value.name;
+      UpdateClassParams.modifyTime = getLocalTime();
+      console.log(UpdateClassParams);
+      updateClass(UpdateClassParams).then(r => {
+        console.log(r);
+      })
+      message.success('更新成功');
+      showModalUpdate.value=!showModalUpdate;
+
+    }
     return {
+      handleUpdateClick,
+      showModalUpdate,
+      handlePositiveClick() {
+        message.info('是的')
+      },
+      handleNegativeClick() {
+        message.info('并不')
+      },
+      message,
+      getDeleteInfo,
       formRef,
+      formRefUpdate,
       rPasswordFormItemRef,
       model: modelRef,
+      modelUpdateRef,
       rules,
       async handleValidateButtonClick() {
         //点击添加
@@ -209,7 +332,7 @@ export default defineComponent({
       data: tableData,
       columns: createColumns({
         sendMail(rowData) {
-          message.info('send mail to ' + rowData.name)
+          message.success(`${rowData}成功`)
         }
       }),
       pagination: {