formCreate 表单
1. 全局引入formcCreate
main.js
import formCreate from '@form-create/element-ui'//表单设计器引入
Vue.use(formCreate)
<form-create v-model="fApi" :rule="freeRule" :option="freeOptions" :value.sync="freeForm" class="formCreate"/>
data 中：
//统一配置form表单
freeOptions:{
form: {
inline: true,
labelWidth: null,
},
submitBtn:{
type: "primary",
plain: true,
round: false, //是否圆角按钮
loading: false,//是否加载中状态
disabled: false,//是否禁用状态
innerText: '查 询',
click:()=>this.handleSearchSubmit()//事件名
},
resetBtn:{
type: "primary",
plain: true,
round: false, //是否圆角按钮
loading: false,//是否加载中状态
disabled: false,//是否禁用状态
innerText: '重 置',
icon:"",
show:true, //显示隐藏
click:()=>this.handleSearchReset() //事件名
}
},
computed:
配置form 表单的数据
computed: {
freeRule:function(){
return[
{
type: "select",
title: "",
field: "arapType",
props: {
placeholder: '类别',
clearable:true,
},
options:[
{value: "AR",label: "应收",},
{value: "AP",label: "应付",},
]
},
{
type: "select",
title: "",
field: "ppCc",
props: {
placeholder: '付费方式',
clearable:true,
},
options:[
{value: "PP",label: "PP/预付",},
{value: "CC",label: "CC/到付",},
]
},
{
type: "base-selectPage",
title: "",
field: "feeItemId",
props: {
placeholder: '费用名称',
clearable:true,
data: this.feeName_options,
keyField: 'pubFeeItemId',
showField: 'nameCn',
concatField:"code_nameCn",//concatField 优先级高于searchField ，是类似于回显拼接的形式
searchField: 'searchField',
tbColumns: [
{ title: 'CODE', data: 'code' },
{ title: '中文名', data: 'nameCn' },
{ title: '英文名', data: 'nameEn' },
],
},
// options:changeOptionsName(this.feeName_options,"pubFeeItemId","nameCn"),
// ...commonProps
},
{
type: "base-selectPage",
title: "",
field: "customerId",
props: {
data: "/transportPrice-api/crm/corporation/getSimpleTypePage/1",
keyField: 'pubCorporationId',
showField: 'nameCn',
searchField: 'keyword',
concatField:"code_nameCn",
clearable:true,
searchParams:{customerStep:1},
placeholder:"结算公司",
tbColumns: [
{ title: 'CODE', data: 'code' },
{ title: '中文名', data: 'nameCn' },
{ title: '英文名', data: 'nameEn' },
],
}
},
{
type: "select",
title: "",
field: "unit",
props: {
placeholder:'单位',
clearable:true,
},
options:changeOptionsName(this.unit_options,"code","code"),
},
{
type: "select",
title: "",
field: "currency",
props: {
placeholder:'币制',
clearable:true,
},
options:changeOptionsName(this.currency_options,"code","code"),
},
{
type: "input",
title: "",
field: "startAmount",
col:{
span:12
},
props: {
placeholder: '金额起',
clearable:true,
},
},
{
type: "input",
title: "一",
field: "endAmount",
col:{
span:12
},
props: {
placeholder: '金额止',
clearable:true,
},
},
{
type: "select",
title: "",
field: "payPlace",
props: {
placeholder:'结算方式',
clearable:true,
},
options:changeOptionsName(this.payPlace_options,"code","nameCn"),
},
{
type: "select",
title: "",
field: "corpName",
props: {
placeholder:'结算地',
clearable:true,
},
options:changeOptionsName(this.settlementPlace_options,"corpidop","name"),
},
{
type: "input",
title: "",
field: "remark",
props: {
placeholder: '备注',
clearable:true,
},
},
]
}
},
utils.js 配置数据名称的转换
/**
* 修改键名
* @param {*} arr
* @param {*} oldName
* @param {*} newName
*/
export function changeOptionsName (arr = [], oldValue, oldLabel, newValue = 'value', newLabel = 'label') {
const arr1 = []
if (arr && arr.length) {
for (let i = 0; i < arr.length; i++) {
const r = JSON.parse(JSON.stringify(arr[i]));
oldValue && (r[newValue] = r[oldValue])
oldValue && delete r[oldValue]
oldLabel && (r[newLabel] = r[oldLabel])
oldLabel && delete r[oldLabel]
arr1.push(r)
}
}
return arr1
}
获取fomCreate
handleSearchSubmit(){
this.fApi.submit((formData,fApi) =>{
console.log(JSON.stringify(formData));
this.getList(formData);
})
},
// 重置
handleSearchReset(){
this.fApi.resetFields();
}
