@tongfun/tf-widget NPM

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

方式一：(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为依据，加载对应的表单组件，达到效果如果要添加新的基础资料，按照遗下步骤进行操作