表单控件使用的标准选择器
利用Modeler端可配置组件封装(x-selector-encapsulation)的能力对控件属性面板重新进行封装,优化代码可读性
开发说明:
- 类选择,颜色选择,表单选择,图片库封装和之前一样无变化
- 类属性选择去掉目标属性功能,通过配置args,name实现,新精简为单纯的属性选择器,并不带新增功能
# 属性选择器 AttributeSelector 用于在给定目标类的情况下,选择目标类的一个属性 v-model: (__必填__)目标类的属性名,string类型 props: - className: - 类型:string - __必填__ - 说明:目标类的类名。通常使用`this.targetClass` 或者已绑定的类名 - dataTypes: - 类型: Array - 说明:允许的数据类型,用于缩小选择范围。提前设定。 - 默认值:允许所有类型 emits: - input(用于v-model): - 说明:在属性发生变化时触发,可能源于选项的变更或者“自定义”情况下用户的输入 - payload: (属性名) where 属性名 is of type STRING - example: ('attr1') notes: - 在目标类变化时,该属性选择器会自动重新填充属性列表 example: - 提供属性选择器,用于选择实体类'foobar'的属性,选定的属性名保存为组件的'args.attr1' ```vue <!--- 在template的editbox中使用 ----> <AttributeSelector :class-name="'foobar'" v-model="args.attr1"></AttributeSelector> ``` - 提供一个带有标题的属性选择器,用于选择实体类'foobar'的属性,选定的属性名保存为组件的'args.attr1'。标题名叫“选择属性” ```vue <!--- 在template的editbox中使用 ----> <div> <p>选择属性</p> <AttributeSelector :class-name="'foobar'" v-model="args.attr1"></AttributeSelector> </div> ``` - 提供属性选择器,用于选择实体类'foobar'的属性,限定属性类型为字符型或整型,选定的属性名保存为组件的'args.attr2' ```vue <!--- 在template的editbox中使用 ----> <AttributeSelector :class-name="'foobar'" :data-types="['String', 'Integer']" v-model="args.attr2"></AttributeSelector> <!-- 或者使用常量,如下所示 --> <AttributeSelector :class-name="'foobar'" :data-types="valueTypes" v-model="args.attr2"></AttributeSelector> <script> import {constants} from "@/util/constants"; export default { // 在data中 data () { return { valueTypes: [ constants.attribute_value_type_string, constants.attribute_value_type_integer ], args: { attr2: '' // 此处列举其他参数... } } } } </script> ``` - 联合使用类选择器与属性选择器,使得当选定一个类时,可以进一步选定类的属性。选定的属性名保存为组件的'args.attr3' ```vue <!--- 在template的editbox中使用 ----> <ClassNameSelector v-model="args.classNameForAttr3"></ClassNameSelector> <AttributeSelector :class-name="args.classNameForAttr3" v-model="args.attr3"></AttributeSelector> <script> export default { data () { return { args: { classNameForAttr3: '', attr3: '' } } } } </script> ``` - 如果想要使用新增属性的功能,需要补充参数root与editbox ```vue <EditBox ref="editbox" ... > <!--- 使用带新增属性按钮的属性选择器 ----> <AttributeSelector :class-name="args.className" v-model="args.attr" :root="root" :editbox="$refs.editbox"></AttributeSelector> </EditBox> <script> export default { props:['root'], data () { return { args: { classNameForAttr3: '', attr: '', className: '', } } } } </script> ``` ~~# 增加属性列表 ModalAddColumn~~ 一个可复用的组件,用于为指定类增加一个属性 props: - className: - 类型: string, - __必填__ - 说明: 目标类的类名。通常使用来自父组件的目标类 - valueTypes: - 类型: Array - __必填__ - 说明: 允许的数据类型,用于缩小选择范围。此处故意设置成必填,为了明确使用何种属性 - 举例: `['String', 'Integer']`, 但是推荐使用`constants` 中的常量。 > constants 位于`src/util/constants.js`. 可以使用如下语句引入 > ``` > import {constants} from "@/util/constants"; > ```
# 类选择器 ClassNameSelector 用于选择一个实体类或者关系类。返回选定类的类名(可能需要进一步判断是否为关联类) props:无 emits: - input (用于v-model): - 说明:在类名发生变化时触发,源于用户选择类名,或者清除选择。 - payload:(类名) where 类名 is of type STRING - example: ('foobar') notes: - 当选择器被清空时,会填入默认值'' (空字符串) usage example: - 提供类选择器,用于选择一个类,选定的类名保存为组件的'args.clsname1' ```vue <!--- 在template的editbox中使用 -----> <ClassNameSelector v-model="args.clsname1"/> ``` - 提供一个带有标题的类选择器,用于选择一个类,选定的类名保存为组件的'args.clsname1'。标题名叫"目标类" ```vue <!--- 在template的editbox中使用 -----> <div> <p>目标类</p> <ClassNameSelector v-model="args.clsname1"/> </div> ``` - 提供两个带有标题的类选择器,用于选定“左类”和“右类”,选定的类名保存为组件的'args.leftClassName'和'args.rightClassName' ```vue <!--- 在template的editbox中使用 -----> <div> <p>选择类1</p> <ClassNameSelector v-model="args.className1"/> </div> <div> <p>选择类2</p> <ClassNameSelector v-model="args.className2"/> </div> ``` - 联合使用类选择器与属性选择器,使得当选定一个类时,可以进一步选定类的属性。选定的属性名保存为组件的'args.attr3',并且监听类名清空类选择器相关 ```vue <!--- 在template的editbox中使用 ----> <ClassNameSelector v-model="args.classNameForAttr3"></ClassNameSelector> <AttributeSelector :class-name="args.classNameForAttr3" v-model="args.attr3"></AttributeSelector> <script> export default { data () { return { args: { classNameForAttr3: '', attr3: '' } } }, watch: { 'args.classNameForAttr3'(val){ if(!val){ this.args.attr3 = ''; } } } } </script> ```
# 表单选择器 FormSelector This component is borrowed from `@/ext_components/form/subcomponent/BindFormBar` and I personally see fit for this module. However it's necessary to polish the code and tidy the `props/emits`. I leave the space below for further docs supplements :) - props - targetClass 目标类 - currentViewName 当前选择的表单 - defaultFormName 默认显示的表单 - targetFormType 要查询的表单类型 'PC' | 'Mobile' - classType 要查询的目标类类型 'e'(实体类) | 'r'(关联类) - root 表单建模的公用函数库(必须) - event - onChange 表单切换事件,用于保存表单名 - example 单独使用 ```vue <FormSelector :addinName="name" :targetClass="'Animate'" :currentViewName="'create'" :defaultFormName="'create'" :targetFormType="'PC'" :root="root" :classType="'e'" @on-change="handleFormChange" > </FormSelector> ... <script> export default { data () { }, methods: { handleFormChange(formName) { this.viewName = formName; }, } } </script> ``` - 与类选择器配合使用 ```vue <ClassNameSelector v-model="args.targetClass"/> <FormSelector :targetClass="args_targetClass" :defaultFormName="args.formName" :targetFormType="'PC'" :classType="args_targetClassType" @on-change="formSelectorChange"> </FormSelector> ... <script> export default { data () { }, computed: { args_targetClass(){ return this.args.targetClass ? this.args.targetClass.split('\&')[0] : '' }, args_targetClassType(){ return this.args.targetClass ? this.args.targetClass.split('\&')[1] : 'e' } }, methods: { formSelectorChange(formName) { this.args.formName = formName; }, } } </script> ```
# 颜色选择器 ColorSelector 用于选择一个颜色值,可以通过开关控制是否带有透明度 v-model: (__必填__)颜色值,是一个字符串,开启alpha时为"rgb(x, y, z, a)", 否则为 #rrggbb props: - alpha 类型:Boolean 说明:是否支持透明度选择 默认值:false emits: - input (用于v-model) 说明:当选定颜色后触发 payload:(选定的颜色值) where 选定的颜色值 is of type STRING and of pattern ('rgb(x, y, z, a)' or '#rrggbb') usage example: - 提供一个颜色选择器,用于选择一个颜色。颜色值保存为组件的'args.color' ```vue <!-- 使用选中图片作为div的背景 --> <div :style="{'backgroundColor': args.color}" style="width: 500px; height: 400px;"></div> <!-- Editbox中 --> <ColorSelector v-model="args.color"></ColorSelector> ```
<template> <div class="image-selector-container"> <Select class="margin1" v-model="value.imgOrigin" @on-change="switchOrigin"> <Option value="imgBase">图片库</Option> <Option value="imgSelf">自定义</Option> </Select> <Input class="margin1" type="textarea" :autosize="true" v-model="value.back_picture" @on-focus="chooseOrigin"/> <!-- 图片库编辑弹窗 --> <ImgEditModal ref="img_modal" @transferImg="getImgUrl"></ImgEditModal> </div> </template> <script> import ImgEditModal from "@/ext_components/form/subcomponent/ImgCommonModal"; const isDef = v => typeof v !== 'undefined'; export default { name: "ImageSelector", components: { ImgEditModal }, props: { // note: implicit data modification value: { type: Object, required: true, validator: v => { return isDef(v.imgOrigin) && isDef(v.back_picture); } } }, methods: { switchOrigin(value) { this.value.back_picture = ''; }, // 选择背景图片来源 chooseOrigin() { if (this.value.imgOrigin === 'imgBase') { this.$refs.img_modal.editModal(this.value.back_picture, '图片'); } }, // 选择背景图片 getImgUrl(data, index) { if (data == null) { this.value.back_picture = ''; } else { this.value.back_picture = data.oid; } // ??? dead code // this.value.picActIndex = index; }, } } </script> <style scoped> </style>
sdkdemo文件
为工作流模板编辑器提供的:EditBoxSelector
<template> <Row> <Col span="12"> <div> <p>args.title: {{ args.title }}</p> <br> <p>args.id: {{ args.id }}</p> <br> <p>args.name: {{ args.name }}</p> <br> <p>args.bindTargetClass: {{ args.bindTargetClass }}</p> <br> <p>args.label: {{ args.label }}</p> <br> <p>args.format: {{ args.format }}</p> <br> <p>args.defaultValue: {{ args.defaultValue }}</p> <br> <p>args.defaultValueType: {{ args.defaultValueType }}</p> <br> <p>args.maxPageSize: {{ args.maxPageSize }}</p> <br> <p>args.filterQuery: {{ args.filterQuery }}</p> <br> <p>args.encodePrefix: {{ args.encodePrefix }}</p> <br> <p>args.height: {{ args.height }}</p> <br> <p>args.heightType: {{ args.heightType }}</p> <br> <p>args.width: {{ args.width }}</p> <br> <p>args.widthType: {{ args.widthType }}</p> <br> <p>args.bgImg.imgOrigin: {{ args.bgImg.imgOrigin }}</p> <br> <p>args.bgImg.backPicture: {{ args.bgImg.backPicture }}</p> <br> <p>args.backColor: {{ args.backColor }}</p> <br> <p>args.labelFontColor: {{ args.labelFontColor }}</p> <br> <p>args.txtFontColor: {{ args.txtFontColor }}</p> <br> <p>args.txtBgColor: {{ args.txtBgColor }}</p> <br> <p>args.lfsize: {{ args.lfsize }}</p> <br> <p>args.lfsizeType: {{ args.lfsizeType }}</p> <br> <p>args.fsize: {{ args.fsize }}</p> <br> <p>args.fsizeType: {{ args.fsizeType }}</p> <br> <p>args.required: {{ args.required }}</p> <br> <p>args.readonly: {{ args.readonly }}</p> <br> <p>args.hided: {{ args.hided }}</p> <br> </div> </Col> <Col span="12"> <EditBoxSelector v-model="args" :tabList="tabList" > </EditBoxSelector> </Col> </Row> </template> <script> export default { name: "EditBoxSelectorDemo", props: ['store'], data(){ return { args: { title: 'EditBox选择器', id: '', name: '', bindTargetClass: '', label: '', format: '', defaultValue: '', defaultValueType: 'date', maxPageSize: 100, filterQuery: '', encodePrefix: '', height: 30, heightType: 'px', width: 100, widthType: '%', bgImg: { imgOrigin: 'imgBase', backPicture: '' }, backColor: '#fff', labelFontColor: '#000', txtFontColor: '#000', txtBgColor: '#fff', lfsize: 14, lfsizeType: 'px', fsize: 14, fsizeType: 'px', required: false, readonly: false, hided: false, }, tabList: { attribute: { label: '选项', show: true }, advanced: { label: '高级', show: false }, layout: { label: '样式', show: true }, operation: { label: '事件', show: true }, } } } } </script> <style scoped> </style>
控制弹框的时候是否显示默认操作
//openForm取消默认操作参数 //args参数新增needDialogDefaultOpr字段,为false时不显示默认操作按钮 var args = { needDialogDefaultOpr: false } this.openForm(targetClass, viewName, args); //前端脚本this.env新增功能 //url全路径:this.env.url //协议类型:this.env.protocol //executeOperation的resolve方法 //脚本实现,重要:需要在流程前处理事件的脚本中调用 this.resolve({ a: 1 }) //调用时执行流程前处理函数 this.getOperation("流程前处理","workflow").then(res => { var opr = res.data.data; //自定义参数 var customData = { "参数1":"飞飞飞", "参数2":"天天天" }; var resolve = (res) => { console.log(res) // =>{a: 1} } //执行后端脚本 this.executeOperation(opr,customData, resolve); });
sdk操作插件实现的时候,如果一个非操作控件事件绑定了一个操作插件,并且操作插件并没有实现canShow()函数,那么这个控件事件调用时会执行操作插件的onHandle()逻辑
1、在文本框的获得焦点事件中绑定了OprDemo操作插件
2、在操作插件中实现onHandle方法
3、当文本框获得焦点时