调整页面布局（初稿）

jshERP-web/src/views/system/modules/RoleModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="800"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:20%;height: 60%;overflow-y: hidden">
-    <template slot="footer">
-      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
-        关闭
-      </a-button>
-    </template>
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form" id="roleModal">
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称">
-          <a-input placeholder="请输入角色名称" v-decorator.trim="[ 'name', validatorRules.name]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据类型">
-          <a-select placeholder="请选择数据类型" v-decorator="[ 'type', validatorRules.type]" style="width:94%">
-            <a-select-option value="全部数据">全部数据</a-select-option>
-            <a-select-option value="本机构数据">本机构数据</a-select-option>
-            <a-select-option value="个人数据">个人数据</a-select-option>
-          </a-select>
-          <a-tooltip title="1、全部数据-该角色对应的用户可以看到全部单据；2、本机构数据-该角色对应的用户可以看到自己所在机构的全部单据；
-              3、个人数据-该角色对应的用户只可以看到自己的单据。单据是指采购入库、销售出库等">
-            <a-icon type="question-circle" style="width:6%; padding-left: 5px; font-size: 18px;" />
-          </a-tooltip>
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="价格屏蔽">
-          <j-select-multiple style="width:94%" placeholder="请选择价格屏蔽" v-model="priceLimitList.value" :options="priceLimitList.options"/>
-          <a-tooltip title="价格屏蔽支持多选，主要用于控制首页界面和物料的价格屏蔽">
-            <a-icon type="question-circle" style="width:6%; padding-left: 5px; font-size: 18px;" />
-          </a-tooltip>
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
-          <a-textarea :rows="1" placeholder="请输入描述" v-decorator="[ 'description', validatorRules.description ]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
-          <a-input placeholder="请输入排序" v-decorator.trim="[ 'sort' ]" />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="800"
+      :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: 60%;overflow-y: hidden">
+      <template slot="footer">
+        <a-button key="back" v-if="isReadOnly" @click="handleCancel">
+          关闭
+        </a-button>
+      </template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form" id="roleModal">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称">
+            <a-input placeholder="请输入角色名称" v-decorator.trim="[ 'name', validatorRules.name]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据类型">
+            <a-select placeholder="请选择数据类型" v-decorator="[ 'type', validatorRules.type]" style="width:94%">
+              <a-select-option value="全部数据">全部数据</a-select-option>
+              <a-select-option value="本机构数据">本机构数据</a-select-option>
+              <a-select-option value="个人数据">个人数据</a-select-option>
+            </a-select>
+            <a-tooltip title="1、全部数据-该角色对应的用户可以看到全部单据；2、本机构数据-该角色对应的用户可以看到自己所在机构的全部单据；
+                3、个人数据-该角色对应的用户只可以看到自己的单据。单据是指采购入库、销售出库等">
+              <a-icon type="question-circle" style="width:6%; padding-left: 5px; font-size: 18px;" />
+            </a-tooltip>
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="价格屏蔽">
+            <j-select-multiple style="width:94%" placeholder="请选择价格屏蔽" v-model="priceLimitList.value" :options="priceLimitList.options"/>
+            <a-tooltip title="价格屏蔽支持多选，主要用于控制首页界面和物料的价格屏蔽">
+              <a-icon type="question-circle" style="width:6%; padding-left: 5px; font-size: 18px;" />
+            </a-tooltip>
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
+            <a-textarea :rows="1" placeholder="请输入描述" v-decorator="[ 'description', validatorRules.description ]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
+            <a-input placeholder="请输入排序" v-decorator.trim="[ 'sort' ]" />
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'

