66

src/views/material/BOMmanage/components/baseInfoSave.vue

@@ -6,65 +6,64 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     append-to-body
-    width="800px"
+    width="700px"
   >
-    <el-form ref="form" label-width="100px" :inline="true" :model="dataInfo">
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="BOM编码" prop="type">
-            <el-input
-              size="mini"
-              placeholder="BOM编码"
-              v-model="dataInfo.code"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="BOM名称" prop="type">
-            <el-input
-              size="mini"
-              placeholder="BOM名称"
-              v-model="dataInfo.name"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="版本号" prop="type">
-            <el-input
-              size="mini"
-              disabled
-              placeholder="版本号"
-              v-model="dataInfo.versions"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="状态" prop="type">
-            <el-select
-              size="mini"
-              style="width: 100%"
-              disabled
-              v-model="dataInfo.status"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in statusOptions"
-                :label="item.label"
-                :value="item.value"
-                :key="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
+    <el-form
+      ref="form"
+      label-width="100px"
+      :rules="rules"
+      :inline="true"
+      :model="formData"
+    >
+      <el-form-item label="BOM编码" prop="code">
+        <el-input
+          size="mini"
+          placeholder="BOM编码"
+          v-model="formData.code"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="BOM名称" prop="name">
+        <el-input
+          size="mini"
+          placeholder="BOM名称"
+          v-model="formData.name"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="版本号" prop="versions">
+        <el-input
+          size="mini"
+          disabled
+          placeholder="版本号"
+          v-model="formData.versions"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="状态" prop="status">
+        <el-select
+          size="mini"
+          style="width: 100%"
+          disabled
+          v-model="formData.status"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in statusOptions"
+            :label="item.label"
+            :value="item.value"
+            :key="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
     </el-form>
 
     <div slot="footer" class="dialog-footer">
       <el-button size="small" @click="handleClose">关 闭</el-button>
-      <el-button size="small" type="primary">确 认</el-button>
+      <el-button size="small" type="primary" @click="handleSave"
+        >确 认</el-button
+      >
     </div>
   </el-dialog>
 </template>
@@ -88,7 +87,29 @@
             label: '草稿',
             value: 0
           }
-        ]
+        ],
+        formData: {
+          code: '',
+          name: '',
+          versions: '',
+          status: 0
+        },
+        rules: {
+          name: [
+            {
+              required: true,
+              message: '请输入BOM名称',
+              trigger: 'blur'
+            }
+          ],
+          code: [
+            {
+              required: true,
+              message: '请输入BOM编码',
+              trigger: 'blur'
+            }
+          ]
+        }
       };
     },
     props: {
@@ -103,6 +124,15 @@
     methods: {
       handleClose() {
         this.$emit('close');
+      },
+
+      handleSave() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+          } else {
+            return false;
+          }
+        });
       }
     }
   };

src/views/material/BOMmanage/detailsPop.vue

@@ -282,7 +282,7 @@
   };
 </script>
 
-<style scoped>
+<style scoped scoped>
   /* 自定义全屏样式 */
   ::v-deep .is-fullscreen {
     width: 100vw !important;