数据建模校验规则补充

ruoyi-ui/src/views/system/processModeling/flow-x6/graph/index.js

@@ -1,6 +1,6 @@
-import {Graph, Addon, FunctionExt, Shape,Dom} from '@antv/x6'
+import { Graph, Addon, FunctionExt, Shape, Dom } from '@antv/x6'
 import './shape'
-import { customPorts ,basicPorts} from './ports'
+import { customPorts, basicPorts } from './ports'
 // import { getImg } from '../../../utils'
 import graphData from './data/data'
 import { translate } from '@antv/x6/lib/util/dom/transform'
@@ -115,10 +115,10 @@ export default class FlowGraph {
                 },
                 targetMarker: {
                   "name": "classic",//这个是三角样式
-                  "size": 8 ,//三角形的大小    
-                  'stroke': 'rgba(95,149,255)', 
+                  "size": 8,//三角形的大小    
+                  'stroke': 'rgba(95,149,255)',
                 }, // 去掉箭头
-                
+
               },
               outline: {
                 stroke: 'rgba(95,149,255)',
@@ -202,7 +202,7 @@ export default class FlowGraph {
         },
       },
     })
-    if(!flag) {
+    if (!flag) {
       // this.graph.centerContent()
       this.graph.hideGrid() // 返显渲染的时候 隐藏网格
       return this.graph
@@ -218,7 +218,7 @@ export default class FlowGraph {
     this.stencil = new Addon.Stencil({
       target: this.graph,
       stencilGraphWidth: 280,
-      search: { rect: true ,ellipse:true,polygon:true,},
+      search: { rect: true, ellipse: true, polygon: true, },
       collapsable: true,
       groups: [
         {
@@ -226,9 +226,9 @@ export default class FlowGraph {
           title: '基础节点',
           graphHeight: 280,
           layoutOptions: {
-                columns: 1,
-                marginX: 8,
-              },
+            columns: 1,
+            marginX: 8,
+          },
         },
         // {  
         //   name: 'custom-image',
@@ -263,28 +263,26 @@ export default class FlowGraph {
     const { graph } = this
     // 基础节点
     const r1 = graph.createNode({
-      
       shape: 'flow-chart-rect',
-      width:60,
-      height:40,
+      width: 60,
+      height: 40,
       attrs: {
         body: {
           rx: 24,
           ry: 24,
           stroke: '#07448a',
-          
+
         },
         text: {
           text: '开始',
-          
         },
-  
+
       },
     })
     const r2 = graph.createNode({
       shape: 'flow-chart-rect',
-      width:58,
-      height:38,
+      width: 58,
+      height: 38,
       attrs: {
         text: {
           text: '流程',
@@ -307,7 +305,7 @@ export default class FlowGraph {
         body: {
           stroke: '#07448a',  // 边框颜色
         },
-        
+
         'edit-text': {
           style: {
             transform: 'rotate(-45deg)',
@@ -358,7 +356,7 @@ export default class FlowGraph {
     const r4 = graph.createNode({
       shape: 'flow-chart-rect',
       width: 56,
-      height:56,
+      height: 56,
       attrs: {
         body: {
           rx: 35,
@@ -372,8 +370,8 @@ export default class FlowGraph {
     })
     const r5 = graph.createNode({
       shape: 'polygon',
-      width:57,
-      height:47,
+      width: 57,
+      height: 47,
 
       attrs: {
         // style: {
@@ -383,12 +381,12 @@ export default class FlowGraph {
           refPoints: '10,0 40,0 30,20 0,20',
           stroke: '#07448a',  // 边框颜色
           strokeWidth: 1,
-          width:50,
-          height:40,
+          width: 50,
+          height: 40,
           fill: '#fff', // 填充颜色
-          transform:'skewX(-30deg)',
+          transform: 'skewX(-30deg)',
           refX: 15,
-          
+
         },
         fo: {
           refWidth: '100%',
@@ -463,7 +461,7 @@ export default class FlowGraph {
                 visibility: 'hidden',
               },
               circle: {
-                r:4,
+                r: 4,
                 magnet: true,
                 stroke: '#5F95FF',
                 strokeWidth: 1,
@@ -642,7 +640,7 @@ export default class FlowGraph {
                 fill: '#fff',
               },
             },
-           
+
           },
           on: {
             position: 'left',
@@ -651,7 +649,7 @@ export default class FlowGraph {
                 visibility: 'hidden',
               },
               circle: {
-                r:4,
+                r: 4,
                 magnet: true,
                 stroke: '#5F95FF',
                 strokeWidth: 1,
@@ -660,7 +658,7 @@ export default class FlowGraph {
             },
           },
           un: {
-            position: 'right', 
+            position: 'right',
             attrs: {
               style: {
                 visibility: 'hidden',
@@ -750,7 +748,7 @@ export default class FlowGraph {
         },
       ],
     })
-// 这里创新新的节点+++++++++++++
+    // 这里创新新的节点+++++++++++++
 
 
 
@@ -840,7 +838,7 @@ export default class FlowGraph {
     //     ports: { ...customPorts }
     //   })
     // })
-    this.stencil.load([r1, r2, r3, r4,r5,], 'basic')
+    this.stencil.load([r1, r2, r3, r4, r5,], 'basic')
     // 这里需要注入新增节点，+++++++++++++++++
 
 
@@ -862,7 +860,7 @@ export default class FlowGraph {
     }
   }
 
-  
+
   // 事件相关
   // 这里就是节点的所有事件！
   // 里面有注释，你可以看看！那整个抽屉的话是node:click?是的
@@ -883,7 +881,7 @@ export default class FlowGraph {
         cell.attr('text/text', elem.innerText)
         // cell.attr('text/style/display', 'inline-block')
       }
-      if(elem){
+      if (elem) {
         elem.addEventListener('blur', () => {
           onBlur()
           elem.removeEventListener('blur', onBlur)

ruoyi-ui/src/views/tool/datasheet/index.vue

@@ -82,6 +82,12 @@
                 <el-input
                   v-model="scope.row.fieldLength"
                   :disabled="changduclick(scope.$index)"
+                  @input="
+                    scope.row.fieldLength = scope.row.fieldLength.replace(
+                      /^(0+)|[^\d]+/g,
+                      ''
+                    )
+                  "
                 ></el-input>
               </el-form-item>
             </template>
@@ -334,6 +340,35 @@ export default {
         aa.row.fieldType = undefined;
       }
     },
+    //判断一个字符串是否只包含数字、下划线和小写字母
+    isValidString(str) {
+      const regex = /^[a-z0-9_]+$/;
+      return regex.test(str);
+    },
+    // 字段名规则校验
+    checkFieldName(rule, value, callback) {
+      let msg = "";
+      if (!value.trim().length) {
+        msg = "请输入字段名称";
+        this.$message.error(msg);
+        callback(new Error(msg));
+      } else if (value[0] == "_") {
+        msg = "请不要以下划线开头";
+        this.$message.error(msg);
+        callback(new Error(msg));
+      } else if (!isNaN(value[0])) {
+        msg = "请不要以数字开头";
+        this.$message.error(msg);
+        callback(new Error(msg));
+      } else if (!this.isValidString(value)) {
+        msg = "字段名应该只有下划线,数字和小写字母";
+        this.$message.error(msg);
+        callback(new Error(msg));
+      } else {
+        callback();
+      }
+    },
+    //
 
     // 处理非空校验问题
     handleRules(type, delindex) {
@@ -341,11 +376,17 @@ export default {
         let rulesAdd = {};
         // 得到添加一行的下标
         let index = this.experienceData.length - 1;
-        rulesAdd["fieldName" + index] = {
-          required: true,
-          message: "请输入字段名称",
-          trigger: "blur",
-        };
+        rulesAdd["fieldName" + index] = [
+          {
+            required: true,
+            message: "请输入字段名称",
+            trigger: "blur",
+          },
+          {
+            validator: this.checkFieldName,
+            trigger: "blur",
+          },
+        ];
         rulesAdd["fieldType" + index] = {
           required: true,
           message: "请选择",