jshERP-web/src/views/system/modules/RolePushBtnModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="width"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:5%;height: 95%;overflow-y: hidden">
-    <a-spin :spinning="confirmLoading">
-      <div class="table-page-search-wrapper">
-        <!-- 按钮区域 -->
-        <a-form layout="inline">
-          <a-row :gutter="24">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-col :md="12" :sm="24">
-                <a-button @click="toggleChecked">
-                  {{ !checked ? '全选' : '全取消' }}
-                </a-button>
-                <a-button @click="editToggleChecked" style="margin-left: 8px">
-                  {{ !editChecked ? '全选-编辑' : '全取消-编辑' }}
-                </a-button>
-                <a-button @click="auditToggleChecked" style="margin-left: 8px">
-                  {{ !auditChecked ? '全选-审核' : '全取消-审核' }}
-                </a-button>
-                <a-button @click="unAuditToggleChecked" style="margin-left: 8px">
-                  {{ !unAuditChecked ? '全选-反审核' : '全取消-反审核' }}
-                </a-button>
-              </a-col>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="width"
+      :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:5%;height: 95%;overflow-y: hidden">
+      <a-spin :spinning="confirmLoading">
+        <div class="table-page-search-wrapper">
+          <!-- 按钮区域 -->
+          <a-form layout="inline">
+            <a-row :gutter="24">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-col :md="12" :sm="24">
+                  <a-button @click="toggleChecked">
+                    {{ !checked ? '全选' : '全取消' }}
+                  </a-button>
+                  <a-button @click="editToggleChecked" style="margin-left: 8px">
+                    {{ !editChecked ? '全选-编辑' : '全取消-编辑' }}
+                  </a-button>
+                  <a-button @click="auditToggleChecked" style="margin-left: 8px">
+                    {{ !auditChecked ? '全选-审核' : '全取消-审核' }}
+                  </a-button>
+                  <a-button @click="unAuditToggleChecked" style="margin-left: 8px">
+                    {{ !unAuditChecked ? '全选-反审核' : '全取消-反审核' }}
+                  </a-button>
+                </a-col>
+              </span>
+            </a-row>
+          </a-form>
+        </div>
+        <!-- table区域-begin -->
+        <div>
+          <a-table
+            ref="table"
+            size="middle"
+            bordered
+            rowKey="id"
+            :pagination="false"
+            :columns="columns"
+            :dataSource="dataSource"
+            :loading="loading">
+            <span slot="action" slot-scope="text, record">
+              <a-checkbox v-if="record.pushBtn.indexOf(1)>-1" value="1" :checked="record.btnStr?record.btnStr.indexOf(1)>-1:false" @change="onChange(record,'1')">编辑</a-checkbox>
+              <a-checkbox v-if="record.pushBtn.indexOf(2)>-1" value="2" :checked="record.btnStr?record.btnStr.indexOf(2)>-1:false" @change="onChange(record,'2')">审核</a-checkbox>
+              <a-checkbox v-if="record.pushBtn.indexOf(7)>-1" value="7" :checked="record.btnStr?record.btnStr.indexOf(7)>-1:false" @change="onChange(record,'7')">反审核</a-checkbox>
+              <a-checkbox v-if="record.pushBtn.indexOf(3)>-1" value="3" :checked="record.btnStr?record.btnStr.indexOf(3)>-1:false" @change="onChange(record,'3')">导入导出</a-checkbox>
+              <a-checkbox v-if="record.pushBtn.indexOf(4)>-1" value="4" :checked="record.btnStr?record.btnStr.indexOf(4)>-1:false" @change="onChange(record,'4')">启用禁用</a-checkbox>
+              <a-checkbox v-if="record.pushBtn.indexOf(5)>-1" value="5" :checked="record.btnStr?record.btnStr.indexOf(5)>-1:false" @change="onChange(record,'5')">打印</a-checkbox>
+              <a-checkbox v-if="record.pushBtn.indexOf(6)>-1" value="6" :checked="record.btnStr?record.btnStr.indexOf(6)>-1:false" @change="onChange(record,'6')">作废</a-checkbox>
             </span>
-          </a-row>
-        </a-form>
-      </div>
-      <!-- table区域-begin -->
-      <div>
-        <a-table
-          ref="table"
-          size="middle"
-          bordered
-          rowKey="id"
-          :pagination="false"
-          :columns="columns"
-          :dataSource="dataSource"
-          :loading="loading">
-          <span slot="action" slot-scope="text, record">
-            <a-checkbox v-if="record.pushBtn.indexOf(1)>-1" value="1" :checked="record.btnStr?record.btnStr.indexOf(1)>-1:false" @change="onChange(record,'1')">编辑</a-checkbox>
-            <a-checkbox v-if="record.pushBtn.indexOf(2)>-1" value="2" :checked="record.btnStr?record.btnStr.indexOf(2)>-1:false" @change="onChange(record,'2')">审核</a-checkbox>
-            <a-checkbox v-if="record.pushBtn.indexOf(7)>-1" value="7" :checked="record.btnStr?record.btnStr.indexOf(7)>-1:false" @change="onChange(record,'7')">反审核</a-checkbox>
-            <a-checkbox v-if="record.pushBtn.indexOf(3)>-1" value="3" :checked="record.btnStr?record.btnStr.indexOf(3)>-1:false" @change="onChange(record,'3')">导入导出</a-checkbox>
-            <a-checkbox v-if="record.pushBtn.indexOf(4)>-1" value="4" :checked="record.btnStr?record.btnStr.indexOf(4)>-1:false" @change="onChange(record,'4')">启用禁用</a-checkbox>
-            <a-checkbox v-if="record.pushBtn.indexOf(5)>-1" value="5" :checked="record.btnStr?record.btnStr.indexOf(5)>-1:false" @change="onChange(record,'5')">打印</a-checkbox>
-            <a-checkbox v-if="record.pushBtn.indexOf(6)>-1" value="6" :checked="record.btnStr?record.btnStr.indexOf(6)>-1:false" @change="onChange(record,'6')">作废</a-checkbox>
-          </span>
-        </a-table>
-      </div>
-    </a-spin>
-  </a-modal>
+          </a-table>
+        </div>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'

