// Vue数据绑定的时候要求返回的结果
	data() {
		return {
			// 插件的名字
			name: "simpleCellGroupSimpleCellGroup",
			// 表示是否已经进入画布区
			t_preview: falsetrue,
			// 是否显示控件的属性编辑区
			t_edit: false,
			// 属性配置项,按需设置
			argsaddIcon: {true,
			actEdit: true,
			// 前面已经描述，此处省略...actIndex: -1,
			setModal: false,
			// 控件支持设置类型
			dataTypes: ["String"],
			},
// 属性配置项,按需设置
			args: {
				// 需要显示数据的集合，包括标题，图标，单元标题，单元内容，约定格式如下控件自带的选项等，这里忽略
				...
			},
			cellData: {},
		};
	},

<template>
	<!--
    建模时的预览前端,即插件的实际显示样式
    :addinName="name"和ref="main"一般情况不可去除
	-->
	<section v-if="t_preview" :addinName="name" ref="main">
		<!-- 在画布区的显示内容 -->
		<span>
			<!-- 关于Cell控件的使用，详见：https://www.iviewui.com/components/cell#JCYF -->
			<Card :style="cardStyle" class="cell-group-wrapper">
				<!-- 省略代码.... -->
			</Card>
		</span>
	</section>
	<!-- 省略代码.... -->
</template>

<script>
	//...
	computed: {
		cardStyle() {
			// 外层卡片的样式
			const result = {};
			if (this.args.height) {
				result["height"] =
					String(this.args.height) + (this.args.heightType || "px");
			}
			if (this.args.width) {
				result["width"] =
					String(this.args.width) + (this.args.widthType || "px");
			}
			if (this.args.back_color) {
				result["backgroundColor"] = this.args.back_color;
			}
			if (this.args.txt_fontColor) {
				result["color"] = this.args.txt_fontColor;
			}
			return result;
		},
	},
	methods: {
	},
</script>

<style scoped>
/* 没有合适的数据的时候使用的样式 */
.no-result-prompt {
	display: flex;
	align-items: center;
	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>

<template>
	<!--
    建模时的预览前端,即插件的实际显示样式
    :addinName="name"和ref="main"一般情况不可去除
	-->
	<section v-if="t_preview" :addinName="name" ref="main">
		<!-- 在画布区的显示内容 -->
		<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"
					@on-click="onClick"
				>
					<Cell
						v-for="(obj, idx) in cellData.list"
						:key="obj.oid"
						:name="idx"
						:title="String(obj[args.attributeForTitle])"
						:label="String(obj[args.attributeForLabel])"
						@click="onClick"
					>
						<Avatar :src="String(obj[args.attributeForIcon])" slot="icon" />
					</Cell>
				</CellGroup>
				<div v-else class="no-result-prompt">无数据展示...</div>
			</Card>
		</span>
	</section>
</template>

<template>
	<!--
change to slot syntax to avoid a bug建模时的预览前端,即插件的实际显示样式
where :title may not respond to change as a prop.  :addinName="name"和ref="main"一般情况不可去除
	-->
					<Icon<section :typestyle="cellData.icon"></Icon>{
					{{ cellData.title }}width: args.width + args.widthType,
				</p>}" :addinName="name" ref="main">
				<CellGroup v-if="cellData.list && cellData.list.length"<!-- 在画布区的显示内容 -->
		<span
			<Cell:style="{
						v-for="obj in cellData.list"height: args.height+ args.heightType,
						:key="obj.oid"width: args.width + args.widthType,
				}"
			:titlestyle="String(obj[args.attributeForTitle])"
				font-size: 50px;
				:label="String(obj[args.attributeForLabel])"display: flex;
					>
justify-content: center;
				align-items: center;"
			<Avatar :src@click="String(obj[args.attributeForIcon])onClick"
slot			@dblclick="icononDoubleClick"
/>
					>{{args.label}}</Cell>span>
				</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-model="args"
				:router="router"
				:route="route"
				:root="root"
				:itemValue="itemValue"
				:query_oprs="query_oprs"
				:targetclass="itemValue.data.targetClass"
			>
				<div slot="attribute">
					<!-- 从外部引用的辅助标签，用于显示属性 -->
					<p>标题属性(Title)</p>
					<AttributeSelector
						section>
</template>

// 单击事件
onClick() {
	this.triggerEvent("单击");
},
// 根据名字触发表单事件上配置的操作
triggerEvent(eventName) {
	let eventConfig = null;
	// 提取事件对应的操作参数
	if (this.args.events && this.args.events.length > 0) {
		eventConfig = this.args.events.find((val) => {
			return val.name === eventName;
		});
	}
	// 触发实际操作
	if (eventConfig) {
		this.invokeOperation(
			eventConfig.opr_type,
			eventConfig.opr_path,
			this.itemValue,
			this.store
		);
	}
},

	// Vue数据绑定的时候要求返回的结果
	data() {
		return {
			// 插件的名字
			name: "SimpleCellGroup",
			// ...
			// 需要显示数据的集合，包括标题，图标，单元标题，单元内容，约定格式如下
			cellData: {},
			// 记录被点击选择的对象
			cellSelected: {},
		};
	},
	methods: {
		...
		getSelected() {
			return this.cellSelected;
		},
		getAll() {
			return this.cellData.list;
		},
		// 单击事件，会传入被点击对象的索引，详见：https://www.iviewui.com/components/cell
		onClick(idx) {
			this.cellSelected = this.cellData.list[idx];
			this.triggerEvent("单击");
		},
	}

<template>
    <!--
    建模时的预览前端,即插件的实际显示样式
    :addinName="name"和ref="main"一般情况不可去除
    -->
    <section v-if="t_preview" :addinName="name" ref="main">
        <!-- 在画布区的显示内容 -->
        <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 cellData.list"
                        :key="obj.oid"
                        :title="String(obj[args.attributeForTitle])"
                        :label="String(obj[args.attributeForLabel])"
                    >
                        <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.attributeForTitleattributeForLabel"
					></AttributeSelector>
					<p>详情属性(Label)</p>
					<AttributeSelector
						
                    ></AttributeSelector>
                    <p>图标属性(Icon)</p>
                    <AttributeSelector
                        :target-class="args.bindTargetClass"
						                        v-model="args.attributeForLabel"
					></AttributeSelector>
					<p>图标属性(Icon)</p>
					<AttributeSelector
						:target-class="args.bindTargetClass"
						v-model="args.attributeForIcon"
					></AttributeSelector>
					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>
			></i>
            </div>
            <!-- 在控件拖放区图标的名字 -->
			            <div class="form-addin-name">简单列表</div>
		        </span>
    	</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",
		"itemValuecheckResult",
		"attributesquery_oprs",
		"route",
		"router",
		"root",
		"Message",
		"query_oprsecharts",
	],
	components: {
		EditBox,
		AttributeSelector,
	},
	// Vue数据绑定的时候要求返回的结果
	data() {
		return {
			// 插件的名字
			name: "simpleCellGroupSimpleCellGroup",
			// 表示是否已经进入画布区
			t_preview: false: true,
			// 是否显示控件的属性编辑区
			t_edit: false,
			// 属性配置项,按需设置
			addIcon: true,
			actEdit: true,
			actIndex: -1,
			setModal: false,
			// 控件支持设置类型
			dataTypes: ["String"],
			// 是否显示控件的属性编辑区属性配置项,按需设置
			t_editargs: false,{
				// 属性配置项,按需设置在选项区显示的名称
			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();
		console.log(this.itemValue.data.targetClass);
	},
	computed: {
		//...mapGetters("DWF_form", ["Entities", "Relations"]),
		cardStyle() {
			// 外层卡片的样式
			const result = {};
			if (this.args.height) {
				result["height"] =
					String(this.args.height) + (this.args.heightType || "px");
			}
			if (this.args.width) {
				result["width"] =
					String(this.args.width) + (this.args.widthType || "px");
			}
			if (this.args.back_color) {
				result["backgroundColor"] = this.args.back_color;
			}
			if (this.args.txt_fontColor) {
				result["color"] = this.args.txt_fontColor;
			}
			}	return result;
		},
		// 需要用到实体类属性列表时使用
		filter_attributes() {
			return result[];
		},
	},
	methods: {
		// use `handleQueryData` to fetch data.
		...mapActions("DWF_form", ["handleQueryData"]),
		/*
		在建模的时候传入，提示控件是在画布区还是在控件列表中
		0：表示在画布区，已经被拖入
		1：表示在控件区，准备被拖入
		2: 表示在拖动中，还未放下
		*/
		setDisplayType(type) {
			if (type == 0) this.t_preview = true;
			return this;
		},
		// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发
		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;
		},
		// 是否允许其他子控件拖入，如果不允许则返回null表单保存的时候将控件的设置合并到表单自身的JSON中
		getAllowgetArgs() {
			return nullthis.args;
		},
		// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
		getFormName() {
			return nullthis.args.name;
		},
		freshData() {
			const bindTargetClass = this.args.bindTargetClass;
			if (!bindTargetClass) {
				console.error("no bindTargetClass");
				return;
			}

			const regexForTargetClass = /^([0-9a-zA-Z_]+)&([er])$/;
			const result = regexForTargetClass.exec(bindTargetClass))$/;
			const result = regexForTargetClass.exec(bindTargetClass);
			if (result === null) {
				console.error(
					`handleRefresh: invalid targetClass value -> ${bindTargetClass}`
				);
				return;
			}

			let targetClass = result[1];
			iflet (resultquery === null) {
				console.error(
	query: this.args.filterQuery,
				pageSize: 4,
				`handleRefreshstartIndex: invalid targetClass value -> ${bindTargetClass}` 0,
			};

			let objs = this.handleQueryData({
				targetClass: targetClass,
				);query: query,
				return;fresh: true,
			}).then((res) => {
				let targetClassobjs = result[1]res;
				let querythis.cellData = {
				query	title: this.args.filterQuerylabel,
				pageSize	icon: 4"ios-bookmarks-outline",
				startIndex	list: 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>

<style scoped>
/* 没有合适的数据的时候使用的样式 */
.no-result-prompt {
	display: flex;
	align-items: center;
	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>res,
				};
			});
		},
	},
};
</script>

config:
  ignore:
  info:
    part-web:
      name: modeler
      cname: 建模端
      forms:
		...
        SimpleCellGroup.vue:
          icon: "md-apps"
          cname: 高级控件
          type: form/multi
      operations:
		...
      mobileForms:
		...
      mobileOperations:
		...
      dependencies:
		...

config:
  ignore:
  info:
    part-web:
      name: app
      cname: 应用端
      forms:
        SimpleCellGroup.vue: form/multi
      operations:
		...
      dependencies: {}