<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section
v-if="t_preview"
:addinName="name"
ref="main"
:style="{
width: args.width + args.widthType,
}"
>
<!-- 在画布区的显示内容 -->
<span
:style="{
height: args.height + args.heightType,
width: 100,
}"
style="
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
"
>{{ args.label }}</span
>
<span v-show="t_edit" ref="edit">
<EditBox
v-if="actEdit"
:addinName="name"
:widgetAnnotation="widgetAnnotation"
:editExtendInfo="editExtendInfo"
ref="editbox"
v-model="args"
:attributes="filter_attributes"
:router="router"
:route="route"
:root="root"
:itemValue="itemValue"
:query_oprs="query_oprs"
:dataTypes="dataTypes"
:targetclass="itemValue.data.targetClass"
>
<div slot="attribute"></div>
<div slot="layout"></div>
<div slot="operation"></div>
</EditBox>
</span>
</section>
<section v-else :addinName="name">
<span style="text-align: center">
<div class="form-addin-icon">
<!-- 控件拖放区图标的样式 -->
<i class="iconfont"></i>
</div>
<!-- 在控件拖放区图标的名字 -->
<div class="form-addin-name">进阶控件</div>
</span>
</section>
</template>
<script>
import EditBox from "@/ext_components/form/_EditBox.vue";
const name = "BlankControl";
export default {
name: name,
props: [
"addin",
"basicArgs",
"argsProps",
"activeUUID",
"store",
"itemValue",
"attributes",
"relation",
"editExtendInfo",
"widgetAnnotation",
"checkResult",
"query_oprs",
"route",
"router",
"root",
"Message",
"echarts",
],
components: {
EditBox,
},
data() {
return {
//插件的名字
name: name,
//表示是否已经进入画布区
t_preview: true,
//是否需要编辑属性
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
// 用于控制画布区的复制,删除和角标
actEdit: false,
actIndex: -1,
setModal: false,
// 支持的数据类型
dataTypes: [],
args: {
// 用于提示用户名称
title: "进阶控件",
height: 300,
heightType: "px",
width: 100,
widthType: "%",
label: "Empty!",
// 给出控件可以支持的事件类型
eventRange: ["单击", "双击"],
events: [],
},
};
},
created() {},
// 生命周期函数,在dom元素生成之后调用
mounted() {},
computed: {
// 需要用到实体类属性列表时使用
filter_attributes() {
return [];
},
},
methods: {
// 默认不用变化,返回编辑框供建模工具绘制,当控件拖入画布区以后被点击的时候触发
getEditBox() {
this.t_edit = true;
return this.$refs.edit;
},
// 当插件无法直接通过style设置高度时,使用setHeight方法设置高度
setHeight() {
if (!this.$refs.main) return;
},
// 现有表单加载在画布区加载控件的时候,会将之前的配置传入
setArgs(args) {
for (var i in args) {
this.args[i] = args[i];
}
return this;
},
// 表单保存的时候将控件的设置合并到表单自身的JSON中
getArgs() {
return this.args;
},
// 返回控件绑定的目标属性,如果没有绑定返回undefined或者null
getFormName() {
return this.name;
},
getDataType(args) {
return this.dataTypes;
},
},
};
</script>
<style>
</style> |