Merge branch 'master' of http://47.115.223.229:8888/yangjun/dbsd_kczx

# Conflicts:
#	src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcDetail.vue

src/components/Form/src/jeecg/components/JUpload/JUpload.vue

@@ -1,9 +1,8 @@
 <template>
   <div ref="containerRef" :class="`${prefixCls}-container`">
     <a-upload
-      :headers="headers"
       :multiple="multiple"
-      :action="uploadUrl"
+      :customRequest="uploadFn"
       :fileList="fileList"
       :disabled="disabled"
       v-bind="bindProps"
@@ -17,11 +16,12 @@
           <div class="ant-upload-text">{{ text }}</div>
         </div>
       </template>
-      <a-button v-else-if="buttonVisible" :disabled="isMaxCount || disabled">
+      <a-button v-else-if="buttonVisible" :disabled="isMaxCount || disabled || otherData.loading" :loading="otherData.loading">
         <Icon icon="ant-design:upload-outlined" />
         <span>{{ text }}</span>
       </a-button>
     </a-upload>
+
   </div>
 </template>
 
@@ -29,7 +29,7 @@
   import { ref, reactive, computed, watch, nextTick, createApp, unref } from 'vue';
   import { Icon } from '/@/components/Icon';
   import { getToken } from '/@/utils/auth';
-  import { uploadUrl } from '/@/api/common/api';
+  import { uploadUrl, baseUploadUrl } from '/@/api/common/api';
   import { propTypes } from '/@/utils/propTypes';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { createImgPreview } from '/@/components/Preview/index';
@@ -38,6 +38,9 @@
   import { UploadTypeEnum } from './upload.data';
   import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
   import UploadItemActions from './components/UploadItemActions.vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { buildUUID } from '/@/utils/uuid';
+  import CryptoJS from 'crypto-js';
 
   const { createMessage, createConfirm } = useMessage();
   const { prefixCls } = useDesign('j-upload');
@@ -70,9 +73,16 @@
     forceBeforeUploadFn: propTypes.bool.def(true),
     //后加的，强制验证accept，目前仅支持*.jpg,*.gif之类的扩展名验证，video/*,audio/*,image/jpeg之类的暂不支持
     forceAcceptVerify: propTypes.bool.def(false),
+    //后加的，是否查询biz
+    isGetBiz: propTypes.bool.def(false),
+    //后加的，查询biz参数
+    getBizParam: propTypes.object.def({}),
     disabled: propTypes.bool.def(false),
   });
 
+  const otherData = ref<Object>({});
+  const otherClass = ref<Object>({});
+
   const headers = reactive({
     'X-Access-Token': getToken(),
   });
@@ -89,8 +99,8 @@
     const bind: any = Object.assign({}, props, unref(attrs));
     bind.name = 'file';
     bind.listType = isImageMode.value ? 'picture-card' : 'text';
-    bind.class = [bind.class, { 'upload-disabled': props.disabled }];
+    bind.class = [bind.class, { 'upload-disabled': props.disabled, ...unref(otherClass) }];
-    bind.data = { biz: props.bizPath, ...bind.data };
+    bind.data = { biz: props.bizPath, ...bind.data, ...unref(otherData) };
     //update-begin-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程
     if (!bind.beforeUpload) {
       bind.beforeUpload = onBeforeUpload;
@@ -124,6 +134,41 @@
 
   watch(fileList, () => nextTick(() => addActionsListener()), { immediate: true });
 
+  const loadBizFn = (params) => defHttp.get({ url: '/ktgl/kcKetangbiao/getBizPath', params }, { isTransformResponse: false })
+
+  function loadBiz(param){
+    otherData.value.loading = true;
+    // otherClass.value = { 'upload-disabled': true, }
+    loadBizFn(param).then(res => {
+      //otherData.value
+      if(res.success){
+        otherData.value.biz = res.result;
+      }else{
+        delete otherData.value.biz;
+      }
+      // otherClass.value = {}
+      delete otherData.value.loading;
+    });
+  }
+
+
+  watch(() => props.getBizParam,
+    (param, oldParam) => {
+      if(JSON.stringify(param) != JSON.stringify(oldParam)){
+        nextTick(() => {
+          console.log(`🚀 ~ props.isGetBiz:`, props.isGetBiz, bindProps.value.disabled, loadBiz);
+          if(props.isGetBiz && !bindProps.value.disabled){
+            //非被禁用状态，查询
+            nextTick(() => {
+              loadBiz(param);
+            });
+          }
+        });
+      }
+    },
+    { immediate: true }
+  );
+
   const antUploadItemCls = 'ant-upload-list-item';
 
   // Listener
@@ -299,7 +344,7 @@
         });
       }
     } else if (info.file.status === 'error') {
-      createMessage.error(`${info.file.name} 上传失败.`);
+      createMessage.error(`${info.file.name} 上传失败. ${info.file.response.message}`);
     }
     fileList.value = fileListTemp;
     if (info.file.status === 'done' || info.file.status === 'removed') {
@@ -372,6 +417,296 @@
     return path.substring(path.lastIndexOf('/') + 1);
   }
 
