fix: 前端eslint代码规范 #12

# Reviewed, transaction id: 17922

frontend/src/components/ProcessCanvas/components/dnd/index.vue

@@ -11,8 +11,7 @@
           node.id === 'group' ? 'group-node' : `common-icon-node-${node.icon}`,
           { disabled: ['start', 'end'].includes(node.id) },
         ]"
-        :data-type="node.id">
-      </li>
+        :data-type="node.id" />
     </ul>
   </div>
 </template>

frontend/src/components/ProcessCanvas/components/shortcutPanel.vue

@@ -101,19 +101,19 @@
         startNode: state => state.template.start_event,
         endNode: state => state.template.end_event,
       }),
-      nodeTypeList () {
+      nodeTypeList() {
         const list = [
           { key: 'tasknode', id: 'task', tips: this.$t('标准插件节点') },
           // { key: 'subflow', id: 'subflow', tips: '子流程节点' },
           { key: 'branchgateway', id: 'branch-gateway', tips: this.$t('分支网关') },
           { key: 'parallelgateway', id: 'parallel-gateway', tips: this.$t('并行网关') },
           { key: 'conditionalparallelgateway', id: 'conditional-parallel-gateway', tips: this.$t('条件并行网关') },
           { key: 'convergegateway', id: 'converge-gateway', tips: this.$t('汇聚网关') },
-        ]
+        ];
         if (this.activeCell.data.type === 'parallel-gateway') {
-          return list.filter(item => item.id !== 'converge-gateway')
+          return list.filter(item => item.id !== 'converge-gateway');
         }
-        return list
+        return list;
       },
       branchConditions() {
         const branchConditions = {};
@@ -234,7 +234,7 @@
           });
         } else if (specialType.indexOf(currLoc.type) > -1 && isHaveNodeBehind) {
           // 如果网管分支已有输出连线则后续连线输出端点都由bottom出发
-          edges[0].source.port = 'port_bottom'
+          edges[0].source.port = 'port_bottom';
           // 拿到并行中最靠下的节点
           const { x: parallelX, y: parallelY } = this.getParallelNodeMinDistance(id);
           location.y = parallelY + 100;

frontend/src/components/ProcessCanvas/index.vue

@@ -1006,17 +1006,16 @@
           if (branchInfo && Object.keys(branchInfo).length > 0) {
             const conditionInfo = cell.data?.conditionInfo || branchInfo[cell.id] || {};
             if (!Object.keys(conditionInfo).length) return;
-            const { width: edgeWidth } = cell.getBBox()
             const textDom = document.createElement('span');
             textDom.innerText = conditionInfo.name;
             textDom.style.fontSize = '12px';
             textDom.style.padding = '0 6px';
             document.body.appendChild(textDom);
             let { width = 0 } = textDom.getBoundingClientRect();
-            width = width > 60 ? width : 60
+            width = width > 60 ? width : 60;
             width = width > 112 ? 112 : width;
             document.body.removeChild(textDom);
-            const distance = conditionInfo.loc || (-width/2 - 20)
+            const distance = conditionInfo.loc || (-width / 2 - 20);
             cell.appendLabel({
               markup: Markup.getForeignObjectMarkup(),
               attrs: {
@@ -1035,9 +1034,9 @@
               position: {
                 distance,
                 offset: {
-                  x: width/2,
+                  x: width / 2,
                   y: 0,
-                }
+                },
               },
             });
           }
@@ -1065,22 +1064,22 @@
         return branchConditions;
       },
       // 标签拖拽
