update JTable修改

src/assets/less/common.less

@@ -1,4 +1,3 @@
-
 /*列表上方操作按钮区域*/
 /*.ant-card-body .table-operator {
   margin-bottom: 8px;
@@ -19,11 +18,13 @@
   z-index: 1;
   border-right: 1px #e8e8e8 solid;
 }
+
 .nio-drag-handler:hover,
-.nio-drag-handler:focus{
+.nio-drag-handler:focus {
-  cursor: col-resize!important;
+  cursor: col-resize !important;
-  border-right: 2px solid #0bd9d9!important;
+  border-right: 2px solid #0bd9d9 !important;
 }
+
 /* 列表可拖拽改变列宽 end */
 
 /*列表上方操作按钮区域*/
@@ -50,6 +51,7 @@
 .table-operator .ant-btn {
   margin: 0 8px 8px 0;
 }
+
 .table-operator .ant-btn-group .ant-btn {
   margin: 0;
 }
@@ -57,15 +59,18 @@
 .table-operator .ant-btn-group .ant-btn:last-child {
   margin: 0 8px 8px 0;
 }
+
 /*列表td的padding设置 可以控制列表大小*/
 .ant-table-tbody .ant-table-row td {
   padding-top: 15px;
   padding-bottom: 15px;
 }
+
 // 表格内操作列按钮的样式
-.ant-table-tbody .table-action a{
+.ant-table-tbody .table-action a {
   margin: 0 8px;
 }
+
 .ant-table-tbody .table-action a:nth-of-type(1) {
   margin-left: 0;
 }
@@ -86,21 +91,34 @@
   height: 90% !important;
   overflow-y: hidden
 }
+
 /*列表中有图片的加这个样式 参考用户管理*/
 .anty-img-wrap {
   height: 25px;
   position: relative;
 }
+
 .anty-img-wrap > img {
   max-height: 100%;
 }
+
 /*列表中范围查询样式*/
-.query-group-cust{width: calc(50% - 10px)}
+.query-group-cust {
-.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center}
+  width: calc(50% - 10px)
+}
+
+.query-group-split-cust:before {
+  content: "~";
+  width: 20px;
+  display: inline-block;
+  text-align: center
+}
 
 
 /*erp风格子表外框padding设置*/
-.ant-card-wider-padding.cust-erp-sub-tab>.ant-card-body{padding:5px 12px}
+.ant-card-wider-padding.cust-erp-sub-tab > .ant-card-body {
+  padding: 5px 12px
+}
 
 /* 内嵌子表背景颜色 */
 .j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row {
@@ -108,7 +126,9 @@
 }
 
 /**隐藏样式-modal确定按钮 */
-.jee-hidden{display: none}
+.jee-hidden {
+  display: none
+}
 
 // 抽屉按钮区域
 .drawer-bootom-button {
@@ -125,64 +145,79 @@
 }
 
 // 新增编辑表单样式
-.form-add{
+.form-add {
   margin-bottom: 40px;
+
   /deep/ .ant-form-item-label {
     width: 130px;
   }
+
   /deep/ .ant-form-item-control-wrapper {
     display: inline-block;
     width: 100%;
   }
 }
-.item-model{
+
+.item-model {
   width: calc(100% - 130px);
   display: inline-block;
   margin-top: 2px;
   height: 40px;
   margin-bottom: 24px;
+
   /deep/ .ant-form-item-control-wrapper {
     width: 100%;
   }
 }
+
 .item-model-textarea {
   width: calc(100% - 130px);
   display: inline-block;
   margin-top: 2px;
+
   /deep/ .ant-form-item-control-wrapper {
     width: 100% !important;
   }
 }
+
 .box-input {
   /deep/ .ant-select-selection--single {
     height: 38px;
   }
+
   /deep/ .ant-select-selection--multiple {
     height: 38px;
-    .ant-select-selection__rendered > ul > li{
+
+    .ant-select-selection__rendered > ul > li {
       margin-top: 6px;
     }
   }
+
   /deep/ .ant-select-selection__rendered {
     line-height: 38px;
     height: 38px;
   }
+
   /deep/ .ant-calendar-picker {
     line-height: 38px;
     height: 38px;
   }
+
   /deep/ .ant-calendar-picker-input {
     height: 38px;
   }
+
   /deep/ .ant-input-number-input-wrap {
     line-height: 38px;
     height: 38px;
   }
 }
+
 .box-title-text {
   line-height: 1.4;
   display: flex;
   /*align-items: center;*/
+
   .title-text {
     width: 114px;
     text-align: right;
@@ -195,71 +230,88 @@
     white-space: nowrap;
     height: 42px;
     line-height: 42px;
+
     .required {
       color: red;
       margin-right: 4px;
     }
   }
-  .item-model{
+
+  .item-model {
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
     height: 100%;
     margin-bottom: 24px;
+
     /deep/ .ant-form-item-control-wrapper {
       width: 100%;
     }
   }
+
   .item-model-textarea {
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
+
     /deep/ .ant-form-item-control-wrapper {
       width: 100% !important;
     }
   }
+
   .box-input {
     display: inline-block;
     height: 38px;
     width: 100%;
+
     /deep/ .ant-select-selection--single {
       height: 38px;
     }
+
     /deep/ .ant-select-selection--multiple {
       height: 38px;
-      .ant-select-selection__rendered > ul > li{
+
+      .ant-select-selection__rendered > ul > li {
         margin-top: 6px;
       }
     }
+
     /deep/ .ant-select-selection__rendered {
       line-height: 38px;
       height: 38px;
     }
+
     /deep/ .ant-calendar-picker {
       line-height: 38px;
       height: 38px;
     }
+
     /deep/ .ant-calendar-picker-input {
       height: 38px;
     }
+
     /deep/ .ant-input-number-input-wrap {
       line-height: 38px;
       height: 38px;
     }
   }
 }
+
 .box-input {
   display: inline-block;
   height: 38px;
   width: 100%;
 }
+
 .required {
   color: red;
   margin-right: 4px;
 }
+
 .title-text-text {
   margin-top: 9px;
 }
+
 .header-text {
   font-size: 16px;
   font-weight: bold;
@@ -268,6 +320,7 @@
   height: 30px;
   margin-bottom: 30px;
 }
+
 .button-text {
   height: 38px;
   width: calc(100% - 100px);
@@ -276,6 +329,7 @@
   border: 1px #D52C26 solid;
   color: #D52C26;
 }
+
 // 新增编辑表单样式--完
 
 // 左树右表布局
@@ -340,6 +394,7 @@
   //transform: translateX(-8px);
   margin-left: -8px;
 }
+
 /* switch的样式--end */
 
 /*分页的样式start*/
@@ -360,3 +415,32 @@
 }
 
 /*分页的样式end*/
+
+/*页面左右布局*/
+.page-left-right-layout {
+  height: 85vh;
+  width: 100%;
+
+  .ant-card-body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    display: flex;
+  }
+
+  .page-left-box {
+    width: 248px;
+    height: 100%;
+    border-right: 1px solid #E5E6EB;
+    padding: 24px;
+    box-sizing: border-box;
+  }
+
+  .page-right-box {
+    flex: 1;
+    width: 0;
+    height: 100%;
+    padding: 24px;
+    box-sizing: border-box;
+  }
+}

src/components/jero/JTable.vue

@@ -230,7 +230,7 @@ export default {
         // 如果不需要配置冻结列，就按表头本身传的参数决定固定列
         const fixed = this.needSettingColumnHideOrFreeze ? this.settingColumnsObj.freeze.includes(key) : col.fixed
         col.hide = this.settingColumnsObj.hide.includes(key)
-        col.fixed = key === actionKey ? 'right' : fixed
+        col.fixed = fixed
         // 如果是字符串就转换成数字（因为实现拖拽，单位只能是px）
         col.width = col.width && parseInt(col.width + '')
         // 如果没有最小宽度就获取统一设置的最小宽度

src/components/page/GlobalLayout.vue

@@ -74,9 +74,9 @@
       </a-layout-content>
 
       <!-- layout footer -->
-      <a-layout-footer style="padding: 0">
+      <!--      <a-layout-footer style="padding: 0">-->
-        <global-footer/>
+      <!--        <global-footer/>-->
-      </a-layout-footer>
+      <!--      </a-layout-footer>-->
     </a-layout>
 
     <!-- update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
@@ -189,16 +189,16 @@ export default {
 </script>
 
 <style lang="less">
-  body {
+body {
   // 打开滚动条:有即显示，无则不显示
   overflow-y: auto;
 
   &.colorWeak {
     filter: invert(80%);
   }
-  }
+}
 
-  .layout {
+.layout {
   min-height: 100vh !important;
   overflow-x: hidden;
 
@@ -215,14 +215,17 @@ export default {
      * ant-table-wrapper
      * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
      */
+
     .ant-table-wrapper {
       .ant-table-content {
         overflow-y: auto;
       }
+
       .ant-table-body {
         min-width: 800px;
       }
     }
+
     .sidemenu {
       .ant-header-fixedHeader {
 
@@ -234,12 +237,14 @@ export default {
 
     .topmenu {
       /* 必须为 topmenu  才能启用流式布局 */
+
       &.content-width-Fluid {
         .header-index-wide {
           margin-left: 0;
         }
       }
     }
+
     .header, .top-nav-header-index {
       .user-wrapper .action {
         padding: 0 12px;
@@ -280,7 +285,9 @@ export default {
         width: 100%;
       }
     }
+
     /* 必须为 topmenu  才能启用流式布局 */
+
     &.content-width-Fluid {
       .header-index-wide {
         max-width: unset;
@@ -414,6 +421,7 @@ export default {
             }
           }
         }
+
         //
       }
     }
@@ -488,6 +496,7 @@ export default {
         float: right;
         height: 59px;
         overflow: hidden;
+
         .action:hover {
           background-color: rgba(0, 0, 0, 0.05);
         }
@@ -520,6 +529,7 @@ export default {
           }
         }
       }
+
       .header-index-wide .header-index-left .trigger:hover {
         background: rgba(255, 255, 255, 0.3);
       }
@@ -534,17 +544,17 @@ export default {
     padding: 0 12px 0 0;
   }
 
-  }
+}
 
-  .topmenu {
+.topmenu {
   .page-header-index-wide {
     margin: 0 auto;
     width: 100%;
   }
-  }
+}
 
-  // drawer-sider 自定义
+// drawer-sider 自定义
-  .ant-drawer.drawer-sider {
+.ant-drawer.drawer-sider {
   .sider {
     box-shadow: none;
   }
@@ -554,8 +564,10 @@ export default {
       background-color: rgb(0, 21, 41);
     }
   }
+
   &.light {
     box-shadow: none;
+
     .ant-drawer-content {
       background-color: #fff;
     }
@@ -564,10 +576,10 @@ export default {
   .ant-drawer-body {
     padding: 0
   }
-  }
+}
 
-  // 菜单样式
+// 菜单样式
-  .sider {
+.sider {
   box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
   position: relative;
   z-index: 10;
@@ -623,10 +635,10 @@ export default {
     }
   }
 
-  }
+}
 
-  // 外置的样式控制
+// 外置的样式控制
-  .user-dropdown-menu-wrapper.ant-dropdown-menu {
+.user-dropdown-menu-wrapper.ant-dropdown-menu {
   padding: 4px 0;
 
   .ant-dropdown-menu-item {
@@ -641,14 +653,14 @@ export default {
     margin-right: 8px;
   }
 
-  }
+}
 
-  // 数据列表 样式
+// 数据列表 样式
-  .table-alert {
+.table-alert {
   margin-bottom: 16px;
-  }
+}
 
-  .table-page-search-wrapper {
+.table-page-search-wrapper {
 
   .ant-form-inline {
 
@@ -678,6 +690,7 @@ export default {
           margin: 0;
         }
       }
+
       .ant-form-item-control {
         height: 32px;
         line-height: 32px;
@@ -691,9 +704,9 @@ export default {
     white-space: nowrap;
   }
 
-  }
+}
 
-  .content {
+.content {
 
   .table-operator {
     margin-bottom: 18px;
@@ -702,5 +715,5 @@ export default {
       margin-right: 8px;
     }
   }
-  }
+}
 </style>