@tongfun/tf-widget v0.2.19-beta.8
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为依据,加载对应的表单组件,达到效果 如果要添加新的基础资料,按照遗下步骤进行操作
- 1 在basic-datas目录添加子目录,添加表单组件
- 2 在@enums中registerSheet文件中,添加code到目录名的映射关系
- 3 在@components/basic-form-edit中componets选项中异步的引入相关的基础资料表单组件
5 months ago
5 months ago
7 months ago
6 months ago
6 months ago
6 months ago
8 months ago
7 months ago
8 months ago
9 months ago
9 months ago
8 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago