<template>
<!--
建模时的预览前端,即插件的实际显示样式
:addinName="name"和ref="main"一般情况不可去除
-->
<section v-if="t_preview" :addinName="name" ref="main">
<!-- 在画布区的显示内容 -->
<span>
<span>
<!-- see https://www.iviewui.com/components/cell#JCYF -->
<Card :style="cardStyle" class="cell-group-wrapper">
<p slot="title">
<!-- change to slot syntax to avoid a bug, where :title may not respond to change as a prop. -->
<Icon :type="cellData.icon"></Icon>
{{ cellData.title }}
</p>
<CellGroup v-if="cellData.list && cellData.list.length">
<Cell
v-for="obj in <Cell
v-for="obj in cellData.list"
:key="obj.oid"
:titlecellData.list"
:key="obj.oid"
:title="String(obj[args.attributeForTitle])"
:label="String(obj[args.attributeForTitleattributeForLabel])"
:label >
<Avatar :src="String(obj[args.attributeForLabelattributeForIcon])" slot="icon" />
</Cell>
</CellGroup>
<div v-else >
<Avatar :src="String(obj[args.attributeForIcon])" slot="icon" />
</Cell>
</CellGroup>
<div v-else class="no-result-prompt">无数据展示...</div>
</Card>
</span>
<span v-show="t_edit" ref="edit">
<!-- v-bind. see https://vuejs.org/v2/api/#v-bind -->
<EditBox
v-if="actEdit"
:addinName="name"
:widgetAnnotation="widgetAnnotation"
:editExtendInfo="editExtendInfo"
ref="editbox"
v-model="args"
:attributes="filter_attributes"
:router="router"
:route="route"
:store="store"
:root="root"
:itemValue="itemValue"
:query_oprs="query_oprs"
:dataTypes="dataTypes"
:targetclass="itemValue.data.targetClass"
>
<div slot="attribute">
<!-- 从外部引用的辅助标签，用于显示属性 -->
<p>标题属性(Title)</p>
<AttributeSelector
:target-class="args.bindTargetClass"
v-model="args.attributeForTitle"
></AttributeSelector>
<p>详情属性(Label)</p>
<AttributeSelector
:target-class="args.bindTargetClass"
v-model="args.attributeForLabel"
></AttributeSelector>
<p>图标属性(Icon)</p>
<AttributeSelector
:target-class="args.bindTargetClass"
v-model="args.attributeForIcon"
></AttributeSelector>
<Button type="primary" long @click="freshData">刷新数据</Button>
</div>
</EditBox>
</span>
</section>
<section v-else :addinName="name">
<span style="text-align: center">
<div class="form-addin-icon">
<!-- 控件拖放区图标的样式
see: http://ise.thss.tsinghua.edu.cn/font_857540_a2fo0rqai0f/demo_index.html-->
<i class="iconfont"></i>
</div>
<!-- 在控件拖放区图标的名字 -->
<div class="form-addin-name">简单列表</div>
</span>
<class="no-result-prompt">无数据展示...</div>
</Card>
</span>
<span v-show="t_edit" ref="edit">
<!-- v-bind. see https://vuejs.org/v2/api/#v-bind -->
<EditBox
v-if="actEdit"
:addinName="name"
:widgetAnnotation="widgetAnnotation"
:editExtendInfo="editExtendInfo"
ref="editbox"
v-model="args"
:attributes="filter_attributes"
:router="router"
:route="route"
:store="store"
:root="root"
:itemValue="itemValue"
:query_oprs="query_oprs"
:dataTypes="dataTypes"
:targetclass="itemValue.data.targetClass"
>
<div slot="attribute">
<!-- 从外部引用的辅助标签，用于显示属性 -->
<p>标题属性(Title)</p>
<AttributeSelector
:target-class="args.bindTargetClass"
v-model="args.attributeForTitle"
></AttributeSelector>
<p>详情属性(Label)</p>
<AttributeSelector
:target-class="args.bindTargetClass"
v-model="args.attributeForLabel"
></AttributeSelector>
<p>图标属性(Icon)</p>
<AttributeSelector
:target-class="args.bindTargetClass"
v-model="args.attributeForIcon"
></AttributeSelector>
<Button type="primary" long @click="freshData">刷新数据</Button>
</div>
</EditBox>
</span>
</section>
<section v-else :addinName="name"></section>
</template>
<script>
// 从本地引擎的一个自定义标签
import AttributeSelector from "./AttributeSelector";
import EditBox from "@/ext_components/form/_EditBox.vue";
import { mapGetters, mapActions } from "vuex";
export default {
props: [
"addin",
"basicArgs",
"argsProps",
"activeUUID",
"store",
"itemValue",
"attributes",
"relation",
"editExtendInfo",
"widgetAnnotation",
"checkResult",
"query_oprs",
"route",
"router",
"root",
"Message",
"echarts",
],
components: {
EditBox,
AttributeSelector,
},
// Vue数据绑定的时候要求返回的结果
data() {
return {
// 插件的名字
name: "SimpleCellGroup",
// 表示是否已经进入画布区
t_preview: true,
// 是否显示控件的属性编辑区
t_edit: false,
// 属性配置项,按需设置
addIcon: true,
actEdit: true,
actIndex: -1,
setModal: false,
// 控件支持设置类型
dataTypes: ["String"],
// 属性配置项,按需设置
args: {
// 在选项区显示的名称
title: "简单列表",
// 直接复用DWF默认的配置项，从而无需自行开发配置界面
bindTargetClass: "",
// 标签作为列表标题
label: "",
// 建模设置的过滤条件
filterQuery: "",
// 高度取值和单位
height: "",
heightType: "px",
// 宽度取值和单位
width: "",
widthType: "px",
// 背景色设置
back_color: "",
// 文字颜色设置
txt_fontColor: "",
/* ---------------------
* 下面是新增的自定义属性
* -------------------- */
// 单元格显示标题
attributeForTitle: "",
// 单元格显示内容
attributeForLabel: "",
// 显示图标对应属性
attributeForIcon: "",
// 在配置区支持的事件列表,元素为事件中文名
eventRange: ["单击"],
// 已被用户设置的事件列表,元素格式为 { opr_type: '', opr_path: '', name: '事件中文名' }
events: [],
},
cellData: {},
};
},
created() {
// 将表单引擎传递下来的store赋值给当前控件的store，以便handleQueryData可以用到这个全局属性
this.$store = this.store;
},
mounted() {
// 生命周期函数，实现数据加载
this.freshData();
},
computed: {
//...mapGetters("DWF_form", this.$store = this.store;
},
mounted(["Entities", "Relations"]),
cardStyle() {
// 外层卡片的样式
const result = {};
if (this.args.height) {
// 生命周期函数，实现数据加载
this.freshData();
console.log(this.itemValue.data.targetClass result["height"] =
String(this.args.height) + (this.args.heightType || "px");
},
computed: if (this.args.width) {
//...mapGetters("DWF_form", ["Entities", "Relations"]),
cardStyle() {
// 外层卡片的样式
const result = {}; result["width"] =
String(this.args.width) + (this.args.widthType || "px");
}
if (this.args.heightback_color) {
result["heightbackgroundColor"] = this.args.back_color;
}
Stringif (this.args.height) + (txt_fontColor) {
result["color"] = this.args.heightType || "px")txt_fontColor;
}
return result;
}},
// 需要用到实体类属性列表时使用
if (this.args.widthfilter_attributes() {
result["width"] =
String(this.args.width) + (this.args.widthType || "px");
}
if (this.args.back_colorreturn [];
},
},
methods: {
// use `handleQueryData` to fetch data.
...mapActions("DWF_form", ["handleQueryData"]),
// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发
getEditBox() {
result["backgroundColor"] =this.t_edit = true;
return this.args$refs.back_coloredit;
},
// 当插件无法直接通过style设置高度时，使用setHeight方法设置高度
if (this.args.txt_fontColorsetHeight() {
result["color"] = if (!this.args.txt_fontColor;
}
return result$refs.main) return;
},
// 需要用到实体类属性列表时使用现有表单加载在画布区加载控件的时候，会将之前的配置传入
filter_attributessetArgs(args) {
return [for (var i in args) {
this.args[i] = args[i];
},
},
methods: { return this;
},
// use `handleQueryData` to fetch data.
...mapActions("DWF_form", ["handleQueryData"]),
表单保存的时候将控件的设置合并到表单自身的JSON中
getArgs() {
return this.args;
},
// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发返回控件绑定的目标属性，如果没有绑定返回undefined或者null
getEditBoxgetFormName() {
this.t_edit =
true;
return this.$refsargs.editname;
},
// 当插件无法直接通过style设置高度时，使用setHeight方法设置高度freshData() {
setHeight() { const bindTargetClass = this.args.bindTargetClass;
if (!this.$refs.main) bindTargetClass) {
console.error("no bindTargetClass");
return;
},
const regexForTargetClass = /^([0-9a-zA-Z_]+)&([er])$/;
现有表单加载在画布区加载控件的时候，会将之前的配置传入
setArgs(args) {const result = regexForTargetClass.exec(bindTargetClass);
forif (varresult i in args=== null) {
this.args[i] = args[i];
console.error(
}
return this;
},
// 表单保存的时候将控件的设置合并到表单自身的JSON中
getArgs() {
`handleRefresh: invalid targetClass value -> ${bindTargetClass}`
);
return this.args;
},
// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
getFormName()let targetClass = result[1];
let query = {
return query: this.args.name;
},
freshData() {filterQuery,
pageSize: 4,
startIndex: 0,
};
constlet bindTargetClassobjs = this.args.bindTargetClass;
if (!bindTargetClass) handleQueryData({
console.error("no bindTargetClass");targetClass: targetClass,
return;
query: query,
}fresh: true,
const regexForTargetClass}).then((res) = /^([0-9a-zA-Z_]+)&([er])$/;
> {
constlet resultobjs = regexForTargetClass.exec(bindTargetClass)res;
if (result ==this.cellData = null) {
console.error(title: this.args.label,
`handleRefreshicon: invalid targetClass value -> ${bindTargetClass}`"ios-bookmarks-outline",
list: res,
)};
return});
},
},
};
</script>
let
targetClass<style = result[1];
let query =scoped>
/* 没有合适的数据的时候使用的样式 */
.no-result-prompt {
display: flex;
align-items: center;
query: this.args.filterQuery,
pageSize: 4,
startIndex: 0,
};
let objs = this.handleQueryData({
targetClass: targetClass,
query: query,
fresh: true,
}).then((res) => {
let objs = res;
this.cellData = {
title: this.args.label,
icon: "ios-bookmarks-outline",
list: res,
};
});
},
},
};
</script>justify-content: center;
background-color: #eeeeee;
color: #00000022;
font-weight: bold;
font-size: 2em;
}
/* hack to respond to height change.
see https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
*/
.cell-group-wrapper >>> .ivu-card-body {
position: relative;
height: calc(100% - 60px);
}
.cell-group-wrapper >>> .ivu-cell-group {
height: 100%;
overflow-y: auto;
}
</style> |