+  // //获取文件md5（仅支持小文件，，，弃用）
+  // function calculateFileMd5(file) {
+  //   return new Promise((resolve, reject) => {
+  //     const reader = new FileReader();
+  //     // 当文件被成功读取时调用onload事件
+  //     reader.onload = function (event) {
+  //       const arrayBufferView = event.target.result;
+  //       // 将ArrayBuffer转换为WordArray对象
+  //       const wordArray = CryptoJS.lib.WordArray.create(arrayBufferView);
+  //       // 计算MD5哈希值
+  //       const md5Hash = CryptoJS.MD5(wordArray).toString();
+  //       resolve(md5Hash);
+  //     };
+  //     // 当发生错误时调用onerror事件
+  //     reader.onerror = function () {
+  //       reject('Failed to read file');
+  //     };
+  //     // 开始读取文件内容
+  //     reader.readAsArrayBuffer(file);
+  //   });
+  // }
+
+  /**
+   * 计算文件md5（分批次计算，挺慢的，支持大文件）
+   */
+  function calFileMd5(file){
+    return new Promise((resolve, reject) => {
+      let md5 = CryptoJS.algo.MD5.create();
+      //获取文件对象
+      let reader = new FileReader();
+      let step = 1024* 1024;
+      let total = file.size;
+      let cuLoaded = 0;
+      let time=1;
+      console.info("文件大小：" + file.size);
+      //读取一段成功
+      reader.onload = (e) => {
+        //console.log("开始读取第"+time+"段");
+        //处理读取的结果
+        let wordArray = CryptoJS.lib.WordArray.create(reader.result);
+        md5.update(wordArray);
+        cuLoaded += e.loaded;
+        //如果没有读完，继续
+        if (cuLoaded < total) {
+          readBlob(cuLoaded);
+        } else {
+          cuLoaded = total;
+          let hash = md5.finalize().toString();
+          //document.getElementById("result").innerText=hash;
+          resolve(hash + buildUUID());
+        }
+        time++;
+      }
+      reader.onerror = (e) => {
+        console.error('读取文件MD5出现错误 =>',e);
+        reject(e);
+      }
+      //开始读取
+      readBlob(0);
+      //指定开始位置，分块读取文件
+      function readBlob(start) {
+        //指定开始位置和结束位置读取文件
+        let blob = file.slice(start, start + step);
+        reader.readAsArrayBuffer(blob);
+      }
+    });
+  }
+
+  function calFileUid(file){
+    return new Promise((resolve, reject) => {
+      resolve(buildUUID());
+    });
+  }
+
+
+
+
+  //请求接口的数据返回
+// function upSearch(data){
+//     return new Promise((resolve,reject)=>{
+//         setTimeout(()=>{
+//             console.log(data)
+//             resolve(data)
+//         },2000)
+//     })
+// }
+
+// function limitPromise(promiseList, limit){
+
+//     let init = Math.min(limit, promiseList.length)
+//     let promiseList = []
+//     for(let i=0; i<init; i++){
+//       promiseList[i].then(next);
+//       // promiseList.push(run(arr.shift()))
+//     }
+
+//     function next(){
+//         console.log('当前并发数量', promiseList.length)
+//         if(arr.length === 0){
+//             console.log('并发请求全部完成')
+//             return Promise.resolve()
+//         }
+
+//         return run(arr.shift())
+//     }
+
+//     //请求函数
+//     function run(data){
+//         return upSearch(data).then(next)
+//     }
+
+//     Promise.all(promiseList).then(()=>{
+//         console.log('全部完成')
+//     })
+// }
+
+//limitUp([1,2,3,4,5,6,7,8], 3)
+
+
+  async function limitPromise(promises, limit) {
+    const results = []
+
+    for(let i=0; i<=promises.length; i+=limit) {
+      const tasks = []
+      // 切片 Promise.all 的参数
+      for(const promise of promises.slice(i, i + limit)) {
+        tasks.push(promise)
+      }
+      // 用 await 以确保后面的任务不会在执行当前任务时执行
+      const result = await Promise.all(tasks)
+      results.push(...result)
+    }
+
+    return results
+  }
+
+  //分片大小 5m
+  const chunkSize = 5 * 1024 * 1024;
+
+  const runBatchNum = 20;
+
+  const uploadAxiosHttpConfig = {
+    //超时时间，分钟 * 秒 * 毫秒 60分钟
+    timeout: 60 * 60 * 1000,
+    //不自动拼接前缀
+    joinPrefix: false,
+    //自定义前缀
+    apiUrl: baseUploadUrl,
+    //不自动处理
+    isTransformResponse: false
+  }
+
+  const defUploadFn = (params) => defHttp.post({ url: '/sys/common/upload', params }, uploadAxiosHttpConfig );
+
+  const bigFileUploadInit = (params) => defHttp.post({ url: '/sys/common/sectionUpload/init', params }, uploadAxiosHttpConfig );
+
+  const bigFileUploadUpload = (params) => defHttp.post({ url: '/sys/common/sectionUpload/upload', params }, uploadAxiosHttpConfig );
+
+  const bigFileUploadEnd = (params) => defHttp.post({ url: '/sys/common/sectionUpload/end', params }, uploadAxiosHttpConfig)
+
+  /**
+   * 自定义文件上传方法，小于5m的走默认上传，大于5m的走切片上传
+   */
+  function uploadFn(customRequestData){
+    const { data, file, onProgress, onSuccess, onError } = customRequestData; // 解构出a-upload的内置的方法（进度条，成功失败等）
+
+    let fileSize = file.size;
+    let uploadPromiseList = [];
+
+    if(fileSize <= chunkSize){
+      let formData = new FormData();
+      Object.keys(data).forEach(key => {
+        formData.append(key, data[key]);
+      });
+      formData.append('file', file);
+      //传统直传
+      defUploadFn(formData).then(res => {
+        console.log(`🚀 ~ 传统直传 - defUploadFn ~ res:`, res);
+        if(res.success){
+          onProgress({ percent: 100 }, file) // 进度条
+          onSuccess(res, file) // 上传文件的状态
+        } else {
+          onError(res, res, file);
+        }
+      }).catch(err => {
+        console.log(`🚀 ~ 传统直传 - defUploadFn ~ err:`, err);
+        onError(err, err, file);
+      });
+    } else {
+      //计算当前选择文件需要的分片数量
+      const chunkCount = Math.ceil(fileSize / chunkSize);
+      console.log("文件大小：",(file.size / 1024 / 1024) + "Mb","分片数：",chunkCount);
+      //获取文件md5
+      console.log('第一步，计算文件的md5',calFileMd5, file);
+      calFileMd5(file).then(fileMd5 => {
+        console.log(`🚀 ~ 文件的md5是:`, fileMd5);
+        const initUploadParams = { chunkCount, fileMd5 , ...data, };
+        let successNum = 0;
+
+        let taskAllList = [];
+        //切片上传（开始）
+        console.log('第二步，根据md5创建文件夹', initUploadParams);
+        bigFileUploadInit(initUploadParams).then(res => {
+          console.log('第三步，准备切片文件', res);
+          if(res.success){
+            onProgress({ percent: 0 }, file); // 进度条
+            //后台创建成功，下一步，分批次上传
+            for (let i = 1; i <= chunkCount; i++) {
+              let uploadParams = {
+                partNumber: i,
+                ...initUploadParams,
+                file: null,
+              }
+              //分片开始位置
+              let start = (i - 1) * chunkSize
+              //分片结束位置
+              let end = Math.min(fileSize, start + chunkSize)
+              //取文件指定范围内的byte，从而得到分片数据
+              let _chunkFile = file.slice(start, end)
+              console.log("第四步，开始准备文件第" + i + "个分片" + "，切片范围从" + start + "到" + end)
+
+              uploadParams.file = _chunkFile;
+              let uploadFormData = new FormData();
+              Object.keys(uploadParams).forEach(key => {
+                uploadFormData.append(key, uploadParams[key]);
+              });
+
+              console.log('第五步，准备切片文件上传参数', uploadFormData);
+              taskAllList.push(new Promise((resolve, reject) => {
+                console.log('第六步，准备切片文件上传前，', uploadFormData);
+                bigFileUploadUpload(uploadFormData).then(res => {
+                  console.log('第七步，切片文件上传后，', uploadFormData, res);
+                  if(res.success) {
+                    successNum++;
+                    let percent = Number(Number(successNum/chunkCount*100).toFixed(0))
+                    onProgress({ percent }, file) // 进度条
+                    resolve(res);
+                  }else{
+                    reject(res);
+                  }
+                }).catch(err => {
+                  reject(err)
+                });
+              }));
+            }
+            //任务分片,一次20片
+            console.log('第八步，全部切片，根据指定线程数执行，', limitPromise, taskAllList);
+            limitPromise(taskAllList, runBatchNum).then(resList => {
+              console.log('第九步，全部切片，根据指定线程数执行完成后的结果，', resList);
+              //完成后再执行一个合并
+              let endUploadParams = {
+                ...initUploadParams,
+                fileName: file.name,
+              }
+              console.log('第十步，全部切片，发生合并指令，', endUploadParams);
+              bigFileUploadEnd(endUploadParams).then(res => {
+                console.log(`第十一步 ~ 合并返回值 defHttp.post ~ res:`, res);
+                //返回跟单个上传一样的返回值，
+                if(res.success){
+                  onProgress({ percent: 100 }, file) // 进度条
+                  onSuccess(res, file) // 上传文件的状态
+                } else {
+                  onError(res, res, file);
+                }
+
+              }).catch(err => {
+                console.error(`🚀 ~ 合并出现错误！ defHttp.post ~ err:`, err);
+                onError(err, err, file);
+              })
+            }).catch(err => {
+              console.error(`🚀 ~ 全部完成后，其中有错误limitPromise ~ err:`, err);
+              //有错误，，
+              onError(err, err, file);
+            });
+
+          }
+          //return
+        })
+
+      })
+
+
+    }
+
+
+    // Promise.all(uploadPromiseList).then(resList => {
+
+    // });
+  }
+
   defineExpose({
     addActionsListener,
   });

src/router/routes/modules/zy/zy.ts

