Skip to content

M
mt-education-web
Commit 61d20caf authored by curryft's avatar curryft
Browse files
Options

update

parent 8a604983
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 339 deletions
src/views/taskTemplate/taskDesign/taskNewForm/components/custom/Render.js
View file @ 61d20caf
......@@ -9,7 +9,7 @@ import image from './control/image';
import explainText from './control/explainText';
import department from './control/department';
// import showDetail from './control/showDetail';
// import Detail from './control/detail';
import Detail from './control/detail';
// import equipment from './control/equipment';
// import file from './control/file';
import './control/render.css';
......@@ -27,7 +27,7 @@ const form_item = {
explainText,
department,
// showDetail,
// Detail,
Detail,
// equipment,
// file
// inputWid
......
src/views/taskTemplate/taskDesign/taskNewForm/components/custom/control/detail.vue
View file @ 61d20caf
......@@ -9,7 +9,7 @@
<span v-if="listInner.length== 0">可拖入多个组合进行组合</span>
</div>
<el-form disabled ref="form" class="b-a" label-width="120px" label-position="left">
<draggable style="min-height: 180px" @start="startFun" :clone="cloneData" :list="listInner" :options="{
<draggable class="dt_draggble" @start="startFun" :clone="cloneData" :list="listInner" :options="{
animation: 0,
ghostClass: 'ghost',
group: {
......@@ -19,7 +19,7 @@
<transition-group :class="" style="height: 100%;padding-top: 10px" type="transition"
:name="'flip-list'"
tag="div">
<renders-inner :class="{'InnerActiveItem': currentItemIndex === `${index}${parentIndex}` && !isClickOut1}" v-for="(items, index) in listInner"
<renders-inner :class="{'InnerActiveItem': currentItemIndex === `${index}${parentIndex}`}" v-for="(items, index) in listInner"
:key="index" :ele="items.obj.fieldTp" :obj="items.obj" :parent-index="parentIndex"
:index="index"
@ShowFormInner="selectForm"
......@@ -38,7 +38,7 @@
<script>
import draggable from 'vuedraggable'
import rendersInner from '../../../../../taskNewForm/components/custom/renderInner'
import rendersInner from '../renderInner'
export default {
components: {
......@@ -46,7 +46,7 @@
rendersInner
},
name: "detail",
inject: ['isClickOut'],
// inject: ['isClickOut'],
props: {
obj: {
type: Object,
......@@ -55,12 +55,17 @@
parentIndex: 0
},
watch: {
'isClickOut1': function (val) {
// 'isClickOut1': function (val) {
// console.log(val);
// if (val) {
// //当点击外部之后把所有内部选中状态取消
// this.currentItemIndex = -1
// }
// },
listInner(val){
console.log(val);
if (val) {
//当点击外部之后把所有内部选中状态取消
this.currentItemIndex = -1
}
this.$listeners.changeinnerList(val,this.parentIndex)
// this.$emit('changeinnerList',val,)
}
},
data() {
......@@ -88,13 +93,13 @@
// }
},
methods: {
isAddClickClass(index) {
console.log(this.currentItemIndex);
console.log(index);
if (this.currentItemIndex === `${index}${this.parentIndex}` && !this.isClickOut1) {
return 'InnerActiveItem'
}
},
// isAddClickClass(index) {
// console.log(this.currentItemIndex);
// console.log(index);
// if (this.currentItemIndex === `${index}${this.parentIndex}` && !this.isClickOut1) {
// return 'InnerActiveItem'
// }
// },
startFun(evt) {
console.log('start123')
// this.isShowText = false
......@@ -153,6 +158,7 @@
},
},
created() {
this.listInner = this.obj.fieldValue
this.$bus.on('renderFormInner', (formdata, index,parentIndex) => {
console.log(formdata);
console.log(index);
......@@ -190,6 +196,10 @@
.detail_body {
min-height: 200px;
.dt_draggble{
min-height: 180px
}
}
.detail_footer {
......@@ -203,5 +213,18 @@
border: 1px solid #38adff;
}
.previewDialog{
.Detail{
min-height: 0px!important;
.detail_body{
min-height: 0px!important;
.dt_draggble{
min-height: 0px!important;
}
}
}
}
</style>
src/views/taskTemplate/taskDesign/taskNewForm/taskNewForm/components/custom/control/detail.vue deleted 100644 → 0
View file @ 8a604983
<template>
<div class="Detail">
<div class="detail_title">
{{this.parentIndex}}
<span>{{obj.fieldNm}}</span>
</div>
<div class="detail_body">
<div style="font-size: 17px;color: gray;margin-top: 20px;width: 100%;text-align: center;">
<span v-if="listInner.length== 0">可拖入多个组合进行组合</span>
</div>
<el-form disabled ref="form" class="b-a" label-width="120px" label-position="left">
<draggable style="min-height: 180px" @start="startFun" :clone="cloneData" :list="listInner" :options="{
animation: 0,
ghostClass: 'ghost',
group: {
// 只允许放置shared的控件,禁止pull
put: ['shared']
}}">
<transition-group :class="" style="height: 100%;padding-top: 10px" type="transition"
:name="'flip-list'"
tag="div">
<renders-inner :class="{'InnerActiveItem': currentItemIndex === `${index}${parentIndex}` && !isClickOut1}" v-for="(items, index) in listInner"
:key="index" :ele="items.obj.fieldTp" :obj="items.obj" :parent-index="parentIndex"
:index="index"
@ShowFormInner="selectForm"
@handleRemoveEle="removeEle"
@handleChangeVal="val => handleChangeVal(val,element)"></renders-inner>
</transition-group>
</draggable>
</el-form>
</div>
<div class="detail_footer">
<i class="el-icon-plus" style="color: #2eabff"></i>
<span style="color: #2eabff">{{obj.btnText}}</span>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import rendersInner from '../renderInner'
export default {
components: {
draggable,
rendersInner
},
name: "detail",
inject: ['isClickOut'],
props: {
obj: {
type: Object,
default: {}
},
parentIndex: 0
},
watch: {
'isClickOut1': function (val) {
console.log(val);
if (val) {
//当点击外部之后把所有内部选中状态取消
this.currentItemIndex = -1
}
}
},
data() {
return {
listInner: [],
modalFormData: {
fieldNm: '',
fieldHint: '',
required: 1,
print: 1,
major: 1,
},
// isClickOutData:this.isClickOut,
currentItemIndex: -1,
currentItemType: '',
currentItemLabel: '',
isFormShow: false,
// isShowText:true
isHaveClickOut:false
}
},
computed: {
// isClickOut1() {
// return this.isClickOut.isHaveClickOut;
// }
},
methods: {
isAddClickClass(index) {
console.log(this.currentItemIndex);
console.log(index);
if (this.currentItemIndex === `${index}${this.parentIndex}` && !this.isClickOut1) {
return 'InnerActiveItem'
}
},
startFun(evt) {
console.log('start123')
// this.isShowText = false
},
cloneData(original) {
console.log("ss");
// 深拷贝对象，防止默认空对象被更改
return JSON.parse(JSON.stringify(original))
},
// 拖拽表单2
dragOptions() {
return {
animation: 0,
ghostClass: 'ghost',
group: {
// 只允许放置shared的控件,禁止pull
// put: ['shared']
}
}
},
//选中item
selectForm(index, obj) {
this.$bus.emit('clickOut',true);
// if(document.getElementsByClassName('InnerActiveItem')){
let classData = document.getElementsByClassName('InnerActiveItem')
console.log(classData.length);
// if (classData.length > 0) {
// console.log(classData);
//
// classData[0].classList.remove('InnerActiveItem')
// // classData.forEach((item) => {
// // console.log(item);
// // item.classList.remove('InnerActiveItem')
// // })
// }
this.currentItemIndex = `${index}${this.parentIndex}`
this.$emit('ShowFormInner', index, obj, this.listInner, this.parentIndex);
console.log(index);
console.log(obj);
},
// 删除克隆控件
removeEle(index) {
console.log(index)
this.listInner.splice(index, 1)
if (this.listInner.length === 0) {
this.isFormShow = false
}
this.currentItemIndex = -1
},
// 控件回填数据
handleChangeVal(val, element) {
console.log(element)
// this.$set(this.formData, element.obj.name, val);
},
},
created() {
this.$bus.on('renderFormInner', (formdata, index,parentIndex) => {
console.log(formdata);
console.log(index);
if(this.parentIndex == parentIndex){
this.listInner[index].obj = Object.assign({},
this.listInner[index].obj,
formdata
)
}
});
this.$bus.on('clickOut',(val)=>{
console.log(val);
if (val) {
//当点击外部之后把所有内部选中状态取消
this.currentItemIndex = -1
}
this.isHaveClickOut = val
});
}
}
</script>
<style lang="less" scoped>
.Detail {
min-height: 250px;
position: relative;
width: 100%;
.detail_title {
font-size: 16px;
color: gray;
margin-left: 10px;
}
.detail_body {
min-height: 200px;
}
.detail_footer {
bottom: 0;
width: 100%;
text-align: center;
}
}
.InnerActiveItem {
border: 1px solid #38adff;
}
</style>
src/views/taskTemplate/taskDesign/taskNewForm/taskNewForm/components/custom/renderInner.js deleted 100644 → 0
View file @ 8a604983
import input from './control/Input';
import textarea from './control/textArea';
import radio from './control/Radio';
import select from './control/select';
import selectMutiple from './control/selectMutiple';
import date from './control/date';
import dateRange from './control/dateRange';
import image from './control/image';
import explainText from './control/explainText';
import department from './control/department';
import showDetail from './control/showDetail';
import Detail from './control/detail';
import './control/render.css';
// import inputWid from '../widget/input';
const form_item = {
input,
radio,
select,
date,
textarea,
selectMutiple,
dateRange,
image,
explainText,
department,
showDetail,
Detail
// inputWid
};
export default {
name: 'renders',
// components: {
// inputWid: inputWid
// },
// render(h) {
// return h('el-form-item', {
// props: {
// label: this.obj.label + "："
// }
// }, [h(this.c)])
// // }, form_item[this.ele](this, h));
// // },[inputWid])
// },
render(h) {
console.log(this.obj);
const InnerComponent = form_item[this.ele];
// if (this.obj.required === 1) {
// console.log('ss')
// this.obj.required = true
// } else {
// this.obj.required = false
// }
// console.log(this.obj.required);
if (this.ele === 'explainText') {
return (
<div class={'disFlex'} onClick:stop={($event) => {
this.$emit('ShowFormInner', this.index, this.obj,this.parentIndex);
if ($event) $event.preventDefault();
}}>
<InnerComponent obj={this.obj}/>
<i class='el-icon-close deleteIcon' vOn:click={() => {
this.$emit('handleRemoveEle', this.index);
}}></i>
</div>
);
} else {
return (
<div class={['disFlex']} onClick:stop={($event) => {
this.$emit('ShowFormInner', this.index, this.obj,this.parentIndex);
if ($event) $event.preventDefault();
}}>
<InnerComponent obj={this.obj}/>
<i class='el-icon-close deleteIcon' vOn:click={() => {
this.$emit('handleRemoveEle', this.index);
return false;
}}></i>
</div>
);
}
},
props: {
ele: {
type: String,
default: 'input'
},
obj: {
type: Object,
default: {}
},
index: {
type: Number,
default: 0
},
parentIndex: {
type: Number,
default: 0
},
},
mounted() {
}
};
//
// function Renders({ c, data }) {
// const C = c;
// return <C {...data} />
// }
// <el-form-item label={this.obj.fieldNm} required={this.obj.required == 1} style="width:100%;margin-bottom:10px!important">
// <InnerComponent obj={this.obj}/>
// </el-form-item>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment