You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.6 KiB
121 lines
2.6 KiB
<script>
|
|
import { domMap } from "@/const/inputType";
|
|
import { templatePropsMap } from "@/const/templateProps";
|
|
export default {
|
|
props: {
|
|
config: Object,
|
|
index: Number,
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
methods: {
|
|
optionsRender(h) {
|
|
if(this.config.edit_input === "checkbox" || this.config.edit_input === "radio") {
|
|
return ['选项1','选项2','选项3'].map(i => h('el-option',{ props: { value: i,label: i } }))
|
|
}
|
|
if(this.config.edit_input === "file" || this.config.edit_input === "files") {
|
|
return [
|
|
h('el-button',{
|
|
slot: 'trigger',
|
|
props: {
|
|
size: 'small',
|
|
type: 'primary'
|
|
}
|
|
}, '选取文件'),
|
|
h('el-button',{
|
|
style: {
|
|
'margin-left': '10px'
|
|
},
|
|
props: {
|
|
size: 'small',
|
|
type: 'success'
|
|
}
|
|
}, '上传到服务器'),
|
|
h('div',{
|
|
class: 'el-upload__tip',
|
|
slot: 'tip'
|
|
},'文件不超过500kb')
|
|
]
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
hiddenClass() {
|
|
let classArr = []
|
|
if(!this.config.list_show && this.config.form_show) {
|
|
classArr.push('no-list-show')
|
|
}
|
|
if(!this.config.form_show && this.config.list_show) {
|
|
classArr.push('no-form-show')
|
|
}
|
|
if(!this.config.list_show && !this.config.form_show) {
|
|
classArr.push('no-all-show')
|
|
}
|
|
return classArr;
|
|
}
|
|
},
|
|
render(h) {
|
|
return h(
|
|
"div",
|
|
{
|
|
class: this.hiddenClass,
|
|
style: {
|
|
opacity: (this.config.list_show && this.config.form_show) ? 1 : 0.5,
|
|
filter:
|
|
this.index === this.$store.state.form.selectedIndex
|
|
? "drop-shadow(0 0 2px #0077CCFF) drop-shadow(0 0 8px #449FD9FF)"
|
|
: "",
|
|
position: "relative",
|
|
},
|
|
},
|
|
[
|
|
h(domMap.get(this.config.edit_input), {
|
|
style: {
|
|
width: "100%",
|
|
},
|
|
props: templatePropsMap.get(this.config.edit_input),
|
|
},this.optionsRender(h)),
|
|
]
|
|
);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.no-list-show {
|
|
&::after {
|
|
content: "列表隐藏";
|
|
color: red;
|
|
font-size: 12px;
|
|
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 0;
|
|
}
|
|
}
|
|
.no-form-show {
|
|
&::after {
|
|
content: "表单隐藏";
|
|
color: red;
|
|
font-size: 12px;
|
|
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 0;
|
|
}
|
|
}
|
|
.no-all-show {
|
|
&::after {
|
|
content: "表单、列表隐藏";
|
|
color: red;
|
|
font-size: 12px;
|
|
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 0;
|
|
}
|
|
}
|
|
</style>
|