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

.

Browse Source
This commit is contained in:
lxyer
2019-03-07 10:24:29 +08:00
parent 6c8c683c31
commit e057d613b9
215 changed files with 70917 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
root/metadata/dataList.html Normal file
View File

@@ -0,0 +1,262 @@
<style>
.item {
padding-top: 10px;
}
</style>
<row class="data-list">
<h3>高级查询 - [测试用例]</h3>
<div class="col-md-6">
<select class="form-control" v-model="table" style="width: 300px;">
<option v-for="t in tables" :value="t.name">{{t.comment}}&nbsp;&nbsp;&nbsp;[{{t.name}}]</option>
</select>
</div>
<div class="col-md-6">
<div class="input-group pull-left">
<span class="input-group-btn">
<button class="btn btn-default" type="button">添加过滤条件</button>
</span>
<select class="form-control" v-model="addFilter" style="width: 130px;">
<option v-for="f in cfg.filters" :value="f.name" :disabled="f.checked">{{f.label}}</option>
</select>
<span class="input-group-btn">
<button @click="findList" class="btn btn-primary" type="button"> 查询</button>
</span>
<span class="input-group-btn" style="padding-left: 10px">
<button @click="exportExcel" class="btn" type="button"> 导出</button>
</span>
</div>
</div>
<div class="">
<div class="col-lg-4 col-md-6 col-xs-12" v-for="(x,index) in cfg.filters" v-if="x.checked">
<div class="input-group item">
<span class="input-group-addon" style="width: 130px;">{{x.label}}</span>
<select class="form-control" :name="cfg.filters[index].name + '_cate'" style="width: 100px">
<option v-for="t in x.filterType" :value="t.name">{{t.remark}}</option>
</select>
<span class="input-group-addon fix-border fix-padding"></span>
<input type="text" class="form-control" v-model="para[cfg.filters[index].name]">
<span class="input-group-addon fix-border fix-padding" style="padding: 5px" title="删除过滤条件">
<a href="javascript:;" @click="x.checked = false;"><i class="icon icon-trash"></i></a>
</span>
</div>
</div>
</div>
<div class="col-md-12" style="padding-top: 10px;overflow:auto;">
<table class="table table-bordered table-hover" style="width: 100%">
<thead>
<tr>
<th v-for="field in cfg.cols"
v-text="field.label"
:class="{'sort':field.order>0, 'sort-up':field.col==order.col && order.desc==1, 'sort-down':field.col==order.col && order.desc!=1}"
@click="sortEvent(field.col)"
>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in list.rows">
<td v-for="field in cfg.cols" v-title="dealField(row, field.col)" v-text="dealField(row, field.col)"></td>
</tr>
</tbody>
</table>
</div>
<div>
<ul class="pager pull-right" style="margin: 5px 10px">
<li class="previous">
<a style="border: 0;">共{{list.total}}条数据</a>
</li>
<li :class="['previous', {'disabled':limit.pn==1}]">
<a @click="findList(-- limit.pn)" href="javascript:;">«上一页</a>
</li>
<li :class="['next', {'disabled':limit.pn >= limit.total}]">
<a @click="findList(limit.pn = ++limit.pn )" href="javascript:;">»下一页</a>
</li>
<li class="previous">
<a style="border-bottom: 0;border-right: 0;border-top: 0;">到第<input v-model="limit.pn" style="width: 30px;height: 21px;">/ {{limit.total}}页</a>
</li>
<li class="previous">
<a @click="findList(limit.pn)" href="javascript:;">确定</a>
</li>
</ul>
</div>
</row>
<script>
var vm = new Vue({
el:".data-list",
data: {
cfg:{
cols: [],
filters: []
},
tables: [],
table: "",
//filters: [],
addFilter: "recompany",
para: {},
list: {rows:[], total:0},
limit: {pn: 1, ps: 10, total: 0},
order:{col:"id", desc:1}
},
watch: {
addFilter: function (v) {
vm.cfg.filters.forEach(function (f) {
if (f.name == v) {
f["checked"] = true;
vm.addFilter = "";
}
})
},
table: function () {
vm.loadCfg();
vm.limit = {pn: 1, ps: 10, total: 0};
vm.order = {col:"id", desc:1};
vm.findList();
},
list: function () {
var limit = vm.limit;
var list = vm.list;
var total = parseInt(list.total/limit.ps) + (list.total%limit.ps > 0 ? 1 : 0);
vm.limit["total"] = total;
}
},
methods: {
findList: function () {
var filters = [];
for (i in vm.cfg.filters) {
var f = vm.cfg.filters[i]
if (f.checked && vm.para[f.name] != '') {
var d = {};
d["col"] = f.name;
d["value"] = vm.para[f.name];
d["type"] = $("select[name=" + f.name + "_cate]").val();
filters.push(d);
}
}
filters.push({col: "status", value: 9, type: "NOTEQUAL"});
var orders = [];
//截取真实字段名，（考虑如果多表关联情况，是否需要加入真实字段名）
if (vm.order.col) {
var end = vm.order.col.indexOf("\|");
if (end < 0) {
end = vm.order.col.indexOf("=")
}
var col = vm.order.col;
if (end > 0) {
col = vm.order.col.substring(0, end);
}
orders.push({col: col, desc: vm.order.desc});
}
var fbean = {
keyService: vm.table,
filters: filters,
orders: orders,
limit: vm.limit
}
red.getJSON("/db/list",{fBean: JSON.stringify(fbean)}, function (json) {
json = json || {rows:[], total:0};
vm.list = json;
})
},
exportExcel: function () {
var data = [];
for (k in vm.para) {
if (vm.para[k] != '') {
var d = {};
d["col"] = k;
d["value"] = vm.para[k];
d["type"] = $("select[name=" + k + "_cate]").val();
data.push(d);
}
}
data.push({col: "status", value: 9, type: "NOTEQUAL"});
var fBean = {
keyService: vm.table,
filters: data,
orders: [{col: "status", desc: -1}],
limit: {ps: 5}
}
location.href = "/export/data?fBean=" + JSON.stringify(fBean) + "&platToken=" + red.getPlatToken() + "&cate=csv";
return;
},
tableList: function () {
red.getJSON("/meta/tablelist",{}, function (json) {
vm.tables = json;
vm.table = vm.tables[0].name;
});
},
loadCfg: function () {
red.getJSON("/meta/listcfg", {key: vm.table, platToken: red.getPlatToken()}, function (json) {
vm.cfg = json;
});
},
dealField: function (bean, field) {
var str = "";
if (!bean || !field) {
} else if (typeof(field) === 'function') {
str = field(bean);
} else if (field.indexOf("||") > 0) {//处理字典数据
var dic_type = field.split("||")[1];
var v = bean[field.split("||")[0]];
str = kvExtDeal(dic_type, v);
} else if (field.indexOf("|") > 0) {//处理字典数据
var dic_type = field.split("|")[1];
var v = bean[field.split("|")[0]];
str = v;//kvDeal(dic_type, v);
}
else if (field.indexOf("=") > 0) {//处理字典数据
var fun = field.split("=")[1];
var v = bean[field.split("=")[0]];
return v;
//eval("str =$funs."+ fun +"('"+ v +"')");
}
else if (field.indexOf("-") > 0) {
var name = field.split("-")[0];
var path = field.split("-")[1];
if (bean[name]) {
var href = config.services.issct + "/downLoadFdfs?fileId=" + encodeURI(bean[path]) + "&filename=" + encodeURI(bean[name]);
str = "<a href='" + href + "' target='_blank'>" + bean[name] + "</a>";
}
} else if (bean[field] === 0) { //特殊值 "0" 处理
str = "0";
} else if (bean[field] == "unknown") { //特殊值处理
str = "";
} else {
str = bean[field] || "";
}
return str;
},
sortEvent: function (col) {
if (vm.order.col == col) {
vm.order.desc = -vm.order.desc
} else {
vm.order.col = col;
vm.order.desc = 1;
}
vm.findList();
}
},
mounted: function () {
this.tableList();
}
});
</script>

