优化工序库的出入库记录页面布局

Signed-off-by: AiNoeLiYa <jzbcxy@gmail.com>

src/views/processManagement/inventoryRecord/index.vue

@@ -36,7 +36,6 @@
           />
         </el-form-item>
 
-
         <el-form-item label="库类型" prop="ptype">
           <el-select
             v-model="queryParams.ptype"
@@ -114,7 +113,7 @@
       <component
         :is="BaseTable"
         :key="queryParams.rows"
-        :nIndex="nIndex"
+        :n-index="nIndex"
         :all-table-arguments="allTableArguments"
         @handle-detail="handleDetail"
       />
@@ -133,7 +132,7 @@
       <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
 
         <el-row :gutter="10" justify="start" align="middle">
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="pn：" prop="pn">
               <el-input v-model.trim="singleDetails.pn" :readonly="isReadOnly" />
             </el-form-item>
@@ -143,24 +142,24 @@
             <el-form-item label="plocation：" prop="plocation">
               <el-input v-model.trim="singleDetails.plocation" :readonly="isReadOnly" />
             </el-form-item>
+            <el-form-item label="操作员：" prop="user">
+              <el-input v-model.trim="singleDetails.user" :readonly="isReadOnly" />
+            </el-form-item>
           </el-col>
 
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="库类型：" prop="ptype">
-              <el-input v-model.trim="singleDetails.ptype" :readonly="isReadOnly" />
+              {{ selectedPtype(singleDetails.ptype) }}
             </el-form-item>
             <el-form-item label="库状态：" prop="poperate">
-              <el-input v-model.trim="singleDetails.poperate" :readonly="isReadOnly" />
+              {{ selectedPoperate(singleDetails.poperate) }}
+            </el-form-item>
+            <el-form-item label="fqYs：" prop="fqYs">
+              {{ singleDetails.fqYs }}
             </el-form-item>
-          </el-col>
-
-          <el-col :span="8">
             <el-form-item label="操作时间：" prop="createDate">
               <el-input v-model.trim="singleDetails.createDate" :readonly="isReadOnly" />
             </el-form-item>
-            <el-form-item label="操作员：" prop="user">
-              <el-input v-model.trim="singleDetails.user" :readonly="isReadOnly" />
-            </el-form-item>
           </el-col>
         </el-row>
 
@@ -175,7 +174,7 @@ import { listLog } from '@/api/processLibrary/InventoryRecord'
 import BaseTable from '@/components/Table/BaseTable/index.vue'
 
 export default {
-  name: 'LoginInfo',
+  name: 'InventoryRecord',
   components: [
     BaseTable
   ],
@@ -279,14 +278,7 @@ export default {
             prop: 'ptype',
             label: '库类型',
             ownDefinedReturn: (row, $index) => {
-              switch (row.ptype) {
-                case '1':
-                  return '设备库'
-                case '2':
-                  return '工序库'
-                default:
-                  return ''
-              }
+              return this.selectedPtype(row.ptype)
             }
           },
           {
@@ -295,18 +287,7 @@ export default {
             label: '库状态',
             width: '180px',
             ownDefinedReturn: (row, $index) => {
-              switch (row.poperate) {
-                case '1':
-                  return '入库'
-                case '2':
-                  return '出库'
-                case '3':
-                  return '修正'
-                case '4':
-                  return '废弃'
-                default:
-                  return ''
-              }
+              return this.selectedPoperate(row.poperate)
             }
           },
           {
@@ -348,7 +329,6 @@ export default {
         ]
       },
 
-
       title: '',
       openDetails: false,
       isReadOnly: true,
@@ -373,7 +353,6 @@ export default {
     BaseTable() {
       return BaseTable
     },
-
     /* TODO:自定义分页索引，实现索引继承 */
     nIndex(index) {
       // TODO: 当前页数 - 1 * 每页数据条数 + 1
@@ -381,7 +360,6 @@ export default {
       const rows = this.queryParams.rows // TODO: 每页条数
       return index + 1 + (page - 1) * rows
     },
-
     // TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
     allTableArguments() {
       return {
@@ -419,6 +397,33 @@ export default {
         this.loading = false
       })
     },
+
+    /* TODO: ptype 库类型判断的公用方法 */
+    selectedPtype(ptype) {
+      switch (ptype) {
+        case '1':
+          return '设备库'
+        case '2':
+          return '工序库'
+        default:
+          return ''
+      }
+    },
+    /* TODO: poperate的库状态判断的公用方法 */
+    selectedPoperate(poperate) {
+      switch (poperate) {
+        case '1':
+          return '入库'
+        case '2':
+          return '出库'
+        case '3':
+          return '修正'
+        case '4':
+          return '废弃'
+        default:
+          return ''
+      }
+    },
     handleClose() {
       this.clearVisible = false
       this.exportVisible = false
@@ -458,8 +463,6 @@ export default {
       margin-bottom:10px
     }
 
-
-
   /*TODO: 这里是调整ToolBar的样式的噢！*/
     .ToolBar{
       .el-form{
@@ -475,9 +478,9 @@ export default {
     }
   }
 
-
   /* TODO: 专门用来解决el-input边框的问题 */
   .aboutSingleDetails{
+    .el-form{
       .el-form-item{
         .el-input >>> .el-input__inner {
           -webkit-appearance: none;
@@ -490,5 +493,7 @@ export default {
       }
     }
 
+  }
+
   </style>
 

src/views/system/dept/index.vue

 <template>
   <div class="app-container">
-    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true">
+    <el-form v-show="showSearch" ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
       <el-form-item label="部门名称" prop="deptName">
         <el-input
           v-model="queryParams.deptName"
@@ -22,12 +22,19 @@
       </el-form-item>
       <el-form-item>
         <el-button
+          style="padding: 8px 7px;"
+          icon="el-icon-search"
           class="filter-item"
           type="primary"
           size="small"
           @click="getList"
         >查询</el-button>
+      </el-form-item>
+      <div style="float: right">
+        <el-form-item>
           <el-button
+            style="padding: 8px 7px;"
+            icon="el-icon-plus"
             class="filter-item"
             type="primary"
             size="small"
@@ -35,8 +42,10 @@
           >新增</el-button>
           <!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
         </el-form-item>
+      </div>
     </el-form>
 
+    <div style="padding:5px 10px">
       <el-table
         v-loading="Loading"
         :data="deptList"
@@ -125,6 +134,7 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <!-- 添加或修改部门对话框 -->
     <el-dialog title="部门信息" :visible.sync="open" width="600px" append-to-body>
@@ -190,7 +200,7 @@
 </template>
 
 <script>
-import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from '@/api/system/dept'
+import { addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept } from '@/api/system/dept'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
@@ -426,3 +436,31 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+  font-size: 18px;
+  padding: 0;
+
+  .placeholder {
+    height: 1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom: 10px
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .el-switch {
+    margin-left: 15px;
+  }
+}
+.el-divider--vertical{
+  height: 12em;
+  width: 4px;
+}
+</style>
+

src/views/system/role/index.vue

@@ -39,12 +39,14 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
+        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
       </el-form-item>
       <div style="float: right">
         <el-form-item>
           <el-button
+            style="padding: 8px 7px;"
             type="primary"
+            icon="el-icon-plus"
             size="small"
             @click="handleAdd"
           >新增</el-button>

src/views/system/user/index.vue

@@ -40,7 +40,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
-          <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          <el-button style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
         </el-form-item>
         <el-form-item style="float: right">
           <!--          <el-button-->