页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

代码块
languagejs
<template>
	<div>
		<Button type="text" @click="openDialog">编码工具</Button>
		<Modal v-model="showDlg" :title="`${asset.assetType}`" @on-ok="ok" @on-cancel="cancel">
			<Input v-model="asset.id" :placeholder="asset.id" />
		</Modal>
	</div>
</template>
 
<script>
export default {
	name: "buttonOpr",
	data() {
		return {
			showDlg: false,
			asset: { id: "unknown" },
		};
	},
	methods: {
		// 通知DWF表单引擎接管绘制过程
		canShow() {
			return true;
		},
		// 一旦接管,DWF表单引擎传入当前表单的上下文
		setArgs(args) {
			return this;
		},
		openDialog() {
			// 初始化弹框内容
			var a = this.dwf_ctx.obj();
			if (typeof a !== "undefined") {
				this.asset = a;
			}
			// 显示对话框
			this.showDlg = true;
		},
		ok() {
			// 获得备注控件设置内容
			var addin = this.dwf_ctx.getAddinById("TextInput1");
			addin.setValue(this.asset.id);
		},
		cancel() {},
	},
};
</script>

<style>
</style>

对应的assemble-to.yaml文件如下:

代码块
languageyml
config:
  ignore:
  info:
    part-web:
      name: common
      cname: common
      forms:
      # 下面是关于操作的配置,在operations文件夹下增加一个新的操作vue文件的时候,需要在下面增加配置以便正确装配
      operations:
        #...commonOpr.vue: commonOpr
        buttonOpr.vue: buttonOpr
      dependencies: {}


4 小结

本章深入介绍了操作插件和按钮插件的开发,要点如下:

...

关于VUE如何实现双向数据绑定,以及iView控件库基础知识,本文不做介绍,有兴趣的读者可以参阅:按钮示例文本框示例弹窗示例

View file
namebuttonOpr.vue
height250
View filenameworkOrderListOpr.vueheight250