pda搭建文档

notes.md

+### pda端搭建步骤
+
+（web端更改为pda端）
+
+####   1. 左侧菜单栏调整
+
+① 首先默认左侧菜单栏隐藏，sidebar.opened = false
+
+② header.vue文件内设置menuState属性（控制左侧菜单栏显示还是隐藏），通过hamburger组件点击事件，每次点击取反并存储vuex
+
+③layout/index文件下通过vuex存储的menuState属性来控制菜单栏显示和隐藏时的样式
+
+```
+<sidebar class="sidebar-container" :style="{display:sidebarType ? 'block':'none'}" />
+<div class="main-container" :style="{marginLeft:sidebarType ? '54px':'0px'}">
+  <div class="nav-container fixed-header" :style="{width:sidebarType ? 'calc(100% - 63px)':'calc(100% - 12px)'}">
+  
+    computed: {
+    sidebarType() {
+      return this.$store.state.app.menuState
+    },
+    }
+```
+
+#### 2.页面整体宽度调整
+
+```
+#app {
+  height: 100%;
+  overflow-x: hidden;
+  min-width: 300px;（设置的页面最小宽度）
+}
+```
+

src/views/setup/outbound.vue

@@ -5,11 +5,11 @@
         <el-button class="button_rowBtn" type="primary" @click="handleOpenScan">扫码</el-button>
       </div>
       <div class="formBody">
-      <el-form ref="form" :model="form" :rules="rules" label-width="auto" label-position="top">
-        <el-form-item label="扫码结果" prop="scanCode" class="outbound_formItem">
-          <el-input v-model="form.scanCode" show-word-limit placeholder="请扫码" />
-        </el-form-item>
-      </el-form>
+        <el-form ref="form" :model="form" :rules="rules" label-width="auto" label-position="top">
+          <el-form-item label="扫码结果" prop="scanCode" class="outbound_formItem">
+            <el-input v-model="form.scanCode" show-word-limit placeholder="请扫码" />
+          </el-form-item>
+        </el-form>
       </div>
       <div class="button_row">
         <el-button class="button_rowBtn" type="primary">入库</el-button>