单独打开表单设计页面
引入组件,并注册
import DesignFormModal from "@/views/modules/online/desform/modules/DesignFormModal.vue";
export default {
components: {
DesignFormModal,
},
// ...
};
模板里面使用
<!-- 新增和编辑时候都使用这个方法, 只是传不传参数的区别 -->
<a-button @click="() => handleDesignForm()" type="primary" icon="plus"
>新增仅设计页面</a-button
>
<a-button @click="() => handleDesignForm(record)" type="primary" icon="plus"
>编辑设计页面</a-button
>
<a-button @click="handleDesignFormWithDefault" type="primary" icon="plus"
>新增仅设计页面(带默认值)</a-button
>
<design-form-modal
ref="designFormModal"
@ok="onDesignOk"
:hideSave="false"
:hideClose="false"
onlyDesign
/>
方法里面调用
export default {
methods: {
// 这里的record 指的是表单设计保存完的数据,新增的时候传undefined就好, 我内部会有默认值
// **编辑时候, 通过后台提供的通过ID或者code获取表单设计数据接口获取**
handleDesignForm(record) {
this.$refs.designFormModal.open(record);
},
// 想要新增的时候添加默认值,可参照下方**数据结构示例**构造一个没有id的对象传递过去
// 这里有一个带一个默认单行文本和JS增强的代码示例,
handleDesignFormWithDefault() {
const defaultValue = {
// 这个是表单设计的名称和生成的online表单的表描述
desformName: "指定默认标题",
// 注意, 是个JSON对象
desformDesignJson: JSON.stringify({
list: [
// list为页面上的控件列表, 不需要就不传递或者空数组[]
{
type: "input", // 类型-单行文本
name: "默认单行文本", // label
className: "form-input",
icon: "icon-input",
hideTitle: false,
options: {
width: "100%",
defaultValue: "",
required: false,
dataType: null,
pattern: "",
placeholder: "",
readonly: false,
disabled: false,
fillRuleCode: "",
hidden: true, // 页面显示的时候隐藏
},
remoteAPI: {
url: "",
executed: false,
},
key: "1669786262435_384592", // 这个不一样就好
model: "fd_text", // 字段名
rules: [],
isSubItem: false,
isquery: 0,
},
],
config: {
// 这里有JS增强
expand: {
js: 'window.onSuccess = ({submitType,dataId})=>{\n let str = submitType==="1"?\'暂存\':\'提交\';\n str += "成功, 数据ID:"+dataId;\n alert(str);\n return false;\n};\n\nwindow.beforeSubmit = (data)=>{\n console.log("提交前处理",data);\nif(data.fd_text === "123"){\n vm.$message.error("不予提交")\n return false;\n}\nreturn {...data,fd_name:"张三"}\n}',
css: "",
},
},
}),
};
this.handleDesignForm(defaultValue);
},
// 保存成功回调, 会把保存在数据库的表单设计数据都返回回来, 有id, desformCode(用来拼接填报页路径)
// 可见下方**数据结构示例**
onDesignOk(savedData) {
this.$info({
title: "操作成功",
content: savedData?.desformCode ?? "",
});
},
},
};
数据结构示例
{
"id": "1595627763023306754", // 保存时候有id就是编辑,没有就是新增. 传递时候可以任意构造默认值
"desformCode": "form_code_1669262278685", // 这个是保存完后台生成的, 用来拼接填报页路径
"desformName": "auto_name_1669262278679", // 这个是后台自动生成的不用管
"desformIcon": "",
// 这个就是表单设计控件的配置
"desformDesignJson": "{\"list\":[{\"type\":\"email\",\"name\":\"邮箱\",\"className\":\"form-email\",\"icon\":\"icon-email\",\"hideTitle\":false,\"options\":{\"width\":\"100%\",\"selectValue\":\"\",\"defaultValue\":\"\",\"required\":false,\"dataType\":\"email\",\"pattern\":\"\",\"placeholder\":\"请输入邮箱\",\"readonly\":false,\"disabled\":false,\"hidden\":false},\"remoteAPI\":{\"url\":\"\",\"executed\":false},\"key\":\"1669262273125_614044\",\"model\":\"email_1669262273125_614044\",\"rules\":[{\"type\":\"email\",\"message\":\"${title}格式不正确\"}],\"isSubItem\":false,\"isquery\":0}],\"config\":{\"labelWidth\":100,\"labelPosition\":\"top\",\"size\":\"small\",\"dialogOptions\":{\"top\":60,\"width\":1000,\"padding\":{\"top\":25,\"right\":25,\"bottom\":30,\"left\":25}},\"expand\":{\"js\":\"\",\"css\":\"\",\"url\":{\"js\":\"\",\"css\":\"\"}},\"customRequestURL\":[{\"url\":\"\"}],\"allowPrint\":false,\"allowExternalLink\":false,\"loginParam\":{\"externalNeedLogin\":false,\"validateDataExists\":true,\"externalLoginType\":\"sys\",\"externalCustomLoginTable\":\"\",\"externalCustomLoginFieldsList\":[],\"externalCustomLoginFields\":[],\"externalLoginLinkTable\":\"\",\"externalLoginLinkTableFieldList\":[],\"fieldsLink\":[],\"externalCustomLoginPrimaryFields\":[]},\"pageTitle\":\"信息采集\",\"loginTitle\":\"信息采集\",\"disabledAutoGrid\":false,\"designMobileView\":false,\"transactional\":true}}",
"cgformCode": null,
"parentId": null,
"parentCode": null,
"desformType": 1,
"izOaShow": null,
"izMobileView": 0,
"createBy": "dev",
"createTime": "2022-11-24 11:57:58",
"updateBy": null,
"updateTime": null,
"tenantId": null,
"isShare": null,
"desformGroup": "",
"delFlag": null,
"tableType": 0,
"desformDesc": null,
"tableName": "form_1669262278685",
"caseSwitch": null,
"sysOrgCode": null,
"sync": null,
"uniqueKey": null,
"permissionId": null
}
打开表单填报页
不传递 token(对应外部填报)
URL 格式: /desform/ext/:desformCode/:id?tenantId=0${queryStr}
示例: /desform/ext/form_code_1669262278685?tenantId=0&name=张三&age=33&id=5556asd
解释:
- /desform/ext/: 固定的
- desformCode: 表单设计页面 code, 对应上面的 desformCode
- id: 本条表单设计数据的 id, 可选. 不传递会是新增, 传递会加载 id 关联的数据,然后是编辑,
- queryStr: 查询字符串, 会在提交数据时候携带上. 其中名称特殊的有
- readOnly=1: 只读, 可用于详情. 没有下面那两个暂存和提交按钮
- id=xxx: 后台用这个 ID 当作这条数据的 ID
传递 token(对应内部填报)
格式规则和上面一致, 只是需要手动传 token
表单填报页通信
目前提供了填报成功的消息可以处理, 正常填报成功后会跳转到默认的填报成功的页面. 如果想要在跳转之前做一些操作可以用下面的方式.
通过 JS 增强
在上面打开表单设计页面的时候, 新增可以传递一些默认配置, 其中就有 JS 增强. 另外也可以单独在表单设计页面手动编写.
// 参数是个对象, submitType:暂存还是提交按钮, dataId:新增编辑成功后后端返回的ID
window.onSuccess = ({ submitType, dataId }) => {
let str = submitType === "1" ? "暂存" : "提交";
str += "成功, 数据ID:" + dataId;
alert(str);
return false; // return false 就不会跳转到默认的填报成功页面,停留在填报页
};
// 提交前, data是要提交的表单数据
window.beforeSubmit = (data) => {
console.log("提交前处理", data);
if (data.fd_text === "123") {
vm.$message.error("不予提交");
return false; // !!returnValue 为false则不继续发送请求
}
return { ...data, fd_name: "张三" }; // 可以添加额外的数据,不添加直接返回data
};
通过 window.postMessage
这种方式一般是在页面中用 iframe 集成填报页. 可以让你的页面接收到填报成功的消息, 可以做更多的事情, 例如, 填报成功后你的应用就跳转到列表页面
// 页面iframe展示填报页面
<iframe src={iframeUrl} className="iframe" frameborder="0"></iframe>
// 创建消息接收器
componentDidMount() {
window.addEventListener('message',this.messageListener)
}
componentWillUnmount(){
window.removeEventListener('message',this.messageListener)
}
messageListener = ({origin,data})=>{
// 这个origin就是判断接收到的消息来源是否是我们的填报页如:http://localhost:3000
if(origin !== window.APP_REPORT_ORIGIN) return
const {type:messageType,data:messageData} = data || {};
// messageData 和上面的JS 增强的参数一样, submitType:暂存还是提交按钮, dataId:新增编辑成功后后端返回的ID
console.log("onMessage",{messageType,messageData})
// 填报成功会发送这个 success 消息
if(messageType === 'success'){
navigateTo({
url:'/pages/homePage'
})
}
}
感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题，请在 Slack 上提问。如果您想报告问题或提出改进建议，请在 GitHub 存储库中打开问题。
上一篇
页面内容