2024年5月16日 完善教学单元内容维护

src/views/zy/jiaoXueDanYuanNeiRong/index.vue

@@ -1,85 +1,50 @@
 <template>
   <div class="topButton">
     <a-space>
-      <a-button @click="save">保存</a-button>
+      <a-button @click="save" :loading="saveLoading">保存</a-button>
       <a-button @click="reload">刷新</a-button>
-      <a-button type="primary" @click="addOne()" class="addBtn"><Icon icon="ant-design:plus-outlined"/></a-button>
+      <a-button type="primary" @click="addOne()" class="addBtn" title="新增一级"><Icon icon="ant-design:plus-outlined"/></a-button>
     </a-space>
   </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> -->
-
-
-
   <div class="maxDiv">
-    <draggable @move="moveDraggable" @end="endDraggable" v-model="dataSource" item-key="_id">
+    <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 v-model:activeKey="oneActiveKey" ghost expandIconPosition="right">
+            <a-collapse ghost expandIconPosition="right">
               <a-collapse-panel :key="one._id">
                 <template #header>
                   <div class="topDiv">
-                    <div>{{ one.sort }}一级标题:</div>
+                    <div>{{ one.sort }}：</div>
-                    <div class="inputd"><a-input :value="one.name" @change="changeInput($event, one, 'name')" @click="stop" class="ainput"/></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"><Icon icon="ant-design:plus-outlined"/></a-button></div>
+                    <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"><Icon icon="ant-design:delete"/></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 @end="endDraggable2" v-model="one.childrenList" item-key="_id">
+                <draggable v-bind="draggableBind" v-model="one.childrenList">
                   <template #item="{ element: two }">
                     <div class="box">
                       <!-- 下一层 -->
                       <a-card>
-                        <a-collapse v-model:activeKey="twoActiveKey" ghost expandIconPosition="right">
+                        <a-collapse ghost expandIconPosition="right">
                           <a-collapse-panel :key="two._id">
                             <template #header>
                               <div class="twoTopDiv">
                                 <div class="topDiv">
-                                  <div>{{ two.sort }}二级标题:</div>
+                                  <div>{{ one.sort }}.{{ two.sort }}：</div>
-                                  <div class="twoInputd"><a-input :value="two.name" @change="changeInput($event, two, 'name')" @click="stop" class="ainput"/></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"><Icon icon="ant-design:delete"/></a-button></div>
+                              <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>
@@ -90,10 +55,13 @@
                                 <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 @end="endDraggable" v-model="two.childrenList" item-key="_id">
+                            <draggable v-bind="draggableBind" v-model="two.childrenList">
                               <template #item="{ element: three }">
                                 <div class="box">
-                                  <a-card :title="three.sort + '三级内容:'">
+                                  <a-card>
+                                    <template #title>
+                                      {{ one.sort }}.{{ two.sort }}.{{ three.sort }}
+                                    </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-->
@@ -103,8 +71,8 @@
                                         <j-upload v-model:value="three.filePath" maxCount="1"/>
                                       </template>
                                       <template v-if="three.type == 'richText'">
-                                        -{{ three.richText }}-
+                                        <j-editor v-if="isNotMove" v-model:value="three.richText"/>
-                                        <j-editor :ref="el => addRef(el, three._id)" v-model:value="three.richText" :disabled="disabled"/>
+                                        <div v-else style="height: 400px;"></div>
                                       </template>
                                       <!-- <template v-if="three.type == 'classroomTest'">
                                         随堂测试
@@ -137,31 +105,6 @@
     </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>
@@ -170,15 +113,12 @@
   import { defHttp } from '/@/utils/http/axios';
   import { useMessage } from "/@/hooks/web/useMessage";
   import { useRouter } from 'vue-router';
-  import { getRandom } from '/@/utils/common/compUtils'
+  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';
 
-
-  //src\components\Form\src\jeecg\components\JEditor.vue
-
   //当前路由信息
   const { currentRoute } = useRouter();
   const { query } = unref(currentRoute);
@@ -188,65 +128,57 @@
   const queryParam = ref<any>({});
   const dataSource = ref<any>([]);
 
-  const editorRefs = ref<any>({});
+  const isNotMove = ref<boolean>(true);
+  const saveLoading = ref<boolean>(false);
 
-  function addRef(el,id) {
+  //公共的拖动排序组件绑定数据
-    editorRefs.value[id] = el;
+  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 });
 
-  // dataSource.value = [
-  // ];
 
   function reload() {
     loadData();
   }