@@ -65,7 +65,7 @@ const zuoye: AppRouteModule = {
     {
       path: 'jiaoXueDanYuanNeiRong',
       name: 'jiaoXueDanYuanNeiRong',
-      component: () => import('/@/views/zy/jiaoXueDanYuanNeiRong/index2.vue'),
+      component: () => import('/@/views/zy/jiaoXueDanYuanNeiRong/index.vue'),
       meta: {
         title: '教学单元内容',
       },

src/views/kc/detection/KcDetectionMain.data.ts

@@ -12,21 +12,26 @@ export const columns: BasicColumn[] = [
     align: "center",
     dataIndex: 'xnxq'
   },
-  {
-    title: '授课日期',
-    align: "center",
-    dataIndex: 'createTime'
-  },
   {
     title: '课程名称',
     align: "center",
     dataIndex: 'kcmc'
   },
   {
-    title: '节次',
+    title: '授课日期',
+    align: "center",
+    dataIndex: ['ketangbiaoInfo', 'skrq']
+  },
+  {
+    title: '授课节次',
     align: "center",
     dataIndex: ['ketangbiaoInfo', 'hh']
   },
+  {
+    title: '选课人数',
+    align: "center",
+    dataIndex: ['ketangbiaoInfo', 'xkrs'],
+  },
 
   // {
   //   title: '任务编号',
@@ -49,25 +54,20 @@ export const columns: BasicColumn[] = [
   //   dataIndex: 'detectionUrl'
   // },
   {
-    title: '检测次数',
+    title: '抓取次数',
     align: "center",
     dataIndex: 'detectionNum'
   },
   {
-    title: '人数(累加)',
+    title: '累计抓取人数',
     align: "center",
     dataIndex: 'allNum'
   },
   {
-    title: '平均数',
+    title: '平均抓取人数',
     align: "center",
     dataIndex: 'averageNum',
   },
-  {
-    title: '选课人数',
-    align: "center",
-    dataIndex: ['ketangbiaoInfo', 'xkrs'],
-  },
   {
     title: '出勤率',
     align: "center",
@@ -108,18 +108,22 @@ export const formSchema: FormSchema[] = [
     field: 'xnxq',
     component: 'Input',
   },
-  {
-    label: '授课日期',
-    field: 'createTime',
-    component: 'Input',
-  },
   {
     label: '课程名称',
     field: 'kcmc',
     component: 'Input',
   },
   {
-    label: '节次',
+    label: '授课日期',
+    field: 'createTime',
+    component: 'Input',
+    render: ({ values }) => {
+      let text = values?.ketangbiaoInfo?.skrq;
+      return h(Input, { value: text, disabled: true });
+    }
+  },
+  {
+    label: '授课节次',
     field: 'ketangbiaoInfo',
     component: 'Input',
     render: ({ values }) => {
@@ -152,17 +156,17 @@ export const formSchema: FormSchema[] = [
     show: false,
   },
   {
-    label: '检测次数',
+    label: '抓取次数',
     field: 'detectionNum',
     component: 'InputNumber',
   },
   {
-    label: '人数(累加)',
+    label: '累计抓取人数',
     field: 'allNum',
     component: 'InputNumber',
   },
   {
-    label: '平均数',
+    label: '平均抓取人数',
     field: 'averageNum',
     component: 'InputNumber',
   },
@@ -257,26 +261,52 @@ export const detectionDetailedListColumns: BasicColumn[] = [
   //   dataIndex: 'jsbh'
   // },
   {
-    title: '检测序号',
+    title: '序号',
     align: "center",
-    dataIndex: 'detectionNum'
+    dataIndex: 'detectionNum',
+    customRender: ({ index }) => {
+      return index+1;
+    },
+  },
+  // {
+  //   title: '序号',
+  //   align: "center",
+  //   dataIndex: 'detectionNum',
+  // },
+  {
+    title: '授课地点',
+    align: "center",
+    dataIndex: 'none1',
+    slots: { customRender: 'skkd' },
   },
   {
-    title: '截取图片',
+    title: '抓取图片',
     align: "center",
     dataIndex: 'detectionOutImgUrl',
     slots: { customRender: 'imgSlot' },
   },
   {
-    title: '检测时间',
+    title: '抓取时间',
     align: "center",
     dataIndex: 'createTime'
   },
   {
-    title: '人数',
+    title: '选课人数',
+    align: "center",
+    dataIndex: 'none2',
+    slots: { customRender: 'xkrs' },
+  },
+  {
+    title: 'AI识别人数',
     align: "center",
     dataIndex: 'num'
   },
+  {
+    title: '到课识别率',
+    align: "center",
+    dataIndex: 'none3',
+    slots: { customRender: 'dksbl' },
+  },
   // {
   //   title: '人数计算结果',
   //   align: "center",

src/views/kc/detection/components/KcDetectionMainModal.vue

@@ -8,6 +8,9 @@
               <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
               <Image v-else :src="getImgView(text)" :preview="record.id" alt="" :width="100"/>
             </template>
+            <template #skkd>{{ getFieldsValue('ketangbiaoInfo')?.ketangbiaoInfo?.skdd }}</template>
+            <template #xkrs>{{ getFieldsValue('ketangbiaoInfo')?.ketangbiaoInfo?.xkrs }}</template>
+            <template #dksbl="{ record }">{{ calcAverageNum(record) }}</template>
           </a-table>
         </div>
       </template>
@@ -27,7 +30,7 @@ import { saveOrUpdate } from '../KcDetectionMain.api';
 const emit = defineEmits(['register', 'success']);
 const isUpdate = ref(true);
 //表单配置
-const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
+const [registerForm, { setProps, getFieldsValue, resetFields, setFieldsValue, validate }] = useForm({
   //labelWidth: 150,
   schemas: formSchema,
   showActionButtonGroup: false,
@@ -49,7 +52,7 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
   setProps({ disabled: !data?.showFooter })
 });
 //设置标题
-const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+const title = computed(() => '查看');
 //表单提交事件
 async function handleSubmit(v) {
   try {
@@ -66,6 +69,22 @@ async function handleSubmit(v) {
   }
 }
 
+function calcAverageNum(record){
+  let xkrs = getFieldsValue('ketangbiaoInfo')?.ketangbiaoInfo?.xkrs;
+  let { num: averageNum } = record;
+  let xkrsNum = Number(xkrs);
+  if(!isNaN(xkrsNum) && xkrsNum != 0 && averageNum != 0) {
+    let num = averageNum / xkrsNum * 100;
+    return num.toFixed(2) + '%';
+  }else{
+    if(averageNum == 0){
+      return '0.00' + '%';
+    }else{
+      return '';
+    }
+  }
+}
+
 /**
  * 获取预览图片
  */

src/views/kc/detection/zyZhjsList.vue

@@ -1,10 +1,40 @@
 <template>
   <div style="margin-top: 10px;">
+    <div class="jeecg-basic-table-form-container">
+      <a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <a-row :gutter="24">
+            <a-col :lg="8">
+              <a-form-item label="课程名称">
+                <j-input placeholder="请输入课程名称" v-model:value="queryParam.kcmc"></j-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="8">
+              <a-form-item label="授课日期">
+                <a-date-picker :showTime="false" valueFormat="YYYY-MM-DD" :placeholder="'请选择授课日期'" style="width:100%;" v-model:value="queryParam.searchSkrq"></a-date-picker>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="8">
+              <a-form-item label="授课节次">
+                <j-dict-select-tag placeholder="请选择授课节次" v-model:value="queryParam.searchHh" dictCode="skjc"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                <a-col :lg="6">
+                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                  <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+                </a-col>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+    </div>
+
     <!--引用表格-->
     <BasicTable @register="registerTable">
       <!--插槽:table标题-->
       <template #tableTitle>
-      <span style="font-size: 16px;font-weight: bold;">检测情况查询</span>
+      <!-- <span style="font-size: 16px;font-weight: bold;">检测情况查询</span> -->
       </template>
       <!--操作栏-->
       <template #action="{ record }">
@@ -29,7 +59,7 @@
 </template>
 
 <script lang="ts" name="detection-kcDetectionMain" setup>
-import { ref, computed, unref } from 'vue';
+import { ref, reactive, computed, unref } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useModal } from '/@/components/Modal';
 import { useListPage } from '/@/hooks/system/useListPage'
@@ -37,12 +67,24 @@ import KcDetectionMainModal from './components/KcDetectionMainModal.vue'
 import { columns, searchFormSchema } from './KcDetectionMain.data';
 import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './KcDetectionMain.api';
 import { downloadFile } from '/@/utils/common/renderUtils';
+import { JDictSelectTag, JInput } from '/@/components/Form';
 import { useRouter } from 'vue-router';
 const { currentRoute } = useRouter();
 const { query } = unref(currentRoute);
 const { rwbh,xqxn } = query;//获取传递参数
 const checkedKeys = ref<Array<string | number>>([]);
 const queryParam = ref<any>({ rwbh });
+
+const labelCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 6 },
+});
+const wrapperCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 18 },
+});
+
+
 //注册model
 const [registerModal, { openModal }] = useModal();
 //注册table数据
@@ -85,6 +127,26 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
 
 const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext
 
+/**
+ * 查询
+ */
+  function searchQuery() {
+  reload();
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  queryParam.value = {
+    rwbh
+  };
+  selectedRowKeys.value = [];
+  //刷新数据
+  reload();
+}
+
+
 /**
  * 新增事件
  */
@@ -169,4 +231,13 @@ function getDropDownAction(record) {
 
 </script>
 
-<style scoped></style>
+<style scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+}
+.table-page-search-submitButtons {
+  display: block;
+  margin-bottom: 24px;
+  white-space: nowrap;
+}
+</style>

src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcDetail.vue

@@ -123,7 +123,7 @@ const baseApiUrl = globSetting.domainUrl;
   //教学大纲提交附件
   function jxdgChange(record){
     console.log(`🚀 ~ jxdgChange ~ record:`, record)
-    var model = {id:jxdgInfo.value.id,filePath:record,rwbh}
+    var model = {id:jxdgInfo.value.id,filePath:record,rwbh:rwbh,xqxn:xqxn}
     defHttp.post({ url: '/zyJxdg/zyJxdg/jxdgScfj', params: model }).then((res) => {
       getKcjsJxdg();
     });
@@ -131,7 +131,7 @@ const baseApiUrl = globSetting.domainUrl;
 
   function jxrlChange(record){
     console.log(`🚀 ~ jxdgChange ~ record:`, record)
-    var model = {id:jxdgInfo.value.id,jxrlFilePath:record,rwbh}
+    var model = {id:jxdgInfo.value.id,jxrlFilePath:record,rwbh,xqxn:xqxn}
     defHttp.post({ url: '/zyJxdg/zyJxdg/jxrlScfj', params: model }).then((res) => {
       getKcjsJxdg();
     });

src/views/zy/jiaoXueDanYuanNeiRong/index.vue

@@ -1,90 +1,108 @@
 <template>
-  <div class="topButton">
+  <div class="max">
-    <a-space>
-      <a-button @click="save" :loading="saveLoading">保存</a-button>
-      <a-button @click="reload">刷新</a-button>
-      <a-button type="primary" @click="addOne()" class="addBtn" title="新增一级"><Icon icon="ant-design:plus-outlined"/>新增标题</a-button>
-    </a-space>
-  </div>
 
-  <div class="maxDiv">
+  <!-- <a-affix :offset-top="0" :target="() => doctomen"> -->
+    <div style="background: #fff">
+        <div style="font-size: 14px;color: #858588;margin-top: 10px;width:100%;padding: 10px 0 0 10px;">提示：每一个小的章节，都可以上传章节相关的教学资源</div>
+        <div class="topButton">
+          <a-space v-if="!isPreview">
+            <!-- <a-button type="primary" @click="save" :loading="saveLoading" title="保存"><Icon icon="ant-design:save-outlined"/>保存</a-button> -->
+            <a-button @click="reload"><Icon icon="ant-design:reload-outlined"/>刷新</a-button>
+            <a-button type="primary" @click="addOne()" class="addBtn" title="新增标题"><Icon icon="ant-design:plus-outlined"/>新增标题</a-button>
+            <a-button type="" v-if="!isPreview" @click="() => isPreview = true" class="addBtn" title="预览"><Icon icon="ant-design:fund-view-outlined"/>预览</a-button>
+          </a-space>
+          <template v-else>
+            <a-space>
+              <a-button @click="reloadStn"><Icon icon="ant-design:reload-outlined"/>刷新</a-button>
+              <a-button type="" @click="() => { isPreview = false;reloadStn() }" class="addBtn" title="返回"><Icon icon="ant-design:fund-view-outlined"/>返回</a-button>
+            </a-space>
+          </template>
+        </div>
+    </div>
+  <!-- </a-affix> -->
+  <stuIndex ref="stuIndexRef" v-show="isPreview" :hiddenBtn="true"/>
+  <div v-show="!isPreview" class="maxDiv">
     <a-empty v-if="!dataSource || !dataSource.length"/>
     <draggable v-bind="draggableBind" v-model="dataSource">
       <template #item="{ element: one }">
         <div class="box">
           <!-- 下一层 -->
-          <a-card>
+          <a-card @mouseenter="() => one.showBtn = true" @mouseleave="() => one.showBtn = false">
             <a-collapse ghost expandIconPosition="right">
-              <a-collapse-panel :key="one._id">
+              <a-collapse-panel :key="one._id" forceRender>
                 <template #header>
                   <div class="topDiv">
+                    <Icon icon="ant-design:holder-outlined"/>
                     <div>{{ one.sort }}：</div>
-                    <div class="inputd"><a-input :value="one.title" @change="changeInput($event, one, 'title')" @click="stop" class="ainput"/></div>
+                    <div class="inputd">
+                      <a-input v-if="one.isEdit" :value="one.title" @change="changeInput($event, one, 'title')" @blur="() => { one.isEdit = false; editOne(one) }" @click="stop" class="ainput"/>
+                      <div v-else class="ainput ainputNoEdit" @click="(e) => { stop(e);one.isEdit = true }" >&nbsp;{{ one.title }}</div>
+                    </div>
                   </div>
                 </template>
                 <template #extra>
+                  <span v-show="one.showBtn">
                     <a-space>
-                    <div><a-button type="primary" @click="addTwo($event, one)" class="addBtn" title="新增二级"><Icon icon="ant-design:plus-outlined"/>新增章节</a-button></div>
+                      <div><a-button type="primary" size="small" @click="addTwo($event, one)" class="twoBtn addBtn" title="新增章节"><Icon icon="ant-design:plus-outlined"/></a-button></div>
-                    <div><a-button type="primary" danger @click="delOne($event, one)" class="addBtn" title="删除此项及以下"><Icon icon="ant-design:delete"/>删除</a-button></div>
+                      <div><a-button type="primary" size="small" danger @click="delOne($event, one)" class="addBtn" title="删除"><Icon icon="ant-design:delete"/></a-button></div>
                     </a-space>
+                  </span>
                 </template>
                 <draggable v-bind="draggableBind" v-model="one.childrenList">
                   <template #item="{ element: two }">
                     <div class="box">
                       <!-- 下一层 -->
-                      <a-card>
+                      <a-card @mouseenter="() => two.showBtn = true" @mouseleave="() => two.showBtn = false">
                         <a-collapse ghost expandIconPosition="right">
-                          <a-collapse-panel :key="two._id">
+                          <a-collapse-panel :key="two._id" :showArrow="false" forceRender>
                             <template #header>
                               <div class="twoTopDiv">
                                 <div class="topDiv">
+                                  <Icon icon="ant-design:holder-outlined"/>
                                   <div>{{ one.sort }}.{{ two.sort }}：</div>
-                                  <div class="twoInputd"><a-input :value="two.title" @change="changeInput($event, two, 'title')" @click="stop" class="ainput"/></div>
+                                  <div class="twoInputd">
+                                    <a-input v-if="two.isEdit" :value="two.title" @change="changeInput($event, two, 'title')" @blur="() => { two.isEdit = false; editTwo(two) }" @click="stop" class="ainput"/>
+                                    <div v-else class="ainput ainputNoEdit" @click="(e) => { stop(e);two.isEdit = true }" >&nbsp;{{ two.title }}</div>
+                                  </div>
                                 </div>
                               </div>
                             </template>
                             <template #extra>
-                              <div><a-button type="primary" danger @click="delTwo($event, one, two)" class="addBtn" title="删除此项及以下"><Icon icon="ant-design:delete"/>删除</a-button></div>
+                              <span v-show="two.showBtn">
-                            </template>
-                            <div style="padding-top: 1rem;">
                                 <a-space>
-                                <div><a-button type="primary" @click="addThree($event, two, 'video')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>视频</a-button></div>
+                                  <a-button type="primary" size="small" class="addBtn" title="上传资源"><Icon icon="ant-design:plus-outlined"/></a-button>
-                                <div><a-button type="primary" @click="addThree($event, two, 'document')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>文档</a-button></div>
+                                  <a-button type="primary" size="small" danger @click="delTwo($event, one, two)" class="addBtn" title="删除"><Icon icon="ant-design:delete"/></a-button>
-                                <div><a-button type="primary" @click="addThree($event, two, 'richText')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>富文本</a-button></div>
+                                </a-space>
+                              </span>
+                            </template>
+                            <div style="padding-top: 1rem;padding-bottom: 1rem;">
+                              <a-space>
+                                <div><a-button type="primary" size="small" @click="addThree($event, two, 'video')" class="addBtn"><Icon icon="ant-design:video-camera-outlined"/>视频</a-button></div>
+                                <div><a-button type="primary" size="small" @click="addThree($event, two, 'document')" class="addBtn"><Icon icon="ant-design:file-outlined"/>文档</a-button></div>
+                                <div><a-button type="primary" size="small" @click="addThree($event, two, 'richText')" class="addBtn"><Icon icon="ant-design:file-text-outlined"/>富文本</a-button></div>
                                 <!-- <div><a-button type="primary" @click="addThree($event, two, 'classroomTest')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>随堂测试</a-button></div>
                                 <div><a-button type="primary" @click="addThree($event, two, 'discuss')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>讨论</a-button></div> -->
                               </a-space>
                             </div>
                             <draggable v-bind="draggableBind" v-model="two.childrenList">
-                              <template #item="{ element: three }">
+                              <template #item="{ element: three, index: threeIndex }">
-                                <div class="box">
+                                <div class="box" @mouseenter="() => three.showBtn = true" @mouseleave="() => three.showBtn = false">
-                                  <a-card>
+                                  <Icon icon="ant-design:holder-outlined"/>
-                                    <template #title>
                                   {{ one.sort }}.{{ two.sort }}.{{ three.sort }}
-                                    </template>
+                                  <a-tag class="hand" @click="viewThreePage(three)">
-                                    <template #extra>
+                                    <template v-if="three.type == 'video'"><Icon icon="ant-design:video-camera-outlined" />视频</template>
-                                      <div><a-button type="primary" danger @click="delThree($event, two, three)" class="addBtn"><Icon icon="ant-design:delete"/>删除</a-button></div>
+                                    <template v-if="three.type == 'document'"><Icon icon="ant-design:file-outlined" />文档</template>
-                                    </template>
+                                    <template v-if="three.type == 'richText'"><Icon icon="ant-design:file-text-outlined" />富文本</template>
-                                    <div class="topDiv">
+                                  </a-tag>
-                                      <template v-if="three.type == 'video'">
+                                  <span class="hand" @click="viewThreePage(three)">{{ three.title }}</span>
-                                        <!-- <j-upload v-model:value="three.filePath" maxCount="1" suffixList="avi,mov,mkv,mpeg,asf,3gp,wmv,mp4,flv,rmvb"/> video/mp4,video/webm,video/ogv-->
+                                  <span v-show="three.showBtn">
-                                        <j-upload v-model:value="three.filePath" maxCount="1" text="上传视频" accept=".mp4,.webm,.ogv" :forceAcceptVerify="true"/>
+                                    <a-space>
-                                      </template>
+                                      <a-button type="primary" size="small" title="下载" v-if="three.type == 'video' || three.type == 'document'" @click="downloadFile(three)" class="addBtn"><Icon icon="ant-design:vertical-align-bottom-outlined"/></a-button>
-                                      <template v-if="three.type == 'document'">
+                                      <a-button type="primary" size="small" title="查看" @click="viewThreePage(three)" class="addBtn"><Icon icon="ant-design:fund-view-outlined"/></a-button>
-                                        <j-upload v-model:value="three.filePath" maxCount="1"/>
+                                      <a-button type="primary" size="small" title="编辑" @click="editThreePage(two, Object.assign({},three), threeIndex)" class="addBtn"><Icon icon="ant-design:edit"/></a-button>
-                                      </template>
+                                      <a-button type="primary" size="small" title="删除" danger @click="delThree($event, two, three)" class="addBtn"><Icon icon="ant-design:delete"/></a-button>
-                                      <template v-if="three.type == 'richText'">
+                                    </a-space>
-                                        <j-editor v-if="isNotMove" v-model:value="three.richText"/>
+                                  </span>
-                                        <div v-else style="height: 400px;"></div>
-                                      </template>
-                                      <!-- <template v-if="three.type == 'classroomTest'">
-                                        随堂测试
-                                      </template>
-                                      <template v-if="three.type == 'discuss'">
-                                        讨论
-                                      </template> -->
-                                    </div>
-                                  </a-card>
                                 </div>
                               </template>
                             </draggable>
@@ -103,21 +121,48 @@
         <!-- <a-button @click="sureChange" type="primary" style="margin-top: 100px">确定</a-button> -->
       <!-- </template> -->
     </draggable>
+    <a-modal :title="threePageTitle" :width="800" :visible="threePageOpen" :maskClosable="false" @ok="threePageHandleOk" :okButtonProps="{ class: { 'jee-hidden': threePageDisableSubmit } }" @cancel="threePageHandleCancel" cancelText="关闭">
+      <a-card v-if="threePageData?.three">
+        <div>
+          标题：
+          <a-input v-if="!threePageDisableSubmit" :value="threePageData.three.title" @change="changeInput($event, threePageData.three, 'title')" @click="stop" class="ainput"/>
+          <div v-else>{{ threePageData.three.title }}</div>
         </div>
+        <div>
+          <template v-if="threePageData.three.type == 'video'">
+            <j-upload v-if="!threePageDisableSubmit" v-model:value="threePageData.three.filePath" :maxCount="1" text="上传视频" accept=".mp4,.webm,.ogv" :forceAcceptVerify="true" :isGetBiz="true" :getBizParam="{ rwbh, xqxn, wjlx: '教学单元' }"/>
+            <downloadAssembly v-else :filePath="threePageData.three.filePath"/>
+          </template>
+          <template v-if="threePageData.three.type == 'document'">
+            <j-upload v-if="!threePageDisableSubmit" v-model:value="threePageData.three.filePath" :maxCount="1" :isGetBiz="true" :getBizParam="{ rwbh, xqxn, wjlx: '教学单元' }" />
+            <downloadAssembly v-else :filePath="threePageData.three.filePath"/>
+          </template>
+          <template v-if="threePageData.three.type == 'richText' && threePageOpen">
+            <j-editor v-if="!threePageDisableSubmit" v-model:value="threePageData.three.richText"/>
+            <div v-else class="richText" v-html="threePageData.three.richText"></div>
+          </template>
+        </div>
+      </a-card>
+    </a-modal>
+  </div>
+</div>
+
 
 </template>
 
 <script lang="ts" name="jiaoXueDanYuanNeiRongIndex" setup>
   import { ref, reactive, onMounted, unref, nextTick } from 'vue';
-  import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
+  import { Input, Popover, Pagination, Empty, Affix as aAffix } from 'ant-design-vue';
   import { defHttp } from '/@/utils/http/axios';
   import { useMessage } from "/@/hooks/web/useMessage";
   import { useRouter } from 'vue-router';
-  import { randomString, simpleDebounce } from '/@/utils/common/compUtils'
+  import { randomString, simpleDebounce, getFileAccessHttpUrl } from '/@/utils/common/compUtils'
 
   import draggable from 'vuedraggable';
   import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
   import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
+  import downloadAssembly from '/@/views/zy/jiaoXueDanYuanNeiRong/downloadAssembly.vue';
+  import stuIndex from './stuIndex.vue';
 
   //当前路由信息
   const { currentRoute } = useRouter();
@@ -130,6 +175,14 @@
 
   const isNotMove = ref<boolean>(true);
   const saveLoading = ref<boolean>(false);
+  const isPreview = ref<boolean>(false);
+
+  const threePageTitle = ref<String>('详细');
+  const threePageOpen = ref<boolean>(false);
+  const threePageDisableSubmit = ref<boolean>(false);
+  const threePageData = ref<Object>(null);
+
+  const stuIndexRef = ref<any>();
 
   //公共的拖动排序组件绑定数据
   const draggableBind = ref<Object>({
@@ -154,7 +207,20 @@
 
   enum Api {
     list = '/teachingunitcontent/kcTeachingUnitContentOne/allList',
-  edit = '/teachingunitcontent/kcTeachingUnitContentOne/edit',
+    editAll = '/teachingunitcontent/kcTeachingUnitContentOne/editAll',
+
+    addOne = '/teachingunitcontent/kcTeachingUnitContentOne/add',
+    editOne = '/teachingunitcontent/kcTeachingUnitContentOne/edit',
+    delOne = '/teachingunitcontent/kcTeachingUnitContentOne/delete',
+
+    addTwo = '/teachingunitcontent/kcTeachingUnitContentTwo/add',
+    editTwo = '/teachingunitcontent/kcTeachingUnitContentTwo/edit',
+    delTwo = '/teachingunitcontent/kcTeachingUnitContentTwo/delete',
+
+    addThree = '/teachingunitcontent/kcTeachingUnitContentThree/add',
+    editThree = '/teachingunitcontent/kcTeachingUnitContentThree/edit',
+    delThree = '/teachingunitcontent/kcTeachingUnitContentThree/delete',
+
   }
 
   /**
@@ -162,23 +228,53 @@
    * @param params
    */
   const listAll = (params) => defHttp.get({ url: Api.list, params });
-  const editAll = (params) => defHttp.post({ url: Api.edit, params }, { isTransformResponse: true });
+  const editAll = (params) => defHttp.post({ url: Api.editAll, params }, { isTransformResponse: true });
+
+  const addOneFetch = (params) => defHttp.post({ url: Api.addOne, params }, { isTransformResponse: false });
+  const editOneFetch = (params) => defHttp.put({ url: Api.editOne, params }, { isTransformResponse: false });
+  const delOneFetch = (params) => defHttp.delete({ url: Api.delOne, params }, { isTransformResponse: false, joinParamsToUrl: true });
+
+  const addTwoFetch = (params) => defHttp.post({ url: Api.addTwo, params }, { isTransformResponse: false });
+  const editTwoFetch = (params) => defHttp.put({ url: Api.editTwo, params }, { isTransformResponse: false });
+  const delTwoFetch = (params) => defHttp.delete({ url: Api.delTwo, params }, { isTransformResponse: false, joinParamsToUrl: true });
+
+  const addThreeFetch = (params) => defHttp.post({ url: Api.addThree, params }, { isTransformResponse: false });
+  const editThreeFetch = (params) => defHttp.put({ url: Api.editThree, params }, { isTransformResponse: false });
+  const delThreeFetch = (params) => defHttp.delete({ url: Api.delThree, params }, { isTransformResponse: false, joinParamsToUrl: true });
 
 
   function reload() {
     loadData();
   }
 
-  function loadData() {
+  function reloadStn() {
+    stuIndexRef.value.reload();
+  }
+
+  async function loadData() {
     dataSource.value = [];
     let params = {
       rwbh,
       xqxn,
     }
-    listAll(params).then(res => {
+    await listAll(params).then(res => {
       dataRecursion(res, (x) => x._id = x.id);
       dataSource.value = res;
     });
+    nextTick(() => {
+      // setTimeout(() => {
+        expandAllTable();
+        // nextTick(() => {
+        //   expandAllTable();
+        // });
+      // }, 1000);
+    });
+  }
+
+  function expandAllTable() {
+    document.querySelectorAll('.max .ant-collapse-header').forEach(x => {
+      if(x.getAttribute('aria-expanded') == 'false') x.click()
+    });
   }
 
   //递归执行方法
@@ -197,11 +293,34 @@
     dataRecursion(dataSource.value, (x, i) => x.sort = i+1);
   }
 
+  //获取祖宗级对象
+  function getBtnEle(e, className){
+    if(e){
+      //如果一级就是，直接甩出去
+      if(e?.classList?.contains(className)){
+        return e;
+      } else {
+        //如果父节点也没有，往更父的节点查找
+        return getBtnEle(e.parentElement, className);
+      }
+      // //如果父节点也没有，往更深的
+      // if(!e.parentElement.classList.contains(className)){
+      //   //不存在
+      //   console.log('111111',e.parentElement);
+      // }else{
+      //   console.log('2222',e.parentElement);
+      //   return e.parentElement;
+      // }
+    }
+  }
+
   //创建新的节点
   function createNoneData(){
     let data = {
       //临时ID，兼容新增和修改
       _id: randomString(32),
+      rwbh,
+      xqxn,
       title: null,
       sort: 0,
       childrenList: [],
@@ -220,47 +339,108 @@
   }
 
   function addOne(){
-    dataSource.value.push(createNoneData());
+    //调用后台保存（创建个新的）
-    nextTick(() => {
+    let nowData = createNoneData();
+    dataSource.value.push(nowData);
     refreshDataSort();
-    })
+    addOneFetch(nowData).then(res => {
+      if(res.success){
+        nowData.id = res.result.id;
+        createMessage.success('添加标题成功！');
+        // nextTick(() => {
+        //   refreshDataSort();
+        // });
+      }
+    });
+  }
+
+  function editOne(one){
+    editOneFetch(one).then(res => {
+      if(res.success){
+        createMessage.success('修改标题成功！');
+      }
+    });
   }
 
   function delOne(e, one){
     stop(e);
+    //删除
+    delOneFetch({ id: one.id }).then(res => {
+      if(res.success){
         let index = dataSource.value.findIndex(x => x == one);
         if(index == -1) return;
         dataSource.value.splice(index, 1);
+        createMessage.success('删除标题成功！');
         nextTick(() => {
           refreshDataSort();
         })
       }
+    });
+  }
 
   // function insertOne(index){
   //   dataSource.value.splice(index,0, createNoneData());
   // }
 
   function addTwo(e, one){
-    stop(e);
+    let btn = getBtnEle(e.target, 'twoBtn');
-    if(one.childrenList){
+    if(btn == null){
-      one.childrenList.push(createNoneData());
+      console.error('出大事了！');
-    }else{
+      return;
-      one.childrenList = [ createNoneData() ];
+    }
+
+    let tab = null;
+    document.querySelectorAll('.maxDiv .box .ant-collapse-header').forEach(x => {
+      let twoBtn = x.querySelector('.twoBtn');
+      if(twoBtn == btn){
+        tab = x;
+      }
+    });
+    let ariaExpanded = tab.getAttribute('aria-expanded');
+
+    if(ariaExpanded == 'false') {
+    }else{
+      stop(e);
+    }
+    let nowData = createNoneData();
+    nowData.pid = one.id;
+    if(one.childrenList){
+      one.childrenList.push(nowData);
+    }else{
+      one.childrenList = [ nowData ];
     }
-    nextTick(() => {
     refreshDataSort();
-    })
+    addTwoFetch(nowData).then(res => {
+      if(res.success){
+        nowData.id = res.result.id;
+        createMessage.success('添加章节成功！');
+      }
+    });
+  }
+
+  function editTwo(two){
+    editTwoFetch(two).then(res => {
+      if(res.success){
+        createMessage.success('修改章节成功！');
+      }
+    });
   }
 
   function delTwo(e, one, two){
     stop(e);
+    delTwoFetch({ id: two.id }).then(res => {
+      if(res.success){
         let index = one.childrenList.findIndex(x => x == two);
         if(index == -1) return;
         one.childrenList.splice(index, 1);
+        createMessage.success('删除章节成功！');
         nextTick(() => {
           refreshDataSort();
         })
       }
+    });
+
+  }
 
   // function insertTwo(one, index){
   //   one.childrenList.splice(index,0, createNoneData());
@@ -273,26 +453,51 @@
     data.type = type;
     data.richText = null;
     data.filePath = null;
-    if(two.childrenList){
+    // if(two.childrenList){
-      two.childrenList.push(data);
+    //   two.childrenList.push(data);
-    }else{
+    // }else{
-      two.childrenList = [ data ];
+    //   two.childrenList = [ data ];
+    // }
+    //createMessage.success('新增成功！');
+    // nextTick(() => {
+    //   refreshDataSort();
+    // })
+    editThreePage(two, data, null);
+
   }
-    nextTick(() => {
+
-      refreshDataSort();
+  function editThreePage(two, three, threeIndex) {
-    })
+    threePageOpen.value = true;
+    threePageDisableSubmit.value = false;
+    threePageData.value = { two, three, threeIndex, };
+  }
+
+  function viewThreePage(three) {
+    threePageOpen.value = true;
+    threePageDisableSubmit.value = true;
+    threePageData.value = { three };
   }
 
   function delThree(e, two, three){
     stop(e);
+    delThreeFetch({ id: three.id }).then(res => {
+      if(res.success){
         let index = two.childrenList.findIndex(x => x == three);
         if(index == -1) return;
         two.childrenList.splice(index, 1);
+
+        createMessage.success('删除成功！');
         nextTick(() => {
           refreshDataSort();
         })
       }
+    });
+  }
 
+  function downloadFile(three) {
+    let url = getFileAccessHttpUrl(three.filePath);
+    window.open(url,"_blank");
+  }
 
   //移动结束时触发，如果未移动则不触发，刷新排序,
   function endDraggable(){
@@ -304,6 +509,65 @@
     })
   }
 
+  function threePageHandleOk(){
+    let { two, three, threeIndex, } = threePageData.value;
+    //校验
+    if(!three.title){
+      createMessage.warn('请填写标题!');
+      return;
+    } else if(three.type == 'video'){
+      if(!three.filePath){
+        createMessage.warn('请上传视频!');
+        return;
+      }
+    } else if(three.type == 'document'){
+      if(!three.filePath){
+        createMessage.warn('请上传视频!');
+        return;
+      }
+    } else if(three.type == 'richText'){
+      if(!three.richText){
+        createMessage.warn('请填写富文本!');
+        return;
+      }
+    }
+
+    if(!threeIndex && threeIndex !== 0){
+      three.pid = two.id;
+      //新增
+      if(two.childrenList){
+        two.childrenList.push(three);
+      }else{
+        two.childrenList = [ three ];
+      }
+      refreshDataSort();
+      addThreeFetch(three).then(res => {
+      if(res.success){
+        three.id = res.result.id;
+        createMessage.success('添加成功！');
+      }
+    });
+    }else{
+      //修改
+      two.childrenList[threeIndex] = three;
+      refreshDataSort();
+      editThreeFetch(three).then(res => {
+        if(res.success){
+          createMessage.success('修改成功！');
+        }
+      });
+    }
+
+
+    threePageOpen.value = false;
+
+  }
+
+  function threePageHandleCancel(){
+    threePageOpen.value = false;
+    threePageData.value = {};
+  }
+
   //按下鼠标按键后触发
   // function chooseDraggable(){
   //   // isNotMove.value = false;
@@ -355,6 +619,22 @@
 </script>
 
 <style lang="less" scoped>
+.hand {
+  cursor:pointer;
+}
+.max {
+  height: calc(100vh - 225px);
+  //height: calc(-132px + 100vh);
+  // min-height: calc(-132px + 100vh);
+  // max-height: calc(-132px + 100vh);
+  overflow: auto;
+  //overflow: hidden;
+  .maxDiv {
+    height: calc(100% - 94px);
+    overflow-y: auto;
+  }
+}
+
 .box {
   margin: .5rem 0 0 0;
   .itemTop {
@@ -363,12 +643,15 @@
 }
 
 .topButton {
-  padding-top: 1rem;
+  padding: 10px;
 }
 
 .ainput {
   width: 100%;
 }
+.ainputNoEdit {
+  border: #d9d9d9 solid 1px;
+}
 
 .inputd {
   width: calc(100% - 35px);
@@ -387,7 +670,19 @@
   width: 100%;
 }
 
-:deep(.maxDiv) .ant-collapse-header{
+.richText {
-  align-items: center;
+  max-height: 400px;
+  overflow: auto;
 }
+
+:deep(.maxDiv){
+  .ant-collapse-header{
+    align-items: center;
+    padding-bottom: 0;
+  }
+  .ant-card-body {
+    padding-top: 0;
+  }
+}
+
 </style>

src/views/zy/jiaoXueDanYuanNeiRong/index.vue.oneType

@@ -0,0 +1,393 @@
+<template>
+  <div class="topButton">
+    <a-space>
+      <a-button @click="save" :loading="saveLoading">保存</a-button>
+      <a-button @click="reload">刷新</a-button>
+      <a-button type="primary" @click="addOne()" class="addBtn" title="新增一级"><Icon icon="ant-design:plus-outlined"/>新增标题</a-button>
+    </a-space>
+  </div>
+
+  <div class="maxDiv">
+    <a-empty v-if="!dataSource || !dataSource.length"/>
+    <draggable v-bind="draggableBind" v-model="dataSource">
+      <template #item="{ element: one }">
+        <div class="box">
+          <!-- 下一层 -->
+          <a-card>
+            <a-collapse ghost expandIconPosition="right">
+              <a-collapse-panel :key="one._id">
+                <template #header>
+                  <div class="topDiv">
+                    <div>{{ one.sort }}：</div>
+                    <div class="inputd"><a-input :value="one.title" @change="changeInput($event, one, 'title')" @click="stop" class="ainput"/></div>
+                  </div>
+                </template>
+                <template #extra>
+                  <a-space>
+                    <div><a-button type="primary" @click="addTwo($event, one)" class="addBtn" title="新增二级"><Icon icon="ant-design:plus-outlined"/>新增章节</a-button></div>
+                    <div><a-button type="primary" danger @click="delOne($event, one)" class="addBtn" title="删除此项及以下"><Icon icon="ant-design:delete"/>删除</a-button></div>
+                  </a-space>
+                </template>
+                <draggable v-bind="draggableBind" v-model="one.childrenList">
+                  <template #item="{ element: two }">
+                    <div class="box">
+                      <!-- 下一层 -->
+                      <a-card>
+                        <a-collapse ghost expandIconPosition="right">
+                          <a-collapse-panel :key="two._id">
+                            <template #header>
+                              <div class="twoTopDiv">
+                                <div class="topDiv">
+                                  <div>{{ one.sort }}.{{ two.sort }}：</div>
+                                  <div class="twoInputd"><a-input :value="two.title" @change="changeInput($event, two, 'title')" @click="stop" class="ainput"/></div>
+                                </div>
+                              </div>
+                            </template>
+                            <template #extra>
+                              <div><a-button type="primary" danger @click="delTwo($event, one, two)" class="addBtn" title="删除此项及以下"><Icon icon="ant-design:delete"/>删除</a-button></div>
+                            </template>
+                            <div style="padding-top: 1rem;">
+                              <a-space>
+                                <div><a-button type="primary" @click="addThree($event, two, 'video')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>视频</a-button></div>
+                                <div><a-button type="primary" @click="addThree($event, two, 'document')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>文档</a-button></div>
+                                <div><a-button type="primary" @click="addThree($event, two, 'richText')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>富文本</a-button></div>
+                                <!-- <div><a-button type="primary" @click="addThree($event, two, 'classroomTest')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>随堂测试</a-button></div>
+                                <div><a-button type="primary" @click="addThree($event, two, 'discuss')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>讨论</a-button></div> -->
+                              </a-space>
+                            </div>
+                            <draggable v-bind="draggableBind" v-model="two.childrenList">
+                              <template #item="{ element: three }">
+                                <div class="box">
+                                  <a-card>
+                                    <template #title>
+                                      {{ one.sort }}.{{ two.sort }}.{{ three.sort }}
+                                    </template>
+                                    <template #extra>
+                                      <div><a-button type="primary" danger @click="delThree($event, two, three)" class="addBtn"><Icon icon="ant-design:delete"/>删除</a-button></div>
+                                    </template>
+                                    <div class="topDiv">
+                                      <template v-if="three.type == 'video'">
+                                        <!-- <j-upload v-model:value="three.filePath" maxCount="1" suffixList="avi,mov,mkv,mpeg,asf,3gp,wmv,mp4,flv,rmvb"/> video/mp4,video/webm,video/ogv-->
+                                        <j-upload v-model:value="three.filePath" maxCount="1" text="上传视频" accept=".mp4,.webm,.ogv" :forceAcceptVerify="true"/>
+                                      </template>
+                                      <template v-if="three.type == 'document'">
+                                        <j-upload v-model:value="three.filePath" maxCount="1"/>
+                                      </template>
+                                      <template v-if="three.type == 'richText'">
+                                        <j-editor v-if="isNotMove" v-model:value="three.richText"/>
+                                        <div v-else style="height: 400px;"></div>
+                                      </template>
+                                      <!-- <template v-if="three.type == 'classroomTest'">
+                                        随堂测试
+                                      </template>
+                                      <template v-if="three.type == 'discuss'">
+                                        讨论
+                                      </template> -->
+                                    </div>
+                                  </a-card>
+                                </div>
+                              </template>
+                            </draggable>
+                          </a-collapse-panel>
+                        </a-collapse>
+                      </a-card>
+                    </div>
+                  </template>
+                </draggable>
+              </a-collapse-panel>
+            </a-collapse>
+          </a-card>
+        </div>
+      </template>
+      <!-- <template #footer> -->
+        <!-- <a-button @click="sureChange" type="primary" style="margin-top: 100px">确定</a-button> -->
+      <!-- </template> -->
+    </draggable>
+  </div>
+
+</template>
+
+<script lang="ts" name="jiaoXueDanYuanNeiRongIndex" setup>
+  import { ref, reactive, onMounted, unref, nextTick } from 'vue';
+  import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from "/@/hooks/web/useMessage";
+  import { useRouter } from 'vue-router';
+  import { randomString, simpleDebounce } from '/@/utils/common/compUtils'
+
+  import draggable from 'vuedraggable';
+  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
+  import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
+
+  //当前路由信息
+  const { currentRoute } = useRouter();
+  const { query } = unref(currentRoute);
+  const { rwbh, xqxn, type } = query;//获取传递参数
+
+  const { createConfirm, createMessage } = useMessage();
+  const queryParam = ref<any>({});
+  const dataSource = ref<any>([]);
+
+  const isNotMove = ref<boolean>(true);
+  const saveLoading = ref<boolean>(false);
+
+  //公共的拖动排序组件绑定数据
+  const draggableBind = ref<Object>({
+    //唯一键
+    itemKey: '_id',
+    // onStart: moveDraggable,
+    // onAdd: onAddFn,
+    // onRemove: onRemoveFn,
+    // onUpdate: onUpdateFn,
+    //有效移动后触发
+    onEnd: endDraggable,
+    //鼠标按下触发
+    // onChoose: simpleDebounce(chooseDraggable, 500),
+    // onChoose: chooseDraggable,
+    //鼠标松开后触发
+    // onUnchoose: unchooseDraggable,
+    // onSort: onSortFn,
+    // onFilter: onFilterFn,
+    // onClone: onCloneFn,
+    // onMove: onMoveFn,
+  });
+
+  enum Api {
+  list = '/teachingunitcontent/kcTeachingUnitContentOne/allList',
+  edit = '/teachingunitcontent/kcTeachingUnitContentOne/edit',
+}
+
+  /**
+   * 列表接口
+   * @param params
+   */
+  const listAll = (params) => defHttp.get({ url: Api.list, params });
+  const editAll = (params) => defHttp.post({ url: Api.edit, params }, { isTransformResponse: true });
+
+
+  function reload() {
+    loadData();
+  }
+
+  function loadData() {
+    dataSource.value = [];
+    let params = {
+      rwbh,
+      xqxn,
+    }
+    listAll(params).then(res => {
+      dataRecursion(res, (x) => x._id = x.id);
+      dataSource.value = res;
+    });
+  }
+
+  //递归执行方法
+  function dataRecursion(list, fn){
+    let _list = list;
+    _list.forEach((x,i) => {
+      fn(x,i);
+      if(x.childrenList && x.childrenList.length){
+        dataRecursion(x.childrenList, fn);
+      }
+    })
+  }
+
+  //刷新数据的排序
+  function refreshDataSort(){
+    dataRecursion(dataSource.value, (x, i) => x.sort = i+1);
+  }
+
+  //创建新的节点
+  function createNoneData(){
+    let data = {
+      //临时ID，兼容新增和修改
+      _id: randomString(32),
+      title: null,
+      sort: 0,
+      childrenList: [],
+    }
+    return data;
+  }
+
+  function stop(e) {
+    e?.stopPropagation();
+  }
+
+  function changeInput(e, pdata, key) {
+    let { target } = e;
+    let { value } = target;
+    pdata[key] = value;
+  }
+
+  function addOne(){
+    dataSource.value.push(createNoneData());
+    nextTick(() => {
+      refreshDataSort();
+    })
+  }
+
+  function delOne(e, one){
+    stop(e);
+    let index = dataSource.value.findIndex(x => x == one);
+    if(index == -1) return;
+    dataSource.value.splice(index, 1);
+    nextTick(() => {
+      refreshDataSort();
+    })
+  }
+
+  // function insertOne(index){
+  //   dataSource.value.splice(index,0, createNoneData());
+  // }
+
+  function addTwo(e, one){
+    stop(e);
+    if(one.childrenList){
+      one.childrenList.push(createNoneData());
+    }else{
+      one.childrenList = [ createNoneData() ];
+    }
+    nextTick(() => {
+      refreshDataSort();
+    })
+  }
+
+  function delTwo(e, one, two){
+    stop(e);
+    let index = one.childrenList.findIndex(x => x == two);
+    if(index == -1) return;
+    one.childrenList.splice(index, 1);
+    nextTick(() => {
+      refreshDataSort();
+    })
+  }
+
+  // function insertTwo(one, index){
+  //   one.childrenList.splice(index,0, createNoneData());
+  // }
+
+  function addThree(e, two, type){
+    stop(e);
+    let data = createNoneData();
+    delete data.title;
+    data.type = type;
+    data.richText = null;
+    data.filePath = null;
+    if(two.childrenList){
+      two.childrenList.push(data);
+    }else{
+      two.childrenList = [ data ];
+    }
+    nextTick(() => {
+      refreshDataSort();
+    })
+  }
+
+  function delThree(e, two, three){
+    stop(e);
+    let index = two.childrenList.findIndex(x => x == three);
+    if(index == -1) return;
+    two.childrenList.splice(index, 1);
+    nextTick(() => {
+      refreshDataSort();
+    })
+  }
+
+
+  //移动结束时触发，如果未移动则不触发，刷新排序,
+  function endDraggable(){
+    //移动后如果有富文本编辑器则会失效，需要此法重置一下
+    isNotMove.value = false;
+    nextTick(() => {
+      isNotMove.value = true;
+      refreshDataSort();
+    })
+  }
+
+  //按下鼠标按键后触发
+  // function chooseDraggable(){
+  //   // isNotMove.value = false;
+  // }
+
+  //松开鼠标按键后触发
+  // function unchooseDraggable(){
+  //   // isNotMove.value = true;
+  // }
+
+  // function onAddFn() { console.log('onAddFn'); }
+  // function onRemoveFn() { console.log('onRemoveFn'); }
+  // function onUpdateFn() { console.log('onUpdateFn'); }
+  // function onChooseFn() { console.log('onChooseFn'); }
+  // function onUnchooseFn() { console.log('onUnchooseFn'); }
+  // function onSortFn() { console.log('onSortFn'); }
+  // function onFilterFn() { console.log('onFilterFn'); }
+  // function onCloneFn() { console.log('onCloneFn'); }
+  // function onMoveFn() { console.log('onMoveFn'); }
+
+  // //移动时触发，关闭富文本编辑器
+  // function moveDraggable() {
+  //   console.log('move');
+  //   isNotMove.value = false;
+  // }
+
+  async function save(){
+    saveLoading.value = true;
+    console.log(unref(dataSource));
+    let saveData = {
+      rwbh,
+      xqxn,
+      teachingUnitContentOneList: unref(dataSource),
+    }
+    if(!saveData.rwbh || !saveData.xqxn){
+      createMessage.error('无法保存！');
+      saveLoading.value = false;
+      return;
+    }else if(!saveData.teachingUnitContentOneList || !saveData.teachingUnitContentOneList.length){
+      createMessage.warn('请添加数据！');
+      saveLoading.value = false;
+      return;
+    }
+    await editAll(saveData);
+    saveLoading.value = false;
+  }
+
+  loadData();
+</script>
+
+<style lang="less" scoped>
+.box {
+  margin: .5rem 0 0 0;
+  .itemTop {
+    width: 100%;
+  }
+}
+
+.topButton {
+  padding-top: 1rem;
+}
+
+.ainput {
+  width: 100%;
+}
+
+.inputd {
+  width: calc(100% - 35px);
+}
+.topDiv {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.twoInputd {
+  width: calc(100% - 45px);
+}
+.twoTopDiv {
+  width: 100%;
+}
+
+:deep(.maxDiv) .ant-collapse-header{
+  align-items: center;
+}
+</style>

src/views/zy/jiaoXueDanYuanNeiRong/stuIndex.vue

@@ -75,7 +75,10 @@
                             <span class="hand" @click="viewThreePage(three)">{{ three.title }}</span>
                             <span v-show="three.showBtn">
                               <a-space>
-                                <a-button type="primary" size="small" @click="viewThreePage(three)" class="addBtn"><Icon icon="ant-design:fund-view-outlined"/></a-button>
+                                <a-button type="primary" size="small" title="下载" v-if="three.type == 'video' || three.type == 'document'" @click="downloadFile(three)" class="addBtn"><Icon icon="ant-design:vertical-align-bottom-outlined"/></a-button>
+                                <a-button type="primary" size="small" title="查看" @click="viewThreePage(three)" class="addBtn"><Icon icon="ant-design:fund-view-outlined"/></a-button>
+
+
                               </a-space>
                             </span>
 
@@ -176,7 +179,7 @@
   import { defHttp } from '/@/utils/http/axios';
   import { useMessage } from "/@/hooks/web/useMessage";
   import { useRouter } from 'vue-router';
-  import { randomString, simpleDebounce } from '/@/utils/common/compUtils'
+  import { randomString, simpleDebounce, getFileAccessHttpUrl } from '/@/utils/common/compUtils'
 
   import draggable from 'vuedraggable';
   import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
@@ -451,6 +454,12 @@
     threePageOpen.value = false;
   }
 
+  function downloadFile(three) {
+    let url = getFileAccessHttpUrl(three.filePath);
+    window.open(url,"_blank");
+  }
+
+
 
   //移动结束时触发，如果未移动则不触发，刷新排序,
   function endDraggable(){