Merge pull request #5212 from jumpserver/dev

v4.10.8-lts

.eslintrc.js

@@ -294,8 +294,7 @@ module.exports = {
         ],
         skipIfMatch: [
           'http://[^s]*',
-          '^[-\\w]+/[-\\w\\.]+$',
-          String.raw`^\/api\/[a-z0-9\/._-]+$`,
+          '^[-\\w]+/[-\\w\\.]+$' // For import paths
         ],
         minLength: 3
       }

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20251105_092554 AS stage-build
+FROM jumpserver/lina-base:20250910_084112 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION

package.json

@@ -39,9 +39,10 @@
     "css-color-function": "^1.3.3",
     "decimal.js": "^10.4.3",
     "deepmerge": "^4.2.2",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.1.6",
     "echarts": "4.7.0",
-    "element-ui": "https://github.com/jumpserver-dev/element/releases/download/v2.15.15/jumpserver-element-ui-2.15.15.tgz",
+    "element-ui": "^2.15.14",
+    "elementui-lts": "^2.16.0",
     "eslint-plugin-html": "^6.0.0",
     "highlight.js": "^11.9.0",
     "install": "^0.13.0",
@@ -51,6 +52,17 @@
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "lodash": "^4.17.21",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.frompairs": "^4.0.1",
+    "lodash.get": "^4.4.2",
+    "lodash.has": "^4.5.2",
+    "lodash.includes": "^4.3.0",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.isplainobject": "^4.0.6",
+    "lodash.set": "^4.3.2",
+    "lodash.topairs": "^4.3.0",
+    "lodash.values": "^4.3.0",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "moment": "^2.29.4",
@@ -61,7 +73,7 @@
     "path-to-regexp": "3.3.0",
     "sortablejs": "^1.15.6",
     "v-sanitize": "^0.0.13",
-    "vue": "2.7.16",
+    "vue": "2.6.10",
     "vue-codemirror": "4.0.6",
     "vue-cookie": "^1.1.4",
     "vue-echarts": "^5.0.0-beta.0",
@@ -119,11 +131,11 @@
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "vue-i18n-extract": "^1.1.1",
-    "vue-template-compiler": "2.7.16",
+    "vue-template-compiler": "2.6.10",
     "webpack": "^4.28.4"
   },
   "engines": {
-    "node": ">=12",
+    "node": ">=8.9",
     "npm": ">= 3.0.0"
   },
   "browserslist": [

src/api/ops.js

@@ -61,14 +61,13 @@ export function stopJob(form) {
   })
 }
 
