lxy/meta-kit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'多表支持修改，完成1、列表配置，2、查询配置，3、导出配置'

Browse Source
This commit is contained in:
lxyer
2019-03-29 16:07:43 +08:00
parent 49be875e5d
commit 3df7e52e61
13 changed files with 579 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

419
root/metadata/metaService.html
View File

@@ -2,6 +2,12 @@
.panel-body {
padding: 0;
}
.tlist>li.active>a,
.tlist>li.active>a:focus,
.tlist>li.active>a:hover,
.tlist>li>a:hover {
background-color: #92b0cb;
}
</style>
<row class="meta-service">
<div class="col-md-12" style="padding-top: 10px;">
@@ -10,10 +16,12 @@
<span class="input-group-btn">
<button class="btn btn-default" type="button">选择业务类型</button>
</span>
<select class="form-control" v-model="table" style="width: 180px;">
<select class="form-control" v-model="service" style="width: 180px;">
<option v-for="item in services" :value="item.name"> {{item.name}}&nbsp;&nbsp;&nbsp;[{{item.comment}}]</option>
</select>
<span class="input-group-btn" style="padding-left: 20px">
<button @click="status=5" :class="['btn',{'btn-primary':status==5}]" type="button"> 列表配置</button>
</span>
@@ -34,80 +42,54 @@
</div>
</div>
<div class="col-md-7">
<table class="table-bordered" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<td v-show="status==3 || status==4 || status==5 || status==6"><input type="checkbox"></td>
<th v-show="status==1"></th>
<th>字段名</th>
<th>中文名</th>
<th>数据类型</th>
<th>输入类型</th>
<th>附加属性</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.items">
<td v-show="status==3"><input type="checkbox" v-model="meta.exports" :value="item.name" class="form-control"></td>
<td v-show="status==4"><input type="checkbox" v-model="meta.imports" :value="item.name" class="form-control"></td>
<td v-show="status==5"><input type="checkbox" v-model="meta.shows" :value="item.name" class="form-control"></td>
<td v-show="status==6"><input type="checkbox" v-model="filterArr" :value="item.name" class="form-control"></td>
<td v-show="status==1" class="icon icon-move"></td>
<td v-show="status!=2" v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
<td v-show="status!=2" v-text="item.label"></td>
<td v-show="status!=2" v-text="item.type"></td>
<td v-show="status!=2" v-text="item.inType"></td>
<td v-show="status!=2" v-text="item.inExt"></td>
<td v-show="status!=2" v-text="item.remark"></td>
<td v-show="status==2">
<input v-model="item" type="hidden">
<input :value="item.name" disabled class="form-control">
<input v-model="item.name" type="hidden">
<input name="name" type="hidden" :value="item.name">
</td>
<td v-show="status==2"><input v-model="item.label" class="form-control"></td>
<td v-show="status==2"><input v-model="item.type" class="form-control"></td>
<td v-show="status==2"><!--<input v-model="item.inType">-->
<select v-model="item.inType" class="form-control" style="width: 130px">
<option></option>
<option v-for="x in inTypes" :value="x">{{x}}</option>
</select>
</td>
<td v-show="status==2"><input v-model="item.inExt" class="form-control"></td>
<td v-show="status==2"><input v-model="item.remark" class="form-control"></td>
</tr>
</tbody>
</table>
<div class="col-xs-1" style="padding-right: 0px">
<ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
<li @click="sheet=item" :class="[{active: sheet==item }]" v-for="item in sheetArr" >
<a href="javascript:;" data-target="#tab3Content1" data-toggle="tab" v-text="serviceDetail['tables'][item]['name']"></a>
</li>
</ul>
</div>
<!-- sort -->
<!--<div class="col-md-5" v-show="false">
<table class="table-bordered table-auto">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th>字段名</th>
<th>中文名</th>
<th>展示名</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.items">
<td v-show="status!=2" class="icon icon-move"></td>
<td v-show="status!=2" v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
<td v-show="status!=2" v-text="item.label"></td>
<td v-show="status!=2"><input v-model="item.label" style="width: 100px;"></td>
</tr>
</tbody>
</table>
</div>-->
<div class="col-xs-6" style="padding-left: 0px;">
<div class="tab-content">
<div class="tab-pane fade active in" id="">
<table class="table-bordered table-auto" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<td v-show="status==3 || status==4 || status==5 || status==6"><input type="checkbox"></td>
<th v-show="status==1"></th>
<th>字段名</th>
<th>中文名</th>
<th>数据类型</th>
<th>输入类型</th>
<th>附加属性</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in serviceDetail['tables'][sheet].items">
<td v-show="status==3"><input type="checkbox" v-model="serviceInfo.exports" :value="sheet + '$' + item.name" class=""></td>
<td v-show="status==4"><input type="checkbox" v-model="serviceInfo.imports" :value="sheet + '$' + item.name" class=""></td>
<td v-show="status==5"><input type="checkbox" v-model="serviceInfo.shows" :value="sheet + '$' + item.name" class=""></td>
<td v-show="status==6"><input type="checkbox" v-model="filterArr" :value="sheet + '$' + item.name" class=""></td>
<!-- shows -->
<div class="col-md-5" v-show="status==5">
<div class="panel">
<td v-show="status==1" class="icon icon-move"></td>
<td v-show="status!=2" v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
<td v-show="status!=2" v-text="item.label"></td>
<td v-show="status!=2" v-text="item.type"></td>
<td v-show="status!=2" v-text="item.inType"></td>
<td v-show="status!=2" v-text="item.inExt"></td>
<td v-show="status!=2" v-text="item.remark"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xs-5" style="padding-left: 0px;padding-right: 0px">
<!-- shows -->
<div class="panel" v-show="status==5">
<div class="panel-heading">列表展示的属性</div>
<div id="show" class="panel-body">
<table class="table-bordered table-auto" style="width: 100%">
@@ -120,7 +102,7 @@
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.shows">
<tr v-for="(item, index) in serviceInfo.shows">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
@@ -132,11 +114,9 @@
</table>
</div>
</div>
</div>
<!-- exports -->
<div class="col-md-5" v-show="status==3">
<div class="panel">
<!-- exports -->
<div class="panel" v-show="status==3">
<div class="panel-heading">导出的属性配置</div>
<div id="export" class="panel-body">
<table class="table-bordered table-auto" style="width: 100%">
@@ -149,7 +129,7 @@
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.exports">
<tr v-for="(item, index) in serviceInfo.exports">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
@@ -161,11 +141,9 @@
</table>
</div>
</div>
</div>
<!-- imports -->
<div class="col-md-5" v-show="status==4">
<div class="panel">
<!-- imports -->
<div class="panel" v-show="status==4">
<div class="panel-heading">
导入的属性配置
</div>
@@ -180,7 +158,7 @@
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.imports">
<tr v-for="(item, index) in serviceInfo.imports">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
@@ -192,11 +170,9 @@
</table>
</div>
</div>
</div>
<!-- filters -->
<div class="col-md-5" v-show="status==6">
<div class="panel">
<!-- filters -->
<div class="panel" v-show="status==6">
<div class="panel-heading">查询配置</div>
<div id="filter" class="panel-body" style="overflow:auto;">
<table class="table-bordered table-auto" style="width: 100%">
@@ -210,20 +186,20 @@
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in filters">
<tr v-for="(item, index) in filterArr">
<td class="icon icon-move">
<input name="name" :value="item.name" type="hidden">
<input name="name" :value="item" type="hidden">
</td>
<td v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item.name)}}</td>
<td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item)}}</td>
<td>
<label>
<input type="checkbox" v-model="item.checked" value="1"> 展示
<input type="checkbox" v-model="filterMap[item].checked" value="1"> 展示
</label>
</td>
<td>
<label class="checkbox-inline" v-for="c in filterCate">
<input type="checkbox" v-model="item.filterType" :value="c"> {{c}}
<input type="checkbox" v-model="filterMap[item].filterType" :value="c"> {{c}}
</label>
</td>
</tr>
@@ -233,32 +209,7 @@
</div>
</div>
<!-- dbPlat -->
<div class="col-lg-5" v-show="status==7 ">
<div class="panel">
<div class="panel-heading">数据平台配置</div>
<div class="panel-body" style="overflow:auto;">
<form>
<div class="form-group">
<label class="col-sm-2">数据平台</label>
<div class="col-md-6">
<input type="hidden" v-model="row.key">
<select v-model="row.dbPlatId" class="form-control">
<option></option>
<option v-for="item in dbPlats" :value="item.key" v-text="item.name"></option>
</select>
</div>
<div class="col-md-4">
<select v-model="row.catalog" class="form-control">
<option></option>
<option v-for="item in catalogs()" :value="item" v-text="item"></option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="clearfix"></div>
</row>
@@ -267,11 +218,14 @@
var vm = new Vue({
el: ".meta-service",
data: {
//new
sheetArr: ["a"],//别名
sheet: "a",//别名
inTypes: ["INPUT", "SELECT_EXT", "INPUT_DT"],
dataTypes: ["bigint(20)", "varchar(255)", "varchar(64)", "varchar(32)", "varchar(16)", "int(11)", "int(3)", "int(2)", "datetime"],
filterCate: ["EQUAL", "NOTEQUAL", "LIKE", "IN"],
tables: [],//所有的业务类型，【测试用】
meta: {
serviceInfo: {
name:"",
table:"",
items: [],
@@ -279,10 +233,12 @@
exports: [],
imports: [],
filters: [{name:"", filterType:[""]}]
},//完整的元数据数据，
},
serviceDetail: {tables: {a:{items:[]}}},
move: false,
status: 0, //页面默认状态
table: "", //页面选择的业务类型
itemSort: [], //待保存的业务属性
oldItems: [], //不被修改的字段属性
@@ -293,117 +249,113 @@
filter: {db: "", catalog: "", name: ""},//tableList 过滤条件
filters:[],//查询配置
status: 0, //页面默认状态
services: [],//业务列表
service: "", //页面选择的业务类型
table: "",//表别名
filterArr:[],
services: []
filterMap:{},
},
watch: {
status: function (v) {
this.setMove(v)
},
table: function (table) {
this.loadDetail(table);
services: function (v) {
if(v.length > 0) {
vm.service = v[0]["name"];
}
},
"meta.items": {
handler: function (nv, ov) {
var itemNv = nv || [];
var itemOv = vm.oldItems || [];
if (itemOv.length == 0) return;
var itemEdit = [];
a:for (var i = 0; i < itemOv.length; i++) {
var attr = ["label", "name", "remark", "type", "inType"];
for (var j = 0; j < attr.length; j++) {
var k = attr[j];
if (itemOv[i][k] != itemNv[i][k]) {
itemEdit.push(itemNv[i]);
continue a;
service: function (v) {
this.loadInfo(v);
this.loadDetail(v);
},
serviceInfo: function(v) {
let arr = [];
let map = {};
v["filters"].forEach(function (f) {
arr.push(f["name"]);
map[f["name"]] = f;
});
this.filterMap = map;
this.filterArr = arr;
},
serviceDetail: function (v) {
var arr = [];
for(k in v.tables) {
arr.push(k);
}
this.sheetArr = arr;//别名
this.sheet = arr[0];
},
sheet: function (v) {
this.table = v;
},
filterArr: function (v) {
let map = {};
for(j in v) {
let k = v[j];
map[k] = this.filterMap[k];
if (!map[k]) {
for (i in vm.serviceInfo.filters) {
if (vm.serviceInfo.filters[i]["name"] == k) {
map[k] = vm.serviceInfo.filters[i];
}
}
}
vm.itemEdit = itemEdit;
},
deep: true
},
"meta.shows": function (v) {
//console.log(v.length)
},
tables: function (v) {
if(v.length > 0) {
vm.table = v[0]["name"];
if (!map[k]) {
map[k] = {name: k, filterType:[], checked: false};//构造filter 对象
}
}
this.filterMap = map;
},
meta: function (v) {
vm.row = {key:v.key, dbPlatId: v.dbPlatId, catalog: v.catalog};
vm.filters = v.filters;
var filterArr = [];
/*vm.filters.forEach(function (item) {
filterArr.push(item.name);
})*/
vm.filterArr = filterArr;
},
filterArr: function (v) {
var filters = [];
vm.filterArr.forEach(function (item) {
var filter;
for (i in vm.filters) {
if (item == vm.filters[i].name) {
filter = vm.filters[i];
}
}
/*vm.meta.filters.forEach(function (x) {
if (item == x.name) {
//filters.push(x);
filter = x;
}
})*/
if (!filter) {
filter = {name: item, filterType:[], checked: 0};
}
filters.push(filter);
});
vm.filters = filters;
}
},
methods: {
loadDetail: function (cate) {
//this.status = 0;
red.getJSON("/meta/tableinfo",{name: cate}, function (json) {
var row = json;
loadInfo: function (name) {
red.getJSON("/meta/service_info",{name: name}, function (json) {
var row = red.replacePoint(json);
row.shows = row.shows || [];
row.exports = row.exports || [];
row.imports = row.imports || [];
row.filters = row.filters || [];
vm.meta = row;
var oldItems = [];
row.items.forEach(function (item) {
var d = {};
["label", "name", "remark", "type", "inType"].forEach(function (k) {
d[k] = item[k];
});
oldItems.push(d);
});
vm.oldItems = oldItems;
});
},
tableList: function () {
red.getJSON("/meta/tablelist",{}, function (json) {
vm.tables = json;
vm.serviceInfo = row;
});
},
catalogs: function() {
loadDetail: function (name) {
red.getJSON("/meta/service_detail",{name: name}, function (json) {
vm.serviceDetail = red.replacePoint(json);
});
},
serviceList: function () {
red.getJSON("/meta/service_list",{}, function (json) {
vm.services = red.replacePoint(json);
});
},
getFieldLabel: function (col) {
if (!col) {
return "";
}
var tableInfo = vm.serviceDetail['tables'][col.split("$")[0]];
if (tableInfo) {
for (var i = 0; i < tableInfo.items.length; i++) {
if (tableInfo.items[i].name == col.split("$")[1]) {
return tableInfo.items[i].label;
}
}
}
return '';
},
/*catalogs: function() {
var dbPlats = this.dbPlats;
for (i in dbPlats) {
if (dbPlats[i].key == this.row.dbPlatId) {
return dbPlats[i]["catalogs"]
}
}
},
},*/
setMove: function () {
if (this.status == 1) {
$('#sortableList,table>tbody').sortable({
@@ -429,7 +381,7 @@
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.shows = shows;
vm.serviceInfo.shows = shows;
}
});
} else if (this.status == 4) {
@@ -442,7 +394,7 @@
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.imports = shows;
vm.serviceInfo.imports = shows;
}
});
} else if (this.status == 3) {
@@ -455,7 +407,7 @@
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.exports = shows;
vm.serviceInfo.exports = shows;
}
});
}
@@ -512,28 +464,37 @@
items: JSON.stringify(vm.itemEdit)
});
}
else if (vm.status == 3 || vm.status == 4 || vm.status == 5) {
else if (vm.status == 3 || vm.status == 4 /*|| vm.status == 5*/) {
var urls = {3: "/meta/exportsort", 4: "/meta/importsort", 5: "/meta/showsort"};
var items = {3: vm.meta.exports, 4: vm.meta.imports, 5: vm.meta.shows};
var items = {3: vm.serviceInfo.exports, 4: vm.serviceInfo.imports, 5: vm.serviceInfo.shows};
var dataStr = JSON.stringify(red.replace$(items[vm.status]));
red.post(urls[vm.status], {
serviceKey: vm.table,
items: JSON.stringify(items[vm.status])
serviceKey: this.service,
items: dataStr
});
}
else if (vm.status == 5) {
var dataStr = JSON.stringify(red.replace$(vm.serviceInfo.shows));
console.log("dataStr", dataStr);
red.post("/meta/showsort", {
serviceKey: vm.table,
items: JSON.stringify(vm.meta.shows)
serviceKey: vm.service,
items: dataStr
});
}
else if (vm.status == 6) {
console.log(vm.filters);
let filterData = [];
for (i in this.filterArr) {
filterData.push(this.filterMap[this.filterArr[i]]);
}
red.post("/meta/filter_update", {
serviceKey: vm.table,
filters: JSON.stringify(vm.filters)
serviceKey: vm.service,
filters: JSON.stringify(red.replace$(filterData))
});
}
@@ -546,26 +507,16 @@
else {
red.showMsg();
}
},
getFieldLabel: function (col) {
if (!col) {
return "";
}
for (var i = 0; i < vm.oldItems.length; i++) {
if (vm.oldItems[i].name == col) {
return vm.oldItems[i].label;
}
}
}
},
mounted: function (){
//dbPlats 列表初始化
red.dbPlats(function (json) {
/*red.dbPlats(function (json) {
vm.dbPlats = json;
});
});*/
this.tableList();
this.serviceList();
/*$(window).keydown(function (event) {
// 监听 Ctrl + Enter 可全屏查看

21
root/metadata/metatable/metaTable.html
View File

@@ -240,26 +240,30 @@
<!-- dbPlat -->
<div class="col-lg-5" v-show="status==7">
<div class="panel">
<div class="panel-heading">数据平台配置</div>
<div class="panel-heading">基本属性配置</div>
<div class="panel-body" style="overflow:auto;">
<form class="form-horizontal">
<input type="hidden" v-model="row.key">
<div class="form-group">
<label for="name" class="col-md-2">Table名称</label>
<div class="col-md-6 col-sm-10">
<div class="col-md-4 col-sm-8">
<input v-model="row.name" class="form-control" id="name" placeholder="请输入Table名称">
</div>
<label for="name" class="col-md-2">表别名</label>
<div class="col-md-3 col-sm-2">
<input v-model="row.alias" class="form-control" readonly>
</div>
</div>
<div class="form-group">
<label for="comment" class="col-md-2">Table标题</label>
<div class="col-md-6 col-sm-10">
<div class="col-md-4 col-sm-8">
<input v-model="row.comment" class="form-control" id="comment" placeholder="请输入 Table标题">
</div>
</div>
<div class="form-group">
<label class="col-md-2">数据平台</label>
<div class="col-md-6">
<div class="col-md-4 col-sm-8">
<select v-model="row.dbPlatId" class="form-control">
<option></option>
<option v-for="item in dbPlats" :value="item.key" v-text="item.name"></option>
@@ -304,7 +308,7 @@
itemEdit: {}, //待修改的字段属性
dbPlats:[],
row: {key: "", platId: "", dbPlatId:"", catalog: "", name:"", comment:""},
row: {key: "", platId: "", dbPlatId:"", catalog: "", name:"", comment:"", alias: ""},
filter: {db: "", catalog: "", name: ""},//tableList 过滤条件
filters:[],//查询配置
@@ -348,7 +352,7 @@
}
},
meta: function (v) {
vm.row = {key:v.key, dbPlatId: v.dbPlatId, catalog: v.catalog, name:v.name, comment:v.comment};
vm.row = {key:v.key, dbPlatId: v.dbPlatId, catalog: v.catalog, name:v.name, comment:v.comment, alias: v.alias};
/*vm.filters = v.filters;
var filterArr = [];
vm.filters.forEach(function (item) {
@@ -381,6 +385,11 @@
red.getJSON("/meta/tablelist",{}, function (json) {
vm.tables = json;
});
/*red.getJSON("/meta/service_info",{name: "user_service"}, function (json) {
var x = red.replaceAll(json);
console.log(x)
});*/
},
catalogs: function() {
var dbPlats = this.dbPlats;