卷宗新增

src/views/xsspPt/jzLb/queryJzlb.vue

@@ -25,42 +25,54 @@
     <el-dialog title="新增卷宗" :visible.sync="dialogFormVisible">
       <el-tabs type="border-card">
         <el-tab-pane label="自动录入">
-          <el-form :model="form">
-            <el-form-item label="活动名称" :label-width="formLabelWidth">
-              <el-input v-model="form.name" autocomplete="off"></el-input>
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="100px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="活动名称:" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-            <el-form-item label="活动区域" :label-width="formLabelWidth">
-              <el-select v-model="form.region" placeholder="请选择活动区域">
+            <el-form-item label="活动区域:" prop="region">
+              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                 <el-option label="区域一" value="shanghai"></el-option>
                 <el-option label="区域二" value="beijing"></el-option>
               </el-select>
             </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >立即创建</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">重置</el-button>
+            </el-form-item>
           </el-form>
-          <div class="dialog-footer">
-            <el-button @click="dialogFormVisible = false">取 消</el-button>
-            <el-button type="primary" @click="dialogFormVisible = false"
-              >确 定</el-button
-            >
-          </div>
         </el-tab-pane>
         <el-tab-pane label="手动录入">
-          <el-form :model="form">
-            <el-form-item label="活动名称" :label-width="formLabelWidth">
-              <el-input v-model="form.name" autocomplete="off"></el-input>
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="100px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="活动名称" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-            <el-form-item label="活动区域" :label-width="formLabelWidth">
-              <el-select v-model="form.region" placeholder="请选择活动区域">
+            <el-form-item label="活动区域" prop="region">
+              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                 <el-option label="区域一" value="shanghai"></el-option>
                 <el-option label="区域二" value="beijing"></el-option>
               </el-select>
             </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >立即创建</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">重置</el-button>
+            </el-form-item>
           </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button @click="dialogFormVisible = false">取 消</el-button>
-            <el-button type="primary" @click="dialogFormVisible = false"
-              >确 定</el-button
-            >
-          </div>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
@@ -77,9 +89,18 @@ export default {
   },
   data() {
     return {
+      rules: {
+        name: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+      },
       dialogFormVisible: false,
       formLabelWidth: "120px",
-      form: {
+      ruleForm: {
         region: "",
         name: "",
       },
@@ -271,7 +292,6 @@ export default {
 };
 </script>
 <style>
-
 .rightContent .el-input__inner,
 #formCommonPage .el-input__inner {
   height: 32px;
@@ -316,10 +336,17 @@ export default {
 }
 </style>
 <style scoped lang="scss">
-.el-form-item {
+/deep/.el-form-item {
   margin: 15px 0 20px 0;
+  width: 698px !important;
+  .el-form-item__content {
+    line-height: 40px;
+    position: relative;
+    font-size: 14px;
+    width: 219px;
+  }
 }
-/deep/.el-dialog__body {
+/deep/ .el-dialog__body {
   padding: 0px 0px !important;
 }
 .red {