system/config

assets/css/base.less

@@ -698,7 +698,18 @@ i.icon-gengxin {
 .tc {
     text-align: center;
 }
-
+.lt30
+{
+    line-height: 30px;
+}
+.lt40
+{
+    line-height: 40px;
+}
+.lt50
+{
+    line-height: 50px;
+}
 
 /*清除浮动*/
 

pages/system/config/index.vue

 <template>
-  <div class="config flex">
+<div class="config flex">
     <div class="menu">
-      <Menu theme="light" active-name="site">
-        <MenuItem name="site" to="#site">站点设置</MenuItem>
-        <MenuItem name="bus" to="#bus">业务设置</MenuItem>
+        <Menu theme="light" active-name="site" @on-select="pageTo">
+            <MenuItem name="site">站点设置</MenuItem>
+            <MenuItem name="bus">业务设置</MenuItem>
         </Menu>
     </div>
-    <div class="main fg">
-      <div class="tool tr">
+    <div class="main fg" id="mainDiv">
+        <div class="tr lt40 fr divTop">
             <Button type="primary" size="small" @click="save">保存</Button>
             <Button type="text">恢复默认</Button>
         </div>
         <Form ref="form" :model="config" :rules="rules" :label-width="120">
-        <div id="site">
+            <div id="site" class="mt50">
                 <h3>站点设置</h3>
                 <FormItem label="默认语言" prop="site.language">
                     <Input v-model="config.site.language"></Input>
@@ -30,7 +30,7 @@
                     </RadioGroup>
                 </FormItem>
                 <FormItem label="密码安全校验">
-            <i-switch v-model="config.site.loginEditPassword"/>
+                    <i-switch v-model="config.site.loginEditPassword" />
                     <span class="tip">开启后，用户密码安全级别低时，登陆后强制修改密码</span>
                 </FormItem>
                 <FormItem label="验证码">
@@ -38,7 +38,7 @@
                     <span class="tip">开启后用户登陆需要输入验证码</span>
                 </FormItem>
                 <FormItem label="注册邀请码">
-            <Input v-model="config.site.regCode" ></Input>
+                    <Input v-model="config.site.regCode"></Input>
                     <span class="tip">1.为空时：不对外开放注册;2.设置为“666”时用户免输入注册邀请码就可以进行注册；3.其它情况，注册时需要输入注册邀请码</span>
                 </FormItem>
                 <FormItem label="登陆有效期">
@@ -54,7 +54,7 @@
                     <span class="tip">开启后可以查看系统异常</span>
                 </FormItem>
                 <FormItem label="异常消息">
-            <Input v-model="config.site.exceptionMessage" ></Input>
+                    <Input v-model="config.site.exceptionMessage"></Input>
                     <span class="tip">设置后，接口发生异常，统一返回次内容。为空时返回系统异常</span>
                 </FormItem>
                 <FormItem label="列表显示方式">
@@ -83,19 +83,19 @@
             <div id="bus">
                 <h3>业务设置</h3>
                 <FormItem label="订单开工预警">
-               <InputNumber v-model="config.bus.orderStartWarning" :min="0" :max="2400"/>
+                    <InputNumber v-model="config.bus.orderStartWarning" :min="0" :max="2400" />
                     <span class="tip">单位为小时，为0时不预警；大于0进行预警</span>
                 </FormItem>
                 <FormItem label="订单完工预警">
-               <InputNumber v-model="config.bus.orderFinishWarning" :min="0" :max="2400"/>
+                    <InputNumber v-model="config.bus.orderFinishWarning" :min="0" :max="2400" />
                     <span class="tip">单位为小时，为0时不预警；大于0进行预警</span>
                 </FormItem>
                 <FormItem label="工单开工预警">
-               <InputNumber v-model="config.bus.excuteStartWarning" :min="0" :max="2400"/>
+                    <InputNumber v-model="config.bus.excuteStartWarning" :min="0" :max="2400" />
                     <span class="tip">单位为小时，为0时不预警；大于0进行预警</span>
                 </FormItem>
                 <FormItem label="工单完工预警">
-               <InputNumber v-model="config.bus.excuteEndWarning" :min="0" :max="2400"/>
+                    <InputNumber v-model="config.bus.excuteEndWarning" :min="0" :max="2400" />
                     <span class="tip">单位为小时，为0时不预警；大于0进行预警</span>
                 </FormItem>
                 <FormItem label="库存预警">
@@ -110,11 +110,11 @@
                     <span class="tip">开启后，工单执行必须按照工序次序先后次序执行；关闭后，工单可以不按工序次序执行。</span>
                 </FormItem>
                 <FormItem label="工艺设置预警">
-               <InputNumber v-model="config.bus.setHeaderWarning" :min="0" :max="2400"/>
+                    <InputNumber v-model="config.bus.setHeaderWarning" :min="0" :max="2400" />
                     <span class="tip">单位为小时，为0时不预警；大于0进行预警</span>
                 </FormItem>
                 <FormItem label="配套完成预警">
-               <InputNumber v-model="config.bus.setHeaderWarning" :min="0" :max="2400"/>
+                    <InputNumber v-model="config.bus.setHeaderWarning" :min="0" :max="2400" />
                     <span class="tip">单位为小时，为0时不预警；大于0进行预警</span>
                 </FormItem>
                 <FormItem label="转序交接">
@@ -132,7 +132,7 @@
             </div>
         </Form>
     </div>
-  </div>
+</div>
 </template>
 
 <script>
@@ -145,9 +145,21 @@ export default {
             rules: {},
         };
     },
