<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
|
<title>数据字典</title>
|
<link href="../../../css/page.css?v=20240042803" rel="stylesheet">
|
<link href="../../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
|
<link href="../../../css/myelement.css?v=20240042803" rel="stylesheet">
|
<link href="../../../css/tree.css?v=20240042803" rel="stylesheet">
|
|
<script src="../../../js/vue/vue.js"></script>
|
<script src="../../../js/config.js?v=20240042803"></script>
|
<script src="../../../js/vue/elementDefault.js"></script>
|
<script src="../../../js/vue/element-ui/lib/index.js"></script>
|
<script src="../../../js/vue/page.js?v=20240042803"></script>
|
<script src="../../../js/myelement.js?v=20240042803"></script>
|
<style>
|
/* 在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
|
[v-cloak] {
|
display: none !important;
|
}
|
.topbar {
|
height: 52px;
|
line-height: 52px;
|
background-color: #0f347f;
|
font-weight: 400;
|
}
|
.el-tabs__nav-scroll {
|
overflow: hidden;
|
position: relative;
|
padding-left: 20px;
|
}
|
.nodeLabel {
|
max-width: 220px !important;
|
}
|
</style>
|
|
</head>
|
|
<body style="margin: 0px;">
|
<div v-cloak id="bodyapp">
|
<div id="page_root">
|
<div class="topbar" style="">
|
<div style="float: left; display: inline-flex; height: 52px; justify-content: center; align-items: center;">
|
<!-- <img src="../../../img/LOGO_03.png" style="height: 34px"> -->
|
<img src="../../../img/org/gp_logo.png" style="height: 34px">
|
</div>
|
<div style="float: left; margin-left: 20px; height: 100%; line-height: 52px;">
|
<span style="color: #fff; font-family: cursive;">{{title}}</span>
|
</div>
|
</div>
|
|
<div class="h_dialog__body">
|
<div :style="{position: 'absolute', left: '6px', width: '320px', top: '55px', bottom: '10px', border: '1px solid #ccc'}">
|
<div :style="{padding: '6px 0', height: treeHeight - 30 + 'px', overflow: 'auto'}">
|
<h-tree
|
v-if="isRefresh"
|
:tree-data="treeData"
|
:tree-txt-formatter="treeTxtFormatter"
|
:currentnodekey="currentnodekey"
|
:is-readonly="isTreeReadonly"
|
|
@node-click="onNodeClick"
|
>
|
</h-tree>
|
</div>
|
</div>
|
<div :style="{position: 'absolute', left: '333px', right: '6px', top: '55px', bottom: '10px', border: '1px solid #ccc'}">
|
<div>
|
<div>
|
<h-form
|
ref="form1"
|
:form-attr="formAttr"
|
:table-fields="formFields"
|
:form-data="formData"
|
:table-field-click="formfieldClick"
|
>
|
</h-form>
|
</div>
|
|
<h-table
|
v-if="isRefresh_p && tableFields_p.length"
|
ref="table_p"
|
:table-fields="tableFields_p"
|
:table-data="tableData_p"
|
:table-height="tableHeight_p - 92"
|
:is-highlight-row="true"
|
:table-field-click="tablefieldClick"
|
:table-buttons-click="tablebuttonClick"
|
:is-pagination="false"
|
:isdraggableorder="false"
|
:isfilterfield="false"
|
:isbasicfilterfields="false"
|
:istablebuttons="false"
|
>
|
</h-table>
|
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
|
<div class="spinner">
|
<div class="cube1"></div>
|
<div class="cube2"></div>
|
</div>
|
</div>
|
|
</body>
|
<script type="text/javascript">
|
|
|
new Vue({
|
el: "#bodyapp",
|
data: {
|
dataname: "", // "md_prod_category",
|
title: "华医圣杰经销商管理系统-数据字典",
|
tree_title: "表数据",
|
treeTxtFormatter: "{title}",
|
isTreeReadonly: true,
|
treeHeight: 100,
|
basis_path: "../../../data/",
|
selectedfile: "",
|
isRefresh: true,
|
treeData: [],
|
selectedrow: {},
|
selectednode: {},
|
|
formAttr: {
|
istitle: false,
|
title: "表单名称",
|
columnnumber: 1,
|
labelwidth: "70px",
|
labelposition: "left",//"left",// right//top
|
size: "mini",
|
border: "5px solid #c6c6c600"
|
},
|
formFields: [
|
{isshow: "T", field: "name", name: "表名", type: "span"},
|
{isshow: "T", field: "title", name: "描述", type: "span"},
|
],
|
formData: {},
|
formfieldClick: {},
|
|
dataname_p: "md_prod_sku",
|
tableData_p: [],
|
tableFields_p: [
|
{isshow: "T", field: "name", name: "字段", align: "left",width: "200"},
|
// {isshow: "T", field: "label", name: "中文", align: "left",width: "200"},
|
{isshow: "T", field: "type_code", name: "类型", align: "left",width: "200"},
|
{isshow: "T", field: "title", name: "字段说明", align: "left",width: "100", isminwidth: true},
|
{isshow: "T", field: "required", name: "是否必填", align: "center",width: "100"},
|
],
|
isRefresh_p: true,
|
tableHeight_p: 300,
|
tablefieldClick: {},
|
tablebuttonClick: [],
|
setSelectedRowId: null,
|
|
//filter
|
filterObj: {},
|
filterAttr: {
|
columnnumber: 3,
|
labelwidth: "100px",
|
labelposition: "right",
|
size: "medium",
|
border: "3px solid #c6c6c600"
|
},
|
filterFields: [],
|
filterfieldClick: {},
|
|
currentnodekey: "",
|
filter_node_val: "1<>1",
|
cbuttons_r: {},
|
|
},
|
created() {
|
|
},
|
|
mounted() {
|
var me = this;
|
//获取数据
|
me.initData();
|
me.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
hideLoading();
|
});
|
},
|
|
methods:{
|
getJsonFile(filepath, callback, errorcallback) {
|
var me = this;
|
var xhr = new XMLHttpRequest();
|
xhr.overrideMimeType("application/json");
|
xhr.open('GET', filepath + "?v=20240504", true);
|
xhr.onreadystatechange = function () {
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
var isJson_ = me.isJson(xhr.responseText);
|
if (isJson_) {
|
var json = JSON.parse(xhr.responseText);
|
// 对返回的JSON数据进行处理
|
callback(json)
|
}
|
else {
|
errorcallback()
|
}
|
}
|
};
|
xhr.send();
|
},
|
|
// getJsonFile(filepath, callback, errorcallback) {
|
// window.fetch(filepath).then(response => {
|
// if (!response.ok) {
|
// throw new Error('Network response was not ok ' + response.statusText);
|
// }
|
// return response.json();
|
// }).then(data => {
|
// console.log(data); // 这里的data就是JSON文件中的内容
|
// callback(data)
|
// }).catch(error => {
|
// errorcallback();
|
// console.error('There has been a problem with your fetch operation:', error);
|
// });
|
// },
|
|
initData() {
|
var me = this;
|
this.getJsonFile(this.basis_path + "tables.json", function(json){
|
console.log(json);
|
me.treeData = json;
|
me.tableDataAfter();
|
if(me.treeData[0]) {
|
const leafNode = me.findLeafNode(me.treeData[0]);
|
let objInit = {
|
data: leafNode,
|
node: leafNode,
|
el: {},
|
};
|
me.currentnodekey = leafNode.id;
|
me.onNodeClick(objInit);
|
}
|
}, function(){
|
|
})
|
},
|
tableDataAfter() {
|
let me = this;
|
this.$nextTick(function(){
|
this.isRefresh = true;
|
this.$nextTick(function(){
|
var tableHeight_ = 0;
|
let clientHeight = document.documentElement.clientHeight;
|
let title_height = document.getElementsByClassName('topbar').length ? document.getElementsByClassName('topbar')[0].offsetHeight + document.getElementsByClassName('topbar')[0].offsetTop : 0;
|
let tabs_height = document.getElementsByClassName('el-tabs__header').length ? document.getElementsByClassName('el-tabs__header')[0].offsetHeight + 2 : 0;
|
|
tableHeight_ = clientHeight - tabs_height - title_height - 16;
|
this.treeHeight = tableHeight_;
|
|
me.isRefresh = false;
|
me.$nextTick(function(){
|
me.isRefresh = true;
|
})
|
})
|
})
|
},
|
findLeafNode(node) {
|
if (!node.children || node.children.length === 0) {
|
node.isLeaf = true
|
return node;
|
}
|
|
const child = node.children[0];
|
if (!child.parent || (child.parent && !child.parent.data)) {
|
child.parent = {
|
data: node
|
}
|
}
|
const leafNode = this.findLeafNode(child);
|
if (leafNode) {
|
return leafNode;
|
}
|
return null;
|
},
|
|
node_isShow(data, isShow) {
|
if (this.$refs[data.id]) {
|
this.$refs[data.id].style.display = isShow ? '' : 'none';
|
}
|
},
|
|
onNodeClick(obj) {
|
console.log(obj);
|
var data = obj.data, node = obj.node, el = obj.el;
|
|
this.selectedrow = data;
|
this.selectednode = node;
|
this.formData = data;
|
this.setSelectedRowId = null;//Brooke
|
this.filterObj = {};
|
this.getDataByNode();
|
},
|
|
getDataByNode() {
|
var me = this;
|
me.tableData_p = []
|
if (!me.selectedrow.id) {
|
return
|
}
|
if (this.selectednode.isLeaf) {
|
var filepath = this.selectednode.data ? this.selectednode.data.name : this.selectednode.name;
|
var selectedfile = this.getParentNode(this.selectednode, filepath);
|
this.getJsonFile(this.basis_path + selectedfile + ".json", function(json){
|
console.log(json);
|
me.tableData_p = json.fields;
|
me.tableHeight_p = me.treeHeight
|
}, function(){
|
me.$message({
|
type: 'error',
|
message: '没有获取到Json数据'
|
});
|
})
|
}
|
|
},
|
getParentNode(node, path) {
|
if (!node.level) {
|
return path;
|
}
|
node = node.parent;
|
if (node.data.name) {
|
path = node.data.name + "/" + path;
|
}
|
var parentpath = this.getParentNode(node, path);
|
|
return parentpath;
|
},
|
onDownload() {
|
handleDownload(filepath);
|
},
|
isJson(str) {
|
if (typeof str == 'string') {
|
try {
|
var obj = JSON.parse(str);
|
// 等于这个条件说明就是JSON字符串 会返回true
|
if (typeof obj == 'object' && obj) {
|
return true;
|
} else {
|
//不是就返回false
|
return false;
|
}
|
} catch (e) {
|
return false;
|
}
|
}
|
return false;
|
},
|
}
|
});
|
</script>
|
</html>
|
