修改:界面样式

This commit is contained in:
2024-01-15 04:17:03 +08:00
parent ec8cf958b7
commit 2f9cde6ce4
10 changed files with 154 additions and 80 deletions

View File

@@ -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>

View File

@@ -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>