tf-widget v0.2.28

TF-Widget

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

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

2.3 Methods

3. TfFormBodyItem

3.1 Props

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

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

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

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

3.2 Event