优化

src/styles/index.scss

@@ -3,3 +3,186 @@ $--ele-font-path: '~ele-admin/es/style/fonts';
 @import '~ele-admin/es/style/themes/dynamic.scss';
 @import '~ele-admin/es/style/index.scss';
 @import './transition/index.scss';
+
+
+
+
+
+/* 布局-横向 */
+/* c:center，s:start，e:end，a:around，b:between，w:wrap */
+.rx {
+    display: flex;
+  }
+  
+  .rx-c {
+    display: flex;
+    align-items: center;
+  }
+  
+  .rx-cc {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .rx-sc {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  
+  .rx-ss {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  
+  .rx-warp {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  
+  .rx-se {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: flex-end;
+  }
+  
+  .rx-dir-start {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .rx-ec {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  
+  .rx-es {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: flex-start;
+  }
+  
+  .rx-ee {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+  
+  .rx-ac {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
+  }
+  
+  .rx-bc {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .rx-bs {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  
+  .rx-be {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+  
+  .rx-vc {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  
+  .rx-cs {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  
+  .rx-wsc {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  
+  .rx-wss {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+  }
+  
+  .rx-wbs {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-content: flex-start;
+  }
+  
+  /* 布局-纵向 */
+  
+  .cx {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+  
+  .cx-cc {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .cx-ce {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: flex-end;
+  }
+  
+  .cx-sc {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  
+  .cx-cs {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  
+  .cx-rc {
+    display: flex;
+    flex-flow: column-reverse nowrap;
+    justify-content: center;
+    align-items: center;
+  }

src/views/material/materialBOM/components/edit-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <ele-modal :visible.sync="visible" :title="title" width="80%" @close="cancel">
+  <ele-modal :visible.sync="visible" v-if="visible" :title="title" width="80%" @close="cancel">
     <headerTitle title="基本信息"></headerTitle>
     <el-form label-width="100px">
       <el-row>
@@ -42,15 +42,26 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="分类层级" prop="categoryType">
-            <el-input
-              placeholder="请输入"
+ 
+
+            <el-select
               v-model="formData.categoryType"
-            ></el-input>
+              placeholder="请选择"
+              class="w100"
+            >
+              <el-option
+                v-for="item in categoryList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="基本数量" prop="baseCount">
-            <el-row>
+            <el-row >
               <el-col :span="16">
                 <el-input
                   placeholder="请输入"
@@ -58,7 +69,8 @@
                 >
                 </el-input
               ></el-col>
-              <el-col :span="8"
+              <el-col :span="2">&nbsp;</el-col>
+              <el-col :span="6"
                 ><DictSelection
                   dictName="计量单位"
                   v-model="formData.baseCountUnit"
@@ -130,7 +142,6 @@
 
     <div slot="footer" class="footer">
       <el-button type="primary" @click="save">保存</el-button>
-      <el-button type="primary" @click="save">发布</el-button>
       <el-button @click="cancel">返回</el-button>
     </div>
     <materialDialog ref="materialDialogRef" />
@@ -165,6 +176,21 @@
           baseCountUnit: '',
           status: '-1'
         },
+        categoryList: [
+          {
+            value: '1',
+            label: '产品'
+          },
+          {
+            value: '2',
+            label: '部件'
+          },
+          {
+            value: '3',
+            label: '零件'
+          }
+
+        ],
         tableData: [],
         columns: [
           {
@@ -269,7 +295,9 @@
       handleDel (index) {
         this.tableData.splice(index, 1);
       },
-      cancel () {}
+      cancel () {
+        this.visible = false
+      }
     }
   };
 </script>