常用方法
常用方法
区别编辑与查看
this.formConfig.view = true为查看 false为非查看
区分新建和编辑
this.formDataModel.id === undefined
设置字段只读js
this.widgetRefList.d1.field.options.disabled = true
给控件赋值
this.formDataModel.d1 = 6666
示例1:新建页该字段可编辑，编辑页只读
if(!this.formConfig.view && this.formDataModel.id != undefined){
this.widgetRefList.d11.field.options.disabled = true
}
编辑页初始值，数据加载后赋
afterDataLoading(){
if(!this.formConfig.view){
this.formDataModel.d1 = 6666
}
}
列表数据加载后处理字段显示样式。
this.dataJson.tableData || this.dataJson.listData
listData是手机端变量名称
afterDataLoading(){
const data=this.dataJson.tableData;
data.forEach(ele => {
ele.d4 = `<img src="${ele.d4}" />`;
if(ele.d5=="选项 3"){
ele.d5 = `<span class="el-tag el-tag--light">${ele.d5}</span>`
}
});
}
列表上方插入内容且不出现滚动条
//重新自动高度不出现滚动条，第7行是减去的高度，暂时只能定时
let tableBox = document.querySelector(".table_box")
const setForm = () => {
const maxRetries = 10; // 最大重试次数
let retryCount = 0;
const trySet = () => {
if (tableBox) {
tableBox.style.height = 'calc(100% - 87px)'
} else if (retryCount < maxRetries) {
tableBox = document.querySelector(".table_box")
retryCount++;
setTimeout(trySet, 200); // 200ms后重试
}
};
trySet(); // 初始执行
}
setForm()
//**可以写在afterDataLoading()里
tableBox = document.querySelector(".table_box")
tableBox.style.height = 'calc(100% - 87px)'
操作页签的方法汇总
本页面内路由打开未实现
//打开页签
history.pushState({}, '', '/flow/space');
onFormMounted(){
// 创建 HTML 片段
const htmlFragment = `
<div class="inserted-element" style="margin-top:10px;">
<p><button id="dakai">打开页签</button><button id="guanbi">关闭页签</button>
<button id="guanbi2">关闭本页签打开新页签</button>
<button id="shuaxin">刷新页面</button><button id="shuaxinlb">重载列表</button>
<button id="iframe1">iframe1</button>
<button id="iframe2">iframe2</button>
<button id="iframe3">iframe3</button>
<button id="shuaxinlb">本页面打开</button>这是一个动态插入的元素</p>
</div>
`;
const header = document.querySelector('.work_content_header');
header.insertAdjacentHTML('afterend', htmlFragment);
document.getElementById('dakai').addEventListener('click', function() {
history.pushState({}, '', '/flow/space');
});
//关闭本页签
document.getElementById('guanbi').addEventListener('click', ()=> {
let obj = {
path: '/lowcode' + this.$route.fullPath,
query: this.$route.query
}
this.bus.$emit("delTag", obj);
});
//关闭本页签打开新页签
document.getElementById('guanbi2').addEventListener('click', ()=> {
history.pushState({}, '', '/flow/space');
let obj = {
path: '/lowcode' + this.$route.fullPath,
query: this.$route.query
}
this.bus.$emit("delTag", obj);
});
//刷新页面
document.getElementById('shuaxin').addEventListener('click', () => {
let obj = {
modules_id: this.$route.query.modules_id,
page_id: this.$route.query.page_id
};
this.$parent.getConfig(obj);
});
//传条件重载列表，和页面设计器的列表操作一致，页面设计器的列表如何写数据加载完成事件
document.getElementById('shuaxinlb').addEventListener('click', ()=> {
let obj = { modules_id: this.$route.query.modules_id, page_id: this.$route.query.page_id }
this.$parent.getConfig(obj)
});
//iframe打开
document.getElementById('iframe1').addEventListener('click', ()=> {
let obj = {
content: {
link:'/index/lowcode/design?modules_id=1087&page_id=1726',
open:1,
},
type:'url',
};
this.$parent.handlePageClick(null,obj)
});
document.getElementById('iframe2').addEventListener('click', ()=> {
let obj = {
content: {
link:'/index/lowcode/design?modules_id=1087&page_id=1726',
open:2,
},
type:'url',
};
this.$parent.handlePageClick(null,obj)
});
document.getElementById('iframe3').addEventListener('click', ()=> {
let obj = {
content: {
link:'/index/lowcode/design?modules_id=1087&page_id=1726',
open:3,
},
type:'url',
};
this.$parent.handlePageClick(null,obj)
});
}
afterDataLoading(){
tableBox = document.querySelector(".table_box")
tableBox.style.height = 'calc(100% - 87px)'
}
全局js里写元素的事件
onFormMounted(){
this.widgetRefList.d24.handleOnAfterConfirmation = handleOnAfterConfirmation = () => {
alert(123456123)
}
}
页面设计器列表加条件重载（未实现）
两种方式，1、ajax请求，2、使用内部方法，可以多参数
onFormMounted(){
let that = this
// 1. 找到指定类名的元素
const container = document.querySelector('.render-form');
const newButton = document.createElement('button');
newButton.className = 'btn'; // 添加类名
newButton.textContent = '全局变量搜索';
// 3. 添加按钮到容器中
container.appendChild(newButton);
// 4. 为按钮添加点击事件监听
newButton.addEventListener('click', function () {
const widget = that.widgetRefList.tableList58660;
if (widget.optionModel.souceData) {
var myCondition = widget.optionModel.souceData.myCondition || []
myCondition.forEach(item => {
if (item.type === 3) {
that.$set(item, 'variableVal', 620)
that.$set(item, 'valueType', 1)
}
})
}
});
}
弹出选择后获取选中的数据
下拉菜单选中后未实现
下拉菜单未实现是因为元素每加载出来，延时后正常
onFormMounted(){
setTimeout(()=> {
this.widgetRefList.d5.handleOnChange = (value) => {
alert(value)
}
}, 100);
this.widgetRefList.d24.handleOnAfterConfirmation = () => {
console.log(this.widgetRefList.d24.$refs.table.multipleSelection)
}
}
tree的点击事件及右侧编辑
new vue并使用element
onFormMounted(){
// let url = 'http://tdrj.esynergy.cn:1025/workflow/cdn/js/vue.js'
// this.parentCommon.createScript(url, null).then(result => {
this.$nextTick(() => {
CreatVue.use(ElementUI, { size: "small" });
const parent = document.querySelector(".render-form")
const app1Div = document.createElement('div');
app1Div.id = 'app1';
app1Div.innerHTML = `aaa{{dt}}bb
<el-tag v-for="(item, index) in items" :key="index">
{{index}}: {{item}}
</el-tag>`;
parent.appendChild(app1Div);
new CreatVue({
el: '#app1',
data: {
dt: 'Dynamic Content',
items: ['Apple', 'Banana', 'Cherry']
},
});
})
// })
}
实现一个好看的卡片列表，带图，行菜单出现在内部
实现列表设计器和页面设计器两个例子
