2021-双十二版-培训手册
页面树结构
转至元数据结尾
转至元数据起始

表单控件使用的标准选择器

利用Modeler端可配置组件封装（x-selector-encapsulation）的能力对控件属性面板重新进行封装，优化代码可读性

开发说明：

  1. 类选择，颜色选择，表单选择，图片库封装和之前一样无变化
  2. 类属性选择去掉目标属性功能，通过配置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、当文本框获得焦点时

  • 无标签