Appearance
表单用法
vue
<form-create
v-model:api="formApi"
v-model="formData"
class="w-[768px!important] bg-white p-4"
:option="formOptions"
:rule="rules"
@submit="onSubmit"
>
<template #type-myself>
good
</template>
</form-create>
<script>
const rules = [
{
type: 'myself',
}
]
</script>json
{
type: 'input',
field: 'input2',
title: '不为空',
col: { span: 12 },
props: {
placeholder: '请输入资源名称'
},
computed: {
hidden: {
mode: 'AND',
group: [
{
field: 'resourceName',
condition: 'notEmpty'
}
],
invert: true // 取反
}
}
}update 的参数
api: API, // 表单的 API 实例
rule: Rule[], // 当前表单完整规则数组
self: Rule, // 当前组件的生成规则
option: Object, // 表单全局配置对象
args: any[], // 函数的原始参数数组json
{
type: "input",
field: "checkPassword",
title: "确认密码",
value: "",
link: ["newPassword"],
hidden: true,
update: (val, rule, fApi, arg) => {
const { origin, linkField } = arg;
const newPassword = fApi.getRule("newPassword");
// 是link方法且是newPassword link的
if (origin === "link" && linkField === "newPassword") {
rule.hidden = !newPassword.value;
}
if (!val) return;
if (origin === "change" && val === newPassword.value) {
message("密码校验通过", { type: "success" });
} else {
message("两次密码不一致", { type: "error" });
}
}
},ts·
// 获取表单数据
const formData = $inject.api.formData();
// 设置表单数据
$inject.api.setValue({ field: 'value' });
// 获取指定字段的值
const fieldValue = $inject.api.getValue('fieldName');
// 设置指定字段的值
$inject.api.setValue('fieldName', 'newValue');
// 验证表单（返回 Promise）
$inject.api.validate().then(isValid => {
console.log('验证结果:', isValid);
}).catch(error => {
console.error('验证失败:', error);
});
// 重置表单
$inject.api.resetFields();
通过表单API调用特定组件的原生方法（如focus、show），实现对表单组件的直接控制和交互操作。
this.fApi.el('name').focus();修改表单数据
https://www.form-create.com/v3/examples/v-model
坑
js
$required: true,
// effect: {
// required: true
// },json
{
"form": {
"layout": "horizontal",
"labelAlign": "right",
"size": "middle",
"colon": false,
"labelCol": {
"style": {
"width": "125px"
}
},
"wrapperCol": {
"span": 24
}
},
"globalEvent": {
"event_F6vsmk4umi6uasc": {
"label": "show",
"handle": "[[FORM-CREATE-PREFIX-function ($inject){\nconsole.log('show')\nconsole.log('show2')\n}-FORM-CREATE-SUFFIX]]"
}
},
"globalData": {
"data_Fvv4mk4ul2coarc": {
"label": "字典列表",
"type": "fetch",
"parse": "[[FORM-CREATE-PREFIX-function (res, rule, api){\nconsole.log('parse')\n}-FORM-CREATE-SUFFIX]]",
"beforeFetch": "[[FORM-CREATE-PREFIX-function (config, data){\nconsole.log('beforeFetch')\n}-FORM-CREATE-SUFFIX]]",
"onError": "[[FORM-CREATE-PREFIX-function (e){\nconsole.log('error')\n}-FORM-CREATE-SUFFIX]]",
"action": "http://baidu.com",
"method": "GET",
"dataType": "json"
}
},
"resetBtn": {
"show": false,
"innerText": "重置"
},
"submitBtn": {
"show": true,
"innerText": "提交"
},
"style": "#good {\n font-size: 12px;\n}",
"globalVariable": {
"var_F2wbmk4unrhyatc": {
"label": "open",
"handle": "[[FORM-CREATE-PREFIX-function (get, api){\n\tconsole.log(get,api,'var')\n\tconsole.log(get,api,'var2')\n}-FORM-CREATE-SUFFIX]]"
}
}
}
const customerId = $inject.api.getValue('customerId')
const dataSelectInstance = $inject.api.el('ref_Fzfymkgjlu1zhhc');
// 获取子表单API
const tablefapi = dataSelectInstance.fapi;
tablefapi.mergeRules({
customerProductFollowIds: {
props: {
apiParams: {
customerId: customerId
}
}
}
})ts
[{
"id": "createProjectEvaluatioCustomerInfoId",
"name": "ref_Fffrmkaujuwgacc",
"type": "aCard",
"props": {
"title": "客户信息"
},
"style": {
"width": "100%",
"marginBottom": "10px"
},
"_fc_id": "id_Fwyimkaujuwgabc",
"children": [{
"col": {
"span": 12
},
"name": "ref_Fmhzmkcb8jklcnc",
"type": "CustomerSelect",
"field": "customerId",
"props": {
"placeholder": "请选择，所有客户模糊搜索"
},
"title": "客户名称",
"_fc_id": "id_Ff03mkcb8jklcmc",
"$required": true,
"_fc_drag_tag": "CustomerSelect",
"display": true,
"hidden": false,
"on": {
"change": "$FNX:const api = $inject.api\napi.setValue({productFollowId:undefined,followPhase:undefined})\n",
"optionSelect": "$FNX:const api = $inject.api\nconst rawOption = $inject.args[0]\nconst value = rawOption?.value\nconst origin = rawOption?.origin\nconsole.log(\"客户名称optionSelect======\",rawOption,value)\nif(value){\n api.mergeRules({\n productFollowId:{\n props:{\n apiParams:{\n customerId:value,\n followStatus:1,//跟进中\n }\n }\n }\n })\n api.setValue({\n natureType:origin?.natureType\n })\n}\n\n"
},
"computed": {
"props.disabled": {
"mode": "AND",
"group": [{
"field": "editable",
"value": true,
"condition": "=="
}]
}
}
},
{
"col": {
"span": 12
},
"name": "ref_F4jqmkkk5ivce2c",
"type": "UserFollowProductSelect",
"field": "productFollowId",
"props": {
"placeholder": "请选择"
},
"title": "跟进产品",
"_fc_id": "id_F9zpmkkk5ivce1c",
"$required": true,
"_fc_drag_tag": "UserFollowProductSelect",
"display": true,
"hidden": false,
"on": {
"change": "$FNX:const api = $inject.api\napi.setValue({followPhase:undefined})\n",
"optionSelect": "$FNX:const api = $inject.api\nconst rawOption = $inject.args[0]\nconst value = rawOption?.value\nconsole.log(\"跟进产品======rawOption\",rawOption,value,$inject)\nif(value){\n\tapi.setValue({\n followPhase:rawOption?.origin?.followPhase\n })\n}\nconst originOption = rawOption?.origin\nconsole.log(\"originOption\",originOption)\nif(originOption?.productType === 1){\n\t//人力板块才显示服务岗位\n api.mergeRules({\n \tpositionId: {\n \thidden: false\n }\n })\n}else{\n\tapi.mergeRules({\n \tpositionId: {\n \thidden: true\n }\n })\n}\n"
},
"computed": {
"props.disabled": {
"mode": "AND",
"group": [{
"field": "editable",
"value": true,
"condition": "=="
}]
}
}
},
{
"col": {
"span": 12
},
"name": "ref_Fcpamkcbtf9iazc",
"type": "EnumSelect",
"field": "followPhase",
"props": {
"disabled": true,
"enumType": "followPhase",
"placeholder": "基于跟进产品当刻的数据"
},
"title": "跟进阶段",
"_fc_id": "id_Fgxfmkcbtf9iayc",
"_fc_drag_tag": "EnumSelect",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_Fglmmkcbylqzb4c",
"type": "DictSelect",
"field": "natureType",
"props": {
"disabled": true,
"placeholder": "基于客户信息带出",
"dictTypeCode": "nature_type"
},
"title": "公司性质",
"_fc_id": "id_Fghpmkcc624faxc",
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false
}
],
"_fc_drag_tag": "aCard",
"display": true,
"hidden": false
},
{
"id": "createProjectEvaluatioProjectInfoId",
"name": "ref_F9hqmkavh9msdec",
"type": "aCard",
"props": {
"title": "项目信息"
},
"style": {
"width": "100%",
"marginBottom": "10px"
},
"_fc_id": "id_Fybumkavh9msd9c",
"children": [{
"col": {
"span": 12
},
"name": "ref_Fs6ymkavheoydpc",
"type": "input",
"field": "expectedNumber",
"props": {
"type": "number",
"maxlength": 10,
"placeholder": "请输入"
},
"title": "预计合作服务人数",
"_fc_id": "id_Fpptmkavheoydoc",
"$required": true,
"_fc_drag_tag": "input",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_Fukamkaxnvlhanc",
"type": "DictSelect",
"field": "serviceRequirementType",
"props": {
"multiple": true,
"placeholder": "请选择，支持多选",
"dictTypeCode": "service_requirement_type"
},
"title": "基本服务需求",
"_fc_id": "id_Fwmtmkaxnvlhamc",
"$required": true,
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_F32mmkaxrwsvayc",
"type": "DictSelect",
"field": "socialSecurityInstructionType",
"props": {
"multiple": true,
"placeholder": "请选择，支持多选",
"dictTypeCode": "social_security_instruction_type"
},
"title": "社保特别说明",
"_fc_id": "id_Fxi3mkaxrwsvaxc",
"$required": true,
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false,
"on": {
"optionSelect": "$FNX:const api = $inject.api;\nconst option = $inject.args?.[0];\nif(Array.isArray(option)){\n const labels = option.map(item=>(item?.label))\n //选中的值包含 其他\n\tif(labels.some(item=>item==='其他')){\n \tapi.mergeRules({\n otherSocialSecurityContent:{\n hidden: false\n }\n })\n }else{\n \tapi.mergeRules({\n otherSocialSecurityContent:{\n hidden: true\n }\n })\n }\n}"
}
},
{
"col": {
"span": 12
},
"name": "ref_Fyy7mkaxsvrzb3c",
"type": "input",
"field": "otherSocialSecurityContent",
"props": {
"maxlength": 255,
"placeholder": "请输入社保特别说明"
},
"title": "社保其他说明",
"_fc_id": "id_F3kdmkaxsvrzb2c",
"$required": true,
"_fc_drag_tag": "input",
"display": true,
"hidden": true
},
{
"col": {
"span": 12
},
"name": "ref_F3owmkay0neobcc",
"type": "DictSelect",
"field": "providentFundInstructionType",
"props": {
"multiple": true,
"placeholder": "请选择，支持多选",
"dictTypeCode": "provident_fund_instruction_type"
},
"title": "公积金特别说明",
"_fc_id": "id_Fc4pmkay0neobbc",
"$required": true,
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false,
"on": {
"optionSelect": "$FNX:const api = $inject.api;\nconst option = $inject.args?.[0];\nif(Array.isArray(option)){\n const labels = option.map(item=>(item?.label))\n //选中的值包含 其他\n\tif(labels.some(item=>item==='其他')){\n \tapi.mergeRules({\n otherProvidentFundContent:{\n hidden: false\n }\n })\n }else{\n \tapi.mergeRules({\n otherProvidentFundContent:{\n hidden: true\n }\n })\n }\n}"
}
},
{
"col": {
"span": 12
},
"name": "ref_Fzqdmkccclh0b4c",
"type": "input",
"field": "otherProvidentFundContent",
"props": {
"maxlength": 255,
"placeholder": "请输入公积金特别说明"
},
"title": "公积金其他说明",
"_fc_id": "id_F9wdmkccclh0b3c",
"$required": true,
"_fc_drag_tag": "input",
"display": true,
"hidden": true
},
{
"col": {
"span": 12
},
"name": "ref_F4lqmkay2gt2bnc",
"type": "DictSelect",
"field": "disabilityInsuranceInstructionType",
"props": {
"multiple": true,
"placeholder": "请选择，支持多选",
"dictTypeCode": "disability_insurance_instruction_type"
},
"title": "残保金特别说明",
"_fc_id": "id_Fd5omkay2gt2bmc",
"$required": true,
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false,
"on": {
"optionSelect": "$FNX:const api = $inject.api;\nconst option = $inject.args?.[0];\nif(Array.isArray(option)){\n const labels = option.map(item=>(item?.label))\n //选中的值包含 其他\n\tif(labels.some(item=>item==='其他')){\n \tapi.mergeRules({\n otherDisabilityInsuranceContent:{\n hidden: false\n }\n })\n }else{\n \tapi.mergeRules({\n otherDisabilityInsuranceContent:{\n hidden: true\n }\n })\n }\n}"
}
},
{
"col": {
"span": 12
},
"name": "ref_F5fdmkcchw89bnc",
"type": "input",
"field": "otherDisabilityInsuranceContent",
"props": {
"maxlength": 255,
"placeholder": "请输入残保金特别说明"
},
"title": "残保金其他说明",
"_fc_id": "id_Famomkcchw89bmc",
"$required": true,
"_fc_drag_tag": "input",
"display": true,
"hidden": true
},
{
"col": {
"span": 12
},
"name": "ref_F6ltmkay3qrrbrc",
"type": "DictSelect",
"field": "commercialInsuranceInstructionType",
"props": {
"multiple": true,
"placeholder": "请选择，支持多选",
"dictTypeCode": "commercial_insurance_instruction_type"
},
"title": "商保特别说明",
"_fc_id": "id_Fwbemkay3qrrbqc",
"$required": true,
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false,
"on": {
"optionSelect": "$FNX:const api = $inject.api;\nconst option = $inject.args?.[0];\nif(Array.isArray(option)){\n const labels = option.map(item=>(item?.label))\n //选中的值包含 其他\n\tif(labels.some(item=>item==='其他')){\n \tapi.mergeRules({\n otherCommercialInsuranceContent:{\n hidden: false\n }\n })\n }else{\n \tapi.mergeRules({\n otherCommercialInsuranceContent:{\n hidden: true\n }\n })\n }\n}"
}
},
{
"col": {
"span": 12
},
"name": "ref_Fxv3mkccjt2sc5c",
"type": "input",
"field": "otherCommercialInsuranceContent",
"props": {
"maxlength": 255,
"placeholder": "请输入商保特别说明"
},
"title": "商保其他说明",
"_fc_id": "id_Fm6bmkccjt2sc4c",
"$required": true,
"_fc_drag_tag": "input",
"display": true,
"hidden": true
},
{
"col": {
"span": 12
},
"name": "ref_F6bymkay4yuubuc",
"type": "DictSelect",
"field": "projectPersonnelType",
"props": {
"multiple": true,
"placeholder": "请选择",
"dictTypeCode": "project_personnel_type"
},
"title": "项目人员用工类型",
"_fc_id": "id_F60gmkccr1adcjc",
"$required": true,
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"info": "1）因工或非因工伤亡经济责任 2）患病医疗期工资等待遇 3）女职工三期工资及待遇 4）加班费、高温补贴等 5）经济补偿金、赔偿金 6）大规模辞退或结项退工 7）工资争议（包括年终奖、年休假工资、二倍工资、未及时足额发放工资等） 8）社保、公积金、残保金补缴/追缴 9）其他费用（餐补、交通补贴、报销款） 其他承担方式",
"name": "ref_Fci9mkccx2agdbc",
"type": "EnumSelect",
"field": "isTakeRisk",
"props": {
"enumType": "isTakeRisk",
"placeholder": "请选择"
},
"title": "是否承担风险",
"_fc_id": "id_Fj74mkccx2agdac",
"$required": true,
"_fc_drag_tag": "EnumSelect",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_F2f2mkaye9jfbzc",
"type": "inputNumber",
"field": "riskRatio",
"props": {
"min": 0,
"precision": 2,
"placeholder": "请输入"
},
"title": "承担比例",
"_fc_id": "id_Fjp2mkp7uwdri2c",
"validate": [{
"mode": "maxLen",
"maxLen": 50,
"adapter": true,
"trigger": "blur"
}],
"$required": true,
"$easySlots": {
"addonAfter": {
"type": "text",
"value": "%",
"popVisible": false
}
},
"_fc_drag_tag": "inputNumber",
"display": true,
"hidden": false,
"computed": {
"hidden": {
"mode": "AND",
"group": [{
"field": "isTakeRisk",
"value": "1",
"condition": "=="
}],
"invert": true
}
}
},
{
"col": {
"span": 12
},
"name": "ref_F9jdmkcd33hjemc",
"type": "DictSelect",
"field": "riskContentType",
"props": {
"multiple": true,
"placeholder": "请选择",
"dictTypeCode": "project_risk_content_type"
},
"title": "承担风险内容",
"_fc_id": "id_Fls0mkcd33hjelc",
"$required": true,
"_fc_drag_tag": "DictSelect",
"display": true,
"hidden": false,
"on": {
"optionSelect": "$FNX:const api = $inject.api;\nconst option = $inject.args?.[0];\nif(Array.isArray(option)){\n const labels = option.map(item=>(item?.label))\n //选中的值包含 其他\n\tif(labels.some(item=>item==='其他承担方式')){\n \tapi.mergeRules({\n otherRiskContent:{\n hidden: false\n }\n })\n }else{\n \tapi.mergeRules({\n otherRiskContent:{\n hidden: true\n }\n })\n }\n}"
},
"computed": {
"hidden": {
"mode": "AND",
"group": [{
"field": "isTakeRisk",
"value": "1",
"condition": "=="
}],
"invert": true
}
}
},
{
"name": "ref_Fr9pmkoruj8obcc",
"type": "input",
"field": "otherRiskContent",
"props": {
"type": "textarea",
"maxlength": 255,
"showCount": true,
"placeholder": "请输入"
},
"title": "其他承担风险内容",
"_fc_id": "id_F80cmkoruj8obbc",
"$required": true,
"_fc_drag_tag": "textarea",
"display": true,
"hidden": true
},
{
"col": {
"span": 12
},
"name": "ref_F5n6mkp7n8b6elc",
"type": "inputNumber",
"field": "channelFee",
"props": {
"min": 0,
"precision": 2,
"placeholder": "请输入"
},
"title": "渠道费",
"_fc_id": "id_Flgqmkp7n8b6ekc",
"validate": [{
"mode": "maxLen",
"maxLen": 50,
"adapter": true,
"trigger": "blur"
}],
"$required": true,
"$easySlots": {
"addonAfter": {
"type": "text",
"value": "¥",
"popVisible": false
}
},
"_fc_drag_tag": "inputNumber",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_Fszumkayhfwdcic",
"type": "inputNumber",
"field": "channelRatio",
"props": {
"max": 100,
"min": 0,
"precision": 2,
"placeholder": "请输入"
},
"title": "渠道比例",
"_fc_id": "id_Fhh5mkp7pv10fnc",
"validate": [{
"mode": "maxLen",
"maxLen": 50,
"adapter": true,
"trigger": "blur"
}],
"$required": true,
"$easySlots": {
"addonAfter": {
"type": "text",
"value": "%",
"popVisible": false
}
},
"_fc_drag_tag": "inputNumber",
"display": true,
"hidden": false
},
{
"name": "ref_Fb76mkayiam7cmc",
"type": "input",
"field": "additionalRemark",
"props": {
"type": "textarea",
"maxlength": 255,
"showCount": true,
"placeholder": "请输入"
},
"title": "补充说明",
"_fc_id": "id_Fmlfmkayiam7clc",
"$required": true,
"_fc_drag_tag": "textarea",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"info": "仅人力板块的产品出现，下拉找不到所需项，可以马上在下拉旁点击新增",
"name": "ref_Fgtomkesjagyboc",
"type": "ServicePositionSelect",
"field": "positionId",
"props": {
"createAble": true,
"placeholder": "请选择"
},
"title": "服务岗位",
"_fc_id": "id_Fu23mkesjagybnc",
"$required": true,
"_fc_drag_tag": "ServicePositionSelect",
"display": true,
"hidden": true
},
{
"col": {
"span": 12
},
"name": "ref_Fb70mkdrri4dbjc",
"type": "SettlementSelect",
"field": "settlementRuleList",
"props": {
"placeholder": "请选择"
},
"title": "结算规则",
"_fc_id": "id_Fzoxmkdrri4dbic",
"$required": true,
"_fc_drag_tag": "SettlementSelect",
"display": true,
"hidden": false
},
{
"name": "ref_Fwxxmkbvj76kbsc",
"type": "input",
"field": "quotationModel",
"props": {
"type": "textarea",
"maxlength": 1024,
"showCount": true,
"placeholder": "请输入"
},
"title": "报价模式",
"_fc_id": "id_Fcnvmkbvj76kbrc",
"$required": true,
"_fc_drag_tag": "textarea",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"info": "客户的扣罚规则 能否承担：查看招标文件（如有商务合同）-商务提供，直属领导审核、总部项目负责人审核。",
"name": "ref_F724mkcewnkeazc",
"type": "EnumSelect",
"field": "isHavePenaltyRule",
"props": {
"enumType": "isHavePenaltyRule",
"placeholder": "请选择"
},
"title": "是否有扣罚规则",
"_fc_id": "id_Fw1emkcewnkeayc",
"$required": true,
"_fc_drag_tag": "EnumSelect",
"display": true,
"hidden": false
},
{
"name": "ref_Fgxomkcf4h30bac",
"type": "input",
"field": "penaltyRule",
"props": {
"type": "textarea",
"maxlength": 1024,
"showCount": true,
"placeholder": "请输入"
},
"title": "扣罚规则",
"_fc_id": "id_F4n0mkcf4h30b9c",
"$required": true,
"_fc_drag_tag": "textarea",
"display": true,
"hidden": false,
"computed": {
"hidden": {
"mode": "AND",
"group": [{
"field": "isHavePenaltyRule",
"value": "1",
"condition": "=="
}],
"invert": true
}
}
},
{
"name": "ref_F6pamkcezv2hb5c",
"type": "HcUpload",
"field": "penaltyRuleFileList",
"props": {
"maxNum": 20,
"multiple": true,
"objectable": true,
"placeholder": "请上传"
},
"title": "扣罚规则文件",
"_fc_id": "id_F51wmkcezv2hb4c",
"_fc_drag_tag": "HcUpload",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"info": "若选择转包方式，需填写转包链路",
"name": "ref_F3sqmkdsmeyzg1c",
"type": "EnumSelect",
"field": "projectImplementationMethod",
"props": {
"enumType": "projectImplementationMethod",
"placeholder": "请选择"
},
"title": "合同项目落地方式",
"_fc_id": "id_Fkqgmkdsmeyzg0c",
"$required": true,
"_fc_drag_tag": "EnumSelect",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_Fxkeml7doz7lesc",
"type": "EnumSelect",
"field": "contractingCompanyId",
"props": {
"enumType": "contractingCompany",
"placeholder": "请选择"
},
"title": "签约公司",
"_fc_id": "id_Fbjiml7doz7lerc",
"$required": true,
"_fc_drag_tag": "EnumSelect",
"display": true,
"hidden": false
},
{
"name": "ref_Fy9amkbvglwfb7c",
"type": "input",
"field": "subcontractingLink",
"props": {
"type": "textarea",
"maxlength": 1024,
"showCount": true,
"placeholder": "请说明转包链路，如“XX客户一湖北欢创一深圳欢创一员工”"
},
"title": "转包链路",
"_fc_id": "id_Fb3kmkbvglweb6c",
"$required": true,
"_fc_drag_tag": "textarea",
"display": true,
"hidden": false,
"computed": {
"hidden": {
"mode": "AND",
"group": [{
"field": "projectImplementationMethod",
"value": "2",
"condition": "=="
}],
"invert": true
}
}
},
{
"col": {
"span": 12
},
"name": "ref_Fnq2mkcfdy86bpc",
"type": "EnumSelect",
"field": "isAdvancePayment",
"props": {
"enumType": "isAdvancePayment",
"placeholder": "请选择"
},
"title": "是否垫付",
"_fc_id": "id_Fuvomkcfdy86boc",
"$required": true,
"_fc_drag_tag": "EnumSelect",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_Fxbbmkcfg0wwbxc",
"type": "EnumSelect",
"field": "advancePaymentPurposeType",
"props": {
"enumType": "advancePaymentPurposeType",
"multiple": true,
"placeholder": "请选择"
},
"title": "垫资用途",
"_fc_id": "id_Fyf4mkcfg0wwbwc",
"$required": true,
"_fc_drag_tag": "EnumSelect",
"display": true,
"hidden": false,
"computed": {
"hidden": {
"mode": "AND",
"group": [{
"field": "isAdvancePayment",
"value": "1",
"condition": "=="
}],
"invert": true
}
}
},
{
"col": {
"span": 12
},
"name": "ref_Flflmkcf9bctbic",
"type": "inputNumber",
"field": "perMonthAdvancePaymentAmount",
"props": {
"precision": 2,
"placeholder": "请输入"
},
"title": "预计每月垫资金额",
"_fc_id": "id_F37oml0nttfocrc",
"$required": true,
"$easySlots": {
"addonAfter": {
"type": "text",
"value": "¥",
"popVisible": false
}
},
"_fc_drag_tag": "inputNumber",
"display": true,
"hidden": false,
"computed": {
"hidden": {
"mode": "AND",
"group": [{
"field": "isAdvancePayment",
"value": "1",
"condition": "=="
}],
"invert": true
}
}
},
{
"col": {
"span": 12
},
"name": "ref_F5vbmkcfc4v0bmc",
"type": "input",
"field": "advancePaymentPeriod",
"props": {
"type": "text",
"maxlength": 50,
"placeholder": "请输入"
},
"title": "垫资周期",
"_fc_id": "id_Fntfmkcfc4v0blc",
"$required": true,
"_fc_drag_tag": "input",
"display": true,
"hidden": false,
"computed": {
"hidden": {
"mode": "AND",
"group": [{
"field": "isAdvancePayment",
"value": "1",
"condition": "=="
}],
"invert": true
}
}
},
{
"name": "ref_F2r5mkcfj2v7b5c",
"type": "input",
"field": "projectRemark",
"props": {
"type": "textarea",
"maxlength": 255,
"showCount": true,
"placeholder": "请输入"
},
"title": "备注",
"_fc_id": "id_Fpxsmkcfj2v7b4c",
"$required": false,
"_fc_drag_tag": "textarea",
"display": true,
"hidden": false
}
],
"_fc_drag_tag": "aCard",
"display": true,
"hidden": false
},
{
"id": "createProjectEvaluatioPreIncomeId",
"name": "ref_Fplzmkcfqf35czc",
"type": "aCard",
"props": {
"title": "预计项目营收"
},
"style": {
"width": "100%",
"marginBottom": "10px"
},
"_fc_id": "id_F6cumkcfqf35c5c",
"children": [{
"name": "ref_F3ndmkdah8p5b6c",
"type": "HcUpload",
"field": "quotationFileList",
"props": {
"maxNum": 20,
"multiple": true,
"objectable": true,
"placeholder": "请上传"
},
"title": "报价表",
"_fc_id": "id_Fzi0mkdah8p5b5c",
"$required": true,
"_fc_drag_tag": "HcUpload",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_Fklhmkdai2w6bdc",
"type": "inputNumber",
"field": "perCapitaGrossProfit",
"props": {
"max": 9999999999,
"precision": 2,
"placeholder": "请输入"
},
"title": "人均毛利",
"_fc_id": "id_F5pwmknsg7p3c2c",
"$required": true,
"$easySlots": {
"addonAfter": {
"type": "text",
"value": "¥",
"popVisible": false
}
},
"_fc_drag_tag": "inputNumber",
"display": true,
"hidden": false
},
{
"col": {
"span": 12
},
"name": "ref_Fv2cmkdaj9pfbic",
"type": "inputNumber",
"field": "perCapitaGrossProfitMargin",
"props": {
"max": 100,
"precision": 2,
"placeholder": "请输入"
},
"title": "人均毛利率",
"_fc_id": "id_F63pmknshljkd7c",
"$required": true,
"$easySlots": {
"addonAfter": {
"type": "text",
"value": "%",
"popVisible": false
}
},
"_fc_drag_tag": "inputNumber",
"display": true,
"hidden": false
},
{
"info": "系统评估建议结果，基于产品和毛利率给出 逻辑算法在后期的产品管理中包含，所以目前不好",
"name": "ref_Frq8mkcfqf35dsc",
"type": "input",
"field": "systemEvaluationResult",
"props": {
"type": "textarea",
"maxlength": 255,
"showCount": true,
"placeholder": "转移外包垫付→→人均毛利应不低于4%；若低于此数值请慎重考虑。含有产品名称+是否垫付，显示对应的人均毛利百分比 根据产品管理中设置的最低毛利要求"
},
"title": "系统评估建议结果",
"_fc_id": "id_Fvbymkcfqf35cyc",
"$required": false,
"_fc_drag_tag": "textarea",
"display": true,
"hidden": false
}
],
"_fc_drag_tag": "aCard",
"display": true,
"hidden": false
},
{
"name": "ref_Fl7cmkw9gohwevc",
"type": "switch",
"field": "editable",
"props": {
"placeholder": "请选择",
"checkedValue": true,
"unCheckedValue": false
},
"title": "客户id和产品id",
"_fc_id": "id_Fn87mkw9gohweuc",
"$required": false,
"_fc_drag_tag": "switch",
"display": true,
"hidden": true
}
]ts
{
"form": {
"layout": "horizontal",
"labelAlign": "right",
"size": "middle",
"colon": false,
"labelCol": {
"style": {
"width": "145px"
}
},
"wrapperCol": {
"span": 24
}
},
"resetBtn": {
"show": false,
"innerText": "重置"
},
"submitBtn": {
"show": false,
"innerText": "提交"
}
}<template>
<div>
<fc-designer
ref="designer"
:config="config"
style="height: calc(100vh - 94px)"
@drag="handleDrag"
@checkDrag="checkDrag"
@changeField="handleChangeField"
@create="handleCreate"
/>
</div>
</template>
<script lang="tsx" setup>
import { getFormCreateConfig } from '@/api/desform/web/client/desform'
const designer = ref()
const config = ref()
const formCodes = ref(['pay_template_basic', 'pay_template_pub', 'pay_template_pri'])
function handleDrag(e) {
console.log('拖拽的组件1:', e.item)
console.log('拖拽规则2:', e.dragRule)
console.log('规则对象3:', e.rule)
// 可以在这里执行自定义逻辑
}
function handleCreate(rule) {
console.log('创建新组件:', rule)
// 可以在这里添加自定义逻辑，比如记录日志、发送统计等
}
function handleChangeField(...args) {
console.log(args, 'handleChangeField')
}
function checkDrag(...args) {
console.log(args, 'checkDrag')
}
const init = async () => {
const formRules: Recordable = []
const permissions: Recordable = []
const permission = {
delete: false,
copy: false,
move: false,
validate: false,
// 是否可以配置事件
event: false,
// 是否可以配置高级配置
advanced: false,
// 是否可以基础配置
base: false,
// 是否可以组件配置
props: false,
// 是否可以配置样式
style: false,
// 是否可以配置样式
slots: false,
// 是否可以切换组件
switchType: false,
// 是否显示 name
name: false,
disabledConfig: ['field'],
// hiddenItemConfig: ['hidden', 'style', 'props']
}
const allResult = await Promise.all(formCodes.value.map(item => getFormCreateConfig(item)))
allResult.forEach((result:Recordable) => {
if (!result) {
return
}
result.rule?.forEach(rule => {
permissions.push({
field: rule.field,
permission
})
})
const title = (result?.option.formName) ?? ''
if (title) {
permissions.push({
field: title,
permission
})
result.rule = [
{
disabledDrag: true,
field: title,
type: 'aCard',
hidden: false,
display: true,
disabled: true,
props: {
title
},
style: {
width: '100%'
},
children: result.rule,
}
]
}
formRules.push(...result.rule)
config.value = {
// showJsonPreview: false,
// showPropsForm: false,
allowDrag: {
aCard: {
item: [],
menu: []
}
},
// beforeActiveRule: rule => {
// console.log(rule, 'rruulll')
// return false
// },
fieldReadonly: false,
hiddenItem: ['aCard'],
componentPermission: permissions
}
})
nextTick(() => {
if (designer.value) {
designer.value.setRule(formRules)
}
})
}
onMounted(() => {
init()
})
</script>