2024年5月14日 新增功能

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

@@ -62,6 +62,14 @@ const zuoye: AppRouteModule = {
         title: '公告',
       },
     },
+    {
+      path: 'jiaoXueDanYuanNeiRong',
+      name: 'jiaoXueDanYuanNeiRong',
+      component: () => import('/@/views/zy/jiaoXueDanYuanNeiRong/index.vue'),
+      meta: {
+        title: '教学单元内容',
+      },
+    },
 
     {
       path: 'dqkcWenjuan',

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

@@ -11,7 +11,7 @@
                     <template #title>教学内容</template>
                     <a-menu-item key="1">课程介绍</a-menu-item>
                     <a-menu-item key="2" @click="getGzt('gonggao')">公告</a-menu-item>
-                    <a-menu-item key="3">教学单元内容</a-menu-item>
+                    <a-menu-item key="3" @click="gotoPageByName('jiaoXueDanYuanNeiRong')">教学单元内容</a-menu-item>
                   </a-sub-menu>
                   <a-sub-menu key="sub2">
                     <template #title>测验/作业</template>
@@ -75,6 +75,10 @@
     router.push({path:href,query: {rwbh,xqxn,type}});
   }
 
+  function gotoPageByName(name) {
+    router.push({ name, query: { rwbh, xqxn, type } });
+  }
+
   //进入就加载
   onMounted(() => {
     console.log('rwbh:',rwbh);

src/views/zy/jiaoXueDanYuanNeiRong/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <div><a-button @click="save">保存</a-button></div>
+  </div>
+
+  <!-- <div v-for="(one, onei) in dataSource" :key="onei" class="oneCard localCard">
+    <a-card :title="onei+1">
+      <div style="background: #f0f2f5;">
+        <div class="oneInput">
+          <a-input v-model:value="one.name"/>
+        </div>
+        <div v-for="(two, twoi) in one.childrenList" :key="twoi" class="oneCard localCard">
+          <a-card :title="twoi+1">
+            <div style="background: #f0f2f5;">
+              <div class="oneInput">
+                <a-input v-model:value="two.name"/>
+              </div>
+              <div v-for="(three, threei) in two.childrenList" :key="threei" class="oneCard localCard">
+                <a-card :title="threei+1">
+                  <div style="background: #f0f2f5;">
+                    <div class="oneInput">
+                      <a-input v-model:value="two.name"/>
+                    </div>
+                  </div>
+                </a-card>
+                <a-button v-if="!three.childrenList?.length" type="dashed" block @click="insertThree(two, threei)"><Icon icon="ant-design:arrow-down-outlined"/><Icon icon="ant-design:plus-outlined"/>insertThree</a-button>
+              </div>
+              <a-button type="dashed" block @click="addThree(two)" class="oenAddBtn"><Icon icon="ant-design:plus-outlined"/>addThree</a-button>
+            </div>
+          </a-card>
+          <a-button v-if="!two.childrenList?.length" type="dashed" block @click="insertTwo(one, twoi)"><Icon icon="ant-design:arrow-down-outlined"/><Icon icon="ant-design:plus-outlined"/>insertTwo</a-button>
+        </div>
+      </div>
+      <a-button type="dashed" block @click="addTwo(one)" class="oenAddBtn"><Icon icon="ant-design:plus-outlined"/>addTwo</a-button>
+    </a-card>
+    <a-button v-if="!one.childrenList?.length" type="dashed" block @click="insertOne(one, onei)"><Icon icon="ant-design:arrow-down-outlined"/><Icon icon="ant-design:plus-outlined"/>insertOne</a-button>
+  </div>
+  <a-button type="dashed" block @click="addOne()" class="oenAddBtn"><Icon icon="ant-design:plus-outlined"/>addOne</a-button> -->
+
+
+  <a-button type="primary" @click="addOne()" class="addBtn"><Icon icon="ant-design:plus-outlined"/>addOne</a-button>
+  <div>
+    <draggable v-model="dataSource" item-key="id">
+      <template #item="{ element: one }">
+        <div class="box">
+          <a-card>
+            <div class="itemTop">
+              <div>一级标题:</div>
+              <div><a-input v-modal="one.name" /></div>
+            </div>
+          </a-card>
+          <!-- 下一层 -->
+          <a-card>
+            <div>
+              <a-button type="primary" @click="addTwo(one)" class="addBtn"><Icon icon="ant-design:plus-outlined"/>addTwo</a-button>
+            </div>
+            <draggable v-model="one.childrenList" item-key="id">
+              <template #item="{ element: two }">
+                <div class="box">
+                  <a-card>
+                    <div class="itemTop">
+                      <div>二级标题:</div>
+                      <div><a-input v-modal="two.name" /></div>
+                    </div>
+                  </a-card>
+                  <!-- 下一层 -->
+                  <a-card>
+                    <div>
+                      <a-space>
+                        <a-button type="primary" @click="addThree(two)" class="addBtn"><Icon icon="ant-design:plus-outlined"/>视频</a-button>
+                        <a-button type="primary" @click="addThree(two)" class="addBtn"><Icon icon="ant-design:plus-outlined"/>文档</a-button>
+                        <a-button type="primary" @click="addThree(two)" class="addBtn"><Icon icon="ant-design:plus-outlined"/>富文本</a-button>
+                        <a-button type="primary" @click="addThree(two)" class="addBtn"><Icon icon="ant-design:plus-outlined"/>随堂测试</a-button>
+                        <a-button type="primary" @click="addThree(two)" class="addBtn"><Icon icon="ant-design:plus-outlined"/>讨论</a-button>
+                      </a-space>
+                    </div>
+                    <draggable v-model="two.childrenList" item-key="id">
+                      <template #item="{ element: three }">
+                        <div class="box">
+                          <a-card>
+                            <div class="itemTop">
+                              <div>三级标题:</div>
+                              <div><a-input v-modal="three.name" /></div>
+                            </div>
+                          </a-card>
+
+                        </div>
+                      </template>
+                    </draggable>
+                  </a-card>
+
+                </div>
+              </template>
+            </draggable>
+          </a-card>
+        </div>
+      </template>
+      <template #footer>
+        <a-button @click="sureChange" type="primary" style="margin-top: 100px">确定</a-button>
+      </template>
+    </draggable>
+  </div>
+
+
+  <!-- <a-card >
+    <div style="background: #f0f2f5;">
+      <div class="oneInput">
+        <a-input v-model:value="one.name"/>
+      </div>
+      <a-card v-for="(two, twoi) in one.childrenList" :key="twoi">
+        <a-input v-model:value="two.name"/>
+        <a-card v-for="(three, threei) in two.childrenList" :key="threei">
+          <a-input v-model:value="three.name"/>
+        </a-card>
+        <a-button type="dashed" block @click="addThree(two)">
+          <Icon icon="ant-design:plus-outlined"/>
+        </a-button>
+
+      </a-card>
+      <a-button type="dashed" block @click="addTwo(one)">
+        <Icon icon="ant-design:plus-outlined"/>
+      </a-button>
+    </div>
+  </a-card>
+  <a-button type="dashed" block @click="addOne()" class="oenAddBtn">
+    <Icon icon="ant-design:plus-outlined"/>
+  </a-button> -->
+
+</template>
+
+<script lang="ts" name="jiaoXueDanYuanNeiRongIndex" setup>
+  import { ref, reactive, onMounted, unref } from 'vue';
+  import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
+  import draggable from 'vuedraggable';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from "/@/hooks/web/useMessage";
+  import { useRouter } from 'vue-router';
+  import { getRandom } from '/@/utils/common/compUtils'
+
+  //当前路由信息
+  const { currentRoute } = useRouter();
+  const { query } = unref(currentRoute);
+  const { rwbh, xqxn, type } = query;//获取传递参数
+
+  const { createConfirm, createMessage } = useMessage();
+  const queryParam = ref<any>({});
+  const dataSource = ref<any>([]);
+
+  // dataSource.value = [
+  // ];
+
+  function createNoneData(){
+    let data = {
+      id: getRandom(10),
+      name: '',
+      childrenList: [],
+    }
+    return data;
+  }
+
+  function addOne(){
+    dataSource.value.push(createNoneData());
+  }
+
+  function insertOne(index){
+    dataSource.value.splice(index,0, createNoneData());
+  }
+
+  function addTwo(one){
+    one.childrenList.push(createNoneData());
+  }
+
+  function insertTwo(one, index){
+    one.childrenList.splice(index,0, createNoneData());
+  }
+
+  function addThree(two){
+    two.childrenList.push(createNoneData());
+  }
+
+  function insertThree(two, index){
+    two.childrenList.splice(index,0, createNoneData());
+  }
+
+  function save(){
+    console.log(unref(dataSource));
+  }
+
+
+  // const mockData = [
+  //   { id: '000', sort: 0, filePath: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg' },
+  //   { id: '111', sort: 1, filePath: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg' },
+  //   { id: '222', sort: 2, filePath: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg' },
+  //   { id: '333', sort: 3, filePath: 'https://static.jeecg.com/temp/国炬软件logo_1606575029126.png' },
+  //   { id: '444', sort: 4, filePath: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg' },
+  // ];
+
+  //数据集
+  // const dataArr = ref(mockData);
+  // //原始数据
+  // const oldDateSource = ref(mockData);
+  // //更改后的数据
+  // const newDateSource = ref([]);
+
+  /**
+   * 拖动结束事件
+   * @param evt
+   */
+  function end(evt) {
+    console.log('拖动前的位置' + evt.oldIndex);
+    console.log('拖动后的位置' + evt.newIndex);
+  }
+
+  /**
+   * 确认更改事件
+   * @param evt
+   */
+  function sureChange() {
+    for (let i = 0; i < unref(dataArr).length; i++) {
+      dataArr.value[i].sort = i;
+    }
+    newDateSource.value = unref(dataArr);
+  }
+
+
+  onMounted(() => {
+  });
+
+</script>
+
+<style lang="less" scoped>
+.box {
+  margin: .5rem 0 0 0;
+  .itemTop {
+    width: 100%;
+  }
+}
+
+
+.oneCard {
+  margin: .5rem 0 0 0;
+}
+.oenAddBtn {
+  margin-top: .5rem;
+}
+.oneInput {
+  margin-bottom: .5rem;
+}
+</style>