29
root/metadata/metaLinK.html Normal file
View File

@@ -0,0 +1,29 @@
<row class="meta-link">
</row>
<script>
var vm = new Vue({
el: ".meta-link",
data: {
},
watch: {
},
methods: {
},
mounted: function () {
var m = {"a.name": "lxyer", "a.`age`": 11}
console.log(m["a.name"])
console.log("---------")
for (var k in m) {
console.log(k)
}
}
});
</script>

614
root/metadata/metaService.html Normal file
View File

@@ -0,0 +1,614 @@
<row class="meta-service">
<div class="col-md-12" style="padding-top: 10px;">
<div class="input-group list-head">
<!--<span class="input-group-btn">
<button class="btn btn-default" type="button">数据平台</button>
</span>
<select class="form-control" v-model="filter.dbPlatId" style="width: 100px;">
<option></option>
<option v-for="item in dbPlats" :value="item.key">{{item.name}}</option>
</select>-->
<span class="input-group-btn">
<button class="btn btn-default" type="button">选择业务类型</button>
</span>
<select class="form-control" v-model="table" style="width: 180px;">
<option v-for="item in tables" :value="item.name"> {{item.name}}&nbsp;&nbsp;&nbsp;[{{item.comment}}]</option>
</select>
<span class="input-group-btn">
<button @click="status=1" :class="['btn',{'btn-primary':status==1}]" type="button"> 排序</button>
</span>
<span class="input-group-btn">
<button @click="status=2" :class="['btn',{'btn-primary':status==2}]" type="button"> 编辑属性</button>
</span>
<span class="input-group-btn" style="padding-left: 20px">
<button @click="status=5" :class="['btn',{'btn-primary':status==5}]" type="button"> 列表配置</button>
</span>
<span class="input-group-btn">
<button @click="status=6" :class="['btn',{'btn-primary':status==6}]" type="button"> 查询配置</button>
</span>
<span class="input-group-btn" style="padding-left: 20px">
<button @click="status=3" :class="['btn',{'btn-primary':status==3}]" type="button"> 导出配置</button>
</span>
<span class="input-group-btn">
<button @click="status=4" :class="['btn',{'btn-primary':status==4}]" type="button"> 导入配置</button>
</span>
<span class="input-group-btn" style="padding-left: 20px">
<button @click="status=7;dbPlatList();" :class="['btn',{'btn-primary':status==7}]" type="button"> 数据平台</button>
</span>
<!-- fixme: 加入数据平台相关操作， 1、关联数据平台，2、表结构入库 -->
<span class="input-group-btn" style="padding-left: 30px">
<button @click="save()" :class="['btn',{'btn-primary':status!=0},{'disabled':status==0}]" type="button"> 保存</button>
</span>
</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>
<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-md-5" v-show="status==5">
<div class="panel">
<div class="panel-heading">列表展示的属性</div>
<div id="show" class="panel-body">
<table class="table-bordered table-auto" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th>字段名</th>
<th>中文名</th>
<!--<th>支持排序</th>-->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.shows">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
<td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item)}}</td>
<td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- exports -->
<div class="col-md-5" v-show="status==3">
<div class="panel">
<div class="panel-heading">导出的属性配置</div>
<div id="export" class="panel-body">
<table class="table-bordered table-auto" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th>字段名</th>
<th>中文名</th>
<!--<th>展示名</th>-->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.exports">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
<td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item)}}</td>
<td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- imports -->
<div class="col-md-5" v-show="status==4">
<div class="panel">
<div class="panel-heading">
导入的属性配置
</div>
<div id="import" class="panel-body" style="/*padding-top: 10px;*/overflow:auto;">
<table class="table-bordered table-auto" style="width: 100%;height: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th>字段名</th>
<th>中文名</th>
<!--<th>展示名</th>-->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.imports">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
<td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item)}}</td>
<td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- filters -->
<div class="col-md-5" v-show="status==6">
<div class="panel">
<div class="panel-heading">查询配置</div>
<div id="filter" class="panel-body" style="overflow:auto;">
<table class="table-bordered table-auto" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th style="width: 30px">字段名</th>
<th style="width: 30px">中文名</th>
<th style="width: 30px">默认展示</th>
<th>支持查询类型</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in filters">
<td class="icon icon-move">
<input name="name" :value="item.name" type="hidden">
</td>
<td v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item.name)}}</td>
<td>
<label>
<input type="checkbox" v-model="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}}
</label>
</td>
</tr>
</tbody>
</table>
</div>
</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>
</row>
<script src="res/zui/lib/sortable/zui.sortable.js"></script>
<script>
var vm = new Vue({
el: ".meta-service",
data: {
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: {
items: [],
shows: [],
exports: [],
imports: [],
filters: [{name:"", filterType:[""]}]
},//完整的元数据数据，
move: false,
status: 0, //页面默认状态
table: "", //页面选择的业务类型
itemSort: [], //待保存的业务属性
oldItems: [], //不被修改的字段属性
itemEdit: {}, //待修改的字段属性
dbPlats:[],
row: {key: "", platId: "", catalog: ""},
filter: {db: "", catalog: "", name: ""},//tableList 过滤条件
filters:[],//查询配置
filterArr:[]
},
watch: {
status: function (v) {
this.setMove(v)
},
table: function (table) {
this.loadDetail(table);
},
"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;
}
}
}
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"];
}
},
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;
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;
});
},
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({
selector: '.list-group-item, tr',
finish: function (e) {
var rows = e.list;
vm.itemSort = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
vm.itemSort.push(item);
}
},
// 设置更多选项...
});
}
else if (this.status == 5) {
$('#show>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var shows = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.shows = shows;
}
});
} else if (this.status == 4) {
$('#import>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var shows = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.imports = shows;
}
});
} else if (this.status == 3) {
$('#export>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var shows = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.exports = shows;
}
});
}
else if (this.status == 6) {
$('#filter>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var filterArr = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
filterArr.push(item);
}
vm.filterArr = filterArr;
}
});
}
else {
$('table>tbody').sortable('destroy');
}
},
/**
* 保存元数据变更：
* 1、基础数据排序
* --> 传递元素的顺序，后台对元素顺序重排
* 2、基础数据属性修改
* --> 只提交被修改过的元素及属性数据，后端通过属性名称对应修改，
* 3、导出
* 导出排序
* --> 传递元素的顺序，后台对元素的顺利重排，（同基础元素排序）
* 导出元素加减
* --> 将元素完整传递到后台，进行覆盖保存
* 4、导入
* 导入排序
* 导入元素加减
* 5、
*
* 7、数据平台
* 记录元数据，存贮的数据平台
*
*/
save: function () {
if (vm.status == 1 && vm.itemSort.length > 0) {
red.post("/meta/itemsort", {
serviceKey: vm.table,
items: JSON.stringify(vm.itemSort)
});
}
else if (vm.status == 2 && vm.itemEdit.length > 0) {
red.post("/meta/itemupdate", {
serviceKey: vm.table,
items: JSON.stringify(vm.itemEdit)
});
}
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};
red.post(urls[vm.status], {
serviceKey: vm.table,
items: JSON.stringify(items[vm.status])
});
}
else if (vm.status == 5) {
red.post("/meta/showsort", {
serviceKey: vm.table,
items: JSON.stringify(vm.meta.shows)
});
}
else if (vm.status == 6) {
console.log(vm.filters);
red.post("/meta/filter_update", {
serviceKey: vm.table,
filters: JSON.stringify(vm.filters)
});
}
else if (vm.status == 7) {
console.log(vm.row);
red.post("/meta/dbplatupdate", vm.row)
}
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) {
vm.dbPlats = json;
});
this.tableList();
/*$(window).keydown(function (event) {
// 监听 Ctrl + Enter 可全屏查看
if (event.ctrlKey && event.keyCode == 13) {
vm.save();
}
});*/
}
});
</script>
<!--
<row class="">
</row>
<script>
var vm = new Vue({
el: ".meta-service",
data: {
},
watch: {
},
methods: {
},
mounted: function () {
var m = {"a.name": "lxyer", "a.`age`": 11}
console.log(m["a.name"])
console.log("-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;")
for (var k in m) {
console.log(k)
}
}
});
</script>-->

