Skip to content

C
course_creation
提交 44e735fe authored 作者: 蔡芬's avatar 蔡芬
浏览文件
操作

2

上级 cc49cb8a
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 576 行增加 和 75 行删除
src/assets/css/common.less
浏览文件 @ 44e735fe
...@@ -17,6 +17,14 @@ ul { ...@@ -17,6 +17,14 @@ ul {
&:after { display: block; content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background-color: #eee; } &:after { display: block; content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background-color: #eee; }
} }
} }
.aloneBlock {
margin: 5px 0;
border: 1px solid #eee;
padding: 10px;
&:hover {
box-shadow: 1px 1px 1px rgba(0,0,0,0.3), -1px -1px 1px rgba(0,0,0,0.2);
}
}
.margin { .margin {
&_15_0 {margin: 15px 0;} &_15_0 {margin: 15px 0;}
} }
...@@ -32,6 +40,9 @@ ul { ...@@ -32,6 +40,9 @@ ul {
.height { .height {
&_100p {height: 100%;} &_100p {height: 100%;}
} }
.color {
&_red {color: red;}
}
.bgc { .bgc {
&_ccc {background-color: #ccc;} &_ccc {background-color: #ccc;}
} }
src/components/common/imageUpload.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div>
<h6>小标题</h6>
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
`<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
disabled: false
};
},
methods: {
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
}
}
}
</script>
<style>
</style>
\ No newline at end of file
src/components/common/numberInput.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div>
<label>{{label}}</label>
<!-- $attrs可以获取来自父组件传过来的值，并展开放在当前标签上 -->
<input type="number" name="" id="" v-bind="$attrs" :value="value" @input="inputHandle">
</div>
</template>
<script>
export default {
props: {
label: String,
value: [Number,String]
},
methods: {
inputHandle(e) {
console.log(e.target.value, this.value)
this.$emit('input', e.target.value);
//分发校验事件
// this.$parent.$emit('validate');
}
},
}
</script>
<style>
</style>
\ No newline at end of file
src/components/common/richEditor.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div>
富文本框
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/components/common/selectField.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div>
<h6>{{label}}</h6>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
props: {
label: String,
value: [Number,String]
},
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
}
}
}
</script>
<style>
</style>
\ No newline at end of file
src/components/common/simpleInput.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div>
<p>{{detail.title}}</p>
<div class="edit-title">
<div contenteditable="true" class="edit-title-inner" :id="detail.id" :style="detail.style">
{{detail.default}}
<div class="edit-title-tools displaynone" contenteditable="false">
<span @click="tap('bold')">B</span>
<span @click="tap('italic')">I</span>
<span @click="tap('underline')">U</span>
<span @click="tap('colorpicker')">C</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
detail: {
type:Object,
default: function() {
return {
style: {
color:'#000',
'font-weight':'normal',
'text-decoration': 'none',
'font-style': 'normal',
}
}
}
},
name: String, //属性名
},
data() {
return {
};
},
methods: {
tap(type) {
console.log('tap',type)
switch(type) {
case "bold":
this.toggleStyle('font-weight','bold','normal');
break;
case "italic":
this.toggleStyle('font-style','italic','normal');
break;
case "underline":
this.toggleStyle('text-decoration','underline','none');
break;
case "colorpicker":
// this.toggleStyle('colorpicker','underline','none');
break;
}
console.log(this.detail)
},
toggleStyle(styleName,selVal,defVal) {
this.detail.style[styleName] = this.detail.style[styleName] != selVal ? selVal : defVal;
},
},
}
</script>
<style lang="less" scoped>
.edit-title {
position: relative;
margin-top: 5px;
}
.edit-title-inner {
position: relative;
box-sizing: border-box;
height: 100%;
padding: 10px;
height: auto;
&:active,&:focus-visible{
outline: rosybrown auto 1px;
}
&:active > .edit-title-tools,
&:focus-visible > .edit-title-tools{
display: block;
}
}
.edit-title-tools {
position: absolute;
bottom: -100%;
color:#000;
font-weight: normal;
font-style: normal;
text-decoration: none;
cursor: pointer;
>span {
padding: 5px;
background-color: #eee;
}
}
</style>
\ No newline at end of file
src/components/scaffold/fullpage.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div>
<div>
是否显示弹窗 {{showPop}}
</div>
<TopHead :detail="detail"></TopHead>
<TopBody :list="articleList" @addArticle="addArticle"></TopBody>
<el-drawer
:title="drawerSet.title"
:visible.sync="drawerSet.visible"
:direction="drawerSet.direction"
:before-close="handleClose">
<form action="false" :model="ruleForm">
<el-tabs v-model="drawerSet.activeName" @tab-click="handleClick">
<el-tab-pane v-for="(pitem,pind) in tabList" :key="pitem.id" :name="pind">
<span slot="label"><i class="el-icon-date"></i> {{pitem.tab_group_name}}</span>
<div v-for="sitem in pitem.setting_list" :key="sitem.id">
<div v-if="sitem.properties">
<h4 >{{sitem.title}}</h4>
<div v-for="ritem in sitem.properties" :key="ritem.id">
<SimpleInput v-if="ritem.display == 1 && ritem['form_type'] == 'simpleInput'" :detail="ritem" :name="ritem.properties_name" ></SimpleInput>
<RichEditor v-else-if="ritem.display == 1 && ritem['form_type'] == 'richText'"></RichEditor>
<NumberInput v-else-if="ritem.display == 1 && ritem['form_type'] == 'number'" :label="ritem.title" v-model="ruleForm[ritem.properties_name]" @input="changeVal"></NumberInput>
<!-- <SelectField v-else-if="ritem.display == 1 && ritem['form_type'] == 'Select'" :label="ritem.title" v-model="ruleForm[ritem.properties_name]"></SelectField> -->
<el-select v-else-if="ritem.display == 1 && ritem['form_type'] == 'Select'"
v-model="ruleForm[ritem.properties_name]" placeholder="请选择">
<el-option
v-for="item in ritem.enum"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<ImageUpload v-else-if="ritem.display == 1 && ritem['form_type'] == 'Asset'"></ImageUpload>
</div>
</div>
<SimpleInput v-else-if="sitem['form_type'] == 'simpleInput'" :detail="sitem" :name="sitem.properties_name" ></SimpleInput>
<RichEditor v-else-if="sitem['form_type'] == 'richText'" :detail="sitem" :name="sitem.properties_name" ></RichEditor>
</div>
</el-tab-pane>
</el-tabs>
</form>
</el-drawer>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import TopHead from '@/components/scaffold/tophead.vue';
import TopBody from '@/components/scaffold/tobody.vue';
import SimpleInput from '@/components/common/simpleInput.vue';
import RichEditor from '@/components/common/richEditor.vue';
import NumberInput from '@/components/common/numberInput.vue';
import SelectField from '@/components/common/selectField.vue';
import ImageUpload from '@/components/common/imageUpload.vue';
export default {
props: {
detail: Object,
children: Array,
},
components:{TopHead, TopBody, SimpleInput, RichEditor, NumberInput, SelectField, ImageUpload},
data() {
return {
drawerSet: {
direction: "rtl", //从右往左
visible: false, //是否显示
title: "",
activeName: 0
},
articleList: [],
ruleForm:{},
};
},
computed: {
...mapState({ showPop:state=>state.showPop, popDetail: state=>state.popDetail }),
tabList() {
return this.popDetail && this.popDetail.tabgroup_list || [];
},
},
watch: {
showPop(n,o) {
if(!!n) { //打开
this.openFrame();
return;
}
// 关闭
}
},
mounted() {
this.articleList = this.children;
},
methods: {
...mapMutations(['closePop']),
addArticle(obj) {
this.articleList.push(obj);
},
openFrame() {
let openType = this.popDetail.type;
switch(openType) {
case "right":
this.drawerSet.title = this.popDetail.title;
this.drawerSet.visible = true;
break;
case "center":
//待处理 中间弹窗
break;
}
},
handleClose(done) {
//关闭右侧弹窗
this.closePop();
done();
},
handleClick(tab, event) {
console.log(tab, event);
},
changeVal(value) {
console.log(value)
console.log(this.ruleForm)
console.log(this.tabList)
}
},
}
</script>
<style>
</style>
\ No newline at end of file
src/components/scaffold/toarticle.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div class="aloneBlock">
<p class="color_red">章节标题</p>
<ToBlock v-for="item in list" :key="item.id"></ToBlock>
<el-button @click="addBlock">添加组件</el-button>
</div>
</template>
<script>
import ToBlock from './toblock.vue';
export default {
props:{
list: Array,
},
components:{ ToBlock },
data() {
return {
// blockList: [],
demoBlock:{
title: "组块标题",
body: "",
instruction:"",
},
};
},
mounted() {
// this.blockList = this.list;
},
methods: {
addBlock() {
console.log('添加组件')
this.$emit('addBlock',this.demoBlock)
},
},
}
</script>
<style>
</style>
\ No newline at end of file
src/components/scaffold/toblock.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div class="aloneBlock">
<p class="color_red">组块</p>
<div v-if="componentShow">组件类型</div>
<el-button @click="selectComponent">选择组件</el-button>
</div>
</template>
<script>
export default {
data() {
return {
componentShow:false,
};
},
methods: {
selectComponent() {
console.log('选择组件')
this.componentShow = true;
},
},
}
</script>
<style>
</style>
\ No newline at end of file
src/components/scaffold/tobody.vue 0 → 100644
浏览文件 @ 44e735fe
<template>
<div class="">
<p class="color_red">页面除了头部之外的内容区域</p>
<ToArticle v-for="item in list" :key="item.id" @addBlock="addBlock" :list="blockList"></ToArticle>
<el-button @click="addArticle">添加章节</el-button>
</div>
</template>
<script>
import ToArticle from './toarticle.vue';
export default {
props:{
list: Array,
},
components:{ ToArticle },
data() {
return {
blockList:[],
demoArticle: {
title: "章节标题",
body: "",
instruction:"",
},
};
},
mounted() {
},
methods: {
addArticle() {
console.log('新增章节');
this.$emit('addArticle', this.demoArticle)
},
addBlock(obj) {
this.blockList.push(obj)
},
},
}
</script>
<style>
</style>
\ No newline at end of file
src/components/scaffold/tophead.vue
浏览文件 @ 44e735fe
<template> <template>
<div> <div class="aloneBlock">
<el-input type="text" placeholder="请输入内容"></el-input> <p class="color_red">头部</p>
<div class="edit-title"> <el-button @click="showEidt"><i class="el-icon-edit"></i></el-button>
<div contenteditable="true" class="edit-title-inner" :id="detail.id" :style="detail.style"> <!-- <el-input type="text" placeholder="请输入内容"></el-input> -->
{{detail.displayTitle}}
<div class="edit-title-tools displaynone" contenteditable="false"> <div v-for="item in list" :key="item.id">
<span @click="tap('bold')">B</span> <div v-if="item.display === 1">
<span @click="tap('italic')">I</span> <label :for="item.key_name">{{item.title}}</label>
<span @click="tap('underline')">U</span> <el-input :value="item.default"></el-input>
<span @click="tap('colorpicker')">C</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapMutations } from 'vuex';
export default { export default {
props:{ props:{
detail: { detail: {
type:Object, type:Object,
default: function() { default: function() {
return { return {}
style: {
color:'#000',
'font-weight':'normal',
'text-decoration': 'none',
'font-style': 'normal',
}
} }
} }
},
computed: {
list() {
return this.detail['tabgroup_list'] && this.detail['tabgroup_list'][0].setting_list || [];
},
type() {
return this.detail.type;
} }
}, },
methods: { methods: {
tap(type) { ...mapMutations(['openPop']),
console.log('tap',type) showEidt() {
switch(type) { this.openPop(this.detail);
case "bold":
this.toggleStyle('font-weight','bold','normal');
break;
case "italic":
this.toggleStyle('font-style','italic','normal');
break;
case "underline":
this.toggleStyle('text-decoration','underline','none');
break;
case "colorpicker":
// this.toggleStyle('colorpicker','underline','none');
break;
}
console.log(this.detail)
}, },
toggleStyle(styleName,selVal,defVal) {
this.detail.style[styleName] = this.detail.style[styleName] != selVal ? selVal : defVal;
}
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.edit-title {
position: relative;
margin-top: 5px;
}
.edit-title-inner {
position: relative;
box-sizing: border-box;
height: 100%;
padding: 10px;
height: auto;
&:active,&:focus-visible{
outline: rosybrown auto 1px;
}
&:active > .edit-title-tools,
&:focus-visible > .edit-title-tools{
display: block;
}
}
.edit-title-tools {
position: absolute;
bottom: -100%;
color:#000;
font-weight: normal;
font-style: normal;
text-decoration: none;
cursor: pointer;
>span {
padding: 5px;
background-color: #eee;
}
}
</style> </style>
\ No newline at end of file
src/demo-modify.json 0 → 100644
浏览文件 @ 44e735fe
This source diff could not be displayed because it is too large. You can view the blob instead.
src/demo.json
浏览文件 @ 44e735fe
差异被折叠。
src/main.js
浏览文件 @ 44e735fe
...@@ -3,7 +3,7 @@ import App from "./App.vue"; ...@@ -3,7 +3,7 @@ import App from "./App.vue";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import { Button, Drawer, Message, MessageBox, Row, Col, Form, import { Button, Drawer, Message, MessageBox, Row, Col, Form,
FormItem, Input, Menu, MenuItem, Submenu, Dropdown, DropdownItem, DropdownMenu, Select, Option, Tabs, TabPane, Tree } from 'element-ui'; FormItem, Input, Menu, MenuItem, Submenu, Dropdown, DropdownItem, DropdownMenu, Select, Option, Tabs, TabPane, Tree, Upload, Dialog } from 'element-ui';
Vue.config.productionTip = false; Vue.config.productionTip = false;
...@@ -26,6 +26,8 @@ Vue.use(Option); ...@@ -26,6 +26,8 @@ Vue.use(Option);
Vue.use(Tabs); Vue.use(Tabs);
Vue.use(TabPane); Vue.use(TabPane);
Vue.use(Tree); Vue.use(Tree);
Vue.use(Upload);
Vue.use(Dialog);
Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$confirm = MessageBox.confirm;
......
src/store/index.js
浏览文件 @ 44e735fe
...@@ -4,8 +4,20 @@ import Vuex from "vuex"; ...@@ -4,8 +4,20 @@ import Vuex from "vuex";
Vue.use(Vuex); Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: {}, state: {
mutations: {}, showPop:false, //是否显示编辑弹窗
popDetail:{} //编辑内容
},
mutations: {
openPop(state, data) {
state.showPop = true;
state.popDetail = data;
},
closePop(state) {
state.showPop = false;
state.popDetail = {};
},
},
actions: {}, actions: {},
modules: {}, modules: {},
}); });
src/views/Course/create.vue
浏览文件 @ 44e735fe
...@@ -46,7 +46,8 @@ ...@@ -46,7 +46,8 @@
</el-col> </el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18"> <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
<div class="course-edit-inner padding_15 height_100p"> <div class="course-edit-inner padding_15 height_100p">
<recursion :children="trees"></recursion> <!-- <recursion :children="trees"></recursion> -->
<FullPage :detail="currentPage.detail" :children="[]"></FullPage>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -58,11 +59,14 @@ ...@@ -58,11 +59,14 @@
</template> </template>
<script> <script>
import FullPage from '@/components/scaffold/fullpage.vue';
import recursion from '@/components/common/recursion.vue'; import recursion from '@/components/common/recursion.vue';
import listJson from '@/demo.json'; //测试数据
let id = 1000; let id = 1000;
export default { export default {
components:{ components:{
recursion recursion,
FullPage
}, },
data() { data() {
return { return {
...@@ -102,7 +106,10 @@ export default { ...@@ -102,7 +106,10 @@ export default {
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label' label: 'label'
} },
currentPage: {
detail:{}
},
} }
}, },
watch: { watch: {
...@@ -111,6 +118,10 @@ export default { ...@@ -111,6 +118,10 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('listJson',listJson)
if(listJson && typeof listJson == 'object') {
this.modifyJson();
}
}, },
methods: { methods: {
handleClick(tab, event) { handleClick(tab, event) {
...@@ -127,6 +138,9 @@ export default { ...@@ -127,6 +138,9 @@ export default {
} }
data.children.push(newChild); data.children.push(newChild);
}, },
modifyJson() {
this.currentPage.detail = listJson['content'];
},
} }
} }
</script> </script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论