TF-Widget

文档地址：组件库文档

表格组件：umy-ui

1. TfInput

• 此组件为ElementUi 组件二次封装，支持ElementUi控件所有属性
• 包含除了基础资料外的常见基本组件，提供统一的样式，和统一入口，基本配置
• 组件默认在el-form表单中使用，也可以在表单之外使用[需传入not-form属性]

1.1 基本使用

<el-form :model="form">
  <!-- 文本输入框 -->
  <TfInput v-model="form.test1" title="输入框" type="input" />
  <!-- 文本输入框 input可以省略 -->
  <TfInput v-model="form.test1" title="输入框" />

  <!-- 文本域输入 -->
  <TfInput v-model="form.test2" title="文本" type="textarea" />
  <TfInput v-model="form.test2" title="文本" type="textarea" :rows="4" />

  <!-- 日期和日期时间输入 -->
  <TfInput v-model="form.test3" title="日期" type="date" />
  <TfInput v-model="form.test4" title="日期时间" type="dateTime" />

  <!-- 数字输入 -->
  <TfInput v-model="form.test5" title="整数" type="integer" />
  <TfInput v-model="form.test6" title="小数" type="decimal" :percision='4' />

  <!-- enumType/id 是获取下拉选项的参数 可从租户管理枚举配置中获取(或者联系后端) -->
  <TfInput v-model="form.test7" title="下拉选择框" type="select" enumType='UP_DOWN' />
  <TfInput v-model="form.test7" title="下拉选择框" type="select" id='2022523' />
  <!-- 下拉选择框 默认绑定的对象是 { name: null, id: null } 格式-->
  <!-- 可以通过传入showFields修改格式 -->
  <TfInput v-model="form.test7" title="下拉选择框" type="select" :show-fields="{ value: 'id', label: 'label' }" />
  <!-- 支持自定义传入下拉数组options -->
  <TfInput v-model="form.test7" title="下拉选择框" type="select" :options="optionList" />
  
  <!--基础资料，需要提供code-->
  <TfInput v-model="form.test8" title="基础资料" type="basicData" code="20220506141102" />
  <!-- 基础资料遇见弹框嵌套问题时，传入append-to-body属性 -->
  <TfInput v-model="form.test8" title="基础资料" type="basicData" code="20220506141102" append-to-body />

  <!--基础资料展示字段  用于创建人，创建时间等永远不会被更改的基础资料字段，可以节省性能和内存-->
  <TfInput v-model="form.test9" title="基础资料展示字段" type="basicDisplay" />
</el-form>

1.2 在表单中加入校验

使用方式与Element一致（添加prop属性）

<el-form model="form" :rules="formRules">
  <TfInput v-model="form.test1" title="输入框" prop="test" type="input"/>
  <TfInput v-model="form.test2" title="文本" prop="test2" type="text"/>
  <TfInput v-model="form.test3" title="日期" type="date"/>
  <TfInput v-model="form.test4" title="日期时间" type="datetime"/>
  <TfInput v-model="form.test5" title="整数" type="integer"/>
  <TfInput v-model="form.test6" title="小数" type="decimal"/>
</el-form>    

1.3 Props

| 属性 | 作用 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | type | 控件类型 | input / select / integer / decimal / date / datetime / basicData / basicDataDisplay | input | | title | 表单模式下的label | string | | | prop | 表单模式下校验绑定的字段 | string | | | id | 用于type为select时获取下拉数组的参数 | string | | | enumType | 用于type为select时获取下拉数组的参数 | string | | | options | 用于type为select时自定义的下拉数组 | array | | | show-fields | 用于type为select时自定义的下拉数据格式 | { value: string, label: string } | | | append-to-body | 用于解决type为basicData引起的弹窗嵌套问题 | boolean | false | | notForm | 为true时表示不在表单中使用，仅仅是使用控件，忽略prop title等属性 | boolean | false | | labelWidth | elform中的label宽度 | string | 150px | | fullBorder | 为true时表示input的边框完全显示，而非只显示下边框 | boolean | false |

1.4 其他说明

有问题及时提出，联系@YSL

2. TfFormBody