110
root/metadata/metatable/list.html Normal file
View File

@@ -0,0 +1,110 @@
<style>
.table td, .table th {
padding: 4px;
}
</style>
<row class="metatable-list">
<div class="col-md-12">
<h3 v-text="cfg.title"></h3>
</div>
<div class="col-md-12">
<div class="input-group list-head pull-left">
<span class="input-group-btn">
<button class="btn btn-default" type="button">数据平台</button>
</span>
<select class="form-control" v-model="filter.dbPlatId" style="width: 150px;">
<option></option>
<option v-for="item in dbPlats" :value="item.key">{{item.name}}</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Catalog</button>
</span>
<select class="form-control" v-model="filter.catalog" style="width: 150px;">
<option></option>
<option v-for="item in catalogs()" :value="item" v-text="item"></option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button">表名称</button>
</span>
<input class="form-control" v-model="filter.name" style="width: 100px">
</div>
</div>
<div class="col-md-12" style="padding-top: 10px;overflow:auto;">
<table class="table table-bordered table-hover" style="width: 100%">
<thead>
<tr>
<th v-for="field in cfg.cols" v-text="field.label"></th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="row in list.rows">
<td v-for="field in cfg.cols" v-title="row[field.col]" v-text="row[field.col]"></td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</row>
<script>
var vm = new Vue({
el: ".metatable-list",
data: {
cfg: {
title: "MetaTable 列表",
cols: [
{col: "name", label: "表名称"},
{col: "comment", label: "注释"},
{col: "dbPlatName", label: "所属数据库"},
{col: "catalog", label: "所属Database"},
{col: "dataCount", label: "数据量"}
],
filters: [],
cates: ["find","update"]
},
dbPlats:[],
list:{rows:[{name:"user", comment:"[用户表]", dataCount: 23}]},
filter: {dbPlatId: "", catalog: "", name: ""},
},
watch: {
filter: {
handler(n, o) {
vm.tableList();
},
immediate: true,
deep: true
}
},
methods: {
catalogs: function () {
var dbPlats = this.dbPlats;
for (i in dbPlats) {
if (dbPlats[i].key == this.filter.dbPlatId) {
return dbPlats[i]["catalogs"]
}
}
},
tableList: function () {
var para = red.putAll({}, vm.filter);
red.getJSON("/meta/tablelist", para, function (json) {
vm.list = {rows: json};
});
},
},
mounted: function () {
//dbPlats 列表初始化
red.dbPlats(function (json) {
vm.dbPlats = json;
});
this.tableList();
}
});
</script>

