几个左边树右边列表布局的界面美化

src/application/mk/basic-pages/list.vue

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

src/application/mk/style/main.css

@@ -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;
+}

src/pages/Middle/Mes/MesEnum/MesEnum/index.vue

@@ -1,10 +1,7 @@
 <template>
 <div class="page-body">
-
+  <div class="split_wrapper">
-
+      <div class="left">
-    <a-row type="flex">
-      <a-col flex="200px">
-
         <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>
+      </div>
-      <a-col flex="auto">
+      <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>
+      </div>
-    </a-row>
+    </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;
 }

src/pages/Middle/Mes/MesMaterials/MesMaterials/index.vue

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

src/pages/Middle/Mes/MesProcesses/MesProcesses/List.vue

@@ -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: 'name', title: '工序名称', span: 4, itemRender: { name: '$input', props: { placeholder: '请输入工序名称' } } },
-          { field: 'code', title: '编码', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入编码' } } },
+          { field: 'code', title: '编码', span: 4, itemRender: { name: '$input', props: { placeholder: '请输入编码' } } },
-          { span: 8, slots: { default: 'date' } },  // 自定义列
+          { 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;
 }

src/pages/Middle/Mes/MesProductCustomAttribute/MesProductCustomAttribute/List.vue

@@ -1,7 +1,7 @@
 <template>
 
-
+<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">
@@ -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;