xmceloan-form-design-cst

表单设置组建

属性：
widgetForm 配置项
defaulTypeList 默认值类型配置项
widgetFormSelect 配置项选中项
selectList 体验事项 (动态下拉框传入参数[ { value: 1, label: '13' },{ value: 2, label: '22' },])
stencil 模版组件 (参数与配置项list相同)
事件：
@handleClear 清空事件的回调

表单展示组建

属性：
widgetForm 配置项
widgetModels 配置项默认值对象
resetWord 重置按钮文字
saveWord 保存按钮文字
submitWord 提交按钮文字
closeWord 关闭按钮文字
isShowBtn 是否显示提交按钮
isShowReset 是否显重置值按钮
isShowSave 是否显示保存按钮
isShowClose 是否显示关闭按钮
isShowLine 是否显示按钮顶部与表单顶部的线条
isConfirm 提交时是否需要二次确认提示
isView 是否禁用表单
loadDown 附件下载接口地址 //'/common/download/resource?filePath='
upload 附件上传接口地址 //
upLoadBaseUrl 附件下载地址前缀 // ‘http://10.0.251.212:8888’
data 附件上传参数
headers 附件上传请求头信息
btnposition 按钮水平布局控制
size 按钮尺寸
事件：
@saveCallback 保存按钮回调事件 =>(formData) 保存回调不经过表单rules验证
@closeHandleTest 关闭按钮回调事件
@resetCallback 重置按钮回调事件
@addCallback 提交按钮回调事件 =>(formData) 需要经过表单rules验证
@uploadDown 附件下载回调事件 =>(data) projectName=='haicang' 专用

默认值回显

默认值数组
valueObj: {
checkBoxInput_1636427365000_55187: [
{
option: 'Option 1',
input: '12'
}
],
input_1636427380000_90623: '123123',
time_1636427386000_83661: '09:50:58',
checkbox_1636427361000_29174: ['Option 1', 'Option 2'],
input_1636427352000_34791: '11',
textarea_1636427357000_13834: '22'
},
配置项数组
widgetForm: {
list: [
{
key: '1638175179000_76523',
rules: [],
model: 'imgupload_1638175179000_76523',
typeName: '上传文件',
type: 'imgupload',
options: {
innerWidth: '100%',
isQiniu: false,
tokenFunc: 'funcGetToken',
width: '',
domain: 'http:\/\/pfp81ptt6.bkt.clouddn.com\/',
disabled: false,
length: 8,
size: {
width: 100,
height: 100
},
multiple: false,
defaultValue: [
{
status: 'success',
uid: 1638175185056,
name: '体验官表单.jpg',
url:
'\/2021\/11\/29\/6d64177c-ea56-47ba-874b-86919ad2b92a.jpg'
}
],
token: '',
isDelete: false,
isEdit: false,
action: 'https:\/\/jsonplaceholder.typicode.com\/photos\/',
remoteFunc: 'func_1638175179000_76523',
min: 0
},
name: '上传文件',
icon: 'icon-tupian'
}
],
config: { labelWidth: 100, labelPosition: 'right', size: 'small', projectName:'haicang' }
},
回显方法
valueInit() {
// if (res.data.representation && res.data.values) {
// let data = JSON.parse(res.data.representation);
let data = this.widgetForm
// console.log("表单", data);
// 处理表单回显
for (let i in data.list) {
if (data.list[i].type == 'grid') {
//栅格布局
for (let j in data.list[i].columns) {
this.listInit(data.list[i].columns[j].list)
}
} else {
//普通布局
this.listInit([data.list[i]])
}
}
const arr = data.list.map(v => {
if (v.name == '体验事项') {
v.option.option == this.selectList
return v
} else {
return v
}
})
this.widgetFormValue = {
list: arr,
config: {
...data.config
}
}
this.$refs.previewPage.referKey++
},
listInit(_list) {
for (let i in this.valueObj) {
let _index = _list.findIndex(function(params) {
return params.model == i
})
if (_index > -1) {
if (_list[_index].type == 'checkBoxInput') {
const boxList = []
const inputList = []
this.valueObj[i].map(v => {
boxList.push(v.option)
inputList.push(v.input)
})
_list[_index].options.previewValue.boxlist = boxList
_list[_index].options.previewValue.valueList = _list[
_index
].options.options.map(v => {
return v.value
})
_list[_index].options.previewValue.valueList.map((v, i) => {
boxList.map((j, k) => {
if (j == v) {
return (_list[_index].options.previewValue.inputList[i] =
inputList[k])
}
})
})
} else if (_list[_index].type == 'radioInput') {
if (this.valueObj[i][0]) {
const boxList = this.valueObj[i][0].option
const inputList = []
this.valueObj[i].map(v => {
inputList.push(v.input)
})
_list[_index].options.previewValue.boxlist = boxList
const a = (_list[_index].options.previewValue.valueList = _list[
_index
].options.options.map(v => {
return v.ifRemark
}))
a.map((v, i) => {
if (v) {
_list[_index].options.previewValue.inputList[i] = inputList[0]
} else {
_list[_index].options.previewValue.inputList[i] = ''
}
})
}
} else if(_list[_index].type == 'table'){
console.log(i)
_list[_index].tableData = this.valueObj[i]
console.log(_list[_index].tableData)
}else{
_list[_index].options.defaultValue = this.valueObj[i]
}
}
}
},

配置项示例
widgetModels: {
table_1641263289000_33408: [
{
input_1641263672000_31294: '3',
input_1641263676000_59762: '4',
row_index: 0,
input_1641263681000_1135: '7',
input_1641263665000_36914: '1',
input_1641263678000_77264: '5',
input_1641263669000_2609: '2'
},
{
input_1641263669000_2609: '1234',
input_1641263678000_77264: '1234567',
input_1641263676000_59762: '123456',
row_index: 1,
input_1641263681000_1135: '12345678',
input_1641263665000_36914: '123',
input_1641263672000_31294: '12345'
}
],
input_1641266034000_77509: '222',
input_1641368888000_7072: '444'
},
stencil: [
{
type: 'text',
name: '文字',
typeName: '文字',
noLabel: false,
icon: 'icon-wenzishezhi-',
options: {
defaultValue: '设置默认值',
customClass: '',
layout: 'left',
fontSize: '14',
color: '#333333',
bold: false,
italic: false,
lineStyle: 'none',
remoteFunc: 'func_1638430361000_47102'
},
key: '1638430361000_47102',
model: 'text_1638430361000_47102',
rules: []
},
{
type: 'input',
noLabel: false,
name: '单行文本',
typeName: '单行文本',
icon: 'icon-diy-com-textarea',
options: {
innerWidth: '100%',
width: '100%',
defaultValue: '',
defaultValueType: '',
required: true,
dataType: 'string',
ywType: '',
pattern: '',
placeholder: '',
disabled: false,
layout: 'left',
fontSize: 14,
color: '#333333',
labelPosition: 'left',
remoteFunc: 'func_1638500005000_54617'
},
key: '1638500005000_54617',
model: 'input_1638500005000_54617',
rules: [
{
type: 'string',
message: '单行文本格式不正确'
},
{
required: true,
message: '单行文本必须填写!'
}
]
},
{
type: 'radioInput',
name: '单选配置',
typeName: '单选配置',
icon: 'icon-wenzishezhi-',
options: {
defaultValue: '',
previewValue: {
boxlist: '',
inputList: [],
valueList: []
},
inline: false,
showLabel: false,
labelTitle: '',
options: [
{
value: 'Option 1',
label: 'Option 1',
ifRemark: true,
ifRequired: false,
description: ''
},
{
value: 'Option 2',
label: 'Option 2',
ifRemark: false,
ifRequired: false,
description: ''
},
{
value: 'Option 3',
label: 'Option 3',
ifRemark: false,
ifRequired: false,
description: ''
}
],
cascader: false,
required: false,
requiredSelf: true,
innerWidth: '100%',
width: '',
max: 3,
disabled: false,
bold: false,
italic: false,
remoteFunc: 'func_1638502919000_79155'
},
key: '1638502919000_79155',
model: 'radioInput_1638502919000_79155',
rules: []
}
],
defaulTypeList: [
{ value: 'ENTERPRISE_NAME', label: '企业名称' },
{ value: 'ENTERPRISE_CODE', label: '统一社会信用代码' },
{ value: 'ORGANIZATION_CODE', label: '组织机构代码' },
{ value: 'REGISTERED_ADDRESS', label: '注册地址' },
{ value: 'REGISTERED_CAPITAL', label: '注册资本' },
{ value: 'INFORMANT_NAME', label: '填报人' },
{ value: 'INFORMANT_PHONE', label: '填报人手机号' },
{ value: 'LEGAL_REPRESENTATIVE_NAME', label: '法人代表姓名' },
{ value: 'LEGAL_REPRESENTATIVE_CERT_TYPE', label: '法人代表证件类别' },
{
value: 'LEGAL_REPRESENTATIVE_CERT_NUMBER',
label: '法人代表证件号码'
},
{ value: 'LEGAL_REPRESENTATIVE_CONTACT', label: '法人联系方式' },
{ value: 'BUSINESS_ADDRESS', label: '经营地址' },
{ value: 'INDUSTRY_CODE', label: '所属行业' },
{ value: 'REGISTRATION_DATE', label: '登记日期' },
{ value: 'REGION', label: '所在区域' }
],
selectList: [
{ value: 1, label: '13' },
{ value: 2, label: '22' },
{ value: 3, label: '31' },
{ value: 31, label: '33331' }
]

强化js 使用规范
(function(){ (默认生成匿名立即执行函数)
$('input[id=input_1641266034000_77509]')[0].dispatchEvent(new Event('input')), (激活目标组件的dom与vue双向绑定关联)
$('input[id=input_1641266034000_77509]')[0].value = (目标组件赋值)
Number($('input[id=input_1641263665000_36914]')[0].value) + (目标组件计算方法)
Number($('input[id=input_1641263665000_36914]')[1].value) +
Number($('input[id=input_1641263669000_2609]')[0].value) +
Number($('input[id=input_1641263669000_2609]')[1].value)
})()
计算方法目标获取
如被计算组件只有一个则$('input[id=input_1641263665000_36914]')获取后是长度为1的数组即根据角标[0]获取对应value
如被计算组件有n个则$('input[id=input_1641263665000_36914]')获取后是长度为n的数组即根据角标[n]获取对应value