建设中...,关于AttributeSelector的用法先列出源代码,后续要继续完善:
...
目录
表单控件使用的标准选择器
利用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> |
...
示例:
...
language | js |
---|
<!-- 或者使用常量,如下所示 --> <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> |
...
ClassNameSelector:
...
```
- 如果想要使用新增属性的功能,需要补充参数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 |
...
v-model: (__必填__)目标类的属性名,string类型
用于选择一个实体类或者关系类。返回选定类的类名(可能需要进一步判断是否为关联类) 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'。标题名叫"目标类" |
...
language | js |
---|
...
```vue <!--- 在template的editbox中使用 -----> <div> <p>目标类</p> <ClassNameSelector v-model="args.clsname1"/> </div> |
...
ImageSelector
...
示例:
...
language | js |
---|
...
``` - 提供两个带有标题的类选择器,用于选定“左类”和“右类”,选定的类名保存为组件的'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
...
```
|
代码块 |
---|
# 颜色选择器 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' |
...
language | js |
---|
```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文件
View file | ||||
---|---|---|---|---|
|
为工作流模板编辑器提供的: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、当文本框获得焦点时