调整页面布局（初稿）

2022-12-09 01:24:15 +08:00
parent e26e7991d9
commit f163150761
68 changed files with 9656 additions and 9452 deletions
--- a/jshERP-web/src/components/jeecg/JModal/index.vue
+++ b/jshERP-web/src/components/jeecg/JModal/index.vue
@@ -1,44 +1,48 @@
 <template>
-  <a-modal
-    ref="modal"
-    :class="getClass(modalClass)"
-    :style="getStyle(modalStyle)"
-    :visible="visible"
-    v-bind="_attrs"
-    v-on="$listeners"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
+  <div ref="container">
+    <a-modal
+      ref="modal"
+      :class="getClass(modalClass)"
+      :style="getStyle(modalStyle)"
+      :visible="visible"
+      :maskStyle="{'top':'101px','left':'151px'}"
+      :getContainer="() => $refs.container"
+      v-bind="_attrs"
+      v-on="$listeners"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >

-    <slot></slot>
+      <slot></slot>

-    <template v-if="!isNoTitle" slot="title">
-      <a-row class="j-modal-title-row" type="flex">
-        <a-col class="left">
-          <slot name="title">{{ title }}</slot>
-        </a-col>
-        <a-col class="right">
-          <a-tooltip title="新手引导">
-            <a-button v-if="switchHelp" @click="handleHelp" style="right:112px;" class="ant-modal-close ant-modal-close-x"
-                      ghost type="link" icon="question-circle"/>
-          </a-tooltip>
-          <a-button v-if="switchFullscreen" @click="toggleFullscreen" class="ant-modal-close ant-modal-close-x"
-                    ghost type="link" :icon="fullscreenButtonIcon"/>
-        </a-col>
-      </a-row>
-    </template>
+      <template v-if="!isNoTitle" slot="title">
+        <a-row class="j-modal-title-row" type="flex">
+          <a-col class="left">
+            <slot name="title">{{ title }}</slot>
+          </a-col>
+          <a-col class="right">
+            <a-tooltip title="新手引导">
+              <a-button v-if="switchHelp" @click="handleHelp" style="right:112px;" class="ant-modal-close ant-modal-close-x"
+                        ghost type="link" icon="question-circle"/>
+            </a-tooltip>
+            <a-button v-if="switchFullscreen" @click="toggleFullscreen" class="ant-modal-close ant-modal-close-x"
+                      ghost type="link" :icon="fullscreenButtonIcon"/>
+          </a-col>
+        </a-row>
+      </template>

-    <!-- 处理 scopedSlots -->
-    <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
-      <slot :name="slotName"></slot>
-    </template>
+      <!-- 处理 scopedSlots -->
+      <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
+        <slot :name="slotName"></slot>
+      </template>

-    <!-- 处理 slots -->
-    <template v-for="slotName of slotsKeys" v-slot:[slotName]>
-      <slot :name="slotName"></slot>
-    </template>
+      <!-- 处理 slots -->
+      <template v-for="slotName of slotsKeys" v-slot:[slotName]>
+        <slot :name="slotName"></slot>
+      </template>

-  </a-modal>
+    </a-modal>
+  </div>
 </template>

 <script>
--- a/jshERP-web/src/components/jeecgbiz/modal/JSelectMaterialModal.vue
+++ b/jshERP-web/src/components/jeecgbiz/modal/JSelectMaterialModal.vue
@@ -6,7 +6,7 @@
    @ok="handleSubmit"
    @cancel="close"
    cancelText="关闭"
-    style="top:5%;height: 100%;overflow-y: hidden"
+    style="top:5%;height: 90%;overflow-y: hidden"
    wrapClassName="ant-modal-cust-warp"
  >
    <a-row :gutter="10" style="padding: 10px; margin: -10px">
--- a/jshERP-web/src/components/menu/SideMenu.vue
+++ b/jshERP-web/src/components/menu/SideMenu.vue
@@ -1,7 +1,7 @@
 <template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
