使用Online表单开发生成前后端代码,前端代码运行时是这样:
想要加上一些详细查询条件:比如select查询或者是时间查询,如:
可在前端生成的文件.data.ts中找到此处对应代码:
//查询数据
export const searchFormSchema: FormSchema[] = [
];
对其进行代码编辑:
//查询数据
export const searchFormSchema: FormSchema[] = [
{//选择框
label: '类型选择',
field: 'selectType',
component: 'JDictSelectTag', //此处我应用了数据字典
componentProps:{
dictCode:"device_class"
},
//若仅使用普通下拉选择框可使用:
//component: 'Select',
//componentProps: {
// options: [
// { label: '国内订单', value: '1', key: '1' },
// { label: '国际订单', value: '2', key: '2' },
// ],
//},
},
{//时间选择框
label: '时间',
field: 'createTime',
component: 'RangePicker', //时间选择器
componentProps:{
valueFormat: "YYYY-MM-DD HH:mm:ss", //可选,绑定值的格式
showTime:true, //日期选择框中是否显示时间
},
},
{//输入框
label: '输入框',
field: 'keyWord',
component: 'Input',
},
];
与 Ant Design Vue 中组件属性相同,若有其他需求可再次处添加相应属性。
若是只添加上一块代码,根据时间请求其返回结果不对,它只会显示createTime=结束日期的,需要在使用的vue文件中加入一段代码:
formConfig: { // 配置form表单
//labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
fieldMapToNumber: [],
fieldMapToTime: [['createTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD HH:mm:ss']],
},
这样就可以正常请求啦