You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
4.5 KiB
Plaintext
146 lines
4.5 KiB
Plaintext
function getQueryVariable(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split("=");
|
|
if (pair[0] == variable) {
|
|
return pair[1];
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
var currElem = null
|
|
function allowDrop(evt) {
|
|
evt.preventDefault()
|
|
var elem = evt.target
|
|
elem.style.border = '1px solid #459dff'
|
|
}
|
|
|
|
function dropToForm(event) {
|
|
var data = JSON.parse(event.dataTransfer.getData("fieldInfo"))
|
|
layui.use(['pinyin'], function () {
|
|
var pinyin = layui.pinyin
|
|
MenuClick(data.id, pinyin)
|
|
})
|
|
}
|
|
|
|
function removeClassList (node){
|
|
var classes = Array.from(node.classList)
|
|
for(var i = 0; i < classes.length; i++){
|
|
var cls = classes[i]
|
|
if(cls.indexOf('layui-col') > -1){
|
|
node.classList.remove(cls)
|
|
}
|
|
}
|
|
}
|
|
|
|
function getLength(node){
|
|
var classes = Array.from(node.classList)
|
|
for(var i = 0 ;i < classes.length ; i++){
|
|
if(classes[i].indexOf('layui-col') > -1){
|
|
return Number(classes[i].replace('layui-col-xs','')) / 3
|
|
}
|
|
}
|
|
return ""
|
|
}
|
|
|
|
new Vue({
|
|
el: '#entry',
|
|
data() {
|
|
return {
|
|
fieldsGroup: eleMenus,
|
|
labelPosition: 'top',
|
|
fieldPickerVisible: false,
|
|
attrsPanelVisible: false,
|
|
currentEditField: {
|
|
type: '',
|
|
name: '',
|
|
symbol: '',
|
|
percent: '',
|
|
dom: '',
|
|
id: ''
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
dragEnd(){
|
|
},
|
|
// 渲染组件列表
|
|
renderFieldPanel(layout) {
|
|
if (!layout) layout = '1'
|
|
this.fieldPickerVisible = layout === '0'
|
|
},
|
|
startDrag(evt, target) {
|
|
evt.dataTransfer.setData('fieldInfo', JSON.stringify(target))
|
|
},
|
|
updateLayout(type) {
|
|
if (!type) type = '0'
|
|
if (type === '1') {
|
|
setTimeout(function () {
|
|
document.querySelectorAll(".FoolFrmFieldRow").forEach(node => {
|
|
node.style.display = 'flex'
|
|
node.style.flexDirection = 'column'
|
|
node.querySelector('.FoolFrmFieldLabel').style.width = '100%'
|
|
node.querySelector('.FoolFrmFieldInput').style.width = '100%'
|
|
// removeClassList(node)
|
|
// node.classList.add("layui-col-xs3")
|
|
})
|
|
}, 100)
|
|
}
|
|
},
|
|
showAttrs(input) {
|
|
this.currentEditField = {
|
|
type: '',
|
|
name: '',
|
|
symbol: '',
|
|
percent: '',
|
|
dom: '',
|
|
id: '',
|
|
}
|
|
this.attrsPanelVisible = true
|
|
this.currentEditField.dom = input.closest(".FoolFrmFieldRow")
|
|
this.currentEditField.percent = getLength(this.currentEditField.dom)
|
|
this.currentEditField.id = input.id
|
|
this.currentEditField.name = this.currentEditField.dom.querySelector("span").innerHTML
|
|
console.log(this.currentEditField.id)
|
|
},
|
|
bindInputEvents() {
|
|
var _this = this
|
|
setTimeout(function () {
|
|
var container = document.querySelector('.layui-container')
|
|
const inputList = container.querySelectorAll("input")
|
|
inputList.forEach(function (input) {
|
|
input.addEventListener("click", function () {
|
|
_this.showAttrs(input)
|
|
})
|
|
})
|
|
}, 100)
|
|
},
|
|
changeRows(length){
|
|
removeClassList(this.currentEditField.dom)
|
|
this.currentEditField.dom.classList.add("layui-col-xs"+length * 3)
|
|
this.currentEditField.percent = length
|
|
},
|
|
handleFormEditor() {
|
|
var frmId = getQueryVariable("FK_MapData")
|
|
var modelAttr = new Entity("BP.Sys.MapData", frmId)
|
|
var layout = modelAttr.GetPara("DModel")
|
|
this.renderFieldPanel(layout)
|
|
var fieldStyle = modelAttr.GetPara("FieldModel")
|
|
this.updateLayout(fieldStyle)
|
|
},
|
|
// 保存属性至服务器
|
|
saveToServer(){
|
|
var name = this.currentEditField.name
|
|
var id = this.currentEditField.id
|
|
}
|
|
},
|
|
mounted() {
|
|
this.handleFormEditor()
|
|
this.bindInputEvents()
|
|
|
|
}
|
|
})
|
|
|