2024年5月14日 新增功能
This commit is contained in:
parent
e07069e6bb
commit
c9fdb7dc13
|
|
@ -62,6 +62,14 @@ const zuoye: AppRouteModule = {
|
||||||
title: '公告',
|
title: '公告',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'jiaoXueDanYuanNeiRong',
|
||||||
|
name: 'jiaoXueDanYuanNeiRong',
|
||||||
|
component: () => import('/@/views/zy/jiaoXueDanYuanNeiRong/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '教学单元内容',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: 'dqkcWenjuan',
|
path: 'dqkcWenjuan',
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<template #title>教学内容</template>
|
<template #title>教学内容</template>
|
||||||
<a-menu-item key="1">课程介绍</a-menu-item>
|
<a-menu-item key="1">课程介绍</a-menu-item>
|
||||||
<a-menu-item key="2" @click="getGzt('gonggao')">公告</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>
|
||||||
<a-sub-menu key="sub2">
|
<a-sub-menu key="sub2">
|
||||||
<template #title>测验/作业</template>
|
<template #title>测验/作业</template>
|
||||||
|
|
@ -75,6 +75,10 @@
|
||||||
router.push({path:href,query: {rwbh,xqxn,type}});
|
router.push({path:href,query: {rwbh,xqxn,type}});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function gotoPageByName(name) {
|
||||||
|
router.push({ name, query: { rwbh, xqxn, type } });
|
||||||
|
}
|
||||||
|
|
||||||
//进入就加载
|
//进入就加载
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log('rwbh:',rwbh);
|
console.log('rwbh:',rwbh);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue