我创建自定义页面,为啥创建的表格,编写代码的时候,获取不到表单的foroInstId,导致操作列的编辑,删除,详情能功能都实现不了,有大神告知一下吗?谢谢
// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
console.log(「页面 JS」:当前页面地址 ${location.href}
);
// console.log(「页面 JS」:当前页面 id 参数为 ${this.state.urlParams.id}
);
// 更多 this 相关 API 请参考:https://www.yuque.com/yida/support/ocmxyv#OCEXd
// document.title = window.loginUser.userName + ' | 宜搭';
this.utils.loadScript('https://g.alicdn.com/code/lib/qrcodejs/1.0.0/qrcode.min.js');
this.queryData()
}
export function queryData(){
this.dataSourceMap.getDatas.load({
formUuid: "FORM-IY966L71V86F7B0MCQ2VD4F8TYGP3J964LWNLB",
}).then(res => {
if (res.data) {
const tableList = res.data.map(item => {
return {
"id": item.formInstId,
"name": item.formData.textField_lnwl4g9m,
"type": item.formData.textField_lnwl4g9n,
"remake": item.formData.textareaField_lnwl4g9p,
"praise": item.formData.numberField_lnwl4g9t,
"share": item.formData.numberField_lnwl4g9r,
}
})
// const tableList = []
// res.data.forEach(item => {
// const tableData = {
// "id": item.formInstId,
// "name": item.formData.textField_lnwl4g9m,
// "type": item.formData.textField_lnwl4g9n,
// "remake": item.formData.textareaField_lnwl4g9p,
// "praise": item.formData.numberField_lnwl4g9t,
// "share": item.formData.numberField_lnwl4g9r,
// }
// tableList.push(tableData)
// })
const dataSource = {
currentPage: 1,
totalCount: res.totalCount,
data: tableList,
}
console.log(dataSource)
this.$('tablePc_lnwl8e68').set("data", dataSource)
}
})
}
export function onAddItemClick() {
this.state.mode = "add"
this.$('dialog_lnwp3m47').show()
}
/**
dialog onOk
*/
export function onOk() {
this.dataSourceMap.saveData.load({
formUuid: "FORM-IY966L71V86F7B0MCQ2VD4F8TYGP3J964LWNLB",
appType: "APP_JWE2RULYEKZFNB23S8II",
formDataJson: JSON.stringify({
"textField_lnwl4g9m": this.$('textField_lnwp3m49').get('value'),
"textField_lnwl4g9n": this.$('selectField_lnl47ou2').get('value'),
"textareaField_lnwl4g9p": this.$('textField_lnwp3m4d').get('value'),
"numberField_lnwl4g9t": this.$('numberField_lnwp3m4f').get('value'),
"numberField_lnwl4g9r": this.$('numberField_lnwp3m4h').get('value'),
})
}).then(res => {
this.$('dialog_lnwp3m47').hide()
this.queryData()
})
}
export function onActionClick(rowData) {
this.utils.dialog({
method: 'confirm', // 'alert', 'confirm', 'show'
title: '温馨提示',
content: '数据删除后无法恢复,是否确认', // 如需换行可传入 HTML/JSX 来实现
onOk: () => {
this.dataSourceMap.deleteData.load({
formInstId: rowData.id
}).then(res => {
console.log(res)
this.queryData()
})
},
onCancel: () => {},
});
}
export function onUpdateItemClick() {
// this.state.selectedArr.forEach(item => {
// const params = {
// formInstId: item,
// updateFormDataJson: JSON.stringify({
// "textField_lnwl4g9n": this.$('selectField_lnwtsr80').get("value")
// })
// }
// this.dataSourceMap.updateData.load(params).then(res => { //调用接口
// })
// })
// this.queryData();
let promiseArr = []
this.state.selectedArr.forEach(item => {
const params = {
formInstId: item,
updateFormDataJson: JSON.stringify({
"textField_lnwl4g9n": this.$('selectField_lnwtsr80').get("value")
})
}
const promise = new Promise((pres, rej) => {
this.dataSourceMap.updateData.load(params).then(res => { //调用接口
pres() //单个接口执行完毕
})
})
promiseArr.push(promise)
})
//栅栏函数
Promise.all(promiseArr).then((result) => {
this.utils.toast({
title: 'Update Success!',
});
this.queryData();
})
}
export function onSelectChange(selectedRowKeys, records) {
console.log("AAA",selectedRowKeys, records);
this.state.selectedArr = selectedRowKeys
}
let updateID;
//点击修改
export function onUpdateClick(rowData) {
this.state.mode = "update"
updateID = rowData.id
console.log(rowData);
this.$('textField_lnwp3m49').set("value",rowData.name)
this.$('selectField_lnl47ou2').set("value", rowData.type)
this.$('textField_lnwp3m4d').set("value", rowData.remake)
this.$('numberField_lnwp3m4f').set("value", rowData.share)
this.$('numberField_lnwp3m4h').set("value", rowData.praise)
this.$('dialog_lnwp3m47').show()
}
export function onQRCodeClick(rowData) {
const text = "https://zjyc.aliwork.com/o/hzyc/project" + "?pro=" + rowData.name
this.$('textField_lny1z2x4').set("value", text)
this.$('dialog_lny0yafp').show()
if (!document.getElementById('qrcodeRootDom')) {
// 若没有 qrcodeRootDom 则创建一个
const qrcodeRoot = document.createElement('div');
qrcodeRoot.setAttribute('id', 'qrcodeRootDom');
qrcodeRoot.style.display = 'none';
window.document.body.appendChild(qrcodeRoot);
};
document.getElementById('qrcodeRootDom').innerHTML = ''; // 清空内容
const qrcode = new QRCode(document.getElementById('qrcodeRootDom'), {
text: encodeURI(text),// 二维码内容
width: 220, // 二维码宽度
height: 220, // 二维码高度
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
const canvas = qrcode._el.querySelector('canvas'); // 获取生成二维码中的canvas,并将canvas转换成base64
const qrcodeUrl = canvas.toDataURL('image/png'); // 获取到生成的二维码的图片链接
this.$('image_lny0yafq').set("src", qrcodeUrl)
return qrcodeUrl;
您好,这个问题可能是由于表单的formInstId没有正确传递导致的。您可以尝试在自定义页面中获取表单的formInstId,以便操作列的编辑、删除和查看详情等功能。如果您使用的是宜搭,可以通过查看流程数据管理页面中的“查看变量”来获取formInstId。如果您使用的是钉钉开放平台,可以在调用接口时将获取表单数据的formUuid填充到请求参数上。
在表单提交时,确保将formInstId存储在页面的某个全局变量或隐藏字段中。这样,您可以在后续的代码中访问该值。
如果您使用的是某个框架或库来创建自定义页面,请检查该框架或库是否提供了存储和访问formInstId的机制。有些框架可能提供了会话存储、应用程序状态或其他机制来保存和检索表单实例的ID。
如果您是在后端应用程序中创建自定义页面,确保在处理表单提交时,将formInstId存储在数据库或其他持久存储中。这样,您可以在后续的请求中检索该值。
应该是你设置的路径或者步骤不正确所致,具体可以参考自定义表格实现增删改查案例。
先调用接口处理数据展示到表格中,然后在数据源处增加远程数据源, 可以参考文档:宜搭平台接口(页面数据源可直接调用)。
(1) 调用根据条件搜索表单实例详情列表接口 接口配置如图:
(2)请求返回数据在 didFetch 函数中处理,处理后的格式可以参考表格右侧「编辑代码」里面的格式,需要的每一条数据都要是一个对象,统一放到一个数组里面,最后返回的是一个对象,对象中有三个属性,其中一个属性是 data ,对应的值是处理好的数组 PS: 如果返回的数据是 proxy 形式,可以使用 JSON.parse(JSON.stringify(proxy 属性的数据 ))
function didFetch(content) { // content.b = 1; 修改返回数据结构中的 b 字段为1 const value = []; const data = content.data.map((item)=>{ let arr={ name: item.formData.textField_hr9o6eq, sex: item.formData.textField_62lufhf, age: item.formData.textField_0nibhpr, study: item.formData.textField_97okczu, work: item.formData.textField_456c4b7, instid: item.formInstId } value.push(arr); console.log(arr); })
let result ={ "data" : value, "currentPage" : content.currentPage, "totalCount" : content.totalCount } return result; // 重要,需返回 content }
在表格数据源中绑定远程数据源 配置如图:
修改数据主键值 表格中每行数据唯一,因此配置实例 id 作为唯一标识,将数据主键值配置为获取的实例 id
绑定数据源后,需配置分页功能,在表格属性中添加动作事件,加载数据源
如果你在自定义页面中无法获取到表单的formInstId,可能有以下几个原因:
页面加载顺序问题:确保你在获取formInstId之前,表单已经被正确地加载和初始化。在获取formInstId之前,可以通过监听页面加载事件或者延迟一段时间来确保表单已经完全加载。
元素选择器问题:确认你使用的元素选择器是否准确无误。确保你使用的选择器能够唯一地定位到表单元素,并正确提取formInstId。
异步操作问题:如果表单数据是通过异步请求加载的,在获取formInstId时需要确保异步请求已经完成并且表单数据已经被成功加载。可以使用回调函数、Promise 或 async/await 等方式来处理异步操作的流程。
表单结构问题:检查你的表单结构,确保formInstId在表单中正确地存在,并且赋予了正确的值。有时候,表单可能会有多个实例,你需要确保获取到的formInstId对应于你期望操作的表单实例。
跨域访问限制:如果你的自定义页面与表单所在的域名不同,浏览器可能会出于安全考虑限制跨域访问。请确保你在自定义页面中没有跨域限制,否则将无法获取到表单的formInstId。
楼主你好,获取表单的formInstId需要在自定义页面的路由路径中添加参数,例如:
// 路由路径为 /customPage/:id
// id为表单的formInstId
const router = new VueRouter({
routes: [
{ path: '/customPage/:id', component: CustomPage }
]
})
在CustomPage组件中可以通过this.$route.params.id
获取到表单的formInstId,然后再进行相关操作。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。