Compare commits
No commits in common. "0a03f3465e638126a54e295be15d819f14539f41" and "4925a183231c75cf9302cc17fe8a1e3d61164945" have entirely different histories.
0a03f3465e
...
4925a18323
|
@ -26,7 +26,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, watch, nextTick, createApp, unref } from 'vue';
|
||||
import { ref, reactive, computed, watch, nextTick, createApp } from 'vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { getToken } from '/@/utils/auth';
|
||||
import { uploadUrl } from '/@/api/common/api';
|
||||
|
@ -66,10 +66,6 @@
|
|||
// 删除时是否显示确认框
|
||||
removeConfirm: propTypes.bool.def(false),
|
||||
beforeUpload: propTypes.func,
|
||||
//后加的,强制直接使用传来的beforeUpload方法
|
||||
forceBeforeUploadFn: propTypes.bool.def(true),
|
||||
//后加的,强制验证accept,目前仅支持*.jpg,*.gif之类的扩展名验证,video/*,audio/*,image/jpeg之类的暂不支持
|
||||
forceAcceptVerify: propTypes.bool.def(false),
|
||||
disabled: propTypes.bool.def(false),
|
||||
});
|
||||
|
||||
|
@ -86,7 +82,7 @@
|
|||
const isImageMode = computed(() => props.fileType === UploadTypeEnum.image);
|
||||
// 合并 props 和 attrs
|
||||
const bindProps = computed(() => {
|
||||
const bind: any = Object.assign({}, props, unref(attrs));
|
||||
const bind: any = Object.assign({}, props, attrs);
|
||||
bind.name = 'file';
|
||||
bind.listType = isImageMode.value ? 'picture-card' : 'text';
|
||||
bind.class = [bind.class, { 'upload-disabled': props.disabled }];
|
||||
|
@ -94,9 +90,6 @@
|
|||
//update-begin-author:taoyan date:20220407 for: 自定义beforeUpload return false,并不能中断上传过程
|
||||
if (!bind.beforeUpload) {
|
||||
bind.beforeUpload = onBeforeUpload;
|
||||
} else if(!bind.forceBeforeUploadFn){
|
||||
//强制使用
|
||||
bind.beforeUpload = onBeforeUpload;
|
||||
}
|
||||
//update-end-author:taoyan date:20220407 for: 自定义beforeUpload return false,并不能中断上传过程
|
||||
// 如果当前是图片上传模式,就只能上传图片
|
||||
|
@ -228,28 +221,9 @@
|
|||
return false;
|
||||
}
|
||||
}
|
||||
//扩展验证(目前仅支持扩展名验证)
|
||||
if(props.forceAcceptVerify){
|
||||
let fileName = file?.name;
|
||||
if(fileName.indexOf('.')){
|
||||
let suffix = fileName.split('.')[1];
|
||||
let fileTypes = unref(bindProps).accept;
|
||||
if(fileTypes){
|
||||
if(fileTypes.indexOf(',')){
|
||||
let typeList = fileTypes.split(',');
|
||||
if(typeList.indexOf('.' + suffix) == -1){
|
||||
createMessage.warning('请上传【*' + typeList.join(',*') + '】格式的文件');
|
||||
uploadGoOn.value = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 扩展 beforeUpload 验证
|
||||
if (typeof props.beforeUpload === 'function') {
|
||||
return props.beforeUpload(file, unref(bindProps), () => uploadGoOn.value = false );
|
||||
return props.beforeUpload(file);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
|
|
@ -62,15 +62,6 @@ const zuoye: AppRouteModule = {
|
|||
title: '公告',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'jiaoXueDanYuanNeiRong',
|
||||
name: 'jiaoXueDanYuanNeiRong',
|
||||
component: () => import('/@/views/zy/jiaoXueDanYuanNeiRong/index.vue'),
|
||||
meta: {
|
||||
title: '教学单元内容',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: 'ceshiWenjuan',
|
||||
name: 'ceshiWenjuan',
|
||||
|
@ -87,7 +78,6 @@ const zuoye: AppRouteModule = {
|
|||
title: '调查问卷',
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<template #title>教学内容</template>
|
||||
<a-menu-item key="1" @click="getGzt('kcjs')">课程介绍</a-menu-item>
|
||||
<a-menu-item key="2" @click="getGzt('gonggao')">通知公告</a-menu-item>
|
||||
<a-menu-item key="3" @click="gotoPageByName('jiaoXueDanYuanNeiRong')">教学单元内容</a-menu-item>
|
||||
<a-menu-item key="3">教学单元</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu key="sub2">
|
||||
<template #title>测验/作业</template>
|
||||
|
@ -87,10 +87,6 @@
|
|||
router.push({path:href,query: {rwbh,xqxn,type}});
|
||||
}
|
||||
|
||||
function gotoPageByName(name) {
|
||||
router.push({ name, query: { rwbh, xqxn, type } });
|
||||
}
|
||||
|
||||
//进入就加载
|
||||
onMounted(() => {
|
||||
console.log('rwbh:',rwbh);
|
||||
|
|
|
@ -1,428 +0,0 @@
|
|||
<template>
|
||||
<div class="topButton">
|
||||
<a-space>
|
||||
<a-button @click="save">保存</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-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">
|
||||
<template #item="{ element: one }">
|
||||
<div class="box">
|
||||
<!-- 下一层 -->
|
||||
<a-card>
|
||||
<a-collapse v-model:activeKey="oneActiveKey" 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>
|
||||
</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>
|
||||
</a-space>
|
||||
</template>
|
||||
<draggable @end="endDraggable2" v-model="one.childrenList" item-key="_id">
|
||||
<template #item="{ element: two }">
|
||||
<div class="box">
|
||||
<!-- 下一层 -->
|
||||
<a-card>
|
||||
<a-collapse v-model:activeKey="twoActiveKey" 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>
|
||||
</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>
|
||||
</template>
|
||||
<div style="padding-top: 1rem;">
|
||||
<a-space>
|
||||
<div><a-button type="primary" @click="addThree($event, two, 'video')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>视频</a-button></div>
|
||||
<div><a-button type="primary" @click="addThree($event, two, 'document')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>文档</a-button></div>
|
||||
<div><a-button type="primary" @click="addThree($event, two, 'richText')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>富文本</a-button></div>
|
||||
<!-- <div><a-button type="primary" @click="addThree($event, two, 'classroomTest')" class="addBtn"><Icon icon="ant-design:plus-outlined"/>随堂测试</a-button></div>
|
||||
<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">
|
||||
<template #item="{ element: three }">
|
||||
<div class="box">
|
||||
<a-card :title="three.sort + '三级内容:'">
|
||||
<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-->
|
||||
<j-upload v-model:value="three.filePath" maxCount="1" text="上传视频" accept=".mp4,.webm,.ogv" :forceAcceptVerify="true"/>
|
||||
</template>
|
||||
<template v-if="three.type == 'document'">
|
||||
<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"/>
|
||||
</template>
|
||||
<!-- <template v-if="three.type == 'classroomTest'">
|
||||
随堂测试
|
||||
</template>
|
||||
<template v-if="three.type == 'discuss'">
|
||||
讨论
|
||||
</template> -->
|
||||
</div>
|
||||
<template #extra>
|
||||
<div><a-button type="primary" danger @click="delThree($event, two, three)" class="addBtn"><Icon icon="ant-design:delete"/></a-button></div>
|
||||
</template>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</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, nextTick } from 'vue';
|
||||
import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getRandom } 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);
|
||||
const { rwbh, xqxn, type } = query;//获取传递参数
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
const queryParam = ref<any>({});
|
||||
const dataSource = ref<any>([]);
|
||||
|
||||
const editorRefs = ref<any>({});
|
||||
|
||||
function addRef(el,id) {
|
||||
editorRefs.value[id] = el;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
//递归执行方法
|
||||
function dataRecursion(list, fn){
|
||||
let _list = list;
|
||||
_list.forEach((x,i) => {
|
||||
fn(x,i);
|
||||
if(x.childrenList && x.childrenList.length){
|
||||
dataRecursion(x.childrenList, fn);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//刷新数据的排序
|
||||
function refreshDataSort(){
|
||||
dataRecursion(dataSource.value, (x, i) => x.sort = i+1);
|
||||
}
|
||||
|
||||
|
||||
function createNoneData(){
|
||||
let data = {
|
||||
_id: getRandom(10),
|
||||
name: '',
|
||||
sort: 0,
|
||||
childrenList: [],
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function stop(e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
function changeInput(e, pdata, key) {
|
||||
let { target } = e;
|
||||
let { value } = target;
|
||||
pdata[key] = value;
|
||||
}
|
||||
|
||||
function addOne(){
|
||||
dataSource.value.push(createNoneData());
|
||||
nextTick(() => {
|
||||
refreshDataSort();
|
||||
})
|
||||
}
|
||||
|
||||
function delOne(e, one){
|
||||
stop(e);
|
||||
let index = dataSource.value.findIndex(x => x == one);
|
||||
if(index == -1) return;
|
||||
dataSource.value.splice(index, 1);
|
||||
nextTick(() => {
|
||||
refreshDataSort();
|
||||
})
|
||||
}
|
||||
|
||||
// function insertOne(index){
|
||||
// dataSource.value.splice(index,0, createNoneData());
|
||||
// }
|
||||
|
||||
function addTwo(e, one){
|
||||
stop(e);
|
||||
one.childrenList.push(createNoneData());
|
||||
nextTick(() => {
|
||||
refreshDataSort();
|
||||
})
|
||||
}
|
||||
|
||||
function delTwo(e, one, two){
|
||||
stop(e);
|
||||
let index = one.childrenList.findIndex(x => x == two);
|
||||
if(index == -1) return;
|
||||
one.childrenList.splice(index, 1);
|
||||
nextTick(() => {
|
||||
refreshDataSort();
|
||||
})
|
||||
}
|
||||
|
||||
// function insertTwo(one, index){
|
||||
// one.childrenList.splice(index,0, createNoneData());
|
||||
// }
|
||||
|
||||
function addThree(e, two, type){
|
||||
stop(e);
|
||||
let data = createNoneData();
|
||||
data.type = type;
|
||||
data.richText = '';
|
||||
data.filePath = '';
|
||||
two.childrenList.push(data);
|
||||
nextTick(() => {
|
||||
refreshDataSort();
|
||||
})
|
||||
}
|
||||
|
||||
function delThree(e, two, three){
|
||||
stop(e);
|
||||
let index = two.childrenList.findIndex(x => x == three);
|
||||
if(index == -1) return;
|
||||
two.childrenList.splice(index, 1);
|
||||
nextTick(() => {
|
||||
refreshDataSort();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function endDraggable(evt){
|
||||
|
||||
console.log(`🚀 -----------------------------🚀`);
|
||||
console.log(`🚀 ~ endDraggable ~ evt:`, evt);
|
||||
console.log(`🚀 -----------------------------🚀`);
|
||||
|
||||
nextTick(() => {
|
||||
refreshDataSort();
|
||||
})
|
||||
}
|
||||
|
||||
function moveDraggable(...d) {
|
||||
|
||||
console.log(`🚀 --------------------------------🚀`);
|
||||
console.log(`🚀 ~ moveDraggable ~ ...d:`, ...d, editorRefs);
|
||||
console.log(`🚀 --------------------------------🚀`);
|
||||
}
|
||||
|
||||
function save(){
|
||||
console.log(unref(dataSource));
|
||||
}
|
||||
|
||||
loadData();
|
||||
</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;
|
||||
}
|
||||
|
||||
|
||||
.topButton {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.ainput {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inputd {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
.topDiv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.twoInputd {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
.twoTopDiv {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.maxDiv) .ant-collapse-header{
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue