几个左边树右边列表布局的界面美化
This commit is contained in:
parent
65662498d1
commit
3b055c6ff1
|
|
@ -498,12 +498,12 @@ export default {
|
|||
</script>
|
||||
<style scoped lang="less">
|
||||
.page-body {
|
||||
padding: 30px;
|
||||
padding: 15px;
|
||||
background: @base-bg-color;
|
||||
}
|
||||
|
||||
.gridPanel {
|
||||
height: calc(100vh - 400px);
|
||||
height: calc(100vh - 300px);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -71,3 +71,56 @@
|
|||
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis) {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
|
||||
.split_wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.split_wrapper .left {
|
||||
width: 200px;
|
||||
border:1px solid #dcdcdc;
|
||||
}
|
||||
.split_wrapper .right {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: calc(100% - 300px);
|
||||
border:1px solid #dcdcdc;
|
||||
border-left: none;
|
||||
|
||||
}
|
||||
|
||||
.treepanel {
|
||||
width: calc(100%);
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
.treepanel-content {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.treepanel-header {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 0;
|
||||
|
||||
background-color: #FAFAFA;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
.treepanel-header .link{
|
||||
|
||||
color: #333;
|
||||
}
|
||||
.treepanel-header svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.treepanel-header .anticon {
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
<template>
|
||||
<div class="page-body">
|
||||
|
||||
|
||||
<a-row type="flex">
|
||||
<a-col flex="200px">
|
||||
|
||||
<div class="page-body">
|
||||
<div class="split_wrapper">
|
||||
<div class="left">
|
||||
<div class="treepanel" :style="'height:' + tableHeight + 'px'">
|
||||
<div class="treepanel-header">
|
||||
<a @click.stop="treeAdd(row)" title="新增">
|
||||
|
|
@ -24,8 +21,8 @@
|
|||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
</div>
|
||||
<div class="right" style="padding:10px">
|
||||
<div class="toolbarbtns">
|
||||
<a-button type="primary" @click="pageAdd">新增</a-button>
|
||||
<a-button type="primary" @click="ok">保存</a-button>
|
||||
|
|
@ -53,8 +50,8 @@
|
|||
</vxe-table>
|
||||
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -118,7 +115,7 @@ export default {
|
|||
|
||||
this.$nextTick(() => {
|
||||
|
||||
this.tableHeight = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 200;
|
||||
this.tableHeight = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 40;
|
||||
this.treeInit();
|
||||
});
|
||||
|
||||
|
|
@ -450,34 +447,6 @@ export default {
|
|||
padding: 8px;
|
||||
}
|
||||
|
||||
.treepanel {
|
||||
width: calc(100% - 10px);
|
||||
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.treepanel-content {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.treepanel-header {
|
||||
width: 100%;
|
||||
background: #F8F8F9;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.treepanel-header .anticon {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbarbtns .ant-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
<div class="page-body">
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="split_wrapper">
|
||||
<div class="left">
|
||||
<div class="treepanel" :style="'height:' + tableHeight + 'px'">
|
||||
<div class="treepanel-header">
|
||||
<a @click.stop="treeAdd(row)" title="新增">
|
||||
<a style="margin-left: 10px;" class="link" @click.stop="treeAdd(row)" title="新增">
|
||||
<a-icon type="plus-circle" />
|
||||
</a>
|
||||
<a @click.stop="treeEdit(row)" title="编辑">
|
||||
<a class="link" @click.stop="treeEdit(row)" title="编辑">
|
||||
<a-icon type="edit" />
|
||||
</a>
|
||||
<a @click.stop="treeDelete(row)" title="删除">
|
||||
<a class="link" @click.stop="treeDelete(row)" title="删除">
|
||||
<a-icon type="delete" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -511,48 +511,6 @@ export default {
|
|||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 左侧固定宽度 200px，右侧自适应 */
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.left {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
}
|
||||
.right {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
|
||||
.treepanel {
|
||||
width: calc(100% - 10px);
|
||||
|
||||
background: white;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.treepanel-content {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.treepanel-header {
|
||||
width: 100%;
|
||||
background: #F8F8F9;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.treepanel-header .anticon {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbarbtns .ant-btn {
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="page-body">
|
||||
<div class="split_wrapper">
|
||||
<div class="left">
|
||||
<div class="treepanel" :style="'height:' + tableHeight + 'px'">
|
||||
<div class="treepanel">
|
||||
<div class="treepanel-header">
|
||||
<a @click.stop="treeAdd(row)" title="新增">
|
||||
<a-icon type="plus-circle" />
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
|
@ -88,7 +90,7 @@ export default {
|
|||
|
||||
this.$nextTick(() => {
|
||||
|
||||
this.tableHeight = this.$mk.getWindowSize().height - 320;
|
||||
this.tableHeight = this.$mk.getWindowSize().height - 260;
|
||||
this.treeInit();
|
||||
|
||||
});
|
||||
|
|
@ -211,11 +213,11 @@ export default {
|
|||
],
|
||||
//搜索区
|
||||
searchFormItems: [ // 子项
|
||||
{ field: 'name', title: '工序名称', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入工序名称' } } },
|
||||
{ field: 'code', title: '编码', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入编码' } } },
|
||||
{ span: 8, slots: { default: 'date' } }, // 自定义列
|
||||
{ field: 'name', title: '工序名称', span: 4, itemRender: { name: '$input', props: { placeholder: '请输入工序名称' } } },
|
||||
{ field: 'code', title: '编码', span: 4, itemRender: { name: '$input', props: { placeholder: '请输入编码' } } },
|
||||
{ span: 6, slots: { default: 'date' } }, // 自定义列
|
||||
{
|
||||
align: 'right', span: 4, itemRender: { // 按钮列
|
||||
align: 'left', span: 4, itemRender: { // 按钮列
|
||||
name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, // 搜索按钮
|
||||
{ props: { type: 'reset', content: '重置' } }]
|
||||
}
|
||||
|
|
@ -567,49 +569,6 @@ export default {
|
|||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 左侧固定宽度 200px，右侧自适应 */
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.left {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
}
|
||||
.right {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
|
||||
.treepanel {
|
||||
width: calc(100% - 10px);
|
||||
|
||||
background: white;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.treepanel-content {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.treepanel-header {
|
||||
width: 100%;
|
||||
background: #F8F8F9;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.treepanel-header .anticon {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbarbtns .ant-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="page-body">
|
||||
<div class="split_wrapper">
|
||||
<div class="left">
|
||||
<div class="treepanel" :style="'height:' + tableHeight + 'px'">
|
||||
<div class="treepanel-header">
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
@ -520,48 +520,6 @@ export default {
|
|||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 左侧固定宽度 200px，右侧自适应 */
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.left {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
}
|
||||
.right {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
|
||||
.treepanel {
|
||||
width: calc(100% - 10px);
|
||||
|
||||
background: white;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.treepanel-content {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.treepanel-header {
|
||||
width: 100%;
|
||||
background: #F8F8F9;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.treepanel-header .anticon {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbarbtns .ant-btn {
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue