极客观点
项目管理
HarmonyOS
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport"><link rel="stylesheet" href="../../css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet"
href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css"><link rel="stylesheet"
href="../../plugins/ztree/css/metroStyle/metroStyle.css"><link rel="stylesheet" href="../../css/main.css">
<script src="../../libs/jquery.min.js"></script>
<script src="../../plugins/layer/layer.js"></script>
<script src="../../libs/bootstrap.min.js"></script>
<script src="../../libs/vue.min.js"></script>
<script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
<script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="../../js/common.js"></script>
</head>
<style>
.detailsDiv{
background-color:#fff;}
.page_lable_class{
margin-top:8px}
.layer_div_class{
margin-top:10px;
margin-bottom:10px;}
.div1{
padding-top: 20px;
width:100%;
padding-left: 100px;
}
.div2{
display: inline-block;
}
.div3{
display: inline-block;
padding-left: 250px;
}
</style>
<body>
<div id="metasystem_page" v-cloak>
<div v-show="showList">
<div class="grid-btn">
<div class="form-group col-sm-2">
<input type="text" class="form-control"
v-model="meta_system.metaName" @keyup.enter="query"
placeholder="元数据名称">
</div>
<a class="btn btn-default" @click="query">查询</a> <a
v-if="hasPermission('generator:metasystem:save')"
class="btn btn-primary" @click="add"><i class="fa fa-plus"></i> 新增</a>
<a v-if="hasPermission('generator:metasystem:update')"
class="btn btn-primary" @click="update"><i
class="fa fa-pencil-square-o"></i> 修改</a> <a
v-if="hasPermission('generator:metasystem:delete')"
class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i> 删除</a>
</div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<div v-show="!showList" class="panel panel-default">
<div class="panel-heading">{{title}}</div>
<div>
<ul class="nav nav-tabs">
<li id="stand_lab" @click="standardinfo" role="presentation" class="active"><a
href="#standardinfo" target="contentFrame" aria-controls="repeat"
data-toggle="tab">基本信息</a></li>
<li id ="relation_lab" @click="correlativity" role="presentation"><a
href="#onlyOne" target="contentFrameonly" aria-controls="onlyOne"
data-toggle="tab">关系配置</a></li>
</ul>
</div>
<div v-show="labelType==1" class="" align="">
<form class="form-horizontal" style="width:100%;" >
<div style="width:100%;padding-left: 100px;" >
<div class="" style="display: inline-block;" >
<div class="">元数据类型 :<span class="mandatory">*</span></div><br>
<div class="" style="padding: 0px">
<input id="metaTypePlace" type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.typeName" @click="metaTypeTree" readonly="readonly" placeholder="点击选择元数据类型"/>
</div>
</div>
<div class="" style="display: inline-block;padding-left: 250px;" >
<div class="">数据对象名称 :<span class="mandatory">*</span></div><br>
<div class="" style="padding: 0px">
<input type="text" class="form-control" style="width: 280px;cursor:pointer;"
v-model="metaSystem.metaName" placeholder="请填写元数据名称" />
</div>
</div>
</div>
<div style="padding-top: 20px;width:100%;padding-left: 100px;" >
<div class="" style="display: inline-block;" >
<div class="">数据对象代码 :<span class="mandatory">*</span></div><br>
<div class="" style="padding: 0px">
<input type="text" class="form-control" style="width: 280px;cursor:pointer;"
v-model="metaSystem.metaCode" placeholder="请填写元数据代码" />
</div>
</div>
<div class="" style="display: inline-block;padding-left: 250px;" >
<div class="">父对象 :</div><br>
<div class="" style="padding: 0px">
<input id="parentIdPlace" type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.parentName" @click="parentIdTree" readonly="readonly" placeholder="点击选择父对象"/>
</div>
</div>
<div>
<code style="margin-top:4px;display: block;">注:有*标识的为必填信息</code>
</div>
</div>
<div id="strInputForm" v-for="item in metaStrs" >
<div class="form-group" style="" v-show="'str1'==item.metaObjField" > <div class="" >str1:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str1"></div></div>
<div class="form-group" style="" v-show="'str2'==item.metaObjField" > <div class="" >str2:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str2"></div></div>
<div class="form-group" style="" v-show="'str3'==item.metaObjField" > <div class="" >str3:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str3"></div></div>
<div class="form-group" style="" v-show="'str4'==item.metaObjField" > <div class="" >str4:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str4"></div></div>
<div class="form-group" style="" v-show="'str5'==item.metaObjField" > <div class="" >str5:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str5"></div></div>
<div class="form-group" style="" v-show="'str6'==item.metaObjField" > <div class="" >str6:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str6"></div></div>
<div id="str7" class="form-group" style="" v-show="'str7'==item.metaObjField" > <div class="" >str7:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str7"></div></div>
<div class="form-group" style="" v-show="'str8'==item.metaObjField" > <div class="" >str8:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str8"></div></div>
<div id="str9" class="form-group" style="" v-show="'str9'==item.metaObjField" > <div class="" >str9:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str9"></div></div>
<div class="form-group" style="" v-show="'str10'==item.metaObjField"> <div class="" >str10:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str10"></div></div>
<div id="str11" class="form-group" style="" v-show="'str11'==item.metaObjField"> <div class="" >str11:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str11"></div></div>
<div class="form-group" style="" v-show="'str12'==item.metaObjField"> <div class="" >str12:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str12"></div></div>
<div id="str13" class="form-group" style="" v-show="'str13'==item.metaObjField"> <div class="" >str13:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str13"></div></div>
<div class="form-group" style="" v-show="'str14'==item.metaObjField"> <div class="" >str14:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str14"></div></div>
<div class="form-group" style="" v-show="'str15'==item.metaObjField"> <div class="" >str15:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str15"></div></div>
<div class="form-group" style="" v-show="'str16'==item.metaObjField"> <div class="" >str16:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str16"></div></div>
<div class="form-group" style="" v-show="'str17'==item.metaObjField"> <div class="" >str17:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str17"></div></div>
<div class="form-group" style="" v-show="'str18'==item.metaObjField"> <div class="" >str18:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str18"></div></div>
<div class="form-group" style="" v-show="'str19'==item.metaObjField"> <div class="" >str19:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str19"></div></div>
<div class="form-group" style="" v-show="'str20'==item.metaObjField"> <div class="" >str20:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str20"></div></div>
<div class="form-group" style="" v-show="'str21'==item.metaObjField"> <div class="" >str21:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str21"></div></div>
<div class="form-group" style="" v-show="'str22'==item.metaObjField"> <div class="" >str22:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str22"></div></div>
<div class="form-group" style="" v-show="'str23'==item.metaObjField"> <div class="" >str23:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str23"></div></div>
<div class="form-group" style="" v-show="'str24'==item.metaObjField"> <div class="" >str24:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str24"></div></div>
<div class="form-group" style="" v-show="'str25'==item.metaObjField"> <div class="" >str25:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str25"></div></div>
<div class="form-group" style="" v-show="'str26'==item.metaObjField"> <div class="" >str26:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str26"></div></div>
<div class="form-group" style="" v-show="'str27'==item.metaObjField"> <div class="" >str27:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str27"></div></div>
<div class="form-group" style="" v-show="'str28'==item.metaObjField"> <div class="" >str28:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str28"></div></div>
<div class="form-group" style="" v-show="'str29'==item.metaObjField"> <div class="" >str29:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str29"></div></div>
<div class="form-group" style="" v-show="'str30'==item.metaObjField"> <div class="" >str30:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str30"></div></div>
<div class="form-group" style="" v-show="'str31'==item.metaObjField"> <div class="" >str31:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str31"></div></div>
<div class="form-group" style="" v-show="'str32'==item.metaObjField"> <div class="" >str32:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str32"></div></div>
<div class="form-group" style="" v-show="'str33'==item.metaObjField"> <div class="" >str33:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str33"></div></div>
<div class="form-group" style="" v-show="'str34'==item.metaObjField"> <div class="" >str34:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str34"></div></div>
<div class="form-group" style="" v-show="'str35'==item.metaObjField"> <div class="" >str35:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str35"></div></div>
<div class="form-group" style="" v-show="'str36'==item.metaObjField"> <div class="" >str36:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str36"></div></div>
<div class="form-group" style="" v-show="'str37'==item.metaObjField"> <div class="" >str37:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str37"></div></div>
<div class="form-group" style="" v-show="'str38'==item.metaObjField"> <div class="" >str38:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str38"></div></div>
<div class="form-group" style="" v-show="'str39'==item.metaObjField"> <div class="" >str39:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str39"></div></div>
<div class="form-group" style="" v-show="'str40'==item.metaObjField"> <div class="" >str40:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str40"></div></div>
</div>
<div class="form-group" style="padding-left: 850px;" >
<div class="col-sm-2 control-label"></div>
<input type="button" class="btn btn-primary" @click="saveOrUpdate"
value="确定" /> <input type="button"
class="btn btn-warning" @click="reload" value="返回" />
</div>
</form>
</div>
</div>
<div id="detailsLayer" style="background-color: #ccc; display: none">
<div class="col-sm-9">
<div>
<div class="form-inline">
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaNameIdLayer">元数据名称</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="metaNameIdLayer" v-model="metaSystemLayer.metaName">
</div>
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaTypeIdLayer">元数据类型</label>
<input readonly="readonly" type="text"
class="col-sm-8 form-control" id="metaTypeIdLayer"
v-model="metaSystemLayer.typeName">
</div>
</div>
<div class="form-inline">
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="namespaceIdLayer">元数据路径</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="namespaceIdLayer" v-model="metaSystemLayer.namespace">
</div>
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaCodeLayer">元数据代码</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="metaCodeLayer" v-model="metaSystemLayer.metaCode">
</div>
</div>
<div class="form-inline">
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaCodeLayer">创建时间</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="metaCodeLayer" v-model="metaSystemLayer.createTime">
</div>
<div class="col-sm-6 form-group layer_div_class" style="hidden:true">
</div>
</div>
</div>
</div>
</div>
<!-- 选择数据类型 -->
<div id="metaTypeLayer" style="display: none;padding:10px;">
<ul id="menuTypeTree" class="ztree"></ul>
</div>
<!-- 选择父ID -->
<div id="parentIdLayer" style="display: none;padding:10px;">
<ul v-show="showBlankTree" id="parentIdTree" class="ztree"></ul>
<span v-show="!showBlankTree">当前元数据类型没有可以选择的父节点</span>
</div>
</div>
<script src="../../js/modules/metamanage/metasystem.js"></script></body>
</html>
vuejs:
metaTypeTree: function() { //获取元数据类型
layer.open({
type: 1,
offset: '50px',
skin: 'layui-layer-molv',
title: "选择元数据类型",
area: ['300px', '450px'],
shade: 0,
shadeClose: false,
content: jQuery("#metaTypeLayer"),
btn: ['确定', '取消'],
btn1: function(index) {
var node = metaTypeZtree.getSelectedNodes();
vm.metaSystem.metaType = node[0].id;
vm.metaSystem.typeName = node[0].typeName;
type_id = node[0].id;
$.ajax({
type: "POST",
dataType: "json",
url: baseURL + "/generator/metasystem/queryStrInput",
data: {
'metatype': node[0].id
},
success: function(r) {
vm.metaStrs = r.strinputlist;
for(var i =0;i<r.strinputlist.length;i++){
if(i%2==0){
var id = r.strinputlist[i].metaObjField;
var obj = document.getElementById(id);
obj.style.cssText = "display: inline-block;";
}else{
var id = r.strinputlist[i].metaObjField;
var obj = document.getElementById(id);
obj.style.cssText = "display: inline-block;padding-left: 250px;";
}
}
}
});
layer.close(index);
}
});
},
在外部是获取不到的，因为vue海没有生成dom节点，应该在vue里面获取节点，你的 layer.open是否写在vue里面的，可以写在mounted里面调用，另外建议用ref获取节点