511 lines
22 KiB
HTML
511 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<!-- zui -->
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/css/zui.min.css">
|
|
<link rel="stylesheet" href="res/css/zui-theme.css">
|
|
<link rel="stylesheet" href="res/css/red-kit.css">
|
|
<style>
|
|
.row {
|
|
margin-top: 10px;
|
|
}
|
|
.panel-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.icon-move{
|
|
padding-left: 5px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fixed">
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<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="table" style="width: 300px;">
|
|
<option v-for="t in tables" :value="t.name">{{t.comment}} [{{t.name}}]</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: 30px">
|
|
<button @click="metaSave()" :class="['btn',{'btn-primary':status!=0}]" type="button"> 保存修改</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<table class="table-bordered">
|
|
<thead>
|
|
<tr style="background-color: #f1f1f1">
|
|
<td v-show="status==3 || status==4 || status==5"><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==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-4" 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-4" 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%">
|
|
<tr style="background-color: #f1f1f1">
|
|
<th></th>
|
|
<th>字段名</th>
|
|
<th>中文名</th>
|
|
<th>支持排序</th>
|
|
</tr>
|
|
<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-4" 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%">
|
|
<tr style="background-color: #f1f1f1">
|
|
<th></th>
|
|
<th>字段名</th>
|
|
<th>中文名</th>
|
|
<!--<th>展示名</th>-->
|
|
</tr>
|
|
<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-4" v-show="status==4">
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
导入的属性配置
|
|
</div>
|
|
<div id="import" class="panel-body">
|
|
<table class="table-bordered table-auto" style="width: 100%">
|
|
<tr style="background-color: #f1f1f1">
|
|
<th></th>
|
|
<th>字段名</th>
|
|
<th>中文名</th>
|
|
<!--<th>展示名</th>-->
|
|
</tr>
|
|
<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>
|
|
|
|
<!-- findList -->
|
|
<div class="col-md-6" v-show="status==6">
|
|
<!--<div class="form-group">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox"> fdsaf
|
|
</label>
|
|
|
|
</div>-->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
高级查询的属性配置
|
|
</div>
|
|
<div id="find" class="panel-body" style="overflow:auto;">
|
|
<table class="table-bordered table-auto" style="width: 100%">
|
|
<tr style="background-color: #f1f1f1">
|
|
<th></th>
|
|
<th>字段名</th>
|
|
<th>中文名</th>
|
|
<th>支持查询类型</th>
|
|
</tr>
|
|
<tbody>
|
|
<tr v-for="(item, index) in meta.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 class="checkbox-inline" v-for="item in filterCate">
|
|
<input type="checkbox"> {{item}}
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
|
|
<script src="res/zui/lib/jquery/jquery.js"></script>
|
|
<!-- ZUI Javascript组件 -->
|
|
<script src="res/zui/js/zui.js"></script>
|
|
<script src="res/zui/lib/sortable/zui.sortable.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
|
|
<script>
|
|
var vm = new Vue({
|
|
el:".row",
|
|
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","NOTEQUAL","LIKE","IN"],
|
|
tables: [],//所有的业务类型，【测试用】
|
|
meta: {
|
|
items: [],
|
|
shows: [],
|
|
exports: [],
|
|
imports: []
|
|
},//完整的元数据数据，
|
|
move: false,
|
|
status:0, //页面默认状态
|
|
table: "", //页面选择的业务类型
|
|
itemSort:[], //待保存的业务属性
|
|
|
|
oldItems:[], //不被修改的字段属性
|
|
itemEdit:{}, //待修改的字段属性
|
|
|
|
},
|
|
watch: {
|
|
status : function (v) {
|
|
this.canMove(v)
|
|
},
|
|
table: function (table) {
|
|
this.load(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)
|
|
}
|
|
},
|
|
methods: {
|
|
load: function (cate) {
|
|
this.status = 0;
|
|
$.getJSON("/meta/info?key="+this.table,function (json) {
|
|
vm.meta = json;
|
|
|
|
var oldItems = [];
|
|
json.items.forEach(function (item) {
|
|
var d = {};
|
|
["label", "name", "remark", "type", "inType"].forEach(function (k) {
|
|
d[k] = item[k];
|
|
});
|
|
oldItems.push(d);
|
|
});
|
|
vm.oldItems = oldItems;
|
|
});
|
|
|
|
/*axios.get("/meta/info?key="+this.table).then(function (json) {
|
|
console.log("axios", json)
|
|
vm.meta = json.data;
|
|
});*/
|
|
},
|
|
getAllTables: function() {
|
|
$.getJSON("/meta/alltable",function (json) {
|
|
vm.tables = json;
|
|
if (!vm.table) {
|
|
//vm.table = vm.tables[0].name;
|
|
vm.table = "basic_platform";
|
|
}
|
|
});
|
|
},
|
|
canMove: 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 {
|
|
$('table>tbody').sortable('destroy');
|
|
}
|
|
},
|
|
/**
|
|
* 保存元数据变更：
|
|
* 1、基础数据排序
|
|
* --> 传递元素的顺序，后台对元素顺序重排
|
|
* 2、基础数据属性修改
|
|
* --> 只提交被修改过的元素及属性数据，后端通过属性名称对应修改，
|
|
* 3、导出
|
|
* 导出排序
|
|
* --> 传递元素的顺序，后台对元素的顺利重排，（同基础元素排序）
|
|
* 导出元素加减
|
|
* --> 将元素完整传递到后台，进行覆盖保存
|
|
* 4、导入
|
|
* 导入排序
|
|
* 导入元素加减
|
|
*
|
|
*/
|
|
metaSave: function () {
|
|
if (vm.status == 1 && vm.itemSort.length > 0) {
|
|
$.getJSON("/meta/itemsort", {serviceKey:vm.table, items:JSON.stringify(vm.itemSort)}, function (json) {
|
|
console.log(json);
|
|
new $.zui.Messager('操作成功', {
|
|
type: 'info' // 定义颜色主题
|
|
,placement: "bottom-right"
|
|
}).show();
|
|
//vm.status = 0;
|
|
});
|
|
}
|
|
|
|
else if (vm.status == 2 && vm.itemEdit.length > 0) {
|
|
$.getJSON("/meta/itemupdate", {serviceKey:vm.table, items:JSON.stringify(vm.itemEdit)}, function (json) {
|
|
console.log(json);
|
|
//vm.status = 0;
|
|
new $.zui.Messager('操作成功', {
|
|
type: 'info' // 定义颜色主题
|
|
,placement: "bottom-right"
|
|
}).show();
|
|
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};
|
|
|
|
|
|
$.getJSON(urls[vm.status], {serviceKey:vm.table, items:JSON.stringify(items[vm.status])}, function (json) {
|
|
console.log(json);
|
|
//vm.status = 0;
|
|
new $.zui.Messager('操作成功', {
|
|
type: 'info' // 定义颜色主题
|
|
,placement: "bottom-right"
|
|
}).show();
|
|
});
|
|
}
|
|
|
|
else if (vm.status == 5) {
|
|
$.getJSON("/meta/showsort", {serviceKey:vm.table, items:JSON.stringify(vm.meta.shows)}, function (json) {
|
|
console.log(json);
|
|
//vm.status = 0;
|
|
new $.zui.Messager('操作成功', {
|
|
type: 'info' // 定义颜色主题
|
|
,placement: "bottom-right"
|
|
}).show();
|
|
});
|
|
}
|
|
|
|
else {
|
|
new $.zui.Messager('操作成功', {
|
|
type: 'info' // 定义颜色主题
|
|
,placement: "bottom-right"
|
|
}).show();
|
|
}
|
|
},
|
|
getFieldLabel: function (col) {
|
|
for (var i = 0; i < vm.oldItems.length; i++) {
|
|
if (vm.oldItems[i].name == col) {
|
|
return vm.oldItems[i].label;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted: function (){
|
|
this.getAllTables();
|
|
//this.canMove();
|
|
|
|
/*for (var i = 0; i < 100; i++) {
|
|
this.load('record_ip')
|
|
}*/
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |