From 258de92737d32a5e2f7d20b67203eefb96c6f787 Mon Sep 17 00:00:00 2001
From: GoCo <guochen0829@163.com>
Date: Fri, 25 Jul 2025 17:03:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E8=AF=BE=E7=A8=8B?=
 =?UTF-8?q?=E7=AB=A0=E8=8A=82=20=E5=90=8E=E5=8F=B0=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/lessonSection/index.ts    |  42 ++++++
 web/src/views/lessonSection/edit.vue  | 148 +++++++++++++++++++
 web/src/views/lessonSection/index.vue | 199 ++++++++++++++++++++++++++
 web/src/views/lessonSection/model.ts  | 129 +++++++++++++++++
 web/src/views/lessonSection/view.vue  |  96 +++++++++++++
 5 files changed, 614 insertions(+)
 create mode 100644 web/src/api/lessonSection/index.ts
 create mode 100644 web/src/views/lessonSection/edit.vue
 create mode 100644 web/src/views/lessonSection/index.vue
 create mode 100644 web/src/views/lessonSection/model.ts
 create mode 100644 web/src/views/lessonSection/view.vue

diff --git a/web/src/api/lessonSection/index.ts b/web/src/api/lessonSection/index.ts
new file mode 100644
index 0000000..e1f0ae6
--- /dev/null
+++ b/web/src/api/lessonSection/index.ts
@@ -0,0 +1,42 @@
+import { http, jumpExport } from '@/utils/http/axios';
+
+// 获取课程章节列表
+export function List(params) {
+  return http.request({
+    url: '/lessonSection/list',
+    method: 'get',
+    params,
+  });
+}
+
+// 删除/批量删除课程章节
+export function Delete(params) {
+  return http.request({
+    url: '/lessonSection/delete',
+    method: 'POST',
+    params,
+  });
+}
+
+// 添加/编辑课程章节
+export function Edit(params) {
+  return http.request({
+    url: '/lessonSection/edit',
+    method: 'POST',
+    params,
+  });
+}
+
+// 获取课程章节指定详情
+export function View(params) {
+  return http.request({
+    url: '/lessonSection/view',
+    method: 'GET',
+    params,
+  });
+}
+
+// 导出课程章节
+export function Export(params) {
+  jumpExport('/lessonSection/export', params);
+}
\ No newline at end of file
diff --git a/web/src/views/lessonSection/edit.vue b/web/src/views/lessonSection/edit.vue
new file mode 100644
index 0000000..5849d8c
--- /dev/null
+++ b/web/src/views/lessonSection/edit.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑课程章节 #' + formValue.id : '添加课程章节'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
+              <n-gi span="1">
+                <n-form-item label="课程id" path="lessonId">
+                  <n-select v-model:value="formValue.lessonId" :options="dict.getOptionUnRef('lessonOption')" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="视频url" path="videoUrl">
+                  <n-input placeholder="请输入视频url" v-model:value="formValue.videoUrl" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="章节名" path="name">
+                  <n-input placeholder="请输入章节名" v-model:value="formValue.name" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="排序号" path="sortOrder">
+                  <n-input-number placeholder="请输入排序号" v-model:value="formValue.sortOrder" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="父章节id" path="parentId">
+                  <n-input-number placeholder="请输入父章节id" v-model:value="formValue.parentId" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="章节层级" path="level">
+                  <n-input-number placeholder="请输入章节层级" v-model:value="formValue.level" />
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">
+            取消
+          </n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
+            确定
+          </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
+  import { Edit, View } from '@/api/lessonSection';
+  import { State, newState } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(840);
+  });
+
+  // 提交表单
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
+            closeForm();
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 关闭表单
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开模态框
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
\ No newline at end of file
diff --git a/web/src/views/lessonSection/index.vue b/web/src/views/lessonSection/index.vue
new file mode 100644
index 0000000..c425628
--- /dev/null
+++ b/web/src/views/lessonSection/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="课程章节">
+        <!--  这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm  ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+      <BasicTable  ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000"  :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
+        <template #tableTitle>
+          <n-button type="primary"  @click="addTable" class="min-left-space" v-if="hasPermission(['/lessonSection/edit'])">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加
+          </n-button>
+          <n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/lessonSection/delete'])">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button type="primary" @click="handleExport" class="min-left-space" v-if="hasPermission(['/lessonSection/export'])">
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
+    <View ref="viewRef" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { useDictStore } from '@/store/modules/dict';
+  import { List, Export, Delete } from '@/api/lessonSection';
+  import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions } from './model';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+  import View from './view.vue';
+
+  const dict = useDictStore();
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+  const viewRef = ref();
+  const checkedIds = ref([]);
+
+  const actionColumn = reactive({
+    width: 216,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record: State) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/lessonSection/edit'],
+          },
+
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/lessonSection/delete'],
+          },
+        ],
+        dropDownActions: [
+          {
+            label: '查看详情',
+            key: 'view',
+            auth: ['/lessonSection/view'],
+          },
+        ],
+        select: (key) => {
+          if (key === 'view') {
+            return handleView(record);
+          }
+        },
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  // 加载表格数据
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  // 更新选中的行
+  function handleOnCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
+
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
+  function addTable() {
+    editRef.value.openModal(null);
+  }
+
+  // 编辑数据
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record);
+  }
+
+  // 查看详情
+  function handleView(record: Recordable) {
+    viewRef.value.openModal(record);
+  }
+
+  // 单个删除
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 批量删除
+  function handleBatchDelete() {
+    if (checkedIds.value.length < 1){
+      message.error('请至少选择一项要删除的数据');
+      return;
+    }
+
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 导出
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  onMounted(() => {
+    loadOptions();
+
+  });
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/web/src/views/lessonSection/model.ts b/web/src/views/lessonSection/model.ts
new file mode 100644
index 0000000..e39bc73
--- /dev/null
+++ b/web/src/views/lessonSection/model.ts
@@ -0,0 +1,129 @@
+import { h, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { renderOptionTag, renderPopoverMemberSumma, MemberSumma } from '@/utils';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export class State {
+  public id = 0; // id
+  public lessonId = null; // 课程id
+  public videoUrl = ''; // 视频url
+  public name = ''; // 章节名
+  public sortOrder = 0; // 排序号
+  public parentId = 0; // 父章节id
+  public level = 0; // 章节层级
+  public revision = 0; // 乐观锁
+  public createdBy = 0; // 创建人
+  public createdBySumma?: null | MemberSumma = null; // 创建人摘要信息
+  public createdTime = ''; // 创建时间
+  public updatedBy = 0; // 更新人
+  public updatedBySumma?: null | MemberSumma = null; // 更新人摘要信息
+  public updatedTime = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'id',
+    component: 'NInputNumber',
+    label: 'id',
+    componentProps: {
+      placeholder: '请输入id',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+// 表格列
+export const columns = [
+  {
+    title: 'id',
+    key: 'id',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '课程id',
+    key: 'lessonId',
+    align: 'left',
+    width: -1,
+    render(row: State) {
+      return renderOptionTag('lessonOption', row.lessonId);
+    },
+  },
+  {
+    title: '视频url',
+    key: 'videoUrl',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '章节名',
+    key: 'name',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '排序号',
+    key: 'sortOrder',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '父章节id',
+    key: 'parentId',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '章节层级',
+    key: 'level',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '创建人',
+    key: 'createdBy',
+    align: 'left',
+    width: -1,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+  },
+  {
+    title: '更新人',
+    key: 'updatedBy',
+    align: 'left',
+    width: -1,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['lessonOption']);
+}
\ No newline at end of file
diff --git a/web/src/views/lessonSection/view.vue b/web/src/views/lessonSection/view.vue
new file mode 100644
index 0000000..1ffea1c
--- /dev/null
+++ b/web/src/views/lessonSection/view.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <n-drawer v-model:show="showModal" :width="dialogWidth">
+      <n-drawer-content title="课程章节详情" closable>
+        <n-spin :show="loading" description="请稍候...">
+          <n-descriptions label-placement="left" class="py-2" :column="1">
+            <n-descriptions-item label="课程id">
+              <n-tag :type="dict.getType('lessonOption', formValue.lessonId)" size="small" class="min-left-space">
+                {{ dict.getLabel('lessonOption', formValue.lessonId) }}
+              </n-tag>
+            </n-descriptions-item>
+            <n-descriptions-item>
+              <template #label>
+                视频url
+              </template>
+              {{ formValue.videoUrl }}
+            </n-descriptions-item>
+            <n-descriptions-item>
+              <template #label>
+                章节名
+              </template>
+              {{ formValue.name }}
+            </n-descriptions-item>
+            <n-descriptions-item>
+              <template #label>
+                排序号
+              </template>
+              {{ formValue.sortOrder }}
+            </n-descriptions-item>
+            <n-descriptions-item>
+              <template #label>
+                父章节id
+              </template>
+              {{ formValue.parentId }}
+            </n-descriptions-item>
+            <n-descriptions-item>
+              <template #label>
+                章节层级
+              </template>
+              {{ formValue.level }}
+            </n-descriptions-item>
+          </n-descriptions>
+        </n-spin>
+      </n-drawer-content>
+    </n-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { View } from '@/api/lessonSection';
+  import { State, newState } from './model';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { getFileExt } from '@/utils/urlUtils';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const message = useMessage();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref(newState(null));
+  const dialogWidth = computed(() => {
+    return adaModalWidth(580);
+  });
+  const fileAvatarCSS = computed(() => {
+    return {
+      '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
+      '--n-font-size': `18px`,
+    };
+  });
+
+  // 下载
+  function download(url: string) {
+    window.open(url);
+  }
+
+  // 打开模态框
+  function openModal(state: State) {
+    showModal.value = true;
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file