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

<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>