2.1 案例

    <TfFormBody
      ref="formBodyRef"
      :data="data"
      :calculations="calculations"
      :before-add-row="beforeAddRow"
      :after-add-row="afterAddRow"
    >
      <TfFormBodyItem
        title="物料名称"
        field="materialInfo"
        prop="materialInfo"
        type="basicData"
        code="5a281b7db87c406b83616986f40e0846"
        @selected="selectedaterial"
      />
      <TfFormBodyItem
        title="仓位"
        field="warehousePositionInfo"
        prop="warehousePositionInfo"
        type="basicData"
        code="20220506141103"
        :before-input="judgeMaterial"
        :limitation="[{ field: 'warehouseInfo', value: 'warehouseInfo', type:'field' }]"
      />
      <!-- precision默认值是2 -->
      <TfFormBodyItem title="数量" field="number" type="decimal" :percision="4" />
      <TfFormBodyItem title="单价" field="price" type="decimal" :percision="2" />
      <TfFormBodyItem title="总额" field="amount" type="decimal" :percision="2" />
      <TfFormBodyItem title="是否启用" field="isActive" type="select" enum-type='YES_OR_NO'/>
      <!-- 默认类型就是input，可以省略 -->
      <TfFormBodyItem title="姓名" field="name" type="input" />
      <TfFormBodyItem title="出生日期" field="birthDate" type="date" />
      <TfFormBodyItem title="审核时间" field="auditTime" type="datetime" />
    </TfFormBody>

export default {
  data(){
    return {
      caculations:{
        amount:'#{number} * #{price}'
      }
    }
  },
  methods:{

    /** 新增行之前的钩子 */
    beforeAddRow(done) {
      // some check
      done()
    },

    /** 新增行之后的钩子 */
    afterAddRow() {
      // some data change
    },

    /** 物料名称选择后的方法 */
    selectedaterial(row, $event){
      // some data change
    },

    /** 仓位基础资料输入前的校验 */
    judgeMaterial(done){
      // some check
      done()
    }

  }
}

2.2 Props

| 属性 | 作用 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | data | 表格数据 | Array | [] | | rules | 校验对象，可参考ElementUi | Object | null | | calculations | 列表行字段之间的计算关联 | Object | null | | disableButtons | 禁用(新增行，删除行，批量填充按钮时使用), 可选['add', 'del', 'batchFill'] | Array | [] | | modelAdditionalProperties | 单据体中有个字段是不显示的字段，但是操作的时候会用到，需要用此属性初始化该字段：[{ field:'active',default:false }] | Array | [] | | before-add-row | 添加数据行（点击单据体新增按钮）之前执行 | Function | null | | after-add-row | 添加数据行之后执行 | Function | null |

2.3 Methods

| 方法名 | 作用 | | ---- | ---- | | validate | 校验表格数据，返回值为true时表示校验通过 | | getFormatData(filter) | 输出格式化之后的数据， filter为可选自定义过滤函数 | | calculate(row) | 针对某一行，重新进行列之间的数学表达式计算 | | calculateRow(rows) | 批量进行计算 |

3. TfFormBodyItem

3.1 Props

| 属性 | 作用 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | title | 列表的列标题 | string | | | field | 数据模型的字段 | string | | | width | 列的默认宽度 | string | '150px' | | readOnly | 不可编辑列 | Boolean | false | | precision | 小数保留位数 | Number | 2 | | limitation | 限定基础资料的查询范围 | Array | [] | | default | 列字段的默认值 | [String, Number, Object, Boolean] | | | showMessage | 编辑列的自定义显示值的方法 | Function | |

limitation属性特别说明：

表体一行数据中，有省和市两个基础资料，选择了省后，市就只能选择该省下的所有的市
使用limitation的方式就是，首先市这个基础资料一定有一个字段，叫省，然后传入以下两种方式之一：

• 方式一：(province = '江苏' 的数据)

[{ field: 'province', type:'value', value:'江苏' }]

• 方式二：(取字段值，province = scope.row.province)

[{ field: 'province', type:'field', value:'province' }]

3.2 Event

| 方法名 | 作用 | | ---- | ---- | | change | function({ row, value }) 值发生改变 | | selected | function({ row, value }) 基础资料选中事件 |

4 关于标准化之后的基础资料表单

4.1 说明

标准化，是按照金蝶的控件功能来实现基础资料的弹窗列表中，可以直接打开表单新增和修改的数据的功能原型 因为缺少通用表单的功能，所以现在将全部的用作基础资料的表单迁移到本包中 在基础资料的通用控件中，通过动态的异步组件，以code为依据，加载对应的表单组件，达到效果 如果要添加新的基础资料，按照遗下步骤进行操作

• 1 在basic-datas目录添加子目录，添加表单组件
• 2 在@enums中registerSheet文件中，添加code到目录名的映射关系
• 3 在@components/basic-form-edit中componets选项中异步的引入相关的基础资料表单组件