638 lines
26 KiB
HTML
638 lines
26 KiB
HTML
|
||
<row class="meta-service">
|
||
<div class="col-md-12">
|
||
<div class="info" style="padding-left: 10px">
|
||
<a @click="showInfo()" href="javascript:;"><i class="icon icon-info"></i></a>
|
||
</div>
|
||
<!-- info -->
|
||
<div class="modal fade" id="f-info">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
|
||
<h4 class="modal-title">功能概览</h4>
|
||
</div>
|
||
<div class="modal-body" style="text-align: left">
|
||
<div style="text-align: left">
|
||
<p>
|
||
<b>如何创建一个业务？</b><br><!-- <span style="color: #f1a325;font-size: 25px">so easy</span> -->
|
||
1、选择业务主表、填写名称、标识码<br>
|
||
2、保存<br>
|
||
3、业务维护(常规业务维护:列表，查询配置，导出配置，修改基本信息， 以及未开发的：详情配置，表单配置)<br>
|
||
</p>
|
||
<p>
|
||
<b>选择主表的意义，关联表信息业务中如何控制？</b><br>
|
||
业务主表选择某个表，也即当前业务主要围绕这个实体表进行；<br>
|
||
对于关联表，只需要在MetaLink中建立关联即可，此处选择了业务主表后会自动查询所有已经关联关联的业务表，<br>
|
||
然后便可以轻松配置 列表要展示，导出哪些字段，查询过滤条件用哪些表的哪些字段，等等。。
|
||
</p>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<!--<p>数据存贮结构如下：</p>
|
||
<img src="../res/img/meta_service.png">-->
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<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="service" style="width: 180px;">
|
||
<option v-for="item in services" :value="item.name"> {{item.name}} [{{item.comment}}]</option>
|
||
</select>
|
||
|
||
<span class="input-group-btn pull-left" style="padding-left: 5px">
|
||
<button @click="createService()" :class="['btn']" 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: 10px">
|
||
<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="tipShow()" :class="['btn',{'btn-primary':status==7}]" type="button"> 基本属性</button>
|
||
</span>-->
|
||
|
||
<span class="input-group-btn" style="padding-left: 20px">
|
||
<button @click="save()" :class="['btn',{'btn-primary':status!=0},{'disabled':status==0}]" type="button"> 保存</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 业务相关表</div>
|
||
<ul class="nav nav-tabs nav-stacked tlist">
|
||
<li @click="sheet=item" :class="[{active: sheet==item }]" v-for="item in sheetArr" >
|
||
<a href="javascript:;" data-target="#tab3Content1" data-toggle="tab" v-text="serviceDetail['tables'][item]['name']"></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 实体字段信息 -->
|
||
<div class="col-md-5" style="padding-left: 0px;">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 字段信息</div>
|
||
<table class="table table-bordered">
|
||
<tr>
|
||
<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>
|
||
<tr v-for="(item, index) in serviceDetail['tables'][sheet].items">
|
||
<td v-show="status==3"><input type="checkbox" v-model="serviceInfo.exports" :value="sheet + '$' + item.name"></td>
|
||
<td v-show="status==4"><input type="checkbox" v-model="serviceInfo.imports" :value="sheet + '$' + item.name"></td>
|
||
<td v-show="status==5"><input type="checkbox" v-model="serviceInfo.shows" :value="sheet + '$' + item.name"></td>
|
||
<td v-show="status==6"><input type="checkbox" v-model="filterArr" :value="sheet + '$' + item.name"></td>
|
||
|
||
<td v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
|
||
<td v-text="item.label"></td>
|
||
<td v-text="item.type"></td>
|
||
<!--<td v-text="item.inType"></td>
|
||
<td v-text="item.inExt"></td>
|
||
<td v-text="item.remark"></td>-->
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="col-md-5" style="padding-left: 0px;padding-right: 0px;">
|
||
<!-- shows -->
|
||
<div id="show" v-show="status==5">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 展示字段配置</div>
|
||
<table class="table table-bordered table-auto" style="width: 100%;background-color: #fff;">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>字段名</th>
|
||
<th>中文名</th>
|
||
<!--<th>支持排序</th>-->
|
||
</tr>
|
||
</thead>
|
||
<tr v-for="(item, index) in serviceInfo.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>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- exports -->
|
||
<div id="export" v-show="status==3">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 查询配置</div>
|
||
<table class="table table-bordered table-auto" style="width: 100%">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>字段名</th>
|
||
<th>中文名</th>
|
||
<!--<th>展示名</th>-->
|
||
</tr>
|
||
</thead>
|
||
<tr v-for="(item, index) in serviceInfo.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>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- imports -->
|
||
<div class="panel" v-show="status==4">
|
||
<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 serviceInfo.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>
|
||
|
||
<!-- filters -->
|
||
<div id="filter" v-show="status==6">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 查询配置</div>
|
||
<table class="table table-bordered table-auto" style="width: 100%">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th style="width: 30px">字段名</th>
|
||
<th style="width: 30px">中文名</th>
|
||
<th style="width: 30px">默认展示</th>
|
||
<th>支持查询类型</th>
|
||
</tr>
|
||
</thead>
|
||
<tr v-for="(item, index) in filterArr">
|
||
<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>
|
||
<label>
|
||
<input type="checkbox" v-model="filterMap[item].checked" value="1"> 展示
|
||
</label>
|
||
</td>
|
||
<td>
|
||
<label class="checkbox-inline" v-for="c in filterCate">
|
||
<input type="checkbox" v-model="filterMap[item].filterType" :value="c"> {{c}}
|
||
</label>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 新建业务 -->
|
||
<div class="modal fade" id="createServiceDia">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
|
||
<h4 class="modal-title">新建业务</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form class="form-horizontal">
|
||
<div class="form-group">
|
||
<label class="col-sm-3">选择业务主表</label>
|
||
<div class="col-sm-6">
|
||
<select class="form-control" v-model="createRow.table">
|
||
<option v-for="x in tables" :value="x.alias" v-text="x.name + ' --- ' + x.comment"></option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3">业务名称</label>
|
||
<div class="col-sm-6">
|
||
<input v-model="createRow.comment" class="form-control" placeholder="请输入 业务名称">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3">业务标识码</label>
|
||
<div class="col-sm-6">
|
||
<input v-model="createRow.name" class="form-control" placeholder="请输入 业务标识码,如:user_service">
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||
<button @click="saveService()" type="button" class="btn btn-primary">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</row>
|
||
|
||
<script>
|
||
//import { login } from '../api/user.js'
|
||
//import { getServiceInfo, getServiceDetail, getServiceList } from '/api/meta.js'
|
||
let { getServiceInfo, getServiceDetail, getServiceList, tableLinkList, serviceSave } = meta;
|
||
let { showOk } = red
|
||
|
||
var vm = new Vue({
|
||
el: ".meta-service",
|
||
data: {
|
||
//new
|
||
sheetArr: ["a"],//别名
|
||
sheet: "a",//别名
|
||
|
||
inTypes: ["INPUT", "SELECT_EXT", "INPUT_DT"],
|
||
dataTypes: ["bigint(20)", "varchar(255)", "varchar(64)", "varchar(32)", "varchar(16)", "int(11)", "int(3)", "int(2)", "datetime"],
|
||
filterCate: ["EQUAL", "NOTEQUAL", "LIKE", "IN"],
|
||
serviceInfo: {
|
||
name:"",
|
||
table:"",
|
||
items: [],
|
||
shows: [],
|
||
exports: [],
|
||
imports: [],
|
||
filters: [{name:"", filterType:[""]}]
|
||
},
|
||
serviceDetail: {tables: {a:{items:[]}}},
|
||
|
||
|
||
move: false,
|
||
|
||
itemSort: [], //待保存的业务属性
|
||
|
||
oldItems: [], //不被修改的字段属性
|
||
itemEdit: {}, //待修改的字段属性
|
||
|
||
dbPlats:[],
|
||
row: {key: "", platId: "", catalog: ""},
|
||
filter: {db: "", catalog: "", name: ""},//tableList 过滤条件
|
||
|
||
filters:[],//查询配置
|
||
|
||
status: 0, //页面默认状态
|
||
services: [],//业务列表
|
||
service: "", //页面选择的业务类型
|
||
table: "",//表别名
|
||
filterArr:[],
|
||
filterMap:{},
|
||
|
||
createRow: {},
|
||
tables: [],
|
||
},
|
||
watch: {
|
||
status: function (v) {
|
||
this.setMove(v)
|
||
},
|
||
services: function (v) {
|
||
if(v.length > 0 && !vm.service) {
|
||
vm.service = v[0]["name"];
|
||
}
|
||
},
|
||
service: function (v) {
|
||
this.loadInfo(v);
|
||
this.loadDetail(v);
|
||
},
|
||
serviceInfo: function(v) {
|
||
let arr = [];
|
||
let map = {};
|
||
v["filters"].forEach(function (f) {
|
||
arr.push(f["name"]);
|
||
map[f["name"]] = f;
|
||
});
|
||
this.filterMap = map;
|
||
this.filterArr = arr;
|
||
},
|
||
serviceDetail: function (v) {
|
||
var arr = [];
|
||
for(k in v.tables) {
|
||
arr.push(k);
|
||
}
|
||
this.sheetArr = arr;//别名
|
||
this.sheet = arr[0];
|
||
},
|
||
sheet: function (v) {
|
||
this.table = v;
|
||
},
|
||
filterArr: function (v) {
|
||
let map = {};
|
||
for(j in v) {
|
||
let k = v[j];
|
||
map[k] = this.filterMap[k];
|
||
if (!map[k]) {
|
||
for (i in vm.serviceInfo.filters) {
|
||
if (vm.serviceInfo.filters[i]["name"] == k) {
|
||
map[k] = vm.serviceInfo.filters[i];
|
||
}
|
||
}
|
||
}
|
||
if (!map[k]) {
|
||
map[k] = {name: k, filterType:["EQUAL"], checked: false};//构造filter 对象
|
||
}
|
||
}
|
||
this.filterMap = map;
|
||
},
|
||
},
|
||
methods: {
|
||
loadInfo(name) {
|
||
getServiceInfo({name}, (json) => {
|
||
vm.serviceInfo = json;
|
||
})
|
||
},
|
||
loadDetail(name) {
|
||
getServiceDetail({name}, (json) => {
|
||
vm.serviceDetail = json;
|
||
})
|
||
},
|
||
serviceList() {
|
||
getServiceList(json => {
|
||
vm.services = json;
|
||
});
|
||
},
|
||
getFieldLabel: function (col) {
|
||
if (!col) {
|
||
return "";
|
||
}
|
||
|
||
var tableInfo = vm.serviceDetail['tables'][col.split("$")[0]];
|
||
if (tableInfo) {
|
||
for (var i = 0; i < tableInfo.items.length; i++) {
|
||
if (tableInfo.items[i].name == col.split("$")[1]) {
|
||
return tableInfo.items[i].label;
|
||
}
|
||
}
|
||
|
||
}
|
||
return '';
|
||
},
|
||
/*catalogs: function() {
|
||
var dbPlats = this.dbPlats;
|
||
for (i in dbPlats) {
|
||
if (dbPlats[i].key == this.row.dbPlatId) {
|
||
return dbPlats[i]["catalogs"]
|
||
}
|
||
}
|
||
},*/
|
||
setMove: function () {
|
||
if (this.status == 1) {
|
||
$('#sortableList,table>tbody').sortable({
|
||
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.serviceInfo.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.serviceInfo.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.serviceInfo.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.postX("/meta/itemsort", {
|
||
serviceKey: vm.table,
|
||
items: JSON.stringify(vm.itemSort)
|
||
}).then(() => showOk());
|
||
}
|
||
|
||
else if (vm.status == 2 && vm.itemEdit.length > 0) {
|
||
red.postX("/meta/itemupdate", {
|
||
serviceKey: vm.table,
|
||
items: JSON.stringify(vm.itemEdit)
|
||
}).then(() => showOk());
|
||
}
|
||
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.serviceInfo.exports, 4: vm.serviceInfo.imports, 5: vm.serviceInfo.shows};
|
||
|
||
var dataStr = JSON.stringify(red.replace$(items[vm.status]));
|
||
|
||
red.postX(urls[vm.status], {
|
||
serviceKey: this.service,
|
||
items: dataStr
|
||
}).then(() => showOk());
|
||
}
|
||
|
||
else if (vm.status == 5) {
|
||
let dataStr = JSON.stringify(red.replace$(vm.serviceInfo.shows));
|
||
console.log("dataStr", dataStr);
|
||
red.postX("/meta/showsort", {
|
||
serviceKey: vm.service,
|
||
items: dataStr
|
||
}).then(() => showOk());
|
||
}
|
||
|
||
else if (vm.status == 6) {
|
||
let filterData = [];
|
||
|
||
for (i in this.filterArr) {
|
||
filterData.push(this.filterMap[this.filterArr[i]]);
|
||
}
|
||
|
||
red.postX("/meta/filter_update", {
|
||
serviceKey: vm.service,
|
||
filters: JSON.stringify(red.replace$(filterData))
|
||
}).then(() => showOk());
|
||
|
||
}
|
||
|
||
else if (vm.status == 7) {
|
||
console.log(vm.row);
|
||
red.postX("/meta/dbplatupdate", vm.row).then(() => showOk())
|
||
}
|
||
|
||
else {
|
||
red.showMsg();
|
||
}
|
||
},
|
||
createService() {
|
||
this.createRow = {}
|
||
if (this.tables.length == 0) {
|
||
tableLinkList().then(res => {
|
||
this.tables = res
|
||
})
|
||
}
|
||
$('#createServiceDia').modal()
|
||
},
|
||
saveService() {
|
||
serviceSave({service: this.createRow}).then(res => {
|
||
red.showOk("创建成功， 请对业务进行配置")
|
||
$('#createServiceDia').modal('hide')
|
||
|
||
this.service = this.createRow.name
|
||
getServiceList(json => {
|
||
vm.services = json;
|
||
})
|
||
})
|
||
},
|
||
showInfo() {
|
||
$('#f-info').modal({moveable: true})
|
||
}
|
||
|
||
},
|
||
mounted: function (){
|
||
//dbPlats 列表初始化
|
||
/*red.dbPlats(function (json) {
|
||
vm.dbPlats = json;
|
||
});*/
|
||
|
||
this.serviceList();
|
||
}
|
||
});
|
||
|
||
</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("---------")
|
||
for (var k in m) {
|
||
console.log(k)
|
||
}
|
||
}
|
||
});
|
||
</script>--> |