.
This commit is contained in:
167
root/_back/ddl_export.html
Normal file
167
root/_back/ddl_export.html
Normal file
@@ -0,0 +1,167 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>MySql数据库表结构导出</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>
|
||||
.input-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fixed">
|
||||
<row>
|
||||
<div class="col-md-8">
|
||||
<h3>导出数据库表结构(导出后使用wps打开)</h3>
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">jdbc.url</button>
|
||||
</span>
|
||||
<input id="url" type="text" class="form-control" placeholder="jdbc:mysql://127.0.0.1:3306" v-model="jdbc.url">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">jdbc.user</button>
|
||||
</span>
|
||||
<input id="user" type="text" class="form-control" placeholder="请输入数据库用户" v-model="jdbc.user">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">jdbc.pwd</button>
|
||||
</span>
|
||||
<input id="pwd" type="text" class="form-control" placeholder="请输入数据库密码" v-model="jdbc.pwd">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Database</button>
|
||||
</span>
|
||||
<input id="database" type="text" class="form-control" placeholder="请输入Database" v-model="jdbc.database">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" v-model="cate" value="word" checked> 导出表结构到word
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" v-model="cate" value="excel"> 导出表结构到excel
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="export" data-toggle="button" class="btn btn-primary" data-cate="word" type="button">导出表结构</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4" v-show="logs.total">
|
||||
<h3>最近使用记录 <small>共 {{logs.total}} 条记录</small></h3>
|
||||
<table class="table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>IP</th>
|
||||
<th>时间</th>
|
||||
<th>导出数据类型</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in logs.rows">
|
||||
<td v-text="row.remoteAddr"></td>
|
||||
<td v-text="timeFmt(new Date(row.time*1), 'yyyy-MM-dd HH:mm:ss')"></td>
|
||||
<td v-text="row.cate"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</row>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
|
||||
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<!-- ZUI Javascript组件 -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/js/zui.min.js"></script>
|
||||
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function getData(key, defaultValue) {
|
||||
var v = localStorage.getItem(key) || defaultValue || "";
|
||||
if (typeof(v) == "string" && v.startsWith("{") && v.endsWith("}")) {
|
||||
v = JSON.parse(v);
|
||||
} else if (typeof(v) == "string" && v.startsWith("[") && v.endsWith("]")) {
|
||||
v = JSON.parse(v);
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
var vm = new Vue({
|
||||
el:".container-fixed",
|
||||
data:{
|
||||
jdbc:getData("jdbc", {url: "jdbc:mysql://192.168.202.11:3306/", user: "root"}),
|
||||
cate: getData("cate", "word"),
|
||||
logs: {}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
loadLog: function() {
|
||||
$.getJSON("/ddl/ddllist",function (json) {
|
||||
vm.logs = json;
|
||||
});
|
||||
},
|
||||
timeFmt: function (date,fmt){
|
||||
var o = {
|
||||
"M+" : date.getMonth()+1, //月份
|
||||
"d+" : date.getDate(), //日
|
||||
"H+" : date.getHours(), //小时
|
||||
"m+" : date.getMinutes(), //分
|
||||
"s+" : date.getSeconds(), //秒
|
||||
"q+" : Math.floor((date.getMonth()+3)/3), //季度
|
||||
"S" : date.getMilliseconds() //毫秒
|
||||
};
|
||||
if(/(y+)/.test(fmt))
|
||||
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
|
||||
for(var k in o)
|
||||
if(new RegExp("("+ k +")").test(fmt))
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
||||
return fmt;
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.loadLog();
|
||||
}
|
||||
});
|
||||
|
||||
$("#export").click(function () {
|
||||
localStorage.setItem("jdbc", JSON.stringify(vm.jdbc));
|
||||
localStorage.setItem("cate", vm.cate);
|
||||
$.post("/"+ vm.cate +"/build", {account:JSON.stringify(vm.jdbc)}, function (json) {
|
||||
console.log(json)
|
||||
if (json.code == 0) {
|
||||
location.href = "/"+ vm.cate +"/download";
|
||||
} else {
|
||||
alert(json.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
321
root/_back/list.html
Normal file
321
root/_back/list.html
Normal file
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>高级查询</title>
|
||||
<!-- zui -->
|
||||
<link rel="stylesheet" href="../res/zui/css/zui.min.css">
|
||||
<link rel="stylesheet" href="../res/css/zui-theme.css">
|
||||
<link rel="stylesheet" href="../res/css/red-kit.css">
|
||||
<style>
|
||||
.item {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.table > thead > tr > th.sort:after{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-family: ZenIcon;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
color: #808080;
|
||||
text-transform: none;
|
||||
content: '\e6bd';
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.table > thead > tr > th.sort-up:after {
|
||||
color: #145ccd;
|
||||
content: '\e6b9';
|
||||
}
|
||||
.table > thead > tr > th.sort-down:after {
|
||||
color: #145ccd;
|
||||
content: '\e6b8';
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fixed">
|
||||
<h3>高级查询 - [测试用例]</h3>
|
||||
<div class="row">
|
||||
<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}} [{{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></option>
|
||||
<option v-for="f in cfg.filters" :value="f.name" :disabled="f.add">{{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="col-md-12">
|
||||
<div class="input-group item" v-for="(x,index) in formFilter">
|
||||
<span class="input-group-addon" style="width: 130px">{{x.label}}</span>
|
||||
<select class="form-control" :name="formFilter[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[formFilter[index].name]">
|
||||
|
||||
</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>
|
||||
<!--<tfoot>
|
||||
<tr>
|
||||
<td :colspan="meta.field_label.length">
|
||||
<ul class="pager pull-right">
|
||||
<li class="previous">
|
||||
<a>{{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>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>-->
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../res/zui/lib/jquery/jquery.js"></script>
|
||||
<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>
|
||||
var vm = new Vue({
|
||||
el:".row",
|
||||
data: {
|
||||
cfg:{
|
||||
cols: [],
|
||||
filters: []
|
||||
},
|
||||
tables: [],
|
||||
table: "",
|
||||
filters: [],
|
||||
formFilter: [
|
||||
|
||||
],
|
||||
addFilter: "recompany",
|
||||
para: {},
|
||||
list: {},
|
||||
limit: {pn: 1, ps: 10, total: 0},
|
||||
order:{col:"", desc:1}
|
||||
},
|
||||
watch: {
|
||||
addFilter: function (v) {
|
||||
vm.cfg.filters.forEach(function (f) {
|
||||
if (f.name == v) {
|
||||
f["add"] = 1;
|
||||
vm.add = "";
|
||||
vm.formFilter.push(f);
|
||||
}
|
||||
})
|
||||
},
|
||||
table: function (v) {
|
||||
vm.loadCfg();
|
||||
vm.formFilter = [];
|
||||
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;
|
||||
},
|
||||
limit: {
|
||||
handler(a, b) {
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
findList: function (n) {
|
||||
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 orders = [];
|
||||
if (vm.order.col) {
|
||||
orders.push(vm.order);
|
||||
}
|
||||
var fBean = {
|
||||
keyService: vm.table,
|
||||
filters: data,
|
||||
orders: orders,
|
||||
limit: vm.limit
|
||||
}
|
||||
$.post("/db/list", {fBean: JSON.stringify(fBean)}, function (json) {
|
||||
vm.list = json.body;
|
||||
});
|
||||
},
|
||||
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);
|
||||
return;
|
||||
},
|
||||
loadTables: function() {
|
||||
$.getJSON("/meta/alltable",function (json) {
|
||||
vm.tables = json;
|
||||
if (!vm.table) {
|
||||
//vm.table = vm.tables[0].name;
|
||||
vm.table = "basic_platform";
|
||||
}
|
||||
});
|
||||
},
|
||||
loadCfg: function () {
|
||||
$.getJSON("/meta/listcfg", {key: vm.table}, 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.loadTables();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
511
root/_back/meta.html
Normal file
511
root/_back/meta.html
Normal file
@@ -0,0 +1,511 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user