lxy/meta-kit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、表单配置

Browse Source 
2、新增业务预览-表单渲染
This commit is contained in:
lxyer
2019-06-02 20:11:54 +08:00
parent 07d84ce539
commit 1f5ea920b4
5 changed files with 164 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
root/api/meta.js
View File

@@ -74,6 +74,10 @@ const meta = {
details = red.replace$(details);
return red.postX('/meta/detailsave', {name, details: JSON.stringify(details)})
},
editSave({name, edits}) {
edits = red.replace$(edits);
return red.postX('/meta/editsave', {name, edits: JSON.stringify(edits)})
},
// Meta-Table
tableList() {

46
root/metadata/dataList.html
View File

@@ -87,7 +87,10 @@
<td v-for="field in cfg.shows" v-title="dealFieldFmt(row, field.col)" v-text="dealFieldFmt(row, field.col)"></td>
-->
<td v-for="fieldFmt in cfg.shows" v-title="dealFieldFmt(row, fieldFmt)" v-html="dealFieldFmt(row, fieldFmt)"></td>
<td> <a href="javascript:;" @click="detailData=row; detail()">详情</a></td>
<td>
<a href="javascript:;" @click="detailData=row; detail()">详情</a>
<a href="javascript:;" @click="detailData=row; edit()">编辑</a>
</td>
</tr>
</tbody>
</table>
@@ -164,6 +167,44 @@
</div>
</div>
<!-- edit -->
<div class="modal fade" id="edit">
<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" v-text="cfg.title + ' - [编辑]'"> </h4>
</div>
<div class="modal-body" style="padding-right: 50px">
<form class="form-horizontal">
<div class="col-sm-6" v-for="item in cfg.edits">
<div class="form-group">
<label class="col-sm-5" v-text="item.label"></label>
<div class="col-sm-7">
<input v-if="item.inType == 'INPUT' || item.inType == '' || !item.inType" v-model="detailData[item.col]" class="form-control" :placeholder="`请输入 ${item.label}`">
<input v-if="item.inType == 'INPUT_DT'" v-model="detailData[item.col]" class="form-control" :placeholder="`请输入 ${item.label}`">
<select v-if="item.inType == 'SELECT_EXT'" v-model="detailData[item.col]" class="form-control">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="山东省">山东省</option>
<!--
<option v-for="x in inTypes" :value="x">{{x}}</option>
-->
</select>
</div>
</div>
</div>
<div class="col-sm-12" style="height: 5px"></div>
</form>
</div>
<div class="clearfix"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button @click="" type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
</row>
<script>
@@ -376,6 +417,9 @@
detail() {
$('#detail').modal({moveable: true});
},
edit() {
$('#edit').modal({moveable: true});
},
showInfo() {
$('#f-info').modal({moveable: true})
}

111
root/metadata/metaService.html
View File

@@ -66,6 +66,9 @@
<span class="input-group-btn">
<button @click="status='detail'" :class="['btn',{'btn-primary':status=='detail'}]" type="button"> 详情配置</button>
</span>
<span class="input-group-btn">
<button @click="status='edit'" :class="['btn',{'btn-primary':status=='form'}]" 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>
@@ -112,6 +115,7 @@
<td v-show="status==5"><input type="checkbox" v-model="showFields" :value="sheet + '$' + item.name"></td>
<td v-show="status==6"><input type="checkbox" v-model="filterArr" :value="sheet + '$' + item.name"></td>
<td v-show="status=='detail'"><input type="checkbox" v-model="detailArr" :value="sheet + '$' + item.name"></td>
<td v-show="status=='edit'"><input type="checkbox" v-model="editArr" :value="sheet + '$' + item.name"></td>
<td v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
<td v-text="item.label"></td>
@@ -249,10 +253,42 @@
<input type="hidden" name="item" :value="JSON.stringify(item)">
</td>
<td v-text="item.col" style="background-color: rgb(235, 235, 228);"></td>
<td style="padding: 1px;"><input v-model="item.label" class="form-control"
style="width: 130px;padding: 0px"></td>
<td style="padding: 1px;"><input v-model="item.fmt" class="form-control"
style="width: 130px;padding: 0px"></td>
<td style="padding: 1px;"><input v-model="item.label" class="form-control" style="width: 130px;padding: 0px"></td>
<td style="padding: 1px;"><input v-model="item.fmt" class="form-control" style="width: 130px;padding: 0px"></td>
</tr>
</tbody>
</table>
</div>
<!-- edits -->
<div id="edit" v-show="status=='edit'">
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 表单配置</div>
<table class="table table-bordered table-auto">
<thead>
<tr>
<th></th>
<th>数据字段</th>
<th>展示名称</th>
<th>表单组件</th>
<th>数据格式化</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in serviceInfo.edits">
<td class="icon icon-move">
<input type="hidden" name="item" :value="JSON.stringify(item)">
</td>
<td v-text="item.col" style="background-color: rgb(235, 235, 228);"></td>
<td style="padding: 1px;"><input v-model="item.label" class="form-control" style="width: 130px;padding: 0px"></td>
<td style="padding: 1px;">
<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 style="padding: 1px;">
<input v-model="item.fmt" class="form-control" style="width: 130px;padding: 0px">
</td>
</tr>
</tbody>
</table>
@@ -304,7 +340,7 @@
</row>
<script>
let {getServiceInfo, getServiceDetail, getServiceList, tableLinkList, serviceSave, showSave, filterSave, exportSave, detailSave} = meta;
let {getServiceInfo, getServiceDetail, getServiceList, tableLinkList, serviceSave, showSave, filterSave, exportSave, detailSave, editSave} = meta;
let {showOk} = red
var vm = new Vue({
@@ -326,6 +362,7 @@
imports: [],
filters: [{name: '', label: '', filterType: ['']}],
details: [],
edits: [],
},
serviceDetail: {tables: {a: {items: []}}},
@@ -343,7 +380,7 @@
filters: [],//查询配置
status: 0, //页面默认状态 0:默认 3:导出 4:导入 5:列表配置 6:查询配置 detail:详情配置 form:表单配置 del:删除策略配置
status: 0, //页面默认状态 0:默认 3:导出 4:导入 5:列表配置 6:查询配置 detail:详情配置 edit:表单配置 del:删除策略配置
services: [],//业务列表
service: "", //页面选择的业务类型
table: "",//表别名
@@ -363,6 +400,9 @@
//details
detailArr: [],
//edits
editArr: [],
},
watch: {
status: function (v) {
@@ -405,6 +445,13 @@
detailArr.push(v['details'][i]['col'])
}
this.detailArr = detailArr
//edits
let editArr = []
for (let i in v['edits']) {
editArr.push(v['edits'][i]['col'])
}
this.editArr = editArr
},
serviceDetail: function (v) {
let arr = [];
@@ -542,7 +589,7 @@
// 新的
let label = this.getFieldLabel(v[i])
let fmt = this.getFiledInExt(v[i])
c:for (let j in details) {
/*c:for (let j in details) {
if (v[i] == details[j]['col']) {
if (details[j]['label']) {
label = details[j]['label']
@@ -553,7 +600,7 @@
}
continue c
}
}
}*/
details.push({col: v[i], label: label, fmt: fmt})
}
@@ -569,7 +616,42 @@
}
this.serviceInfo.details = _details
}
},
editArr(v) {
let edits = this.serviceInfo.edits
//添加新增的
a:for (let i in v) {
b:for (let j in edits) {
if (v[i] == edits[j]['col']) {
if (!edits[j]['label']) {
edits[j]['label'] = this.getFieldLabel(v[i])
}
if (!edits[j]['fmt']) {
edits[j]['fmt'] = this.getFiledInExt(v[i])
}
continue a
}
}
// 新的
let label = this.getFieldLabel(v[i])
let fmt = this.getFiledInExt(v[i]) || ""
edits.push({col: v[i], label: label, fmt: fmt})
}
//去除删除的
let _edits = []
a:for (let i in edits) {
b:for (let j in v) {
if (edits[i]['col'] == v[j]) {
_edits.push(edits[i])
continue a;
}
}
}
this.serviceInfo.edits = _edits
},
},
methods: {
loadInfo(name) {
@@ -624,6 +706,7 @@
#show>table>tbody,
#export>table>tbody,
#detail>table>tbody,
#edit>table>tbody,
#show>table>tbody`).sortable({
selector: 'tr',
trigger: '.icon',
@@ -737,8 +820,16 @@
let item = $(doms[i]).find("input[name='item']").val();
details.push(JSON.parse(item))
}
console.log(details)
detailSave({name: this.service, details}).then(res => red.showOk())
} else if (vm.status == 'edit') {
let doms = $("#edit>table>tbody>tr")
let edits = []
for (let i = 0; i < doms.length; i++) {
let item = $(doms[i]).find("input[name='item']").val();
edits.push(JSON.parse(item))
}
console.log(edits)
editSave({name: this.service, edits}).then(res => red.showOk())
} else if (vm.status == 7) {
console.log(vm.row);
red.postX("/meta/dbplatupdate", vm.row).then(() => showOk())