-      handleLabelDrag ({ edge, current, previous }) {
-        if (!previous || !previous.length || !current.length) return
+      handleLabelDrag({ edge, current, previous }) {
+        if (!previous || !previous.length || !current.length) return;
         // 边的长度
-        const svgPath = this.getNodeElement(`.${edge.id}`)
-        const edgeLength = svgPath.getTotalLength()
+        const svgPath = this.getNodeElement(`.${edge.id}`);
+        const edgeLength = svgPath.getTotalLength();
         current.forEach((item) => {
-          const { width } = item.attrs.fo
+          const { width } = item.attrs.fo;
           item.position.offset = {
             x: width / 2,
-            y: 0
+            y: 0,
           };
           // 限制label.position.distance的值在min到max之间
-          const min = (width / 2 + 20) / edgeLength
-          const max = 1 - min
-          const distance = Math.max(min, Math.min(max, item.position.distance))
-          item.position.distance = distance
+          const min = (width / 2 + 20) / edgeLength;
+          const max = 1 - min;
+          const distance = Math.max(min, Math.min(max, item.position.distance));
+          item.position.distance = distance;
           // 更新本地condition配置
           const condition = {
             ...item.label,
@@ -1177,7 +1176,7 @@
         const canvasDom = this.getNodeElement();
         const { left: canvasLeft, top: canvasTop } = canvasDom.getBoundingClientRect();
         // dnd侧栏宽度
-        const dndWidth = this.showPalette ? 60 : 0
+        const dndWidth = this.showPalette ? 60 : 0;
         // 200节点的气泡卡片展示最小宽度
         const bodyWidth = document.body.offsetWidth;
         const isRight = bodyWidth - nodeRight > 200;
@@ -1262,7 +1261,7 @@
             svgCloneDom.style.width = `${canvasWidth}px`;
             svgCloneDom.style.height = `${canvasHeight}px`;
             const viewCloneDom = clone.querySelector('.x6-graph-svg-viewport');
-            viewCloneDom.style.transform = `translate(${offsetX + 30 + 'px'}, ${offsetY + 30 + 'px'})`;
+            viewCloneDom.style.transform = `translate(${`${offsetX + 30}px`}, ${`${offsetY + 30}px`})`;
           },
         });
       },

frontend/src/components/VerticalCanvas/components/shortcutPanel.vue

@@ -76,19 +76,19 @@
         startNode: state => state.template.start_event,
         endNode: state => state.template.end_event,
       }),
-      nodeTypeList () {
+      nodeTypeList() {
         const list = [
           { key: 'tasknode', id: 'task', tips: this.$t('标准插件节点') },
           // { key: 'subflow', id: 'subflow', tips: '子流程节点' },
           { key: 'branchgateway', id: 'branch-gateway', tips: this.$t('分支网关') },
           { key: 'parallelgateway', id: 'parallel-gateway', tips: this.$t('并行网关') },
           { key: 'conditionalparallelgateway', id: 'conditional-parallel-gateway', tips: this.$t('条件并行网关') },
           { key: 'convergegateway', id: 'converge-gateway', tips: this.$t('汇聚网关') },
-        ]
+        ];
         if (this.activeCell.data.type === 'parallel-gateway') {
-          return list.filter(item => item.id !== 'converge-gateway')
+          return list.filter(item => item.id !== 'converge-gateway');
         }
-        return list
+        return list;
       },
       branchConditions() {
         const branchConditions = {};

frontend/src/components/VerticalCanvas/index.vue

@@ -807,7 +807,7 @@
             svgCloneDom.style.width = `${canvasWidth}px`;
             svgCloneDom.style.height = `${canvasHeight}px`;
             const viewCloneDom = clone.querySelector('.x6-graph-svg-viewport');
-            viewCloneDom.style.transform = `translate(${offsetX + 30 + 'px'}, ${offsetY + 30 + 'px'})`;
+            viewCloneDom.style.transform = `translate(${`${offsetX + 30}px`}, ${`${offsetY + 30}px`})`;
           },
         });
       },

frontend/src/components/layout/NavigationHeadRight.vue

@@ -52,15 +52,15 @@
     </div>
     <!-- 用户icon -->
     <div
-      class="user-avatar"
       v-bk-tooltips="{
         ...basicTipsConfig,
         distance: 25,
         extCls: 'logout-tips',
         content: '#logout-html'
