yangjun
/
dbsd_kczx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
bai 2024-05-16 20:34:48 +08:00
parent 663bf50053
commit d8f711bea9
1 changed files with 133 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
src/views/zy/jiaoXueDanYuanNeiRong/index.vue
View File

@ -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 class="inputd"><a-input :value="one.name" @change="changeInput($event, one, 'name')" @click="stop" class="ainput"/></div>
<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"><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" @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 @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 class="twoInputd"><a-input :value="two.name" @change="changeInput($event, two, 'name')" @click="stop" class="ainput"/></div>
<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"><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 :ref="el => addRef(el, three._id)" v-model:value="three.richText" :disabled="disabled"/>
<j-editor v-if="isNotMove" v-model:value="three.richText"/>
<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 = [
{
"id": "5079",
"name": "2qweqwe",
"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": []
}
]
}
];
dataRecursion(rdata, (x) => x._id = x.id);
dataSource.value = rdata;
dataSource.value = [];
let params = {
rwbh,
xqxn,
}
listAll(params).then(res => {
dataRecursion(res, (x) => x._id = x.id);
dataSource.value = res;
});
}
//递归执行方法
@ -265,11 +197,12 @@
dataRecursion(dataSource.value, (x, i) => x.sort = i+1);
}
//创建新的节点
function createNoneData(){
let data = {
_id: getRandom(10),
name: '',
//临时ID，兼容新增和修改
_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);
one.childrenList.push(createNoneData());
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.filePath = '';
two.childrenList.push(data);
data.richText = null;
data.filePath = null;
if(two.childrenList){
two.childrenList.push(data);
}else{
two.childrenList = [ data ];
}
nextTick(() => {
refreshDataSort();
})
@ -352,26 +294,61 @@
}
function endDraggable(evt){
console.log(`🚀 -----------------------------🚀`);
console.log(`🚀 ~ endDraggable ~ evt:`, evt);
console.log(`🚀 -----------------------------🚀`);
//移动结束时触发，如果未移动则不触发，刷新排序,
function endDraggable(){
//移动后如果有富文本编辑器则会失效，需要此法重置一下
isNotMove.value = false;
nextTick(() => {
isNotMove.value = true;
refreshDataSort();
})
}
function moveDraggable(...d) {
//按下鼠标按键后触发
// function chooseDraggable(){
// // isNotMove.value = false;
// }
console.log(`🚀 --------------------------------🚀`);
console.log(`🚀 ~ moveDraggable ~ ...d:`, ...d, editorRefs);
console.log(`🚀 --------------------------------🚀`);
}
//松开鼠标按键后触发
// function unchooseDraggable(){
// // 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%;