jshERP-web/src/views/system/modules/TenantModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="600"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:20%;height: 60%;overflow-y: hidden">
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="登录名称">
-          <a-input placeholder="请输入登录名称" v-decorator.trim="[ 'loginName', validatorRules.loginName]" :readOnly="!!model.id"
-                   suffix="初始密码：123456" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户数量限制">
-          <a-input-number style="width:100%" placeholder="请输入用户数量限制" v-decorator.trim="[ 'userNumLimit' ]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="租户类型">
-          <a-select style="width:100%" placeholder="请选择租户类型" v-decorator.trim="[ 'type' ]">
-            <a-select-option value="0">试用租户</a-select-option>
-            <a-select-option value="1">付费租户</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="到期时间">
-          <j-date style="width:100%" placeholder="请选择到期时间" v-decorator.trim="[ 'expireTime' ]" :show-time="true"/>
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
-          <a-textarea :rows="2" placeholder="请输入描述" v-decorator.trim="[ 'remark' ]" />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="600"
+      :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: 60%;overflow-y: hidden">
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="登录名称">
+            <a-input placeholder="请输入登录名称" v-decorator.trim="[ 'loginName', validatorRules.loginName]" :readOnly="!!model.id"
+                     suffix="初始密码：123456" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户数量限制">
+            <a-input-number style="width:100%" placeholder="请输入用户数量限制" v-decorator.trim="[ 'userNumLimit' ]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="租户类型">
+            <a-select style="width:100%" placeholder="请选择租户类型" v-decorator.trim="[ 'type' ]">
+              <a-select-option value="0">试用租户</a-select-option>
+              <a-select-option value="1">付费租户</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="到期时间">
+            <j-date style="width:100%" placeholder="请选择到期时间" v-decorator.trim="[ 'expireTime' ]" :show-time="true"/>
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
+            <a-textarea :rows="2" placeholder="请输入描述" v-decorator.trim="[ 'remark' ]" />
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'

jshERP-web/src/views/system/modules/UnitModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="700"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:25%; height:50%; overflow-y:hidden">
-    <template slot="footer">
-      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
-        关闭
-      </a-button>
-    </template>
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form" id="unitModal">
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="基本单位">
-          <a-input placeholder="请输入基本单位(小单位)" v-decorator.trim="[ 'basicUnit', validatorRules.basicUnit]" />
-        </a-form-item>
-      </a-form>
-      <a-form :form="form">
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="副单位">
-          <a-input placeholder="请输入副单位(大单位)" style="width:48%" v-decorator.trim="[ 'otherUnit' ]" />
-          =
-          <a-input suffix="基本单位" placeholder="请输入比例" style="width:48%" v-decorator.trim="[ 'ratio' ]" />
-        </a-form-item>
-      </a-form>
-      <a-form :form="form">
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="副单位2">
-          <a-input placeholder="请输入副单位2(大单位)" style="width:48%" v-decorator.trim="[ 'otherUnitTwo' ]" />
-          =
-          <a-input suffix="基本单位" placeholder="请输入比例2" style="width:48%" v-decorator.trim="[ 'ratioTwo' ]" />
-        </a-form-item>
-      </a-form>
-      <a-form :form="form">
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="副单位3">
-          <a-input placeholder="请输入副单位3(大单位)" style="width:48%" v-decorator.trim="[ 'otherUnitThree' ]" />
-          =
-          <a-input suffix="基本单位" placeholder="请输入比例3" style="width:48%" v-decorator.trim="[ 'ratioThree' ]" />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="700"
+      :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:100px; height:50%;overflow-y: hidden">
+      <template slot="footer">
+        <a-button key="back" v-if="isReadOnly" @click="handleCancel">
+          关闭
+        </a-button>
+      </template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form" id="unitModal">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="基本单位">
+            <a-input placeholder="请输入基本单位(小单位)" v-decorator.trim="[ 'basicUnit', validatorRules.basicUnit]" />
+          </a-form-item>
+        </a-form>
+        <a-form :form="form">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="副单位">
+            <a-input placeholder="请输入副单位(大单位)" style="width:48%" v-decorator.trim="[ 'otherUnit' ]" />
+            =
+            <a-input suffix="基本单位" placeholder="请输入比例" style="width:48%" v-decorator.trim="[ 'ratio' ]" />
+          </a-form-item>
+        </a-form>
+        <a-form :form="form">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="副单位2">
+            <a-input placeholder="请输入副单位2(大单位)" style="width:48%" v-decorator.trim="[ 'otherUnitTwo' ]" />
+            =
+            <a-input suffix="基本单位" placeholder="请输入比例2" style="width:48%" v-decorator.trim="[ 'ratioTwo' ]" />
+          </a-form-item>
+        </a-form>
+        <a-form :form="form">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="副单位3">
+            <a-input placeholder="请输入副单位3(大单位)" style="width:48%" v-decorator.trim="[ 'otherUnitThree' ]" />
+            =
+            <a-input suffix="基本单位" placeholder="请输入比例3" style="width:48%" v-decorator.trim="[ 'ratioThree' ]" />
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'

jshERP-web/src/views/system/modules/UserCustomerModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="800"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:5%;height: 95%;overflow-y: hidden">
-    <a-spin :spinning="confirmLoading">
-      <div class="drawer-bootom-button">
-        <a-dropdown :trigger="['click']" placement="topCenter">
-          <a-menu slot="overlay">
-            <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
-            <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
-            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
-            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
-            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
-            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
-          </a-menu>
-          <a-button>
-            树操作 <a-icon type="up" />
-          </a-button>
-        </a-dropdown>
-      </div>
-      <a-col :md="10" :sm="24">
-        <template>
-          <a-tree
-            checkable
-            multiple
-            @check="onCheck"
-            :selectedKeys="selectedKeys"
-            :checkedKeys="checkedKeys"
-            :treeData="roleFunctionTree"
-            :checkStrictly="checkStrictly"
-            :expandedKeys="iExpandedKeys"
-            :autoExpandParent="true"
-            @expand="onExpand"/>
-        </template>
-      </a-col>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="800"
+      :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:5%;height: 95%;overflow-y: hidden">
+      <a-spin :spinning="confirmLoading">
+        <div class="drawer-bootom-button">
+          <a-dropdown :trigger="['click']" placement="topCenter">
+            <a-menu slot="overlay">
+              <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
+              <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
+              <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
+              <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
+              <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
+              <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
+            </a-menu>
+            <a-button>
+              树操作 <a-icon type="up" />
+            </a-button>
+          </a-dropdown>
+        </div>
+        <a-col :md="10" :sm="24">
+          <template>
+            <a-tree
+              checkable
+              multiple
+              @check="onCheck"
+              :selectedKeys="selectedKeys"
+              :checkedKeys="checkedKeys"
+              :treeData="roleFunctionTree"
+              :checkStrictly="checkStrictly"
+              :expandedKeys="iExpandedKeys"
+              :autoExpandParent="true"
+              @expand="onExpand"/>
+          </template>
+        </a-col>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'