-      }">
+      }"
+      class="user-avatar">
       {{ username }}
-      <i class="bk-icon icon-down-shape"></i>
+      <i class="bk-icon icon-down-shape" />
     </div>
     <div id="logout-html">
       <div

frontend/src/config/i18n/cn.js

@@ -530,23 +530,23 @@ const cn = {
   分支类型: '分支类型',
   自定义分支: '自定义分支',
   默认分支: '默认分支',
-  '支持 "=、!=、>、>=、<、<=" 等二元比较操作符': '支持 "=、!=、>、>=、<、<=" 等二元比较操作符',
+  feelOperates: '支持 "=、!=、>、>=、<、<=" 等二元比较操作符',
   '支持 "and、or、true、false" 等关键字语法': '支持 "and、or、true、false" 等关键字语法',
   '支持 FEEL (Friendly Enough Expression Language) 基础语法': '支持 FEEL (Friendly Enough Expression Language) 基础语法',
   '支持使用全局变量，如': '支持使用全局变量，如',
   '${}中支持使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量': '${}中支持使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量',
-  "因 MAKO 语法限制：请勿使用 '$', '{' 和 '}' 字符": "因 MAKO 语法限制：请勿使用 '$', '{' 和 '}' 字符",
+  '因 MAKO 语法限制：请勿使用 \'$\', \'{\' 和 \'}\' 字符': '因 MAKO 语法限制：请勿使用 \'$\', \'{\' 和 \'}\' 字符',
   '示例：': '示例：',
   '字符串比较：': '字符串比较：',
   '数值比较：': '数值比较：',
   '包含：': '包含：',
-  '支持 "==、!=、>、>=、<、<=、in、notin" 等二元比较操作符': '支持 "==、!=、>、>=、<、<=、in、notin" 等二元比较操作符',
+  makoOperates: '支持 "==、!=、>、>=、<、<=、in、notin" 等二元比较操作符',
   '支持 "and、or、True/true、False/false" 等关键字语法': '支持 "and、or、True/true、False/false" 等关键字语法',
   表达式更多细节请参考: '表达式更多细节请参考',
   '支持使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量': '支持使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量',
   '假设 key 是值为 "3" 的全局变量': '假设 key 是值为 "3" 的全局变量',
   '使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量': '使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量',
-  '支持直接引用全局变量': '支持直接引用全局变量',
+  支持直接引用全局变量: '支持直接引用全局变量',
   '支持 "and、or、not、True、False" 等 MAKO 关键字语法': '支持 "and、or、not、True、False" 等 MAKO 关键字语法',
   '所有分支均不匹配时执行，类似switch-case-default里面的default': '所有分支均不匹配时执行，类似switch-case-default里面的default',
   任务执行信息: '任务执行信息',

frontend/src/config/i18n/en.js

@@ -530,24 +530,24 @@ const en = {
   分支类型: 'Branch Type',
   自定义分支: 'Custom Branch',
   默认分支: 'Default Branch',
-  '支持 "=、!=、>、>=、<、<=" 等二元比较操作符': 'Supports binary comparison operators such as =, !=, >, >=, <, <=',
+  feelOperates: 'Supports binary comparison operators such as =, !=, >, >=, <, <=',
   '支持 "and、or、true、false" 等关键字语法': 'Supports keywords such as and, or, true, false',
   '支持 FEEL (Friendly Enough Expression Language) 基础语法': 'Supports basic FEEL (Friendly Enough Expression Language) syntax',
   '支持使用全局变量，如': 'Supports using global variables, such as',
   '${}中支持使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量': 'support using built-in functions, datetime, re, hashlib, random, time, os in ${}',
-  "因 MAKO 语法限制：请勿使用 '$', '{' 和 '}' 字符": "Due to MAKO syntax limitations: please do not use the characters '$', '{', and '}'",
+  '因 MAKO 语法限制：请勿使用 \'$\', \'{\' 和 \'}\' 字符': 'Due to MAKO syntax limitations: please do not use the characters \'$\', \'{\', and \'}\'',
   '示例：': 'Example:',
   '字符串比较：': 'String Comparison:',
   '数值比较：': 'Numerical Comparison:',
   '包含：': 'Contains:',
-  '支持 "==、!=、>、>=、<、<=、in、notin" 等二元比较操作符': 'Supports binary comparison operators such as ==, !=, >, >=, <, <=, in, notin',
+  makoOperates: 'Supports binary comparison operators such as ==, !=, >, >=, <, <=, in, notin',
   '支持 "and、or、True/true、False/false" 等关键字语法': 'Supports keywords such as and, or, True/true, False/false',
   表达式更多细节请参考: 'For more details on expressions, please refer to',
   '支持使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量': 'support using built-in functions, datetime, re, hashlib, random, time, os',
-  '假设 key 是值为 "3" 的全局变量': "Assume key is a global variable with a value of '3'",
+  '假设 key 是值为 "3" 的全局变量': 'Assume key is a global variable with a value of \'3\'',
   '使用内置函数、datetime、re、hashlib、random、time、os.path模块处理全局变量': 'Support using built-in functions, datetime, re, hashlib, random, time, os',
   '支持 "and、or、not、True、False" 等 MAKO 关键字语法': 'Supports MAKO keywords such as and, or, not, True, False',
-  '支持直接引用全局变量': 'Support Direct Reference to Global Variables',
+  支持直接引用全局变量: 'Support Direct Reference to Global Variables',
   '所有分支均不匹配时执行，类似switch-case-default里面的default': 'Executed when no branches match, similar to default in switch-case-default',
   任务执行信息: 'Task Execution Information',
   '存在子流程节点执行失败，可从节点执行记录去往子任务处理，并及时': 'Subprocess node execution failed, can go to the subtask from the node execution records and promptly',

frontend/src/main.js

@@ -215,7 +215,7 @@ Validator.localize({
         regex: i18n.t('请输入 test 之间的数'),
       },
       expression: {
-        regex: i18n.t("因 MAKO 语法限制：请勿使用 '$', '{' 和 '}' 字符"),
+        regex: i18n.t('因 MAKO 语法限制：请勿使用 \'$\', \'{\' 和 \'}\' 字符'),
       },
     },
   },

frontend/src/store/modules/template.js

@@ -589,7 +589,7 @@ const template = {
                   evaluate = Object.keys(conditions).length ? '1 == 0' : '1 == 1';
                 }
                 if (line.parseLang === 'MAKO') {
-                  evaluate = `\${${evaluate}}`
+                  evaluate = `\${${evaluate}}`;
                 }
                 const defaultName = i18n.t('条件');
                 const regStr = `^${i18n.t('条件')}[0-9]*$`;
@@ -803,9 +803,12 @@ const template = {
           if (location.type === 'branchgateway' || location.type === 'conditionalparallelgateway') {
             state.gateways[location.id].conditions = {};
             // 网关分支表达式解析类型字段
-            let { parseLang } = location
-            const oldGatewayInfo = state.gateways[location.oldSouceId]
-            parseLang = oldGatewayInfo ? oldGatewayInfo.extra_info?.parse_lang : parseLang
+            let { parseLang } = location;
+            const oldGatewayInfo = state.gateways[location.oldSouceId];
+            if (oldGatewayInfo) {
+              const { parse_lang: oldParseLang } = oldGatewayInfo.extra_info || {};
+              parseLang = oldParseLang;
+            }
             if (['FEEL', 'MAKO'].includes(parseLang)) {
               state.gateways[location.id].extra_info = { parse_lang: parseLang };
             }

frontend/src/views/task/TaskExecute/TaskOperationHeader.vue

@@ -37,14 +37,13 @@
       </div>
       <router-link
         v-if="isShowViewProcess"
-        class="common-icon-jump-link"
         v-bk-tooltips="{
           content: $t('查看流程'),
           placements: ['top']
         }"
+        class="common-icon-jump-link"
         :target="isIframe ? '_self' : '_blank'"
-        :to="`/template/view/${templateId}/`">
-      </router-link>
+        :to="`/template/view/${templateId}/`" />
       <span
         v-if="stateStr"
         :class="['task-state', state]">{{ stateStr }}</span>

frontend/src/views/task/TaskExecute/taskCondition.vue

@@ -41,8 +41,7 @@
         </label>
         <div class="code-wrapper">
           <condition-expression
-            :parse-lang="gwConfig.extra_info && gwConfig.extra_info.parse_lang">
-          </condition-expression>
+            :parse-lang="gwConfig.extra_info && gwConfig.extra_info.parse_lang" />
           <full-code-editor
             v-validate="expressionRule"
             name="expression"
@@ -99,7 +98,7 @@
       if (defaultCondition && defaultCondition.flow_id !== id) {
         hasDefaultBranch = true;
       }
-      const expression = this.toggleExpressionFormat(value)
+      const expression = this.toggleExpressionFormat(value);
       return {
         gwConfig,
         branchType, // 当前分支类型
@@ -146,13 +145,14 @@
       },
       toggleExpressionFormat(str, slice = true) {
         const gwConfig = this.gateways[this.conditionData.nodeId];
-        if (gwConfig.extra_info?.parse_lang !== 'MAKO') {
-          return str
+        const { parse_lang: parseLang } = gwConfig.extra_info || {};
+        if (parseLang !== 'MAKO') {
+          return str;
         }
         if (slice) {
-          return /^\${.+\}$/.test(str) ? str.slice(2, -1) : str
+          return /^\${.+\}$/.test(str) ? str.slice(2, -1) : str;
         }
-        return `\${${str}}`
+        return `\${${str}}`;
       },
     },
   };

frontend/src/views/template/TemplateEdit/ConditionEdit.vue

@@ -78,8 +78,7 @@
           </label>
           <div class="code-wrapper">
             <condition-expression
-              :parse-lang="gwConfig.extra_info && gwConfig.extra_info.parse_lang">
-            </condition-expression>
+              :parse-lang="gwConfig.extra_info && gwConfig.extra_info.parse_lang" />
             <full-code-editor
               v-validate="expressionRule"
               name="expression"
@@ -188,7 +187,8 @@
       },
       expressionRule() {
         const rule = { required: true };
-        if (this.gwConfig.extra_info?.parse_lang === 'MAKO') {
+        const { parse_lang: parseLang } = this.gwConfig.extra_info || {};
+        if (parseLang === 'MAKO') {
           rule.regex = /^[^\$\{\}]*$/;
         }
         return rule;
@@ -219,7 +219,8 @@
       },
       toggleExpressionFormat(str, slice = true) {
         const gwConfig = this.gateways[this.conditionData.nodeId];
-        if (gwConfig.extra_info?.parse_lang !== 'MAKO') {
+        const { parse_lang: parseLang } = gwConfig.extra_info || {};
+        if (parseLang !== 'MAKO') {
           return str;
         }
         if (slice) {

frontend/src/views/template/TemplateEdit/NodeConfig/JsonschemaInputParams.vue

@@ -98,23 +98,6 @@
           }
         });
       },
-      setDisabledProps (properties) {
-        Object.keys(properties).forEach(form => {
-          const component = properties[form]['ui:component']
-          if (!component) {
-            properties[form]['ui:component'] = {
-              props: { disabled: true }
-            }
-          } else if ('props' in component) {
-            component.props.disabled = true
-          } else {
-            component.props = { disabled: true }
-          }
-          if (properties[form].items?.properties) {
-            this.setDisabledProps(properties[form].items?.properties)
-          }
-        })
-      },
     },
   };
 </script>