+    mounted() {},
     methods: {
-    save() {},
+        save() {
+            alert(JSON.stringify(this.config))
+        },
         reset() {},
+        pageTo(val) {
+            var mainDiv = document.getElementById('mainDiv');
+            var site = document.getElementById('site');
+            if (val == 'site') {
+                mainDiv.scrollTop = 0;
+            } else {
+                mainDiv.scrollTop = site.scrollHeight;
+            }
+        }
     },
 };
 </script>
@@ -155,28 +167,44 @@ export default {
 <style lang="less">
 .config {
     height: 100%;
+
     .menu {
         width: 240px;
         border-right: 1px solid #ddd;
         position: relative;
-    .ivu-menu{
+
+        .ivu-menu {
             z-index: 10;
             position: absolute;
             width: 100%;
-      top:5px;
+            top: 5px;
         }
     }
+
     .main {
         margin: 0px -10px;
         padding: 10px 20px;
+
         h3 {
             font-size: 16px;
         }
-    .tip{
+
+        .tip {
             font-size: 13px;
             color: #999;
             font-style: italic;
         }
+
+        .divTop {
+            position: fixed;
+            background: #fff;
+            height: 40px;
+            width: calc(~'100% - 560px');
+            z-index: 9999;
+            border-bottom: 1px #e4e6ed solid;
+            top: 105px
+        }
+
         height: calc(100vh - 150px);
         overflow-y: auto;
     }

src/assets/css/base.css

@@ -8,6 +8,46 @@ html body {
 #__layout {
   height: 100%;
 }
+/*flex*/
+.flex {
+  display: flex;
+}
+.fc-m {
+  justify-content: center;
+}
+.fa-m {
+  align-items: center;
+}
+.fc-e {
+  justify-content: flex-end;
+}
+.fc-b {
+  justify-content: space-between;
+}
+.fc-a {
+  justify-content: space-around;
+}
+.fc-ev {
+  justify-content: space-evenly;
+}
+.fd {
+  flex-direction: column;
+}
+.fg {
+  flex-grow: 1;
+}
+.fs {
+  flex-shrink: 0;
+}
+.fg2 {
+  flex-grow: 2;
+}
+.fos {
+  order: -1;
+}
+.foe {
+  order: 99;
+}
 /*字体*/
 .ib {
   display: inline;
@@ -475,6 +515,15 @@ i.icon-gengxin {
 .tc {
   text-align: center;
 }
+.lt30 {
+  line-height: 30px;
+}
+.lt40 {
+  line-height: 40px;
+}
+.lt50 {
+  line-height: 50px;
+}
 /*清除浮动*/
 .clear {
   clear: both;
@@ -523,6 +572,7 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   padding: 0px 10px 20px 10px;
   margin-top: 10px;
+  overflow: auto;
 }
 .zh-tree .zh-title {
   font-size: 14px;
@@ -646,7 +696,7 @@ html [type=button] {
 }
 .waitTask {
   /*flex 布局*/
-  display: flex;
+  display: flex!important;
   align-items: center;
   width: 200px;
   height: 100px;
@@ -892,7 +942,6 @@ html [type=button] {
   color: #249e91;
 }
 .full .menu .tree {
-  height: calc(100% - 150px);
   overflow: auto;
 }
 .full .content {
@@ -922,3 +971,7 @@ html [type=button] {
 .content {
   padding-left: 5px;
 }
+.row_border_bottom {
+  border-bottom: 1px solid #E0E0E0;
+  padding: 15px 20px;
+}