jshERP-web/src/views/system/modules/UserDepotModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="800"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:5%;height: 95%;overflow-y: hidden">
-    <a-spin :spinning="confirmLoading">
-      <div class="drawer-bootom-button">
-        <a-dropdown :trigger="['click']" placement="topCenter">
-          <a-menu slot="overlay">
-            <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
-            <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
-            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
-            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
-            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
-            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
-          </a-menu>
-          <a-button>
-            树操作 <a-icon type="up" />
-          </a-button>
-        </a-dropdown>
-      </div>
-      <a-col :md="10" :sm="24">
-        <template>
-          <a-tree
-            checkable
-            multiple
-            @check="onCheck"
-            :selectedKeys="selectedKeys"
-            :checkedKeys="checkedKeys"
-            :treeData="roleFunctionTree"
-            :checkStrictly="checkStrictly"
-            :expandedKeys="iExpandedKeys"
-            :autoExpandParent="true"
-            @expand="onExpand"/>
-        </template>
-      </a-col>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="800"
+      :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:5%;height: 95%;overflow-y: hidden">
+      <a-spin :spinning="confirmLoading">
+        <div class="drawer-bootom-button">
+          <a-dropdown :trigger="['click']" placement="topCenter">
+            <a-menu slot="overlay">
+              <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
+              <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
+              <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
+              <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
+              <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
+              <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
+            </a-menu>
+            <a-button>
+              树操作 <a-icon type="up" />
+            </a-button>
+          </a-dropdown>
+        </div>
+        <a-col :md="10" :sm="24">
+          <template>
+            <a-tree
+              checkable
+              multiple
+              @check="onCheck"
+              :selectedKeys="selectedKeys"
+              :checkedKeys="checkedKeys"
+              :treeData="roleFunctionTree"
+              :checkStrictly="checkStrictly"
+              :expandedKeys="iExpandedKeys"
+              :autoExpandParent="true"
+              @expand="onExpand"/>
+          </template>
+        </a-col>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'

jshERP-web/src/views/system/modules/UserModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="800"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:10%;height: 85%;overflow-y: hidden">
-    <template slot="footer">
-      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
-        关闭
-      </a-button>
-    </template>
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form" id="userModal">
-        <a-form-item label="登录名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input placeholder="请输入登录名称" v-decorator.trim="[ 'loginName', validatorRules.loginName]" :readOnly="!!model.id"
-           suffix="初始密码：123456" />
-        </a-form-item>
-        <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
-          <a-input placeholder="请输入用户姓名" v-decorator.trim="[ 'username', validatorRules.username]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色">
-          <a-select v-if="model.roleName!='租户'" placeholder="选择角色" v-decorator="[ 'roleId', validatorRules.roleId]" :dropdownMatchSelectWidth="false">
-            <a-select-option v-for="(item,index) in roleList" :key="index" :value="item.id">
-              {{ item.name }}
-            </a-select-option>
-          </a-select>
-          <a-col v-if="model.roleName=='租户'"><a-row>租户</a-row></a-col>
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构">
-          <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
-             :treeData="orgaTree" v-decorator="[ 'orgaId' ]" placeholder="请选择机构">
-          </a-tree-select>
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="职位">
-          <a-input placeholder="请输入职位" v-decorator.trim="[ 'position' ]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电话号码">
-          <a-input placeholder="请输入电话号码" v-decorator.trim="[ 'phonenum' ]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电子邮箱">
-          <a-input placeholder="请输入电子邮箱" v-decorator.trim="[ 'email' ]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
-          <a-input placeholder="请输入排序" v-decorator.trim="[ 'userBlngOrgaDsplSeq' ]" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
-          <a-textarea :rows="2" placeholder="请输入描述" v-decorator="[ 'description' ]" />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="800"
+      :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:10%;height: 85%;overflow-y: hidden">
+      <template slot="footer">
+        <a-button key="back" v-if="isReadOnly" @click="handleCancel">
+          关闭
+        </a-button>
+      </template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form" id="userModal">
+          <a-form-item label="登录名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入登录名称" v-decorator.trim="[ 'loginName', validatorRules.loginName]" :readOnly="!!model.id"
+             suffix="初始密码：123456" />
+          </a-form-item>
+          <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
+            <a-input placeholder="请输入用户姓名" v-decorator.trim="[ 'username', validatorRules.username]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色">
+            <a-select v-if="model.roleName!='租户'" placeholder="选择角色" v-decorator="[ 'roleId', validatorRules.roleId]" :dropdownMatchSelectWidth="false">
+              <a-select-option v-for="(item,index) in roleList" :key="index" :value="item.id">
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+            <a-col v-if="model.roleName=='租户'"><a-row>租户</a-row></a-col>
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构">
+            <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
+               :treeData="orgaTree" v-decorator="[ 'orgaId' ]" placeholder="请选择机构">
+            </a-tree-select>
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="职位">
+            <a-input placeholder="请输入职位" v-decorator.trim="[ 'position' ]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电话号码">
+            <a-input placeholder="请输入电话号码" v-decorator.trim="[ 'phonenum' ]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电子邮箱">
+            <a-input placeholder="请输入电子邮箱" v-decorator.trim="[ 'email' ]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
+            <a-input placeholder="请输入排序" v-decorator.trim="[ 'userBlngOrgaDsplSeq' ]" />
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
+            <a-textarea :rows="2" placeholder="请输入描述" v-decorator="[ 'description' ]" />
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'

