表单列表-表单规则校验

ruoyi-ui/src/components/updateModule/k-form-design/packages/components/KFormDesign/index.vue

@@ -492,6 +492,14 @@ export default {
     handleSave() {
       // 保存函数
       // console.log(this.data)
+      if(this.data.list.length == 0){
+        message.error("请拖拽组件");
+        return
+      }
+      if (!this.data.config.formName || !this.data.config.nickFormName){
+        message.error("请填写表单名称和表单别名");
+        return
+      }
       this.$emit("save", JSON.stringify(this.data));
     },
     getValue() {

ruoyi-ui/src/components/updateModule/k-form-design/packages/components/KFormDesign/module/formProperties.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="properties-centent kk-checkbox">
     <div class="properties-body">
-      <a-form>
+      <el-form :rules="rules" :model="config" ref="config" class="demo-ruleForm" >
         <!-- 新增的 start -->
-        <a-form-item label="表单名称">
-            <Input style="width:100%;" v-model="config.formName" />
-        </a-form-item>
-        <a-form-item label="表单别名">
-            <Input style="width:100%;" v-model="config.nickFormName" />
-        </a-form-item>
+        <el-form-item label="表单名称" prop="formName">
+            <el-input 
+              style="width:100%;" 
+              v-model="config.formName" />
+        </el-form-item>
+        <el-form-item label="表单别名" prop="nickFormName">
+            <el-input 
+              style="width:100%;" 
+              v-model="config.nickFormName" />
+        </el-form-item>
+
         <a-form-item label="绑定表名称(主表)">
             <!-- <Input style="width:100%;" v-model="config.mainTableName" /> -->
             <el-select v-model="config.mainTableName" placeholder="请选择实际操作表">
@@ -151,9 +156,10 @@
         <a-form-item label="提示">
           实际预览效果请点击预览查看
         </a-form-item>
-      </a-form>
+      </el-form>
     </div>
   </div>
+
 </template>
 <script>
 /*
@@ -179,6 +185,18 @@ export default {
     return {
       dragTableList: [],
       tableList:[],
+      // ruleForm: {
+      //   formname: '',
+      //   nickformname: '',
+      // },
+      rules: {
+        formName: [
+            { required: true, message: '请输入表单名称', trigger: 'blur' },
+          ],
+        nickFormName: [
+            { required: true, message: '请输入表单别名', trigger: 'blur' }
+          ],
+        }
     }
   },
   components: {