-    width="200px"
+    width="150px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
--- a/jshERP-web/src/components/menu/index.js
+++ b/jshERP-web/src/components/menu/index.js
@@ -172,7 +172,8 @@ export default {
    const props = {
      mode: mode,
      theme: theme,
-      openKeys: this.openKeys
+      openKeys: this.openKeys,
+      inlineIndent: 12,
    }
    const on = {
      select: obj => {
--- a/jshERP-web/src/components/page/GlobalHeader.vue
+++ b/jshERP-web/src/components/page/GlobalHeader.vue
@@ -168,7 +168,7 @@
 <style lang="less" scoped>
  /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

-  @height: 59px;
+  @height: 49px;

  .layout {

--- a/jshERP-web/src/components/page/GlobalLayout.vue
+++ b/jshERP-web/src/components/page/GlobalLayout.vue
@@ -9,7 +9,7 @@
        @close="() => this.collapsed = false"
        :closable="false"
        :visible="collapsed"
-        width="200px"
+        width="150px"
      >
        <side-menu
          mode="inline"
@@ -38,7 +38,7 @@
        @close="() => this.collapsed = false"
        :closable="false"
        :visible="collapsed"
-        width="200px"
+        width="150px"
      >
        <side-menu
          mode="inline"
@@ -52,7 +52,7 @@

    <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
-      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
+      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 150 : 80}px` : '0' }">
      <!-- layout header -->
      <global-header
        :mode="layoutMode"
@@ -65,7 +65,7 @@
      />

      <!-- layout content -->
-      <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
+      <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '49px' : '0' }">
        <slot></slot>
      </a-layout-content>

@@ -292,7 +292,7 @@
        transition: width .2s;

        &.ant-header-side-opened {
-          width: calc(100% - 200px)
+          width: calc(100% - 150px)
        }

        &.ant-header-side-closed {
@@ -322,7 +322,7 @@
          transition: all .3s;

          height: 70%;
-          line-height: 46px;
+          line-height: 36px;

          &.action-full {
            height: 100%;
@@ -435,7 +435,7 @@
        margin: auto;
        padding: 0 20px 0 0;
        display: flex;
-        height: 59px;
+        height: 49px;

        .ant-menu.ant-menu-horizontal {
          border: none;
@@ -474,7 +474,7 @@

        .header-index-right {
          float: right;
-          height: 59px;
+          height: 49px;
          overflow: hidden;
          .action:hover {
            background-color: rgba(0, 0, 0, 0.05);
--- a/jshERP-web/src/components/tools/ImportFileModal.vue
+++ b/jshERP-web/src/components/tools/ImportFileModal.vue
@@ -1,36 +1,40 @@
 <template>
-  <a-modal
-    :title="title"
-    :width="500"
-    :visible="visible"
-    :confirm-loading="confirmLoading"
-    :maskClosable="false"
-    @cancel="handleCancel"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:25%;height: 45%;overflow-y: hidden">
-    <template slot="footer">
-      <a-button key="back" @click="handleCancel">取消</a-button>
-    </template>
-    <a-spin :spinning="confirmLoading">
-      <a-row class="form-row" :gutter="24">
-        <a-col :md="24" :sm="24">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="第一步：">
-            <a target="_blank" :href="templateUrl"><b>{{templateName}}</b></a>
-            <p>提示：模板中的第一行请勿删除</p>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row class="form-row" :gutter="24">
-        <a-col :md="24" :sm="24">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="第二步：">
-            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-              <a-button type="primary" icon="import">导入</a-button>
-            </a-upload>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="500"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :getContainer="() => $refs.container"
+      :maskStyle="{'top':'101px','left':'151px'}"
+      :maskClosable="false"
+      @cancel="handleCancel"
+      wrapClassName="ant-modal-cust-warp"
+      style="top:25%;height: 45%;overflow-y: hidden">
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel">取消</a-button>
+      </template>
+      <a-spin :spinning="confirmLoading">
+        <a-row class="form-row" :gutter="24">
+          <a-col :md="24" :sm="24">
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="第一步：">
+              <a target="_blank" :href="templateUrl"><b>{{templateName}}</b></a>
+              <p>提示：模板中的第一行请勿删除</p>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row class="form-row" :gutter="24">
+          <a-col :md="24" :sm="24">
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="第二步：">
+              <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+                <a-button type="primary" icon="import">导入</a-button>
+              </a-upload>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>

 <script>
--- a/jshERP-web/src/components/tools/Logo.vue
+++ b/jshERP-web/src/components/tools/Logo.vue
@@ -26,7 +26,7 @@
 </script>
 <style lang="less" scoped>
  /*缩小首页布 局顶部的高度*/
-  @height: 59px;
+  @height: 49px;

  .sider {
    box-shadow: none !important;
--- a/jshERP-web/src/components/tools/UserPassword.vue
+++ b/jshERP-web/src/components/tools/UserPassword.vue
@@ -1,28 +1,33 @@
 <template>
-  <a-modal
-    :title="title"
-    :width="modalWidth"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:25%;height: 50%;overflow-y: hidden">
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
-        <a-form-item label="旧密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldpassword', validatorRules.oldpassword]" />
-        </a-form-item>
-        <a-form-item label="新密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input type="password" placeholder="新密码至少6位，区分大小写" v-decorator="[ 'password', validatorRules.password]" />
-        </a-form-item>
-        <a-form-item label="确认新密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input type="password"  placeholder="请确认新密码" v-decorator="[ 'confirmPassword', validatorRules.confirmPassword]"/>
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="modalWidth"
+      :visible="visible"
+      :confirmLoading="confirmLoading"
+      :getContainer="() => $refs.container"
+      :maskStyle="{'top':'101px','left':'151px'}"
+      :maskClosable="false"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      cancelText="关闭"
+      wrapClassName="ant-modal-cust-warp"
+      style="top:20%;height: 50%;overflow-y: hidden">
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-form-item label="旧密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldpassword', validatorRules.oldpassword]" />
+          </a-form-item>
+          <a-form-item label="新密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input type="password" placeholder="新密码至少6位，区分大小写" v-decorator="[ 'password', validatorRules.password]" />
+          </a-form-item>
+          <a-form-item label="确认新密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input type="password"  placeholder="请确认新密码" v-decorator="[ 'confirmPassword', validatorRules.confirmPassword]"/>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>

 <script>