jshERP-web/src/views/system/modules/VendorModal.vue

 <template>
-  <a-modal
-    :title="title"
-    :width="1200"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:10%;height: 80%;overflow-y: hidden">
-    <template slot="footer">
-      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
-        关闭
-      </a-button>
-    </template>
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form" id="vendorModal">
-        <a-row class="form-row" :gutter="24">
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
-              <a-input placeholder="请输入名称" v-decorator.trim="[ 'supplier', validatorRules.supplier]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人">
-              <a-input placeholder="请输入联系人" v-decorator.trim="[ 'contacts' ]" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row class="form-row" :gutter="24">
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号码">
-              <a-input placeholder="请输入手机号码" v-decorator.trim="[ 'telephone' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">
-              <a-input placeholder="请输入联系电话" v-decorator.trim="[ 'phoneNum' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电子邮箱">
-              <a-input placeholder="请输入电子邮箱" v-decorator.trim="[ 'email' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="传真">
-              <a-input placeholder="请输入传真" v-decorator.trim="[ 'fax' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="期初应付">
-              <a-input placeholder="请输入期初应付" v-decorator.trim="[ 'beginNeedPay' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="期末应付">
-              <a-input v-decorator.trim="[ 'allNeedPay' ]" :readOnly="true" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="纳税人识别号">
-              <a-input placeholder="请输入纳税人识别号" v-decorator.trim="[ 'taxNum' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="税率(%)">
-              <a-input-number style="width:100%" placeholder="请输入税率" v-decorator.trim="[ 'taxRate' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开户行">
-              <a-input placeholder="请输入开户行" v-decorator.trim="[ 'bankName' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="账号">
-              <a-input placeholder="请输入账号" v-decorator.trim="[ 'accountNumber' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地址">
-              <a-input placeholder="请输入地址" v-decorator.trim="[ 'address' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
-              <a-input placeholder="请输入排序" v-decorator.trim="[ 'sort' ]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24/2">
-            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
-              <a-textarea :rows="2" placeholder="请输入备注" v-decorator.trim="[ 'description' ]" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-spin>
-  </a-modal>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="1200"
+      :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:100px; height: 80%;overflow-y: hidden">
+      <template slot="footer">
+        <a-button key="back" v-if="isReadOnly" @click="handleCancel">
+          关闭
+        </a-button>
+      </template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form" id="vendorModal">
+          <a-row class="form-row" :gutter="24">
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
+                <a-input placeholder="请输入名称" v-decorator.trim="[ 'supplier', validatorRules.supplier]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人">
+                <a-input placeholder="请输入联系人" v-decorator.trim="[ 'contacts' ]" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row class="form-row" :gutter="24">
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号码">
+                <a-input placeholder="请输入手机号码" v-decorator.trim="[ 'telephone' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">
+                <a-input placeholder="请输入联系电话" v-decorator.trim="[ 'phoneNum' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电子邮箱">
+                <a-input placeholder="请输入电子邮箱" v-decorator.trim="[ 'email' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="传真">
+                <a-input placeholder="请输入传真" v-decorator.trim="[ 'fax' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="期初应付">
+                <a-input placeholder="请输入期初应付" v-decorator.trim="[ 'beginNeedPay' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="期末应付">
+                <a-input v-decorator.trim="[ 'allNeedPay' ]" :readOnly="true" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="纳税人识别号">
+                <a-input placeholder="请输入纳税人识别号" v-decorator.trim="[ 'taxNum' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="税率(%)">
+                <a-input-number style="width:100%" placeholder="请输入税率" v-decorator.trim="[ 'taxRate' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开户行">
+                <a-input placeholder="请输入开户行" v-decorator.trim="[ 'bankName' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="账号">
+                <a-input placeholder="请输入账号" v-decorator.trim="[ 'accountNumber' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地址">
+                <a-input placeholder="请输入地址" v-decorator.trim="[ 'address' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
+                <a-input placeholder="请输入排序" v-decorator.trim="[ 'sort' ]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24/2">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
+                <a-textarea :rows="2" placeholder="请输入备注" v-decorator.trim="[ 'description' ]" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
 </template>
 <script>
   import pick from 'lodash.pick'