对齐

src/views/equipment/income.vue

@@ -2,32 +2,33 @@
   <div class="app-container">
     <el-form ref="form" :model="form" :rules="rule" label-width="80px">
       <div class="info"><span class="title">设备入库</span></div>
-      <el-row :gutter="40">
-        <el-col :span="12" style="padding-left: 10%;">
+      <el-row :gutter="40" style="padding-left: 8.6%;">
+        <el-col :span="12">
           <el-form-item label="pn:" style="flex-basis: 50%;" prop="pn">
-            <el-input ref="input1" v-model="form.pn" placeholder="请输入pn" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(1,$event)" />
+            <el-input ref="input1" v-model="form.pn" placeholder="请输入pn" :style="{ width: '400px', height: '30px' }" :maxlength="100" @keyup.enter.native="handelTab(1,$event)" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="lot:" style="flex-basis: 50%;" prop="lot">
-            <el-input ref="input2" v-model="form.lot" placeholder="请输入lot" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(2,$event)" />
+            <el-input ref="input2" v-model="form.lot" placeholder="请输入lot" :style="{ width: '400px', height: '30px' }" :maxlength="100" @keyup.enter.native="handelTab(2,$event)" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
-        <el-col :span="12" style="padding-left: 8.6%;">
+      <el-row :gutter="40" style="padding-left: 8.6%;">
+        <el-col :span="12">
           <el-form-item label="厚度:" style="flex-basis: 50%;" prop="phd">
-            <el-input ref="input3" v-model="form.phd" placeholder="请输入厚度" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(3,$event)" />
+            <el-input ref="input3" v-model="form.phd" placeholder="请输入厚度" :style="{ width: '400px', height: '30px' }" :maxlength="100" @keyup.enter.native="handelTab(3,$event)" />
           </el-form-item>
         </el-col>
-        <el-col :span="12" style="padding-left: 8.6%;">
-          <el-button type="primary" @click="handleConfirm">确认</el-button>
+        <el-col :span="12">
+          <el-form-item style="flex-basis: 50%;" >
+            <el-button ref="input4" type="primary" @click="handleConfirm">确认</el-button>
+          </el-form-item>
         </el-col>
       </el-row>
     </el-form>
-    <!--    <div class="mb12 font-small-bold" style="display: flex; padding-left: 12%;">设备入库列表</div>-->
-    <el-table border :data="tableData" style="width: 100%; ">
-      <el-table-column type="index" label="序号" width="80" />
+    <el-table border :data="tableData" style="width: 1250px; padding-left: 8.6%;">
+      <el-table-column type="index" label="序号" width="50px"/>
       <el-table-column label="pn" prop="businessId">
         <template slot-scope="scope">
           {{ scope.row.pn || '-' }}
@@ -43,7 +44,7 @@
           {{ scope.row.phd || '-' }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" class-name="small-padding fixed-width" width="180px">
+      <el-table-column label="操作" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -61,17 +62,23 @@
       </el-table-column>
     </el-table>
     <el-form ref="form" :model="form" :rules="rule" label-width="80px">
-      <el-row>
-        <el-col :span="12" style="padding-left: 8.6%;">
+      <el-row style="padding-left: 8.6%; padding-top: 1.5%">
+        <el-col :span="12">
           <el-form-item label="位置:" style="flex-basis: 50%;" prop="plocation">
-            <el-input v-model="form.plocation" placeholder="请输入位置" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(3,$event)" />
+            <el-input v-model="form.plocation" placeholder="请输入位置" :style="{ width: '400px', height: '30px' }" :maxlength="100" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-form label-width="80px">
+      <el-row style="padding-left: 8.6%; padding-top: 1%">
+        <el-col :span="12">
+          <el-form-item  style="flex-basis: 50%;" >
+            <el-button type="primary" @click="submitForm">提交</el-button>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
-    <div class="button">
-      <el-button type="primary" @click="submitForm">提交</el-button>
-    </div>
   </div>
 </template>
 
@@ -97,9 +104,18 @@ export default {
       showForm: false, // 控制表单显示与隐藏
       selectedItem: null, // 存储当前被选中的表格行数据
       rule: {
-        pn: [{ required: true, message: '请输入pn', trigger: 'blur' }],
-        lot: [{ required: true, message: '请输入lot', trigger: 'blur' }],
-        plocation: [{ required: true, message: '请输入位置', trigger: 'blur' }],
+        pn: [
+          { required: true, message: '请输入pn', trigger: 'blur' },
+          { max: 100, message: '输入长度不能超过100个字符', trigger: 'blur' }
+        ],
+        lot: [
+          { required: true, message: '请输入lot', trigger: 'blur' },
+          { max: 100, message: '输入长度不能超过100个字符', trigger: 'blur' }
+        ],
+        plocation: [
+          { required: true, message: '请输入位置', trigger: 'blur' },
+          { max: 100, message: '输入长度不能超过100个字符', trigger: 'blur' }
+        ],
         phd: [{ pattern: /^\d+$/, message: '仅能输入数字', trigger: 'change' }]
       }
     }
@@ -147,7 +163,6 @@ export default {
       const {
         pn,
         lot,
-        plocation,
         phd
       } = this.form
 
@@ -155,8 +170,7 @@ export default {
         const newRow = {
           pn,
           lot,
-          phd,
-          plocation
+          phd
         }
         if (this.form.index === undefined) {
           if (this.tableData.length) {
@@ -176,7 +190,6 @@ export default {
               this.form.pn = ''
               this.form.lot = ''
               this.form.phd = ''
-              this.form.plocation = ''
             }
           } else {
             this.tableData.push(newRow)
@@ -184,7 +197,6 @@ export default {
             this.form.pn = ''
             this.form.lot = ''
             this.form.phd = ''
-            this.form.plocation = ''
           }
         } else {
           let number = 0
@@ -246,23 +258,43 @@ export default {
     },
     // 提交时要调的接口
     submitForm() {
+      const {
+        pn,
+        lot,
+        phd,
+        plocation
+      } = this.form
+      if (this.tableData.length === 0) {
+        this.$message.warning('请先确定表格数据')
+        return
+      }
       this.$confirm('是否确认操作?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        const newRow = {
+          pn,
+          lot,
+          phd,
+          plocation
+        }
         this.$refs.form.validate((valid) => {
           if (valid) {
             console.log('form', this.form)
             this.tableData.forEach(item => {
               item.plocation = this.form.plocation
             })
-            console.log('tableData', this.tableData)
             add(this.tableData).then(res => {
               if (res.code === 200) {
                 this.open = false
                 this.$message.success('操作成功')
-                this.tableData = []
+                this.tableData.push(newRow)
+                // 清空输入框
+                this.form.pn = ''
+                this.form.lot = ''
+                this.form.phd = ''
+                this.from.plocation = ''
               } else if (res.code === null) {
                 this.$message.error(res.message)
               }