+
   function loadData() {
-    let rdata = [
+    dataSource.value = [];
-      {
+    let params = {
-        "id": "5079",
+      rwbh,
-        "name": "2qweqwe",
+      xqxn,
-        "sort": 1,
-        "childrenList": []
-      },
-      {
-        "id": "5643",
-        "name": "qweqwe",
-        "sort": 2,
-        "childrenList": [
-          {
-            "id": "3620",
-            "name": "",
-            "sort": 1,
-            "childrenList": [
-              {
-                "id": "564311",
-                "sort": 1,
-                "type": "video",
-                filePath: null,
-                richText: null,
-              },
-              {
-                "id": "5643112",
-                "sort": 2,
-                "type": "richText",
-                filePath: null,
-                richText: null,
-              },
-            ]
-          },
-          {
-            "id": "2937",
-            "name": "",
-            "sort": 2,
-            "childrenList": []
     }
-        ]
+    listAll(params).then(res => {
-      }
+      dataRecursion(res, (x) => x._id = x.id);
-    ];
+      dataSource.value = res;
-
+    });
-    dataRecursion(rdata, (x) => x._id = x.id);
-
-    dataSource.value = rdata;
   }
 
   //递归执行方法
@@ -265,11 +197,12 @@
     dataRecursion(dataSource.value, (x, i) => x.sort = i+1);
   }
 
-
+  //创建新的节点
   function createNoneData(){
     let data = {
-      _id: getRandom(10),
+      //临时ID，兼容新增和修改
-      name: '',
+      _id: randomString(32),
+      title: null,
       sort: 0,
       childrenList: [],
     }
@@ -277,7 +210,7 @@
   }
 
   function stop(e) {
-    e.stopPropagation();
+    e?.stopPropagation();
   }
 
   function changeInput(e, pdata, key) {
@@ -309,7 +242,11 @@
 
   function addTwo(e, one){
     stop(e);
+    if(one.childrenList){
       one.childrenList.push(createNoneData());
+    }else{
+      one.childrenList = [ createNoneData() ];
+    }
     nextTick(() => {
       refreshDataSort();
     })
@@ -332,10 +269,15 @@
   function addThree(e, two, type){
     stop(e);
     let data = createNoneData();
+    delete data.title;
     data.type = type;
-    data.richText = '';
+    data.richText = null;
-    data.filePath = '';
+    data.filePath = null;
+    if(two.childrenList){
       two.childrenList.push(data);
+    }else{
+      two.childrenList = [ data ];
+    }
     nextTick(() => {
       refreshDataSort();
     })
@@ -352,26 +294,61 @@
   }
 
 
-  function endDraggable(evt){
+  //移动结束时触发，如果未移动则不触发，刷新排序,
-
+  function endDraggable(){
-    console.log(`🚀 -----------------------------🚀`);
+    //移动后如果有富文本编辑器则会失效，需要此法重置一下
-    console.log(`🚀 ~ endDraggable ~ evt:`, evt);
+    isNotMove.value = false;
-    console.log(`🚀 -----------------------------🚀`);
-
     nextTick(() => {
+      isNotMove.value = true;
       refreshDataSort();
     })
   }
 
-  function moveDraggable(...d) {
+  //按下鼠标按键后触发
+  // function chooseDraggable(){
+  //   // isNotMove.value = false;
+  // }
 
-    console.log(`🚀 --------------------------------🚀`);
+  //松开鼠标按键后触发
-    console.log(`🚀 ~ moveDraggable ~ ...d:`, ...d, editorRefs);
+  // function unchooseDraggable(){
-    console.log(`🚀 --------------------------------🚀`);
+  //   // isNotMove.value = true;
-  }
+  // }
 
-  function save(){
+  // 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();
@@ -385,18 +362,6 @@
   }
 }
 
-
-.oneCard {
-  margin: .5rem 0 0 0;
-}
-.oenAddBtn {
-  margin-top: .5rem;
-}
-.oneInput {
-  margin-bottom: .5rem;
-}
-
-
 .topButton {
   padding-top: 1rem;
 }
@@ -406,7 +371,7 @@
 }
 
 .inputd {
-  width: calc(100%  - 100px);
+  width: calc(100% - 35px);
 }
 .topDiv {
   width: 100%;
@@ -416,7 +381,7 @@
   align-items: center;
 }
 .twoInputd {
-  width: calc(100%  - 100px);
+  width: calc(100% - 45px);
 }
 .twoTopDiv {
   width: 100%;