-export function JobUploadFile(form, config = {}) {
+export function JobUploadFile(form) {
   return request({
     url: '/api/v1/ops/jobs/upload/',
     method: 'post',
     headers: { 'Content-Type': 'multipart/form-data' },
     timeout: 60 * 60 * 1000,
-    data: form,
-    ...config
+    data: form
   })
 }
 

src/api/sessions.js

@@ -18,14 +18,14 @@ export function toggleLockSession(data) {
 
 export function getAllCommandStorage() {
   return request({
-    url: '/api/v1/terminal/command-storages/',
+    url: `/api/v1/terminal/command-storages/`,
     method: 'get'
   })
 }
 
 export function getAllReplayStorage() {
   return request({
-    url: '/api/v1/terminal/replay-storages/',
+    url: `/api/v1/terminal/replay-storages/`,
     method: 'get'
   })
 }

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -15,25 +15,10 @@ export const accountFieldsMeta = (vm) => {
   }
 
   return {
-    nodes: {
-      component: Select2,
-      label: vm.$t('Node'),
-      el: {
-        value: [],
-        ajax: {
-          url: '/api/v1/assets/nodes/',
-          transformOption: (item) => {
-            return { label: item.full_value, value: item.id }
-          }
-        }
-      },
-      hidden: () => {
-        return !vm.addTemplate
-      }
-    },
     assets: {
       component: AssetSelect,
       label: vm.$t('Asset'),
+      rules: [Required],
       el: {
         multiple: false
       },
@@ -48,7 +33,7 @@ export const accountFieldsMeta = (vm) => {
         get disabled() {
           return vm.isDisabled
         },
-        multiple: vm.addTemplate,
+        multiple: false,
         ajax: {
           url: '/api/v1/accounts/account-templates/',
           transformOption: (item) => {

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -63,7 +63,7 @@ export default {
       encryptedFields: ['secret'],
       fields: [
         [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Asset'), ['nodes', 'assets']],
+        [this.$t('Asset'), ['assets']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
           'access_key', 'passphrase', 'api_key',

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -93,8 +93,8 @@ export default {
         iVisible = true
         data = formValue
         url = `/api/v1/accounts/accounts/bulk/`
-        if ((!data.assets || data.assets.length === 0) && (!data.nodes || data.nodes.length === 0)) {
-          this.$message.error(this.$tc('PleaseSelectAssetOrNode'))
+        if (data.assets.length === 0) {
+          this.$message.error(this.$tc('PleaseSelectAsset'))
           return
         }
       }

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

@@ -49,10 +49,6 @@ export default {
             prop: 'asset',
             label: this.$t('Asset')
           },
-          {
-            prop: 'account',
-            label: this.$t('Account')
-          },
           {
             prop: 'state',
             label: this.$t('Status'),

src/components/Apps/ChatAi/components/Sidebar/index.vue

@@ -13,8 +13,6 @@
 </template>
 
 <script>
-import { BASE_URL } from '@/utils/common/index'
-
 export default {
   props: {
     active: {
@@ -43,16 +41,6 @@ export default {
     },
     handleExpand() {
       this.$emit('expand-full')
-    },
-    async openWebsite() {
-      let url = `${BASE_URL}/?_=${Date.now()}`
-      if (process.env.NODE_ENV !== 'production') {
-        url = url.replace('9528', '5173')
-      }
-
-      const newUrl = new URL(url)
-      window.open(newUrl.toString(), '_blank')
-      return url
     }
   }
 }

src/components/Apps/GrantedAssets/index.vue

@@ -109,6 +109,11 @@ export default {
           },
           connectivity: connectivityMeta,
           comment: { ...this.comment }
+        },
+        tableAttrs: {
+          rowClassName({ row }) {
+            return !row.is_active ? 'row_disabled' : ''
+          }
         }
       },
       headerActions: {

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -37,12 +37,8 @@ export default {
 
       },
       headerActions: {
-        hasExport: true,
-        hasImport: true,
-        importOptions: {
-          encryptFields: [''], // 这里不加密 password，''只是为了保证数组有值
-          canImportUpdate: false
-        },
+        hasExport: false,
+        hasImport: false,
         hasCreate: true,
         hasSearch: true,
         hasRefresh: true,

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -25,7 +25,6 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.assets)
-    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -34,7 +33,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`,
+          url: `/api/v1/assets/assets/?${key}=${value}`,
           columns: ['name', 'address', 'platform', 'type', 'is_active'],
           columnsShow: {
             min: ['name', 'address'],

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -25,7 +25,6 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.users)
-    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -34,7 +33,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`,
+          url: `/api/v1/users/users/?${key}=${value}`,
           columns: [
             'name', 'username', 'email', 'groups', 'system_roles',
             'org_roles', 'source', 'is_valid'

src/components/Apps/UserConfirmDialog/index.vue

@@ -13,12 +13,17 @@
     v-on="$listeners"
   >
     <div v-if="confirmTypeRequired === 'relogin'">
-      <el-row :gutter="24" style="margin: 0 auto">
+      <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24">
-          <el-alert :title="$tc('ReLoginTitle')" center style="margin-bottom: 20px" type="error" />
+          <el-alert
+            :title="$tc('ReLoginTitle')"
+            center
+            style="margin-bottom: 20px;"
+            type="error"
+          />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 0 auto">
+      <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24">
           <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
             {{ this.$t('ReLogin') }}
@@ -27,11 +32,11 @@
       </el-row>
     </div>
     <div v-else>
-      <el-row :gutter="24" style="margin: 0 auto">
+      <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24" :span="24" class="add">
           <el-select
             v-model="subTypeSelected"
-            style="width: 100%; margin-bottom: 20px"
+            style="width: 100%; margin-bottom: 20px;"
             @change="handleSubTypeChange"
           >
             <el-option
@@ -44,22 +49,19 @@
           </el-select>
         </el-col>
       </el-row>
-      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto">
-        <el-col :md="24" :sm="24" style="display: flex; align-items: center">
+      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto;">
+        <el-col :md="24" :sm="24" style="display: flex; align-items: center; ">
           <el-input
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
-          <span
-            v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'"
-            style="margin: -1px 0 0 20px"
-          >
+          <span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
             <el-button
               :disabled="smsBtnDisabled"
               size="mini"
-              style="line-height: 14px; float: right"
+              style="line-height: 14px; float: right;"
               type="primary"
               @click="sendCode"
             >
@@ -70,17 +72,21 @@
       </el-row>
       <el-row>
         <el-col>
-          <iframe v-if="passkeyVisible" :src="passkeyUrl" style="display: none" />
           <iframe
-            v-if="isFaceCaptureVisible && subTypeSelected === 'face' && faceCaptureUrl"
+            v-if="passkeyVisible"
+            :src="passkeyUrl"
+            style="display: none"
+          />
+          <iframe
+            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
             :src="faceCaptureUrl"
             allow="camera"
             sandbox="allow-scripts allow-same-origin"
-            style="width: 100%; height: 600px; border: none"
+            style="width: 100%; height: 600px;border: none;"
           />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 20px auto 10px">
+      <el-row :gutter="24" style="margin: 20px auto 10px;">
         <el-col :md="24" :sm="24">
           <el-button
             v-if="!noCodeMFA.includes(subTypeSelected)"
@@ -189,65 +195,55 @@ export default {
       this.$log.debug('perform confirm action')
       const confirmType = response.data?.code
       const confirmUrl = '/api/v1/authentication/confirm/'
-      this.$axios
-        .get(confirmUrl, { params: { confirm_type: confirmType } })
-        .then(data => {
-          this.confirmTypeRequired = data.confirm_type
+      this.$axios.get(confirmUrl, { params: { confirm_type: confirmType } }).then((data) => {
+        this.confirmTypeRequired = data.confirm_type
 
-          if (this.confirmTypeRequired === 'relogin') {
-            this.$axios
-              .post(confirmUrl, { confirm_type: 'relogin', secret_key: 'x' })
-              .then(() => {
-                this.callback()
-                this.visible = false
-              })
-              .catch(() => {
-                this.title = this.$t('NeedReLogin')
-                this.visible = true
-              })
-            return
-          }
-          this.subTypeChoices = data.content
-          const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
-          this.subTypeSelected = defaultSubType.name
-          this.inputPlaceholder = defaultSubType.placeholder
-          this.visible = true
-        })
-        .catch(err => {
-          const data = err.response?.data
-          const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
-          this.$message.error(msg)
-          this.cancel(err)
-        })
-        .finally(() => {
-          this.processing = false
-        })
+        if (this.confirmTypeRequired === 'relogin') {
+          this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
+            this.callback()
+            this.visible = false
+          }).catch(() => {
+            this.title = this.$t('NeedReLogin')
+            this.visible = true
+          })
+          return
+        }
+        this.subTypeChoices = data.content
+        const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
+        this.subTypeSelected = defaultSubType.name
+        this.inputPlaceholder = defaultSubType.placeholder
+        this.visible = true
+      }).catch((err) => {
+        const data = err.response?.data
+        const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
+        this.$message.error(msg)
+        this.cancel(err)
+      }).finally(() => {
+        this.processing = false
+      })
     }, 500),
     logout() {
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
     },
     sendCode() {
-      this.$axios
-        .post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected })
-        .then(res => {
-          this.$message.success(this.$tc('VerificationCodeSent'))
-          let time = 60
-          this.smsBtnDisabled = true
+      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }).then(res => {
+        this.$message.success(this.$tc('VerificationCodeSent'))
+        let time = 60
+        this.smsBtnDisabled = true
 
-          const interval = setInterval(() => {
-            time -= 1
-            this.smsBtnText = `${this.$t('Pending')}: ${time}`
+        const interval = setInterval(() => {
+          time -= 1
+          this.smsBtnText = `${this.$t('Pending')}: ${time}`
 
-            if (time <= 0) {
-              clearInterval(interval)
-              this.smsBtnText = this.$t('SendVerificationCode')
-              this.smsBtnDisabled = false
-            }
-          }, 1000)
-        })
-        .catch(() => {
-          this.$message.error(this.$tc('FailedToSendVerificationCode'))
-        })
+          if (time <= 0) {
+            clearInterval(interval)
+            this.smsBtnText = this.$t('SendVerificationCode')
+            this.smsBtnDisabled = false
+          }
+        }, 1000)
+      }).catch(() => {
+        this.$message.error(this.$tc('FailedToSendVerificationCode'))
+      })
     },
     handlePasskeyVerify() {
       this.passkeyVisible = true
@@ -271,26 +267,23 @@ export default {
     },
     startFaceCapture() {
       const url = '/api/v1/authentication/face/context/'
-      this.$axios
-        .post(url)
-        .then(data => {
-          const token = data['token']
-          this.faceCaptureUrl = '/facelive/capture?token=' + token
-          this.isFaceCaptureVisible = true
+      this.$axios.post(url).then(data => {
+        const token = data['token']
+        this.faceCaptureUrl = '/facelive/capture?token=' + token
+        this.isFaceCaptureVisible = true
 
-          const timer = setInterval(() => {
-            this.$axios.get(url + `?token=${token}`).then(data => {
-              if (data['is_finished']) {
-                clearInterval(timer)
-                this.isFaceCaptureVisible = false
-                this.handleConfirm()
-              }
-            })
-          }, 1000)
-        })
-        .catch(() => {
-          this.$message.error(this.$tc('FailedToStartFaceCapture'))
-        })
+        const timer = setInterval(() => {
+          this.$axios.get(url + `?token=${token}`).then(data => {
+            if (data['is_finished']) {
+              clearInterval(timer)
+              this.isFaceCaptureVisible = false
+              this.handleConfirm()
+            }
+          })
+        }, 1000)
+      }).catch(() => {
+        this.$message.error(this.$tc('FailedToStartFaceCapture'))
+      })
     },
     handleFaceCapture() {
       this.startFaceCapture()
@@ -313,22 +306,16 @@ export default {
       const data = {
         confirm_type: this.confirmTypeRequired,
         mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
-        secret_key:
-          this.confirmTypeRequired === 'password'
-            ? encryptPassword(this.secretValue)
-            : this.secretValue
+        secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
       }
 
-      this.$axios
-        .post(`/api/v1/authentication/confirm/`, data)
-        .then(() => {
-          this.onSuccess()
-        })
-        .catch(err => {
-          this.$message.error(err.message || this.$tc('ConfirmFailed'))
-          this.faceCaptureUrl = null
-          this.isFaceCaptureVisible = false
-        })
+      this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
+        this.onSuccess()
+      }).catch((err) => {
+        this.$message.error(err.message || this.$tc('ConfirmFailed'))
+        this.faceCaptureUrl = null
+        this.isFaceCaptureVisible = false
+      })
     }
   }
 }

src/components/Apps/VariablesHelpTextDialog/index.vue

@@ -73,28 +73,28 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .help-dialog.dialog .el-dialog__footer {
+<style>
+.help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
+</style>
 
+<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
-}
 
-::v-deep .help-table th,
-::v-deep .help-table td {
-  height: 40px;
-  padding: 0 8px;
-  text-align: left;
-}
+  &::v-deep th, td {
+    height: 40px;
+    padding: 0 8px;
+    text-align: left;
+  }
 
-::v-deep .help-table .item-td,
-::v-deep .help-table .item-label {
-  cursor: pointer;
-  color: var(--color-primary);
+  &::v-deep .item-td, .item-label {
+    cursor: pointer;
+    color: var(--color-primary);
+  }
 }
 </style>

src/components/Cards/DetailCard/index.vue

@@ -5,7 +5,7 @@
         <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
           <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
           <span class="item-value el-form-item__content">
-            <component
+            <template
               :is="item.component"
               v-if="item.component"
               v-bind="{...item}"

src/components/Form/AutoDataForm/index.vue

@@ -5,7 +5,6 @@
       ref="dataForm"
       :fields="totalFields"
       :form="iForm"
-      :server-errors="serverErrors"
       v-bind="$attrs"
       v-on="$listeners"
     >
@@ -29,7 +28,6 @@
 import DataForm from '../DataForm/index.vue'
 import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
 import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
-import { UniqueCheck } from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'AutoDataForm',
@@ -67,8 +65,7 @@ export default {
       totalFields: [],
       loading: true,
       groups: [],
-      errors: {},
-      serverErrors: {}
+      errors: {}
     }
   },
   computed: {
@@ -106,8 +103,6 @@ export default {
       this.generateColumns()
       this.$emit('afterGenerateColumns', this.totalFields)
       this.cleanFormValue()
-      // 初始化时清空错误
-      this.serverErrors = {}
       this.loading = false
     },
     generateColumns() {
@@ -115,47 +110,6 @@ export default {
       this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
       this.groups = generator.groups
       this.$log.debug('Total fields: ', this.totalFields)
-      this.applyUniqueRules()
-    },
-    applyUniqueRules() {
-      const fields = this.totalFields || []
-      const currentIdGetter = () => {
-        return this.$route?.params?.id || this.form?.id || this.iForm?.id
-      }
-
-      // 移除 url 后拼接的参数
-      const defaultListUrl = (() => {
-        try {
-          const u = new URL(this.url, location.origin)
-          u.pathname = u.pathname.replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?$/, '/')
-          return u.origin ? u.origin + u.pathname : u.pathname
-        } catch (e) {
-          return (this.url || '').replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?($|\?)/, '/$2')
-        }
-      })()
-
-      fields.forEach(field => {
-        const conf = field?.uniqueCheck
-
-        if (!conf) return
-
-        const confObj = (typeof conf === 'object') ? conf : {}
-        const param = confObj.param || field.prop || field.id
-        const url = confObj.url || defaultListUrl
-        const label = confObj.label || field.label || param
-        const entityName = confObj.entityName || ''
-
-        if (!Array.isArray(field.rules)) field.rules = []
-
-        field.rules.push(UniqueCheck({
-          url,
-          param,
-          label,
-          entityName,
-          getIgnoreId: currentIdGetter,
-          fieldName: field.prop || field.id
-        }))
-      })
     },
     _cleanFormValue(form, remoteMeta) {
       if (!form) {
@@ -185,57 +139,15 @@ export default {
     cleanFormValue() {
       this._cleanFormValue(this.iForm, this.remoteMeta)
     },
-    _getElFormInstance() {
-      try {
-        return this.$refs?.dataForm?.$refs?.form?.$refs?.elForm || null
-      } catch (e) {
-        return null
-      }
-    },
-    /**
-     * @description 仅清理 UI 的错误展示,不触发表单内容重建
-     */
-    clearAllFieldErrors() {
-      const elForm = this._getElFormInstance()
-      if (elForm && Array.isArray(elForm.fields)) {
-        elForm.fields.forEach((item) => {
-          item.validateMessage = ''
-          item.validateState = ''
-        })
-      }
-      // 不修改 totalFields/attrs，避免触发 content 重建导致输入丢失
-      this.serverErrors = {}
-    },
     setFieldError(name, error) {
-      error = (error || '').toString().replace(/[。.]+$/, '')
-      const elForm = this._getElFormInstance()
-      if (elForm && Array.isArray(elForm.fields)) {
-        const item = elForm.fields.find(f => f.prop === name)
-        if (item) {
-          item.validateMessage = error
-          item.validateState = error ? 'error' : ''
-        }
+      error = error.replace(/[。.]+$/, '')
+      const field = this.totalFields.find((v) => v.prop === name)
+      if (!field) {
+        return
       }
-      // 不写入 totalFields，避免触发 innerContent 变化导致表单值被覆盖
-      this.$set(this.serverErrors, name, error)
-    },
-    setErrors(errors) {
-      const mapped = {}
-      Object.entries(errors || {}).forEach(([k, v]) => {
-        let msg = v
-        // v是数组并且数组都是字符串，则拼接为字符串
-        if (Array.isArray(v) && v.every(item => typeof item === 'string')) msg = v.join('; ')
-        else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
-        mapped[k] = String(msg || '')
-      })
-      this.serverErrors = mapped
-      const elForm = this._getElFormInstance()
-      if (elForm && Array.isArray(elForm.fields)) {
-        elForm.fields.forEach((item) => {
-          const msg = mapped[item.prop] || ''
-          item.validateMessage = msg
-          item.validateState = msg ? 'error' : ''
-        })
+      if (typeof error === 'string') {
+        field.el.errors = error
+        field.attrs.error = error
       }
     },
     groupHidden(group, i) {

src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue

@@ -6,7 +6,6 @@
     :prop="prop"
     :rules="_show && Array.isArray(data.rules) ? data.rules : []"
     v-bind="data.attrs"
-    :error="errorText"
   >
     <template v-if="data.label" #label>
       <span :title="data.label">
@@ -20,8 +19,7 @@
           placement="right"
           popper-class="help-tips"
         >
-          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" />
-          <!-- Noncompliant -->
+          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
           <i class="fa fa-question-circle-o help-tip-icon" />
         </el-tooltip>
       </span>
@@ -29,7 +27,11 @@
     <template v-if="readonly && hasReadonlyContent">
       <div
         v-if="data.type === 'input'"
-        :style="componentProps.type === 'textarea' ? { padding: '10px 0', lineHeight: 1.5 } : ''"
+        :style="
+          componentProps.type === 'textarea'
+            ? {padding: '10px 0', lineHeight: 1.5}
+            : ''
+        "
       >
         {{ itemValue }}
       </div>
@@ -48,7 +50,11 @@
       v-on="listeners"
     >
       <template v-for="opt in options">
-        <el-option v-if="data.type === 'select'" :key="opt.label" v-bind="opt" />
+        <el-option
+          v-if="data.type === 'select'"
+          :key="opt.label"
+          v-bind="opt"
+        />
         <el-checkbox-button
           v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
           :key="opt.value"
@@ -105,10 +111,10 @@
 <script>
 import getEnableWhenStatus from '../util/enable-when'
 import { noop } from '../util/utils'
-import _get from 'lodash/get'
-import _includes from 'lodash/includes'
-import _topairs from 'lodash/toPairs'
-import _frompairs from 'lodash/fromPairs'
+import _get from 'lodash.get'
+import _includes from 'lodash.includes'
+import _topairs from 'lodash.topairs'
+import _frompairs from 'lodash.frompairs'
 
 function validator(data) {
   if (!data) {
@@ -146,10 +152,6 @@ export default {
   props: {
     // eslint-disable-next-line vue/require-default-prop
     data: Object,
-    serverErrors: {
-      type: Object,
-      default: () => ({})
-    },
     prop: {
       type: String,
       default() {
@@ -168,8 +170,7 @@ export default {
   data() {
     return {
       propsInner: {},
-      isBlurTrigger:
-        this.data.rules &&
+      isBlurTrigger: this.data.rules &&
         this.data.rules.some(rule => {
           return rule.required && rule.trigger === 'blur'
         })
@@ -188,11 +189,6 @@ export default {
     classes() {
       return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '')
     },
-    errorText() {
-      const fromAttrs = this.data?.attrs?.error
-      const fromServer = this.serverErrors ? this.serverErrors[this.data.prop] : ''
-      return fromAttrs || fromServer || ''
-    },
     listeners() {
       const {
         data: {
@@ -208,7 +204,10 @@ export default {
       } = this
       return {
         ..._frompairs(
-          _topairs(on).map(([eName, handler]) => [eName, (...args) => handler(args, updateForm)])
+          _topairs(on).map(([eName, handler]) => [
+            eName,
+            (...args) => handler(args, updateForm)
+          ]),
         ),
         // 手动更新表单数据
         input: (value, ...rest) => {
@@ -233,7 +232,9 @@ export default {
 
     multipleValue: ({ data, itemValue, options = [] }) => {
       const multipleSelectValue =
-        _get(data, 'el.multiple') && Array.isArray(itemValue) ? itemValue : [itemValue]
+        _get(data, 'el.multiple') && Array.isArray(itemValue)
+          ? itemValue
+          : [itemValue]
       return multipleSelectValue
         .map(val => (options.find(op => op.value === val) || {}).label)
         .join()
@@ -253,7 +254,8 @@ export default {
           if (v.url === oldV.url || v.request === oldV.request) return
         }
         const isOptionsCase =
-          ['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) > -1
+          ['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) >
+          -1
         const {
           url,
           request = () => this.$axios.get(url).then(resp => resp.data),
@@ -321,7 +323,7 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .help-tips {
   opacity: 0.8;
   line-height: 2;
@@ -330,7 +332,7 @@ export default {
 
 .help-block {
   ::v-deep .el-alert__icon {
-    font-size: 16px;
+    font-size: 16px
   }
 
   &.checkbox {

src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.vue

@@ -1,18 +1,11 @@
 <template>
-  <el-form
-    ref="elForm"
-    :model="value"
-    class="el-form-renderer"
-    v-bind="$attrs"
-    @submit.native.prevent
-  >
+  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs" @submit.native.prevent>
     <template v-for="item in innerContent">
       <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
       <component
         :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
         :key="item.id"
         :data="item"
-        :server-errors="serverErrors"
         :disabled="disabled || item.disabled"
         :item-value="value[item.id]"
         :options="options[item.id]"
@@ -26,19 +19,13 @@
   </el-form>
 </template>
 <script>
-import _set from 'lodash/set'
-import _isequal from 'lodash/isEqual'
-import _clonedeep from 'lodash/cloneDeep'
+import _set from 'lodash.set'
+import _isequal from 'lodash.isequal'
+import _clonedeep from 'lodash.clonedeep'
 import RenderFormGroup from './components/render-form-group.vue'
 import RenderFormItem from './components/render-form-item.vue'
 import transformContent from './util/transform-content'
-import {
-  collect,
-  correctValue,
-  mergeValue,
-  transformInputValue,
-  transformOutputValue
-} from './util/utils'
+import { collect, correctValue, mergeValue, transformInputValue, transformOutputValue } from './util/utils'
 
 const GROUP = 'group'
 
@@ -60,10 +47,6 @@ export default {
       type: Array,
       required: true
     },
-    serverErrors: {
-      type: Object,
-      default: () => ({})
-    },
     disabled: {
       type: Boolean,
       default: false

src/components/Form/DataForm/components/el-form-renderer/util/enable-when.js

@@ -1,5 +1,5 @@
-import _get from 'lodash/get'
-import _has from 'lodash/has'
+import _get from 'lodash.get'
+import _has from 'lodash.has'
 
 /**
  * 处理 enableWhen
@@ -20,5 +20,7 @@ export default function getEnableWhenStatus(enableWhen, value) {
     })
   }
 
-  return Array.isArray(enableWhen) ? enableWhen.some(handleCondition) : handleCondition(enableWhen)
+  return Array.isArray(enableWhen)
+    ? enableWhen.some(handleCondition)
+    : handleCondition(enableWhen)
 }

src/components/Form/DataForm/components/el-form-renderer/util/transform-content.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-sequences */
-import _ from 'lodash'
+import _kebabcase from 'lodash.kebabcase'
 /**
  * content 的每一项会浅拷贝一层
  * 只可以在 item 层新增修改属性，如 item.a = b
@@ -13,7 +13,7 @@ export default function transformContent(content) {
       removeDollarInKey(item)
       extractRulesFromComponent(item)
       // 有些旧写法是 checkboxGroup & radioGroup
-      item.type = _.kebabCase(item.type)
+      item.type = _kebabcase(item.type)
     }
 
     return item
@@ -34,5 +34,8 @@ export function extractRulesFromComponent(item) {
   if (!component || typeof component === 'string') return
 
   const { rules = [] } = component
-  item.rules = [...(item.rules || []), ...(typeof rules === 'function' ? rules(item) : rules)]
+  item.rules = [
+    ...(item.rules || []),
+    ...(typeof rules === 'function' ? rules(item) : rules)
+  ]
 }

src/components/Form/DataForm/components/el-form-renderer/util/utils.js

@@ -1,5 +1,5 @@
-import _frompairs from 'lodash/fromPairs'
-import _isplainobject from 'lodash/isPlainObject'
+import _frompairs from 'lodash.frompairs'
+import _isplainobject from 'lodash.isplainobject'
 
 export function noop() {}
 
@@ -12,9 +12,11 @@ export function collect(content, key) {
         value: item.type === 'group' ? collect(item.items, key) : item[key]
       }))
       .filter(
-        ({ type, value }) => value !== undefined || (type === 'group' && Object.keys(value).length)
+        ({ type, value }) =>
+          value !== undefined ||
+          (type === 'group' && Object.keys(value).length),
       )
-      .map(({ id, value }) => [id, value])
+      .map(({ id, value }) => [id, value]),
   )
 }
 

src/components/Form/DataForm/index.vue

@@ -11,7 +11,6 @@
       :label-width="labelWidth"
       :style="{ '--label-width': labelWidth }"
       v-bind="$attrs"
-      :server-errors="serverErrors"
       v-on="$listeners"
     >
       <!-- slot 透传 -->
@@ -122,10 +121,6 @@ export default {
       type: Boolean,
       default: true
     },
-    serverErrors: {
-      type: Object,
-      default: () => ({})
-    },
     fields: {
       type: Array,
       default: () => []
@@ -244,10 +239,6 @@ export default {
   margin-right: 80px;
   margin-bottom: 20px;
 
-  .el-form {
-    margin-right: 0;
-  }
-
   ::v-deep .el-input-group__prepend {
     border-radius: 0;
   }

src/components/Form/DataForm/rules/index.js

@@ -1,5 +1,4 @@
 import i18n from '@/i18n/i18n'
-import request from '@/utils/request'
 
 export const Required = {
   required: true, message: i18n.t('FieldRequiredError'), trigger: 'blur'
@@ -119,69 +118,3 @@ export default {
   matchAlphanumericUnderscore,
   MatchExcludeParenthesis
 }
-/**
- * @description 表单唯一性校验
- *
- * @param {Object} options
- * @param {string} 列表查询地址
- * @param {string} 查询参数名
- * @param {string} 字段中文名
- * @param {string} 字段名
- * @param {function(): (string|number)} 返回更新场景下的当前对象 id
- */
-export function UniqueCheck(options = {}) {
-  const { url, param, label, fieldName, getIgnoreId } = options
-
-  function existsInResponse(res) {
-    if (Array.isArray(res)) return res.length > 0
-    if (res && typeof res === 'object') {
-      if (typeof res.count === 'number') return res.count > 0
-      if (Array.isArray(res.results)) return res.results.length > 0
-    }
-    return !!res
-  }
-
-  function extractIds(res) {
-    if (Array.isArray(res)) return res.map(i => i?.id).filter(Boolean)
-    if (res && Array.isArray(res.results)) return res.results.map(i => i?.id).filter(Boolean)
-    return []
-  }
-
-  return {
-    async validator(rule, value, callback) {
-      try {
-        let v = value
-
-        if (typeof v === 'string') v = v.trim()
-        if (v === '' || v === undefined || v === null) return callback()
-        if (!url || !param) return callback()
-
-        const res = await request.get(url, { params: { [param]: v } })
-        let duplicated = existsInResponse(res)
-
-        if (duplicated && typeof getIgnoreId === 'function') {
-          const curId = getIgnoreId()
-          if (curId) {
-            const ids = extractIds(res)
-
-            // 查询结果只包含自身,因此不被视为重复
-            if (ids.length >= 1 && ids.every(id => id === curId)) {
-              duplicated = false
-            }
-          }
-        }
-
-        if (duplicated) {
-          const _label = label || fieldName || ''
-          const msg = `${_label}${i18n.t('Existing')}`
-          callback(new Error(msg))
-        } else {
-          callback()
-        }
-      } catch (e) {
-        callback()
-      }
-    },
-    trigger: ['blur']
-  }
-}

src/components/Form/FormFields/CodeEditor.vue

@@ -14,7 +14,6 @@
               <el-button
                 :type="item.el && item.el.type"
                 class="start-stop-btn"
-                :disabled="item.disabled"
                 size="mini"
                 @click="item.callback()"
               >

src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue

@@ -28,18 +28,27 @@
           <template v-if="hasSelect">
             <el-data-table-column
               key="selection-key"
-              v-bind="{ align: columnsAlign, ...columns[0] }"
+              v-bind="{align: columnsAlign, ...columns[0]}"
             />
 
-            <el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[1] }">
+            <el-data-table-column
+              key="tree-ctrl"
+              v-bind="{align: columnsAlign, ...columns[1]}"
+            >
               <template slot-scope="scope">
-                <span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
+                <span
+                  v-for="space in scope.row._level"
+                  :key="space"
+                  class="ms-tree-space"
+                />
                 <span
                   v-if="iconShow(scope.$index, scope.row)"
                   class="tree-ctrl"
                   @click="toggleExpanded(scope.$index)"
                 >
-                  <i :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`" />
+                  <i
+                    :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"
+                  />
                 </span>
                 {{ scope.row[columns[1].prop] }}
               </template>
@@ -48,16 +57,23 @@
             <el-data-table-column
               v-for="col in columns.filter((c, i) => i !== 0 && i !== 1)"
               :key="col.prop"
-              v-bind="{ align: columnsAlign, ...col }"
+              v-bind="{align: columnsAlign, ...col}"
             />
           </template>
 
           <!--无选择-->
           <template v-else>
             <!--展开这列, 丢失 el-data-table-column属性-->
-            <el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[0] }">
+            <el-data-table-column
+              key="tree-ctrl"
+              v-bind="{align: columnsAlign, ...columns[0]}"
+            >
               <template slot-scope="scope">
-                <span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
+                <span
+                  v-for="space in scope.row._level"
+                  :key="space"
+                  class="ms-tree-space"
+                />
 
                 <span
                   v-if="iconShow(scope.$index, scope.row)"
@@ -73,19 +89,14 @@
             <el-data-table-column
               v-for="col in columns.filter((c, i) => i !== 0)"
               :key="col.prop"
-              v-bind="{ align: columnsAlign, ...col }"
+              v-bind="{align: columnsAlign, ...col}"
             />
           </template>
         </template>
 
         <!--非树-->
         <template v-else>
-          <el-data-table-column
-            v-if="hasSelection"
-            :align="selectionAlign"
-            :selectable="canSelect"
-            type="selection"
-          />
+          <el-data-table-column v-if="hasSelection" :align="selectionAlign" :selectable="canSelect" type="selection" />
           <el-data-table-column
             v-for="col in columns"
             :key="col.prop"
@@ -94,14 +105,14 @@
             :filters="col.filters || null"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             :title="col.label"
-            v-bind="{ align: columnsAlign, ...col }"
+            v-bind="{align: columnsAlign, ...col}"
           >
             <template #header>
               <span :title="col.label">{{ col.label }}</span>
             </template>
             <template
               v-if="col.formatter && typeof col.formatter !== 'function'"
-              v-slot:default="{ row, column, $index }"
+              v-slot:default="{row, column, $index}"
             >
               <div
                 :is="col.formatter"
@@ -155,9 +166,9 @@
 </template>
 
 <script>
-import _get from 'lodash/get'
-import _values from 'lodash/values'
-import _isEmpty from 'lodash/isEmpty'
+import _get from 'lodash.get'
+import _values from 'lodash.values'
+import _isEmpty from 'lodash.isempty'
 import SelfLoadingButton from './components/self-loading-button.vue'
 import TheDialog, { dialogModes } from './components/the-dialog.vue'
 import ElDataTableColumn from './components/el-data-table-column'
@@ -269,7 +280,8 @@ export default {
      */
     beforeSearch: {
       type: Function,
-      default() {}
+      default() {
+      }
     },
     /**
      * 单选, 适用场景: 不可以批量删除
@@ -434,7 +446,8 @@ export default {
      */
     onEdit: {
       type: Function,
-      default(row) {}
+      default(row) {
+      }
     },
     /**
      * 点击删除按钮时的方法, 当默认删除方法不满足需求时使用, 需要返回promise
@@ -443,7 +456,9 @@ export default {
     onDelete: {
       type: Function,
       default(data) {
-        const ids = Array.isArray(data) ? data.map(v => v[this.id]).join(',') : data[this.id]
+        const ids = Array.isArray(data)
+          ? data.map(v => v[this.id]).join(',')
+          : data[this.id]
         return this.$axios.delete(this.url + '/' + ids + '/', this.axiosConfig)
       }
     },
@@ -697,8 +712,8 @@ export default {
       }
     },
     /*
-     * 设置默认对齐方式
-     */
+    * 设置默认对齐方式
+    */
     defaultAlign: {
       type: String,
       default: 'center'
@@ -713,7 +728,8 @@ export default {
     },
     extraPaginationAttrs: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     hasSelection: {
       type: Boolean,
@@ -896,7 +912,9 @@ export default {
       }
       Object.assign(query, this._extraQuery)
       Object.assign(query, this.innerQuery)
-      query[this.pageSizeKey] = this.hasPagination ? this.size : this.noPaginationSize
+      query[this.pageSizeKey] = this.hasPagination
+        ? this.size
+        : this.noPaginationSize
 
       // 根据偏移值计算接口正确的页数
       const pageOffset = this.firstPage - defaultFirstPage
@@ -978,7 +996,9 @@ export default {
         formValue = this.$refs.searchForm.getFormValue()
         Object.assign(query, formValue)
       }
-      const queryStr = (url.indexOf('?') > -1 ? '&' : '?') + queryUtil.stringify(query, '=', '&')
+      const queryStr =
+        (url.indexOf('?') > -1 ? '&' : '?') +
+        queryUtil.stringify(query, '=', '&')
 
       // 请求开始
       this.tableLoading = loading
@@ -998,7 +1018,10 @@ export default {
 
           // 不分页
           if (!this.hasPagination) {
-            data = _get(resp, this.dataPath) || _get(resp, noPaginationDataPath) || []
+            data =
+              _get(resp, this.dataPath) ||
+              _get(resp, noPaginationDataPath) ||
+              []
             this.total = data.length
           } else {
             data = _get(resp, this.dataPath) || []
@@ -1217,7 +1240,11 @@ export default {
       }
       const remain = this.data.length - deleteCount
       const lastPage = Math.ceil(this.total / this.size)
-      if (remain === 0 && this.page === lastPage && this.page > defaultFirstPage) {
+      if (
+        remain === 0 &&
+        this.page === lastPage &&
+        this.page > defaultFirstPage
+      ) {
         this.page--
       }
     },
@@ -1245,14 +1272,20 @@ export default {
         tmp.push(record)
 
         if (record[this.treeChildKey] && record[this.treeChildKey].length > 0) {
-          const children = this.tree2Array(record[this.treeChildKey], expandAll, record, _level)
+          const children = this.tree2Array(
+            record[this.treeChildKey],
+            expandAll,
+            record,
+            _level
+          )
           tmp = tmp.concat(children)
         }
       })
       return tmp
     },
     rowClassName(...args) {
-      let rcn = this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
+      let rcn =
+        this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
       if (typeof rcn === 'function') rcn = rcn(...args)
       if (this.isTree) rcn += ' ' + this.showRow(...args)
       return rcn

src/components/Table/DrawerListTable/index.vue

@@ -107,8 +107,8 @@ export default {
         const formatterArgs = value?.formatterArgs
         // console.log('>>> name: ', key)
         // console.log('>>> formatter: ', formatter)
-        const detailFormatters = ['AmountFormatter', 'DetailFormatter']
-        if (formatter && detailFormatters.includes(formatter.name) && formatterArgs.drawer !== false) {
+        const detailFormaters = ['AmountFormatter', 'DetailFormatter']
+        if (formatter && detailFormaters.includes(formatter.name) && formatterArgs.drawer !== false) {
           formatterArgs.onClick = this.onDetail
         }
       }
@@ -223,6 +223,7 @@ export default {
       }
 
       title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
+
       return title
     },
     getDefaultDrawer(action) {
@@ -294,6 +295,7 @@ export default {
         // 3. 设置组件
         this.drawerComponent = this.getDrawerComponent(action, payload)
         this.$log.debug('>>> drawerComponent: ', this.drawerComponent)
+        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
 
         // 4. 如果没有组件，尝试获取默认组件
         if (!this.drawerComponent) {
@@ -310,7 +312,6 @@ export default {
           const actionMeta = await this.$store.getters['common/drawerActionMeta']
           this.title = this.getDrawerTitle({ action, ...actionMeta })
         }
-        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
 
         // 7. 等待下一个 tick，确保组件已设置
         await this.$nextTick()

src/components/Table/ListTable/TableAction/ImportDialog.vue

@@ -58,7 +58,6 @@
         :import-option="importOption"
         :json-data="jsonData"
         :url="url"
-        v-bind="$attrs"
         @cancel="cancelUpload"
         @finish="closeDialog"
       />
@@ -248,46 +247,46 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-@import "~@/styles/variables";
+  @import "~@/styles/variables";
 
-.error-msg {
-  color: $--color-danger;
-}
-
-.error-msg.error-results {
-  background-color: #f3f3f4;
-  max-height: 200px;
-  overflow: auto
-}
-
-.file-uploader ::v-deep .el-upload {
-  width: 100%;
-  //padding-right: 150px;
-}
-
-.file-uploader ::v-deep .el-upload-dragger {
-  width: 100%;
-}
-
-.importTableZone {
-  padding: 0 20px;
-
-  .importTable {
-    overflow: auto;
+  .error-msg {
+    color: $--color-danger;
   }
 
-  .tableFilter {
-    padding-bottom: 10px;
+  .error-msg.error-results {
+    background-color: #f3f3f4;
+    max-height: 200px;
+    overflow: auto
   }
-}
 
-.importTable ::v-deep .el-dialog__body {
-  padding-bottom: 20px;
-}
+  .file-uploader ::v-deep .el-upload {
+    width: 100%;
+    //padding-right: 150px;
+  }
 
-.export-item {
-  margin-left: 80px;
-}
+  .file-uploader ::v-deep .el-upload-dragger {
+    width: 100%;
+  }
+
+  .importTableZone {
+    padding: 0 20px;
+
+    .importTable {
+      overflow: auto;
+    }
+
+    .tableFilter {
+      padding-bottom: 10px;
+    }
+  }
+
+  .importTable ::v-deep .el-dialog__body {
+    padding-bottom: 20px;
+  }
+
+  .export-item {
+    margin-left: 80px;
+  }
 
 .export-item:first-child {
   margin-left: 0;

src/components/Table/ListTable/TableAction/ImportTable.vue

@@ -97,10 +97,6 @@ export default {
     origin: {
       type: String,
       default: ''
-    },
-    encryptFields: {
-      type: Array,
-      default: () => []
     }
   },
   data() {
@@ -277,15 +273,11 @@ export default {
       }
       return columns
     },
-    getEncryptFields() {
-      const fromProp = Array.isArray(this.encryptFields) && this.encryptFields.length ? this.encryptFields : null
-      return fromProp || ['password', 'secret', 'private_key']
-    },
     generateTableData(tableTitles, tableData) {
       const totalData = []
       tableData.forEach(item => {
         this.$set(item, '@status', 'pending')
-        const encryptFields = this.getEncryptFields()
+        const encryptFields = ['password', 'secret', 'private_key']
         for (const field of encryptFields) {
           if (item[field]) {
             item[field] = encryptPassword(item[field])

src/components/Table/ListTable/TableAction/index.vue

@@ -86,11 +86,13 @@ export default {
     },
     datePick: {
       type: Function,
-      default: val => {}
+      default: (val) => {
+      }
     },
     searchTable: {
       type: Function,
-      default: val => {}
+      default: (val) => {
+      }
     },
     selectedRows: {
       type: Array,
@@ -151,7 +153,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 $innerHeight: 28px;
 $headerHeight: 30px;
 
@@ -237,4 +239,5 @@ $headerHeight: 30px;
   display: block;
   padding: 5px 20px;
 }
+
 </style>

src/components/Table/ListTable/index.vue

@@ -9,7 +9,7 @@
     />
     <TableAction
       v-if="hasActions"
-      :class="{ 'filter-expand': filterExpand }"
+      :class="{'filter-expand': filterExpand}"
       :date-pick="handleDateChange"
       :has-quick-filter="iHasQuickFilter"
       :quick-filter-expand.sync="filterExpand"
@@ -85,13 +85,10 @@ export default {
         date_from: getDaysAgo(7).toISOString(),
         date_to: this.$moment(getDayEnd()).add(1, 'day').toISOString()
       }
-      this.headerActions.datePicker = Object.assign(
-        {
-          dateStart: extraQuery.date_from,
-          dateEnd: extraQuery.date_to
-        },
-        this.headerActions.datePicker
-      )
+      this.headerActions.datePicker = Object.assign({
+        dateStart: extraQuery.date_from,
+        dateEnd: extraQuery.date_to
+      }, this.headerActions.datePicker)
     }
     if (this.$route.query.order) {
       extraQuery['order'] = this.$route.query.order
@@ -172,7 +169,7 @@ export default {
         extraQuery: this.extraQuery
       })
       const checkRoot = !(this.$route.meta?.disableOrgsChange === true)
-      const checkPermAndRoot = action => {
+      const checkPermAndRoot = (action) => {
         if (!this.hasActionPerm(action)) {
           return this.$t('NoPermission')
         }
@@ -393,6 +390,6 @@ export default {
 
 //修改颜色
 .el-button--text {
-  color: #409eff;
+  color: #409EFF;
 }
 </style>

src/components/Table/TagSearch/index.vue

@@ -16,7 +16,7 @@
       closable
       size="small"
       type="info"
-      @click="handleTagClick(v, k)"
+      @click="handleTagClick(v,k)"
       @close.stop="handleTagClose(k)"
     >
       <strong v-if="v.label">{{ v.label + ':' }}</strong>
@@ -40,6 +40,7 @@
     />
     <span :class="isFocus ? 'is-focus ' : ''" class="keydown-focus">/</span>
   </div>
+
 </template>
 
 <script>
@@ -48,7 +49,8 @@ export default {
   props: {
     config: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     options: {
       type: Array,
@@ -88,14 +90,13 @@ export default {
     },
     filterMaps() {
       const data = {}
-      const keyword = 'search'
       for (let key in this.filterTags) {
         const value = this.filterTags[key]['value']
         if (key === '') {
-          key = keyword
+          key = 'search'
         }
-        if (key.startsWith(keyword)) {
-          data[keyword] = (data[keyword] ? data[keyword] + ',' : '') + value
+        if (key.startsWith('search')) {
+          data['search'] = (data.search ? data.search + ',' : '') + value
         } else {
           data[key] = value
         }
@@ -137,7 +138,7 @@ export default {
         this.emptyCount = 1
       }
     },
-    $route(to, from) {
+    '$route'(to, from) {
       if (from.query !== to.query) {
         this.filterTags = {}
         if (to.query && Object.keys(to.query).length) {
@@ -168,7 +169,7 @@ export default {
     // 获取url中的查询条件，判断是不是包含在当前查询条件里
     checkInTableColumns(options) {
       const searchFieldOptions = {}
-      const queryInfoValues = options.map(i => i.value)
+      const queryInfoValues = options.map((i) => i.value)
       const routeQuery = this.getUrlQuery ? this.$route?.query : {}
       const routeQueryKeysLength = Object.keys(routeQuery).length
       if (routeQueryKeysLength < 1) return searchFieldOptions
@@ -243,10 +244,12 @@ export default {
         delete routeFilter.search
       }
       const asFilterTags = _.cloneDeep(this.filterTags)
-      this.filterTags = {
-        ...asFilterTags,
-        ...routeFilter
-      }
+      setTimeout(() => {
+        this.filterTags = {
+          ...asFilterTags,
+          ...routeFilter
+        }
+      }, 100)
     },
     getValueLabel(key, value) {
       for (const field of this.options) {

src/components/Table/TreeTable/index.vue

@@ -8,7 +8,7 @@
         class="left"
       >
         <span v-if="component === 'AutoDataZTree'" class="title">
-          {{ title }}
+          {{ $t('AssetTree') }}
         </span>
         <component
           :is="component"
@@ -111,13 +111,6 @@ export default {
     headerActions: {
       type: Object,
       default: () => ({})
-    },
-    title: {
-      // eslint-disable-next-line vue/require-prop-type-constructor
-      type: String,
-      default() {
-        return this.$t('AssetTree')
-      }
     }
   },
   data() {

src/components/Tree/AutoDataZTree/index.vue

@@ -421,8 +421,12 @@ export default {
   display: inline-block;
 }
 
-.data-z-tree ::v-deep .icon {
-  width: 10px;
-  margin-right: 3px;
+.data-z-tree {
+  ::v-deep {
+    .icon {
+      width: 10px;
+      margin-right: 3px;
+    }
+  }
 }
 </style>

src/i18n/i18n.js

@@ -1,6 +1,6 @@
 // i18n.js
 import Vue from 'vue'
-import locale from 'element-ui/lib/locale'
+import locale from 'elementui-lts/lib/locale'
 import VueI18n from 'vue-i18n'
 import messages from './langs'
 import date from './date'
@@ -54,7 +54,7 @@ export async function fetchTranslationsFromAPI() {
       }
     }
   } catch (error) {
-    console.log(error)
+    alert(error)
   } finally {
     await store.dispatch('app/setI18nLoaded', true)
   }

src/i18n/langs/index.js

@@ -1,44 +1,49 @@
+import zhLocale from 'elementui-lts/lib/locale/lang/zh-CN'
+import zhTWLocale from 'elementui-lts/lib/locale/lang/zh-TW'
+import enLocale from 'elementui-lts/lib/locale/lang/en'
+import jaLocale from 'elementui-lts/lib/locale/lang/ja'
+import ptBrLocale from 'elementui-lts/lib/locale/lang/pt-br'
+import esLocale from 'elementui-lts/lib/locale/lang/es'
+import ruLocale from 'elementui-lts/lib/locale/lang/ru-RU'
+import koLocale from 'elementui-lts/lib/locale/lang/ko'
+import viLocale from 'elementui-lts/lib/locale/lang/vi'
 import zh from './zh.json'
-import zh_hant from './zh_hant.json'
+import zhHant from './zh_hant.json'
 import en from './en.json'
 import ja from './ja.json'
 
-// Map app locales to Element-UI locale file names
-const elementLocaleNameByAppLocale = {
-  zh: 'zh-CN',
-  zh_hant: 'zh-TW',
-  en: 'en',
-  ja: 'ja',
-  pt_br: 'pt-br',
-  es: 'es',
-  ru: 'ru-RU',
-  ko: 'ko',
-  vi: 'vi'
-}
-
-function loadElementLocale(localeName) {
-  try {
-    // eslint-disable-next-line import/no-dynamic-require, global-require
-    const mod = require(`element-ui/lib/locale/lang/${localeName}`)
-    return (mod && (mod.default || mod)) || {}
-  } catch (e) {
-    return {}
+const messages = {
+  zh: {
+    ...zhLocale,
+    ...zh
+  },
+  zh_hant: {
+    ...zhTWLocale,
+    ...zhHant
+  },
+  en: {
+    ...enLocale,
+    ...en
+  },
+  ja: {
+    ...jaLocale,
+    ...ja
+  },
+  pt_br: {
+    ...ptBrLocale
+  },
+  es: {
+    ...esLocale
+  },
+  ru: {
+    ...ruLocale
+  },
+  ko: {
+    ...koLocale
+  },
+  vi: {
+    ...viLocale
   }
 }
 
-const appLocaleMessages = {
-  zh,
-  zh_hant,
-  en,
-  ja
-}
-
-const messages = Object.keys(elementLocaleNameByAppLocale).reduce((acc, appLocale) => {
-  const elementLocaleName = elementLocaleNameByAppLocale[appLocale]
-  const elementLocale = loadElementLocale(elementLocaleName)
-  const appMessages = appLocaleMessages[appLocale] || {}
-  acc[appLocale] = { ...elementLocale, ...appMessages }
-  return acc
-}, {})
-
 export default messages

src/layout/components/AppMain.vue

@@ -78,3 +78,6 @@ export default {
   }
 }
 </style>
+
+<style lang="scss">
+</style>

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -225,9 +225,24 @@ export default {
       default(error, method, vm) {
         const response = error.response
         const data = response.data
-        if (response.status === 400 && data && typeof data === 'object') {
-          // 覆盖式设置错误映射，避免触发表单内容重建
-          this.$refs.form.setErrors(data)
+        if (response.status === 400) {
+          for (const key of Object.keys(data)) {
+            let err = ''
+            let errorTips = data[key]
+            if (errorTips instanceof Array) {
+              errorTips = _.filter(errorTips, (item) => Object.keys(item).length > 0)
+              for (const i of errorTips) {
+                if (i instanceof Object) {
+                  err += i?.port?.join(',')
+                } else {
+                  err += i
+                }
+              }
+            } else {
+              err = errorTips
+            }
+            this.$refs.form.setFieldError(key, err)
+          }
         }
         this.$emit('performError', data)
       }

src/layout/components/GenericUpdateFormDialog/index.vue

@@ -137,15 +137,14 @@ export default {
             this.$emit('submitError', error)
             const response = error.response
             const data = response.data
-            // 不要逐个设置字段的 attrs.error 或改动 fields 引用。
-            // 这样会触发表单 content 重建，导致用户已输入的内容被覆盖/清空，
-            // 且可能出现只能显示一个字段错误的现象。
-            // 这里改为使用 AutoDataForm 暴露的 setErrors(errors) 覆盖式设置：
-            // - 直接同步到 UI 的 el-form-item.validateMessage
-            // - 支持同时显示多个字段错误
-            // - 不修改 fields/attrs 引用，避免输入丢失
-            if (response.status === 400 && data && typeof data === 'object') {
-              this.$refs.form.setErrors(data)
+            if (response.status === 400) {
+              for (const key of Object.keys(data)) {
+                let value = data[key]
+                if (value instanceof Array) {
+                  value = value.join(';')
+                }
+                this.$refs.form.setFieldError(key, value)
+              }
             }
           })
         }

src/layout/components/NavHeader/Organization.vue

@@ -4,7 +4,6 @@
     :placeholder="$tc('Select')"
     :value="currentOrgId"
     class="org-select"
-    :style="{ width: selectWidth }"
     filterable
     popper-class="switch-org"
     @change="changeOrg"
@@ -55,8 +54,7 @@ export default {
   },
   data() {
     return {
-      orgOption: [],
-      selectWidth: 'auto'
+      orgOption: []
     }
   },
   computed: {
@@ -109,55 +107,7 @@ export default {
       return currentOrgId
     }
   },
-  watch: {
-    currentOrg: {
-      handler() {
-        this.updateWidth()
-      },
-      deep: true
-    }
-  },
-  mounted() {
-    this.updateWidth()
-  },
   methods: {
-    updateWidth() {
-      this.$nextTick(() => {
-        // 创建临时元素来测量文本宽度
-        const tempSpan = document.createElement('span')
-        tempSpan.style.visibility = 'hidden'
-        tempSpan.style.position = 'absolute'
-        tempSpan.style.whiteSpace = 'nowrap'
-        tempSpan.style.fontSize = '14px'
-        tempSpan.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-        tempSpan.style.fontWeight = 'normal'
-        tempSpan.style.letterSpacing = 'normal'
-
-        // 获取当前组织名称
-        const orgName = this.currentOrg.name || this.$tc('Select')
-        tempSpan.textContent = orgName
-        document.body.appendChild(tempSpan)
-
-        // 测量文本宽度
-        const textWidth = tempSpan.offsetWidth
-
-        // 固定空间：左侧图标 + padding + 右侧箭头
-        const iconWidth = 15 // 左侧图标
-        const paddingWidth = 35 // 左右 padding
-        const arrowWidth = 20 // 右侧箭头
-        const totalWidth = textWidth + iconWidth + paddingWidth + arrowWidth
-
-        // 设置合理的边界
-        const minWidth = 100
-        const maxWidth = 400
-        const finalWidth = Math.max(minWidth, Math.min(maxWidth, totalWidth))
-
-        this.selectWidth = finalWidth + 'px'
-
-        // 清理临时元素
-        document.body.removeChild(tempSpan)
-      })
-    },
     changeOrg(orgId) {
       const org = this.usingOrgs.find(item => item.id === orgId)
 
@@ -171,7 +121,6 @@ export default {
         default:
           orgUtil.changeOrg(org, true, this)
       }
-      this.updateWidth()
     }
   }
 }

src/layout/components/NavHeader/Search.vue

@@ -337,7 +337,6 @@ export default {
   height: 40px;
   padding: 5px 0;
   min-width: 200px;
-  margin-right: 5px;
 
   .search-trigger {
     height: 30px;
@@ -346,39 +345,32 @@ export default {
     .search-input {
       height: 30px;
       line-height: 1;
-      background-color: rgba(5, 5, 5, 0.1);
+      background-color: rgba(255, 255, 255, 0.1);
       border-radius: 4px;
       cursor: pointer;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: rgba(0, 0, 0, 0.1);
       }
 
-      ::v-deep {
-        .el-input__inner {
-          height: 30px;
-          line-height: 1;
-          background: transparent;
-          border: none;
-          color: #fff;
-          cursor: pointer;
+      ::v-deep .el-input__inner {
+        height: 30px;
+        line-height: 1;
+        background: transparent;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+      }
 
-          &::placeholder {
-            color: #fff;
-            opacity: 0.7;
-          }
-        }
+      ::v-deep .el-input__inner::placeholder {
+        color: #fff;
+        opacity: 0.7;
+      }
 
-        .el-input__prefix .el-input__icon {
-          font-size: 15px;
-          line-height: 32px;
-        }
-
-        .el-input__suffix {
-          display: flex;
-          align-items: center;
-          height: 100%;
-        }
+      ::v-deep .el-input__suffix {
+        display: flex;
+        align-items: center;
+        height: 100%;
       }
 
       .search-shortcut {
@@ -402,9 +394,11 @@ export default {
     }
   }
 }
+</style>
 
+<style lang="scss">
 /* 搜索模态框全局样式 */
-::v-deep .search-modal {
+.search-modal {
   &.el-dialog {
     position: fixed;
     top: 5px;
@@ -413,7 +407,8 @@ export default {
     max-height: calc(100vh - 10px);
     max-width: calc(100vw - 10px);
     border-radius: 5px;
-    box-shadow: 0 0 8px 4px #00000014;
+    // box-shadow: 0 0 8px 4px #00000014;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
 
     .el-dialog__body {
       padding: 0;
@@ -425,17 +420,17 @@ export default {
   }
 }
 
-::v-deep body .v-modal {
+body .v-modal {
   opacity: 0.3;
 }
 
-::v-deep .search-modal-content {
+.search-modal-content {
   height: 70vh;
   display: flex;
   flex-direction: column;
 }
 
-::v-deep .search-input-wrapper {
+.search-input-wrapper {
   padding: 20px;
   border-bottom: 1px solid #f0f0f0;
   // background: #fff;
@@ -449,7 +444,7 @@ export default {
   }
 }
 
-::v-deep .search-results {
+.search-results {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
@@ -474,7 +469,7 @@ export default {
   }
 }
 
-::v-deep .section-title {
+.section-title {
   padding: 12px 24px 6px;
   font-size: 12px;
   line-height: 1.5;
@@ -503,12 +498,12 @@ export default {
 
     .clear-icon {
       font-size: 14px;
-      color: red;
+    color: red;
     }
   }
 }
 
-::v-deep .list {
+.list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -579,15 +574,15 @@ export default {
   }
 }
 
-::v-deep .loading,
-::v-deep .empty {
+.loading,
+.empty {
   padding: 32px 24px;
   color: #909399;
   text-align: center;
   font-size: 14px;
 }
 
-::v-deep .section.placeholder {
+.section.placeholder {
   padding: 32px 24px;
 
   .placeholder-content {
@@ -635,3 +630,4 @@ export default {
   }
 }
 </style>
+

src/layout/components/NavHeader/index.vue

@@ -167,16 +167,16 @@ export default {
       .organization {
         display: flex;
         align-items: center;
-        padding: 0 0 0 15px ;
+        padding: 0 0 0 15px !important;
         border-radius: 3px;
-        // background-color: rgba(5, 5, 5, 0.1);
+        background-color: rgba(255, 255, 255, 0.1);
         color: #fff;
         font-weight: 600;
         font-size: 15px;
         max-width: 250px;
 
         ::v-deep .el-input__inner {
-          padding-left: 20px;
+          padding-left: 25px;
         }
 
         ::v-deep .el-input.is-disabled > input {
@@ -184,7 +184,7 @@ export default {
         }
 
         &:hover {
-          background-color: rgba(0, 0, 0, 0.2);
+          background-color: rgba(0, 0, 0, 0.12) !important;
         }
       }
 

src/layout/components/TagsView/index.vue

@@ -276,8 +276,10 @@ export default {
     }
   }
 }
+</style>
 
-// reset element css of el-icon-close
+<style lang="scss">
+//reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {

src/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import ElementUI from 'element-ui'
+import ElementUI from 'elementui-lts'
 import locale from 'elementLocale'
 import '@/styles/index.scss' // global css
 import App from './App'
@@ -25,7 +25,6 @@ import xss from '@/utils/secure'
 import ElTableTooltipPatch from '@/utils/vue/elTableTooltipPatch.js'
 import VSanitize from 'v-sanitize'
 import moment from 'moment'
-
 moment.locale('zh-cn')
 
 /**
@@ -36,11 +35,10 @@ moment.locale('zh-cn')
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
-// 使用 mockXHR 无法使用 axios 中的 onUploadProgress 回调函数
-// if (process.env.NODE_ENV === 'development') {
-//   const { mockXHR } = require('../mock')
-//   mockXHR()
-// }
+if (process.env.NODE_ENV === 'development') {
+  const { mockXHR } = require('../mock')
+  mockXHR()
+}
 
 // set ElementUI lang to EN
 ElementUI.Tooltip.props.openDelay.default = 1000

src/router/console/acls.js

@@ -34,9 +34,7 @@ export default [
             name: 'UserLoginACLList',
             component: () => import('@/views/acls/UserLoginACL/UserLoginACLList.vue'),
             meta: {
-              title: i18n.t('UserLoginACLs'),
-              menuTitle: i18n.t('UserLogin'),
-              activeMenu: ''
+              title: i18n.t('UserLoginACLs'), menuTitle: i18n.t('UserLogin'), activeMenu: ''
             }
           },
           {
@@ -76,7 +74,7 @@ export default [
         },
         name: 'CmdACL',
         meta: {
-          title: i18n.t('CommandFilterACLs'),
+          title: i18n.t('CommandFilterACLs',),
           menuTitle: i18n.t('CommandFilter'),
           app: 'acls',
           resource: 'commandfilteracl'
@@ -138,11 +136,7 @@ export default [
             path: '',
             name: 'AssetACLList',
             component: () => import('@/views/acls/AssetLoginACL/AssetLoginAclList.vue'),
-            meta: {
-              title: i18n.t('AssetACLs'),
-              activeMenu: '',
-              menuTitle: i18n.t('AssetConnect')
-            }
+            meta: { title: i18n.t('AssetACLs'), activeMenu: '', menuTitle: i18n.t('AssetConnect') }
           },
           {
             path: 'create',
@@ -167,53 +161,6 @@ export default [
           }
         ]
       },
-      {
-        path: 'data-masking-rules',
-        component: empty,
-        redirect: {
-          name: 'DataMaskingRuleList'
-        },
-        name: 'DataMaskingRules',
-        meta: {
-          title: i18n.t('DataMasking'),
-          licenseRequired: true,
-          app: 'acls',
-          resource: 'datamaskingrule'
-        },
-        children: [
-          {
-            path: '',
-            name: 'DataMaskingRuleList',
-            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleList.vue'),
-            meta: {
-              title: i18n.t('DataMasking'),
-              activeMenu: '',
-              menuTitle: i18n.t('DataMasking')
-            }
-          },
-          {
-            path: 'create',
-            name: 'DataMaskingRuleCreate',
-            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
-            hidden: true,
-            meta: { title: '', activeMenu: '' }
-          },
-          {
-            path: ':id',
-            name: 'DataMaskingRuleDetail',
-            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleDetail/index'),
-            hidden: true,
-            meta: { title: i18n.t('AssetACLDetail'), activeMenu: '' }
-          },
-          {
-            path: ':id/update',
-            name: 'DataMaskingRuleUpdate',
-            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
-            hidden: true,
-            meta: { title: '', activeMenu: '' }
-          }
-        ]
-      },
       {
         path: 'cmd-groups',
         component: empty,
@@ -290,11 +237,7 @@ export default [
             path: '',
             name: 'ConnectMethodACLList',
             component: () => import('@/views/acls/ConnectMethodACL/ConnectMethodAclList.vue'),
-            meta: {
-              title: i18n.t('ConnectMethodACLs'),
-              activeMenu: '',
-              menuTitle: i18n.t('ConnectMethod')
-            }
+            meta: { title: i18n.t('ConnectMethodACLs'), activeMenu: '', menuTitle: i18n.t('ConnectMethod') }
           },
           {
             path: 'create',

src/styles/element-variables.scss

@@ -6,21 +6,19 @@
 
 /* Transition
 -------------------------- */
-$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
 $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition:
-  transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
-  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
-$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 
 /* Color
 -------------------------- */
 /// color|1|Brand Color|0
 $--color-primary: #1ab394 !default;
 /// color|1|Background Color|4
-$--color-white: #ffffff !default;
+$--color-white: #FFFFFF !default;
 /// color|1|Background Color|4
 $--color-black: #000000 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
@@ -57,19 +55,19 @@ $--color-text-regular: #606266 !default;
 /// color|1|Font Color|2
 $--color-text-secondary: #909399 !default;
 /// color|1|Font Color|2
-$--color-text-placeholder: #c0c4cc !default;
+$--color-text-placeholder: #C0C4CC !default;
 /// color|1|Border Color|3
-$--border-color-base: #dcdfe6 !default;
+$--border-color-base: #DCDFE6 !default;
 /// color|1|Border Color|3
-$--border-color-light: #e4e7ed !default;
+$--border-color-light: #E4E7ED !default;
 /// color|1|Border Color|3
-$--border-color-lighter: #ebeef5 !default;
+$--border-color-lighter: #EBEEF5 !default;
 /// color|1|Border Color|3
-$--border-color-extra-light: #f2f6fc !default;
+$--border-color-extra-light: #F2F6FC !default;
 
 // Background
 /// color|1|Background Color|4
-$--background-color-base: #f5f7fa !default;
+$--background-color-base: #F5F7FA !default;
 
 /* Link
 -------------------------- */
@@ -93,13 +91,9 @@ $--border-radius-zero: 0 !default;
 
 // Box-shadow
 /// boxShadow|1|Shadow|1
-$--box-shadow-base:
-  0 2px 4px rgba(0, 0, 0, 0.12),
-  0 0 6px rgba(0, 0, 0, 0.04) !default;
+$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
 // boxShadow|1|Shadow|1
-$--box-shadow-dark:
-  0 2px 4px rgba(0, 0, 0, 0.12),
-  0 0 6px rgba(0, 0, 0, 0.12) !default;
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
 /// boxShadow|1|Shadow|1
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
@@ -216,6 +210,8 @@ $--checkbox-button-checked-font-color: $--color-white !default;
 /// color||Color|0
 $--checkbox-button-checked-border-color: $--color-primary !default;
 
+
+
 /* Radio
 -------------------------- */
 /// fontSize||Font|1
@@ -484,8 +480,8 @@ $--cascader-menu-radius: $--border-radius-base !default;
 $--cascader-menu-border: solid 1px $--border-color-light !default;
 $--cascader-menu-shadow: $--box-shadow-light !default;
 $--cascader-node-background-hover: $--background-color-base !default;
-$--cascader-node-color-disabled: $--color-text-placeholder !default;
-$--cascader-color-empty: $--color-text-placeholder !default;
+$--cascader-node-color-disabled:$--color-text-placeholder !default;
+$--cascader-color-empty:$--color-text-placeholder !default;
 $--cascader-tag-background: #f0f2f5;
 
 /* Group
@@ -595,6 +591,7 @@ $--button-info-background-color: $--color-info !default;
 $--button-hover-tint-percent: 20% !default;
 $--button-active-shade-percent: 10% !default;
 
+
 /* cascader
 -------------------------- */
 $--cascader-height: 200px !default;
@@ -642,7 +639,7 @@ $--table-row-hover-background-color: $--background-color-base !default;
 $--table-current-row-background-color: $--color-primary-light-9 !default;
 /// color||Color|0
 $--table-header-background-color: $--color-white !default;
-$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
 
 /* Pagination
 -------------------------- */
@@ -830,8 +827,8 @@ $--loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
 --------------------------*/
-$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
-$--scrollbar-hover-background-color: rgba($--color-text-secondary, 0.5) !default;
+$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
+$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
 
 /* Carousel
 --------------------------*/
@@ -940,7 +937,7 @@ $--link-info-font-color: $--color-info !default;
 /// border||Other|4
 $--calendar-border: $--table-border !default;
 /// color||Other|4
-$--calendar-selected-background-color: #f2f8fe !default;
+$--calendar-selected-background-color: #F2F8FE !default;
 $--calendar-cell-width: 85px !default;
 
 /* Form
@@ -953,7 +950,7 @@ $--form-label-font-size: $--font-size-base !default;
 /// color||Color|0
 $--avatar-font-color: #fff !default;
 /// color||Color|0
-$--avatar-background-color: #c0c4cc !default;
+$--avatar-background-color: #C0C4CC !default;
 /// fontSize||Font Size|1
 $--avatar-text-font-size: 14px !default;
 /// fontSize||Font Size|1
@@ -975,52 +972,26 @@ $--lg: 1200px !default;
 $--xl: 1920px !default;
 
 $--breakpoints: (
-  'xs': (
-    max-width: $--sm - 1
-  ),
-  'sm': (
-    min-width: $--sm
-  ),
-  'md': (
-    min-width: $--md
-  ),
-  'lg': (
-    min-width: $--lg
-  ),
-  'xl': (
-    min-width: $--xl
-  )
+  'xs' : (max-width: $--sm - 1),
+  'sm' : (min-width: $--sm),
+  'md' : (min-width: $--md),
+  'lg' : (min-width: $--lg),
+  'xl' : (min-width: $--xl)
 );
 
 $--breakpoints-spec: (
-  'xs-only': (
-    max-width: $--sm - 1
-  ),
-  'sm-and-up': (
-    min-width: $--sm
-  ),
-  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
-  'sm-and-down': (
-    max-width: $--md - 1
-  ),
-  'md-and-up': (
-    min-width: $--md
-  ),
-  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
-  'md-and-down': (
-    max-width: $--lg - 1
-  ),
-  'lg-and-up': (
-    min-width: $--lg
-  ),
-  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
-  'lg-and-down': (
-    max-width: $--xl - 1
-  ),
-  'xl-only': (
-    min-width: $--xl
-  )
+  'xs-only' : (max-width: $--sm - 1),
+  'sm-and-up' : (min-width: $--sm),
+  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
+  'sm-and-down': (max-width: $--md - 1),
+  'md-and-up' : (min-width: $--md),
+  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
+  'md-and-down': (max-width: $--lg - 1),
+  'lg-and-up' : (min-width: $--lg),
+  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
+  'lg-and-down': (max-width: $--xl - 1),
+  'xl-only' : (min-width: $--xl),
 );
 
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-@import '~element-ui/packages/theme-chalk/src/index';
+$--font-path: '~elementui-lts/lib/theme-chalk/fonts';
+@import "~elementui-lts/packages/theme-chalk/src/index";

src/styles/index.scss

@@ -242,10 +242,6 @@ input[type='file'] {
   color: #737373 !important;
 }
 
-.el-select-dropdown.switch-org {
-  width: 220px;
-}
-
 @media screen and (max-width: 992px) {
   .el-select-dropdown.switch-org {
     left: 0 !important;

src/utils/request.js

@@ -3,7 +3,7 @@ import i18n from '@/i18n/i18n'
 import { eventBus } from '@/utils/vue/eventbus'
 import { getTokenFromCookie } from '@/utils/jms/auth'
 import { getErrorResponseMsg } from '@/utils/common'
-import { MessageBox } from 'element-ui'
+import { MessageBox } from 'elementui-lts'
 import { message } from '@/utils/vue/message'
 import store from '@/store'
 import axiosRetry from 'axios-retry'

src/utils/vue/elTableTooltipPatch.js

@@ -1,7 +1,7 @@
 // 鼠标可移入tooltip功能
-import { Table } from 'element-ui'
-import { getCell, getColumnByCell } from 'element-ui/packages/table/src/util'
-import { getStyle, hasClass } from 'element-ui/src/utils/dom'
+import { Table } from 'elementui-lts'
+import { getCell, getColumnByCell } from 'elementui-lts/packages/table/src/util'
+import { getStyle, hasClass } from 'elementui-lts/src/utils/dom'
 import { copy } from '../common/index'
 
 Object.assign(Table.components.TableBody.methods, {

src/views/accounts/AccountDiscover/DeleteDialog.vue

@@ -116,7 +116,6 @@ export default {
   },
   methods: {
     handleConfirm() {
-      this.$message.warning(this.$tc('ProcessingMessage'))
       const url = `/api/v1/accounts/gathered-accounts/${this.account.id}/`
       this.$axios.delete(url, {
         params: {

src/views/accounts/RiskDetect/RiskHandlerFormatter/index.vue

@@ -141,9 +141,9 @@ export default {
     },
     async handleCommon(cmd, payload) {
       let rows = this.rows
-      this.processing = true
       if (this.rows.length === 0) {
         rows = [this.row]
+        this.processing = true
       }
       if (!payload) {
         payload = {}

src/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue

@@ -1,62 +0,0 @@
-<template>
-  <GenericCreateUpdatePage v-bind="$data" />
-</template>
-
-<script>
-import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { userJSONSelectMeta } from '@/views/users/const'
-import { assetJSONSelectMeta } from '@/views/assets/const'
-import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter.vue'
-
-export default {
-  name: 'DataMaskingRuleCreateUpdate',
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      initial: {
-        accounts: ['@ALL']
-      },
-      fields: [
-        [this.$t('Basic'), ['name', 'priority']],
-        [this.$t('Users'), ['users']],
-        [this.$t('Asset'), ['assets']],
-        [this.$t('Accounts'), ['accounts']],
-        [this.$t('Rules'), ['fields_pattern', 'masking_method', 'mask_pattern']],
-        [this.$t('Other'), ['is_active', 'comment']]
-      ],
-      fieldsMeta: {
-        assets: assetJSONSelectMeta(this),
-        users: userJSONSelectMeta(this),
-        accounts: {
-          component: AccountFormatter,
-          el: {
-            showAddTemplate: false,
-            enableVirtualAccount: false,
-            value: ['@ALL'],
-            assets: []
-          },
-          hidden: (formValue) => {
-            const ids = formValue.assets?.ids
-            this.fieldsMeta.accounts.el.assets = ids || []
-          }
-        },
-        fields_pattern: {
-          helpTip: this.$t('DataMaskingFieldsPatternHelpTip')
-        },
-        mask_pattern: {
-          hidden: (formValue) => {
-            return !['fixed_char'].includes(formValue.masking_method)
-          }
-        }
-      },
-      url: '/api/v1/acls/data-masking-rules/'
-    }
-  },
-  methods: {}
-}
-</script>
-
-<style>
-</style>

src/views/acls/DataMaskingRule/DataMaskingRuleDetail/Detail.vue

@@ -1,39 +0,0 @@
-<template>
-  <TwoCol>
-    <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
-  </TwoCol>
-</template>
-
-<script>
-import AutoDetailCard from '@/components/Cards/DetailCard/auto'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'
-
-export default {
-  name: 'Detail',
-  components: {
-    TwoCol,
-    AutoDetailCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => {
-      }
-    }
-  },
-  data() {
-    return {
-      url: `/api/v1/acls/data-masking-rules/${this.object.id}/`,
-      detailFields: [
-        'name', 'fields_pattern', 'masking_method', 'mask_pattern',
-        'priority', 'date_created', 'created_by', 'comment'
-      ]
-    }
-  },
-  computed: {}
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/acls/DataMaskingRule/DataMaskingRuleDetail/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="instance" v-bind="config" v-on="$listeners">
-    <keep-alive>
-      <component :is="config.activeMenu" :object="instance" />
-    </keep-alive>
-  </GenericDetailPage>
-</template>
-
-<script>
-import { GenericDetailPage } from '@/layout/components'
-import Detail from './Detail.vue'
-import UserJsonTab from '@/components/Apps/ManyJsonTabs/UserJsonTab.vue'
-import AssetJsonTab from '@/components/Apps/ManyJsonTabs/AssetJsonTab.vue'
-
-export default {
-  components: {
-    GenericDetailPage,
-    Detail,
-    UserJsonTab,
-    AssetJsonTab
-  },
-  data() {
-    return {
-      instance: {},
-      config: {
-        url: `/api/v1/acls/data-masking-rules/`,
-        activeMenu: 'Detail',
-        submenu: [
-          {
-            title: this.$t('Basic'),
-            name: 'Detail'
-          },
-          {
-            title: this.$t('MenuUsers'),
-            name: 'UserJsonTab'
-          },
-          {
-            title: this.$t('Assets'),
-            name: 'AssetJsonTab'
-          }
-        ],
-        hasRightSide: true
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/acls/DataMaskingRule/DataMaskingRuleList.vue

@@ -1,35 +0,0 @@
-<template>
-  <GenericListPage :header-actions="headerActions" :help-tip="helpMsg" :table-config="tableConfig" />
-</template>
-
-<script>
-import { GenericListPage } from '@/layout/components'
-
-export default {
-  components: {
-    GenericListPage
-  },
-  data() {
-    return {
-      helpMsg: this.$t('DataMaskingRuleHelpHelpMsg'),
-      tableConfig: {
-        url: '/api/v1/acls/data-masking-rules/',
-        columnsExclude: ['users', 'assets', 'accounts', 'rules', 'reviewers', 'action'],
-        columnsShow: {
-          min: ['name', 'actions'],
-          default: [
-            'name', 'priority', 'is_active', 'comment', 'actions'
-          ]
-        }
-      },
-      updateRoute: 'DataMaskingRuleUpdate',
-      headerActions: {
-        createRoute: 'DataMaskingRuleCreate',
-        hasRefresh: true,
-        hasExport: false,
-        hasImport: false
-      }
-    }
-  }
-}
-</script>

src/views/acls/index.vue

@@ -31,7 +31,7 @@ export default {
             id: 'connect-asset',
             display_name: this.$t('AssetACLs'),
             name: 'AssetACLList',
-            comment: this.$t('DataMaskingRuleHelpHelpText'),
+            comment: this.$t('AssetLoginACLHelpText'),
             icon: 'assets',
             edition: 'enterprise',
             tags: ['asset']

src/views/assets/Cloud/Account/components/AssetPanel.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="asset-panel">
-    <el-alert :center="false" :closable="true" style="margin-bottom: 6px">
+    <el-alert
+      :center="false"
+      :closable="true"
+      style="margin-bottom: 6px"
+    >
       <el-link :icon="linkIcon" :type="linkType" :underline="false"> {{ tip }}</el-link>
     </el-alert>
     <ImportTable
@@ -14,8 +18,9 @@
 </template>
 
 <script>
+
 import ImportTable from '@/components/Table/ListTable/TableAction/ImportTable'
-import _isequal from 'lodash/isEqual'
+import _isequal from 'lodash.isequal'
 
 export default {
   name: 'AssetPanel',
@@ -109,19 +114,16 @@ export default {
       const url = '/ws/xpack/cloud/'
       const wsURL = scheme + '://' + document.location.hostname + port + url
       this.ws = new WebSocket(wsURL)
-      this.ws.onopen = e => {
+      this.ws.onopen = (e) => {
         this.settings.disableImportBtn = true
-        this.ws.send(
-          JSON.stringify({
-            action: 'sync_task',
-            account_id: this.object.id
-          })
-        )
+        this.ws.send(JSON.stringify({
+          action: 'sync_task', account_id: this.object.id
+        }))
       }
       this.ws.onerror = () => {
         this.$message.error(this.$tc('ConnectWebSocketError'))
       }
-      this.ws.onmessage = e => {
+      this.ws.onmessage = (e) => {
         const data = JSON.parse(e.data)
         if (data.action === 'sync_region') {
           this.addRegion(data.region_id)
@@ -161,5 +163,6 @@ export default {
 <style lang="scss" scoped>
 .asset-panel {
   display: block;
+
 }
 </style>

src/views/assets/Platform/PlatformDetail/Detail.vue

@@ -143,20 +143,7 @@ export default {
             disabled: !this.canEdit
           },
           callbacks: Object.freeze({
-            click: async () => {
-              try {
-                await this.$confirm(
-                  this.$t('overwriteProtocolsAndPortsMsg'),
-                  this.$t('Confirm'),
-                  {
-                    confirmButtonText: this.$t('Confirm'),
-                    cancelButtonText: this.$t('Cancel'),
-                    type: 'warning'
-                  }
-                )
-              } catch (e) {
-                return
-              }
+            click: () => {
               const data = { platform_id: this.object.id }
               this.$axios.post(
                 '/api/v1/assets/assets/sync-platform-protocols/', data).then(res => {

src/views/assets/Zone/ZoneCreateUpdate.vue

@@ -25,7 +25,10 @@ export default {
           component: AssetSelect,
           el: {
             value: [],
-            baseUrl: '/api/v1/assets/assets/',
+            baseUrl: '/api/v1/assets/assets/?gateway_enabled=true',
+            treeUrlQuery: {
+              gateway_enabled: true
+            },
             canSelect: (row) => {
               return !row.platform?.name.startsWith('Gateway')
             }

src/views/assets/Zone/components/AddAssetDialog.vue

@@ -62,7 +62,10 @@ export default {
             type: 'select2',
             el: {
               value: [],
-              url: '/api/v1/assets/assets/',
+              url: '/api/v1/assets/assets/?gateway_enabled=true',
+              treeUrlQuery: {
+                gateway_enabled: true
+              },
               canSelect: (row) => {
                 return !row.platform?.name.startsWith('Gateway') && this.object.assets.map(item => item.id).indexOf(row.id) === -1
               }

src/views/assets/Zone/components/AddGatewayDialog.vue

@@ -65,7 +65,7 @@ export default {
               multiple: true,
               clearable: true,
               ajax: {
-                url: '/api/v1/assets/assets/?is_gateway=1'
+                url: '/api/v1/assets/assets/?gateway_enabled=true&is_gateway=1'
               },
               disabledValues: this.object.gateways.map(item => item.id)
             }

src/views/login/index.vue

@@ -125,21 +125,17 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$input-bg: #283443;
-$input-light-gray: #fff;
-$input-cursor: #fff;
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
 
-$login-bg: #2d3a4b;
-$login-dark-gray: #889aa4;
-$login-light-gray: #eee;
-
-@supports (-webkit-mask: none) and (not (cater-color: $input-cursor)) {
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
   .login-container .el-input input {
-    color: $input-cursor;
+    color: $cursor;
   }
 }
 
@@ -151,17 +147,17 @@ $login-light-gray: #eee;
 
     input {
       background: transparent;
-      border: 0;
+      border: 0px;
       -webkit-appearance: none;
-      border-radius: 0;
+      border-radius: 0px;
       padding: 12px 5px 12px 15px;
-      color: $input-light-gray;
+      color: $light_gray;
       height: 47px;
-      caret-color: $input-cursor;
+      caret-color: $cursor;
 
       &:-webkit-autofill {
-        box-shadow: 0 0 0 1000px $input-bg inset !important;
-        -webkit-text-fill-color: $input-cursor !important;
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
       }
     }
   }
@@ -173,11 +169,17 @@ $login-light-gray: #eee;
     color: #454545;
   }
 }
+</style>
+
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
 
 .login-container {
   min-height: 100%;
   width: 100%;
-  background-color: $login-bg;
+  background-color: $bg;
   overflow: hidden;
 
   .login-form {
@@ -203,7 +205,7 @@ $login-light-gray: #eee;
 
   .svg-container {
     padding: 6px 5px 6px 15px;
-    color: $login-dark-gray;
+    color: $dark_gray;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
@@ -214,7 +216,7 @@ $login-light-gray: #eee;
 
     .title {
       font-size: 26px;
-      color: $login-light-gray;
+      color: $light_gray;
       margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
@@ -226,7 +228,7 @@ $login-light-gray: #eee;
     right: 10px;
     top: 7px;
     font-size: 16px;
-    color: $login-dark-gray;
+    color: $dark_gray;
     cursor: pointer;
     user-select: none;
   }

src/views/ops/Adhoc/QuickJob.vue

@@ -1,10 +1,6 @@
 <template>
   <Page>
-    <AdhocOpenDialog
-      v-if="showOpenAdhocDialog"
-      :visible.sync="showOpenAdhocDialog"
-      @select="onSelectAdhoc"
-    />
+    <AdhocOpenDialog v-if="showOpenAdhocDialog" :visible.sync="showOpenAdhocDialog" @select="onSelectAdhoc" />
     <AdhocSaveDialog
       v-if="showOpenAdhocSaveDialog"
       :args="command"
@@ -24,37 +20,38 @@
       :assets="classifiedAssets"
       @submit="onConfirmRunAsset"
     />
-    <div class="job-container">
-      <div class="select-assets">
-        <SelectJobAssetDialog @change="handleSelectAssets" />
-      </div>
-      <div class="transition-box" style="width: calc(100% - 17px)">
-        <CodeEditor
-          v-if="ready"
-          :options="cmOptions"
-          :toolbar="toolbar"
-          :value.sync="command"
-          style="margin-bottom: 20px"
-        />
-        <span v-if="executionInfo.status" style="float: right" />
-        <div class="xterm-container">
-          <QuickJobTerm
-            ref="xterm"
-            :show-tool-bar="true"
-            :select-assets="selectAssets"
-            :xterm-config="xtermConfig"
-            :execution-info="executionInfo"
-            @view-assets="viewConfirmRunAssets"
+    <AssetTreeTable ref="TreeTable" :tree-setting="treeSetting">
+      <template slot="table">
+        <div class="transition-box" style="width: calc(100% - 17px);">
+          <CodeEditor
+            v-if="ready"
+            :options="cmOptions"
+            :toolbar="toolbar"
+            :value.sync="command"
+            style="margin-bottom: 20px"
           />
+          <span v-if="executionInfo.status" style="float: right" />
+          <div class="xterm-container">
+            <QuickJobTerm
+              ref="xterm"
+              :show-tool-bar="true"
+              :select-assets="selectAssets"
+              :xterm-config="xtermConfig"
+              :execution-info="executionInfo"
+              @view-assets="viewConfirmRunAssets"
+            />
+          </div>
+          <div style="display: flex;margin-top:10px;justify-content: space-between" />
         </div>
-        <div style="display: flex; margin-top: 10px; justify-content: space-between" />
-      </div>
-    </div>
+      </template>
+    </AssetTreeTable>
   </Page>
 </template>
 
 <script>
-import _isequal from 'lodash/isEqual'
+import $ from '@/utils/jquery-vendor.js'
+import _isequal from 'lodash.isequal'
+import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import QuickJobTerm from '@/views/ops/Adhoc/components/QuickJobTerm.vue'
 import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 import Page from '@/layout/components/Page'
@@ -64,16 +61,15 @@ import VariableHelpDialog from './VariableHelpDialog.vue'
 import ConfirmRunAssetsDialog from './components/ConfirmRunAssetsDialog.vue'
 import SetVariableDialog from '@/views/ops/Template/components/SetVariableDialog.vue'
 import { createJob, getJob, getTaskDetail, stopJob } from '@/api/ops'
-import SelectJobAssetDialog from './components/SelectJobAssetDialog.vue'
 
 export default {
   name: 'CommandExecution',
   components: {
-    SelectJobAssetDialog,
     VariableHelpDialog,
     AdhocSaveDialog,
     AdhocOpenDialog,
     SetVariableDialog,
+    AssetTreeTable,
     Page,
     QuickJobTerm,
     CodeEditor,
@@ -95,6 +91,7 @@ export default {
       showOpenAdhocSaveDialog: false,
       showSetVariableDialog: false,
       showConfirmRunAssetsDialog: false,
+      DataZTree: 0,
       runas: '',
       runasPolicy: 'skip',
       chdir: '',
@@ -112,7 +109,7 @@ export default {
             align: 'left',
             icon: 'fa fa-play',
             tip: this.$t('RunCommand'),
-            disabled: this.$store.getters.currentOrgIsRoot,
+            isVisible: this.$store.getters.currentOrgIsRoot,
             el: {
               type: 'primary'
             },
@@ -144,7 +141,7 @@ export default {
             align: 'left',
             value: '',
             placeholder: this.$tc('EnterRunUser'),
-            tip: this.$tc('RunasHelpText'),
+            // tip: this.$tc('RunasHelpText'),
             el: {
               autoComplete: true,
               query: (query, cb) => {
@@ -155,22 +152,20 @@ export default {
                   return cb([])
                 }
                 cb([]) // 先返回空，避免输入时出现下拉闪烁
-                this.$axios
-                  .post('/api/v1/ops/username-hints/', {
-                    nodes: nodes,
-                    assets: hosts,
-                    query: query
-                  })
-                  .then(data => {
-                    const ns = data.map(item => {
-                      return { value: item.username }
-                    })
-                    cb(ns)
+                this.$axios.post('/api/v1/ops/username-hints/', {
+                  nodes: nodes,
+                  assets: hosts,
+                  query: query
+                }).then(data => {
+                  const ns = data.map(item => {
+                    return { value: item.username }
                   })
+                  cb(ns)
+                })
               }
             },
             options: [],
-            callback: option => {
+            callback: (option) => {
               this.runas = option
             }
           },
@@ -184,8 +179,7 @@ export default {
               {
                 label: this.$tc('Skip'),
                 value: 'skip'
-              },
-              {
+              }, {
                 label: this.$tc('PrivilegedFirst'),
                 value: 'privileged_first'
               },
@@ -194,7 +188,7 @@ export default {
                 value: 'privileged_only'
               }
             ],
-            callback: option => {
+            callback: (option) => {
               this.runasPolicy = option
             }
           },
@@ -205,39 +199,31 @@ export default {
             value: 'shell',
             options: [
               {
-                label: 'Shell',
-                value: 'shell'
+                label: 'Shell', value: 'shell'
               },
               {
-                label: 'Powershell',
-                value: 'win_shell'
+                label: 'Powershell', value: 'win_shell'
               },
               {
-                label: 'Raw',
-                value: 'raw'
+                label: 'Raw', value: 'raw'
               },
               {
-                label: 'Python',
-                value: 'python'
+                label: 'Python', value: 'python'
               },
               {
-                label: 'MySQL',
-                value: 'mysql'
+                label: 'MySQL', value: 'mysql'
               },
               {
-                label: 'PostgreSQL',
-                value: 'postgresql'
+                label: 'PostgreSQL', value: 'postgresql'
               },
               {
-                label: 'SQLServer',
-                value: 'sqlserver'
+                label: 'SQLServer', value: 'sqlserver'
               },
               {
-                label: 'CloudEngine',
-                value: 'huawei'
+                label: 'CloudEngine', value: 'huawei'
               }
             ],
-            callback: option => {
+            callback: (option) => {
               this.cmOptions.mode = option === 'win_shell' ? 'powershell' : option
               this.module = option
             }
@@ -254,7 +240,7 @@ export default {
               { label: '30', value: 30 },
               { label: '60', value: 60 }
             ],
-            callback: option => {
+            callback: (option) => {
               this.timeout = option
             }
           },
@@ -265,7 +251,7 @@ export default {
             value: '',
             placeholder: this.$tc('EnterRunningPath'),
             tip: this.$tc('RunningPathHelpText'),
-            callback: val => {
+            callback: (val) => {
               this.chdir = val
             }
           }
@@ -309,6 +295,30 @@ export default {
         lineWrapping: true,
         mode: 'shell'
       },
+      treeSetting: {
+        treeUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/',
+        searchUrl: '/api/v1/perms/users/self/assets/tree/',
+        showRefresh: true,
+        showMenu: false,
+        showSearch: true,
+        notShowBuiltinTree: true,
+        check: {
+          enable: true
+        },
+        view: {
+          dblClickExpand: false,
+          showLine: true
+        },
+        callback: {
+          onCheck: function(_event, treeId, treeNode) {
+            const treeObj = $.fn.zTree.getZTreeObj(treeId)
+            if (treeNode.checked) {
+              treeObj.expandNode(treeNode, true, false, true)
+            }
+          }
+        }
+      },
+      iShowTree: true,
       variableFormData: [],
       variableQueryParam: '',
       classifiedAssets: {
@@ -318,7 +328,6 @@ export default {
       },
       selectAssets: [],
       selectNodes: [],
-      selectHosts: [],
       lastRequestPayload: null
     }
   },
@@ -326,6 +335,9 @@ export default {
     xterm() {
       return this.$refs.xterm.xterm
     },
+    ztree() {
+      return this.$refs.TreeTable.$refs.TreeList.$refs.AutoDataZTree.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree
+    },
     isRunning() {
       return this.executionInfo.status.value === 'running'
     }
@@ -345,9 +357,6 @@ export default {
     async initData() {
       this.recoverStatus()
     },
-    handleSelectAssets(assets) {
-      this.selectHosts = assets
-    },
     recoverStatus() {
       if (this.$route.query.taskId) {
         this.currentTaskId = this.$route.query.taskId
@@ -371,7 +380,7 @@ export default {
       }
     },
     onSelectAdhoc(adhoc) {
-      this.variableFormData = adhoc?.variable.map(data => {
+      this.variableFormData = adhoc?.variable.map((data) => {
         return data.form_data
       })
       this.variableQueryParam = 'adhoc=' + adhoc.id
@@ -383,20 +392,17 @@ export default {
       const url = '/ws/ops/tasks/log/'
       const wsURL = scheme + '://' + document.location.hostname + port + url
       this.ws = new WebSocket(wsURL)
-      this.ws.onerror = e => {
+      this.ws.onerror = (e) => {
         this.xterm.write(this.wrapperError('Connect websocket server error'))
       }
       this.setWsCallback()
     },
     setWsCallback() {
-      this.ws.onmessage = e => {
+      this.ws.onmessage = (e) => {
         const data = JSON.parse(e.data)
         if (data.hasOwnProperty('message')) {
           let message = data.message
-          message = message.replace(
-            /\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} Task ops\.tasks\.run_ops_job_execution.*/,
-            ''
-          )
+          message = message.replace(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} Task ops\.tasks\.run_ops_job_execution.*/, '')
           this.xterm.write(message)
         }
         if (data.hasOwnProperty('event')) {
@@ -426,6 +432,13 @@ export default {
       msg = JSON.stringify({ task: this.currentTaskId })
       this.ws.send(msg)
     },
+    getSelectedNodes() {
+      return this.ztree.getCheckedNodes().filter(node => {
+        const status = node.getCheckStatus()
+        return node.id !== 'search' && status.half === false
+      })
+    },
+
     setCostTimeInterval() {
       this.toolbar.left.run.icon = 'fa fa-spinner fa-spin'
       this.toolbar.left.run.isVisible = true
@@ -435,8 +448,17 @@ export default {
     },
 
     getSelectedNodesAndHosts() {
-      const hosts = this.selectHosts
-      const nodes = []
+      const hosts = this.getSelectedNodes().filter((item) => {
+        return item.meta.type !== 'node'
+      }).map(function(node) {
+        return node.id
+      })
+
+      const nodes = this.getSelectedNodes().filter((item) => {
+        return item.meta.type === 'node'
+      }).map(function(node) {
+        return node.meta.data.id
+      })
       return { hosts, nodes }
     },
     shouldReRequest(payload) {
@@ -448,7 +470,8 @@ export default {
     execute() {
       // const size = 'rows=' + this.xterm.rows + '&cols=' + this.xterm.cols
       const { hosts, nodes } = this.getSelectedNodesAndHosts()
-      if (this.selectHosts.length === 0) {
+
+      if (hosts.length === 0 && nodes.length === 0) {
         this.$message.error(this.$tc('RequiredAssetOrNode'))
         return
       }
@@ -474,18 +497,16 @@ export default {
       }
 
       this.lastRequestPayload = { ...payload }
-      this.$axios
-        .post('/api/v1/ops/classified-hosts/', {
-          ...payload
-        })
-        .then(data => {
-          this.classifiedAssets = data
-          if (this.classifiedAssets.error.length === 0) {
-            this.onConfirmRunAsset(hosts, nodes)
-          } else {
-            this.showConfirmRunAssetsDialog = true
-          }
-        })
+      this.$axios.post('/api/v1/ops/classified-hosts/', {
+        ...payload
+      }).then(data => {
+        this.classifiedAssets = data
+        if (this.classifiedAssets.error.length === 0) {
+          this.onConfirmRunAsset(hosts, nodes)
+        } else {
+          this.showConfirmRunAssetsDialog = true
+        }
+      })
     },
     onConfirmRunAsset(assets, nodes) {
       const data = {
@@ -515,30 +536,22 @@ export default {
         this.setBtn()
         this.selectAssets = assets
         this.selectNodes = nodes
-      }).catch(() => {
-        this.lastRequestPayload = null
       })
     },
     viewConfirmRunAssets() {
       this.showConfirmRunAssetsDialog = true
     },
     stop() {
-      stopJob({ task_id: this.currentTaskId })
-        .then(() => {
-          this.xterm.write(
-            '\x1b[31m' +
-            this.$tc('StopLogOutput').replace('currentTaskId', this.currentTaskId) +
-            '\x1b[0m'
-          )
-          this.xterm.write(this.wrapperError(''))
-          this.getTaskStatus()
-        })
-        .catch(e => {
-          this.$log.error(e)
-        })
-        .finally(() => {
-          this.setBtn()
-        })
+      stopJob({ task_id: this.currentTaskId }).then(() => {
+        this.xterm.write('\x1b[31m' +
+          this.$tc('StopLogOutput').replace('currentTaskId', this.currentTaskId) + '\x1b[0m')
+        this.xterm.write(this.wrapperError(''))
+        this.getTaskStatus()
+      }).catch((e) => {
+        this.$log.error(e)
+      }).finally(() => {
+        this.setBtn()
+      })
     },
     setBtn() {
       if (!this.isRunning) {
@@ -559,13 +572,6 @@ export default {
 
 <style lang="scss" scoped>
 $container-bg-color: #f7f7f7;
-.job-container {
-  display: flex;
-
-  .select-assets {
-    width: 23.6%;
-  }
-}
 
 .transition-box {
   display: flex;
@@ -585,7 +591,7 @@ $container-bg-color: #f7f7f7;
 
       & ::v-deep .xterm {
         height: calc(100% - 8px);
-        overflow-y: hidden;
+        overflow-y: auto;
       }
     }
   }
@@ -598,24 +604,55 @@ $container-bg-color: #f7f7f7;
   padding: 5px 0;
   background-color: var(--color-primary);
   border-color: var(--color-primary);
-  color: #ffffff;
+  color: #FFFFFF;
   border-radius: 2px;
 }
 
+.el-tree {
+  background-color: inherit !important;
+}
+
 .mini {
   margin-right: 5px;
   width: 12px !important;
 }
 
+.auto-data-ztree {
+  overflow: auto;
+  /*border-right: solid 1px red;*/
+}
+
 .vue-codemirror-wrap ::v-deep .CodeMirror {
   width: 600px;
   height: 100px;
   border: 1px solid #eee;
 }
 
+.tree-box {
+  margin-right: 2px;
+  border: 1px solid #e0e0e0;
+
+  ::v-deep .ztree {
+    .level0 {
+      .node_name {
+        max-width: 100px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: inline-block;
+      }
+    }
+  }
+}
+
 .output {
   padding-left: 30px;
   background-color: rgb(247 247 247);
-  border: solid 1px #f3f3f3;
+  border: solid 1px #f3f3f3;;
+}
+
+.tree-table-content {
+  ::v-deep .left {
+    padding-top: 4px;
+  }
 }
 </style>

src/views/ops/Adhoc/VariableHelpDialog.vue

@@ -67,28 +67,28 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .help-dialog.dialog .el-dialog__footer {
+<style>
+.help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
+</style>
 
+<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
-}
 
-::v-deep .help-table th,
-::v-deep .help-table td {
-  height: 40px;
-  padding: 0 8px;
-  text-align: left;
-}
+  &::v-deep th, td {
+    height: 40px;
+    padding: 0 8px;
+    text-align: left;
+  }
 
-::v-deep .help-table .item-td,
-::v-deep .help-table .item-label {
-  cursor: pointer;
-  color: var(--color-primary);
+  &::v-deep .item-td, .item-label {
+    cursor: pointer;
+    color: var(--color-primary);
+  }
 }
 </style>

src/views/ops/Adhoc/components/SelectJobAssetDialog.vue

@@ -1,378 +0,0 @@
-<template>
-  <div class="asset-select">
-    <el-card>
-      <div slot="header" class="clearfix">
-        <span>{{ $t('selectedAssets') }}({{ selectAssets.length }})</span>
-        <el-button
-          v-if="selectAssets.length > 0"
-          style="float: right; padding: 3px 0"
-          type="text"
-          @click="handleClick"
-        >
-          {{ $t('pleaseSelectAssets') }}
-        </el-button>
-      </div>
-      <div
-        v-if="selectAssets.length === 0"
-        class="empty-assets"
-        role="button"
-        tabindex="0"
-        aria-label="Select assets"
-        @click=" handleClick()"
-      >
-        <i class="icon el-icon-plus" />
-        <span class="title">{{ $t('pleaseSelectAssets') }}</span>
-        <span class="subtitle">{{ $t('clickToAdd') }}</span>
-      </div>
-      <div v-else class="asset-list">
-        <div
-          v-for="group in groupedAssets"
-          :key="group.key"
-          class="platform-group"
-        >
-          <div class="platform-group-header">
-            <el-checkbox
-              :indeterminate="isPlatformIndeterminate(group)"
-              :value="isPlatformAllSelected(group)"
-              @change="val => togglePlatformAll(group, val)"
-            >
-              <span class="platform-title">
-                <img
-                  v-if="group.assets.length"
-                  :src="getPlatformLogo(group.assets[0])"
-                  class="platform-icon"
-                >
-                {{ group.platformName }} ({{ group.assets.length }})
-              </span>
-            </el-checkbox>
-          </div>
-          <el-checkbox-group
-            v-model="selectAssets"
-            class="platform-group-assets"
-            @change="onCheckboxChange"
-          >
-            <el-checkbox
-              v-for="item in group.assets"
-              :key="item.id"
-              :label="item.id"
-            >
-              <span
-                :title="item.name"
-                class="asset-name"
-              >{{ item.name }}</span>
-              <i
-                class="el-icon-minus asset-remove-icon"
-                :title="$tc('Remove')"
-                @click.stop="removeAsset(item)"
-              />
-            </el-checkbox>
-          </el-checkbox-group>
-        </div>
-      </div>
-    </el-card>
-
-    <AssetSelectDialog
-      v-if="dialogVisible"
-      ref="dialog"
-      :base-node-url="baseNodeUrl"
-      :base-url="baseUrl"
-      :tree-setting="treeSetting"
-      :tree-url-query="treeUrlQuery"
-      :value="selectAssets"
-      :visible.sync="dialogVisible"
-      v-bind="$attrs"
-      @cancel="handleCancel"
-      @confirm="handleConfirm"
-      v-on="$listeners"
-    />
-  </div>
-</template>
-
-<script>
-import AssetSelectDialog from '@/components/Apps/AssetSelect/dialog.vue'
-import { loadPlatformIcon } from '@/utils/jms/index'
-
-export default {
-  componentName: 'SelectJobAssetDialog',
-  components: { AssetSelectDialog },
-  props: {
-    baseUrl: {
-      type: String,
-      default: '/api/v1/perms/users/self/assets/'
-    },
-    defaultPageSize: {
-      type: Number,
-      default: 10
-    },
-    baseNodeUrl: {
-      type: String,
-      default: '/api/v1/perms/users/self/nodes/'
-    },
-    treeUrlQuery: {
-      type: Object,
-      default: () => {
-      }
-    },
-    value: {
-      type: Array,
-      default: () => []
-    },
-    treeSetting: {
-      type: Object,
-      default: () => ({})
-    },
-    disabled: {
-      type: [Boolean, Function],
-      default: false
-    }
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      selectAssetRows: [],
-      selectAssets: []
-    }
-  },
-  computed: {
-    groupedAssets() {
-      const map = {}
-      this.selectAssetRows.forEach(a => {
-        const key = a?.type?.value || 'unknown'
-        const name = a?.type?.label || a?.type?.value || 'Unknown'
-        if (!map[key]) {
-          map[key] = { key, platformName: name, assets: [] }
-        }
-        map[key].assets.push(a)
-      })
-      return Object.values(map)
-        .map(g => {
-          g.assets = g.assets.slice().sort((x, y) => (x.name || '').localeCompare(y.name || ''))
-          return g
-        })
-        .sort((a, b) => a.platformName.localeCompare(b.platformName))
-    }
-  },
-  methods: {
-    handleClick() {
-      this.dialogVisible = true
-    },
-    handleConfirm(valueSelected, rowsAdd) {
-      if (valueSelected === undefined) {
-        return
-      }
-      this.$emit('change', valueSelected)
-      rowsAdd.forEach(item => {
-        if (!this.selectAssetRows.find(i => i.id === item.id)) {
-          this.selectAssetRows.push(item)
-        }
-      })
-      // 移除已经取消选择的资产
-      this.selectAssetRows = this.selectAssetRows.filter(r => valueSelected.includes(r.id))
-      this.selectAssets = valueSelected
-      this.dialogVisible = false
-    },
-    handleCancel() {
-      this.dialogVisible = false
-    },
-    getPlatformLogo(platform) {
-      return loadPlatformIcon(platform.name, platform.type.value)
-    },
-    onCheckboxChange(value) {
-      this.selectAssets = value
-      this.$emit('change', value)
-    },
-    isPlatformAllSelected(group) {
-      return group.assets.length > 0 && group.assets.every(a => this.selectAssets.includes(a.id))
-    },
-    isPlatformIndeterminate(group) {
-      const selected = group.assets.filter(a => this.selectAssets.includes(a.id)).length
-      return selected > 0 && selected < group.assets.length
-    },
-    togglePlatformAll(group, checked) {
-      const ids = group.assets.map(a => a.id)
-      if (checked) {
-        const merged = new Set(this.selectAssets.concat(ids))
-        this.selectAssets = Array.from(merged)
-      } else {
-        this.selectAssets = this.selectAssets.filter(id => !ids.includes(id))
-      }
-      this.$emit('change', this.selectAssets)
-    },
-    removeAsset(asset) {
-      this.selectAssets = this.selectAssets.filter(id => id !== asset.id)
-      this.selectAssetRows = this.selectAssetRows.filter(r => r.id !== asset.id)
-      this.$emit('change', this.selectAssets)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.asset-select {
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  color: var(--color-border);
-
-  ::v-deep {
-    .el-card {
-      flex: 1;
-    }
-
-    .el-card__body {
-      height: calc(100vh - 200px);
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: 10px 16px;
-    }
-
-    .el-checkbox {
-      width: 100%;
-      display: flex;
-      padding: 3px 0;
-      margin-right: 0;
-      align-items: center;
-
-      .asset-remove-icon {
-        opacity: 0;
-        visibility: hidden;
-        cursor: pointer;
-        font-weight: normal;
-        transition: opacity .15s ease;
-        margin-left: auto;
-        color: var(--color-danger);
-      }
-
-      .el-checkbox__label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        gap: 3px;
-        padding-right: 20px;
-        padding-left: 3px;
-      }
-
-      .el-checkbox__label:hover .asset-remove-icon {
-        opacity: 1;
-        visibility: visible;
-      }
-    }
-  }
-
-  .asset-list {
-    margin: auto;
-  }
-
-  .asset-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 180px;
-  }
-
-  .platform-group {
-    margin-bottom: 8px;
-    padding: 6px 8px;
-  }
-
-  .platform-group-header {
-    padding-bottom: 4px;
-    margin-bottom: 4px;
-  }
-
-  .platform-title {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    color: #a2aabd;
-    font-weight: 800;
-    font-size: 12px;
-  }
-
-  .platform-icon {
-    width: 18px;
-    height: 18px;
-  }
-
-  .platform-group-assets {
-    padding-left: 15px;
-    margin-left: 3px;
-    border-left: 2px solid var(--color-border);
-  }
-
-  .select-asset-button {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%); /* 让中心点对齐 */
-  }
-
-}
-
-.el-select {
-  width: 100%;
-}
-
-.page ::v-deep .page-heading {
-  display: none;
-}
-
-.el-dialog__wrapper ::v-deep .el-dialog__body {
-  padding: 0 0 0 3px;
-}
-
-.empty-assets {
-  border: 2px dashed #d9d9d9;
-  border-radius: 6px;
-  padding: 56px 16px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color .2s, background-color .25s, color .2s;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #909399;
-  height: 100%;
-  background: #fff;
-
-  .icon {
-    font-size: 42px;
-    line-height: 1;
-    margin-bottom: 14px;
-    color: #c0c4cc;
-    transition: color .2s;
-  }
-
-  .title {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 6px;
-  }
-
-  .subtitle {
-    font-size: 12px;
-    opacity: .75;
-  }
-}
-
-.empty-assets:hover:not(.is-disabled) {
-  border-color: var(--color-primary);
-  background: #f5f9ff;
-  color: var(--color-primary);
-
-  .icon {
-    color: var(--color-primary);
-  }
-}
-
-.empty-assets.is-disabled {
-  cursor: not-allowed;
-  opacity: .55;
-  background: #fafafa;
-
-  .disabled-tip {
-    color: #c0c4cc;
-  }
-}
-</style>

src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue

@@ -1,72 +1,66 @@
 <template>
   <TwoCol>
     <template>
-      <AutoDetailCard :excludes="excludes" :fields="detailFields" :object="object" :url="url" />
+      <AutoDetailCard
+        :excludes="excludes"
+        :fields="detailFields"
+        :object="object"
+        :url="url"
+      />
     </template>
     <template v-if="hasSummary" #right class="detail-right-quick-actions">
       <IBox
         v-if="object.summary.ok"
-        :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})`"
+        :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})` "
         type="success"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(item, index) in object.summary.ok"
+            v-for="(item,index) in object.summary.ok"
             :key="index"
             :name="index"
+            :title="item"
             disabled
-          >
-            <template #title>
-              <el-tooltip :content="item" placement="top" class="text-overflow">
-                <span>{{ item }}</span>
-              </el-tooltip>
-            </template>
-          </el-collapse-item>
+          />
         </el-collapse>
       </IBox>
       <IBox
         v-if="object.summary.excludes"
-        :title="`${$tc('ExcludeAsset')} (${Object.keys(object.summary.excludes).length})`"
+        :title="`${$tc('ExcludeAsset')} (${Object.keys(object.summary.excludes).length})` "
         type="warning"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(val, key, index) in object.summary.excludes"
+            v-for="(val,key,index) in object.summary.excludes"
             :key="index"
             :name="index"
+            :title="key"
           >
-            <template #title>
-              <el-tooltip :content="key" placement="top" class="text-overflow">
-                <span>{{ key }}</span>
-              </el-tooltip>
-            </template>
-
             <div>{{ $tc('Reason') }}: {{ val }}</div>
           </el-collapse-item>
         </el-collapse>
       </IBox>
       <IBox
         v-if="object.summary.failures"
-        :title="`${$tc('FailedAsset')} (${Object.keys(Object.assign(object.summary.failures, object.summary.dark)).length})`"
+        :title="`${$tc('FailedAsset')} (${Object.keys(Object.assign(object.summary.failures,object.summary.dark)).length})` "
         type="danger"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(val, key, index) in Object.assign(object.summary.failures, object.summary.dark)"
+            v-for="(val,key,index) in Object.assign(object.summary.failures,object.summary.dark)"
             :key="index"
             :name="index"
+            :title="key"
           >
-            <template #title>
-              <el-tooltip :content="key" placement="top" class="text-overflow">
-                <span>{{ key }}</span>
-              </el-tooltip>
-            </template>
-
             <div>{{ $tc('Reason') }}: {{ val }}</div>
           </el-collapse-item>
         </el-collapse>
       </IBox>
-      <IBox v-if="object.summary.error" :title="$tc('SystemError')" type="danger">
+      <IBox
+        v-if="object.summary.error"
+        :title="$tc('SystemError') "
+        type="danger"
+      >
         {{ object.summary.error }}
       </IBox>
     </template>
@@ -92,10 +86,11 @@ export default {
   },
   data() {
     return {
-      excludes: ['job', 'parameters', 'summary', 'task_id', 'timedelta'],
+      excludes: [
+        'job', 'parameters', 'summary', 'task_id', 'timedelta'
+      ],
       detailFields: [
-        'task_id',
-        'time_cost',
+        'task_id', 'time_cost',
         {
           key: this.$t('IsFinished'),
           value: this.object.is_finished ? this.$t('Yes') : this.$t('No')
@@ -104,12 +99,8 @@ export default {
           key: this.$t('IsSuccess'),
           value: this.object.is_success ? this.$t('Yes') : this.$t('No')
         },
-        'job_type',
-        'material',
-        'org_name',
-        'date_start',
-        'date_finished',
-        'date_created'
+        'job_type', 'material', 'org_name',
+        'date_start', 'date_finished', 'date_created'
       ],
       url: `/api/v1/ops/job-executions/${this.object.id}/`
     }

src/views/ops/File/index.vue

@@ -10,148 +10,136 @@
         {{ tip }}
       </span>
     </el-alert>
-    <div class="job-container">
-      <div class="select-assets">
-        <SelectJobAssetDialog @change="handleSelectAssets" />
-      </div>
-      <div class="transition-box" style="width: calc(100% - 17px);">
-        <div class="upload_input">
-          <el-button
-            :disabled="runButton.disabled"
-            :type="runButton.el&&runButton.el.type"
-            size="small"
-            style="display: inline-block; padding: 6px 10px"
-            @click="runButton.callback()"
-          >
-            <i :class="runButton.icon" style="margin-right: 4px;" />{{ runButton.name }}
-          </el-button>
-        </div>
-        <span style="color: red">*</span>
-        <div class="upload_input">{{ $t('Account') }}:</div>
-        <div class="upload_input">
-          <el-autocomplete
-            v-model="runAsInput.value"
-            :fetch-suggestions="runAsInput.el.query"
-            :placeholder="runAsInput.placeholder"
-            size="mini"
-            style="display: inline-block; margin: 0 2px"
-            @change="runAsInput.callback(runAsInput.value)"
-            @select="runAsInput.callback(runAsInput.value)"
-          />
-        </div>
-        <div class="upload_input">{{ $t('UploadDir') }}:</div>
-        <div class="upload_input">
-          <el-input
-            v-if="dstPathInput.type==='input'"
-            v-model="dstPath"
-            :placeholder="dstPathInput.placeholder"
-            size="mini"
-            @change="dstPathInput.callback(dstPathInput.value)"
-          >
-            <template slot="prepend">/tmp/</template>
-          </el-input>
-        </div>
-        <div
-          class="file-uploader"
-        >
-          <el-card>
-            <div class="file-uploader-header">
-              <span>{{ $t('selectFiles', {number: uploadFileList.length}) }}</span>
-              <el-tooltip v-if="uploadFileList.length > 0" :content="$t('ClearSelection')" placement="top">
-                <i class="el-icon-delete" @click="clearAllFiles" />
-              </el-tooltip>
-            </div>
-            <el-upload
-              v-if="ready"
-              ref="upload"
-              :auto-upload="false"
-              :on-change="onFileChange"
-              :value.sync="uploadFileList"
-              action=""
-              drag
-              multiple
+
+    <AssetTreeTable ref="AssetTreeTable" :tree-setting="treeSetting">
+      <template slot="table">
+        <div class="transition-box" style="width: calc(100% - 17px);">
+          <div class="upload_input">
+            <el-button
+              :disabled="runButton.disabled"
+              :type="runButton.el&&runButton.el.type"
+              size="small"
+              style="display: inline-block; padding: 6px 10px"
+              @click="runButton.callback()"
             >
-              <i class="el-icon-upload" />
-              <div class="el-upload__text" style="margin-bottom: 10px;padding: 0 5px 0 5px ">
-                {{ $t('DragUploadFileInfo') }}
-              </div>
-              <span>
-                {{ $t('UploadFileLthHelpText', {limit: sizeLimitMb}) }}
-              </span>
-              <div slot="file" slot-scope="{file}">
-                <li class="el-upload-list__item is-ready" tabindex="0">
-                  <a :style="sameFileStyle(file)" class="el-upload-list__item-name">
-                    <i class="el-icon-document" />{{ file.name }}
-                    <i style="color: #1ab394;float: right;font-weight:normal">
-                      {{ formatFileSize(file.size) }}
-                      <i class="el-icon-close" @click="removeFile(file)" />
-                    </i>
-                  </a>
-                </li>
-              </div>
-              <div
-                v-if="uploadFileList.length === 0"
-                slot="tip"
-                class="empty-file-tip"
-              >
-                {{ $tc('NoFiles') }}
-              </div>
-            </el-upload>
-            <el-progress
-              v-if="showProgress"
-              :percentage="progressLength"
+              <i :class="runButton.icon" style="margin-right: 4px;" />{{ runButton.name }}
+            </el-button>
+          </div>
+          <span style="color: red">*</span>
+          <div class="upload_input">{{ $t('Account') }}:</div>
+          <div class="upload_input">
+            <el-autocomplete
+              v-model="runAsInput.value"
+              :fetch-suggestions="runAsInput.el.query"
+              :placeholder="runAsInput.placeholder"
+              size="mini"
+              style="display: inline-block; margin: 0 2px"
+              @change="runAsInput.callback(runAsInput.value)"
+              @select="runAsInput.callback(runAsInput.value)"
             />
-            <div v-if="showProgress" class="status-info">
-              <span class="left">{{ speedText }}</span>
-              <span class="right">{{ loadedSize }} / {{ totalSize }}</span>
-            </div>
-          </el-card>
-        </div>
-        <div style="margin-bottom: 5px;font-weight: bold; display: inline-block">{{ $tc('Output') }}:</div>
-        <span v-if="executionInfo.status && summary && !showProgress" style="float: right">
-          <span>
-            <span><b>{{ $tc('Status') }}: </b></span>
-            <span
-              v-if="executionInfo.status==='timeout'"
-              class="status_warning"
-            >{{ $tc('Timeout') }}</span>
-            <span v-else>
-              <span class="status_success">{{ $tc('Success') + ': ' + summary.success }}</span>
-              <span class="status_warning">{{ $tc('Skip') + ': ' + summary.skip }}</span>
-              <span class="status_danger">{{ $tc('Failed') + ': ' + summary.failed }}</span>
+          </div>
+          <div class="upload_input">{{ $t('UploadDir') }}:</div>
+          <div class="upload_input">
+            <el-input
+              v-if="dstPathInput.type==='input'"
+              v-model="dstPath"
+              :placeholder="dstPathInput.placeholder"
+              size="mini"
+              @change="dstPathInput.callback(dstPathInput.value)"
+            >
+              <template slot="prepend">/tmp/</template>
+            </el-input>
+          </div>
+          <div
+            class="file-uploader"
+          >
+            <el-card>
+              <el-upload
+                v-if="ready"
+                ref="upload"
+                :auto-upload="false"
+                :on-change="onFileChange"
+                :value.sync="uploadFileList"
+                action=""
+                drag
+                multiple
+              >
+                <i class="el-icon-upload" />
+                <div class="el-upload__text" style="margin-bottom: 10px;padding: 0 5px 0 5px ">
+                  {{ $t('DragUploadFileInfo') }}
+                </div>
+                <span>
+                  {{ $t('UploadFileLthHelpText', {limit: SizeLimitMb}) }}
+                </span>
+                <div slot="file" slot-scope="{file}">
+                  <li class="el-upload-list__item is-ready" tabindex="0">
+                    <a :style="sameFileStyle(file)" class="el-upload-list__item-name">
+                      <i class="el-icon-document" />{{ file.name }}
+                      <i style="color: #1ab394;float: right;font-weight:normal">
+                        {{ formatFileSize(file.size) }}
+                        <i class="el-icon-close" @click="removeFile(file)" />
+                      </i>
+                    </a>
+                  </li>
+                </div>
+                <div
+                  v-if="uploadFileList.length === 0"
+                  slot="tip"
+                  class="empty-file-tip"
+                >
+                  {{ $tc('NoFiles') }}
+                </div>
+              </el-upload>
+              <el-progress v-if="ShowProgress" :percentage="progressLength" />
+
+            </el-card>
+          </div>
+          <div style="margin-bottom: 5px;font-weight: bold; display: inline-block">{{ $tc('Output') }}:</div>
+          <span v-if="executionInfo.status && summary" style="float: right">
+            <span>
+              <span><b>{{ $tc('Status') }}: </b></span>
+              <span
+                v-if="executionInfo.status==='timeout'"
+                class="status_warning"
+              >{{ $tc('Timeout') }}</span>
+              <span v-else>
+                <span class="status_success">{{ $tc('Success') + ': ' + summary.success }}</span>
+                <span class="status_warning">{{ $tc('Skip') + ': ' + summary.skip }}</span>
+                <span class="status_danger">{{ $tc('Failed') + ': ' + summary.failed }}</span>
+              </span>
+            </span>
+            <span>
+              <span><b>{{ $tc('TimeDelta') }}: </b></span>
+              <span>{{ executionInfo.timeCost }}</span>
             </span>
           </span>
-          <span>
-            <span><b>{{ $tc('TimeDelta') }}: </b></span>
-            <span>{{ executionInfo.timeCost }}</span>
-          </span>
-        </span>
-        <div class="output">
-          <Term
-            ref="xterm"
-            :show-tool-bar="true"
-            :xterm-config="xtermConfig"
-          />
-          <div style="height: 2px" />
+          <div class="output">
+            <Term
+              ref="xterm"
+              :show-tool-bar="true"
+              :xterm-config="xtermConfig"
+            />
+            <div style="height: 2px" />
+          </div>
+          <div style="display: flex; margin-top:10px; justify-content: space-between" />
         </div>
-        <div style="display: flex; margin-top:10px; justify-content: space-between" />
-      </div>
-    </div>
+      </template>
+    </AssetTreeTable>
   </Page>
 </template>
 
 <script>
+import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import Term from '@/components/Widgets/Term'
 import Page from '@/layout/components/Page'
 import { createJob, getTaskDetail, JobUploadFile } from '@/api/ops'
 import { formatFileSize } from '@/utils/common/index'
 import store from '@/store'
-import SelectJobAssetDialog from '@/views/ops/Adhoc/components/SelectJobAssetDialog.vue'
 
 export default {
   name: 'FileTransfer',
   components: {
-    SelectJobAssetDialog,
+    AssetTreeTable,
     Page,
     Term
   },
@@ -166,6 +154,7 @@ export default {
         cancel: 0
       },
       xtermConfig: {},
+      DataZTree: 0,
       runas: '',
       dstPath: '',
       runButton: {
@@ -220,11 +209,27 @@ export default {
           this.chdir = val
         }
       },
+      treeSetting: {
+        treeUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/',
+        searchUrl: '/api/v1/perms/users/self/assets/tree/',
+        notShowBuiltinTree: true,
+        showRefresh: true,
+        showMenu: false,
+        showSearch: true,
+        check: {
+          enable: true
+        },
+        view: {
+          dblClickExpand: false,
+          showLine: true
+        }
+      },
+      iShowTree: true,
       progressLength: 0,
-      showProgress: false,
+      ShowProgress: false,
       upload_interval: null,
       uploadFileList: [],
-      sizeLimitMb: store.getters.publicSettings['FILE_UPLOAD_SIZE_LIMIT_MB'],
+      SizeLimitMb: store.getters.publicSettings['FILE_UPLOAD_SIZE_LIMIT_MB'],
       summary: {
         'success': 0,
         'failed': 0,
@@ -234,16 +239,15 @@ export default {
         this.$tc('FileTransferBootStepHelpTips1'),
         this.$tc('FileTransferBootStepHelpTips2'),
         this.$tc('FileTransferBootStepHelpTips3')
-      ],
-      speedText: '',
-      loadedSize: '',
-      totalSize: '',
-      selectHosts: []
+      ]
     }
   },
   computed: {
     xterm() {
       return this.$refs.xterm.xterm
+    },
+    ztree() {
+      return this.$refs.AssetTreeTable.$refs.TreeList.$refs.AutoDataZTree.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree
     }
   },
   mounted() {
@@ -297,7 +301,8 @@ export default {
         if (this.executionInfo.status === 'success') {
           this.$message.success(this.$tc('RunSucceed'))
           clearInterval(this.upload_interval)
-          this.showProgress = false
+          this.progressLength = 100
+          this.ShowProgress = true
         }
       })
     },
@@ -310,6 +315,13 @@ export default {
       msg = JSON.stringify({ task: this.currentTaskId })
       this.ws.send(msg)
     },
+    getSelectedNodes() {
+      return this.ztree.getCheckedNodes().filter(node => {
+        const status = node.getCheckStatus()
+        return node.id !== 'search' && status.half === false
+      })
+    },
+
     setCostTimeInterval() {
       this.runButton.icon = 'fa fa-spinner fa-spin'
       this.runButton.disabled = true
@@ -318,8 +330,17 @@ export default {
       }, 1000)
     },
     getSelectedNodesAndHosts() {
-      const hosts = this.selectHosts
-      const nodes = []
+      const hosts = this.getSelectedNodes().filter((item) => {
+        return item.meta.type !== 'node'
+      }).map(function(node) {
+        return node.id
+      })
+
+      const nodes = this.getSelectedNodes().filter((item) => {
+        return item.meta.type === 'node'
+      }).map(function(node) {
+        return node.meta.data.id
+      })
       return { hosts, nodes }
     },
     truncateFileName(fullName) {
@@ -345,7 +366,7 @@ export default {
       return ''
     },
     isFileExceedsLimit(file) {
-      const isGtLimit = file.size / 1024 / 1024 > this.sizeLimitMb
+      const isGtLimit = file.size / 1024 / 1024 > this.SizeLimitMb
       if (isGtLimit) {
         this.$message.error(this.$tc('FileSizeExceedsLimit'))
       }
@@ -360,9 +381,6 @@ export default {
       this.uploadFileList.splice(this.uploadFileList.indexOf(file), 1)
       this.handleSameFile(this.uploadFileList)
     },
-    formatSpeed(bps) {
-      return `${this.formatFileSize(bps)}/s`
-    },
     execute() {
       const { hosts, nodes } = this.getSelectedNodesAndHosts()
       for (const file of this.uploadFileList) {
@@ -408,10 +426,8 @@ export default {
       createJob(data).then(res => {
         this.progressLength = 0
         this.executionInfo.timeCost = 0
-        this.showProgress = true
-        this.speedText = ''
+        this.ShowProgress = true
         const form = new FormData()
-        const start = Date.now()
         for (const file of this.uploadFileList) {
           form.append('files', file.raw)
           form.append('job_id', res.id)
@@ -421,21 +437,9 @@ export default {
             clearInterval(this.upload_interval)
             return
           }
+          this.progressLength += 1
         }, 100)
-        JobUploadFile(form, {
-          onUploadProgress: (e) => {
-            if (!e.total) return
-            const percent = Math.floor((e.loaded / e.total) * 100)
-            this.progressLength = Math.min(percent, 100)
-            this.loadedSize = formatFileSize(e.loaded)
-            this.totalSize = formatFileSize(e.total)
-            const elapsedSec = (Date.now() - start) / 1000
-            if (elapsedSec > 0) {
-              const speed = e.loaded / elapsedSec
-              this.speedText = this.formatSpeed(speed)
-            }
-          }
-        }).then(res => {
+        JobUploadFile(form).then(res => {
           this.executionInfo.status = 'running'
           this.currentTaskId = res.task_id
           this.xtermConfig = { taskId: this.currentTaskId, type: 'shortcut_cmd' }
@@ -448,35 +452,16 @@ export default {
     },
     execute_stop() {
       this.progressLength = 0
-      this.showProgress = false
+      this.ShowProgress = false
       this.runButton.disabled = false
       clearInterval(this.upload_interval)
       this.runButton.icon = 'fa fa-play'
-    },
-    handleSelectAssets(assets) {
-      this.selectHosts = assets
-    },
-    clearAllFiles() {
-      this.$refs.upload.clearFiles()
-      this.uploadFileList = []
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.job-container {
-  display: flex;
-
-  .select-assets {
-    width: 23.6%;
-  }
-}
-
-.transition-box {
-  margin-left: 30px;
-}
-
 .mini-button {
   width: 12px;
   float: right;
@@ -488,11 +473,19 @@ export default {
   border-radius: 2px;
 }
 
+.el-tree {
+  background-color: inherit !important;
+}
+
 .mini {
   margin-right: 5px;
   width: 12px !important;
 }
 
+.auto-data-ztree {
+  overflow: auto;
+}
+
 .vue-codemirror-wrap ::v-deep .CodeMirror {
   width: 600px;
   height: 100px;
@@ -503,6 +496,11 @@ export default {
   padding: 0 10px;
 }
 
+.tree-box {
+  margin-right: 2px;
+  border: 1px solid #e0e0e0;
+}
+
 .status_success {
   color: var(--color-primary);
 }
@@ -524,15 +522,8 @@ export default {
   margin: 10px 0;
   min-width: 925px;
 
-  .file-uploader-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 5px;
-  }
-
   ::v-deep .el-card__body {
-    > div:nth-child(2) {
+    > div:first-child {
       //不要影响到 el-progress
       display: flex;
       position: relative;
@@ -577,14 +568,6 @@ export default {
         }
       }
     }
-
-    .el-progress-bar {
-      padding-right: 0;
-    }
-
-    .el-progress__text {
-      display: none;
-    }
   }
 }
 
@@ -597,11 +580,4 @@ export default {
 .output ::v-deep #terminal {
   border: dashed 1px #d9d9d9;
 }
-
-.status-info {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
 </style>

src/views/ops/Job/JobUpdateCreate.vue

@@ -224,12 +224,11 @@ export default {
           title: this.$t('ExecuteAfterSaving'),
           callback: (value, form, btn) => {
             form.value.run_after_save = true
-            if (form.value?.variable) {
-              form.value['parameters'] = form.value.variable.reduce((acc, item) => {
-                acc[item.var_name] = item.default_value || ''
-                return acc
-              }, {})
-            }
+            const parameters = form.value.variable.reduce((acc, item) => {
+              acc[item.var_name] = item.default_value || ''
+              return acc
+            }, {})
+            form.value['parameters'] = parameters
             this.submitForm(form, btn)
           }
         }

src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue

@@ -110,8 +110,6 @@ export default {
           type: 'input',
           component: AccountFormatter,
           el: {
-            enableExcludeAccounts: true,
-            enableNoneAccount: true,
             assets: [],
             nodes: []
           },

src/views/perms/AssetPermission/components/AccountFormatter.vue

@@ -3,7 +3,7 @@
     <el-form-item>
       <el-radio-group v-model="realRadioSelected" @input="handleRadioChanged">
         <el-radio
-          v-for="(i) in iRealChoices"
+          v-for="(i) in realChoices"
           :key="i.label"
           :disabled="i.disabled"
           :label="i.value"
@@ -125,14 +125,6 @@ export default {
       type: Boolean,
       default: true
     },
-    enableNoneAccount: {
-      type: Boolean,
-      default: false
-    },
-    enableExcludeAccounts: {
-      type: Boolean,
-      default: false
-    },
     addTemplateHelpText: {
       type: String,
       default() {
@@ -193,18 +185,6 @@ export default {
   computed: {
     virtualAccount() {
       return virtualAccount
-    },
-    iRealChoices: {
-      get() {
-        let choices = this.realChoices.slice()
-        if (!this.enableNoneAccount) {
-          choices = choices.filter(i => i.value !== NoneAccount)
-        }
-        if (!this.enableExcludeAccounts) {
-          choices = choices.filter(i => i.value !== ExcludeAccount)
-        }
-        return choices
-      }
     }
   },
   watch: {

src/views/perms/const.js

@@ -189,7 +189,8 @@ export const realChoices = [
   },
   {
     label: AccountLabelMapper[ExcludeAccount],
-    value: ExcludeAccount
+    value: ExcludeAccount,
+    tip: i18n.t('ExcludeAccountTip')
   },
   {
     label: AccountLabelMapper[NoneAccount],

src/views/profile/PasswordAndSSHKey/SSHKey/SSHKeyList.vue

@@ -20,8 +20,7 @@ export default {
         hasExport: false,
         hasImport: false,
         hasBulkDelete: false,
-        hasCreate: true,
-        canCreate: true
+        hasCreate: true
       },
       tableConfig: {
         hasSelection: true,
@@ -42,12 +41,6 @@ export default {
           date_created: {
             label: this.$t('DateCreated'),
             formatter: DateFormatter
-          },
-          actions: {
-            formatterArgs: {
-              canUpdate: true,
-              canClone: true
-            }
           }
         }
       }

src/views/profile/index.vue

@@ -237,7 +237,7 @@ export default {
           },
           callbacks: {
             click: function() {
-              this.$router.push({ name: 'SSHKeyList', query: { tab: 'SSHKeyList' } })
+              this.$router.push({ name: 'SSHKeyList', query: { tab: 'SSHKey' } })
             }.bind(this)
           }
         }

src/views/reports/base/BaseReport.vue

@@ -26,7 +26,7 @@
           {{ description }}
         </div>
       </div>
-      <span v-if="!nav && url && showReportExportBtn" class="export-btn">
+      <span v-if="!nav && url" class="export-btn">
         <el-button type="text" @click="openNewWindow">
           <i class="fa fa-external-link" style="font-size: 15px;" />
           {{ $t('Export') }}
@@ -42,7 +42,6 @@
 <script>
 import Logo from '@/layout/components/NavLeft/Logo'
 import RightAction from './RightAction.vue'
-import store from '@/store'
 
 export default {
   components: {
@@ -85,9 +84,6 @@ export default {
   computed: {
     isDescription() {
       return this.description && this.description.trim() !== ''
-    },
-    showReportExportBtn() {
-      return store.getters.hasValidLicense
     }
   },
   methods: {

src/views/reports/base/RightAction.vue

@@ -65,13 +65,7 @@ export default {
       }
       const days = this.getDaysParam()
       this.$message.success(this.$t('EMailReport') + '...')
-      this.$axios.post(`/core/reports/send-mail/?chart=${this.name}&days=${days}`,).then((res) => {
-        if (res.error) {
-          this.$message.error(res.error)
-        } else {
-          this.$message.success(res.message)
-        }
-      }).catch(error => {
+      this.$axios.post(`/core/reports/send-mail/?chart=${this.name}&days=${days}`,).catch(error => {
         this.$message.error(this.$t('Failed') + ': ' + error.message)
       })
     },

src/views/sessions/CommandList/BaseList.vue

@@ -2,7 +2,6 @@
   <TreeTable
     ref="CommandTreeTable"
     v-loading="loading"
-    :title="title"
     :header-actions="headerActions"
     :table-config="tableConfig"
     :tree-setting="treeSetting"
@@ -40,7 +39,6 @@ export default {
     const dateFrom = getDaysAgo(7).toISOString()
     const dateTo = this.$moment(getDayEnd()).add(1, 'day').toISOString()
     return {
-      title: this.$t('CommandStorage'),
       loading: true,
       tableConfig: {
         url: '/api/v1/terminal/commands/',

src/views/settings/Applet/AppletHost/AppletHostList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-alert type="success">
-      <span v-html="$t('AppletHostSelectHelpMessage')" />
+      <span v-sanitize="$t('AppletHostSelectHelpMessage')" />
     </el-alert>
     <DrawerListTable
       ref="table"

src/views/settings/Auth/Basic.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="auth-container">
+    <IBox :title="$tc('AuthIntegration')" class="auth-box-wrapper auth-method-box">
+      <el-row v-for="[type, items] in Object.entries(authItems)" :key="type" :gutter="20">
+        <h3 class="auth-method-type">{{ typeMap[type] }}</h3>
+        <AuthMethod
+          v-for="item in items"
+          :key="item.title"
+          v-bind="item"
+        />
+      </el-row>
+    </IBox>
     <IBox :title="$tc('BasicSettings')" class="auth-box-wrapper">
       <GenericCreateUpdateForm v-bind="$data" />
     </IBox>
@@ -7,16 +17,26 @@
 </template>
 
 <script>
+import AuthMethod from './components/AuthMethod.vue'
 import IBox from '@/components/Common/IBox'
+import { getAuthItems } from './const'
 import { GenericCreateUpdateForm } from '@/layout/components'
+import { mapState } from 'vuex'
 
 export default {
   components: {
     IBox,
+    AuthMethod,
     GenericCreateUpdateForm
   },
   data() {
     return {
+      authItems: [],
+      typeMap: {
+        common: this.$t('Common'),
+        SSO: this.$t('SSO'),
+        IdP: this.$t('IdP')
+      },
       searchQuery: '',
       url: '/api/v1/settings/setting/?category=auth',
       fields: [
@@ -35,10 +55,64 @@ export default {
         return 'patch'
       }
     }
+  },
+  computed: {
+    ...mapState({
+      authMethodsSetting: state => state.settings.authMethods
+    })
+  },
+  async mounted() {
+    await this.$store.dispatch('settings/getAuthMethods')
+    await this.initAuthItems()
+  },
+  methods: {
+    async initAuthItems() {
+      let authItems = await getAuthItems(this)
+      authItems = authItems.map(item => {
+        return {
+          ...item,
+          enabled: this.authMethodsSetting[item.authKey]
+        }
+      })
+      authItems = authItems.sort((a, b) => {
+        if (a.enabled !== b.enabled) {
+          return a.enabled ? -1 : 1
+        }
+        return a.title.localeCompare(b.title)
+      })
+
+      this.authItems = authItems.reduce((acc, item) => {
+        acc[item.type] = acc[item.type] || []
+        acc[item.type].push(item)
+        return acc
+      }, {})
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.auth-method-box {
+  ::v-deep {
+    .el-card__body {
+      padding-top: 10px;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+}
 
+h3.auth-method-type {
+  margin-bottom: 8px;
+  margin-top: 10px;
+  padding-left: 10px;
+}
+
+.auth-container {
+  width: 100%;
+
+  .auth-box-wrapper {
+    margin-bottom: 20px;
+  }
+}
 </style>

src/views/settings/Auth/Integration.vue

@@ -1,230 +0,0 @@
-<template>
-  <div class="auth-container">
-    <IBox :title="$tc('AuthIntegration')" class="auth-box-wrapper auth-method-box">
-      <el-row v-for="[type, items] in Object.entries(groupedAuthItems)" :key="type" :gutter="20">
-        <h4 class="auth-method-type">{{ typeMap[type] }}</h4>
-        <AuthMethod
-          v-for="item in items"
-          :key="item.title"
-          v-bind="item"
-        />
-      </el-row>
-    </IBox>
-  </div>
-</template>
-
-<script>
-import AuthMethod from './components/AuthMethod.vue'
-import IBox from '@/components/Common/IBox'
-import { getAuthItems } from './const'
-import { mapState } from 'vuex'
-
-export default {
-  components: {
-    IBox,
-    AuthMethod
-  },
-  data() {
-    return {
-      groupedAuthItems: {},
-      typeMap: {
-        common: this.$t('Common'),
-        SSO: this.$t('SSO'),
-        IdP: this.$t('IdP')
-      }
-    }
-  },
-  computed: {
-    ...mapState({
-      authMethodsSetting: state => state.settings.authMethods
-    }),
-    // 未启用的认证方法（按类型分组）
-    disabledAuthItems() {
-      const disabled = {}
-      Object.entries(this.authItems).forEach(([type, items]) => {
-        const disabledItems = items.filter(item => !item.enabled)
-        if (disabledItems.length > 0) {
-          disabled[type] = disabledItems
-        }
-      })
-      return disabled
-    },
-    // 已开启的认证方法（平铺列表，不分类）
-    enabledAuthMethodsList() {
-      const enabled = []
-      Object.values(this.authItems).forEach(items => {
-        items.forEach(item => {
-          if (item.enabled) {
-            enabled.push(item)
-          }
-        })
-      })
-      return enabled
-    },
-    // 是否有未启用的认证方法
-    hasDisabledMethods() {
-      return Object.values(this.disabledAuthItems).some(items => items.length > 0)
-    },
-    // 是否有已开启的认证方法
-    hasEnabledMethods() {
-      return this.enabledAuthMethodsList.length > 0
-    }
-  },
-  async mounted() {
-    await this.$store.dispatch('settings/getAuthMethods')
-    await this.initAuthItems()
-  },
-  methods: {
-    async initAuthItems() {
-      let authItems = await getAuthItems(this)
-      authItems = authItems.map(item => {
-        return {
-          ...item,
-          enabled: this.authMethodsSetting[item.authKey]
-        }
-      })
-      authItems = authItems.sort((a, b) => {
-        if (a.enabled !== b.enabled) {
-          return a.enabled ? -1 : 1
-        }
-        return a.title.localeCompare(b.title)
-      })
-
-      const groupedAuthItems = authItems.reduce((acc, item) => {
-        acc[item.type] = acc[item.type] || []
-        acc[item.type].push(item)
-        return acc
-      }, {})
-      this.groupedAuthItems = {}
-      for (const type in this.typeMap) {
-        this.groupedAuthItems[type] = groupedAuthItems[type] || []
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.auth-method-box {
-  ::v-deep {
-    .el-card__body {
-      padding-top: 10px;
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-  }
-}
-
-.auth-layout {
-  min-height: 400px;
-}
-
-.auth-column {
-  border-right: 1px solid #e6e6e6;
-  padding-right: 20px;
-
-  &:last-child {
-    border-right: none;
-    padding-right: 0;
-    padding-left: 20px;
-  }
-}
-
-.column-header {
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-  border-bottom: 2px solid #f0f0f0;
-
-  h3 {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
-  }
-}
-
-.auth-methods-list {
-  min-height: 300px;
-  max-height: 500px;
-  overflow-y: auto;
-  padding-right: 5px;
-
-  // 自定义滚动条样式
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 3px;
-
-    &:hover {
-      background: #a8a8a8;
-    }
-  }
-}
-
-.auth-method-item {
-  margin-bottom: 10px;
-
-  ::v-deep .auth-item-col {
-    width: 100%;
-    max-width: none;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-h4.auth-method-type {
-  margin-bottom: 8px;
-  margin-top: 15px;
-  padding-left: 10px;
-  font-size: 13px;
-  font-weight: 500;
-  color: #666;
-  border-left: 3px solid #148f76;
-  padding-left: 12px;
-}
-
-.no-enabled-methods,
-.no-disabled-methods {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  color: #999;
-}
-
-.auth-container {
-  width: 100%;
-
-  .auth-box-wrapper {
-    margin-bottom: 20px;
-  }
-}
-
-// 响应式设计
-@media (max-width: 768px) {
-  .auth-layout {
-    .auth-column {
-      border-right: none;
-      border-bottom: 1px solid #e6e6e6;
-      padding-right: 0;
-      padding-left: 0;
-      padding-bottom: 20px;
-      margin-bottom: 20px;
-
-      &:last-child {
-        border-bottom: none;
-        margin-bottom: 0;
-        padding-bottom: 0;
-      }
-    }
-  }
-}
-</style>

src/views/settings/Auth/Ldap/ImportDialog.vue

@@ -222,11 +222,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .el-select-dropdown.select-org-dropdown {
+<style>
+.el-select-dropdown.select-org-dropdown {
   max-width: 300px !important;
 }
+</style>
 
+<style lang="scss" scoped>
 .org-select {
   float: left;
   width: 300px;
@@ -243,4 +245,5 @@ export default {
     width: 180px !important;
   }
 }
+
 </style>

src/views/settings/Auth/index.vue

@@ -26,7 +26,6 @@ import Passkey from './Passkey.vue'
 import Slack from './Slack.vue'
 import { getAuthItems } from './const'
 import { mapState } from 'vuex'
-import Integration from './Integration.vue'
 
 export default {
   components: {
@@ -46,8 +45,7 @@ export default {
     SAML2,
     OAuth2,
     Passkey,
-    Slack,
-    Integration
+    Slack
   },
   data() {
     return {
@@ -66,10 +64,6 @@ export default {
           title: this.$t('Basic'),
           name: 'Basic'
         },
-        {
-          title: this.$t('Integration'),
-          name: 'Integration'
-        },
         ...this.authMethods.map(item => {
           return {
             ...item,

src/views/settings/Msg/Subscribe/index.vue

@@ -93,9 +93,7 @@ export default {
       this.$axios.patch(
         `/api/v1/notifications/system-msg-subscription/${sub.id}/`,
         { receive_backends: backends }
-      ).then(() => {
-        this.$message.success(this.$t('UpdateSuccessMsg'))
-      }).catch(err => {
+      ).catch(err => {
         this.$log.error(err)
       })
     },

src/views/settings/Security/WatermarkHelpDialog.vue

@@ -73,28 +73,28 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .help-dialog.dialog .el-dialog__footer {
+<style>
+.help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
+</style>
 
+<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
-}
 
-::v-deep .help-table th,
-::v-deep .help-table td {
-  height: 40px;
-  padding: 0 8px;
-  text-align: left;
-}
+  &::v-deep th, td {
+    height: 40px;
+    padding: 0 8px;
+    text-align: left;
+  }
 
-::v-deep .help-table .item-td,
-::v-deep .help-table .item-label {
-  cursor: pointer;
-  color: var(--color-primary);
+  &::v-deep .item-td, .item-label {
+    cursor: pointer;
+    color: var(--color-primary);
+  }
 }
 </style>

src/views/settings/Storage/CommandStorageCreateUpdate.vue

@@ -66,7 +66,7 @@ export default {
       },
       getUrl() {
         const params = this.$route.params
-        let url = '/api/v1/terminal/command-storages/'
+        let url = `/api/v1/terminal/command-storages/`
         if (params.id) {
           url = `${url}${params.id}/`
         }

src/views/settings/Terminal/Component/TerminalList.vue

@@ -53,7 +53,7 @@ export default {
               component: Select2,
               el: {
                 ajax: {
-                  url: '/api/v1/terminal/command-storages/'
+                  url: `/api/v1/terminal/command-storages/`
                 },
                 multiple: false
               }
@@ -63,7 +63,7 @@ export default {
               component: Select2,
               el: {
                 ajax: {
-                  url: '/api/v1/terminal/replay-storages/?type_not=sftp'
+                  url: `/api/v1/terminal/replay-storages/?type_not=sftp`
                 },
                 multiple: false
               }
@@ -140,8 +140,7 @@ export default {
               }
               const stat = row.stat
               return `${stat['cpu_load']} / ${stat['memory_used']}% / ${stat['disk_used']}%`
-            },
-            helpTip: 'CPU / Memory / Disk'
+            }
           },
           load: {
             filterable: 'custom',
@@ -153,8 +152,7 @@ export default {
                 high: 'fa fa-exclamation-triangle text-info',
                 normal: 'fa fa-check text-primary'
               }
-            },
-            helpTip: 'CPU / Memory / Disk'
+            }
           },
           remote_addr: {
             sortable: 'custom'

src/views/settings/Terminal/Monitor/component/MonitorCard.vue

@@ -219,12 +219,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-:global(.el-popover.el-popper.monitor-popover) {
+<style lang="scss">
+.el-popover.el-popper.monitor-popover {
   ul {
     padding-left: 15px;
     margin: 0;
-
     li {
       line-height: 24px;
       color: var(--color-primary);
@@ -232,19 +231,19 @@ export default {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-
       &:hover {
-        filter: opacity(65%) !important;
+        filter: opacity(65%)!important;
       }
     }
   }
 }
+</style>
 
+<style lang="less" scoped>
 .echarts {
   width: 100%;
   height: 150px;
 }
-
 .name {
   display: inline-block;
   margin-bottom: 8px;
@@ -257,7 +256,6 @@ export default {
   justify-content: space-between;
   font-size: 14px;
   margin-bottom: 8px;
-
   .num {
     margin-left: 2px;
     cursor: pointer;
@@ -281,9 +279,9 @@ export default {
   line-height: 20px;
   padding: 2px 0;
   color: #fff;
-  -webkit-transition: width 0.6s ease;
-  -o-transition: width 0.6s ease;
-  transition: width 0.6s ease;
+  -webkit-transition: width .6s ease;
+  -o-transition: width .6s ease;
+  transition: width .6s ease;
   overflow: hidden;
 }
 
@@ -294,11 +292,9 @@ export default {
   margin-right: 5px;
   border-radius: 4px;
   background-color: currentColor;
-
   &:hover {
     transform: scale(1.2);
   }
-
   &:last-child {
     margin-right: 0;
   }
@@ -307,7 +303,6 @@ export default {
 .session {
   margin-top: 13px;
   border-left: 1px solid #f3f3f3;
-
   .session-title {
     margin-bottom: 8px;
     color: #a3a3a4;

src/views/tickets/BaseTicketList.vue

@@ -2,7 +2,6 @@
   <GenericListPage
     ref="ListPage"
     v-loading="loading"
-    :get-drawer-title="getDrawerTitle"
     :create-drawer="createDrawer"
     :detail-drawer="detailDrawer"
     :header-actions="iTicketAction"
@@ -39,7 +38,6 @@ export default {
     const vm = this
     return {
       loading: true,
-      getDrawerTitle: () => ' ',
       createDrawer: () => import('@/views/tickets/RequestAssetPerm/CreateUpdate'),
       detailDrawer: null,
       ticketTableConfig: {

src/views/tickets/components/Steps.vue

@@ -115,12 +115,14 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .acceptance .el-message-box__content {
+<style>
+.acceptance .el-message-box__content {
   overflow-y: auto;
   max-height: 400px;
 }
+</style>
 
+<style lang='scss' scoped>
 .box {
   margin-bottom: 15px;
 }

src/views/users/Group/UserGroupCreateUpdate.vue

@@ -21,9 +21,6 @@ export default {
           [this.$t('Other'), ['comment']]
         ],
         fieldsMeta: {
-          name: {
-            uniqueCheck: true
-          },
           users: {
             el: {
               url: '/api/v1/users/users/?fields_size=mini&order=name',

src/views/users/User/UserCreateUpdate.vue

@@ -46,12 +46,8 @@ export default {
       ],
       url: '/api/v1/users/users/',
       fieldsMeta: {
-        name: {
-          uniqueCheck: true
-        },
-        username: {
-          uniqueCheck: true
-        },
+        name: {},
+        username: {},
         password_strategy: {
           hidden: (formValue) => {
             return this.$route.params.id || formValue.source !== 'local'
@@ -64,8 +60,7 @@ export default {
           rules: [
             rules.EmailCheck,
             rules.Required
-          ],
-          uniqueCheck: true
+          ]
         },
         update_password: {
           label: this.$t('ChangePassword'),

src/views/workbench/myassets/index.vue

@@ -41,6 +41,7 @@ export default {
               name: 'connect',
               icon: 'fa-desktop',
               type: 'primary',
+              plain: true,
               can: ({ row }) => row.is_active,
               callback: ({ row }) => {
                 const oid = this.$store.getters.currentOrg ? this.$store.getters.currentOrg.id : ''

tests/unit/components/Breadcrumb.spec.js

@@ -1,6 +1,6 @@
 import { createLocalVue, mount } from '@vue/test-utils'
 import VueRouter from 'vue-router'
-import ElementUI from 'element-ui'
+import ElementUI from 'elementui-lts'
 import Breadcrumb from '@/components/Widgets/Breadcrumb/index.vue'
 
 const localVue = createLocalVue()

vue.config.js

@@ -172,8 +172,8 @@ module.exports = {
     resolve: {
       alias: {
         '@': resolve('src'),
-        elementCss: resolve('node_modules/element-ui/lib/theme-chalk/index.css'),
-        elementLocale: resolve('node_modules/element-ui/lib/locale/lang/en.js')
+        elementCss: resolve('node_modules/elementui-lts/lib/theme-chalk/index.css'),
+        elementLocale: resolve('node_modules/elementui-lts/lib/locale/lang/en.js')
       },
       extensions: ['.vue', '.js', '.json']
     }