573
root/metadata/metatable/metaTable.html Normal file
View File

@@ -0,0 +1,573 @@
<row class="meta-list">
<div class="col-md-12" style="padding-top: 10px;">
<div class="input-group list-head">
<span class="input-group-btn">
<button class="btn btn-default" type="button">选择Table</button>
</span>
<select class="form-control" v-model="table" style="width: 180px;">
<option v-for="item in tables" :value="item.name"> {{item.name}}&nbsp;&nbsp;&nbsp;[{{item.comment}}]</option>
</select>
<span class="input-group-btn">
<button @click="status=2" :class="['btn',{'btn-primary':status==2}]" type="button"> 字段编辑</button>
</span>
<span class="input-group-btn">
<button @click="status=1" :class="['btn',{'btn-primary':status==1}]" type="button"> 排序</button>
</span>
<!--<span class="input-group-btn" style="padding-left: 20px">
<button @click="status=5" :class="['btn',{'btn-primary':status==5}]" type="button"> 列表配置</button>
</span>
<span class="input-group-btn">
<button @click="status=6" :class="['btn',{'btn-primary':status==6}]" type="button"> 查询配置</button>
</span>
<span class="input-group-btn" style="padding-left: 20px">
<button @click="status=3" :class="['btn',{'btn-primary':status==3}]" type="button"> 导出配置</button>
</span>
<span class="input-group-btn">
<button @click="status=4" :class="['btn',{'btn-primary':status==4}]" type="button"> 导入配置</button>
</span>-->
<span class="input-group-btn" style="padding-left: 20px">
<button @click="status=7;" :class="['btn',{'btn-primary':status==7}]" type="button"> 基本属性</button>
</span>
<!-- fixme: 加入数据平台相关操作， 1、关联数据平台，2、表结构入库 -->
<span class="input-group-btn" style="padding-left: 30px">
<button @click="save()" :class="['btn',{'btn-primary':status!=0},{'disabled':status==0}]" type="button"> 保存</button>
</span>
</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>
<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-md-5" v-show="status==5">
<div class="panel">
<div class="panel-heading">列表展示的属性</div>
<div id="show" class="panel-body">
<table class="table-bordered table-auto" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th>字段名</th>
<th>中文名</th>
<!--<th>支持排序</th>-->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.shows">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
<td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item)}}</td>
<td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- exports -->
<div class="col-md-5" v-show="status==3">
<div class="panel">
<div class="panel-heading">导出的属性配置</div>
<div id="export" class="panel-body">
<table class="table-bordered table-auto" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th>字段名</th>
<th>中文名</th>
<!--<th>展示名</th>-->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.exports">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
<td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item)}}</td>
<td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- imports -->
<div class="col-md-5" v-show="status==4">
<div class="panel">
<div class="panel-heading">
导入的属性配置
</div>
<div id="import" class="panel-body" style="/*padding-top: 10px;*/overflow:auto;">
<table class="table-bordered table-auto" style="width: 100%;height: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th>字段名</th>
<th>中文名</th>
<!--<th>展示名</th>-->
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in meta.imports">
<td class="icon icon-move">
<input name="name" :value="item" type="hidden">
</td>
<td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item)}}</td>
<td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- filters -->
<div class="col-md-5" v-show="status==6">
<div class="panel">
<div class="panel-heading">查询配置</div>
<div id="filter" class="panel-body" style="overflow:auto;">
<table class="table-bordered table-auto" style="width: 100%">
<thead>
<tr style="background-color: #f1f1f1">
<th></th>
<th style="width: 30px">字段名</th>
<th style="width: 30px">中文名</th>
<th style="width: 30px">默认展示</th>
<th>支持查询类型</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in filters">
<td class="icon icon-move">
<input name="name" :value="item.name" type="hidden">
</td>
<td v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="">{{getFieldLabel(item.name)}}</td>
<td>
<label>
<input type="checkbox" v-model="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}}
</label>
</td>
</tr>
</tbody>
</table>
</div>
</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 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">
<input v-model="row.name" class="form-control" id="name" placeholder="请输入Table名称">
</div>
</div>
<div class="form-group">
<label for="comment" class="col-md-2">Table标题</label>
<div class="col-md-6 col-sm-10">
<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">
<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>
</row>
<script src="res/zui/lib/sortable/zui.sortable.js"></script>
<script>
var vm = new Vue({
el: ".meta-list",
data: {
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: {
items: [],
shows: [],
exports: [],
imports: [],
filters: [{name:"", filterType:[""]}]
},//完整的元数据数据，
move: false,
status: 0, //页面默认状态
table: "", //页面选择的业务类型
itemSort: [], //待保存的业务属性
oldItems: [], //不被修改的字段属性
itemEdit: {}, //待修改的字段属性
dbPlats:[],
row: {key: "", platId: "", dbPlatId:"", catalog: "", name:"", comment:""},
filter: {db: "", catalog: "", name: ""},//tableList 过滤条件
filters:[],//查询配置
filterArr:[]
},
watch: {
status: function (v) {
this.setMove(v)
},
table: function (table) {
this.loadDetail(table);
},
"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","inExt"];
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;
}
}
}
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"];
}
},
meta: function (v) {
vm.row = {key:v.key, dbPlatId: v.dbPlatId, catalog: v.catalog, name:v.name, comment:v.comment};
/*vm.filters = v.filters;
var filterArr = [];
vm.filters.forEach(function (item) {
filterArr.push(item.name);
})
vm.filterArr = filterArr;*/
},
},
methods: {
loadDetail: function (cate) {
//this.status = 0;
red.getJSON("/meta/tableinfo",{name: cate}, function (json) {
var row = json;
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;
});
},
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({
selector: '.list-group-item, tr',
finish: function (e) {
var rows = e.list;
vm.itemSort = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
vm.itemSort.push(item);
}
},
// 设置更多选项...
});
}
else if (this.status == 5) {
$('#show>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var shows = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.shows = shows;
}
});
} else if (this.status == 4) {
$('#import>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var shows = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.imports = shows;
}
});
} else if (this.status == 3) {
$('#export>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var shows = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
shows.push(item);
}
vm.meta.exports = shows;
}
});
}
else if (this.status == 6) {
$('#filter>table>tbody').sortable({
selector: 'tr',
finish: function (e) {
var rows = e.list;
var filterArr = [];
for (var i = 0; i < rows.length; i++) {
var item = $(rows[i]).find("input[name='name']").val();
filterArr.push(item);
}
vm.filterArr = filterArr;
}
});
}
else {
$('table>tbody').sortable('destroy');
}
},
/**
* 保存元数据变更：
* 1、基础数据排序
* --> 传递元素的顺序，后台对元素顺序重排
* 2、基础数据属性修改
* --> 只提交被修改过的元素及属性数据，后端通过属性名称对应修改，
* 3、导出
* 导出排序
* --> 传递元素的顺序，后台对元素的顺利重排，（同基础元素排序）
* 导出元素加减
* --> 将元素完整传递到后台，进行覆盖保存
* 4、导入
* 导入排序
* 导入元素加减
* 5、
*
* 7、数据平台
* 记录元数据，存贮的数据平台
*
*/
save: function () {
if (vm.status == 1 && vm.itemSort.length > 0) {
red.post("/meta/itemsort", {
serviceKey: vm.table,
items: JSON.stringify(vm.itemSort)
});
}
else if (vm.status == 2 && vm.itemEdit.length > 0) {
red.post("/meta/itemupdate", {
serviceKey: vm.table,
items: JSON.stringify(vm.itemEdit)
});
}
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};
red.post(urls[vm.status], {
serviceKey: vm.table,
items: JSON.stringify(items[vm.status])
});
}
else if (vm.status == 5) {
red.post("/meta/showsort", {
serviceKey: vm.table,
items: JSON.stringify(vm.meta.shows)
});
}
else if (vm.status == 6) {
console.log(vm.filters);
red.post("/meta/filter_update", {
serviceKey: vm.table,
filters: JSON.stringify(vm.filters)
});
}
else if (vm.status == 7) {
console.log(vm.row);
red.post("/meta/dbplatupdate", {metaTable: JSON.stringify(vm.row)})
}
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) {
vm.dbPlats = json;
});
this.tableList();
/*$(window).keydown(function (event) {
// 监听 Ctrl + Enter 可全屏查看
if (event.ctrlKey && event.keyCode == 13) {
vm.save();
}
});*/
}
});
</script>
<!--
todo:
MetaData，
1、Excel导入
2、操作数据库表
3、关联数据库表
-->