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'; ...@@ -9,7 +9,7 @@ import image from './control/image';
import explainText from './control/explainText'; import explainText from './control/explainText';
import department from './control/department'; import department from './control/department';
// import showDetail from './control/showDetail'; // import showDetail from './control/showDetail';
// import Detail from './control/detail'; import Detail from './control/detail';
// import equipment from './control/equipment'; // import equipment from './control/equipment';
// import file from './control/file'; // import file from './control/file';
import './control/render.css'; import './control/render.css';
...@@ -27,7 +27,7 @@ const form_item = { ...@@ -27,7 +27,7 @@ const form_item = {
explainText, explainText,
department, department,
// showDetail, // showDetail,
// Detail, Detail,
// equipment, // equipment,
// file // file
// inputWid // inputWid
......
src/views/taskTemplate/taskDesign/taskNewForm/components/custom/control/detail.vue
View file @ 61d20caf
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<span v-if="listInner.length== 0">可拖入多个组合进行组合</span> <span v-if="listInner.length== 0">可拖入多个组合进行组合</span>
</div> </div>
<el-form disabled ref="form" class="b-a" label-width="120px" label-position="left"> <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, animation: 0,
ghostClass: 'ghost', ghostClass: 'ghost',
group: { group: {
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<transition-group :class="" style="height: 100%;padding-top: 10px" type="transition" <transition-group :class="" style="height: 100%;padding-top: 10px" type="transition"
:name="'flip-list'" :name="'flip-list'"
tag="div"> 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" :key="index" :ele="items.obj.fieldTp" :obj="items.obj" :parent-index="parentIndex"
:index="index" :index="index"
@ShowFormInner="selectForm" @ShowFormInner="selectForm"
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import rendersInner from '../../../../../taskNewForm/components/custom/renderInner' import rendersInner from '../renderInner'
export default { export default {
components: { components: {
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
rendersInner rendersInner
}, },
name: "detail", name: "detail",
inject: ['isClickOut'], // inject: ['isClickOut'],
props: { props: {
obj: { obj: {
type: Object, type: Object,
...@@ -55,12 +55,17 @@ ...@@ -55,12 +55,17 @@
parentIndex: 0 parentIndex: 0
}, },
watch: { watch: {
'isClickOut1': function (val) { // 'isClickOut1': function (val) {
// console.log(val);
// if (val) {
// //当点击外部之后把所有内部选中状态取消
// this.currentItemIndex = -1
// }
// },
listInner(val){
console.log(val); console.log(val);
if (val) { this.$listeners.changeinnerList(val,this.parentIndex)
//当点击外部之后把所有内部选中状态取消 // this.$emit('changeinnerList',val,)
this.currentItemIndex = -1
}
} }
}, },
data() { data() {
...@@ -88,13 +93,13 @@ ...@@ -88,13 +93,13 @@
// } // }
}, },
methods: { methods: {
isAddClickClass(index) { // isAddClickClass(index) {
console.log(this.currentItemIndex); // console.log(this.currentItemIndex);
console.log(index); // console.log(index);
if (this.currentItemIndex === `${index}${this.parentIndex}` && !this.isClickOut1) { // if (this.currentItemIndex === `${index}${this.parentIndex}` && !this.isClickOut1) {
return 'InnerActiveItem' // return 'InnerActiveItem'
} // }
}, // },
startFun(evt) { startFun(evt) {
console.log('start123') console.log('start123')
// this.isShowText = false // this.isShowText = false
...@@ -153,6 +158,7 @@ ...@@ -153,6 +158,7 @@
}, },
}, },
created() { created() {
this.listInner = this.obj.fieldValue
this.$bus.on('renderFormInner', (formdata, index,parentIndex) => { this.$bus.on('renderFormInner', (formdata, index,parentIndex) => {
console.log(formdata); console.log(formdata);
console.log(index); console.log(index);
...@@ -190,6 +196,10 @@ ...@@ -190,6 +196,10 @@
.detail_body { .detail_body {
min-height: 200px; min-height: 200px;
.dt_draggble{
min-height: 180px
}
} }
.detail_footer { .detail_footer {
...@@ -203,5 +213,18 @@ ...@@ -203,5 +213,18 @@
border: 1px solid #38adff; border: 1px solid #38adff;
} }
.previewDialog{
.Detail{
min-height: 0px!important;
.detail_body{
min-height: 0px!important;
.dt_draggble{
min-height: 0px!important;
}
}
}
}
</style> </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