修改:界面样式
This commit is contained in:
@@ -132,8 +132,8 @@
|
||||
</caption>
|
||||
<thead>
|
||||
<tr style="background-color: #f1f1f1" v-show="sheet && sheet!='表说明' && sheet!='表名称'">
|
||||
<th>字段名</th>
|
||||
<th>中文名</th>
|
||||
<th>列名</th>
|
||||
<th>注释</th>
|
||||
<th>数据类型</th>
|
||||
<th>输入类型</th>
|
||||
<th>附加属性</th>
|
||||
@@ -219,8 +219,8 @@
|
||||
</caption>
|
||||
<thead>
|
||||
<tr style="background-color: #f1f1f1">
|
||||
<th>字段名</th>
|
||||
<th>中文名</th>
|
||||
<th>列名</th>
|
||||
<th>注释</th>
|
||||
<th>数据类型</th>
|
||||
<!--<th>输入类型</th>
|
||||
<th>附加属性</th>
|
||||
|
||||
@@ -51,25 +51,45 @@
|
||||
</div>
|
||||
|
||||
<!-- 实体列表 -->
|
||||
<div class="col-md-3 col-xs-4">
|
||||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 实体表(Meta-Table)</div>
|
||||
<div class="col-md-4 col-xs-4">
|
||||
<div style="padding-left: 10px;background-color: #ccc;width: 100%">
|
||||
实体表(Meta-Table) <input v-model="filter" placeholder="筛选实体" style="margin-top: 5px;">
|
||||
</div>
|
||||
<ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
|
||||
<li :class="['clearfix',{'active':alias==item.alias}]" v-for="item in tables" >
|
||||
<a @click="alias=item.alias" :title="dealTableLabel(item)" v-text="dealTableLabel(item)" href="javascript:;"></a>
|
||||
<li :class="['clearfix',{'active':alias==item.alias}]" v-for="item in tables" v-if="dealFilter(item)">
|
||||
<a @click="alias=item.alias" :title="dealTableLabel(item)" data-toggle="tooltip" v-text="dealTableLabel(item)" href="javascript:;"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9 col-xs-8">
|
||||
<div class="col-md-8 col-xs-8">
|
||||
<!-- 实体属性列表 -->
|
||||
<div class="panel" v-show="status!=7 && status!=8">
|
||||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 实体字段信息</div>
|
||||
|
||||
<!-- baseInfo -->
|
||||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 基本属性</div>
|
||||
<!--<div class="panel-heading">基本属性配置</div>-->
|
||||
<table :class="['table','table-bordered']" style="width: 100%">
|
||||
<tr>
|
||||
<th style="width: 100px">表名</th>
|
||||
<td><span class="label label-outline" title="表别名alias">{{row.alias}}</span> {{row.name}}</td>
|
||||
<th>数据平台</th>
|
||||
<td>{{dealDbPlatName(row)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>描述</th>
|
||||
<td>{{row.comment}}</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 字段信息</div>
|
||||
<table :class="[{'table':status!=2},'table-bordered']" style="width: 100%">
|
||||
<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>
|
||||
@@ -134,17 +154,19 @@
|
||||
<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-4 col-sm-8">
|
||||
<input v-model="row.name" class="form-control" id="name" placeholder="请输入Table名称">
|
||||
</div>
|
||||
<label for="name" class="col-md-2">表别名</label>
|
||||
<div class="col-md-3 col-sm-2">
|
||||
<div class="col-sm-4">
|
||||
<input v-model="row.alias" class="form-control" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="comment" class="col-md-2">Table标题</label>
|
||||
<label for="name" class="col-md-2">表名</label>
|
||||
<div class="col-md-4 col-sm-8">
|
||||
<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">描述</label>
|
||||
<div class="col-md-4 col-sm-8">
|
||||
<input v-model="row.comment" class="form-control" id="comment" placeholder="请输入 Table标题">
|
||||
</div>
|
||||
@@ -152,13 +174,13 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-2">数据平台</label>
|
||||
<div class="col-md-4 col-sm-8">
|
||||
<div class="col-sm-2">
|
||||
<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">
|
||||
<div class="col-sm-2">
|
||||
<select v-model="row.catalog" class="form-control">
|
||||
<option></option>
|
||||
<option v-for="item in catalogs()" :value="item" v-text="item"></option>
|
||||
@@ -175,7 +197,7 @@
|
||||
<p style="padding: 5px">整理中,【实体关系】放到此处维护</p>
|
||||
</div>
|
||||
|
||||
<textarea class="form-control layui-code" v-model="upsql" rows="10" id="content" placeholder="/* 没有提交要执行的查询 */" />
|
||||
<textarea class="form-control layui-code" v-if="upsql" v-model="upsql" rows="10" id="content" placeholder="/* 没有提交要执行的查询 */" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-10">
|
||||
@@ -215,6 +237,8 @@
|
||||
filter: {db: "", catalog: "", name: ""},//tableList 过滤条件
|
||||
|
||||
upsql: "", // 需要执行的 sql语句
|
||||
|
||||
filter: "",
|
||||
},
|
||||
watch: {
|
||||
metaTable(v) {
|
||||
@@ -266,10 +290,10 @@
|
||||
handler: function (row) {
|
||||
//console.log(vm.metaTable.name, " -> ",v.name)
|
||||
vm.upsql = ''
|
||||
if (vm.metaTable.name != row.name) {
|
||||
if (vm.metaTable.name !== row.name) {
|
||||
vm.upsql += 'RENAME TABLE `{0}`.`{1}` TO `{2}`.`{3}`;\n'.format(vm.metaTable.catalog, vm.metaTable.name, vm.metaTable.catalog, row.name)
|
||||
}
|
||||
if (vm.metaTable.comment != row.comment) {
|
||||
if (vm.metaTable.comment !== row.comment) {
|
||||
vm.upsql += 'ALTER TABLE `{0}`.`{1}` COMMENT=\'{2}\';\n'.format(vm.metaTable.catalog, vm.metaTable.name, row.comment)
|
||||
}
|
||||
},
|
||||
@@ -452,6 +476,14 @@
|
||||
// (${table.linkCount})
|
||||
return `${table.name} [${table.comment}]`
|
||||
},
|
||||
dealFilter(table) {
|
||||
// table.name 中是否包含 thiss.filter 的值
|
||||
if (table.name.indexOf(this.filter) > -1 || table.comment.indexOf(this.filter) > -1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
getFieldLabel (col) {
|
||||
if (!col) {
|
||||
return "";
|
||||
@@ -470,6 +502,16 @@
|
||||
},
|
||||
buildSql() {
|
||||
|
||||
},
|
||||
dealDbPlatName(row) {
|
||||
let name = ""
|
||||
this.dbPlats.forEach(function (item) {
|
||||
if (item.key == row.dbPlatId) {
|
||||
name = item.name
|
||||
}
|
||||
})
|
||||
name += "." + row.catalog
|
||||
return name
|
||||
}
|
||||
},
|
||||
mounted: function (){
|
||||
@@ -478,11 +520,13 @@
|
||||
})
|
||||
this.tableList();
|
||||
|
||||
/*setTimeout(function () {
|
||||
layui.use('code', function(){ //加载code模块
|
||||
setTimeout(function () {
|
||||
/*layui.use('code', function(){ //加载code模块
|
||||
layui.code({title:"",about: false, height: "500"}); //引用code方法
|
||||
});
|
||||
}, 300)*/
|
||||
});*/
|
||||
// 手动初始化工具提示
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
}, 300)
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user