财务孪生v1.0推出新版筛选组件，可自定义配置查询功能区筛选项，集成封装了如下功能：下拉选择框、弹出选择框、文本输入框、数字范围输入框、日期范围选择框、城市选择框

企业微信截图_17201678237490.png

组件设计

组件设计为父级弹窗容器包含内部的选择组件
弹窗容器衔接内外部的数据和UI交互，以及内部选择组件之间的数据和事件通讯
外部通过传入配置项来控制弹窗容器需要展示的选择组件以及对应属性

组件使用

<twin-filter
   :default-value="searchForm"
   :search-info="searchOption"
/>


import twinFilter from '@zfs/boe-h5/src/components/twinFilter';

export default {
  setup() {
    const searchForm = ref({}); // 筛选组件表单数据
    const searchOption = ref([ // 配置项
      {
        label: '交易内容',
        code: 'transactionContent',
        type: 'text',
        placeholder: '请输入交易内容',
        options: {
          maxlength: 63,
        },
      },
      {
        label: '报销状态',
        code: 'reimbursementStates',
        type: 'check',
        fastCode: 'REIMBURSEMENT_STATE',
        showLabel: 'reimbursementName',
      },
    ]);
    return {
      searchForm ,
      searchOption,
    };
  },
};

配置项说明

参数	说明	类型	是否必填	备注
type	筛选项类型	string	必填	文本输入框： ’text‘ 下拉单选框： ’select‘ 下拉多选框: 'check' 数字输入框：'number' 日期选择框: 'date' 城市选择框: 'city' 弹出选择框: 'table'
label	展示名称	string	必填
code	字段名称	string	必填
showLabel	code对应的名称字段名	string	弹出/城市选择框必填	1. 配置后，选择时会将该字段的值带到选择结果中 2. 在弹出选择框和城市选择框中，该字段可用于反显
options	额外属性配置项 1. 在文本输入框中代表van-field属性 2. 在选择框中代表静态选择项	object	非必填	例： options: { maxlength: 50, // 输入框限制长度 ...其他van-field属性 }
fastCode	选择框数据源使用该快速编码方式获取	string	非必填
ajax	选择框数据源使用该接口地址请求数据	string	非必填
method	ajax请求方式	string	非必填	默认post
start	范围选择起始字段名	string	范围选择框必填
end	范围选择结束字段名	string	范围选择框必填
rowKey	key取值字段	string	弹出/城市选择框必填
rowName	name取值字段	string	弹出/城市选择框必填
multiple	弹出/城市选择框是否多选	boolean	非必填
requestUrl	弹出选择框查询接口地址	string	非必填
service	不传requestUrl，则从/${service \|\| 'base'}/lov/findDatas接口中取数据，需要传service和lovKey	string	非必填	例：service: 'common'
lovKey	同上	string	非必填	例：lovKey: 'zfsAuth.findEmpNoValidity'
isFormData	是否需要序列化传参	boolean	非必填
params	表格查询时附带参数	object	非必填	例： params: { limit: 100, },
extraKeys	需要额外传的字段集合描述： code: 传出的字段名 key: 取值字段名	object	非必填	例： extraKeys: [ { code: 'operationTypeCode', key: 'CODE' }, ]
config	弹出选择框表格描述配置传requestUrl才会生效，传lovKey则会自动取接口下发字段	object	非必填	例： config: { field: [ // 表格展示columns配置 { code: 'addressName', label: '场所名称', }, { code: 'addressInfo', label: '场所地址', }, ], query: [ // 表格查询字段配置 { code: 'keyword', label: '场所名称', }, ], }
trans	查询接口字段与提交的字段名转换配置	array	非必填	例： trans: [ { from: 'id', to: 'twinAddressId', }, { from: 'addressName', to: 'twinAddressName', }, { from: 'location', to: 'location', }, ]

财务孪生筛选组件分享和配置说明

财务孪生筛选组件分享和配置说明

关于作者

目录