573 lines
24 KiB
HTML
573 lines
24 KiB
HTML
<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}} [{{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、关联数据库表
|
||
|
||
--> |