feat:op前端代码eslint修改&部分组件升级 TencentBlueKing#2568

* feat:op前端代码eslint修改&部分组件升级 TencentBlueKing#2568 * feat:op前端代码eslint修改&部分组件升级 TencentBlueKing#2568
scplsy · Sep 25, 2024 · a834a96 · a834a96
1 parent 323a847
commit a834a96
Show file tree

Hide file tree

Showing 26 changed files with 3,201 additions and 3,447 deletions.
diff --git a/src/frontend/devops-op/.eslintrc.js b/src/frontend/devops-op/.eslintrc.js
@@ -17,13 +17,23 @@ module.exports = {
     'vue/max-attributes-per-line': [2, {
       'singleline': 10,
       'multiline': {
-        'max': 1,
-        'allowFirstLine': false
+        'max': 1
       }
     }],
+    'vue/no-lone-template': ['error', {
+      'ignoreAccessible': true
+    }],
+    'vue/component-definition-name-casing': ['error', 'PascalCase'],
+    'vue/multi-word-component-names': 'off',
+    'vue/no-mutating-props': ['error', {
+      'shallowOnly': true
+    }],
+    'vue/first-attribute-linebreak': ['error', {
+      'singleline': 'ignore',
+      'multiline': 'below'
+    }],
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
-    'vue/name-property-casing': ['error', 'PascalCase'],
     'vue/no-v-html': 'off',
     'accessor-pairs': 2,
     'arrow-spacing': [2, {

diff --git a/src/frontend/devops-op/package.json b/src/frontend/devops-op/package.json
@@ -25,7 +25,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-browserify": "^1.0.1",
-    "path-to-regexp": "2.4.0",
+    "path-to-regexp": "8.0.0",
     "vue": "2.6.14",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
@@ -38,10 +38,11 @@
     "babel-plugin-dynamic-import-node": "2.3.3",
     "chalk": "2.4.2",
     "connect": "3.6.6",
+    "eslint-plugin-vue": "^9.28.0",
     "html-webpack-plugin": "^5.6.0",
-    "tasksfile": "^5.1.1",
     "serve-static": "1.13.2",
-    "svgo": "3.3.2"
+    "svgo": "3.3.2",
+    "tasksfile": "^5.1.1"
   },
   "browserslist": [
     "> 1%",

diff --git a/src/frontend/devops-op/src/icons/index.js b/src/frontend/devops-op/src/icons/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component
 
 // register globally
-Vue.component('svg-icon', SvgIcon)
+Vue.component('SvgIcon', SvgIcon)
 
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)

diff --git a/src/frontend/devops-op/src/views/ext-permission/components/PermissionDeleteDialog.vue b/src/frontend/devops-op/src/views/ext-permission/components/PermissionDeleteDialog.vue
@@ -1,26 +1,24 @@
 <template>
   <el-dialog v-loading="loading" title="删除权限" :visible.sync="showDialog" :before-close="close" width="700px">
-    <template>
-      <template v-if="!deleteResult">
-        <el-descriptions :column="3" border>
-          <el-descriptions-item label="项目Id" span="3">{{ permission.projectId }}</el-descriptions-item>
-          <el-descriptions-item label="仓库名" span="3">{{ permission.repoName }}</el-descriptions-item>
-          <el-descriptions-item label="url" span="3">{{ permission.url }}</el-descriptions-item>
-          <el-descriptions-item label="适用范围" span="3">{{ permission.scope }}</el-descriptions-item>
-          <el-descriptions-item label="是否启用" span="3">{{ permission.enabled }}</el-descriptions-item>
-        </el-descriptions>
-        <div slot="footer">
-          <el-button @click="close">取 消</el-button>
-          <el-button type="danger" @click="deletePermission">删除</el-button>
-        </div>
-      </template>
-      <el-result v-else :icon="resultIcon" :title="resultTitle">
-        <template slot="extra">
-          <el-divider />
-          <el-button type="primary" @click="close">返 回</el-button>
-        </template>
-      </el-result>
+    <template v-if="!deleteResult">
+      <el-descriptions :column="3" border>
+        <el-descriptions-item label="项目Id" span="3">{{ permission.projectId }}</el-descriptions-item>
+        <el-descriptions-item label="仓库名" span="3">{{ permission.repoName }}</el-descriptions-item>
+        <el-descriptions-item label="url" span="3">{{ permission.url }}</el-descriptions-item>
+        <el-descriptions-item label="适用范围" span="3">{{ permission.scope }}</el-descriptions-item>
+        <el-descriptions-item label="是否启用" span="3">{{ permission.enabled }}</el-descriptions-item>
+      </el-descriptions>
+      <div slot="footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="danger" @click="deletePermission">删除</el-button>
+      </div>
     </template>
+    <el-result v-else :icon="resultIcon" :title="resultTitle">
+      <template slot="extra">
+        <el-divider />
+        <el-button type="primary" @click="close">返 回</el-button>
+      </template>
+    </el-result>
   </el-dialog>
 </template>
 

diff --git a/src/frontend/devops-op/src/views/ext-permission/components/PermissionDetailDialog.vue b/src/frontend/devops-op/src/views/ext-permission/components/PermissionDetailDialog.vue
@@ -92,7 +92,6 @@ export default {
         this.permissionDetail.enabled
       )
       promise.then(() => {
-        this.permission = this.permissionDetail
         this.updateResult = true
         this.resultTitle = '更新成功'
         this.resultIcon = 'success'

diff --git a/src/frontend/devops-op/src/views/ext-permission/index.vue b/src/frontend/devops-op/src/views/ext-permission/index.vue
@@ -83,6 +83,10 @@ import PermissionDeleteDialog from '@/views/ext-permission/components/Permission
 export default {
   name: 'ExtPermission',
   components: { PermissionCreateDialog, PermissionDetailDialog, PermissionDeleteDialog },
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
   data() {
     return {
       loading: false,
@@ -113,10 +117,6 @@ export default {
   mounted() {
     this.onRouteUpdate(this.$route)
   },
-  beforeRouteUpdate(to, from, next) {
-    this.onRouteUpdate(to)
-    next()
-  },
   methods: {
     formatDate(date) {
       return formatDate(date)

diff --git a/src/frontend/devops-op/src/views/node/EmptyFolder.vue b/src/frontend/devops-op/src/views/node/EmptyFolder.vue
@@ -71,7 +71,11 @@ import { searchProjects } from '@/api/project'
 import { listRepositories } from '@/api/repository'
 
 export default {
-  name: 'Node',
+  name: 'EmptyFolder',
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
   data() {
     return {
       rules: {
@@ -94,10 +98,6 @@ export default {
   mounted() {
     this.onRouteUpdate(this.$route)
   },
-  beforeRouteUpdate(to, from, next) {
-    this.onRouteUpdate(to)
-    next()
-  },
   methods: {
     validateName(rule, value, callback) {
       this.regexValidate(value, /^[\w-]+$/, callback)

diff --git a/src/frontend/devops-op/src/views/node/FileSystem.vue b/src/frontend/devops-op/src/views/node/FileSystem.vue
@@ -126,6 +126,10 @@ import FileSystemStatusRecordDialog from '@/views/node/components/FileSystemStat
 export default {
   name: 'FileSystem',
   components: { FileSystemStatusRecordDialog },
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
   data() {
     return {
       loading: false,
@@ -158,10 +162,6 @@ export default {
   mounted() {
     this.onRouteUpdate(this.$route)
   },
-  beforeRouteUpdate(to, from, next) {
-    this.onRouteUpdate(to)
-    next()
-  },
   methods: {
     queryProjects(queryStr, cb) {
       searchProjects(queryStr).then(res => {

diff --git a/src/frontend/devops-op/src/views/node/FileSystemRecord.vue b/src/frontend/devops-op/src/views/node/FileSystemRecord.vue
@@ -87,7 +87,11 @@ import { formatNormalDate } from '@/utils/date'
 import moment from 'moment'
 
 export default {
-  name: 'FileSystem',
+  name: 'FileSystemRecord',
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
   data() {
     return {
       loading: false,
@@ -115,10 +119,6 @@ export default {
   mounted() {
     this.onRouteUpdate(this.$route)
   },
-  beforeRouteUpdate(to, from, next) {
-    this.onRouteUpdate(to)
-    next()
-  },
   methods: {
     queryProjects(queryStr, cb) {
       searchProjects(queryStr).then(res => {

diff --git a/src/frontend/devops-op/src/views/node/FirstLevelFolder.vue b/src/frontend/devops-op/src/views/node/FirstLevelFolder.vue
@@ -66,6 +66,10 @@ import { statisticalFirstLevelFolder } from '@/api/node'
 import { convertFileSize } from '@/utils/file'
 
 export default {
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
   data() {
     return {
       projectSelect: '',
@@ -88,10 +92,6 @@ export default {
   mounted() {
     this.onRouteUpdate(this.$route)
   },
-  beforeRouteUpdate(to, from, next) {
-    this.onRouteUpdate(to)
-    next()
-  },
   methods: {
     queryProjects(queryStr, cb) {
       searchProjects(queryStr).then(res => {

diff --git a/src/frontend/devops-op/src/views/node/ProjectMetrics.vue b/src/frontend/devops-op/src/views/node/ProjectMetrics.vue
@@ -108,6 +108,10 @@ import { searchProjects } from '@/api/project'
 
 export default {
   name: 'ProjectMetrics',
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
   data() {
     return {
       loading: true,
@@ -125,10 +129,6 @@ export default {
   mounted() {
     this.onRouteUpdate(this.$route)
   },
-  beforeRouteUpdate(to, from, next) {
-    this.onRouteUpdate(to)
-    next()
-  },
   methods: {
     queryProjects(queryStr, cb) {
       searchProjects(queryStr).then(res => {

diff --git a/src/frontend/devops-op/src/views/node/components/FileDeleteDialog.vue b/src/frontend/devops-op/src/views/node/components/FileDeleteDialog.vue
@@ -1,30 +1,28 @@
 <template>
   <el-dialog v-loading="loading" title="删除文件" :visible.sync="showDialog" :before-close="close" width="700px">
-    <template>
-      <template v-if="!deleteResult">
-        <el-descriptions :column="3" border>
-          <el-descriptions-item label="文件名" span="3">{{ node.name }}</el-descriptions-item>
-          <el-descriptions-item label="路径" span="3">{{ node.fullPath }}</el-descriptions-item>
-        </el-descriptions>
-        <div slot="footer">
-          <el-button @click="close">取 消</el-button>
-          <el-button type="danger" @click="deleteNode">删除</el-button>
-        </div>
-      </template>
-      <el-result v-else :icon="resultIcon" :title="resultTitle">
-        <template slot="extra">
-          <template v-if="resultIcon === 'success'">
-            <span>删除 </span>
-            <el-tag type="success">{{ deleteResult.deletedNumber }}</el-tag>
-            <span> 个文件，</span>
-            <span>总大小 </span>
-            <el-tag type="success">{{ fileSize(deleteResult.deletedSize) }}</el-tag>
-          </template>
-          <el-divider />
-          <el-button type="primary" @click="close">返 回</el-button>
-        </template>
-      </el-result>
+    <template v-if="!deleteResult">
+      <el-descriptions :column="3" border>
+        <el-descriptions-item label="文件名" span="3">{{ node.name }}</el-descriptions-item>
+        <el-descriptions-item label="路径" span="3">{{ node.fullPath }}</el-descriptions-item>
+      </el-descriptions>
+      <div slot="footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="danger" @click="deleteNode">删除</el-button>
+      </div>
     </template>
+    <el-result v-else :icon="resultIcon" :title="resultTitle">
+      <template slot="extra">
+        <template v-if="resultIcon === 'success'">
+          <span>删除 </span>
+          <el-tag type="success">{{ deleteResult.deletedNumber }}</el-tag>
+          <span> 个文件，</span>
+          <span>总大小 </span>
+          <el-tag type="success">{{ fileSize(deleteResult.deletedSize) }}</el-tag>
+        </template>
+        <el-divider />
+        <el-button type="primary" @click="close">返 回</el-button>
+      </template>
+    </el-result>
   </el-dialog>
 </template>
 

diff --git a/src/frontend/devops-op/src/views/node/components/FileRestoreDialog.vue b/src/frontend/devops-op/src/views/node/components/FileRestoreDialog.vue
@@ -1,35 +1,33 @@
 <template>
   <el-dialog v-loading="loading" title="恢复文件" :visible.sync="showDialog" :before-close="close" width="700px">
-    <template>
-      <template v-if="!restoreResult">
-        <el-descriptions :column="3" border>
-          <el-descriptions-item label="文件名" span="3">{{ node.name }}</el-descriptions-item>
-          <el-descriptions-item label="路径" span="3">{{ node.fullPath }}</el-descriptions-item>
-          <el-descriptions-item label="删除日期">{{ formatDate(node.deleted) }}</el-descriptions-item>
-        </el-descriptions>
-        <div slot="footer">
-          <el-button @click="close">取 消</el-button>
-          <el-button type="primary" @click="restore">开始恢复</el-button>
-        </div>
-      </template>
-      <el-result v-else :icon="resultIcon" :title="resultTitle">
-        <template slot="extra">
-          <template v-if="resultIcon === 'success'">
-            <span>恢复 </span>
-            <el-tag type="success">{{ restoreResult.restoreCount }}</el-tag>
-            <span> 个文件，</span>
-            <span>跳过 </span>
-            <el-tag type="info">{{ restoreResult.skipCount }}</el-tag>
-            <span> 个文件，</span>
-            <span>覆盖 </span>
-            <el-tag type="warning">{{ restoreResult.conflictCount }}</el-tag>
-            <span> 个文件</span>
-          </template>
-          <el-divider />
-          <el-button type="primary" @click="close">返 回</el-button>
-        </template>
-      </el-result>
+    <template v-if="!restoreResult">
+      <el-descriptions :column="3" border>
+        <el-descriptions-item label="文件名" span="3">{{ node.name }}</el-descriptions-item>
+        <el-descriptions-item label="路径" span="3">{{ node.fullPath }}</el-descriptions-item>
+        <el-descriptions-item label="删除日期">{{ formatDate(node.deleted) }}</el-descriptions-item>
+      </el-descriptions>
+      <div slot="footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="restore">开始恢复</el-button>
+      </div>
     </template>
+    <el-result v-else :icon="resultIcon" :title="resultTitle">
+      <template slot="extra">
+        <template v-if="resultIcon === 'success'">
+          <span>恢复 </span>
+          <el-tag type="success">{{ restoreResult.restoreCount }}</el-tag>
+          <span> 个文件，</span>
+          <span>跳过 </span>
+          <el-tag type="info">{{ restoreResult.skipCount }}</el-tag>
+          <span> 个文件，</span>
+          <span>覆盖 </span>
+          <el-tag type="warning">{{ restoreResult.conflictCount }}</el-tag>
+          <span> 个文件</span>
+        </template>
+        <el-divider />
+        <el-button type="primary" @click="close">返 回</el-button>
+      </template>
+    </el-result>
   </el-dialog>
 </template>
 

diff --git a/src/frontend/devops-op/src/views/node/components/FileScanDialog.vue b/src/frontend/devops-op/src/views/node/components/FileScanDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog title="创建扫描任务" :visible.sync="showDialog" :before-close="close" width="700px">
-    <template v-loading="loading">
+    <div v-loading="loading">
       <el-select
         v-model="selectedScanner"
         placeholder="请选择使用的扫描器"
@@ -11,7 +11,7 @@
         <el-button @click="close">取 消</el-button>
         <el-button type="primary" :disabled="!selectedScanner" @click="doScan">确 定</el-button>
       </div>
-    </template>
+    </div>
   </el-dialog>
 </template>