feat: Update v3.5.4

fix: 修复系统设置 > 消息订阅 > 修改订阅人 因为用户名导致的 xss

.editorconfig

@@ -4,11 +4,17 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+
+[*.{js,jsx,ts,tsx,vue}]
+indent_size = 2
+
+[*.py]
+indent_size = 4
+
 [*.md]
 insert_final_newline = false
 trim_trailing_whitespace = false

.github/workflows/jms-build-test.yml

@@ -0,0 +1,32 @@
+name: "Run Build Test"
+on:
+  push:
+    branches:
+      - pr@*
+      - repr@*
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: docker/setup-qemu-action@v2
+
+    - uses: docker/setup-buildx-action@v2
+
+    - uses: docker/build-push-action@v3
+      with:
+        context: .
+        push: false
+        tags: jumpserver/lina:test
+        file: Dockerfile
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+
+    - uses: LouisBrunner/checks-action@v1.5.0
+      if: always()
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        name: Check Build
+        conclusion: ${{ job.status }}

.github/workflows/release-drafter.yml

@@ -31,6 +31,9 @@ jobs:
           config-name: release-config.yml
           version: ${{ steps.get_version.outputs.TAG }}
           tag: ${{ steps.get_version.outputs.TAG }}
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.16'
 
   build-and-release:
     needs: create-realese
@@ -39,7 +42,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Build it and upload
-        uses: jumpserver/action-build-upload-assets@node10
+        uses: jumpserver/action-build-upload-assets@node14.16
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.gitignore

@@ -16,3 +16,4 @@ tests/**/coverage/
 *.njsproj
 *.sln
 .env.development
+.python-version

Dockerfile

@@ -1,23 +1,24 @@
-FROM node:10 as stage-build
-ARG VERSION
-ENV VERSION=$VERSION
-ARG NPM_REGISTRY="https://registry.npm.taobao.org"
-ENV NPM_REGISTY=$NPM_REGISTRY
-ARG SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"
-ENV SASS_BINARY_SITE=$SASS_BINARY_SITE
+FROM node:14.16 as stage-build
+ARG TARGETARCH
+ARG NPM_REGISTRY="https://registry.npmmirror.com"
 
 WORKDIR /data
 
-RUN npm config set sass_binary_site=${SASS_BINARY_SITE}
-RUN npm config set registry ${NPM_REGISTRY}
-RUN yarn config set registry ${NPM_REGISTRY}
-COPY package.json yarn.lock /data/
-RUN yarn install
-RUN npm rebuild node-sass
+RUN set -ex \
+    && npm config set registry ${NPM_REGISTRY} \
+    && yarn config set registry ${NPM_REGISTRY}
 
+ADD package.json yarn.lock /data
+RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=lina \
+    yarn install
+
+ARG VERSION
+ENV VERSION=$VERSION
 ADD . /data
-RUN cd utils && bash -xieu build.sh build
+RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=lina \
+    sed -i "s@version-dev@${VERSION}@g" src/layout/components/NavHeader/About.vue \
+    && yarn build
 
-FROM nginx:alpine
-COPY --from=stage-build /data/release/lina /opt/lina
+FROM nginx:1.24
+COPY --from=stage-build /data/lina /opt/lina
 COPY nginx.conf /etc/nginx/conf.d/default.conf

GITSHA

@@ -0,0 +1 @@
+17fd374e0adc7a7a9992dfe4f86fa4125974ec85

README.md

@@ -19,7 +19,7 @@ VUE_APP_CORE_HOST = 'JUMPSERVER_APIHOST'
 $ yarn serve
 
 4. 构建
-$ yarn build
+$ yarn build:prod
 ```
 
 ## 生产中部署

build/index.js

@@ -24,9 +24,9 @@ if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
   )
 
   app.listen(port, function () {
-    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    // debug(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
     if (report) {
-      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+      // debug(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
     }
 
   })

mock/index.js

@@ -56,7 +56,7 @@ const responseFake = (url, type, respond) => {
     url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
     type: type || 'get',
     response(req, res) {
-      console.log('request invoke:' + req.path)
+      // debug('request invoke:' + req.path)
       res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
     }
   }

mock/mock-server.js

@@ -59,9 +59,9 @@ module.exports = app => {
         mockRoutesLength = mockRoutes.mockRoutesLength
         mockStartIndex = mockRoutes.mockStartIndex
 
-        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+        // debug(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
       } catch (error) {
-        console.log(chalk.redBright(error))
+        // debug(chalk.redBright(error))
       }
     }
   })

mock/user.js

@@ -1,4 +1,3 @@
-
 const tokens = {
   admin: {
     token: 'admin-token'
@@ -46,7 +45,6 @@ export default [
       }
     }
   },
-
   // get user info
   {
     url: '/vue-admin-template/user/info\.*',

package.json

@@ -7,17 +7,21 @@
   "scripts": {
     "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
+    "fix": "eslint --ext .js,.vue --fix src",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
     "svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
     "vue-i18n-extract": "vue-i18n-extract",
     "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
     "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
-    "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a"
+    "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
+    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja",
+    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja"
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
@@ -25,17 +29,20 @@
     "axios": "0.21.1",
     "axios-retry": "^3.1.9",
     "cron-parser": "^4.0.0",
+    "crypto-js": "^4.1.1",
+    "css-color-function": "^1.3.3",
     "deepmerge": "^4.2.2",
     "echarts": "^4.7.0",
     "element-ui": "2.13.2",
     "eslint-plugin-html": "^6.0.0",
     "install": "^0.13.0",
-    "jquery": "^3.5.0",
+    "jquery": "^3.6.1",
     "js-cookie": "2.2.0",
+    "jsencrypt": "^3.2.1",
     "krry-transfer": "^1.7.3",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "lodash.clonedeep": "^4.5.0",
     "lodash.frompairs": "^4.0.1",
     "lodash.get": "^4.4.2",
@@ -47,24 +54,26 @@
     "lodash.set": "^4.3.2",
     "lodash.topairs": "^4.3.0",
     "lodash.values": "^4.3.0",
-    "moment": "^2.29.1",
-    "moment-parseformat": "^3.0.0",
+    "moment": "^2.29.4",
+    "moment-parseformat": "^4.0.0",
     "normalize.css": "7.0.0",
     "npm": "^7.8.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
-    "vue-codemirror-lite": "^1.0.4",
+    "vue-codemirror": "4.0.6",
     "vue-cookie": "^1.1.4",
     "vue-echarts": "^5.0.0-beta.0",
     "vue-i18n": "^8.15.5",
     "vue-json-editor": "^1.4.3",
+    "vue-markdown": "^2.2.4",
     "vue-moment": "^4.1.0",
     "vue-password-strength-meter": "^1.7.2",
     "vue-router": "3.0.6",
     "vue-select": "^3.9.5",
     "vuejs-logger": "^1.5.4",
     "vuex": "3.1.0",
+    "xss": "^1.0.14",
     "xterm": "^4.5.0",
     "xterm-addon-fit": "^0.3.0",
     "zxcvbn": "^4.4.2"
@@ -88,13 +97,14 @@
     "eslint": "^5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "eslint-plugin-vue-i18n": "^0.3.0",
+    "github-markdown-css": "^5.1.0",
     "html-webpack-plugin": "3.2.0",
     "husky": "^4.2.3",
     "less-loader": "^5.0.0",
     "lint-staged": "^10.1.2",
     "mockjs": "1.0.1-beta3",
     "runjs": "^4.3.2",
-    "sass": "^1.26.10",
+    "sass": "~1.32.6",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",

public/index.html

@@ -9,23 +9,7 @@
     <meta http-equiv="Cache" content="no-cache">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title><%= webpackConfig.name %></title>
-    <style>
-      ::-webkit-scrollbar {
-        width:14px;
-      }
-      ::-webkit-scrollbar-track {
-        border-radius:10px;
-      }
-      ::-webkit-scrollbar-thumb {
-        border-radius: 8px;
-        box-shadow: 8px 10px 20px #C6C6C6 inset;
-        border: 3px solid rgba(0, 0, 0, 0);
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        box-shadow: 8px 10px 20px #878787 inset;
-      }
-
-    </style>
+    <link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
   </head>
   <body>
     <noscript>
@@ -33,9 +17,15 @@
     </noscript>
     <script>
       window.onload = function() {
-        const baseUrl = "/ui/"
-        if (location.pathname === '/' && baseUrl !== '/') {
-           location.pathname = baseUrl
+        if (location.pathname === '/') {
+           location.pathname = '/ui/'
+        }
+        const pathname = window.location.pathname
+        if (pathname.startsWith('/core')) {
+            return
+        }
+        if(pathname.indexOf('/ui') === -1) {
+          window.location.href = window.location.origin + '/ui/#' + pathname
         }
       }
     </script>

public/theme/README.md

@@ -0,0 +1,23 @@
+# 主题颜色
+```
+alpha-1: "rgba(64, 158, 255, 0.1)"
+alpha-2: "rgba(64, 158, 255, 0.2)"
+alpha-3: "rgba(64, 158, 255, 0.3)"
+alpha-4: "rgba(64, 158, 255, 0.4)"
+alpha-5: "rgba(64, 158, 255, 0.5)"
+alpha-6: "rgba(64, 158, 255, 0.6)"
+alpha-7: "rgba(64, 158, 255, 0.7)"
+alpha-8: "rgba(64, 158, 255, 0.8)"
+alpha-9: "rgba(64, 158, 255, 0.9)"
+light-1: "#53a8ff"
+light-2: "#66b1ff"
+light-3: "#79bbff"
+light-4: "#8cc5ff"
+light-5: "#a0cfff"
+light-6: "#b3d8ff"
+light-7: "#c6e2ff"
+light-8: "#d9ecff"
+light-9: "#ecf5ff"
+primary: "#409EFF"
+```
+primary是初始主题颜色，其他颜色均属于primary的系列颜色

public/theme/element-extra.css

@@ -1,66 +1,84 @@
-// cover some element-ui styles
+/* 这里只写element-variables里面改不动的、且和主题系列颜色相关的样式！！！ */
+/* 主题相关看该文件夹下的README.md */
+
+/* info type special treatment */
+.el-button--info {
+  background-color: info;
+  border-color: info;
+}
+
+.el-button--text {
+  padding: 5px
+}
+
+.el-button--text:hover {
+  background-color: rgba(0, 0, 0, .05);
+}
+
+.el-button--success {
+  background-color: success;
+  border-color: success;
+}
+
+.el-alert--info.is-light {
+  background-color: light-9;
+  color: light-2;
+  border: 1px solid;
+}
+
+.el-alert--info .el-alert__description {
+  color: light-2;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: white;
+  background-color: primary;
+}
+
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+  margin: 0 5px;
+  background-color: white;
+  color: #606266;
+  min-width: 28px;
+  border-radius: 2px;
+  border: 1px solid #DCDFE6;
+  font-size: 12px;
+  line-height: 26px;
+  font-weight: 400;
+}
 
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
 }
 
-$--color-primary: #1ab394;
-$--color-success: #1c84c6;
-$--color-info: #23c6c8;
-$--color-warning: #f8ac59;
-$--color-danger: #ed5565;
-
-$--color-link: #1c84c6;
-$--color-link-highlight: #23527c;
-
-$--color-text-primary: #303133;
-/// color|1|Font Color|2
-$--color-text-regular: #606266;
-
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
+.el-upload input[type="file"] {
+  display: none !important;
 }
 
 .el-upload__input {
   display: none;
 }
 
-
-// to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-// refine element ui upload
-.upload-container {
-  .el-upload {
+.upload-container .el-upload {
     width: 100%;
-
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
 }
 
-// dropdown
-.el-dropdown-menu {
-  a {
-    display: block
-  }
+.upload-container .el-upload .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+.el-dropdown-menu a {
+  display: block
 }
 
 .el-table th > .cell {
   color: rgb(104, 106, 108);
 }
 
-// to fix el-date-picker css style
 .el-range-separator {
   box-sizing: content-box;
 }
@@ -111,22 +129,6 @@ td .el-button.el-button--mini {
   border-left-color: rgb(220, 223, 230);
 }
 
-.el-alert--success.is-light {
-  border: #bce8f1 solid 1px;
-}
-
-.el-alert--info.is-light {
-  border: #bce8f1 solid 1px;
-}
-
-.el-alert--warning.is-light {
-  border: #faebcc solid 1px;
-}
-
-.el-alert--error.is-light {
-  border: #f1dfe2 solid 1px;
-}
-
 .el-alert__content {
   line-height: 1.5;
 }
@@ -140,32 +142,32 @@ td .el-button.el-button--mini {
 }
 
 .el-card.primary > .el-card__header {
-  background-color: $--color-primary;
-  border-color: $--color-primary;
+  background-color: primary;
+  border-color: primary;
   color: white;
 }
 
 .el-card.success > .el-card__header {
-  background-color: $--color-success;
-  border-color: $--color-success;
+  background-color: success;
+  border-color: success;
   color: #ffffff;
 }
 
 .el-card.info > .el-card__header {
-  background-color: $--color-info;
-  border-color: $--color-info;
+  background-color: info;
+  border-color: info;
   color: #ffffff;
 }
 
 .el-card.warning > .el-card__header {
-  background-color: $--color-warning;
-  border-color: $--color-warning;
+  background-color: warning;
+  border-color: warning;
   color: #ffffff;
 }
 
 .el-card.danger > .el-card__header {
-  background-color: $--color-danger;
-  border-color: $--color-danger;
+  background-color: danger;
+  border-color: danger;
   color: #ffffff;
 }
 
@@ -192,57 +194,42 @@ td .el-button.el-button--mini {
   line-height: 34px;
 }
 
-
-.el-select-dropdown__item.selected {
-  font-weight: 400;
-  color: $--color-text-primary;
-  background-color: #ddd;
-}
-
-
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
-  color: #606266;
-  background-color: #ddd;
-  font-weight: 400;
-}
-
-//.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
-//  color: #606266;
-//  background-color: #ddd;
-//  font-weight: 400;
-//}
-
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-  background-color: $--color-primary;
+.option-group .el-select-dropdown__item.hover, .option-group .el-select-dropdown__item.selected {
+  background-color: primary;
   color: white;
 }
 
+.option-group:has(.hover) .el-select-dropdown__item.selected {
+  background-color: light-2;
+}
+
+
 .el-select-dropdown__item.is-disabled:hover{
   color:#c0c4cc;
 }
 
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
-  color: $--color-primary;
+  color: primary;
 }
 
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
   color: white;
-  background-color: $--color-primary;
+  background-color: light-4;
 }
 
 .el-tag.el-tag--info {
-  background-color: #f1f1f1;
-  border-color: #e5e6e7;
-  color: #333333;
+  background-color: #f1f1f1!important;
+  border-color: #e5e6e7!important;
+  color: #333333!important;
 }
 
 .el-tag.el-tag--info .el-tag__close {
-  color: #333333;
+  color: #333333!important;
   background-color: inherit;
 }
 
 .el-tag.el-tag--info.is-hit {
-  border-color: #e5e6e7;
+  border-color: #e5e6e7!important;
 }
 
 .el-tag.el-tag--info .el-tag__close:hover {
@@ -259,120 +246,71 @@ td .el-button.el-button--mini {
   border-top-color: #676a6c;
 }
 
+.text-link {
+  color: info!important;
+}
+
+.text-link:hover {
+  color: info!important;
+  filter: opacity(65%)!important;
+}
+
 .text-danger {
-  color: $--color-danger;
+  color: danger;
 }
 
 .text-primary {
-  color: $--color-primary;
+  color: primary;
 }
 
 .text-info {
-  color: $--color-info;
+  color: info;
 }
 
 .text-warning {
-  color: $--color-warning;
+  color: warning;
 }
 
 .text-success {
-  color: $--color-success;
+  color: success;
 }
 
 .el-radio__input.is-checked+.el-radio__label {
   color: inherit;
 }
 
-.el-radio__input.is-checked .el-radio__inner {
-  border-color: #409EFF;
-  background-color: #409EFF;
-}
-
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  border-color: #409EFF;
-  background-color: #409EFF;
-}
-
-.el-radio__inner:hover {
-  border-color: #409EFF;
-}
-
 .el-textarea__inner {
   border-radius: 0;
 }
 
-.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  border-color: #409EFF;
-  background-color: #409EFF;
-}
-
-.el-checkbox__input.is-checked+.el-checkbox__label {
-  color: #606266;
-}
-
-.el-checkbox__inner:hover {
-  border-color: #409EFF;
-}
-
-.el-checkbox__input.is-focus .el-checkbox__inner {
-  border-color: #409EFF;
-}
-
-.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
-  margin: 0 5px;
-  background-color: white;
-  color: #606266;
-  min-width: 28px;
-  border-radius: 2px;
-  border: 1px solid #DCDFE6;
-  font-size: 12px;
-  line-height: 26px;
-  font-weight: 400;
-}
-
-.el-pagination.is-background .el-pager li:not(.disabled):hover {
-  color: white;
-  background-color: $--color-primary;
-}
-
 .el-pagination.is-background .number {
   padding: 0;
 }
 
+.el-card.primary .el-card__header {
+  background-color: primary;
+}
+
+.el-card.success .el-card__header {
+  background-color: success;
+}
+
+.el-card.info .el-card__header {
+  background-color: info;
+}
+
+.el-card.warning .el-card__header {
+  background-color: warning;
+}
+
+.el-card.danger .el-card__header {
+  background-color: danger;
+}
+
 .el-message-box__headerbtn .el-message-box__close {
   color: #606266;
 }
 
-.el-card.primary {
-  .el-card__header {
-    background-color: $--color-primary;
-  }
-}
-
-.el-card.success {
-  .el-card__header {
-    background-color: $--color-success;
-  }
-}
-
-.el-card.info {
-  .el-card__header {
-    background-color: $--color-info;
-  }
-}
-
-.el-card.warning {
-  .el-card__header {
-    background-color: $--color-warning;
-  }
-}
-
-.el-card.danger {
-  .el-card__header {
-    background-color: $--color-danger;
-  }
-}
-
 .el-tooltip__popper.is-light {
   background: #FFF;
   border: 1px solid #e7eaec;
@@ -391,22 +329,13 @@ td .el-button.el-button--mini {
   border-bottom: 1px solid #e7e7e7 !important;
 }
 
-.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
+.el-table .cell,
+.el-table td:first-child .cell,
+.el-table th:first-child .cell {
   padding-left: 10px;
   padding-right: 14px;
 }
 
-.el-tag--dark.el-tag--info {
-  background-color: #23c6c8;
-  border-color: #23c6c8;
-  color: #fff;
-}
-
-a {
-  color: $--color-link !important;
-  text-decoration: none;
-}
-
 .el-tag--default.el-tag--dark {
   background-color: #d1dade;
   color: #5e5e5e;
@@ -417,7 +346,6 @@ a {
   color: #676a6c;
 }
 
-
 .el-table__empty-block {
  width: 100% !important;
 }
@@ -433,62 +361,146 @@ a {
   color: #000;
   font-size: 22px;
   font-weight: 800;
-  //color: red;
+}
+
+.el-tag--default.el-tag--dark {
+  background-color: #d1dade;
+  color: #5e5e5e;
+  border: none;
+}
+
+.el-card {
+  color: #676a6c;
+}
+
+.el-table__empty-block {
+ width: 100% !important;
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+  font-size: 21px;
+  font-weight: 700;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
+  color: #000;
+  font-size: 22px;
+  font-weight: 800;
 }
 
 .el-button--danger.is-plain {
-  color: $--color-danger;
+  color: danger;
   background: #ffffff;
-  border-color: $--color-danger;
+  border-color: danger;
+}
+
+.el-button--danger.is-plain.is-disabled,
+.el-button--danger.is-plain.is-disabled:active,
+.el-button--danger.is-plain.is-disabled:focus,
+.el-button--danger.is-plain.is-disabled:hover {
+  color: white;
 }
 
 .el-alert .el-alert__description {
   margin: 1px 0 0;
 }
 
-.el-input-group__prepend div.el-select .el-input__inner {
-  color: $--color-text-primary;
-}
-
-.el-input-group__prepend div.el-select .el-input__inner:hover {
-  color: $--color-text-primary;
-}
-
 .el-table {
   font-size: 13px;
 }
 
-.el-table-filter__list-item:hover {
-  color: $--color-text-primary;
-}
-
-
 .el-dialog {
-  // 居中弹框
   position: absolute;
   top: 50%;
   left: 50%;
   margin: 0 !important;
   transform: translate(-50%, -50%);
-  // 防止超出视窗
   max-height: calc(100% - 30px);
   max-width: calc(100% - 30px);
-  //实现body内部滚动
   display: flex;
   flex-direction: column;
-
-  .el-dialog__body {
-    max-height: 90vh;
-    overflow: auto;
-  }
 }
 
-.el-button--text {
-  color: $--color-link;
-  padding: 5px;
+.el-dialog  .el-dialog__body {
+  max-height: 90vh;
+  overflow: auto;
+  padding: 30px;
 }
 
-.el-button--text:hover {
-  color: $--color-link-highlight;
-  background-color: rgba(0,0,0,.05)
+.el-dialog .el-dialog__body form {
+  padding-right: 20px;
+}
+
+.el-dialog .el-dialog__footer {
+  padding: 10px 30px 30px;
+}
+
+.el-cascader {
+  line-height: 34px;
+}
+
+.el-input__icon {
+  line-height: 34px;
+}
+
+.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #606266;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: 400;
+  color: white;
+  background-color: primary;
+}
+
+.el-input-group__prepend div.el-select .el-input__inner,
+.el-input-group__prepend div.el-select .el-input__inner:hover {
+  color: #303133;
+}
+
+.el-input-group__append, .el-input-group__prepend {
+  color: primary
+}
+
+.el-input.is-disabled .el-input__inner {
+  color: $--color-text-primary;
+  cursor: not-allowed;
+}
+
+.el-step__description.is-finish {
+  color: #676a6c;
+}
+
+.el-alert {
+  border: solid 1px #e7eaec;
+}
+
+.el-alert.el-alert--success.is-light {
+  border-color: var(--color-success-light);
+}
+
+.el-alert.el-alert--primary.is-light {
+  border-color: var(--color-primary-light);
+}
+
+.el-alert.el-alert--info.is-light {
+  border-color: var(--color-info-light);
+}
+
+.el-alert.el-alert--warning.is-light {
+  border-color: var(--color-warning-light);
+}
+
+.el-alert.el-alert--error.is-light {
+  border-color: var(--color-danger-light);
+}
+
+#nprogress .bar {
+  background: light-5!important;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px light-5, 0 0 5px light-5!important;
 }

src/App.vue

@@ -1,11 +1,21 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view v-if="isRouterAlive" />
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  name: 'App'
+  name: 'App',
+  computed: {
+    ...mapState({
+      isRouterAlive: state => state.common.isRouterAlive
+    })
+  }
 }
 </script>
+
+<style>
+</style>

src/api/asset.js

@@ -40,3 +40,10 @@ export function getCommandFilterList(data) {
   })
 }
 
+export function getCategoryTypes() {
+  return request({
+    url: '/api/v1/assets/categories/',
+    method: 'get'
+  })
+}
+

src/api/common.js

@@ -1,6 +1,13 @@
 import request from '@/utils/request'
 
 export function createSourceIdCache(ids) {
+  ids = ids.map(item => {
+    if (typeof item === 'object' && item.id) {
+      return item.id
+    } else {
+      return item
+    }
+  })
   return request({
     url: '/api/v1/common/resources/cache/',
     method: 'post',

src/api/interface.js

@@ -1,8 +1,8 @@
 import request from '@/utils/request'
 
-export function postInterface(formData) {
+export function updateInterface(formData) {
   return request({
-    url: '/api/v1/xpack/interface/setting',
+    url: '/api/v1/xpack/interface/setting/',
     method: 'put',
     headers: {
       'Content-Type': 'multipart/form-data'
@@ -12,15 +12,15 @@ export function postInterface(formData) {
 }
 export function getInterfaceInfo() {
   return request({
-    url: '/api/v1/xpack/interface/setting',
+    url: '/api/v1/xpack/interface/setting/',
     method: 'get'
   })
 }
 
 export function restoreInterface() {
   return request({
-    url: '/api/v1/xpack/interface/restore',
-    method: 'get'
+    url: '/api/v1/xpack/interface/setting/restore/',
+    method: 'put'
   })
 }
 
@@ -34,3 +34,10 @@ export function importLicense(formData) {
     data: formData
   })
 }
+
+export function previewThemes() {
+  return request({
+    url: `/api/v1/xpack/interface/setting/themes/`,
+    method: 'get'
+  })
+}

src/api/ops.js

@@ -1,12 +1,5 @@
 import request from '@/utils/request'
 
-export function getTaskDetail(id) {
-  return request({
-    url: `/api/v1/ops/tasks/${id}/`,
-    method: 'get'
-  })
-}
-
 export function getAdhocDetail(id) {
   return request({
     url: `/api/v1/ops/adhoc/${id}/`,
@@ -20,3 +13,34 @@ export function getHistoryExecutionDetail(id) {
     method: 'get'
   })
 }
+
+export function getTaskDetail(id) {
+  return request({
+    url: `/api/v1/ops/job-execution/task-detail/${id}/`,
+    method: 'get'
+  })
+}
+
+export function getJob(id) {
+  return request({
+    url: `/api/v1/ops/jobs/${id}/`,
+    method: 'get'
+  })
+}
+
+export function uploadPlaybook(form) {
+  return request({
+    url: '/api/v1/ops/playbooks/',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: form
+  })
+}
+
+export function renameFile(playbookId, node) {
+  return request({
+    url: `/api/v1/ops/playbook/${playbookId}/file/`,
+    method: 'patch',
+    data: node
+  })
+}

src/api/orgs.js

@@ -13,3 +13,9 @@ export function getCurrentOrg() {
     method: 'get'
   })
 }
+
+export default {
+  getCurrentOrg,
+  getOrgDetail
+}
+

src/api/perms.js

@@ -1,43 +0,0 @@
-import request from '@/utils/request'
-
-export function getAssetPermissionDetail(id) {
-  return request({
-    url: `/api/v1/perms/asset-permissions/${id}/`,
-    method: 'get'
-  })
-}
-
-export function getRemoteAppPermissionDetail(id) {
-  return request({
-    url: `/api/v1/perms/remote-app-permissions/${id}/`,
-    method: 'get'
-  })
-}
-
-export function getDatabaseAppPermissionDetail(id) {
-  return request({
-    url: `/api/v1/perms/database-app-permissions/${id}/`,
-    method: 'get'
-  })
-}
-
-export function getUserAssetGrantedSystemUsers(userId, assetId) {
-  return request({
-    url: `/api/v1/perms/users/${userId}/assets/${assetId}/system-users/?cache_policy=1`,
-    method: 'get'
-  })
-}
-
-export function getMyAssetGrantedSystemUsers(userId, assetId) {
-  return request({
-    url: `/api/v1/perms/users/assets/${assetId}/system-users/?cache_policy=1`,
-    method: 'get'
-  })
-}
-
-export function getUserGroupAssetGrantedSystemUsers(gId, assetId) {
-  return request({
-    url: `/api/v1/perms/user-groups/${gId}/assets/${assetId}/system-users/?cache_policy=1`,
-    method: 'get'
-  })
-}

src/api/settings.js

@@ -25,12 +25,28 @@ export function importLicense(formData) {
     data: formData
   })
 }
-export function testLdapSetting(data) {
-  return request({
-    disableFlashErrorMsg: true,
-    url: '/api/v1/settings/ldap/testing/config/',
-    method: 'post',
-    data: data
+export function testLdapSetting(data, refresh = true) {
+  let url = '/api/v1/settings/ldap/testing/config/'
+  if (refresh) {
+    url = url + '?refresh=1'
+  }
+  return new Promise((resolve, reject) => {
+    request({
+      disableFlashErrorMsg: true,
+      url: url,
+      method: 'post',
+      data: data
+    }).then(res => {
+      if (res.status !== 'running') {
+        resolve(res)
+      } else {
+        setTimeout(() => {
+          resolve(testLdapSetting(data, false))
+        }, 1000)
+      }
+    }).catch(error => {
+      reject(error)
+    })
   })
 }
 
@@ -68,15 +84,21 @@ export function importLdapUser(data) {
   })
 }
 
-export function getPublicSettings() {
+export function getPublicSettings(isOpen) {
+  let url
+  if (isOpen) {
+    url = '/api/v1/settings/public/open/'
+  } else {
+    url = '/api/v1/settings/public/'
+  }
   return request({
-    url: '/api/v1/settings/public/',
+    url: url,
     method: 'get'
   })
 }
 export function getLogo() {
   return request({
-    url: '/api/v1/xpack/interface/setting',
+    url: '/api/v1/xpack/interface/setting/',
     method: 'get'
   })
 }

src/api/users.js

@@ -69,3 +69,8 @@ export function logout() {
 export function refreshSessionIdAge() {
   return getProfile()
 }
+
+export default {
+  getProfile,
+  getUserList
+}

src/components/AccountCreateUpdateForm/index.vue

@@ -0,0 +1,321 @@
+<template>
+  <AutoDataForm
+    v-if="!loading"
+    ref="AutoDataForm"
+    v-bind="$data"
+    @submit="confirm"
+  />
+</template>
+
+<script>
+import AutoDataForm from '@/components/AutoDataForm'
+import { UpdateToken, UploadSecret } from '@/components/FormFields'
+import Select2 from '@/components/FormFields/Select2'
+import AssetSelect from '@/components/AssetSelect'
+import { encryptPassword } from '@/utils/crypto'
+import { Required, RequiredChange } from '@/components/DataForm/rules'
+import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
+
+export default {
+  name: 'AccountCreateForm',
+  components: {
+    AutoDataForm
+  },
+  props: {
+    asset: {
+      type: Object,
+      default: null
+    },
+    platform: {
+      type: Object,
+      default: null
+    },
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    // 默认组件密码加密
+    encryptPassword: {
+      type: Boolean,
+      default: true
+    },
+    addTemplate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      usernameChanged: false,
+      defaultPrivilegedAccounts: ['root', 'administrator'],
+      iPlatform: {
+        automation: {},
+        su_enabled: false,
+        protocols: [
+          {
+            name: 'ssh',
+            secret_types: ['password', 'ssh_key', 'token', 'access_key', 'api_key']
+          }
+        ]
+      },
+      url: '/api/v1/accounts/accounts/',
+      form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
+      encryptedFields: ['secret'],
+      fields: [
+        [this.$t('assets.Asset'), ['assets']],
+        [this.$t('accounts.AccountTemplate'), ['template']],
+        [this.$t('common.Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username']],
+        [this.$t('assets.Secret'), [
+          'secret_type', 'password', 'ssh_key', 'token',
+          'access_key', 'passphrase', 'api_key'
+        ]],
+        [this.$t('common.Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
+      ],
+      fieldsMeta: {
+        assets: {
+          rules: [Required],
+          component: AssetSelect,
+          label: this.$t('assets.Asset'),
+          el: {
+            multiple: false
+          },
+          hidden: () => {
+            return this.platform || this.asset
+          }
+        },
+        template: {
+          component: Select2,
+          rules: [Required],
+          el: {
+            multiple: false,
+            ajax: {
+              url: '/api/v1/accounts/account-templates/',
+              transformOption: (item) => {
+                return { label: item.name, value: item.id }
+              }
+            }
+          },
+          hidden: () => {
+            return this.platform || this.asset || !this.addTemplate
+          }
+        },
+        on_invalid: {
+          rules: [Required],
+          label: this.$t('accounts.AccountPolicy'),
+          helpText: this.$t('accounts.BulkCreateStrategy'),
+          hidden: () => {
+            return this.platform || this.asset
+          }
+        },
+        name: {
+          rules: [RequiredChange],
+          on: {
+            input: ([value], updateForm) => {
+              if (!this.usernameChanged) {
+                if (!this.account?.name) {
+                  updateForm({ username: value })
+                }
+                const maybePrivileged = this.defaultPrivilegedAccounts.includes(value)
+                if (maybePrivileged) {
+                  updateForm({ privileged: true })
+                }
+              }
+            }
+          },
+          hidden: () => {
+            return this.addTemplate
+          }
+        },
+        username: {
+          el: {
+            disabled: !!this.account?.name
+          },
+          on: {
+            input: ([value], updateForm) => {
+              this.usernameChanged = true
+            },
+            change: ([value], updateForm) => {
+              const maybePrivileged = this.defaultPrivilegedAccounts.includes(value)
+              if (maybePrivileged) {
+                updateForm({ privileged: true })
+              }
+            }
+          },
+          hidden: () => {
+            return this.addTemplate
+          }
+        },
+        privileged: {
+          hidden: () => {
+            return this.addTemplate
+          }
+        },
+        su_from: {
+          component: Select2,
+          hidden: (formValue) => {
+            return !this.asset?.id || !this.iPlatform.su_enabled
+          },
+          el: {
+            multiple: false,
+            clearable: true,
+            ajax: {
+              url: `/api/v1/accounts/accounts/su-from-accounts/?account=${this.account?.id || ''}&asset=${this.asset?.id || ''}`,
+              transformOption: (item) => {
+                return { label: `${item.name}(${item.username})`, value: item.id }
+              }
+            }
+          }
+        },
+        su_from_username: {
+          label: this.$t('assets.UserSwitchFrom'),
+          hidden: (formValue) => {
+            return this.platform || this.asset || this.addTemplate
+          }
+        },
+        password: {
+          label: this.$t('assets.Password'),
+          component: UpdateToken,
+          hidden: (formValue) => formValue.secret_type !== 'password' || this.addTemplate
+        },
+        ssh_key: {
+          label: this.$t('assets.PrivateKey'),
+          component: UploadSecret,
+          hidden: (formValue) => formValue.secret_type !== 'ssh_key' || this.addTemplate
+        },
+        passphrase: {
+          label: this.$t('assets.Passphrase'),
+          component: UpdateToken,
+          hidden: (formValue) => formValue.secret_type !== 'ssh_key' || this.addTemplate
+        },
+        token: {
+          label: this.$t('assets.Token'),
+          component: UploadSecret,
+          hidden: (formValue) => formValue.secret_type !== 'token' || this.addTemplate
+        },
+        access_key: {
+          id: 'access_key',
+          label: this.$t('assets.AccessKey'),
+          component: UploadSecret,
+          hidden: (formValue) => formValue.secret_type !== 'access_key' || this.addTemplate
+        },
+        api_key: {
+          id: 'api_key',
+          label: this.$t('assets.ApiKey'),
+          component: UploadSecret,
+          hidden: (formValue) => formValue.secret_type !== 'api_key' || this.addTemplate
+        },
+        secret_type: {
+          type: 'radio-group',
+          options: [],
+          hidden: () => {
+            return this.addTemplate
+          }
+        },
+        push_now: {
+          helpText: this.$t('accounts.AccountPush.WindowsPushHelpText'),
+          hidden: () => {
+            const automation = this.iPlatform.automation || {}
+            return !automation.push_account_enabled ||
+              !automation.ansible_enabled ||
+              !this.$hasPerm('accounts.push_account') ||
+              this.addTemplate
+          }
+        },
+        params: {
+          label: this.$t('assets.PushParams'),
+          component: AutomationParamsForm,
+          el: {
+            method: this.asset?.auto_config?.push_account_method
+          },
+          hidden: (formValue) => {
+            const automation = this.iPlatform.automation || {}
+            return !formValue.push_now ||
+              !automation.push_account_enabled ||
+              !automation.ansible_enabled ||
+              !this.$hasPerm('accounts.push_account') ||
+              this.addTemplate
+          }
+        },
+        comment: {
+          hidden: () => {
+            return this.addTemplate
+          }
+        }
+      },
+      hasSaveContinue: false
+    }
+  },
+  async mounted() {
+    try {
+      await this.getPlatform()
+      this.setSecretTypeOptions()
+    } finally {
+      this.loading = false
+    }
+  },
+  methods: {
+    async getPlatform() {
+      if (this.platform) {
+        this.iPlatform = this.platform
+      }
+      if (!this.asset || !this.asset.platform) {
+        return
+      }
+      const platformId = this.asset.platform.id
+      this.iPlatform = await this.$axios.get(`/api/v1/assets/platforms/${platformId}/`)
+    },
+    setSecretTypeOptions() {
+      const choices = [
+        {
+          label: this.$t('assets.Password'),
+          value: 'password'
+        },
+        {
+          label: this.$t('assets.SSHKey'),
+          value: 'ssh_key'
+        },
+        {
+          label: this.$t('assets.Token'),
+          value: 'token'
+        },
+        {
+          label: this.$t('assets.AccessKey'),
+          value: 'access_key'
+        },
+        {
+          label: this.$t('assets.ApiKey'),
+          value: 'api_key'
+        }
+      ]
+      const secretTypes = []
+      this.iPlatform.protocols?.forEach(p => {
+        secretTypes.push(...p['secret_types'])
+      })
+      if (!this.form?.secret_type) {
+        this.form.secret_type = secretTypes[0]
+      }
+      this.fieldsMeta.secret_type.options = choices.filter(item => {
+        return secretTypes.indexOf(item.value) > -1
+      })
+    },
+    confirm(form) {
+      const secretType = form.secret_type || 'password'
+      form.secret = form[secretType]
+      form.secret = this.encryptPassword ? encryptPassword(form.secret) : form.secret
+
+      if (!form.secret) {
+        delete form['secret']
+      }
+      if (this.account?.name) {
+        this.$emit('edit', form)
+      } else {
+        this.$emit('add', form)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/AccountListTable/AccountCreateUpdate.vue

@@ -0,0 +1,178 @@
+<template>
+  <Dialog
+    v-if="iVisible"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="title"
+    :visible.sync="iVisible"
+    v-bind="$attrs"
+    width="70%"
+    v-on="$listeners"
+  >
+    <AccountCreateUpdateForm
+      v-if="!loading"
+      ref="form"
+      :account="account"
+      :add-template="addTemplate"
+      :asset="asset"
+      @add="addAccount"
+      @edit="editAccount"
+    />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import AccountCreateUpdateForm from '@/components/AccountCreateUpdateForm'
+
+export default {
+  name: 'CreateAccountDialog',
+  components: {
+    Dialog,
+    AccountCreateUpdateForm
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    addTemplate: {
+      type: Boolean,
+      default: false
+    },
+    asset: {
+      type: Object,
+      default: null
+    },
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      default: function() {
+        return this.$t('assets.AddAccount')
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      platform: {}
+    }
+  },
+  computed: {
+    protocols() {
+      return this.asset ? this.asset.protocol : []
+    },
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  methods: {
+    addAccount(form) {
+      const formValue = Object.assign({}, form)
+      let data, url, iVisible
+      if (this.asset) {
+        data = {
+          asset: this.asset.id,
+          ...formValue
+        }
+        iVisible = false
+        url = `/api/v1/accounts/accounts/`
+      } else {
+        iVisible = true
+        data = formValue
+        url = `/api/v1/accounts/accounts/bulk/`
+        if (data.assets.length === 0) {
+          this.$message.error(this.$tc('assets.PleaseSelectAsset'))
+          return
+        }
+      }
+      this.$axios.post(url, data, {
+        disableFlashErrorMsg: iVisible
+      }).then((data) => {
+        this.handleResult(data, null)
+        this.iVisible = iVisible
+        if (!iVisible) {
+          this.$emit('add', true)
+        }
+      }).catch(error => {
+        this.iVisible = true
+        this.handleResult(null, error)
+      })
+    },
+    editAccount(form) {
+      const data = { ...form }
+      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
+        this.iVisible = false
+        this.$emit('add', true)
+        this.$message.success(this.$tc('common.updateSuccessMsg'))
+      }).catch(error => this.setFieldError(error))
+    },
+    handleResult(resp, error) {
+      let bulkCreate = !this.asset
+      if (error && !Array.isArray(error?.response?.data)) {
+        bulkCreate = false
+      }
+      if (resp && !Array.isArray(resp)) {
+        bulkCreate = false
+      }
+      if (!bulkCreate) {
+        if (!error) {
+          this.$message.success(this.$tc('common.createSuccessMsg'))
+        } else {
+          this.setFieldError(error)
+        }
+      } else {
+        let result
+        if (error) {
+          result = error.response.data
+        } else {
+          result = resp
+        }
+        this.$emit('bulk-create-done', result)
+      }
+    },
+    setFieldError(error) {
+      const response = error.response
+      const data = response.data
+      const refsAutoDataForm = this.$refs.form.$refs.AutoDataForm
+      if (response.status === 400) {
+        for (const key of Object.keys(data)) {
+          let err = ''
+          let current = key
+          let errorTips = data[current]
+          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 += errorTips
+              }
+            }
+          } else {
+            err = errorTips
+          }
+          if (current === 'secret') {
+            current = refsAutoDataForm.form.secret_type?.value || key
+          }
+          refsAutoDataForm.setFieldError(current, err)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/AccountListTable/AccountList.vue

@@ -0,0 +1,438 @@
+<template>
+  <div>
+    <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
+    <ViewSecret
+      v-if="showViewSecretDialog"
+      :account="account"
+      :url="secretUrl"
+      :visible.sync="showViewSecretDialog"
+    />
+    <UpdateSecretInfo
+      v-if="showUpdateSecretDialog"
+      :account="account"
+      :visible.sync="showUpdateSecretDialog"
+      @updateAuthDone="onUpdateAuthDone"
+    />
+    <AccountCreateUpdate
+      v-if="showAddDialog"
+      :account="account"
+      :asset="iAsset"
+      :title="accountCreateUpdateTitle"
+      :visible.sync="showAddDialog"
+      @add="addAccountSuccess"
+      @bulk-create-done="showBulkCreateResult($event)"
+    />
+    <AccountCreateUpdate
+      v-if="showAddTemplateDialog"
+      :account="account"
+      :add-template="true"
+      :asset="iAsset"
+      :title="accountCreateUpdateTitle"
+      :visible.sync="showAddTemplateDialog"
+      @add="addAccountSuccess"
+      @bulk-create-done="showBulkCreateResult($event)"
+    />
+    <ResultDialog
+      v-if="showResultDialog"
+      :result="createAccountResults"
+      :visible.sync="showResultDialog"
+    />
+  </div>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable/index'
+import { ActionsFormatter } from '@/components/TableFormatters'
+import ViewSecret from './ViewSecret'
+import UpdateSecretInfo from './UpdateSecretInfo'
+import AccountCreateUpdate from './AccountCreateUpdate'
+import { connectivityMeta } from './const'
+import { openTaskPage } from '@/utils/jms'
+import ResultDialog from './BulkCreateResultDialog.vue'
+
+export default {
+  name: 'AccountListTable',
+  components: {
+    ResultDialog,
+    ListTable,
+    UpdateSecretInfo,
+    ViewSecret,
+    AccountCreateUpdate
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    exportUrl: {
+      type: String,
+      default() {
+        return this.url.replace('/accounts/accounts/', '/accounts/account-secrets/')
+      }
+    },
+    hasLeftActions: {
+      type: Boolean,
+      default: false
+    },
+    otherActions: {
+      type: Array,
+      default: null
+    },
+    hasClone: {
+      type: Boolean,
+      default: false
+    },
+    asset: {
+      type: Object,
+      default: null
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    hasExport: {
+      type: Boolean,
+      default: true
+    },
+    hasImport: {
+      type: Boolean,
+      default: true
+    },
+    hasDeleteAction: {
+      type: Boolean,
+      default: true
+    },
+    columnsMeta: {
+      type: Object,
+      default: () => {
+      }
+    },
+    columnsDefault: {
+      type: Array,
+      default: () => ([
+        'name', 'username', 'asset', 'privileged',
+        'secret_type', 'date_updated'
+      ])
+    },
+    headerExtraActions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      showViewSecretDialog: false,
+      showUpdateSecretDialog: false,
+      showResultDialog: false,
+      showAddDialog: false,
+      showAddTemplateDialog: false,
+      createAccountResults: [],
+      accountCreateUpdateTitle: this.$t('assets.AddAccount'),
+      iAsset: this.asset,
+      account: {},
+      secretUrl: '',
+      tableConfig: {
+        url: this.url,
+        permissions: {
+          app: 'assets',
+          resource: 'account'
+        },
+        extraQuery: {
+          order: '-date_updated'
+        },
+        columnsExclude: ['spec_info'],
+        columns: [
+          'name', 'username', 'asset', 'privileged',
+          'secret_type', 'source', 'actions'
+        ],
+        columnsShow: {
+          min: ['name', 'username', 'actions'],
+          default: this.columnsDefault
+        },
+        columnsMeta: {
+          name: {
+            formatter: function(row) {
+              const to = {
+                name: 'AssetAccountDetail',
+                params: { id: row.id }
+              }
+              if (vm.$hasPerm('accounts.view_account')) {
+                return <router-link to={to}>{row.name}</router-link>
+              } else {
+                return <span>{row.name}</span>
+              }
+            }
+          },
+          asset: {
+            label: this.$t('assets.Asset'),
+            formatter: function(row) {
+              const to = {
+                name: 'AssetDetail',
+                params: { id: row.asset.id }
+              }
+              if (vm.$hasPerm('assets.view_asset')) {
+                return <router-link to={to}>{row.asset.name}</router-link>
+              } else {
+                return <span>{row.asset.name}</span>
+              }
+            }
+          },
+          secret_type: {
+            width: '100px',
+            formatter: function(row) {
+              return row.secret_type.label
+            }
+          },
+          source: {
+            formatter: function(row) {
+              return row.source.label
+            }
+          },
+          has_secret: {
+            width: '100px',
+            formatterArgs: {
+              showFalse: false
+            }
+          },
+          privileged: {
+            label: this.$t('assets.Privileged'),
+            width: '120px',
+            formatterArgs: {
+              showText: false,
+              showFalse: false
+            }
+          },
+          connectivity: connectivityMeta,
+          actions: {
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              hasUpdate: false, // can set function(row, value)
+              hasDelete: false, // can set function(row, value)
+              hasClone: this.hasClone,
+              moreActionsTitle: this.$t('common.More'),
+              extraActions: [
+                {
+                  name: 'View',
+                  title: this.$t('common.View'),
+                  can: this.$hasPerm('accounts.view_accountsecret'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    // debugger
+                    vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
+                    vm.account = row
+                    vm.showViewSecretDialog = false
+                    setTimeout(() => {
+                      vm.showViewSecretDialog = true
+                    })
+                  }
+                },
+                {
+                  name: 'ClearSecret',
+                  title: this.$t('common.ClearSecret'),
+                  can: this.$hasPerm('accounts.change_account'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    this.$axios.patch(
+                      `/api/v1/accounts/accounts/clear-secret/`,
+                      { account_ids: [row.id] }
+                    ).then(() => {
+                      this.$message.success(this.$tc('common.ClearSuccessMsg'))
+                    })
+                  }
+                },
+                {
+                  name: 'Test',
+                  title: this.$t('common.Test'),
+                  can: ({ row }) =>
+                    !this.$store.getters.currentOrgIsRoot &&
+                    this.$hasPerm('accounts.change_account') &&
+                    row.asset['auto_config'].ansible_enabled &&
+                    row.asset['auto_config'].ping_enabled,
+                  callback: ({ row }) => {
+                    this.$axios.post(
+                      `/api/v1/accounts/accounts/tasks/`,
+                      { action: 'verify', accounts: [row.id] }
+                    ).then(res => {
+                      openTaskPage(res['task'])
+                    })
+                  }
+                },
+                {
+                  name: 'Update',
+                  title: this.$t('common.Update'),
+                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
+                  callback: ({ row }) => {
+                    const data = {
+                      ...this.asset,
+                      ...row.asset
+                    }
+                    vm.account = row
+                    vm.iAsset = data
+                    vm.showAddDialog = false
+                    vm.accountCreateUpdateTitle = this.$t('assets.UpdateAccount')
+                    setTimeout(() => {
+                      vm.showAddDialog = true
+                    })
+                  }
+                }
+              ]
+            }
+          },
+          ...this.columnsMeta
+        }
+      },
+      headerActions: {
+        hasLeftActions: this.hasLeftActions,
+        hasMoreActions: true,
+        hasCreate: false,
+        hasImport: this.hasImport,
+        hasExport: this.hasExport && this.$hasPerm('accounts.view_accountsecret'),
+        handleImportClick: ({ selectedRows }) => {
+          this.$eventBus.$emit('showImportDialog', {
+            selectedRows,
+            url: '/api/v1/accounts/accounts/',
+            name: this?.name
+          })
+        },
+        exportOptions: {
+          url: this.exportUrl,
+          mfaVerifyRequired: true,
+          tips: this.$t('accounts.AccountExportTips')
+        },
+        importOptions: {
+          canImportCreate: this.$hasPerm('accounts.add_account'),
+          canImportUpdate: this.$hasPerm('accounts.change_account')
+        },
+        extraActions: [
+          {
+            name: 'add',
+            title: this.$t('common.Add'),
+            type: 'primary',
+            can: () => {
+              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
+            },
+            callback: async() => {
+              await this.getAssetDetail()
+              setTimeout(() => {
+                vm.iAsset = this.asset
+                vm.account = {}
+                vm.accountCreateUpdateTitle = this.$t('assets.AddAccount')
+                vm.showAddDialog = true
+              })
+            }
+          },
+          {
+            name: 'add-template',
+            title: this.$t('common.TemplateAdd'),
+            has: !(this.platform || this.asset),
+            can: () => {
+              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
+            },
+            callback: async() => {
+              await this.getAssetDetail()
+              setTimeout(() => {
+                vm.iAsset = this.asset
+                vm.account = {}
+                vm.accountCreateUpdateTitle = this.$t('assets.AddAccount')
+                vm.showAddTemplateDialog = true
+              })
+            }
+          },
+          ...this.headerExtraActions
+        ],
+        extraMoreActions: [
+          {
+            name: 'ClearSecrets',
+            title: this.$t('common.ClearSecret'),
+            type: 'primary',
+            fa: 'clean',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 && vm.$hasPerm('accounts.change_account')
+            },
+            callback: function({ selectedRows }) {
+              const ids = selectedRows.map(v => { return v.id })
+              this.$axios.patch(
+                '/api/v1/accounts/accounts/clear-secret/',
+                { account_ids: ids }).then(() => {
+                this.$message.success(this.$tc('common.ClearSuccessMsg'))
+              }).catch(err => {
+                this.$message.error(this.$tc('common.bulkClearErrorMsg' + ' ' + err))
+              })
+            }.bind(this)
+          }
+        ],
+        canBulkDelete: vm.$hasPerm('accounts.delete_account'),
+        searchConfig: {
+          getUrlQuery: false,
+          exclude: ['asset']
+        },
+        hasSearch: true
+      }
+    }
+  },
+  watch: {
+    url(iNew) {
+      this.$set(this.tableConfig, 'url', iNew)
+      this.$set(this.headerActions.exportOptions, 'url', iNew.replace(/(.*)accounts/, '$1account-secrets'))
+    }
+  },
+  mounted() {
+    if (this.columns.length > 0) {
+      this.tableConfig.columns = this.columns
+    }
+    if (this.otherActions) {
+      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
+      for (const item of this.otherActions) {
+        actionColumn.formatterArgs.extraActions.push(item)
+      }
+    }
+    if (this.hasDeleteAction) {
+      this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
+        {
+          name: 'Delete',
+          title: this.$t('common.Delete'),
+          can: this.$hasPerm('accounts.delete_account'),
+          type: 'primary',
+          callback: ({ row }) => {
+            this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
+              this.$message.success(this.$tc('common.deleteSuccessMsg'))
+              this.$refs.ListTable.reloadTable()
+            })
+          }
+        }
+      )
+    }
+  },
+  methods: {
+    onUpdateAuthDone(account) {
+      Object.assign(this.account, account)
+    },
+    addAccountSuccess() {
+      this.$refs.ListTable.reloadTable()
+    },
+    async getAssetDetail() {
+      const { query: { asset }} = this.$route
+      if (asset) {
+        this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
+      }
+    },
+    refresh() {
+      this.$refs.ListTable.reloadTable()
+    },
+    showBulkCreateResult(results) {
+      this.showResultDialog = false
+      this.createAccountResults = results
+      setTimeout(() => {
+        this.showResultDialog = true
+      }, 100)
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.cell a {
+  color: var(--color-info);
+}
+</style>

src/components/AccountListTable/BulkCreateResultDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :title="title"
+    v-bind="$attrs"
+    @confirm="closeDialog"
+    v-on="$listeners"
+  >
+    <el-alert style="margin-bottom: 10px" type="success">
+      <span v-for="item of summary" :key="item.key"><b>{{ item.label }}</b>: {{ item.value }} </span>
+    </el-alert>
+    <DataTable :config="config" />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import DataTable from '@/components/DataTable/index.vue'
+
+export default {
+  name: 'ResultDialog',
+  components: {
+    DataTable,
+    Dialog
+  },
+  props: {
+    result: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    const errorProp = this.$t('common.Error')
+    const stateMap = {
+      'created': this.$tc('common.Created'),
+      'updated': this.$tc('common.Updated'),
+      'skipped': this.$tc('common.Skipped')
+    }
+    const stateClsMap = {
+      'created': 'color-primary',
+      'updated': 'color-success',
+      'skipped': 'color-default'
+    }
+    return {
+      title: this.$t('accounts.AddAccountResult'),
+      config: {
+        columns: [
+          {
+            prop: 'asset',
+            label: this.$t('assets.Asset')
+          },
+          {
+            prop: 'state',
+            label: this.$t('common.Status'),
+            width: '200px',
+            formatter: (row) => {
+              if (row.error) {
+                return <span class='color-error'>{ errorProp }: { row.error }</span>
+              } else if (row.state) {
+                const colorCls = stateClsMap[row.state]
+                const state = stateMap[row.state]
+                return <span class={ colorCls }>{ state }</span>
+              }
+            }
+          }
+        ],
+        totalData: this.result
+      }
+    }
+  },
+  computed: {
+    summary() {
+      const labels = {
+        total: this.$tc('common.Total'),
+        created: this.$tc('common.Created'),
+        updated: this.$tc('common.Updated'),
+        skipped: this.$tc('common.Skipped'),
+        error: this.$tc('common.Error')
+      }
+      const grouped = _.groupBy(this.result, 'state')
+      const groupedLength = _.mapValues(grouped, 'length')
+      groupedLength['total'] = this.result.length
+      return _.map(groupedLength, (value, key) => {
+        return {
+          label: labels[key],
+          value: value,
+          key: key
+        }
+      })
+    }
+  },
+  methods: {
+    closeDialog() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.color-error {
+  color: var(--color-danger);
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-success {
+  color: var(--color-success);
+}
+
+.color-default {
+}
+
+::v-deep .el-data-table .el-table .el-table__row > td > div > span {
+  white-space: inherit;
+}
+
+</style>

src/components/AccountListTable/PasswordHistoryDialog.vue

@@ -0,0 +1,78 @@
+<template>
+  <GenericListTableDialog :visible.sync="iVisible" v-bind="config" />
+</template>
+
+<script>
+import { GenericListTableDialog } from '@/layout/components'
+import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+
+export default {
+  components: {
+    GenericListTableDialog
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      config: {
+        title: this.$t('accounts.HistoryPassword'),
+        visible: false,
+        width: '60%',
+        tableConfig: {
+          id: 'history_date',
+          url: `/api/v1/accounts/account-secrets/${this.account.id}/histories/`,
+          columns: ['secret', 'secret_type', 'version', 'history_date'],
+          columnsMeta: {
+            secret: {
+              label: this.$t('assets.Password'),
+              formatter: ShowKeyCopyFormatter,
+              formatterArgs: {
+                hasDownload: false,
+                name: this.account.name
+              }
+            },
+            history_date: {
+              label: this.$t('accounts.HistoryDate')
+            },
+            secret_type: {
+              width: '200px'
+            },
+            version: {
+              width: '100px'
+            },
+            actions: {
+              has: false
+            }
+          }
+        },
+        headerActions: {
+          hasLeftActions: false,
+          hasSearch: false
+        }
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/AccountListTable/ShowSecretInfo.vue

@@ -1,85 +0,0 @@
-<template>
-  <div>
-    <MFAVerifyDialog
-      @MFAVerifyDone="getAuthInfo"
-      @MFAVerifyCancel="exit"
-    />
-    <Dialog
-      :title="dialogTitle"
-      :show-confirm="false"
-      :show-cancel="false"
-      :destroy-on-close="true"
-      :width="'50'"
-      :visible.sync="showAuthInfo"
-      v-bind="$attrs"
-      v-on="$listeners"
-    >
-      <div>
-        <el-form label-position="right" label-width="80px" :model="authInfo">
-          <el-form-item :label="this.$t('assets.Hostname')">
-            <el-input v-model="account.hostname" readonly />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Username')">
-            <el-input v-model="account['username']" readonly />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Password')">
-            <el-input v-model="authInfo.password" type="password" show-password />
-          </el-form-item>
-          <el-form-item :label="this.$t('users.SSHKey')">
-            <el-input v-model="authInfo['private_key']" class="item-textarea" type="textarea" show-password />
-          </el-form-item>
-        </el-form>
-      </div>
-    </Dialog>
-  </div>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog'
-import MFAVerifyDialog from '@/components/MFAVerifyDialog'
-export default {
-  name: 'ShowSecretInfo',
-  components: {
-    Dialog,
-    MFAVerifyDialog
-  },
-  props: {
-    account: {
-      type: Object,
-      default: () => ({})
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      dialogTitle: this.$t('common.ViewSecret'),
-      authInfo: {},
-      showAuthInfo: false
-    }
-  },
-  mounted() {
-    this.getAuthInfo()
-  },
-  methods: {
-    getAuthInfo() {
-      const url = `/api/v1/assets/account-secrets/${this.account.id}/`
-      this.$axios.get(url, { disableFlashErrorMsg: true }).then(resp => {
-        this.authInfo = resp
-        this.showAuthInfo = true
-      })
-    },
-    exit() {
-      this.$emit('update:visible', false)
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .item-textarea >>> .el-textarea__inner {
-    height: 110px;
-  }
-</style>

src/components/AccountListTable/UpdateSecretInfo.vue

@@ -1,27 +1,27 @@
 <template>
   <Dialog
-    width="50"
-    :title="this.$t('assets.UpdateAssetUserToken')"
-    :visible.sync="visible"
     :destroy-on-close="true"
-    @confirm="handleConfirm()"
+    :title="$tc('assets.UpdateAssetUserToken')"
+    :visible.sync="visible"
+    width="50"
     @cancel="handleCancel()"
+    @confirm="handleConfirm()"
     v-on="$listeners"
   >
     <el-form label-position="right" label-width="90px">
-      <el-form-item :label="this.$t('assets.Hostname')">
-        <el-input v-model="account.hostname" readonly />
+      <el-form-item :label="$tc('assets.Name')">
+        <el-input v-model="account['asset_name']" readonly />
       </el-form-item>
-      <el-form-item :label="this.$t('assets.Username')">
+      <el-form-item :label="$tc('assets.Username')">
         <el-input v-model="account['username']" readonly />
       </el-form-item>
-      <el-form-item :label="this.$t('assets.Password')">
+      <el-form-item :label="$tc('assets.Password')">
         <UpdateToken v-model="authInfo.password" />
       </el-form-item>
-      <el-form-item :label="this.$t('assets.SSHSecretKey')">
+      <el-form-item :label="$tc('assets.SSHSecretKey')">
         <UploadKey @input="getFile" />
       </el-form-item>
-      <el-form-item :label="this.$t('assets.Passphrase')">
+      <el-form-item :label="$tc('assets.Passphrase')">
         <UpdateToken v-model="authInfo.passphrase" />
       </el-form-item>
     </el-form>
@@ -31,6 +31,8 @@
 <script>
 import Dialog from '@/components/Dialog'
 import { UpdateToken, UploadKey } from '@/components/FormFields'
+import { encryptPassword } from '@/utils/crypto'
+
 export default {
   name: 'UpdateSecretInfo',
   components: {
@@ -50,7 +52,7 @@ export default {
   },
   data() {
     return {
-      authInfo: {
+      secretInfo: {
         password: '',
         private_key: '',
         passphrase: ''
@@ -60,15 +62,15 @@ export default {
   methods: {
     handleConfirm() {
       const data = {}
-      if (this.authInfo.password !== '') {
-        data.password = this.authInfo.password
+      if (this.secretInfo.password !== '') {
+        data.password = encryptPassword(this.secretInfo.password)
       }
-      if (this.authInfo.private_key !== '') {
-        data.private_key = this.authInfo.private_key
-        if (this.authInfo.passphrase) data.passphrase = this.authInfo.passphrase
+      if (this.secretInfo.private_key !== '') {
+        data.private_key = encryptPassword(this.secretInfo.private_key)
+        if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
       }
       this.$axios.patch(
-        `/api/v1/assets/accounts/${this.account.id}/`,
+        `/api/v1/accounts/accounts/${this.account.id}/`,
         data,
         { disableFlashErrorMsg: true }
       ).then(res => {
@@ -86,7 +88,7 @@ export default {
       this.$emit('update:visible', false)
     },
     getFile(file) {
-      this.authInfo.private_key = file
+      this.secretInfo.private_key = file
     }
   }
 }

src/components/AccountListTable/ViewSecret.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <div v-if="mfaDialogVisible">
+      <UserConfirmDialog
+        :url="url"
+        @UserConfirmCancel="exit"
+        @UserConfirmDone="getAuthInfo"
+      />
+    </div>
+    <Dialog
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :title="title"
+      :visible.sync="showSecret"
+      :width="'50'"
+      v-bind="$attrs"
+      @confirm="accountConfirmHandle"
+      v-on="$listeners"
+    >
+      <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
+        <el-form-item :label="$tc('assets.Name')">
+          <span>{{ account['name'] }}</span>
+        </el-form-item>
+        <el-form-item :label="$tc('assets.Username')">
+          <span>{{ account['username'] }}</span>
+        </el-form-item>
+        <el-form-item :label="secretTypeLabel">
+          <ShowKeyCopyFormatter
+            :cell-value="secretInfo.secret"
+            :col="{ formatterArgs: {
+              name: account['name'],
+              secretType: secretType || ''
+            }}"
+            @input="onShowKeyCopyFormatterChange"
+          />
+        </el-form-item>
+        <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('assets.sshKeyFingerprint')">
+          <span>{{ sshKeyFingerprint }}</span>
+        </el-form-item>
+        <el-form-item :label="$tc('common.DateCreated')">
+          <span>{{ account['date_created'] | date }}</span>
+        </el-form-item>
+        <el-form-item :label="$tc('common.DateUpdated')">
+          <span>{{ account['date_updated'] | date }}</span>
+        </el-form-item>
+        <el-form-item v-if="showPasswordRecord" v-perms="'accounts.view_accountsecret'" :label="$tc('accounts.PasswordRecord')">
+          <el-link
+            :underline="false"
+            type="success"
+            @click="showHistoryDialog"
+          >
+            <span style="padding-right: 30px">
+              {{ versions }}
+            </span>
+          </el-link>
+        </el-form-item>
+      </el-form>
+    </Dialog>
+    <PasswordHistoryDialog
+      v-if="showPasswordHistoryDialog"
+      :account="account"
+      :visible.sync="showPasswordHistoryDialog"
+    />
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import PasswordHistoryDialog from './PasswordHistoryDialog'
+import UserConfirmDialog from '@/components/UserConfirmDialog'
+import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import { encryptPassword } from '@/utils/crypto'
+
+export default {
+  name: 'ShowSecretInfo',
+  components: {
+    Dialog,
+    PasswordHistoryDialog,
+    UserConfirmDialog,
+    ShowKeyCopyFormatter
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: function() {
+        return this.$tc('assets.AccountDetail')
+      }
+    },
+    showPasswordRecord: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      modifiedSecret: '',
+      secretInfo: {},
+      versions: '-',
+      showSecret: false,
+      mfaDialogVisible: true,
+      sshKeyFingerprint: '-',
+      historyCount: 0,
+      showPasswordHistoryDialog: false
+    }
+  },
+  computed: {
+    secretTypeLabel() {
+      return this.account['secret_type'].label || 'Password'
+    },
+    secretType() {
+      return this.account['secret_type'].value
+    }
+  },
+  mounted() {
+    if (this.showPasswordRecord) {
+      const url = `/api/v1/accounts/account-secrets/${this.account.id}/histories/?limit=1`
+      this.$axios.get(url, { disableFlashErrorMsg: true }).then(resp => {
+        this.versions = resp.count
+      })
+    }
+  },
+  methods: {
+    accountConfirmHandle() {
+      this.modifiedSecret && this.onChangeSecretSubmit()
+      this.showSecret = false
+      this.mfaDialogVisible = false
+    },
+    onChangeSecretSubmit() {
+      const params = {
+        name: this.secretInfo.name,
+        secret: encryptPassword(this.modifiedSecret)
+      }
+      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, params).then(() => {
+        this.$message.success(this.$tc('common.updateSuccessMsg'))
+      })
+    },
+    getAuthInfo() {
+      this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(resp => {
+        this.secretInfo = resp
+        this.sshKeyFingerprint = resp?.spec_info?.ssh_key_fingerprint || '-'
+        this.showSecret = true
+      })
+    },
+    exit() {
+      this.$emit('update:visible', false)
+    },
+    showHistoryDialog() {
+      this.showPasswordHistoryDialog = true
+    },
+    onShowKeyCopyFormatterChange(value) {
+      if (value === this.secretInfo.secret) return
+      this.modifiedSecret = value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .item-textarea >>> .el-textarea__inner {
+    height: 110px;
+  }
+
+  .el-form-item {
+    border-bottom: 1px solid #EBEEF5;
+    padding: 5px 0;
+    margin-bottom: 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    >>> .el-form-item__label {
+      padding-right: 20px;
+      line-height: 30px;
+    }
+
+    >>> .el-form-item__content {
+      line-height: 30px;
+
+      pre {
+        margin: 0;
+      }
+    }
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    display: block;
+    font-size: 13px;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .title {
+      color: #303133;
+      font-weight: 500;
+    }
+  }
+</style>

src/components/AccountListTable/const.js

@@ -1,36 +1,26 @@
-import { toSafeLocalDateStr } from '@/utils/common'
-import ChoicesFormatter from '@/components/TableFormatters/ChoicesFormatter'
 import i18n from '@/i18n/i18n'
+import { ChoicesFormatter } from '@/components/TableFormatters'
 
 export const connectivityMeta = {
-  label: i18n.t('assets.Reachable'),
+  label: i18n.t('assets.Connectivity'),
   formatter: ChoicesFormatter,
   formatterArgs: {
-    iconChoices: {
-      ok: 'fa-check',
-      failed: 'fa-times',
-      unknown: 'fa-circle-o'
+    faChoices: {
+      '-': '',
+      ok: 'fa-check-circle',
+      err: 'fa-times-circle'
     },
     classChoices: {
       ok: 'text-primary',
-      failed: 'text-danger',
-      unknown: 'text-warning'
+      err: 'text-danger'
     },
-    hasTips: true,
-    getTips: ({ row, cellValue }) => {
-      const mapper = {
-        'ok': i18n.t('assets.Reachable'),
-        'failed': i18n.t('assets.Unreachable'),
-        'unknown': i18n.t('assets.Unknown')
+    getText({ cellValue }) {
+      if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
+        return '-'
+      } else {
+        return cellValue?.label
       }
-      let tips = mapper[cellValue]
-      if (row['date_verified']) {
-        const datetime = toSafeLocalDateStr(row['date_verified'])
-        tips += '<br> ' + datetime
-      }
-      return tips
     }
   },
-  width: '90px',
-  align: 'center'
+  width: '100px'
 }

src/components/AccountListTable/index.vue

@@ -1,199 +0,0 @@
-<template>
-  <div>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    <ShowSecretInfo v-if="showViewSecretDialog" :visible.sync="showViewSecretDialog" :account="account" />
-    <UpdateSecretInfo v-if="showUpdateSecretDialog" :visible.sync="showUpdateSecretDialog" :account="account" @updateAuthDone="onUpdateAuthDone" />
-  </div>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable/index'
-import { ActionsFormatter, DetailFormatter, DisplayFormatter } from '@/components/TableFormatters'
-import ShowSecretInfo from './ShowSecretInfo'
-import UpdateSecretInfo from './UpdateSecretInfo'
-import { connectivityMeta } from './const'
-import { openTaskPage } from '@/utils/jms'
-
-export default {
-  name: 'AccountListTable',
-  components: {
-    ListTable,
-    UpdateSecretInfo,
-    ShowSecretInfo
-  },
-  props: {
-    url: {
-      type: String,
-      required: true
-    },
-    exportUrl: {
-      type: String,
-      default() {
-        return this.url.replace('/assets/accounts/', '/assets/account-secrets/')
-      }
-    },
-    hasLeftActions: {
-      type: Boolean,
-      default: false
-    },
-    otherActions: {
-      type: Array,
-      default: null
-    },
-    hasClone: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    const vm = this
-    return {
-      showViewSecretDialog: false,
-      showUpdateSecretDialog: false,
-      account: {},
-      tableConfig: {
-        url: this.url,
-        permissions: {
-          app: 'assets',
-          resource: 'authbook'
-        },
-        columns: [
-          'hostname', 'ip', 'username', 'version', 'connectivity',
-          'systemuser', 'date_created', 'date_updated', 'actions'
-        ],
-        columnsShow: {
-          min: ['username', 'actions'],
-          default: ['hostname', 'ip', 'username', 'version', 'actions']
-        },
-        columnsMeta: {
-          hostname: {
-            prop: 'hostname',
-            label: this.$t('assets.Hostname'),
-            showOverflowTooltip: true,
-            formatter: DetailFormatter,
-            formatterArgs: {
-              can: this.$hasPerm('assets.view_asset'),
-              getRoute({ row }) {
-                return {
-                  name: 'AssetDetail',
-                  params: { id: row.asset }
-                }
-              }
-            }
-          },
-          ip: {
-            width: '120px'
-          },
-          username: {
-            showOverflowTooltip: true
-          },
-          systemuser: {
-            formatter: DisplayFormatter
-          },
-          version: {
-            width: '70px'
-          },
-          connectivity: connectivityMeta,
-          actions: {
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
-              hasClone: this.hasClone,
-              moreActionsTitle: this.$t('common.More'),
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t('common.View'),
-                  can: this.$hasPerm('assets.view_assetaccountsecret'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    vm.account = row
-                    vm.showViewSecretDialog = true
-                  }
-                },
-                {
-                  name: 'Delete',
-                  title: this.$t('common.Delete'),
-                  can: this.$hasPerm('assets.delete_authbook'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    this.$axios.delete(`/api/v1/assets/accounts/${row.id}/`).then(() => {
-                      this.$message.success(this.$tc('common.deleteSuccessMsg'))
-                      this.$refs.ListTable.reloadTable()
-                    })
-                  }
-                },
-                {
-                  name: 'Test',
-                  title: this.$t('common.Test'),
-                  can: this.$hasPerm('assets.test_authbook'),
-                  callback: ({ row }) => {
-                    this.$axios.post(
-                      `/api/v1/assets/accounts/${row.id}/verify/`,
-                      { action: 'test' }
-                    ).then(res => {
-                      openTaskPage(res['task'])
-                    })
-                  }
-                },
-                {
-                  name: 'Update',
-                  title: this.$t('common.Update'),
-                  can: this.$hasPerm('assets.change_assetaccountsecret') && !this.$store.getters.currentOrgIsRoot,
-                  callback: ({ row }) => {
-                    vm.account = row
-                    vm.showUpdateSecretDialog = false
-                    setTimeout(() => {
-                      vm.showUpdateSecretDialog = true
-                      console.log('Show update1: ', vm.showUpdateSecretDialog)
-                    })
-                    console.log('Show update2: ', vm.showUpdateSecretDialog)
-                  }
-                }
-              ]
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasLeftActions: this.hasLeftActions,
-        hasMoreActions: false,
-        hasImport: false,
-        hasExport: this.$hasPerm('assets.view_assetaccountsecret'),
-        exportOptions: {
-          url: this.exportUrl,
-          mfaVerifyRequired: true
-        },
-        searchConfig: {
-          exclude: ['systemuser', 'asset']
-        },
-        hasSearch: true
-      }
-    }
-  },
-  watch: {
-    url(iNew) {
-      this.$set(this.tableConfig, 'url', iNew)
-      this.$set(this.headerActions.exportOptions, 'url', iNew.replace('/accounts/', '/account-secrets/'))
-    }
-  },
-  mounted() {
-    if (this.otherActions) {
-      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
-      for (const item of this.otherActions) {
-        actionColumn.formatterArgs.extraActions.push(item)
-      }
-    }
-  },
-  methods: {
-    onUpdateAuthDone(account) {
-      Object.assign(this.account, account)
-    }
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>

src/components/ActionsGroup/index.vue

@@ -18,16 +18,16 @@ export default {
       type: Array,
       default: () => []
     },
+    moreActionBtn: {
+      type: Object,
+      default: () => ({})
+    },
     moreActionsTitle: {
       type: String,
       default() {
         return this.$t('common.MoreActions')
       }
     },
-    moreActionsType: {
-      type: String,
-      default: 'default'
-    },
     moreActionsPlacement: {
       type: String,
       default: 'bottom'
@@ -43,14 +43,21 @@ export default {
       return actions
     },
     iMoreAction() {
-      return {
+      const defaultBtn = {
         name: 'moreActions',
-        title: this.iMoreActionsTitle,
+        title: this.$t('common.MoreActions'),
+        type: 'primary',
+        plain: true
+      }
+      const btn = {
+        ...defaultBtn,
+        ...this.moreActionBtn,
         dropdown: this.moreActions || []
       }
-    },
-    iMoreActionsTitle() {
-      return this.moreActionsTitle || this.$t('common.MoreActions')
+      if (this.moreActionsTitle) {
+        btn.title = this.moreActionsTitle
+      }
+      return btn
     }
   }
 }

src/components/Announcement/index.vue

@@ -7,12 +7,12 @@
     :title="title"
     @close="onClose"
   >
-    <span class="announcement-main"> {{ announcement.content }}</span>
+    <span class="announcement-main">{{ announcement.content }}</span>
     <span v-if="announcement.link">
-      <el-link :href="announcement.link" target="_blank" class="link-more">
+      <el-link :href="announcement.link" target="_blank" type="info" class="link-more">
         {{ $t('common.ViewMore') }}
       </el-link>
-      <i class="fa fa-share-square-o" />
+      <i class="fa fa-external-link icon" />
     </span>
   </el-alert>
 </template>
@@ -60,11 +60,14 @@ export default {
 }
 .announcement-main {
   word-wrap:break-word;
+  white-space: pre-wrap;
 }
 .link-more {
   font-size: 10px;
   margin-left: 10px;
   border-bottom: solid 1px;
 }
-
+.icon {
+  vertical-align: text-bottom;
+}
 </style>

src/components/AppAccountListTable/ShowSecretInfo.vue

@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <MFAVerifyDialog
-      @MFAVerifyDone="getAuthInfo"
-      @MFAVerifyCancel="exit"
-    />
-    <Dialog
-      :title="dialogTitle"
-      :show-confirm="false"
-      :show-cancel="false"
-      :destroy-on-close="true"
-      :width="'50'"
-      :visible.sync="showAuthInfo"
-      v-bind="$attrs"
-      v-on="$listeners"
-    >
-      <div>
-        <el-form label-position="right" label-width="80px" :model="authInfo">
-          <el-form-item :label="this.$t('applications.appName')">
-            <el-input v-model="account['app_display']" readonly />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Username')">
-            <el-input v-model="account['username']" readonly />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Password')">
-            <el-input v-model="authInfo.password" type="password" show-password />
-          </el-form-item>
-        </el-form>
-      </div>
-    </Dialog>
-  </div>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog'
-import MFAVerifyDialog from '@/components/MFAVerifyDialog'
-export default {
-  name: 'ShowSecretInfo',
-  components: {
-    Dialog,
-    MFAVerifyDialog
-  },
-  props: {
-    account: {
-      type: Object,
-      default: () => ({})
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      dialogTitle: this.$t('common.ViewSecret'),
-      authInfo: {},
-      showAuthInfo: false
-    }
-  },
-  mounted() {
-    this.getAuthInfo()
-  },
-  methods: {
-    getAuthInfo() {
-      const url = `/api/v1/applications/account-secrets/${this.account.id}/`
-      this.$axios.get(url, { disableFlashErrorMsg: true }).then(resp => {
-        this.authInfo = resp
-        this.showAuthInfo = true
-      })
-    },
-    exit() {
-      this.$emit('update:visible', false)
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/AppAccountListTable/const.js

@@ -1,31 +0,0 @@
-import { ChoicesFormatter } from '@/components/TableFormatters'
-import { toSafeLocalDateStr } from '@/utils/common'
-import i18n from '@/i18n/i18n'
-
-export const connectivityMeta = {
-  label: i18n.t('assets.Reachable'),
-  formatter: ChoicesFormatter,
-  formatterArgs: {
-    iconChoices: {
-      ok: 'fa-check text-primary',
-      failed: 'fa-times text-danger',
-      unknown: 'fa-circle text-warning'
-    },
-    hasTips: true,
-    getTips: ({ row, cellValue }) => {
-      const mapper = {
-        'ok': i18n.t('assets.Reachable'),
-        'failed': i18n.t('assets.Unreachable'),
-        'unknown': i18n.t('assets.Unknown')
-      }
-      let tips = mapper[cellValue]
-      if (row['date_verified']) {
-        const datetime = toSafeLocalDateStr(row['date_verified'])
-        tips += '<br> ' + datetime
-      }
-      return tips
-    }
-  },
-  width: '90px',
-  align: 'center'
-}

src/components/AppAccountListTable/index.vue

@@ -1,169 +0,0 @@
-<template>
-  <div>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    <ShowSecretInfo v-if="showViewSecretDialog" :visible.sync="showViewSecretDialog" :account="account" />
-  </div>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable/index'
-import { ActionsFormatter, DetailFormatter } from '@/components/TableFormatters'
-import ShowSecretInfo from './ShowSecretInfo'
-
-export default {
-  name: 'Detail',
-  components: {
-    ListTable,
-    ShowSecretInfo
-  },
-  props: {
-    url: {
-      type: String,
-      required: true
-    },
-    exportUrl: {
-      type: String,
-      default() {
-        return this.url.replace('/applications/accounts/', '/applications/account-secrets/')
-      }
-    },
-    hasLeftActions: {
-      type: Boolean,
-      default: false
-    },
-    otherActions: {
-      type: Array,
-      default: null
-    },
-    hasClone: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      showViewSecretDialog: false,
-      showUpdateSecretDialog: false,
-      account: {},
-      tableConfig: {
-        url: this.url,
-        columns: [
-          'app_display', 'username', 'category_display',
-          'type_display', 'systemuser', 'actions'
-        ],
-        columnsMeta: {
-          app_display: {
-            showOverflowTooltip: true,
-            formatter: DetailFormatter,
-            formatterArgs: {
-              getRoute({ row }) {
-                switch (row['category']) {
-                  case 'remote_app':
-                    return {
-                      name: 'RemoteAppDetail',
-                      params: { id: row.app }
-                    }
-                  case 'db':
-                    return {
-                      name: 'DatabaseAppDetail',
-                      params: { id: row.app }
-                    }
-                  default:
-                    return {
-                      name: 'KubernetesAppDetail',
-                      params: { id: row.app }
-                    }
-                }
-              }
-            }
-          },
-          username: {
-            showOverflowTooltip: true
-          },
-          systemuser: {
-            showOverflowTooltip: true,
-            formatter: DetailFormatter,
-            formatterArgs: {
-              can: this.$hasPerm('assets.view_systemuser'),
-              getTitle({ row }) {
-                return row.systemuser_display
-              },
-              getRoute({ row }) {
-                return {
-                  name: 'SystemUserDetail',
-                  params: { id: row.systemuser }
-                }
-              }
-            }
-          },
-          actions: {
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
-              hasClone: this.hasClone,
-              moreActionsTitle: this.$t('common.More'),
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t('common.View'),
-                  type: 'primary',
-                  can: this.$hasPerm('applications.view_applicationaccountsecret'),
-                  callback: function({ row }) {
-                    this.account = row
-                    this.showViewSecretDialog = true
-                  }.bind(this)
-                },
-                {
-                  name: 'Update',
-                  title: this.$t('common.Update'),
-                  can: !this.$store.getters.currentOrgIsRoot,
-                  callback: function({ row }) {
-                    this.$message.success(this.$tc('applications.updateAccountMsg'))
-                  }.bind(this)
-                }
-              ]
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasLeftActions: this.hasLeftActions,
-        hasMoreActions: false,
-        hasImport: false,
-        hasExport: this.$hasPerm('applications.view_applicationaccountsecret'),
-        exportOptions: {
-          url: this.exportUrl,
-          mfaVerifyRequired: true
-        },
-        searchConfig: {
-          exclude: ['systemuser', 'app']
-        },
-        hasSearch: true
-      }
-    }
-  },
-  watch: {
-    url(iNew) {
-      this.$set(this.tableConfig, 'url', iNew)
-    }
-  },
-  mounted() {
-    if (this.otherActions) {
-      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
-      for (const item of this.otherActions) {
-        actionColumn.formatterArgs.extraActions.push(item)
-      }
-    }
-  },
-  methods: {
-    onUpdateAuthDone(account) {
-      Object.assign(this.account, account)
-    }
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>

src/components/AssetSelect/dialog.vue

@@ -0,0 +1,192 @@
+<template>
+  <Dialog
+    :title="$tc('assets.Assets')"
+    custom-class="asset-select-dialog"
+    top="1vh"
+    v-bind="$attrs"
+    width="80vw"
+    @cancel="handleCancel"
+    @close="handleClose"
+    @confirm="handleConfirm"
+    v-on="$listeners"
+  >
+    <AssetTreeTable
+      ref="ListPage"
+      :header-actions="headerActions"
+      :node-url="baseNodeUrl"
+      :table-config="tableConfig"
+      :tree-url="`${baseNodeUrl}children/tree/`"
+      :url="baseUrl"
+      class="tree-table"
+      v-bind="$attrs"
+    />
+  </Dialog>
+</template>
+
+<script>
+import AssetTreeTable from '@/components/AssetTreeTable'
+import Dialog from '@/components/Dialog'
+
+export default {
+  componentName: 'AssetSelectDialog',
+  components: { AssetTreeTable, Dialog },
+  props: {
+    baseUrl: {
+      type: String,
+      default: '/api/v1/assets/assets/'
+    },
+    baseNodeUrl: {
+      type: String,
+      default: '/api/v1/assets/nodes/'
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    canSelect: {
+      type: Function,
+      default(row, index) {
+        return true
+      }
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      dialogVisible: false,
+      rowSelected: _.cloneDeep(this.value) || [],
+      rowsAdd: [],
+      tableConfig: {
+        url: this.baseUrl,
+        hasTree: true,
+        canSelect: this.canSelect,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('assets.Name'),
+            sortable: true
+          },
+          {
+            prop: 'address',
+            label: this.$t('assets.ipDomain'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'platform',
+            label: this.$t('assets.Platform'),
+            sortable: true,
+            formatter: function(row) {
+              return row.platform.name
+            }
+          },
+          {
+            prop: 'protocols',
+            formatter: function(row) {
+              const data = row.protocols.map(p => {
+                return <el-tag size='mini'>{p.name}/{p.port} </el-tag>
+              })
+              return <span> {data} </span>
+            },
+            label: this.$t('assets.Protocols')
+          },
+          {
+            prop: 'actions',
+            has: false
+          }
+        ],
+        listeners: {
+          'toggle-row-selection': (isSelected, row) => {
+            if (isSelected) {
+              vm.addRowToSelect(row)
+            } else {
+              vm.removeRowFromSelect(row)
+            }
+          }
+        },
+        theRowDefaultIsSelected: (row) => {
+          return this.value.indexOf(row.id) > -1
+        }
+      },
+      headerActions: {
+        hasLeftActions: false,
+        hasRightActions: false,
+        searchConfig: {
+          getUrlQuery: false
+        }
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$eventBus.$emit('treeComponentKey')
+    },
+    handleConfirm() {
+      this.$emit('confirm', this.rowSelected, this.rowsAdd)
+      if (this.rowSelected.length > 0) {
+        this.handleClose()
+      }
+    },
+    handleCancel() {
+      this.$emit('cancel')
+      this.handleClose()
+    },
+    addRowToSelect(row) {
+      const selectValueIndex = this.rowSelected.indexOf(row.id)
+      if (selectValueIndex === -1) {
+        this.rowSelected.push(row.id)
+        this.rowsAdd.push(row)
+      }
+    },
+    removeRowFromSelect(row) {
+      const selectValueIndex = this.rowSelected.indexOf(row.id)
+      if (selectValueIndex > -1) {
+        this.rowSelected.splice(selectValueIndex, 1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page ::v-deep .page-heading {
+  display: none;
+}
+
+.el-dialog__wrapper ::v-deep .el-dialog__body {
+  padding: 0 0 0 3px;
+
+  .tree-table {
+    .search {
+    }
+
+    .left {
+      padding: 5px;
+    }
+
+    .right {
+      height: calc(100vh - 200px);
+      overflow: auto;
+    }
+
+    .mini {
+      padding-top: 8px;
+    }
+
+    .transition-box {
+      padding: 10px 5px;
+    }
+  }
+}
+
+.page ::v-deep .treebox .ztree {
+
+}
+
+.asset-select-dialog ::v-deep .el-icon-circle-check {
+  display: none;
+}
+</style>

src/components/AssetSelect/index.vue

@@ -1,149 +1,96 @@
 <template>
-  <div class="asset-select-dialog">
+  <div class="asset-select-formatter">
     <Select2
       ref="select2"
       v-model="select2Config.value"
       v-bind="select2Config"
       @input="onInputChange"
+      v-on="$listeners"
       @focus.stop="handleFocus"
+    />
+    <AssetSelectDialog
+      v-if="dialogVisible"
+      ref="dialog"
+      :base-node-url="baseNodeUrl"
+      :base-url="baseUrl"
+      :tree-url-query="treeUrlQuery"
+      :value="value"
+      :visible.sync="dialogVisible"
+      v-bind="$attrs"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
       v-on="$listeners"
     />
-    <Dialog
-      v-if="dialogVisible"
-      :title="this.$t('assets.Assets')"
-      :visible.sync="dialogVisible"
-      custom-class="asset-select-dialog"
-      width="80vw"
-      top="1vh"
-      @confirm="handleConfirm"
-      @cancel="handleCancel"
-    >
-      <TreeTable
-        ref="ListPage"
-        :tree-setting="treeSetting"
-        :table-config="tableConfig"
-        :header-actions="headerActions"
-      />
-    </Dialog>
   </div>
 </template>
 
 <script>
-import TreeTable from '@/components/TreeTable'
-import { DetailFormatter } from '@/components/TableFormatters'
 import Select2 from '@/components/FormFields/Select2'
-import Dialog from '@/components/Dialog'
+import AssetSelectDialog from './dialog.vue'
+import { b } from 'css-color-function/lib/adjusters'
 
 export default {
   componentName: 'AssetSelect',
-  components: { TreeTable, Select2, Dialog },
+  components: { AssetSelectDialog, Select2 },
   props: {
+    baseUrl: {
+      type: String,
+      default: '/api/v1/assets/assets/'
+    },
+    baseNodeUrl: {
+      type: String,
+      default: '/api/v1/assets/nodes/'
+    },
+    treeUrlQuery: {
+      type: Object,
+      default: () => {}
+    },
     value: {
       type: Array,
       default: () => []
-    },
-    canSelect: {
-      type: Function,
-      default(row, index) {
-        return true
-      }
-    },
-    disabled: {
-      type: [Boolean, Function],
-      default: false
     }
   },
   data() {
-    const select2Config = {
-      value: this.value,
-      multiple: true,
-      clearable: true,
-      ajax: {
-        url: '/api/v1/assets/assets/?fields_size=mini',
-        transformOption: (item) => {
-          return { label: item.hostname + '(' + item.ip + ')', value: item.id }
-        }
+    const iValue = []
+    for (const item of this.value) {
+      if (typeof item === 'object') {
+        iValue.push(item.id)
+      } else {
+        iValue.push(item)
       }
     }
-    const vm = this
     return {
       dialogVisible: false,
-      initialValue: _.cloneDeep(this.value),
-      rowSelected: [],
-      initSelection: null,
-      treeSetting: {
-        showMenu: false,
-        showRefresh: true,
-        showAssets: false,
-        url: '/api/v1/assets/assets/?fields_size=mini',
-        nodeUrl: '/api/v1/assets/nodes/',
-        // ?assets=0不显示资产. =1显示资产
-        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
-      },
-      select2Config: select2Config,
-      dialogSelect2Config: select2Config,
-      tableConfig: {
-        url: '/api/v1/assets/assets/?fields_size=mini',
-        hasTree: true,
-        canSelect: this.canSelect,
-        columns: [
-          {
-            prop: 'hostname',
-            label: this.$t('assets.Hostname'),
-            sortable: true,
-            showOverflowTooltip: true,
-            formatter: DetailFormatter,
-            formatterArgs: {
-              route: 'AssetDetail'
-            }
-          },
-          {
-            prop: 'ip',
-            label: this.$t('assets.ipDomain'),
-            sortable: 'custom'
-          },
-          {
-            prop: 'platform',
-            label: this.$t('assets.Platform'),
-            sortable: true
-          },
-          {
-            prop: 'protocols',
-            formatter: function(row) {
-              return <span> {row.protocols.toString()} </span>
-            },
-            label: this.$t('assets.Protocols')
+      initialValue: _.cloneDeep(iValue),
+      select2Config: {
+        value: iValue,
+        multiple: true,
+        clearable: true,
+        ajax: {
+          url: this.baseUrl,
+          transformOption: (item) => {
+            return { label: item.name + '(' + item.address + ')', value: item.id }
           }
-        ],
-        listeners: {
-          'toggle-row-selection': (isSelected, row) => {
-            if (isSelected) {
-              vm.addRowToSelect(row)
-            } else {
-              vm.removeRowFromSelect(row)
-            }
-          }
-        },
-        theRowDefaultIsSelected: (row) => {
-          return this.value.indexOf(row.id) > -1
         }
-      },
-      headerActions: {
-        hasLeftActions: false,
-        hasRightActions: false
       }
     }
   },
   methods: {
+    b,
     handleFocus() {
       this.$refs.select2.selectRef.blur()
       this.dialogVisible = true
     },
-    handleConfirm() {
+    handleConfirm(valueSelected, rowsAdd) {
+      if (valueSelected === undefined) {
+        return
+      }
+      this.$refs.select2.iValue = valueSelected
+      this.addRowsToSelect(rowsAdd)
+      this.onInputChange(valueSelected)
       this.dialogVisible = false
     },
     handleCancel() {
-      this.$refs.select2.iValue = this.initialValue
       this.dialogVisible = false
     },
     onInputChange(val) {
@@ -154,53 +101,54 @@ export default {
       // 如果select2的options中没有，那么可能无法显示正常的值
       if (selectOptionsHas === undefined) {
         const option = {
-          label: `${row.hostname}(${row.ip})`,
+          label: `${row.name}(${row.address})`,
           value: row.id
         }
         options.push(option)
       }
     },
-    addRowToSelect(row) {
+    addRowsToSelect(rows) {
       const outSelectOptions = this.$refs.select2.options
-      this.addToSelect(outSelectOptions, row)
-
-      const selectValue = this.$refs.select2.iValue
-      const selectValueIndex = selectValue.indexOf(row.id)
-      if (selectValueIndex === -1) {
-        selectValue.push(row.id)
-      }
-      this.onInputChange(selectValue)
-    },
-    removeRowFromSelect(row) {
-      const selectValue = this.$refs.select2.iValue
-      const selectValueIndex = selectValue.indexOf(row.id)
-      if (selectValueIndex > -1) {
-        selectValue.splice(selectValueIndex, 1)
+      for (const row of rows) {
+        this.addToSelect(outSelectOptions, row)
       }
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-  .el-select{
-    width: 100%;
-  }
-  .page  ::v-deep  .page-heading{
-    display: none;
-  }
-  .el-dialog__wrapper  ::v-deep .el-dialog__body{
-    padding: 5px 10px;
-  }
-  .page  ::v-deep  .treebox {
-    height: inherit !important;
-  }
-  .asset-select-dialog >>> .transition-box:first-child {
-    background-color: #f3f3f3 ;
-  }
+<style lang="scss" scoped>
+.el-select {
+  width: 100%;
+}
 
-  .el-dialog__wrapper  ::v-deep .el-dialog__body .wrapper-content {
-    padding: 10px;
-  }
+.page ::v-deep .page-heading {
+  display: none;
+}
 
+.el-dialog__wrapper ::v-deep .el-dialog__body {
+  padding: 0 0 0 3px;
+
+  .tree-table {
+    .left {
+      padding: 5px;
+
+      .ztree {
+        height: calc(100vh - 250px) !important;
+      }
+    }
+
+    .mini {
+      padding-top: 8px;
+    }
+
+    .transition-box {
+      padding: 10px 5px;
+    }
+  }
+}
+
+.page ::v-deep .treebox {
+  height: inherit !important;
+}
 </style>

src/components/AssetTreeTable/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <TreeTable
+    ref="TreeList"
+    component="TabTree"
+    :table-config="tableConfig"
+    :active-menu.sync="treeTableConfig.activeMenu"
+    :tree-tab-config="treeTableConfig"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template #table>
+      <slot name="table" />
+    </template>
+    <div slot="rMenu" slot-scope="{data}">
+      <slot name="rMenu" :data="data" />
+    </div>
+  </TreeTable>
+</template>
+
+<script>
+import TreeTable from '../TreeTable'
+import { setRouterQuery, setUrlParam } from '@/utils/common'
+import $ from '@/utils/jquery-vendor'
+
+export default {
+  components: {
+    TreeTable
+  },
+  props: {
+    url: {
+      type: String,
+      default: '/api/v1/assets/assets/'
+    },
+    nodeUrl: {
+      type: String,
+      default: '/api/v1/assets/nodes/'
+    },
+    treeUrl: {
+      type: String,
+      default: '/api/v1/assets/nodes/children/tree/'
+    },
+    treeUrlQuery: {
+      type: Object,
+      default: () => ({})
+    },
+    treeSetting: {
+      type: Object,
+      default: () => ({})
+    },
+    tableConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    showAssets: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const showAssets = this.treeSetting?.showAssets || this.showAssets
+    const treeUrlQuery = this.setTreeUrlQuery()
+    const assetTreeUrl = `${this.treeUrl}?assets=${showAssets ? '1' : '0'}&${treeUrlQuery}`
+
+    return {
+      treeTabConfig: {
+        activeMenu: 'CustomTree',
+        submenu: [
+          {
+            title: this.$t('assets.AssetTree'),
+            name: 'CustomTree',
+            treeSetting: {
+              showAssets,
+              showMenu: false,
+              showRefresh: true,
+              showCreate: true,
+              showUpdate: true,
+              showDelete: true,
+              hasRightMenu: true,
+              showSearch: true,
+              url: this.url,
+              nodeUrl: this.nodeUrl,
+              treeUrl: assetTreeUrl,
+              callback: {
+                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
+              },
+              ...this.treeSetting
+            }
+          },
+          {
+            title: this.$t('assets.BuiltinTree'),
+            name: 'BuiltinTree',
+            treeSetting: {
+              showRefresh: true,
+              showAssets: false,
+              showSearch: false,
+              customTreeHeaderName: this.$t('assets.BuiltinTree'),
+              url: '/api/v1/assets/nodes/category/tree/',
+              nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
+              treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
+              callback: {
+                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    treeTableConfig() {
+      if (this.treeSetting.notShowBuiltinTree) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.treeTabConfig.submenu.splice(1, 1)
+      }
+      return this.treeTabConfig
+    }
+  },
+  mounted() {
+    this.decorateRMenu()
+    const treeSetting = this.treeTabConfig.submenu[0].treeSetting
+    treeSetting.hasRightMenu = !this.currentOrgIsRoot
+    treeSetting.showCreate = this.$hasPerm('assets.add_node')
+    treeSetting.showUpdate = this.$hasPerm('assets.change_node')
+    treeSetting.showDelete = this.$hasPerm('assets.delete_node')
+  },
+  methods: {
+    setTreeUrlQuery() {
+      let str = ''
+      for (const key in this.treeUrlQuery) {
+        str += `${key}=${this.treeUrlQuery[key]}&`
+      }
+      str = str.substr(0, str.length - 1)
+
+      return str
+    },
+    decorateRMenu() {
+      const show_current_asset = this.$cookie.get('show_current_asset') || '0'
+      if (show_current_asset === '1') {
+        $('#m_show_asset_all_children_node').css('color', '#606266')
+        $('#m_show_asset_only_current_node').css('color', 'green')
+      } else {
+        $('#m_show_asset_all_children_node').css('color', 'green')
+        $('#m_show_asset_only_current_node').css('color', '#606266')
+      }
+    },
+    getAssetsUrl(treeNode) {
+      let url = this.treeSetting?.url || this.url
+      if (treeNode.meta.type === 'node') {
+        const nodeId = treeNode.meta.data.id
+        url = setUrlParam(url, 'node_id', nodeId)
+        url = setUrlParam(url, 'asset_id', '')
+      } else if (treeNode.meta.type === 'asset') {
+        const assetId = treeNode.meta.data?.id || treeNode.id
+        url = setUrlParam(url, 'node_id', '')
+        url = setUrlParam(url, 'asset_id', assetId)
+      } else if (treeNode.meta.type === 'category') {
+        url = setUrlParam(url, 'category', treeNode.meta.category)
+      } else if (treeNode.meta.type === 'type') {
+        url = setUrlParam(url, 'category', treeNode.meta.category)
+        url = setUrlParam(url, 'type', treeNode.meta._type)
+      } else if (treeNode.meta.type === 'platform') {
+        url = setUrlParam(url, 'platform', treeNode.id)
+      }
+      const query = this.setTreeUrlQuery()
+      url = query ? `${url}&${query}` : url
+      this.$set(this.tableConfig, 'url', url)
+      setRouterQuery(this, url)
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/components/AutoDataForm/components/NestedField.vue

@@ -1,9 +1,13 @@
 <template>
   <DataForm
+    v-if="!loading"
+    :disabled="disabled"
     :fields="iFields"
     :form="value"
     style="margin-left: -26%;margin-right: -6%"
     v-bind="kwargs"
+    @change="updateValue($event)"
+    @input="updateValue($event)"
     v-on="$listeners"
   />
 </template>
@@ -28,10 +32,16 @@ export default {
     errors: {
       type: [Object, String],
       default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
+      loading: false,
+      formJson: JSON.stringify(this.value),
       kwargs: {
         hasReset: false,
         hasSaveContinue: false,
@@ -60,7 +70,26 @@ export default {
       return fields
     }
   },
+  watch: {
+    value: {
+      handler(val) {
+        const valJson = JSON.stringify(val)
+        // 如果不想等，证明是 value 自己变化导致的， 需要重新渲染
+        if (valJson !== this.formJson) {
+          this.loading = true
+          setTimeout(() => {
+            this.loading = false
+          }, 10)
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
+    updateValue(val) {
+      this.formJson = JSON.stringify(val)
+      this.$emit('input', val)
+    },
     objectToString(obj) {
       let data = ''
       // eslint-disable-next-line prefer-const

src/components/AutoDataForm/index.vue

@@ -1,13 +1,24 @@
 <template>
-  <DataForm ref="dataForm" v-loading="loading" :fields="totalFields" :form="iForm" v-bind="$attrs" v-on="$listeners">
-    <FormGroupHeader
+  <DataForm
+    v-if="!loading"
+    ref="dataForm"
+    :fields="totalFields"
+    :form="iForm"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <span
       v-for="(group, i) in groups"
-      :slot="'id:'+group.name"
       :key="'group-'+group.name"
-      :group="group"
-      :index="i"
-      :line="i !== 0"
-    />
+      :slot="'id:'+group.name"
+    >
+      <FormGroupHeader
+        v-if="!groupHidden(group, i)"
+        :group="group"
+        :index="i"
+        :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
+      />
+    </span>
   </DataForm>
 </template>
 
@@ -15,6 +26,7 @@
 import DataForm from '../DataForm'
 import FormGroupHeader from '@/components/FormGroupHeader'
 import { FormFieldGenerator } from '@/components/AutoDataForm/utils'
+
 export default {
   name: 'AutoDataForm',
   components: {
@@ -51,42 +63,69 @@ export default {
       totalFields: [],
       loading: true,
       groups: [],
-      iForm: this.form,
       errors: {}
     }
   },
+  computed: {
+    iForm() {
+      const iForm = {}
+      Object.entries(this.form).forEach(([key, value]) => {
+        // 初始值是 choice 对象
+        if (value && typeof value === 'object' && value.label && value.value !== undefined) {
+          iForm[key] = value.value
+        } else if (Array.isArray(value) && value.length > 0 && typeof value[0] === 'object' &&
+          value[0].label && value[0].value !== undefined) {
+          iForm[key] = value.map(item => item.value)
+        } else {
+          iForm[key] = value
+        }
+      })
+      return iForm
+    }
+  },
   mounted() {
     this.optionUrlMetaAndGenerateColumns()
   },
   methods: {
-    optionUrlMetaAndGenerateColumns() {
-      this.$store.dispatch('common/getUrlMeta', { url: this.url }).then(data => {
-        this.remoteMeta = data.actions[this.method.toUpperCase()] || {}
-        this.generateColumns()
-        this.cleanFormValue()
-      }).catch(err => {
-        this.$log.error(err)
-      }).finally(() => {
-        this.loading = false
-      })
+    async optionUrlMetaAndGenerateColumns() {
+      let data = { actions: {}}
+      if (this.url) {
+        data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
+      }
+      this.remoteMeta = data.actions[this.method.toUpperCase()] || {}
+      this.$emit('afterRemoteMeta', this.remoteMeta)
+      this.generateColumns()
+      this.$emit('afterGenerateColumns', this.totalFields)
+      this.cleanFormValue()
+      this.loading = false
     },
     generateColumns() {
-      const generator = new FormFieldGenerator()
+      const generator = new FormFieldGenerator(this.$emit)
       this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
       this.groups = generator.groups
       this.$log.debug('Total fields: ', this.totalFields)
     },
     _cleanFormValue(form, remoteMeta) {
+      if (!form) {
+        form = {}
+      }
       for (const [k, v] of Object.entries(remoteMeta)) {
-        if (v.default === undefined) {
-          continue
+        let valueSet = form[k]
+        if (v.type === 'nested object' && v.children) {
+          // 有一些字段属性时 nested object 类型，但是没有 children，没有children的不需要走递归逻辑，
+          // 比如：认证配置中的属性映射字段
+          if (typeof valueSet !== 'object') {
+            // 处理一些前端没有设置初始值的情况
+            valueSet = {}
+          }
+          form[k] = valueSet
+          this._cleanFormValue(valueSet, v.children)
         }
-        const valueSet = form[k]
         if (valueSet !== undefined) {
           continue
         }
-        if (v.type === 'nested object' && typeof valueSet === 'object') {
-          this._cleanFormValue(valueSet, v.children)
+        if (v.default === undefined) {
+          continue
         }
         form[k] = v.default
       }
@@ -107,6 +146,18 @@ export default {
       } else {
         field.attrs.error = error
       }
+    },
+    groupHidden(group, i) {
+      for (const field of group.fields) {
+        let hidden = field.hidden
+        if (typeof hidden === 'function') {
+          hidden = hidden(this.iForm)
+        }
+        if (!hidden) {
+          return false
+        }
+      }
+      return true
     }
   }
 }

src/components/AutoDataForm/utils.js

@@ -1,25 +1,37 @@
 import Vue from 'vue'
 import Select2 from '@/components/FormFields/Select2'
+import ObjectSelect2 from '@/components/FormFields/NestedObjectSelect2'
 import NestedField from '@/components/AutoDataForm/components/NestedField'
+import Switcher from '@/components/FormFields/Switcher'
 import rules from '@/components/DataForm/rules'
+import BasicTree from '@/components/FormFields/BasicTree'
+import JsonEditor from '@/components/FormFields/JsonEditor'
 import { assignIfNot } from '@/utils/common'
+import TagInput from '@/components/FormFields/TagInput.vue'
 
 export class FormFieldGenerator {
-  constructor() {
+  constructor(emit) {
+    this.$emite = emit
     this.groups = []
   }
+
   generateFieldByType(type, field, fieldMeta, fieldRemoteMeta) {
     switch (type) {
+      case 'labeled_choice':
       case 'choice':
-        type = 'radio-group'
-        if (!fieldRemoteMeta.read_only) {
-          field.options = fieldRemoteMeta.choices.map(v => {
-            return { label: v.display_name, value: v.value }
-          })
+        // Value 处理事在 AutoDataForm 中处理的
+        if (!fieldRemoteMeta['read_only']) {
+          field.options = fieldRemoteMeta.choices
         }
+        type = 'radio-group'
         break
       case 'multiple choice':
-        field.el.choices = fieldRemoteMeta['choices']
+        field.options = fieldRemoteMeta.choices
+        type = 'checkbox-group'
+        break
+      case 'tree':
+        field.el.tree = fieldRemoteMeta.tree
+        field.component = BasicTree
         break
       case 'datetime':
         type = 'date-picker'
@@ -27,12 +39,19 @@ export class FormFieldGenerator {
           type: 'datetime'
         }
         break
+      case 'json':
+        type = 'json-editor'
+        field.component = JsonEditor
+        break
       case 'field':
         type = ''
         field.component = Select2
         if (fieldRemoteMeta.required) {
           field.el.clearable = false
         }
+        if (fieldRemoteMeta.child && fieldRemoteMeta.child.type === 'nested object') {
+          field.component = ObjectSelect2
+        }
         break
       case 'string':
         type = 'input'
@@ -45,40 +64,55 @@ export class FormFieldGenerator {
         }
         break
       case 'boolean':
-        type = 'checkbox'
+        type = ''
+        field.component = Switcher
+        break
+      case 'list':
+        type = 'input'
+        field.component = TagInput
+        break
+      case 'object_related_field':
+        field.component = ObjectSelect2
+        break
+      case 'm2m_related_field':
+        field.component = ObjectSelect2
         break
       case 'nested object':
         type = 'nestedField'
         field.component = NestedField
         field.label = ''
         field.labelWidth = 0
+        field.el = { ...field.el, ...fieldMeta }
         field.el.fields = this.generateNestFields(field, fieldMeta, fieldRemoteMeta)
         field.el.errors = {}
-        Vue.$log.debug('All fields in generate: ', field.el.allFields)
+        field.hidden = () => {
+          const hidden = fieldMeta['hiddenFields'] || (() => field.el.fields.length === 0)
+          return hidden(fieldMeta, fieldRemoteMeta, field.el.fields)
+        }
         break
       default:
         type = 'input'
         break
     }
+    // 上面重写了 type
     if (type === 'radio-group') {
-      if (!fieldRemoteMeta.read_only) {
-        const options = fieldRemoteMeta.choices.map(v => {
-          return { label: v.display_name, value: v.value }
-        })
-        if (options.length > 4) {
-          type = 'select'
-          field.el.filterable = true
-        }
+      if (field.options.length > 4) {
+        type = 'select'
+        field.el.filterable = true
       }
     }
     field.type = type
     return field
   }
+
   generateNestFields(field, fieldMeta, fieldRemoteMeta) {
     const fields = []
-    const nestedFields = fieldMeta.fields || []
+    let nestedFields = fieldMeta.fields || []
     const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
     const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
+    if (nestedFields === '__all__') {
+      nestedFields = Object.keys(nestedFieldsRemoteMeta)
+    }
     for (const name of nestedFields) {
       const f = this.generateField(name, nestedFieldsMeta, nestedFieldsRemoteMeta)
       fields.push(f)
@@ -86,6 +120,7 @@ export class FormFieldGenerator {
     Vue.$log.debug('NestFields: ', fields)
     return fields
   }
+
   generateFieldByName(name, field) {
     switch (name) {
       case 'email':
@@ -100,6 +135,7 @@ export class FormFieldGenerator {
     }
     return field
   }
+
   generateFieldByOther(field, fieldMeta, fieldRemoteMeta) {
     const filedRules = field.rules || []
     if (fieldRemoteMeta.required) {
@@ -109,15 +145,20 @@ export class FormFieldGenerator {
         filedRules.push(rules.RequiredChange)
       }
     }
+    // 一些 field 有 choices 但不是 choiceField
+    if (fieldRemoteMeta.choices && field.type.indexOf('choice') === -1) {
+      field.el.choices = fieldRemoteMeta.choices
+    }
     field.rules = filedRules
     return field
   }
+
   generateField(name, fieldsMeta, remoteFieldsMeta) {
     let field = { id: name, prop: name, el: {}, attrs: {}, rules: [] }
     const remoteFieldMeta = remoteFieldsMeta[name] || {}
     const fieldMeta = fieldsMeta[name] || {}
     field.label = remoteFieldMeta.label
-    field.helpText = remoteFieldMeta.help_text
+    field.helpText = remoteFieldMeta['help_text']
     field = this.generateFieldByType(remoteFieldMeta.type, field, fieldMeta, remoteFieldMeta)
     field = this.generateFieldByName(name, field)
     field = this.generateFieldByOther(field, fieldMeta, remoteFieldMeta)
@@ -130,18 +171,25 @@ export class FormFieldGenerator {
     // Vue.$log.debug('Generate field: ', name, field)
     return field
   }
+
   generateFieldGroup(field, fieldsMeta, remoteFieldsMeta) {
     const [groupTitle, fields] = field
-    this.groups.push({
+    const _fields = this.generateFields(fields, fieldsMeta, remoteFieldsMeta)
+    const group = {
       id: groupTitle,
       title: groupTitle,
-      name: fields[0],
-      fields: fields
-    })
-    return this.generateFields(fields, fieldsMeta, remoteFieldsMeta)
+      fields: _fields,
+      name: _fields[0]?.id
+    }
+    this.groups.push(group)
+    return _fields
   }
+
   generateFields(_fields, fieldsMeta, remoteFieldsMeta) {
     let fields = []
+    if (_fields === '__all__') {
+      _fields = Object.keys(remoteFieldsMeta)
+    }
     for (let field of _fields) {
       if (field instanceof Array) {
         const items = this.generateFieldGroup(field, fieldsMeta, remoteFieldsMeta)

src/components/AutoDataSearch/index.vue

@@ -33,7 +33,8 @@ export default {
   },
   computed: {
     iOption() {
-      return this.options.concat(this.internalOptions)
+      const options = this.options.concat(this.internalOptions)
+      return _.uniqWith(options, _.isEqual)
     }
   },
   watch: {
@@ -67,16 +68,16 @@ export default {
           type: field.type,
           value: name
         }
-        if (field.type === 'choice' && field.choices) {
+        if (['choice', 'labeled_choice'].indexOf(field.type) > -1 && field.choices) {
           option.children = field.choices.map(item => {
             if (typeof (item.value) === 'boolean') {
               if (item.value) {
-                return { label: item.display_name, value: 'True' }
+                return { label: item.label, value: 'True' }
               } else {
-                return { label: item.display_name, value: 'False' }
+                return { label: item.label, value: 'False' }
               }
             }
-            return { label: item.display_name, value: item.value }
+            return { label: item.label, value: item.value }
           })
         }
         if (field.type === 'boolean') {
@@ -85,6 +86,9 @@ export default {
             { label: i18n.t('common.No'), value: false }
           ]
         }
+        if (option.value === 'id') {
+          option.label = 'ID'
+        }
         vm.internalOptions.push(option)
       }
     },

src/components/AutoDataTable/components/ColumnSettingPopover.vue

@@ -1,12 +1,13 @@
 <template>
   <Dialog
     v-if="showColumnSettingPopover"
-    :title="$t('common.CustomCol')"
-    :visible.sync="showColumnSettingPopover"
+    :cancel-title="$tc('common.RestoreDefault')"
     :destroy-on-close="true"
-    :show-cancel="false"
-    width="35%"
+    :title="$tc('common.CustomCol')"
+    :visible.sync="showColumnSettingPopover"
     top="10%"
+    width="50%"
+    @cancel="restoreDefault()"
     @confirm="handleColumnConfirm()"
   >
     <el-alert type="success">
@@ -23,24 +24,20 @@
           style="margin-top:5px;"
         >
           <el-checkbox
+            :disabled="item.prop==='actions' || minColumns.indexOf(item.prop)!==-1"
             :label="item.prop"
-            :disabled="
-              item.prop==='id' ||
-                item.prop==='actions' ||
-                minColumns.indexOf(item.prop)!==-1
-            "
           >
             {{ item.label }}
           </el-checkbox>
         </el-col>
       </el-row>
-
     </el-checkbox-group>
   </Dialog>
 </template>
 
 <script>
 import Dialog from '@/components/Dialog/index'
+
 export default {
   name: 'ColumnSettingPopover',
   components: {
@@ -82,6 +79,10 @@ export default {
     handleColumnConfirm() {
       this.showColumnSettingPopover = false
       this.$emit('columnsUpdate', { columns: this.iCurrentColumns, url: this.url })
+    },
+    restoreDefault() {
+      this.showColumnSettingPopover = false
+      this.$emit('columnsUpdate', { columns: null, url: this.url })
     }
   }
 }

src/components/AutoDataTable/index.vue

@@ -11,8 +11,8 @@
     />
     <ColumnSettingPopover
       :current-columns="popoverColumns.currentCols"
-      :total-columns-list="popoverColumns.totalColumnsList"
       :min-columns="popoverColumns.minCols"
+      :total-columns-list="popoverColumns.totalColumnsList"
       :url="config.url"
       @columnsUpdate="handlePopoverColumnsChange"
     />
@@ -22,15 +22,18 @@
 <script type="text/jsx">
 import DataTable from '../DataTable'
 import {
+  ActionsFormatter,
+  ArrayFormatter,
+  ChoicesFormatter,
   DateFormatter,
   DetailFormatter,
   DisplayFormatter,
-  ActionsFormatter,
-  ChoicesFormatter
+  ObjectRelatedFormatter
 } from '@/components/TableFormatters'
 import i18n from '@/i18n/i18n'
+import { newURL, replaceAllUUID } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover'
-import { newURL } from '@/utils/common'
+
 export default {
   name: 'AutoDataTable',
   components: {
@@ -63,13 +66,12 @@ export default {
       }
     }
   },
-  computed: {
-  },
+  computed: {},
   watch: {
     config: {
-      handler(iNew) {
+      handler: function(iNew, iOld) {
         this.optionUrlMetaAndGenCols()
-        this.$log.debug('AutoDataTable Config change found')
+        this.$log.debug('AutoDataTable Config change found: ')
       },
       deep: true
     }
@@ -79,8 +81,12 @@ export default {
   },
   methods: {
     async optionUrlMetaAndGenCols() {
-      if (this.config.url === '') { return }
-      const url = (this.config.url.indexOf('?') === -1) ? `${this.config.url}?draw=1&display=1` : `${this.config.url}&draw=1&display=1`
+      if (this.config.url === '') {
+        return
+      }
+      const url = (this.config.url.indexOf('?') === -1)
+        ? `${this.config.url}?draw=1&display=1`
+        : `${this.config.url}&draw=1&display=1`
       this.$store.dispatch('common/getUrlMeta', { url: url }).then(data => {
         const method = this.method.toUpperCase()
         this.meta = data.actions && data.actions[method] ? data.actions[method] : {}
@@ -117,7 +123,22 @@ export default {
         case 'is_valid':
           col.label = i18n.t('common.Validity')
           col.formatter = ChoicesFormatter
-          col.align = 'center'
+          col.formatterArgs = {
+            textChoices: {
+              true: i18n.t('common.Yes'),
+              false: i18n.t('common.No')
+            }
+          }
+          col.width = '80px'
+          break
+        case 'is_active':
+          col.formatter = ChoicesFormatter
+          col.formatterArgs = {
+            textChoices: {
+              true: i18n.t('common.Active'),
+              false: i18n.t('common.Inactive')
+            }
+          }
           col.width = '80px'
           break
         case 'datetime':
@@ -129,21 +150,41 @@ export default {
       }
       return col
     },
-    generateColumnByType(type, col) {
+    generateColumnByType(type, col, meta) {
       switch (type) {
         case 'choice':
           col.sortable = 'custom'
           col.formatter = DisplayFormatter
           break
+        case 'labeled_choice':
+          col.sortable = 'custom'
+          col.formatter = ChoicesFormatter
+          break
         case 'boolean':
           col.formatter = ChoicesFormatter
-          col.align = 'center'
           col.width = '80px'
           break
         case 'datetime':
           col.formatter = DateFormatter
           col.width = '160px'
+          break
+        case 'object_related_field':
+          col.formatter = ObjectRelatedFormatter
+          break
+        case 'm2m_related_field':
+          col.formatter = ObjectRelatedFormatter
+          break
+        case 'list':
+          col.formatter = ArrayFormatter
+          break
+        case 'json':
+        case 'field':
+          if (meta.child && meta.child.type === 'nested object') {
+            col.formatter = ObjectRelatedFormatter
+          }
+          break
       }
+      // this.$log.debug('Field: ', type, col.prop, col)
       return col
     },
     addHelpTipsIfNeed(col) {
@@ -155,9 +196,9 @@ export default {
         return (
           <span>{column.label}
             <el-tooltip placement='bottom' effect='light' popperClass='help-tips'>
-              <div slot='content' domPropsInnerHTML={helpTips} />
+              <div slot='content' domPropsInnerHTML={helpTips}/>
               <el-button style='padding: 0'>
-                <i class='fa fa-info-circle' />
+                <i class='fa fa-info-circle'/>
               </el-button>
             </el-tooltip>
           </span>
@@ -183,12 +224,12 @@ export default {
           col.filters = column.choices.map(item => {
             if (typeof (item.value) === 'boolean') {
               if (item.value) {
-                return { text: item['display_name'], value: 'True' }
+                return { text: item['label'], value: 'True' }
               } else {
-                return { text: item['display_name'], value: 'False' }
+                return { text: item['label'], value: 'False' }
               }
             }
-            return { text: item['display_name'], value: item.value }
+            return { text: item['label'], value: item.value }
           })
           col.sortable = false
           col['column-key'] = col.prop
@@ -196,22 +237,65 @@ export default {
       }
       return col
     },
+    addOrderingIfNeed(col) {
+      if (col.prop) {
+        const column = this.meta[col.prop] || {}
+        if (column.order) {
+          col.sortable = 'custom'
+          col['column-key'] = col.prop
+        }
+      }
+      return col
+    },
+    setDefaultFormatterIfNeed(col) {
+      if (!col.formatter) {
+        col.formatter = (row, column, cellValue) => {
+          let value = cellValue
+          let padding = '0'
+          const excludes = [undefined, null, '']
+          if (excludes.indexOf(value) !== -1) {
+            padding = '6px'
+            value = '-'
+          }
+          return <span style={{ marginLeft: padding }}>{value}</span>
+        }
+      }
+      return col
+    },
+
     generateColumn(name) {
       const colMeta = this.meta[name] || {}
       const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
-      let col = { prop: name, label: colMeta.label }
+      let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
 
       col = this.generateColumnByName(name, col)
-      col = this.generateColumnByType(colMeta.type, col)
+      col = this.generateColumnByType(colMeta.type, col, colMeta)
+      col = this.setDefaultFormatterIfNeed(col)
       col = Object.assign(col, customMeta)
       col = this.addHelpTipsIfNeed(col)
       col = this.addFilterIfNeed(col)
+      col = this.addOrderingIfNeed(col)
       return col
     },
     generateTotalColumns() {
       const config = _.cloneDeep(this.config)
       let columns = []
-      for (let col of config.columns) {
+      const allColumnNames = Object.entries(this.meta)
+        .filter(([name, meta]) => !meta['write_only'])
+        .map(([name, meta]) => name)
+        .concat(config.columnsExtra || [])
+
+      let configColumns = config.columns || allColumnNames
+      const columnsExclude = config.columnsExclude || []
+      configColumns = configColumns.filter(item => !columnsExclude.includes(item))
+
+      // 解决后端 API 返回字段中包含 actions 的问题;
+      const hasColumnActions = configColumns.findIndex(item => item?.prop === 'actions') !== -1
+      if (!hasColumnActions) {
+        configColumns = [...configColumns.filter(i => i !== 'actions'), 'actions']
+      }
+
+      for (let col of configColumns) {
         if (typeof col === 'object') {
           columns.push(col)
         } else if (typeof col === 'string') {
@@ -219,7 +303,11 @@ export default {
           columns.push(col)
         }
       }
+
       columns = columns.filter(item => {
+        if (item?.showFullContent) {
+          item.className = 'show-full-content'
+        }
         let has = item.has
         if (has === undefined) {
           has = true
@@ -246,13 +334,14 @@ export default {
 
       // 最小列
       const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
-        .filter(n => defaultColumnsNames.indexOf(n) > -1)
+        .filter(n => totalColumnsNames.includes(n))
 
       // 应该显示的列
       const _tableConfig = localStorage.getItem('tableConfig')
         ? JSON.parse(localStorage.getItem('tableConfig'))
         : {}
-      const tableName = this.config.name || this.$route.name + '_' + newURL(this.iConfig.url).pathname
+      let tableName = this.config.name || this.$route.name + '_' + newURL(this.iConfig.url).pathname
+      tableName = replaceAllUUID(tableName)
       const configShowColumnsNames = _.get(_tableConfig[tableName], 'showColumns', null)
       let showColumnsNames = configShowColumnsNames || defaultColumnsNames
       if (showColumnsNames.length === 0) {
@@ -293,11 +382,17 @@ export default {
     },
     handlePopoverColumnsChange({ columns, url }) {
       this.$log.debug('Columns change: ', columns)
+      if (columns === null) {
+        columns = this.cleanedColumnsShow.default
+      }
       this.popoverColumns.currentCols = columns
       const _tableConfig = localStorage.getItem('tableConfig')
         ? JSON.parse(localStorage.getItem('tableConfig'))
         : {}
-      const tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
+      let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
+      // 替换url中的uuid，避免同一个类型接口生成多个key，localStorage中的数据无法共用
+      tableName = replaceAllUUID(tableName)
+
       _tableConfig[tableName] = {
         'showColumns': columns
       }

src/components/AutoDataZTree/index.vue

@@ -2,13 +2,13 @@
   <DataZTree ref="dataztree" :setting="treeSetting" class="data-z-tree" v-on="$listeners">
     <slot v-if="treeSetting.hasRightMenu" slot="rMenu">
       <li v-if="treeSetting.showCreate" id="m_create" class="rmenu" tabindex="-1" @click="createTreeNode">
-        <i class="fa fa-plus-square-o" />  {{ this.$t('tree.CreateNode') }}
+        <i class="fa fa-plus-square-o" /> {{ this.$t('tree.CreateNode') }}
       </li>
       <li v-if="treeSetting.showUpdate" id="m_edit" class="rmenu" tabindex="-1" @click="editTreeNode">
-        <i class="fa fa-pencil-square-o" />  {{ this.$t('tree.RenameNode') }}
+        <i class="fa fa-pencil-square-o" /> {{ this.$t('tree.RenameNode') }}
       </li>
       <li v-if="treeSetting.showDelete" id="m_del" class="rmenu" tabindex="-1" @click="removeTreeNode">
-        <i class="fa fa-minus-square" />  {{ this.$t('tree.DeleteNode') }}
+        <i class="fa fa-minus-square" /> {{ this.$t('tree.DeleteNode') }}
       </li>
       <slot name="rMenu" />
     </slot>
@@ -18,6 +18,7 @@
 <script>
 import DataZTree from '../DataZTree'
 import $ from '@/utils/jquery-vendor'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'AutoDataZTree',
@@ -37,9 +38,13 @@ export default {
         showCreate: true,
         showDelete: true,
         showUpdate: true,
+        showSearch: false,
+        customTreeHeaderName: this.$t('assets.AssetTree'),
         async: {
           enable: true,
-          url: (process.env.VUE_APP_ENV === 'production') ? (`${this.setting.treeUrl}`) : (`${process.env.VUE_APP_BASE_API}${this.setting.treeUrl}`),
+          url: (process.env.VUE_APP_ENV === 'production')
+            ? (`${this.setting.treeUrl}`)
+            : (`${process.env.VUE_APP_BASE_API}${this.setting.treeUrl}`),
           autoParam: ['id=key', 'name=n', 'level=lv'],
           type: 'get',
           headers: {
@@ -66,6 +71,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters([
+      'currentOrg'
+    ]),
     treeSetting() {
       this.$log.debug('Settings: ', this.setting)
       return _.merge(this.defaultSetting, this.setting)
@@ -82,8 +90,8 @@ export default {
   },
   methods: {
     refreshTree: function() {
-      const refreshIconRef = $('#tree-refresh')
-      refreshIconRef.click()
+      // const refreshIconRef = $('#tree-refresh')
+      // refreshIconRef.click()
     },
     editTreeNode: function() {
       this.hideRMenu()
@@ -112,16 +120,17 @@ export default {
       }
       let url = ''
       const query = Object.assign({}, this.$route.query)
+      const objectId = treeNode.meta.data.id
       if (treeNode.meta.type === 'node') {
         this.currentNode = treeNode
         this.currentNodeId = treeNode.meta.data.id
         query['node'] = this.currentNodeId
         query['asset'] = ''
-        url = `${this.setting.url}${combinator}node_id=${treeNode.meta.data.id}&show_current_asset=${show_current_asset}`
+        url = `${this.setting.url}${combinator}node_id=${objectId}&show_current_asset=${show_current_asset}`
       } else if (treeNode.meta.type === 'asset') {
-        query['asset'] = treeNode.meta.data.id
+        query['asset'] = treeNode.meta.data?.id || treeNode.id
         query['node'] = ''
-        url = `${this.setting.url}${combinator}asset_id=${treeNode.meta.data.id}&show_current_asset=${show_current_asset}`
+        url = `${this.setting.url}${combinator}asset_id=${query.asset}&show_current_asset=${show_current_asset}`
       }
       this.$router.push({ query })
       this.$emit('urlChange', url)
@@ -135,30 +144,31 @@ export default {
       this.$axios.delete(
         `${this.treeSetting.nodeUrl}${currentNode.meta.data.id}/`
       ).then(() => {
-        this.$message.success(this.$t('common.deleteSuccessMsg'))
+        this.$message.success(this.$tc('common.deleteSuccessMsg'))
         this.zTree.removeNode(currentNode)
         this.refreshTree()
       }).catch(() => {
-        // this.$message.error(this.$t('common.deleteErrorMsg') + ' ' + error)
+        // this.$message.error(this.$tc('common.deleteErrorMsg') + ' ' + error)
       })
     },
     onRename: function(event, treeId, treeNode, isCancel) {
-      const url = `${this.treeSetting.nodeUrl}${this.currentNodeId}/`
+      const currentNodeId = this.currentNodeId || treeNode.meta.data?.id || ''
+      const url = `${this.treeSetting.nodeUrl}${currentNodeId}/`
       if (isCancel) {
         return
       }
-      this.$axios.patch(
-        url,
-        { 'value': treeNode.name }
-      ).then(res => {
-        let assetsAmount = treeNode.meta.data.assetsAmount
+      this.$axios.patch(url, { 'value': treeNode.name }).then(res => {
+        let assetsAmount = treeNode.meta.data['assetsAmount']
         if (!assetsAmount) {
           assetsAmount = 0
         }
         treeNode.name = treeNode.name + ' (' + assetsAmount + ')'
+        treeNode.meta.data = res
         this.zTree.updateNode(treeNode)
-        this.$message.success(this.$t('common.updateSuccessMsg'))
-      }).finally(() => { this.refreshTree() })
+        this.$message.success(this.$tc('common.updateSuccessMsg'))
+      }).finally(() => {
+        this.refreshTree()
+      })
     },
     onBodyMouseDown: function(event) {
       const rMenuID = this.$refs.dataztree.$refs.ztree.iRMenuID
@@ -170,7 +180,7 @@ export default {
       const rMenuID = this.$refs.dataztree.$refs.ztree.iRMenuID
       const zTreeID = this.$refs.dataztree.$refs.ztree.iZTreeID
       const offset = $(`#${zTreeID}`).offset()
-      const scrollTop = document.querySelector('.treebox').scrollTop
+      const scrollTop = document.querySelector('.treebox')?.scrollTop
       x -= offset.left
       // Tmp
       y -= (offset.top + scrollTop) / 3 - 10
@@ -190,7 +200,7 @@ export default {
         return
       }
       // 屏蔽收藏资产
-      if (treeNode.id === '-12') {
+      if (treeNode?.id === '-12') {
         return
       }
       if (!treeNode && event.target.tagName.toLowerCase() !== 'button' && $(event.target).parents('a').length === 0) {
@@ -198,6 +208,9 @@ export default {
         this.showRMenu('root', event.clientX, event.clientY)
       } else if (treeNode && !treeNode.noR) {
         this.zTree.selectNode(treeNode)
+        if (treeNode.meta?.data?.id) {
+          this.currentNodeId = treeNode.meta.data.id
+        }
         this.showRMenu('node', event.clientX, event.clientY)
       }
     },
@@ -224,10 +237,10 @@ export default {
           nodes: treeNodesIds
         }
       ).then((res) => {
-        this.$message.success(this.$t('common.updateSuccessMsg'))
+        this.$message.success(this.$tc('common.updateSuccessMsg'))
       }).catch(error => {
-        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
-      }).finally(() => this.refreshTree())
+        this.$message.error(this.$tc('common.updateErrorMsg' + ' ' + error))
+      }).finally()
     },
     createTreeNode: function() {
       this.hideRMenu()
@@ -243,19 +256,20 @@ export default {
           id: data['key'],
           name: data['value'],
           pId: parentNode.id,
+          isParent: true,
           meta: {
-            data: data
+            data: data,
+            type: 'node'
           }
         }
         newNode.checked = this.zTree.getSelectedNodes()[0].checked
         this.zTree.addNodes(parentNode, 0, newNode)
-        // vm.$refs.dataztree.refresh()
         const node = this.zTree.getNodeByParam('id', newNode.id, parentNode)
         this.currentNodeId = node.meta.data.id || newNode.id
         this.zTree.editName(node)
-        this.$message.success(this.$t('common.createSuccessMsg'))
+        this.$message.success(this.$tc('common.createSuccessMsg'))
       }).catch(error => {
-        this.$message.error(this.$t('common.createErrorMsg') + ' ' + error)
+        this.$message.error(this.$tc('common.createErrorMsg') + ' ' + error)
       })
     },
     refresh: function() {
@@ -274,30 +288,32 @@ export default {
 </script>
 
 <style scoped>
-  .rmenu {
-    font-size: 12px;
-    padding: 0 16px;
-    position: relative;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: #606266;
-    height: 24px;
-    line-height: 24px;
-    box-sizing: border-box;
-    cursor: pointer;
-  }
+.rmenu {
+  font-size: 12px;
+  padding: 0 16px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #606266;
+  height: 24px;
+  line-height: 24px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
 
-  .rmenu > a:hover, .dropdown-menu > a:focus {
-    color: #262626;
-    text-decoration: none;
-    background-color: #f5f5f5;
-  }
-  .rmenu:hover{
-    background-color: #f5f7fa;
-  }
+.rmenu > a:hover, .dropdown-menu > a:focus {
+  color: #262626;
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
 
-  .data-z-tree >>> .fa {
-    width: 10px;
-  }
+.rmenu:hover {
+  background-color: #f5f7fa;
+}
+
+.data-z-tree >>> .fa {
+  width: 10px;
+  margin-right: 3px;
+}
 </style>

src/components/AutomationParams/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <div>
+      <el-button
+        size="mini"
+        type="primary"
+        :disabled="isDisabled"
+        @click="onOpenDialog"
+      >{{ $tc('common.Setting') }}</el-button>
+    </div>
+    <Dialog
+      v-if="visible"
+      width="60%"
+      :visible.sync="visible"
+      :title="title"
+      :show-cancel="false"
+      :show-confirm="false"
+      :destroy-on-close="true"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <AutoDataForm
+        ref="autoDataForm"
+        :form="form"
+        class="data-form"
+        v-bind="config"
+        @submit="onSubmit"
+      />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import { Dialog, AutoDataForm } from '@/components'
+
+export default {
+  componentName: 'AutomationParams',
+  components: {
+    Dialog,
+    AutoDataForm
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      default: function() {
+        return this.$t('assets.PushParams')
+      }
+    },
+    assets: {
+      type: Array,
+      default: () => []
+    },
+    nodes: {
+      type: Array,
+      default: () => []
+    },
+    method: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: `/api/v1/assets/platform-automation-methods/`
+    }
+  },
+  data() {
+    return {
+      remoteMeta: {},
+      visible: false,
+      isDisabled: true,
+      form: this.value,
+      node_ids: this.nodes,
+      asset_ids: this.assets,
+      config: {
+        url: this.url,
+        hasSaveContinue: false,
+        hasButtons: true,
+        method: 'get',
+        fields: [],
+        fieldsMeta: {}
+      }
+    }
+  },
+  computed: {
+    refForm() {
+      return this.$refs.autoDataForm
+    }
+  },
+  watch: {
+    nodes: {
+      handler(val) {
+        this.node_ids = val
+        this.onFieldChangeHandle()
+      },
+      deep: true
+    },
+    assets: {
+      handler(val) {
+        this.asset_ids = val
+        this.onFieldChangeHandle()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getUrlMeta()
+  },
+  methods: {
+    async getUrlMeta() {
+      const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
+      this.remoteMeta = data.actions[this.config.method.toUpperCase()] || {}
+    },
+    async getFilterPlatforms() {
+      return await this.$axios.post(
+        '/api/v1/assets/platforms/filter-nodes-assets/',
+        {
+          'node_ids': this.node_ids,
+          'asset_ids': this.asset_ids
+        }
+      )
+    },
+    async onFieldChangeHandle() {
+      const platforms = await this.getFilterPlatforms()
+      let pushAccountMethods = platforms.map(i => i.automation[this.method])
+      pushAccountMethods = _.uniq(pushAccountMethods)
+      // 检测是否有可设置的推送方式
+      const hasCanSettingPushMethods = _.intersection(pushAccountMethods, Object.keys(this.remoteMeta))
+      this.setFormConfig(hasCanSettingPushMethods)
+      if (hasCanSettingPushMethods.length > 0) {
+        this.isDisabled = false
+        this.$emit('input', this.form)
+      } else {
+        this.isDisabled = true
+        this.$emit('input', {})
+      }
+    },
+    setFormConfig(methods) {
+      const newForm = {}
+      const fields = []
+      const fieldsMeta = {}
+      this.config.fields = []
+
+      for (const method of methods) {
+        const filterField = this.remoteMeta[method] || {}
+        // 修改资产、节点时不点击设置按钮也需要获取form表单值暴露出去
+        if (this.form.hasOwnProperty(method)) {
+          newForm[method] = this.form[method]
+        }
+        fields.push([filterField.label, [method]])
+        fieldsMeta[method] = {
+          fields: [],
+          fieldsMeta: {}
+        }
+        if (Object.keys(filterField?.children || {}).length > 0) {
+          for (const [k, v] of Object.entries(filterField.children)) {
+            const item = {
+              ...v,
+              type: 'input'
+            }
+            delete item.default
+            fieldsMeta[method].fields.push(k)
+            fieldsMeta[method].fieldsMeta[k] = item
+          }
+        }
+      }
+
+      this.form = newForm
+      this.config.fields = fields
+      this.config.fieldsMeta = fieldsMeta
+    },
+    onOpenDialog() {
+      this.visible = true
+    },
+    onSubmit(form) {
+      this.visible = false
+      this.$emit('input', form)
+      this.$log.debug('Auto push form:', form)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/CronTab/Crontab.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <el-tabs type="border-card">
-      <el-tab-pane v-if="shouldHide('min')" :label="this.$t('common.CronTab.min')">
+      <el-tab-pane v-if="shouldHide('min')" :label="$tc('common.CronTab.min')">
         <CrontabMin
           ref="cronmin"
           :check="checkNumber"
@@ -11,7 +11,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('hour')" :label="this.$t('common.CronTab.hour')">
+      <el-tab-pane v-if="shouldHide('hour')" :label="$tc('common.CronTab.hour')">
         <CrontabHour
           ref="cronhour"
           :check="checkNumber"
@@ -20,7 +20,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('day')" :label="this.$t('common.CronTab.day')">
+      <el-tab-pane v-if="shouldHide('day')" :label="$tc('common.CronTab.day')">
         <CrontabDay
           ref="cronday"
           :check="checkNumber"
@@ -29,7 +29,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('month')" :label="this.$t('common.CronTab.month')">
+      <el-tab-pane v-if="shouldHide('month')" :label="$tc('common.CronTab.month')">
         <CrontabMonth
           ref="cronmonth"
           :check="checkNumber"
@@ -38,7 +38,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('week')" :label="this.$t('common.CronTab.week')">
+      <el-tab-pane v-if="shouldHide('week')" :label="$tc('common.CronTab.week')">
         <CrontabWeek
           ref="cronweek"
           :check="checkNumber"
@@ -238,7 +238,7 @@ export default {
     updateContabValue(name, value, from) {
       this.contabValueObj[name] = value
       if (from && from !== name) {
-        console.log(`来自组件 ${from} 改变了 ${name} ${value}`)
+        // debug(`来自组件 ${from} 改变了 ${name} ${value}`)
         this.changeRadio(name, value)
       }
     },
@@ -390,6 +390,7 @@ export default {
   text-align: center;
   margin-top: 20px;
 }
+
 .popup-main {
   position: relative;
   margin: 10px auto 0;
@@ -398,12 +399,14 @@ export default {
   font-size: 12px;
   overflow: hidden;
 }
+
 .popup-title {
   overflow: hidden;
   line-height: 34px;
   padding-top: 6px;
   background: #f2f2f2;
 }
+
 .popup-result {
   position: relative;
   box-sizing: border-box;
@@ -413,6 +416,7 @@ export default {
   border: 1px solid #dcdfe6;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
 }
+
 .popup-result .title {
   position: absolute;
   top: -17px;
@@ -424,11 +428,13 @@ export default {
   line-height: 30px;
   background: #fff;
 }
+
 .popup-result table {
   text-align: center;
   width: 100%;
   margin: 0 auto;
 }
+
 .popup-result table span {
   display: block;
   width: 100%;
@@ -439,12 +445,14 @@ export default {
   overflow: hidden;
   border: 1px solid #e8e8e8;
 }
+
 .popup-result-scroll {
   font-size: 12px;
   line-height: 24px;
   height: 10em;
   overflow-y: auto;
 }
+
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item {
   margin-bottom: 10px;

src/components/CronTab/components/Crontab-Day.vue

@@ -25,7 +25,13 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="7">
         {{ this.$t('common.CronTab.appoint') }}
-        <el-select v-model="checkboxList" clearable :placeholder="this.$t('common.CronTab.manyChoose')" multiple style="width:100%">
+        <el-select
+          v-model="checkboxList"
+          clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
+          multiple
+          style="width:100%"
+        >
           <el-option v-for="item in 31" :key="item" :value="item">{{ item }}</el-option>
         </el-select>
       </el-radio>
@@ -45,7 +51,8 @@ export default {
     },
     check: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -184,6 +191,6 @@ export default {
 
 <style scoped>
 	.el-form-item--small.el-form-item {
-		margin-bottom: 10px;
-	}
+    margin-bottom: 10px;
+  }
 </style>

src/components/CronTab/components/Crontab-Hour.vue

@@ -25,7 +25,13 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
         {{ this.$t('common.CronTab.appoint') }}
-        <el-select v-model="checkboxList" clearable :placeholder="this.$t('common.CronTab.manyChoose')" multiple style="width:100%">
+        <el-select
+          v-model="checkboxList"
+          clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
+          multiple
+          style="width:100%"
+        >
           <el-option v-for="item in 24" :key="item" :value="item-1">{{ item-1 }}</el-option>
         </el-select>
       </el-radio>
@@ -45,7 +51,8 @@ export default {
     },
     check: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -153,6 +160,6 @@ export default {
 
 <style scoped>
 	.el-form-item--small.el-form-item {
-		margin-bottom: 10px
-	}
+    margin-bottom: 10px
+  }
 </style>

src/components/CronTab/components/Crontab-Min.vue

@@ -25,7 +25,14 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
         {{ this.$t('common.CronTab.appoint') }}
-        <el-select v-model="checkboxList" clearable :placeholder="this.$t('common.CronTab.manyChoose')" multiple style="width:100%" size="small">
+        <el-select
+          v-model="checkboxList"
+          clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
+          multiple
+          style="width:100%"
+          size="small"
+        >
           <el-option v-for="item in 60" :key="item" :value="item-1">{{ item-1 }}</el-option>
         </el-select>
       </el-radio>
@@ -46,7 +53,8 @@ export default {
     },
     check: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -151,6 +159,6 @@ export default {
 
 <style scoped>
 	.el-form-item--small.el-form-item {
-		margin-bottom: 10px;
-	}
+    margin-bottom: 10px;
+  }
 </style>

src/components/CronTab/components/Crontab-Month.vue

@@ -25,7 +25,13 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
         {{ this.$t('common.CronTab.appoint') }}
-        <el-select v-model="checkboxList" clearable :placeholder="this.$t('common.CronTab.manyChoose')" multiple style="width:100%">
+        <el-select
+          v-model="checkboxList"
+          clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
+          multiple
+          style="width:100%"
+        >
           <el-option v-for="item in 12" :key="item" :value="item">{{ item }}</el-option>
         </el-select>
       </el-radio>
@@ -45,7 +51,8 @@ export default {
     },
     check: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -158,6 +165,6 @@ export default {
 
 <style scoped>
 	.el-form-item--small.el-form-item {
-		margin-bottom: 10px;
-	}
+    margin-bottom: 10px;
+  }
 </style>

src/components/CronTab/components/Crontab-Result.vue

@@ -13,7 +13,7 @@
 
 <script>
 import parser from 'cron-parser'
-import moment from 'moment'
+import { toSafeLocalDateStr } from '@/utils/common'
 export default {
   name: 'CrontabResult',
   props: {
@@ -46,14 +46,14 @@ export default {
       const rule = 0 + ' ' + this.$options.propsData.ex
       try {
         this.resultList = []
-        var interval = parser.parseExpression(rule)
+        const interval = parser.parseExpression(rule)
         for (let index = 0; index < 5; index++) {
           const cur = interval.next().toString()
-          this.resultList.push(moment(cur).format('YYYY-MM-DD HH:mm:ss'))
+          this.resultList.push(toSafeLocalDateStr(cur))
         }
       } catch (error) {
         this.isShow = false
-        console.log(error, 'error')
+        // debug(error, 'error')
       }
     }
   }

src/components/CronTab/components/Crontab-Week.vue

@@ -18,7 +18,13 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="6">
         {{ this.$t('common.CronTab.appoint') }}
-        <el-select v-model="checkboxList" clearable :placeholder="this.$t('common.CronTab.manyChoose')" multiple style="width:100%">
+        <el-select
+          v-model="checkboxList"
+          clearable
+          :placeholder="$tc('common.CronTab.manyChoose')"
+          multiple
+          style="width:100%"
+        >
           <el-option v-for="(item,index) of weekList" :key="index" :value="index+1">{{ item }}</el-option>
         </el-select>
       </el-radio>
@@ -39,7 +45,8 @@ export default {
     },
     check: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -173,6 +180,6 @@ export default {
 
 <style scoped>
 	.el-form-item--small.el-form-item {
-		margin-bottom: 10px;
-	}
+    margin-bottom: 10px;
+  }
 </style>

src/components/CronTab/index.vue

@@ -3,7 +3,7 @@
     <div class="box">
       <el-input v-model="input" clearable @focus="showDialog" @clear="onClear" />
     </div>
-    <el-dialog :title="this.$t('common.CronTab.newCron')" :visible.sync="showCron" top="8vh" width="580px" append-to-body>
+    <el-dialog :title="$tc('common.CronTab.newCron')" :visible.sync="showCron" top="8vh" width="580px" append-to-body>
       <Crontab
         :expression="expression"
         @hide="showCron = false"
@@ -15,6 +15,7 @@
 
 <script>
 import Crontab from './Crontab.vue'
+
 export default {
   components: { Crontab },
   props: {
@@ -51,5 +52,5 @@ export default {
 <style scoped>
   .el-dialog__body {
     padding: 12px 16px;
-}
+  }
 </style>

src/components/DataActions/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="grouped ? 'el-button-group' : 'el-button-ungroup'" style="display: flex">
+  <div :class="grouped ? 'el-button-group' : 'el-button-ungroup'" class="layout">
     <template v-for="action in iActions">
       <el-dropdown
         v-if="action.dropdown"
@@ -10,12 +10,17 @@
         placement="bottom-start"
         @command="handleDropdownCallback"
       >
-        <el-button :size="size" v-bind="cleanButtonAction(action)">
+        <el-button class="more-action" :size="size" v-bind="cleanButtonAction(action)">
           {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
         </el-button>
         <el-dropdown-menu slot="dropdown" style="overflow: auto;max-height: 60vh">
           <template v-for="option in action.dropdown">
-            <div v-if="option.group" :key="'group:'+option.name" class="dropdown-menu-title" style="width:130px">
+            <div
+              v-if="option.group"
+              :key="'group:'+option.name"
+              class="dropdown-menu-title"
+              style="width:130px"
+            >
               {{ option.group }}
             </div>
             <el-dropdown-item
@@ -23,6 +28,10 @@
               :command="[option, action]"
               v-bind="option"
             >
+              <span v-if="option.fa">
+                <i v-if="option.fa.startsWith('fa-')" :class="'fa ' + option.fa" />
+                <svg-icon v-else :icon-class="option.fa" style="font-size: 14px; margin-right: 2px; margin-left: -2px;" />
+              </span>
               {{ option.title }}
             </el-dropdown-item>
           </template>
@@ -39,7 +48,11 @@
       >
         <el-tooltip :disabled="!action.tip" :content="action.tip" placement="top">
           <span>
-            <i v-if="action.fa" :class="'fa ' + action.fa" />{{ action.title }}
+            <span v-if="action.fa" style="vertical-align: initial;">
+              <i v-if="action.fa.startsWith('fa-')" :class="'fa ' + action.fa" />
+              <svg-icon v-else :icon-class="action.fa" style="font-size: 14px;" />
+            </span>
+            {{ action.title }}
           </span>
         </el-tooltip>
       </el-button>
@@ -148,7 +161,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  justify-content: center;
+}
+
 .dropdown-menu-title {
   text-align: left;
   font-size: 12px;
@@ -165,10 +183,28 @@ export default {
 }
 
 .el-button-ungroup .action-item {
-  margin-left: 4px
+  margin-left: 4px;
 }
 
 .el-button-ungroup .action-item:first-child {
   margin-left: 0;
 }
+::v-deep .more-batch-processing {
+  &.el-dropdown-menu__item--divided {
+    margin-top: 0;
+    border-top: none;
+    color: #909399;
+    cursor: auto;
+    font-size: 12px;
+    line-height: 30px;
+    border-bottom: 1px solid #E4E7ED;
+    &:before {
+      height: 0;
+    }
+  }
+  &.el-dropdown-menu__item:not(.is-disabled):hover {
+    color: #909399;
+    background-color: #FFFFFF;
+  }
+}
 </style>

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

@@ -43,16 +43,25 @@
       <template v-for="opt in options">
         <el-option
           v-if="data.type === 'select'"
-          :key="opt.value"
-          v-bind="opt"
-        />
-        <!-- TODO: 支持 el-checkbox-button 变体 -->
-        <el-checkbox
-          v-else-if="data.type === 'checkbox-group'"
           :key="opt.label"
           v-bind="opt"
+        />
+        <el-checkbox-button
+          v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
+          :key="opt.value"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
         >
-          {{ opt.value }}
+          {{ opt.label }}
+        </el-checkbox-button>
+
+        <el-checkbox
+          v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
+          :key="opt.value"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
+        >
+          {{ opt.label }}
         </el-checkbox>
         <!-- WARNING: radio 用 label 属性来表示 value 的含义 -->
         <!-- FYI: radio 的 value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
@@ -229,7 +238,9 @@ export default {
           .then(resp => {
             if (isOptionsCase) {
               let formRenderer = this.$parent
-              while (formRenderer.$options._componentTag !== 'el-form-renderer') { formRenderer = formRenderer.$parent }
+              while (formRenderer.$options._componentTag !== 'el-form-renderer') {
+                formRenderer = formRenderer.$parent
+              }
               formRenderer.setOptions(this.prop, resp)
             } else {
               this.propsInner = { [prop]: resp }

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

@@ -146,7 +146,7 @@ export default {
        * - el-form 的 resetFields 不会触发 input & change 事件，无法监听
        * - bug1: https://github.com/FEMessage/el-data-table/issues/176#issuecomment-587280825
        * - bug2:
-       *   0. 建议先在监听器 watch.value 里 console.log(v.name, oldV.name)
+       *   0. 建议先在监听器 watch.value 里 // debug(v.name, oldV.name)
        *   1. 打开 basic 示例
        *   2. 在 label 为 name 的输入框里输入 1，此时 log：'1' ''
        *   3. 点击 reset 按钮，此时 log 两条数据： '1' '1', '' ''

src/components/DataForm/index.vue

@@ -14,10 +14,36 @@
     <slot v-for="item in fields" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
 
     <el-form-item v-if="hasButtons" class="form-buttons">
-      <el-button v-for="button in moreButtons" :key="button.title" size="small" v-bind="button" @click="handleClick(button)">{{ button.title }}</el-button>
-      <el-button v-if="defaultButton && hasReset" size="small" @click="resetForm('form')">{{ $t('common.Reset') }}</el-button>
-      <el-button v-if="defaultButton && hasSaveContinue" size="small" @click="submitForm('form', true)">{{ $t('common.SaveAndAddAnother') }}</el-button>
-      <el-button v-if="defaultButton" size="small" :loading="isSubmitting" type="primary" @click="submitForm('form')">{{ $t('common.Submit') }}</el-button>
+      <el-button
+        v-for="button in moreButtons"
+        :key="button.title"
+        :loading="button.loading"
+        size="small"
+        v-bind="button"
+        @click="handleClick(button)"
+      >
+        {{ button.title }}
+      </el-button>
+      <el-button v-if="defaultButton && hasReset" size="small" @click="resetForm('form')">
+        {{ $t('common.Reset') }}
+      </el-button>
+      <el-button
+        v-if="defaultButton && hasSaveContinue"
+        size="small"
+        @click="submitForm('form', true)"
+      >
+        {{ $t('common.SaveAndAddAnother') }}
+      </el-button>
+      <el-button
+        v-if="defaultButton"
+        :disabled="!canSubmit"
+        :loading="isSubmitting"
+        size="small"
+        type="primary"
+        @click="submitForm('form')"
+      >
+        {{ $t('common.Submit') }}
+      </el-button>
     </el-form-item>
   </ElFormRender>
 </template>
@@ -25,6 +51,7 @@
 <script>
 import ElFormRender from './components/el-form-renderer'
 import { scrollToError } from '@/utils'
+
 export default {
   components: {
     ElFormRender
@@ -42,6 +69,10 @@ export default {
       type: Boolean,
       default: true
     },
+    canSubmit: {
+      type: Boolean,
+      default: true
+    },
     hasSaveContinue: {
       type: Boolean,
       default: true
@@ -70,6 +101,9 @@ export default {
     }
   },
   computed: {
+    elForm() {
+      return this.$refs.form
+    },
     mobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -97,11 +131,13 @@ export default {
     },
     handleClick(button) {
       const callback = button.callback || function(values, form) {
-        // console.log('Click ', button.title, ': ', values)
+        // debug('Click ', button.title, ': ', values)
       }
       const form = this.$refs['form']
       const values = form.getFormValue()
-      callback(values, form)
+      callback(values, form, button)
+    },
+    getFormValue() {
     }
   }
 }
@@ -125,7 +161,7 @@ export default {
   }
 
   .el-form ::v-deep .el-form-item__error {
-     position: inherit;
+    position: inherit;
   }
 
   .el-form ::v-deep .form-group-header {
@@ -144,10 +180,12 @@ export default {
     font-size: 12px;
     line-height: 18px;
   }
+
   .el-form ::v-deep .help-block a {
-    color: #1c84c6;
+    color: var(--color-primary);
   }
+
   .form-buttons {
-    padding-top: 10px;
+    margin-top: 20px;
   }
 </style>

src/components/DataForm/rules/index.js

@@ -14,10 +14,52 @@ export const EmailCheck = {
   trigger: ['blur', 'change']
 }
 
+export const IpCheck = {
+  required: true,
+  validator: (rule, value, callback) => {
+    value = value?.trim()
+    const urlRegExp = /^[\w://.?=&#-]+$/
+    if (urlRegExp.test(value)) {
+      callback()
+    } else {
+      callback(new Error(i18n.t('common.FormatError')))
+    }
+  },
+  trigger: ['blur', 'change']
+}
+
+export const specialEmojiCheck = {
+  validator: (rule, value, callback) => {
+    value = value?.trim()
+    if (/[\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/.test(value)) {
+      callback(new Error(i18n.t('common.NotSpecialEmoji')))
+    } else {
+      callback()
+    }
+  },
+  trigger: ['blur', 'change']
+}
+
+// 只能输入字母、数字、下划线
+export const matchAlphanumericUnderscore = {
+  validator: (rule, value, callback) => {
+    value = value?.trim()
+    if (!/^[a-zA-Z0-9_]+$/.test(value)) {
+      callback(new Error(i18n.t('common.notAlphanumericUnderscore')))
+    } else {
+      callback()
+    }
+  },
+  trigger: ['blur', 'change']
+}
+
 export default {
+  IpCheck,
   Required,
   RequiredChange,
-  EmailCheck
+  EmailCheck,
+  specialEmojiCheck,
+  matchAlphanumericUnderscore
 }
 
 export const JsonRequired = {
@@ -25,7 +67,24 @@ export const JsonRequired = {
   trigger: 'change',
   validator: (rule, value, callback) => {
     try {
-      JSON.parse(value)
+      typeof value === 'string' ? JSON.parse(value) : value
+      callback()
+    } catch (e) {
+      callback(new Error(i18n.t('common.InvalidJson')))
+    }
+  }
+}
+
+export const JsonRequiredUserNameMapped = {
+  required: true,
+  trigger: 'change',
+  validator: (rule, value, callback) => {
+    try {
+      const v = typeof value === 'string' ? JSON.parse(value) : value
+      const hasUserName = _.map(v, (value) => value)
+      if (!hasUserName.includes('username')) {
+        callback(new Error(i18n.t('common.requiredHasUserNameMapped')))
+      }
       callback()
     } catch (e) {
       callback(new Error(i18n.t('common.InvalidJson')))

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

@@ -8,12 +8,12 @@
       <el-table
         ref="table"
         v-loading="loading"
-        v-bind="tableAttrs"
         :data="data"
         :row-class-name="rowClassName"
+        v-bind="tableAttrs"
+        @select="selectStrategy.onSelect"
         v-on="$listeners"
         @selection-change="selectStrategy.onSelectionChange"
-        @select="selectStrategy.onSelect"
         @select-all="selectStrategy.onSelectAll($event, canSelect)"
         @sort-change="onSortChange"
       >
@@ -91,28 +91,28 @@
 
         <!--非树-->
         <template v-else>
-          <el-data-table-column v-if="hasSelection" type="selection" :align="selectionAlign" :selectable="canSelect" />
+          <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"
-            :formatter="typeof col.formatter === 'function' ? col.formatter : null"
-            :filters="col.filters || null"
-            :filter-multiple="false"
             :filter-method="typeof col.filterMethod === 'function' ? col.filterMethod : null"
+            :filter-multiple="false"
+            :filters="col.filters || null"
+            :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             v-bind="{align: columnsAlign, ...col}"
           >
             <template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row, column, index}">
               <div
                 :is="col.formatter"
                 :key="row.id"
-                :table-data="data"
-                :row="row"
+                :cell-value="row[col.prop]"
+                :col="col"
                 :column="column"
                 :index="index"
-                :url="url"
                 :reload="getList"
-                :col="col"
-                :cell-value="row[col.prop]"
+                :row="row"
+                :table-data="data"
+                :url="url"
               />
             </template>
           </el-data-table-column>
@@ -122,13 +122,12 @@
 
       <el-pagination
         v-if="hasPagination"
-        :current-page="page"
-        :page-sizes="paginationSizes"
-        :page-size="size"
-        :total="total"
         :background="paginationBackground"
-        style="text-align: right; padding: 10px 0;"
+        :current-page="page"
         :layout="paginationLayout"
+        :page-size="size"
+        :page-sizes="paginationSizes"
+        :total="total"
         v-bind="extraPaginationAttrs"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
@@ -136,18 +135,18 @@
 
       <the-dialog
         ref="dialog"
-        :new-title="dialogNewTitle"
+        :button-size="buttonSize"
+        :dialog-attrs="dialogAttrs"
         :edit-title="dialogEditTitle"
-        :view-title="dialogViewTitle"
         :form="form"
         :form-attrs="formAttrs"
-        :dialog-attrs="dialogAttrs"
-        :button-size="buttonSize"
+        :new-title="dialogNewTitle"
+        :view-title="dialogViewTitle"
         @confirm="onConfirm"
       >
         <template v-slot="scope">
           <!-- @slot 表单作用域插槽。当编辑、查看时传入row；新增时row=null -->
-          <slot name="form" :row="scope.row" />
+          <slot :row="scope.row" name="form" />
         </template>
       </the-dialog>
     </template>
@@ -167,6 +166,7 @@ import getLocatedSlotKeys from './utils/extract-keys'
 import transformSearchImmediatelyItem from './utils/search-immediately-item'
 import isFalsey from './utils/is-falsey'
 import merge from 'deepmerge'
+
 const defaultFirstPage = 1
 const noPaginationDataPath = 'payload'
 
@@ -268,7 +268,8 @@ export default {
      */
     beforeSearch: {
       type: Function,
-      default() {}
+      default() {
+      }
     },
     /**
      * 单选, 适用场景: 不可以批量删除
@@ -360,28 +361,36 @@ export default {
      */
     newText: {
       type: String,
-      default: '新增'
+      default: function() {
+        return this.$t('ops.Add')
+      }
     },
     /**
      * 修改按钮文案
      */
     editText: {
       type: String,
-      default: '修改'
+      default: function() {
+        return this.$t('ops.Modify')
+      }
     },
     /**
      * 查看按钮文案
      */
     viewText: {
       type: String,
-      default: '查看'
+      default: function() {
+        return this.$t('ops.View')
+      }
     },
     /**
      * 删除按钮文案
      */
     deleteText: {
       type: String,
-      default: '删除'
+      default: function() {
+        return this.$t('ops.Delete')
+      }
     },
     /**
      * 删除提示语。接受要删除的数据（单个对象或数组）；返回字符串
@@ -391,7 +400,7 @@ export default {
     deleteMessage: {
       type: Function,
       default() {
-        return `确认${this.deleteText}吗?`
+        return this.$t('ops.Confirm') + this.deleteText + '?'
       }
     },
     /**
@@ -450,7 +459,7 @@ export default {
     onSuccess: {
       type: Function,
       default() {
-        return this.$message.success('操作成功')
+        return this.$message.success(this.$t('ops.SuccessfulOperation'))
       }
     },
     /**
@@ -707,7 +716,8 @@ export default {
     },
     extraPaginationAttrs: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     hasSelection: {
       type: Boolean,
@@ -1037,6 +1047,7 @@ export default {
       } else {
         this.innerQuery = merge(this.innerQuery, attrs)
       }
+      this.selected.splice(0, this.selected.length)
       return this.getList()
     },
     searchDate(attrs) {
@@ -1156,7 +1167,7 @@ export default {
      * @param {object|object[]} - 要删除的数据对象或数组
      */
     onDefaultDelete(data) {
-      this.$confirm(this.deleteMessage(data), '提示', {
+      this.$confirm(this.deleteMessage(data), this.$t('common.Info'), {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
         beforeClose: async(action, instance, done) => {
@@ -1199,7 +1210,9 @@ export default {
         remain === 0 &&
         this.page === lastPage &&
         this.page > defaultFirstPage
-      ) { this.page-- }
+      ) {
+        this.page--
+      }
     },
 
     // 树形table相关

src/components/DataTable/compenents/el-data-table/index.less

@@ -1,16 +1,22 @@
-.el-data-table  ::v-deep  .el-pagination{
-    text-align: center !important;
-  }
-  .el-data-table  ::v-deep  .el-table td{
-    padding: 4px 0;
-  }
-  .el-data-table  ::v-deep  .el-table th{
-    padding: 4px 0;
-  }
-  .el-data-table ::v-deep  .el-form-item{
-    margin-bottom:10px !important ;
-    margin-top:10px;
-  }
-  .el-data-table ::v-deep  .el-pagination{
-    padding:15px  0 !important ;
+.el-data-table ::v-deep .el-table td {
+  padding: 4px 0;
+}
+
+.el-data-table ::v-deep .el-table th {
+  padding: 4px 0;
+}
+
+.el-data-table ::v-deep .el-form-item {
+  margin-bottom: 10px !important;
+  margin-top: 10px;
+}
+
+.el-data-table ::v-deep .el-pagination {
+  text-align: right;
+  padding: 15px 25px 20px 15px;
+
+  .el-pagination__total {
+    float: left;
   }
+}
+

src/components/DataTable/index.vue

@@ -1,11 +1,11 @@
 <template>
   <ElDatableTable
     ref="table"
-    class="el-table"
+    class="el-data-table"
     v-bind="tableConfig"
+    @sizeChange="handleSizeChange"
     @update="onUpdate"
     v-on="iListeners"
-    @sizeChange="handleSizeChange"
   />
 </template>
 
@@ -21,7 +21,8 @@ export default {
   props: {
     config: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -49,7 +50,11 @@ export default {
           stripe: false, // 斑马纹表格
           border: true, // 表格边框
           fit: true, // 宽度自适应,
-          tooltipEffect: 'dark'
+          tooltipEffect: 'dark',
+          rowClassName: ({ row }) => {
+            const selected = this.dataTable.selected.find(item => item.id === row.id)
+            return selected ? 'selected-row' : ''
+          }
         },
         extraButtons: userTableActions.extraButtons,
         onEdit: (row) => {
@@ -65,6 +70,7 @@ export default {
         },
         pageCount: 5,
         paginationLayout: 'total, sizes, prev, pager, next',
+        paginationSize: JSON.parse(localStorage.getItem('paginationSize')) || 15,
         paginationSizes: [15, 30, 50, 100],
         paginationBackground: true,
         transformQuery: query => {
@@ -86,40 +92,36 @@ export default {
           }
           return query
         },
-        theRowDefaultIsSelected: (row) => { return false }
+        theRowDefaultIsSelected: (row) => {
+          return false
+        }
       }
     }
   },
   computed: {
+    iListeners() {
+      const defaultListeners = {}
+      return Object.assign(defaultListeners, this.$listeners, this.tableConfig?.listeners)
+    },
+    dataTable() {
+      return this.$refs.table
+    },
     tableConfig() {
       const tableDefaultConfig = this.defaultConfig
-      tableDefaultConfig.paginationSize = _.get(this.globalTableConfig, 'paginationSize', 15)
       let tableAttrs = tableDefaultConfig.tableAttrs
       if (this.config.tableAttrs) {
         tableAttrs = Object.assign(tableAttrs, this.config.tableAttrs)
       }
       const config = Object.assign(tableDefaultConfig, this.config)
       config.tableAttrs = tableAttrs
+      this.$log.debug('elTableConfig', config)
       return config
     },
-    iListeners() {
-      return Object.assign({}, this.$listeners, this.tableConfig.listeners)
-    },
-    dataTable() {
-      return this.$refs.table
-    },
     ...mapGetters({
       'globalTableConfig': 'tableConfig'
     })
   },
-  watch: {
-    config: {
-      handler() {
-        // this.getList()
-      },
-      deep: true
-    }
-  },
+  watch: {},
   methods: {
     getList() {
       this.$refs.table.clearSelection()
@@ -153,6 +155,7 @@ export default {
       }
     },
     handleSizeChange(val) {
+      localStorage.setItem('paginationSize', val)
       this.$store.commit('table/SET_TABLE_CONFIG',
         {
           key: 'paginationSize',
@@ -164,37 +167,5 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-
-  .el-table  ::v-deep  .el-table__row > td {
-    line-height: 1.5;
-    padding: 8px 0;
-  }
-  .el-table  ::v-deep  .el-table__row > td> div > span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .el-table  ::v-deep  .el-table__header > thead > tr >th {
-    padding: 8px 0;
-    background-color: #F5F5F6;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-  .table{
-    margin-top: 15px;
-  }
-
-  //分页
-  .el-pagination  ::v-deep  .el-pagination__total{
-    float: left;
-  }
-
-  .el-pagination  ::v-deep  .el-pagination__sizes{
-    float: left;
-  }
-  //修改颜色
-  // .el-button--text{
-  //   color: #409EFF;
-  // }
+<style lang="scss" scoped>
 </style>

src/components/DataZTree/components/ZTree/index.vue

@@ -1,14 +1,34 @@
 <template>
   <div>
-    <ul v-show="loading" class="ztree">
-      {{ this.$t('common.tree.Loading') }}...
-    </ul>
-    <div v-show="!loading" class="treebox">
-      <ul :id="iZTreeID" class="ztree">
+    <div class="treebox">
+      <div>
+        <el-input
+          v-if="treeSetting.showSearch && showTreeSearch"
+          v-model="treeSearchValue"
+          :placeholder="$tc('common.Search')"
+          class="fixed-tree-search"
+          prefix-icon="fa fa-search"
+          size="mini"
+          @input="treeSearchHandle"
+        >
+          <span slot="suffix">
+            <!-- <i class="fa fa-search" style="font-size: 14px; color: #676A6C;" /> -->
+            <svg-icon
+              :icon-class="'close'"
+              class="icon"
+              style="font-size: 14px;"
+              @click="onClose"
+            />
+          </span>
+        </el-input>
+      </div>
+      <ul v-show="loading" class="ztree">
         {{ this.$t('common.tree.Loading') }}...
       </ul>
-      <div v-if="treeSetting.treeUrl===''">
-        {{ this.$t('common.tree.Empty') }}<a id="tree-refresh"><i class="fa fa-refresh" /></a>
+      <ul v-show="!loading" :id="iZTreeID" :key="iZTreeID" class="ztree" />
+      <div v-if="treeSetting.treeUrl===''" class="tree-empty">
+        {{ this.$t('common.tree.Empty') }}
+        <a id="tree-refresh"><i class="fa fa-refresh" /></a>
       </div>
     </div>
     <div :id="iRMenuID" class="rMenu">
@@ -24,17 +44,19 @@
 // eslint-disable-next-line no-unused-vars
 import $ from '@/utils/jquery-vendor.js'
 import '@ztree/ztree_v3/js/jquery.ztree.all.min.js'
+import '@ztree/ztree_v3/js/jquery.ztree.exhide.min.js'
 import '@/styles/ztree.css'
+import '@/styles/ztree_icon.css'
 import axiosRetry from 'axios-retry'
 
 const defaultObject = {
   type: Object,
-  default: () => {}
+  default: () => {
+  }
 }
 export default {
   name: 'ZTree',
-  components: {
-  },
+  components: {},
   props: {
     setting: defaultObject
   },
@@ -45,7 +67,9 @@ export default {
       zTree: '',
       rMenu: '',
       init: false,
-      loading: false
+      loading: false,
+      showTreeSearch: JSON.parse(localStorage.getItem('showTreeSearch')) || false,
+      treeSearchValue: ''
     }
   },
   computed: {
@@ -54,168 +78,519 @@ export default {
     }
   },
   mounted() {
+    window.refresh = this.refresh
+    window.onSearch = this.onSearch
     this.initTree()
-    // $('.treebox').css('height', window.innerHeight - 60)
   },
   beforeDestroy() {
     $.fn.zTree.destroy(this.iZTreeID)
   },
   methods: {
-    initTree: function() {
+    async initTree(refresh = false) {
       const vm = this
       let treeUrl
-      if (this.init) {
-        this.loading = true
-      }
-      if (this.init && this.treeSetting.treeUrl.indexOf('/perms/') !== -1 && this.treeSetting.treeUrl.indexOf('rebuild_tree') === -1) {
-        treeUrl = (this.treeSetting.treeUrl.indexOf('?') === -1) ? `${this.treeSetting.treeUrl}?rebuild_tree=1` : `${this.treeSetting.treeUrl}&rebuild_tree=1`
+      this.loading = true
+      if (refresh && this.treeSetting.treeUrl.indexOf('/perms/') !== -1 &&
+        this.treeSetting.treeUrl.indexOf('rebuild_tree') === -1
+      ) {
+        treeUrl = (this.treeSetting.treeUrl.indexOf('?') === -1)
+          ? `${this.treeSetting.treeUrl}?rebuild_tree=1`
+          : `${this.treeSetting.treeUrl}&rebuild_tree=1`
       } else {
         treeUrl = this.treeSetting.treeUrl
       }
-      this.$axios.get(treeUrl, {
+
+      if (refresh) {
+        $.fn.zTree.destroy(this.iZTreeID)
+      }
+
+      let res = await this.$axios.get(treeUrl, {
         'axios-retry': {
           retries: 20,
           retryCondition: e => {
             return axiosRetry.isNetworkOrIdempotentRequestError(e) || e.response.status === 409
           },
           shouldResetTimeout: true,
-          retryDelay: () => { return 5000 }
+          retryDelay: () => {
+            return 5000
+          }
         }
-      }).then(res => {
-        if (!res) {
-          res = []
-        }
-        if (res.length === 0) {
-          res.push({
-            name: this.$t('common.tree.Empty')
-          })
-        }
-        this.treeSetting.treeUrl = treeUrl
-        if (this.init) {
-          vm.zTree.destroy()
-        }
-        this.zTree = $.fn.zTree.init($(`#${this.iZTreeID}`), this.treeSetting, res)
-        // 手动上报事件, Tree加载完成
-        this.$emit('TreeInitFinish', this.zTree)
-        if (this.treeSetting.showRefresh) {
-          this.rootNodeAddDom(
-            this.zTree,
-            this.treeSetting.callback.refresh
-          )
-        }
-
-        if (this.treeSetting.showMenu) {
-          this.rMenu = $(`#${this.iRMenuID}`)
-        }
-        if (this.treeSetting.otherMenu) {
-          $('.menu-actions').append(this.otherMenu)
-        }
-      }).finally(_ => {
-        vm.loading = false
-        vm.init = true
       })
-    },
-    rootNodeAddDom: function(ztree, callback) {
-      const vm = this
-      const refreshIcon = "<a id='tree-refresh'><i class='fa fa-refresh'></i></a>"
-      const rootNode = ztree.getNodes()[0]
-      let $rootNodeRef
-      if (rootNode) {
-        $rootNodeRef = $('#' + rootNode.tId + '_a')
-        $rootNodeRef.after(refreshIcon)
-      } else {
-        $rootNodeRef = $('#' + ztree.setting.treeId)
-        $rootNodeRef.html(refreshIcon)
+      vm.loading = false
+      if (!res) res = []
+      if (res?.length === 0) {
+        res?.push({
+          name: this.$t('common.tree.Empty')
+        })
       }
-      const refreshIconRef = $('#tree-refresh')
-      refreshIconRef.bind('click', function() {
-        const result = callback()
-        if (result && result.then) {
-          result.finally(() => {
-            vm.initTree()
-          })
-        } else {
-          vm.initTree()
+      this.treeSetting.treeUrl = treeUrl
+      vm.zTree = $.fn.zTree.init($(`#${this.iZTreeID}`), this.treeSetting, res)
+      const rootNode = this.zTree.getNodes()[0]
+      this.rootNodeAddDom(rootNode)
+      // 手动上报事件, Tree加载完成
+      this.$emit('TreeInitFinish', this.zTree)
+
+      if (this.treeSetting.showMenu) {
+        this.rMenu = $(`#${this.iRMenuID}`)
+      }
+      if (this.treeSetting?.otherMenu) {
+        $('.menu-actions').append(this.otherMenu)
+      }
+    },
+    onSearch() {
+      this.showTreeSearch = !this.showTreeSearch
+      localStorage.setItem('showTreeSearch', JSON.stringify(this.showTreeSearch))
+    },
+    onClose() {
+      this.refresh()
+      this.onSearch()
+    },
+    rootNodeAddDom(rootNode) {
+      const { showSearch, showRefresh } = this.treeSetting
+      const searchIcon = `
+        <a class="tree-action-btn" id="search-btn" onclick="onSearch()">
+          <i class="fa fa-search tree-banner-icon"></i>
+        </a>`
+      const refreshIcon = `
+        <a id="tree-refresh" class="tree-action-btn" onclick="refresh()">
+          <i class="fa fa-refresh"></i>
+        </a>`
+      const treeActions = `${showSearch ? searchIcon : ''}${showRefresh ? refreshIcon : ''}`
+      const icons = `
+        <span style="float: right; margin-right: 10px">
+          ${treeActions}
+        </span>`
+      if (rootNode) {
+        const $rootNodeRef = $('#' + rootNode.tId + '_a')
+        $rootNodeRef.after(icons)
+      }
+    },
+    async refresh() {
+      this.treeSearchValue = ''
+      if (this.treeSetting?.callback?.refresh) {
+        await this.treeSetting.callback.refresh()
+      }
+      this.zTree.destroy()
+      setTimeout(() => this.initTree(true), 200)
+    },
+    treeSearch() {
+      const searchIcon = document.getElementById(`searchIcon`)
+      const searchInput = document.getElementById(`searchInput`)
+      searchIcon.classList.toggle('active')
+      searchInput.focus()
+      searchInput.onclick = (e) => {
+        e.stopPropagation()
+      }
+      searchInput.onblur = (e) => {
+        e.stopPropagation()
+        if (!(e.target.value)) {
+          searchIcon.classList.toggle('active')
         }
-      })
-    },
-    refresh: function() {
-      const refreshIconRef = $('#tree-refresh')
-      refreshIconRef.click()
+      }
+      searchInput.oninput = e => this.treeSearchHandle((e.target.value || ''))
     },
+    treeSearchHandle: _.debounce(function(value) {
+      if (this.treeSetting.async.enable) {
+        this.filterAssetsServer(value)
+      } else {
+        this.filterTree(value)
+      }
+    }, 600),
     getCheckedNodes: function() {
       return this.zTree.getCheckedNodes(true)
+    },
+    recurseParent(node) {
+      const parentNode = node.getParentNode()
+      if (parentNode && parentNode.pId) {
+        return [parentNode, ...this.recurseParent(parentNode)]
+      } else if (parentNode) {
+        return [parentNode]
+      } else {
+        return []
+      }
+    },
+    recurseChildren(node) {
+      if (!node.isParent) {
+        return []
+      }
+      const children = node.children
+      if (!children) {
+        return []
+      }
+      let allChildren = []
+      children.forEach((n) => {
+        allChildren = [...children, ...this.recurseChildren(n)]
+      })
+      return allChildren
+    },
+    groupBy(array, filter) {
+      const groups = {}
+      array.forEach(function(o) {
+        const group = JSON.stringify(filter(o))
+        groups[group] = groups[group] || []
+        groups[group].push(o)
+      })
+      return Object.keys(groups).map(function(group) {
+        return groups[group]
+      })
+    },
+    filterTree(keyword, tree = this.zTree) {
+      if (!this.zTree) return
+      const searchNode = tree.getNodesByFilter((node) => node.id === 'search')
+      if (searchNode) tree.removeNode(searchNode[0])
+      const nodes = tree.transformToArray(tree.getNodes())
+      if (!keyword) {
+        tree.showNodes(nodes)
+        return
+      }
+
+      if (!keyword) {
+        if (tree.hiddenNodes) {
+          tree.showNodes(tree.hiddenNodes)
+          tree.hiddenNodes = null
+        }
+        if (tree.expandNodes) {
+          tree.expandNodes.forEach((node) => {
+            if (node.id !== nodes[0].id) {
+              tree.expandNode(node, false)
+            }
+          })
+          tree.expandNodes = null
+        }
+        return null
+      }
+      let shouldShow = []
+      const matchedNodes = tree.getNodesByFilter((node) => {
+        return node.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1
+      })
+
+      if (matchedNodes.length < 1) {
+        let name = this.$t('common.Search')
+        const assetsAmount = matchedNodes.length
+        name = `${name} (${assetsAmount})`
+        const newNode = { id: 'search', name: name, isParent: false, open: false }
+        tree.addNodes(null, newNode)
+      }
+
+      matchedNodes.forEach((node) => {
+        const parents = this.recurseParent(node)
+        const children = this.recurseChildren(node)
+        shouldShow = [...shouldShow, ...parents, ...children, node]
+      })
+
+      tree.hiddenNodes = nodes
+      tree.expandNodes = shouldShow
+      tree.hideNodes(nodes)
+      tree.showNodes(shouldShow)
+      for (const node of shouldShow) {
+        if (node.isParent) {
+          tree.expandNode(node, true)
+        }
+      }
+    },
+    filterAssetsServer(keyword) {
+      if (!this.zTree) return
+      let searchNode = this.zTree.getNodesByFilter((node) => node.id === 'search')
+      if (searchNode) {
+        this.zTree.removeChildNodes(searchNode[0])
+        this.zTree.removeNode(searchNode[0])
+      }
+      const treeNodes = this.zTree.getNodes()
+      if (!keyword) {
+        if (treeNodes.length !== 0) {
+          this.zTree.showNodes(treeNodes)
+        }
+        return
+      }
+      if (treeNodes.length !== 0) {
+        this.zTree.hideNodes(treeNodes)
+      }
+
+      let treeUrl = this.treeSetting.searchUrl ? this.treeSetting.searchUrl : this.treeSetting.treeUrl
+      const filterField = treeUrl.includes('?') ? `&search=${keyword}` : `?search=${keyword}`
+      if (treeUrl.indexOf('assets/nodes/children/tree') > -1) {
+        treeUrl = treeUrl + '&all=all'
+      }
+      const searchUrl = `${treeUrl}${filterField}`
+      this.$axios.get(searchUrl).then(nodes => {
+        let name = this.$t('common.Search')
+        const assetsAmount = nodes.length
+        name = `${name} (${assetsAmount})`
+        const newNode = { id: 'search', name: name, isParent: true, open: true, zAsync: true }
+        searchNode = this.zTree.addNodes(null, newNode)[0]
+        searchNode.zAsync = true
+        this.rootNodeAddDom(searchNode)
+
+        const nodesGroupByOrg = this.groupBy(nodes, (node) => {
+          return node.meta?.data?.org_name
+        })
+
+        for (const item of nodesGroupByOrg) {
+          this.zTree.addNodes(searchNode, item)
+        }
+        searchNode.open = true
+      })
     }
   }
 
 }
 </script>
 
-<style lang='less' scoped>
-  div.rMenu {
-    position: absolute;
-    visibility: hidden;
-    text-align: left;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    float: left;
-    padding: 0 0;
-    margin: 2px 0 0;
-    list-style: none;
-    background-clip: padding-box;
-  }
-  .dataTables_wrapper .dataTables_processing {
-    opacity: .9;
-    border: none;
-  }
-  div.rMenu li{
-    margin: 6px 0;
-    cursor: pointer;
-    list-style: none outside none;
-  }
-  .dropdown-menu {
-    border: medium none;
-    min-width: 160px;
-    background-color: #fff;
-    border-radius: 3px;
-    box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
-    display: block;
-    float: left;
-    font-size: 12px;
-    left: 0;
-    list-style: none outside none;
-    padding: 0;
-    position: absolute;
-    text-shadow: none;
-    top: 100%;
-    z-index: 1000;
-  }
-  .ztree  ::v-deep  .fa-refresh {
-    font: normal normal normal 14px/1 FontAwesome !important;
-  }
-  .dropdown a:hover {
-    background-color: #f1f1f1
-  }
-  .dropdown-menu > li > a {
-    border-radius: 3px;
-    color: inherit;
-    line-height: 25px;
-    margin: 4px;
-    text-align: left;
-    font-weight: normal;
-    display: block;
-    padding: 3px 20px;
-    clear: both;
-    white-space: nowrap;
-  }
-  .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
-    color: #262626;
-    text-decoration: none;
-    background-color: #f5f5f5;
-  }
-  .treebox {
-    height: 80vh;
+<style lang="scss" scoped>
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track:horizontal {
+  background: #FFFFFF;
+  border-radius: 10px;
+}
+
+div.rMenu {
+  position: absolute;
+  visibility: hidden;
+  text-align: left;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  float: left;
+  padding: 0 0;
+  margin: 2px 0 0;
+  list-style: none;
+  background-clip: padding-box;
+}
+
+.dataTables_wrapper .dataTables_processing {
+  opacity: .9;
+  border: none;
+}
+
+div.rMenu li {
+  margin: 6px 0;
+  cursor: pointer;
+  list-style: none outside none;
+}
+
+.dropdown-menu {
+  border: medium none;
+  min-width: 160px;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
+  display: block;
+  float: left;
+  font-size: 12px;
+  left: 0;
+  list-style: none outside none;
+  padding: 0;
+  position: absolute;
+  text-shadow: none;
+  top: 100%;
+  z-index: 1000;
+}
+
+.ztree ::v-deep .fa {
+  font: normal normal normal 14px/1 FontAwesome !important;
+}
+
+.dropdown a:hover {
+  background-color: #f1f1f1
+}
+
+.dropdown-menu > li > a {
+  border-radius: 3px;
+  color: inherit;
+  line-height: 25px;
+  margin: 4px;
+  text-align: left;
+  font-weight: normal;
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  white-space: nowrap;
+}
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+  color: #262626;
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+.treebox {
+  background-color: transparent;
+
+  > > > .ztree {
     overflow: auto;
+    background-color: transparent;
+    height: calc(100vh - 237px);
+
+    li {
+      background-color: transparent !important;
+
+      .button {
+        background-color: rgba(0, 0, 0, 0);
+      }
+
+      ul {
+        background-color: transparent !important;
+      }
+    }
   }
+}
+
+::v-deep #tree-refresh {
+  margin-left: 3px;
+}
+
+::v-deep .tree-banner-icon-zone {
+  position: absolute;
+  right: 7px;
+  height: 30px;
+  overflow: hidden;
+
+  .fa {
+    color: #838385 !important;;
+
+    &:hover {
+      color: #606266 !important;;
+    }
+  }
+}
+
+::v-deep .tree-search {
+  position: relative;
+  top: -2px;
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  border-radius: 12px;
+  vertical-align: sub;
+  transition: .25s;
+  overflow: hidden;
+
+  .fa {
+    width: 13px !important;
+  }
+
+  .fa-search {
+    padding-top: 1px;
+  }
+}
+
+::v-deep .tree-search .tree-banner-icon {
+  position: absolute;
+  top: 4px;
+  left: 6px;
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: transparent !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+::v-deep .tree-search.active {
+  width: 160px;
+  background-color: #ffffff !important;
+}
+
+::v-deep .tree-search.active:hover {
+  border-radius: 12px;
+}
+
+::v-deep .tree-search input {
+  position: relative;
+  left: 20px;
+  width: 133px;
+  height: 100%;
+  background-color: #ffffff !important;
+  color: #606266;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  outline: none;
+}
+
+.tree-header {
+  position: relative;
+
+  .title {
+    font-weight: 500;
+  }
+
+  .content {
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #e0e0e0;
+    border-radius: 3px;
+    padding: 0 5px;
+    box-sizing: border-box;
+    overflow: hidden;
+    cursor: pointer;
+    background-color: #D7D8DC;
+
+    .rotate {
+      transition: all .1 .8s;
+      transform: rotate(-90deg);
+    }
+
+    .fa-caret-down {
+      font-size: 16px;
+    }
+
+    .special {
+      top: 1px !important;
+    }
+  }
+}
+
+.tree-empty {
+  margin-left: 4px;
+}
+
+.fixed-tree-search {
+  margin-bottom: 10px;
+
+  & > > > .el-input__inner {
+    border-radius: 4px;
+    background: #fafafa;
+    padding-right: 32px;
+  }
+
+  & > > > .el-input__suffix {
+    padding-right: 8px;
+  }
+
+  & > > > .el-input__prefix {
+    padding-left: 6px;
+  }
+
+  & > > > .el-input__suffix-inner {
+    line-height: 30px;
+  }
+}
+
+.icon-refresh {
+  border-radius: 4px;
+  padding: 0 1px;
+  z-index: 1;
+
+  &:hover {
+    cursor: pointer;
+    color: #606266;
+    border-color: #d2d2d2;
+    background-color: #e6e6e6;
+  }
+}
+
+.icon {
+  cursor: pointer;
+}
+
+.tree-action-btn {
+  padding: 0 2px;
+  color: red;
+}
 </style>

src/components/DataZTree/index.vue

@@ -72,7 +72,7 @@ export default {
   },
   methods: {
     defaultCallback: function(action) {
-      // console.log(action)
+      // debug(action)
     }
   }
 }

src/components/DetailCard/ItemValue.vue

@@ -1,4 +1,6 @@
 <script type="text/jsx">
+import { toSafeLocalDateStr } from '@/utils/common'
+
 export default {
   name: 'ItemValue',
   props: {
@@ -15,27 +17,60 @@ export default {
       default: null
     }
   },
+  computed: {
+    displayValue() {
+      if ([null, undefined, ''].includes(this.value)) {
+        return '-'
+      }
+      if (typeof this.value === 'boolean') {
+        return this.toChoicesDisplay(this.value)
+      } else if (typeof this.value === 'object') {
+        return this.value
+      } else if (this.value instanceof Array) {
+        return this.value.map(item => {
+          if (typeof item === 'object') {
+            return item.label || item.title
+          } else {
+            return item
+          }
+        }).join(', ')
+      } else if (this.isDatetime(this.value)) {
+        return toSafeLocalDateStr(this.value)
+      } else {
+        return this.value
+      }
+    }
+  },
   methods: {
     toChoicesDisplay(value) {
       if (!value) {
         return this.$t('common.No')
       }
       return this.$t('common.Yes')
+    },
+    isDatetime(value) {
+      if (typeof value !== 'string') {
+        return false
+      }
+      if (value.split(' ').length !== 3) {
+        return false
+      }
+      if (value.split(' ')[1].split(':').length !== 3) {
+        return false
+      }
+      if (isNaN(value) && !isNaN(Date.parse(value))) {
+        return true
+      }
     }
   },
   render(h) {
     if (typeof this.formatter === 'function') {
       return this.formatter(this.item, this.value)
     }
-    if (typeof this.value === 'boolean') {
-      return (
-        <span class='item-value'>{this.toChoicesDisplay(this.value)}</span>
-      )
-    }
     if (this.value instanceof Array) {
       const newArr = this.value || []
       return (
-        <span class='item-value'>
+        <span>
           {
             newArr.map((item, index) => <div key={index}>{item.key}：{item.value} </div>)
           }
@@ -43,15 +78,14 @@ export default {
       )
     }
     return (
-      <span class='item-value'>{this.value}</span>
+      <span>{this.displayValue}</span>
     )
   }
 }
 </script>
 
 <style scoped>
-.item-value {
-  word-break: break-word;
+a {
+  color: var(--color-success);
 }
-
 </style>

src/components/DetailCard/auto.vue

@@ -0,0 +1,173 @@
+<template>
+  <DetailCard v-if="!loading && hasObject && items.length > 0" :items="items" v-bind="$attrs" />
+</template>
+
+<script>
+import DetailCard from './index'
+import { copy, toSafeLocalDateStr } from '@/utils/common'
+
+export default {
+  name: 'AutoDetailCard',
+  components: { DetailCard },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    fields: {
+      type: Array,
+      default: null
+    },
+    excludes: {
+      type: Array,
+      default: null
+    },
+    showUndefine: {
+      type: Boolean,
+      default: true
+    },
+    formatters: {
+      type: Object,
+      default: () => ({})
+    },
+    nested: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      items: [],
+      loading: true
+    }
+  },
+  computed: {
+    iObject() {
+      if (this.nested) {
+        return this.object[this.nested] || {}
+      } else {
+        return this.object
+      }
+    },
+    hasObject() {
+      return Object.keys(this.iObject).length > 0
+    }
+  },
+  async mounted() {
+    await this.optionAndGenFields()
+    this.loading = false
+  },
+  methods: {
+    defaultFormatter(fields) {
+      const formatter = {}
+      for (const name of fields) {
+        formatter[name] = function(item, val) {
+          if (val === '-') {
+            return <span>{'-'}</span>
+          }
+          return (<span style={{ cursor: 'pointer' }} onClick={() => copy(val)}>
+            {val}
+          </span>)
+        }
+      }
+      return formatter
+    },
+    async optionAndGenFields() {
+      const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
+      let remoteMeta = data.actions['GET'] || {}
+      if (this.nested) {
+        remoteMeta = remoteMeta[this.nested]?.children || {}
+      }
+      let fields = this.fields
+      fields = fields || Object.keys(remoteMeta)
+      const defaultExcludes = ['org_id']
+      const excludes = (this.excludes || []).concat(defaultExcludes)
+      fields = fields.filter(item => !excludes.includes(item))
+      const defaultFormatter = this.defaultFormatter(fields)
+      for (const name of fields) {
+        if (typeof name === 'object') {
+          this.items.push(name)
+          continue
+        }
+        const fieldMeta = remoteMeta[name]
+        if (!fieldMeta) {
+          continue
+        }
+        if (fieldMeta['write_only']) {
+          continue
+        }
+
+        let value = this.iObject[name]
+        const label = fieldMeta.label
+
+        if (Array.isArray(value)) {
+          if (typeof value[0] === 'object') {
+            value.forEach(item => {
+              const fieldName = `${name}.${item.name}`
+              if (excludes.includes(fieldName)) {
+                return
+              }
+              this.items.push({
+                key: item.label,
+                value: item.value
+              })
+            })
+          } else if (typeof value[0] === 'string') {
+            value.forEach((item, index) => {
+              let data = {}
+              if (index === 0) {
+                data = {
+                  key: label,
+                  value: value[index]
+                }
+              } else {
+                data = {
+                  value: value[index]
+                }
+              }
+              this.items.push(data)
+            })
+          }
+          continue
+        }
+        if (value === null || value === '') {
+          value = '-'
+        } else if (fieldMeta.type === 'datetime') {
+          value = toSafeLocalDateStr(value)
+        } else if (fieldMeta.type === 'labeled_choice') {
+          value = value?.['label']
+        } else if (fieldMeta.type === 'related_field' || fieldMeta.type === 'nested object') {
+          value = value?.['name']
+        } else if (fieldMeta.type === 'm2m_related_field') {
+          value = value?.map(item => item['name']).join(', ')
+        } else if (fieldMeta.type === 'boolean') {
+          value = value ? this.$t('common.Yes') : this.$t('common.No')
+        }
+
+        if (value === undefined) {
+          if (this.showUndefine) {
+            value = '-'
+          } else {
+            continue
+          }
+        }
+
+        const item = {
+          key: label,
+          value: value,
+          formatter: this.formatters[name] || defaultFormatter[name]
+        }
+        this.items.push(item)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/DetailCard/index.vue

@@ -1,22 +1,11 @@
 <template>
-  <IBox :title="title" fa="fa-info-circle">
-    <div class="content">
-      <el-row v-if="this.$route.params.id" :gutter="10" class="item">
-        <el-col :span="6"><div :style="{ 'text-align': align }" class="item-label"><label>ID: </label></div></el-col>
-        <el-col :span="18"><div class="item-text">{{ this.$route.params.id }}</div></el-col>
-      </el-row>
-      <el-row v-for="item in items" :key="'card-' + item.key" :gutter="10" class="item">
-        <el-col :span="6">
-          <div :style="{ 'text-align': align }" class="item-label"><label>{{ item.key }}: </label></div>
-        </el-col>
-        <el-col :span="18">
-          <div class="item-text">
-            <ItemValue :value="item.value" v-bind="item" />
-          </div>
-        </el-col>
-      </el-row>
-      <slot />
-    </div>
+  <IBox :title="title" :fa="fa">
+    <el-form class="content" label-position="left" label-width="25%">
+      <el-form-item v-for="item in items" :key="item.key" :label="item.key">
+        <ItemValue class="item-value" :value="item.value" v-bind="item" />
+      </el-form-item>
+    </el-form>
+    <slot />
   </IBox>
 </template>
 
@@ -34,6 +23,10 @@ export default {
         return this.$t('common.BasicInfo')
       }
     },
+    fa: {
+      type: String,
+      default: 'fa-info-circle'
+    },
     items: {
       type: Array,
       default: () => []
@@ -46,7 +39,42 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .el-card__body {
+    padding: 20px 40px;
+  }
+
+  .el-form-item {
+    border-bottom: 1px dashed #EBEEF5;
+    padding: 1px 0;
+    margin-bottom: 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+    }
+
+    >>> .el-form-item__label {
+      padding-right: 8%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    >>> .el-form-item__content {
+      font-size: 13px;
+    }
+
+    >>> .el-tag--mini {
+      margin-right: 3px;
+    }
+  }
+
+  .item-value span {
+    word-break: break-word;
+  }
   .content {
     font-size: 13px;
     line-height: 2.5;

src/components/Dialog/DiffDetail.vue

@@ -0,0 +1,105 @@
+<template>
+  <Dialog
+    v-if="detailVisible"
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="title"
+    :visible.sync="detailVisible"
+  >
+    <div>
+      <div v-if="isEmpty()" style="text-align: center">
+        {{ this.$tc('common.NoContent') }}
+      </div>
+      <div v-else>
+        <el-table
+          :data="diff"
+          class="diffTable"
+        >
+          <el-table-column
+            :label="$tc('audits.ChangeField')"
+            :prop="fieldName"
+            show-overflow-tooltip
+            width="100"
+          />
+          <el-table-column
+            :label="$tc('audits.BeforeChange')"
+            :prop="leftKeyName"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            :label="$tc('audits.AfterChange')"
+            :prop="rightKeyName"
+            show-overflow-tooltip
+          />
+        </el-table>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  name: 'DiffDetail',
+  components: {
+    Dialog
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => ''
+    },
+    fieldName: {
+      type: String,
+      default: () => 'field'
+    },
+    leftKeyName: {
+      type: String,
+      default: () => 'before'
+    },
+    rightKeyName: {
+      type: String,
+      default: () => 'after'
+    }
+  },
+  data() {
+    return {
+      diff: [],
+      detailVisible: false
+    }
+  },
+  methods: {
+    isEmpty() {
+      const content = this.diff
+      return !content || JSON.stringify(content) === '{}'
+    },
+    show(data) {
+      this.diff = data
+      this.detailVisible = true
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+  .el-tag {
+    width: 100%;
+    white-space: normal;
+    height: auto;
+  }
+
+  .el-table::before {
+    background-color: inherit;
+  }
+
+  .diffTable {
+    width: 100%;
+    max-height: 80vh;
+
+    & >>> td {
+      padding: 5px 0 !important;
+    }
+  }
+</style>

src/components/Dialog/index.vue

@@ -1,17 +1,21 @@
 <template>
   <el-dialog
+    :append-to-body="true"
+    :modal-append-to-body="true"
     :title="title"
     :top="top"
+    :width="iWidth"
     class="dialog"
     v-bind="$attrs"
-    append-to-body
     v-on="$listeners"
   >
     <slot />
     <div slot="footer" class="dialog-footer">
       <slot name="footer">
-        <el-button v-if="showCancel" size="small" @click="onCancel">{{ cancelTitle }}</el-button>
-        <el-button v-if="showConfirm" type="primary" size="small" :loading="loadingStatus" @click="onConfirm">{{ confirmTitle }}</el-button>
+        <el-button v-if="showCancel && showButtons" @click="onCancel">{{ cancelTitle }}</el-button>
+        <el-button v-if="showConfirm && showButtons" :loading="loadingStatus" type="primary" @click="onConfirm">
+          {{ confirmTitle }}
+        </el-button>
       </slot>
     </div>
   </el-dialog>
@@ -25,6 +29,24 @@ export default {
       type: String,
       default: 'Title'
     },
+    top: {
+      type: String,
+      default: '3vh'
+    },
+    width: {
+      type: String,
+      default: '60%'
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    },
+    confirmTitle: {
+      type: String,
+      default() {
+        return this.$t('common.Confirm')
+      }
+    },
     showCancel: {
       type: Boolean,
       default: true
@@ -35,11 +57,7 @@ export default {
         return this.$t('common.Cancel')
       }
     },
-    top: {
-      type: String,
-      default: '3vh'
-    },
-    showConfirm: {
+    showButtons: {
       type: Boolean,
       default: true
     },
@@ -47,15 +65,17 @@ export default {
       type: Boolean,
       default: false
     },
-    confirmTitle: {
+    maxWidth: {
       type: String,
-      default() {
-        return this.$t('common.Confirm')
-      }
+      default: '1200px'
     }
   },
   data() {
-    return {
+    return {}
+  },
+  computed: {
+    iWidth() {
+      return this.$store.getters.isMobile ? '80%' : this.width
     }
   },
   methods: {
@@ -70,12 +90,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .dialog >>> .el-dialog__header {
-    /*padding-top: 10px;*/
+  .dialog >>> .el-dialog {
+    border-radius: 0.3em;
+    max-width: 1500px;
+
+    .el-icon-circle-check {
+      display: none;
+    }
+
+    &__header {
+      box-sizing: border-box;
+      padding: 15px 22px;
+      border-bottom: 1px solid #dee2e6;
+      font-weight: 400;
+    }
+
+    &__body {
+      padding: 20px 30px;
+
+      &:has(.el-table) {
+        background: #f3f3f4;
+      }
+    }
+
+    &__footer {
+      border-top: 1px solid #dee2e6;
+      padding: 16px;
+      justify-content: flex-end;
+    }
   }
 
-  .dialog-footer {
-    padding-right: 20px;
+  .dialog-footer >>> button.el-button {
+    font-size: 13px;
+    padding: 10px 20px;
   }
-
 </style>

src/components/FormFields/BasicTree.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-tree
+    :data="iTree"
+    :default-checked-keys="iValue"
+    :default-expand-all="true"
+    :default-expanded-keys="iValue"
+    :props="defaultProps"
+    :render-content="renderContent"
+    class="el-tree-custom"
+    node-key="value"
+    show-checkbox
+    @check="handleCheckChange"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    tree: {
+      type: Array,
+      default: () => []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  computed: {
+    iValue() {
+      return this.value.map(item => {
+        if (item.value) {
+          return item.value
+        }
+        return item
+      })
+    },
+    iTree() {
+      if (!this.readonly) {
+        return this.tree
+      } else {
+        return this.setTreeReadonly(this.tree)
+      }
+    }
+  },
+  methods: {
+    handleCheckChange(node, { checkedNodes }) {
+      const checkedKeys = checkedNodes
+        .filter(item => !item.children)
+        .map(node => node.value)
+      this.$emit('input', checkedKeys)
+    },
+    setTreeReadonly(tree) {
+      return tree.map(item => {
+        item.disabled = true
+        if (item.children) {
+          item.children = this.setTreeReadonly(item.children)
+        }
+        return item
+      })
+    },
+    renderContent(h, { node, data, store }) {
+      let label = node.label
+      let helpText = ''
+      const regex = /(.*?)\s*\((.*?)\)/
+      const match = label.match(regex)
+      if (match) {
+        label = match[1]
+        helpText = match[2]
+      }
+
+      return (
+        <span >
+          <span>{label} </span>
+          {helpText
+            ? (<el-tooltip content={helpText} placement='top'>
+              <i class='fa fa-info-circle'></i>
+            </el-tooltip>) : ''}
+        </span>)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.el-tree-custom >>> {
+  .help-tips {
+    margin-left: 10px;
+    font-size: 12px;
+    color: #999;
+  }
+  .el-tree-node__content:hover {
+    background-color: inherit;
+  }
+}
+
+</style>

src/components/FormFields/CodeEditor.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="code-editor" style="font-size: 12px">
+    <div class="toolbar">
+      <div
+        v-for="(item,index) in toolbar.left"
+        :key="index"
+        style="display: inline-block; margin: 0 2px"
+      >
+        <el-tooltip :content="item.tip" :disabled="!item.tip" placement="top">
+          <el-button
+            v-if="item.type ==='button'"
+            :disabled="item.disabled"
+            :type="item.el&&item.el.type"
+            size="mini"
+            @click="item.callback()"
+          >
+            <i :class="item.icon" style="margin-right: 4px;" />{{ item.name }}
+          </el-button>
+
+          <el-autocomplete
+            v-if="item.type === 'input' && item.el.autoComplete"
+            v-model="item.value"
+            :placeholder="item.placeholder"
+            :fetch-suggestions="item.el.query"
+            class="inline-input"
+            size="mini"
+            @select="item.callback(item.value)"
+            @change="item.callback(item.value)"
+          />
+
+          <div v-if="item.type==='select' && item.el && item.el.create" class="select-content">
+            <span class="filter-label">
+              {{ item.name }}:
+            </span>
+            <el-select
+              v-if="item.type==='select' && item.el && item.el.create"
+              :key="index"
+              v-model="item.value"
+              :allow-create="item.el.create || false"
+              :filterable="item.el.create || false"
+              :multiple="item.el.multiple"
+              :placeholder="item.name"
+              class="autoWidth-select"
+              default-first-option
+              size="mini"
+              @change="item.callback(item.value)"
+            >
+              <template slot="prefix">
+                {{ item.label + ':' + item.value }}
+              </template>
+              <el-option
+                v-for="(option,id) in item.options"
+                :key="id"
+                :label="option.label"
+                :title="option.value"
+                :value="option.value"
+              />
+            </el-select>
+          </div>
+          <el-dropdown
+            v-if="item.type==='select' && (!item.el || !item.el.create) "
+            trigger="click"
+            @command="(command) => {
+              item.value= command
+              item.callback(command)
+            }"
+          >
+            <el-button size="mini" type="default">
+              <b>{{ item.name }}:</b> {{ getLabel(item.value, item.options) }} <i
+                class="el-icon-arrow-down el-icon--right"
+              />
+            </el-button>
+            <el-dropdown-menu v-slot="dropdown">
+              <el-dropdown-item v-for="(option,i) in item.options" :key="i" :command="option.value">
+                {{ option.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <el-switch
+            v-if="item.type === 'switch'"
+            v-model="item.value"
+            :active-text="item.name"
+            :disabled="item.disabled"
+            @change="item.callback( item.value)"
+          />
+        </el-tooltip>
+      </div>
+
+      <div class="right-side" style="float: right">
+        <div
+          v-for="(item,index) in toolbar.right"
+          :key="index"
+          style="display: inline-block"
+        >
+          <el-tooltip :content="item.tip">
+            <el-button
+              v-if="item.type ==='button'"
+              :disabled="item.disabled"
+              size="mini"
+              style="background-color: transparent"
+              type="default"
+              @click="item.callback()"
+            >
+              <i v-if="item.icon.startsWith('fa')" :class="'fa ' + item.icon" />
+              <svg-icon v-else :icon-class="item.icon" style="font-size: 14px;" />
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <codemirror ref="myCm" v-model="iValue" :options="iOptions" class="editor" />
+  </div>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+
+import 'codemirror/mode/shell/shell'
+import 'codemirror/mode/powershell/powershell'
+import 'codemirror/mode/python/python'
+import 'codemirror/mode/yaml/yaml'
+import 'codemirror/mode/ruby/ruby' // theme css
+import 'codemirror/theme/base16-light.css'
+import 'codemirror/theme/idea.css'
+import 'codemirror/theme/mbo.css'
+import 'codemirror/theme/duotone-light.css'
+import 'codemirror/lib/codemirror.css'
+
+export default {
+  components: {
+    codemirror
+  },
+  props: {
+    toolbar: {
+      type: [Array, Object],
+      default: () => []
+    },
+    value: {
+      type: [String, Object],
+      default: () => ''
+    },
+    options: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    iValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('update:value', val)
+        this.$emit('change', val)
+      }
+    },
+    iOptions() {
+      const defaultOptions = {
+        tabSize: 4,
+        mode: 'shell',
+        lineNumbers: true,
+        theme: 'idea',
+        placeholder: 'Code goes here...',
+        autofocus: true
+      }
+      return Object.assign(defaultOptions, this.options)
+    }
+  },
+  methods: {
+    getLabel(value, items) {
+      for (const item of items) {
+        if (item.value === value) {
+          return item.label
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  border: solid 1px #f3f3f3;
+}
+
+.toolbar {
+  height: 100%;
+  width: 100%;
+  line-height: 29px;
+  vertical-align: bottom;
+  display: inline-block;
+  padding: 3px 3px 3px 0;
+  margin-bottom: 5px;
+}
+
+> > > .CodeMirror pre.CodeMirror-line,
+> > > .CodeMirror-linenumber.CodeMirror-gutter-elt {
+  line-height: 18px !important;
+}
+
+.runas-input {
+  height: 28px;
+
+  > > > {
+    .el-select {
+      width: 100px;
+    }
+  }
+}
+
+.right-side {
+  .el-button {
+    border: none;
+    padding: 2px;
+    font-size: 14px;
+    width: 26px;
+    height: 26px;
+    color: #888;
+    background-color: transparent;
+    margin-left: 2px;
+  }
+}
+
+.autoWidth-select {
+  min-width: 100px;
+}
+
+.autoWidth-select > > > .el-input__prefix {
+  position: relative;
+  left: 0px;
+  box-sizing: border-box;
+  height: 28px;
+  line-height: 28px;
+  visibility: hidden;
+}
+
+.autoWidth-select > > > input {
+  position: absolute;
+  padding-left: 0px;
+  border: none;
+  color: #606266;
+  background-color: #e6e6e6;
+  font-size: 12px;
+  font-weight: 470;
+  line-height: 27px;
+}
+
+> > > .el-select {
+  top: -1px;
+
+  .el-input .el-select__caret {
+    color: #7a7c7f;
+  }
+}
+
+> > > .el-button.el-button--default {
+  background-color: #e6e6e6;
+}
+
+.filter-label {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.select-content {
+  display: inline-block;
+  position: relative;
+  top: 1px;
+  height: 28px;
+  line-height: 28px;
+  padding-left: 15px;
+  font-size: 0;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  background-color: #e6e6e6;
+}
+</style>

src/components/FormFields/DatetimeRangePicker.vue

@@ -2,9 +2,9 @@
   <el-date-picker
     v-model="value"
     type="datetimerange"
-    :range-separator="this.$t('common.To')"
-    :start-placeholder="this.$t('common.DateStart')"
-    :end-placeholder="this.$t('common.DateEnd')"
+    :range-separator="$tc('common.To')"
+    :start-placeholder="$tc('common.DateStart')"
+    :end-placeholder="$tc('common.DateEnd')"
     size="small"
     :clearable="false"
     class="datepicker"
@@ -41,37 +41,23 @@ export default {
         shortcuts: [
           {
             text: this.$t('common.DateLast24Hours'),
-            onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24)
-              picker.$emit('pick', [start, end])
-            }
+            onClick: (picker) => this.onShortcutClick(picker, 1)
           },
           {
             text: this.$t('common.DateLastWeek'),
-            onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-              picker.$emit('pick', [start, end])
-            }
+            onClick: (picker) => this.onShortcutClick(picker, 7)
           }, {
             text: this.$t('common.DateLastMonth'),
-            onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-              picker.$emit('pick', [start, end])
-            }
+            onClick: (picker) => this.onShortcutClick(picker, 30)
           }, {
             text: this.$t('common.DateLast3Months'),
-            onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-              picker.$emit('pick', [start, end])
-            }
+            onClick: (picker) => this.onShortcutClick(picker, 90)
+          }, {
+            text: this.$t('common.DateLastHarfYear'),
+            onClick: (picker) => this.onShortcutClick(picker, 183)
+          }, {
+            text: this.$t('common.DateLastYear'),
+            onClick: (picker) => this.onShortcutClick(picker, 365)
           }
         ]
       }
@@ -86,24 +72,38 @@ export default {
         this.$log.debug('Date change: ', val)
         this.$emit('dateChange', val)
       }
+    },
+    onShortcutClick(picker, day) {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * day)
+      picker.$emit('pick', [start, end])
     }
   }
 }
 </script>
 
-<style lang='less' scoped>
-  .datepicker{
+<style lang='scss' scoped>
+  .datepicker {
     width: 233px;
+
+    & >>> .el-range__icon {
+      margin-top: 2px;
+      margin-right: 3px;
+    }
+
+    & >>> .el-range-input {
+      width: 49%;
+    }
   }
-  .el-input__inner{
+
+  .el-input__inner {
     border: 1px solid #dcdee2;
     border-radius: 3px;
-    height: 36px;
+    height: 32px;
   }
-  /*.el-date-editor  ::v-deep  .el-input__icon{*/
-  /*  line-height: 28px;*/
-  /*}*/
-  .el-date-editor  ::v-deep  .el-range-separator{
+
+  .el-date-editor ::v-deep .el-range-separator {
     line-height: 28px;
   }
 </style>

src/components/FormFields/DynamicInput.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div v-for="(command, index) in value" :key="index" :prop="'value.' + index + '.value'" class="command-item">
+      <el-input v-model="value[index]" size="mini">
+        <template slot="prepend"> {{ inputTitle + ' ' + (index + 1) }}</template>
+      </el-input>
+      <div class="input-button">
+        <el-button
+          :disabled="deleteDisabled()"
+          icon="el-icon-minus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="danger"
+          @click="handleDelete(command)"
+        />
+        <el-button
+          v-if="index === value.length - 1"
+          icon="el-icon-plus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="primary"
+          @click="handleAdd()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      default: () => ['']
+    },
+    inputTitle: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleDelete(command) {
+      const index = this.value.indexOf(command)
+      if (index !== -1) {
+        this.value.splice(index, 1)
+      }
+    },
+    handleAdd() {
+      this.value.push('')
+    },
+    deleteDisabled() {
+      return this.value.length <= 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-input {
+  width: 85%;
+}
+.command-item {
+  display: flex;
+  margin: 5px 0;
+}
+.input-button {
+  margin-top: 2px;
+  display: flex;
+  margin-left: 20px
+}
+.input-button ::v-deep .el-button.el-button--mini {
+  height: 25px;
+  padding: 5px;
+}
+.el-input-group__append .el-button {
+  font-size: 14px;
+  color: #1a1a1a;
+  padding: 9px 20px;
+}
+</style>

src/components/FormFields/JSONManyToManySelect/AttrFormDialog.vue

@@ -0,0 +1,161 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-buttons="false"
+    :title="$tc('common.SelectAttrs')"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <div v-if="!loading">
+      <DataForm
+        :form="form"
+        class="attr-form"
+        v-bind="formConfig"
+        @submit="onAttrDialogConfirm"
+      />
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import DataForm from '@/components/DataForm/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
+import ValueField from '@/components/FormFields/JSONManyToManySelect/ValueField.vue'
+import { attrMatchOptions, typeMatchMapper } from './const'
+
+export default {
+  name: 'AttrFormDialog',
+  components: { Dialog, DataForm },
+  props: {
+    attrs: {
+      type: Array,
+      default: () => ([])
+    },
+    attrsAdded: {
+      type: Array,
+      default: () => ([])
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      loading: true,
+      currentValue: '',
+      formConfig: {
+        // 为了方便更新，避免去取 fields 的索引
+        hasSaveContinue: false,
+        fields: [
+          {
+            id: 'name',
+            label: this.$t('common.AttrName'),
+            type: 'select',
+            options: this.attrs.map(attr => {
+              let disabled = this.attrsAdded.includes(attr.name) && this.form.name !== attr.name
+              if (attr.disabled) {
+                disabled = true
+              }
+              return { label: attr.label, value: attr.name, disabled: disabled }
+            }),
+            on: {
+              change: ([val], updateForm) => {
+                // 变化会影响 match 的选项
+                const attr = this.attrs.find(attr => attr.name === val)
+                if (!attr) return
+                const matchOption = vm.updateMatchOptions(attr)
+                setTimeout(() => {
+                  updateForm({ match: matchOption.value })
+                }, 10)
+              }
+            }
+          },
+          {
+            id: 'match',
+            label: this.$t('common.Match'),
+            type: 'select',
+            options: attrMatchOptions,
+            on: {
+              change: ([value], updateForm) => {
+                // 变化会影响 value 的选项
+                setTimeout(() => {
+                  this.formConfig.fields[2].el.match = value
+                }, 10)
+              }
+            }
+          },
+          {
+            id: 'value',
+            label: this.$t('common.AttrValue'),
+            component: ValueField,
+            el: {
+              match: attrMatchOptions[0].value,
+              attr: this.attrs[0]
+            },
+            on: {
+              input: ([value], updateForm) => {
+                vm.currentValue = value
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    if (this.form.index === undefined || this.form.index === -1) {
+      Object.assign(this.form, this.getDefaultAttrForm())
+    }
+    this.updateMatchOptions()
+    this.$log.debug('Attr Form config: ', this.formConfig)
+    this.loading = false
+  },
+  methods: {
+    getDefaultAttrForm() {
+      const attrKeys = this.attrs.map(attr => attr.name)
+      const diff = attrKeys.filter(attr => !this.attrsAdded.includes(attr))
+      let name = this.attrs[0].name
+      if (diff.length > 0) {
+        name = diff[0]
+      }
+      return {
+        name: name,
+        match: 'exact',
+        value: '',
+        rel: 'and'
+      }
+    },
+    onAttrDialogConfirm(form) {
+      this.$emit('confirm', form)
+    },
+    updateMatchOptions(attr) {
+      if (!attr) {
+        attr = this.attrs.find(attr => attr.name === this.form.name)
+      }
+      if (!attr) return
+      const attrType = attr.type || 'str'
+      const matchSupports = typeMatchMapper[attrType]
+      attrMatchOptions.forEach((option) => {
+        option.hidden = !matchSupports.includes(option.value)
+      })
+      this.formConfig.fields[2].el.attr = attr
+      const supports = attrMatchOptions.filter(option => !option.hidden)
+      const matchOption = supports.find(item => item.value === this.form.match) || supports[0]
+      this.formConfig.fields[2].el.match = matchOption.value
+      return matchOption
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.attr-form {
+  >>> .el-select {
+    width: 100%;
+  }
+}
+</style>
+

src/components/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue

@@ -0,0 +1,77 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-buttons="false"
+    :title="$tc('common.MatchResult')"
+    :v-bind="$attrs"
+    :v-on="$listeners"
+    :visible.sync="iVisible"
+  >
+    <ListTable v-bind="attrMatchTableConfig" />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import ListTable from '@/components/ListTable/index.vue'
+
+export default {
+  name: 'AttrMatchResultDialog',
+  components: { ListTable, Dialog },
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    attrs: {
+      type: Array,
+      default: () => ([])
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      attrMatchTableConfig: {
+        headerActions: {
+          hasCreate: false,
+          hasImport: false,
+          hasExport: false,
+          hasMoreActions: false
+        },
+        tableConfig: {
+          url: this.url,
+          columns: this.attrs.filter(item => item.inTable).map(item => {
+            return {
+              prop: item.name,
+              label: item.label,
+              formatter: item.formatter
+            }
+          }),
+          columnsMeta: {
+            actions: {
+              has: false
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      set(val) {
+        this.$emit('update:visible', val)
+      },
+      get() {
+        return this.visible
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/FormFields/JSONManyToManySelect/ValueField.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="!loading">
+    <TagInput v-if="type === 'array'" :value="iValue" @input="handleInput" />
+    <Select2 v-else-if="type === 'select'" :value="iValue" v-bind="attr.el" @change="handleInput" @input="handleInput" />
+    <Switcher v-else-if="type === 'bool'" :value="iValue" @change="handleInput" @input="handleInput" />
+    <el-input v-else :value="iValue" @input="handleInput" />
+  </div>
+</template>
+
+<script>
+import TagInput from '@/components/FormFields/TagInput.vue'
+import Select2 from '@/components/FormFields/Select2.vue'
+import Switcher from '@/components/FormFields/Switcher.vue'
+
+export default {
+  name: 'ValueField',
+  components: { Switcher, TagInput, Select2 },
+  props: {
+    value: {
+      type: [String, Number, Boolean, Array, Object],
+      default: () => ''
+    },
+    match: {
+      type: String,
+      default: 'exact'
+    },
+    attr: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      type: 'string'
+    }
+  },
+  computed: {
+    iValue: {
+      get() {
+        const multipleTypes = ['array', 'select']
+        let newValue = this.value
+        if (multipleTypes.includes(this.type)) {
+          if (!Array.isArray(this.value)) {
+            newValue = []
+          }
+        } else if (this.type === 'bool') {
+          newValue = !!this.value
+        } else {
+          if (Array.isArray(this.value)) {
+            newValue = ''
+          } else {
+            newValue = this.value.toString()
+          }
+        }
+        if (this.value !== newValue) {
+          this.handleInput(newValue)
+        }
+        return newValue
+      }
+    }
+  },
+  watch: {
+    match() {
+      this.changeValueType()
+    },
+    attr: {
+      handler() {
+        this.changeValueType()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.changeValueType()
+  },
+  methods: {
+    handleInput(value) {
+      this.$emit('input', value)
+    },
+    changeValueType() {
+      this.loading = true
+      this.type = this.getType()
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    getType() {
+      const attrType = this.attr.type || 'str'
+      this.$log.debug('Value field attr type: ', attrType, this.attr, this.match)
+      if (attrType === 'm2m') {
+        return 'select'
+      } else if (attrType === 'bool') {
+        return 'bool'
+      } else if (attrType === 'select') {
+        return 'select'
+      }
+      if (['in', 'ip_in'].includes(this.match)) {
+        return 'array'
+      } else {
+        return 'string'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/FormFields/JSONManyToManySelect/ValueFormatter.vue

@@ -0,0 +1,90 @@
+<template>
+  <span v-if="attr.type === 'bool'">
+    <i v-if="value" class="fa fa-check text-primary" />
+    <i v-else class="fa fa-times text-danger" />
+  </span>
+  <span v-else :title="value">
+    {{ value }}
+  </span>
+</template>
+
+<script>
+import BaseFormatter from '@/components/TableFormatters/base.vue'
+import { setUrlParam } from '@/utils/common'
+
+export default {
+  name: 'ValueFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          attrs: {}
+        }
+      }
+    }
+  },
+  data() {
+    const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    return {
+      formatterArgs: formatterArgs,
+      loading: true,
+      attr: {},
+      value: ''
+    }
+  },
+  watch: {
+    cellValue: {
+      handler() {
+        this.getValue()
+      },
+      deep: true
+    },
+    formatterArgs: {
+      handler() {
+        this.getValue()
+      },
+      deep: true
+    },
+    row: {
+      handler() {
+        this.getValue()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getValue()
+    }, 100)
+  },
+  methods: {
+    async getValue() {
+      this.attr = this.formatterArgs.attrs.find(attr => attr.name === this.row.name)
+      const match = this.row.match
+      this.$log.debug('ValueFormatter: ', this.attr, this.row.name)
+      if (this.attr.type === 'm2m') {
+        const url = setUrlParam(this.attr.el.url, 'ids', this.cellValue.join(','))
+        const data = await this.$axios.get(url) || []
+        if (data.length > 0) {
+          const displayField = this.attr.el.displayField || 'name'
+          this.value = data.map(item => item[displayField]).join(', ')
+        }
+      } else if (this.attr.type === 'select') {
+        const options = this.attr.el.options || []
+        const items = options.filter(item => this.cellValue.includes(item.value))
+        this.value = items.map(item => item.label).join(', ')
+      } else if (['in', 'ip_in'].includes(match)) {
+        this.value = this.cellValue.join(', ')
+      } else {
+        this.value = this.cellValue
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/FormFields/JSONManyToManySelect/const.js

@@ -0,0 +1,25 @@
+import i18n from '@/i18n/i18n'
+
+export const strMatchValues = ['exact', 'not', 'in', 'contains', 'startswith', 'endswith', 'regex']
+export const typeMatchMapper = {
+  str: strMatchValues,
+  bool: ['exact', 'not'],
+  m2m: ['m2m'],
+  ip: [...strMatchValues, 'ip_in'],
+  int: [...strMatchValues, 'gte', 'lte'],
+  select: ['in']
+}
+
+export const attrMatchOptions = [
+  { label: i18n.t('common.Equal'), value: 'exact' },
+  { label: i18n.t('common.NotEqual'), value: 'not' },
+  { label: i18n.t('common.MatchIn'), value: 'in' },
+  { label: i18n.t('common.Contains'), value: 'contains' },
+  { label: i18n.t('common.Startswith'), value: 'startswith' },
+  { label: i18n.t('common.Endswith'), value: 'endswith' },
+  { label: i18n.t('common.Regex'), value: 'regex' },
+  { label: i18n.t('common.BelongTo'), value: 'm2m' },
+  { label: i18n.t('common.IPMatch'), value: 'ip_in' },
+  { label: i18n.t('common.GreatEqualThan'), value: 'gte' },
+  { label: i18n.t('common.LessEqualThan'), value: 'lte' }
+]

src/components/FormFields/JSONManyToManySelect/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <el-radio-group v-model="iValue.type" @input="handleTypeChange">
+      <el-radio v-for="tp of types" :key="tp.name" :label="tp.name">
+        {{ tp.label }}
+      </el-radio>
+    </el-radio-group>
+    <Select2 v-if="iValue.type === 'ids'" v-model="ids" v-bind="select2" @change="onChangeEmit" />
+    <div v-if="iValue.type === 'attrs'">
+      <DataTable :config="tableConfig" class="attr-list" />
+      <div class="actions">
+        <el-button size="mini" type="primary" @click="handleAttrAdd">
+          {{ $t('common.Add') }}
+        </el-button>
+        <span style="padding-left: 10px; font-size: 13px">
+          <span class="help-tips; ">{{ $t('common.MatchedCount') }}:</span>
+          <a class="text-link" style="padding: 0 5px;" @click="showAttrMatchTable">{{ attrMatchCount }}</a>
+        </span>
+      </div>
+    </div>
+
+    <AttrFormDialog
+      v-if="attrFormVisible"
+      :attrs="attrs"
+      :attrs-added="attrsAdded"
+      :form="attrForm"
+      :visible.sync="attrFormVisible"
+      @confirm="handleAttrDialogConfirm"
+    />
+    <AttrMatchResultDialog
+      v-if="attrMatchTableVisible"
+      :attrs="attrs"
+      :url="attrMatchTableUrl"
+      :visible.sync="attrMatchTableVisible"
+    />
+  </div>
+</template>
+
+<script>
+import Select2 from '../Select2.vue'
+import DataTable from '@/components/DataTable/index.vue'
+import ValueFormatter from './ValueFormatter.vue'
+import AttrFormDialog from './AttrFormDialog.vue'
+import AttrMatchResultDialog from './AttrMatchResultDialog.vue'
+import { setUrlParam } from '@/utils/common'
+import { attrMatchOptions } from './const'
+import { toM2MJsonParams } from '@/utils/jms'
+
+export default {
+  name: 'JSONManyToManySelect',
+  components: { AttrFormDialog, DataTable, Select2, AttrMatchResultDialog },
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return {
+          type: 'all'
+        }
+      }
+    },
+    select2: {
+      type: Object,
+      required: true
+    },
+    attrs: {
+      type: Array,
+      default: () => ([])
+    },
+    resource: {
+      type: String,
+      default: ''
+    },
+    attrTableColumns: {
+      type: Array,
+      default: () => (['name'])
+    }
+  },
+  data() {
+    const tableFormatter = (colName) => {
+      return (row, col, cellValue) => {
+        const value = cellValue
+        switch (colName) {
+          case 'name':
+            return this.attrs.find(attr => attr.name === value)?.label || value
+          case 'match':
+            return attrMatchOptions.find(opt => opt.value === value).label || value
+          case 'value':
+            return Array.isArray(value) ? value.join(', ') : value
+          default:
+            return value
+        }
+      }
+    }
+    return {
+      iValue: Object.assign({ type: 'all' }, this.value),
+      attrFormVisible: false,
+      attrForm: {},
+      attrMatchCount: 0,
+      attrMatchTableVisible: false,
+      attrMatchTableUrl: '',
+      ids: this.value.ids || [],
+      editIndex: -1,
+      types: [
+        { name: 'all', label: this.$t('common.All') + this.resource },
+        { name: 'ids', label: this.$t('common.Spec') + this.resource },
+        { name: 'attrs', label: this.$t('common.SelectByAttr') }
+      ],
+      tableConfig: {
+        columns: [
+          { prop: 'name', label: this.$t('common.AttrName'), formatter: tableFormatter('name') },
+          { prop: 'match', label: this.$t('common.Match'), formatter: tableFormatter('match') },
+          { prop: 'value', label: this.$t('common.AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
+          { prop: 'action', label: this.$t('common.Action'), align: 'center', width: '120px', formatter: (row, col, cellValue, index) => {
+            return (
+              <div className='input-button'>
+                <el-button
+                  icon='el-icon-edit'
+                  size='mini'
+                  style={{ 'flexShrink': 0 }}
+                  type='primary'
+                  onClick={this.handleAttrEdit({ row, col, cellValue, index })}
+                />
+                <el-button
+                  icon='el-icon-minus'
+                  size='mini'
+                  style={{ 'flexShrink': 0 }}
+                  type='danger'
+                  onClick={this.handleAttrDelete({ row, col, cellValue, index })}
+                />
+              </div>
+            )
+          } }
+        ],
+        totalData: this.value.attrs || [],
+        hasPagination: false
+      }
+    }
+  },
+  computed: {
+    attrsAdded() {
+      return this.tableConfig.totalData.map(item => item.name)
+    }
+  },
+  watch: {
+    attrFormVisible(val) {
+      if (!val) {
+        this.getAttrsCount()
+      }
+    }
+  },
+  mounted() {
+    if (this.value.type === 'attrs') {
+      this.getAttrsCount()
+    }
+    this.$emit('input', this.iValue)
+  },
+  methods: {
+    showAttrMatchTable() {
+      const [key, value] = this.getAttrFilterKey()
+      this.attrMatchTableUrl = setUrlParam(this.select2.url, key, value)
+      this.attrMatchTableVisible = true
+    },
+    getAttrFilterKey() {
+      if (this.tableConfig.totalData.length === 0) return ''
+      let attrFilter = { type: 'attrs', attrs: this.tableConfig.totalData }
+      attrFilter = toM2MJsonParams(attrFilter)
+      return attrFilter
+    },
+    getAttrsCount() {
+      const attrFilter = this.getAttrFilterKey()
+      if (!attrFilter) {
+        this.attrMatchCount = 0
+        return
+      }
+      const [key, value] = attrFilter
+      let url = setUrlParam(this.select2.url, key, value)
+      url = setUrlParam(url, 'limit', 1)
+      return this.$axios.get(url).then(res => {
+        this.attrMatchCount = res.count
+      })
+    },
+    handleAttrEdit({ row, index }) {
+      return () => {
+        this.attrForm = Object.assign({ index }, row)
+        this.editIndex = index
+        this.attrFormVisible = true
+      }
+    },
+    handleAttrDelete({ index }) {
+      return () => {
+        this.tableConfig.totalData.splice(index, 1)
+        this.getAttrsCount()
+      }
+    },
+    handleAttrAdd() {
+      this.attrForm = {}
+      this.editIndex = -1
+      this.attrFormVisible = true
+    },
+    onChangeEmit() {
+      const tp = this.iValue.type
+      this.handleTypeChange(tp)
+    },
+    handleTypeChange(val) {
+      switch (val) {
+        case 'ids':
+          this.$emit('input', { type: 'ids', ids: this.ids })
+          break
+        case 'attrs':
+          this.$emit('input', { type: 'attrs', attrs: this.tableConfig.totalData })
+          break
+        default:
+          this.$emit('input', { type: 'all' })
+          break
+      }
+    },
+    handleAttrDialogConfirm(form) {
+      if (this.editIndex > -1) {
+        this.tableConfig.totalData.splice(this.editIndex, 1)
+      }
+      const allAttrs = this.tableConfig.totalData
+      // 因为可能 attr 的 name 会重复，所以需要先删除再添加
+      const setIndex = allAttrs.findIndex(attr => attr.name === form.name)
+      if (setIndex === -1) {
+        allAttrs.push(Object.assign({}, form))
+      } else {
+        allAttrs.splice(setIndex, 1, Object.assign({}, form))
+      }
+      this.attrFormVisible = false
+      this.onChangeEmit()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attr-list {
+  width: 99%;
+}
+</style>

src/components/FormFields/JsonEditor.vue

@@ -2,8 +2,9 @@
   <div class="json-editor">
     <JsonEditor
       v-model="resultInfo"
-      :show-btns="false"
       :mode="'code'"
+      :show-btns="false"
+      :class="{resize: resize === 'vertical'}"
       @json-change="onJsonChange"
       @json-save="onJsonSave"
       @has-error="onError"
@@ -18,8 +19,15 @@ export default {
   components: { JsonEditor },
   props: {
     value: {
+      type: [String, Object, Array],
+      default: () => ({})
+    },
+    resize: {
       type: String,
-      default: () => ''
+      validator: (value) => {
+        return ['none', 'vertical'].indexOf(value) !== -1
+      },
+      default: 'vertical'
     }
   },
   data() {
@@ -29,7 +37,7 @@ export default {
     }
   },
   created() {
-    this.resultInfo = JSON.parse(this.value)
+    this.resultInfo = typeof this.value === 'string' ? JSON.parse(this.value) : this.value
   },
   methods: {
     // 数据改变
@@ -38,36 +46,48 @@ export default {
     },
     // 保存
     onJsonSave(value) {
-      this.resultInfo = value
+      this.resultInfo = typeof value === 'string' ? JSON.parse(value) : value
       this.hasJsonFlag = true
       setTimeout(() => {
-        this.$emit('change', JSON.stringify(this.resultInfo))
+        this.$emit('change', this.resultInfo)
       }, 500)
     },
     onError: _.debounce(function(value) {
-      this.$message.error(this.$t('common.FormatError'))
-    }, 1100)
+      this.$message.error(this.$tc('common.FormatError'))
+    }, 1500)
   }
 }
 </script>
 
 <style lang="scss" scoped>
+  @import "~@/styles/variables.scss";
+
   .json-editor {
-    &>>> .jsoneditor {
+    .resize {
+      & > > > .jsoneditor {
+      resize: vertical;
+      cursor: s-resize;
+      }
+    }
+    & > > > .jsoneditor {
       border: 1px solid #e5e6e7;
     }
-    &>>> .jsoneditor-compact {
+
+    & > > > .jsoneditor-compact {
       display: none;
     }
-    &>>> .jsoneditor-modes {
+
+    & > > > .jsoneditor-modes {
       display: none;
     }
-    &>>> .jsoneditor-poweredBy {
+
+    & > > > .jsoneditor-poweredBy {
       display: none;
     }
-    &>>> .jsoneditor-menu {
-      background: #1ab394;
-      border-bottom: 1px solid #1ab394;
+
+    & > > > .jsoneditor-menu {
+      background: var(--color-primary);
+      border-bottom: 1px solid var(--color-primary);
     }
   }
 </style>

src/components/FormFields/ListField.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div v-for="(item, index) in value || []" :key="index" class="value-item">
+      <el-input :value="item" class="input-z" @input="updateValue($event, index)" />
+      <div class="input-button">
+        <el-button
+          :disabled="disableDelete(item)"
+          icon="el-icon-minus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="danger"
+          @click="handleDelete(index)"
+        />
+        <el-button
+          :disabled="disableAdd(item, index)"
+          icon="el-icon-plus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="primary"
+          @click="handleAdd(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ListField',
+  props: {
+    value: {
+      type: [Array, String],
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    const value = this.value
+    if (!value || !Array.isArray(value) || value.length === 0) {
+      this.$emit('input', [''])
+    }
+  },
+  methods: {
+    updateValue(v, index) {
+      const value = this.value
+      value[index] = v
+      this.$emit('input', value)
+    },
+    disableDelete() {
+      return false
+    },
+    disableAdd() {
+      return false
+    },
+    handleAdd(index) {
+      const value = this.value
+      value.splice(index + 1, 0, '')
+      this.$emit('input', value)
+    },
+    handleDelete(index) {
+      const value = this.value
+      value.splice(index, 1)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.input-z {
+  flex-shrink: 1;
+  width: calc(100% - 80px) !important;
+}
+
+.value-item {
+  display: flex;
+  margin: 4px 0;
+}
+
+.input-button {
+  display: flex;
+  margin-left: 20px;
+  margin-top: 4px;
+}
+
+.input-button ::v-deep .el-button.el-button--mini {
+  height: 25px;
+  padding: 5px;
+}
+
+</style>

src/components/FormFields/NestedObjectSelect2.vue

@@ -0,0 +1,105 @@
+<template>
+  <Select2
+    v-model="iValue"
+    :multiple="multiple"
+    v-bind="attrsWithoutValue"
+    @change="onChange"
+    @change-options="onChangeOptions"
+  />
+</template>
+
+<script>
+import Select2 from './Select2'
+
+export default {
+  name: 'NestedObjectSelect2',
+  components: {
+    Select2
+  },
+  props: {
+    value: {
+      type: [Array, String, Number, Boolean, Object],
+      default: () => ([])
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 自定义label字段的name
+    customLabelKeyName: {
+      type: String,
+      default: 'name'
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    attrsWithoutValue() {
+      const attrs = Object.assign({}, this.$attrs)
+      delete attrs.value
+      return attrs
+    },
+    iValue: {
+      set(val) {
+        const value = this.valuesToObjects(val)
+        this.$log.debug('set iValue', value)
+        this.$emit('input', value)
+      },
+      get() {
+        const value = this.objectsToValues(this.value)
+        return value
+      }
+    }
+  },
+  methods: {
+    onChange(val) {
+      val = this.valuesToObjects(val)
+      this.$log.debug('onChange .... ', val)
+      this.$emit('change', val)
+    },
+    onChangeOptions(val) {
+      val = this.valuesToObjects(val)
+      this.$log.debug('onChangeOptions', val)
+      this.$emit('changeOptions', val)
+    },
+    valuesToObjects(values) {
+      let value = values
+      if (!this.multiple && !Array.isArray(value)) {
+        value = [value]
+      }
+      value = value.map(v => {
+        // uuid v4
+        const uuid = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i
+        return typeof v === 'object' ? v
+          : this.$attrs?.allowCreate && !uuid.test(v) ? { [this.customLabelKeyName]: v } : { pk: v }
+      })
+      if (!this.multiple) {
+        value = value[0]
+      }
+      return value
+    },
+    objectsToValues(objects) {
+      let val = objects
+      if (!this.multiple) {
+        val = [val]
+      }
+      val = val.map((v) => {
+        if (v && typeof v === 'object') {
+          return v.pk || v.id || (this.$attrs?.allowCreate ? (v?.[this.customLabelKeyName] + ':' + v?.value) : '')
+        } else {
+          return v
+        }
+      })
+      if (!this.multiple) {
+        val = val[0]
+      }
+      return val
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/FormFields/PasswordInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <password
+  <Password
     :value="value"
     v-bind="iAttrs"
     class="el-input password-input"
@@ -32,7 +32,8 @@ export default {
       const defaultAttrs = {
         secureLength: 7,
         defaultClass: 'el-input__inner',
-        toggle: true
+        toggle: true,
+        showStrengthMeter: false
       }
       return Object.assign(defaultAttrs, this.attrs)
     }
@@ -46,17 +47,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/element-variables.scss";
   .password-input >>> .Password__badge--error {
-    background-color: $--color-danger;
+    background-color: var(--color-danger);
   }
   .password-input >>> .Password__strength-meter--fill[data-score="4"] {
-    background: $--color-primary;
+    background: var(--color-success);
     width: 100%;
   }
 
   .password-input >>> .Password__badge--success {
-    background: $--color-primary;
+    background: var(--color-success);
   }
 
   .password-input >>> .Password__strength-meter {

src/components/FormFields/PhoneInput.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-input v-model="rawValue.phone" :placeholder="$tc('users.inputPhone')" @input="OnInputChange">
+      <el-select
+        slot="prepend"
+        :value="rawValue.code"
+        :placeholder="$tc('common.Select')"
+        style="width: 90px;"
+        @change="OnChange"
+      >
+        <el-option
+          v-for="country in countries"
+          :key="country.value"
+          :label="country.value"
+          :value="country.value"
+          style="width: 200px;"
+        >
+          <span style="float: left">{{ country.name }}</span>
+          <span style="float: right; font-size: 13px">{{ country.value }}</span>
+        </el-option>
+      </el-select>
+    </el-input>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PhoneInput',
+  props: {
+    value: {
+      type: [Object, String],
+      default: () => ({ 'code': '+86', 'phone': '' })
+    }
+  },
+  data() {
+    return {
+      rawValue: {},
+      countries: [
+        { name: 'China(中国)', value: '+86' },
+        { name: 'HongKong(中国香港)', value: '+852' },
+        { name: 'Macao(中国澳门)', value: '+853' },
+        { name: 'Taiwan(中国台湾)', value: '+886' },
+        { name: 'America(America)', value: '+1' },
+        { name: 'Russia(Россия)', value: '+7' },
+        { name: 'France(français)', value: '+33' },
+        { name: 'Britain(Britain)', value: '+44' },
+        { name: 'Germany(Deutschland)', value: '+49' },
+        { name: 'Japan(日本)', value: '+81' },
+        { name: 'Korea(한국)', value: '+82' },
+        { name: 'India(भारत)', value: '+91' }
+      ]
+    }
+  },
+  computed: {
+    fullPhone() {
+      if (!this.rawValue.phone) {
+        return ''
+      }
+      return `${this.rawValue.code}${this.rawValue.phone}`
+    }
+  },
+  mounted() {
+    this.rawValue = this.value || { code: '+86', phone: '' }
+    this.$emit('input', this.fullPhone)
+  },
+  methods: {
+    OnChange(countryCode) {
+      this.rawValue.code = countryCode
+      this.OnInputChange()
+    },
+    OnInputChange() {
+      this.$emit('input', this.fullPhone)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue

@@ -0,0 +1,116 @@
+<template>
+  <Dialog
+    v-if="$attrs.visible"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="$tc('assets.PlatformProtocolConfig') + '：' + protocol.name"
+    class="setting-dialog"
+    v-bind="$attrs"
+    width="70%"
+    v-on="$listeners"
+  >
+    <el-alert v-if="disabled && platformDetail" style="margin-bottom: 10px" type="success">
+      {{ $t('assets.InheritPlatformConfig') }}
+      <el-link :href="platformDetail" class="link-more" target="_blank">
+        {{ $t('common.View') }}
+      </el-link>
+      <i class="fa fa-external-link" />
+    </el-alert>
+    <AutoDataForm
+      :disabled="disabled"
+      :form="form"
+      class="data-form"
+      v-bind="config"
+      @submit="onSubmit"
+    />
+  </Dialog>
+</template>
+
+<script>
+import { AutoDataForm, Dialog } from '@/components'
+import JsonEditor from '@/components/FormFields/JsonEditor.vue'
+
+export default {
+  name: 'ProtocolSetting',
+  components: {
+    Dialog,
+    AutoDataForm
+  },
+  props: {
+    protocol: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const vm = this
+    const platform = this.$route.query.platform
+    return {
+      loading: true,
+      form: this.protocol,
+      platformDetail: platform ? '#/console/assets/platforms/' + platform : '',
+      config: {
+        hasSaveContinue: false,
+        hasButtons: !this.disabled,
+        url: '/api/v1/assets/protocol-settings/?name=' + this.protocol.name,
+        fields: [
+          [vm.$t('common.Basic'), [
+            'primary', 'required', 'default', 'public'
+          ]],
+          [vm.$t('common.Advanced'), ['setting']]
+        ],
+        fieldsMeta: {
+          setting: {
+            fields: '__all__',
+            fieldsMeta: {
+              username_selector: {
+                hidden: (formValue) => formValue['autofill'] !== 'basic'
+              },
+              password_selector: {
+                hidden: (formValue) => formValue['autofill'] !== 'basic'
+              },
+              submit_selector: {
+                hidden: (formValue) => formValue['autofill'] !== 'basic'
+              },
+              script: {
+                component: JsonEditor,
+                hidden: (formValue) => formValue['autofill'] !== 'script'
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    onSubmit(form) {
+      this.protocol = Object.assign(this.protocol, form)
+      this.$emit('update:visible', false)
+      this.$emit('confirm', this.protocol)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-form > > > .el-form-item.form-buttons {
+  padding-top: 10px;
+  margin-bottom: 0;
+}
+
+.setting-dialog > > > .el-dialog__body {
+  padding-top: 10px;
+}
+
+.link-more {
+  font-size: 10px;
+  border-bottom: solid 1px;
+  color: inherit;
+}
+</style>

src/components/FormFields/ProtocolSelector/index.vue

@@ -0,0 +1,366 @@
+<template>
+  <div v-if="!loading" :class="showSetting ? 'show-setting' : 'hide-setting'">
+    <div v-for="(item, index) in items" :key="item.name" class="protocol-item">
+      <el-input
+        v-model="item.port"
+        :class="isPortReadonly(item) ? '' : 'input-with-select'"
+        :placeholder="portPlaceholder"
+        :readonly="isPortReadonly(item)"
+        :title="isPortReadonly(item) ? '端口由 URL 指定' : ''"
+        v-bind="$attrs"
+      >
+        <template #prepend>
+          <el-select
+            :disabled="disableSelect(item)"
+            :value="item.display_name ? item.display_name : item.name"
+            class="prepend"
+            @change="handleProtocolChange($event, item)"
+          >
+            <el-option
+              v-for="p of remainProtocols"
+              :key="p.name"
+              :label="p.name"
+              :value="p.name"
+            />
+          </el-select>
+        </template>
+        <template #append>
+          <el-button
+            v-if="showSetting(item)"
+            icon="el-icon-setting"
+            @click="onSettingClick(item)"
+          />
+        </template>
+      </el-input>
+      <div v-if="!readonly" class="input-button">
+        <el-button
+          :disabled="disableDelete(item)"
+          icon="el-icon-minus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="danger"
+          @click="handleDelete(index)"
+        />
+        <el-button
+          v-if="index === items.length - 1"
+          :disabled="disableAdd(item, index)"
+          icon="el-icon-plus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="primary"
+          @click="handleAdd(index)"
+        />
+      </div>
+    </div>
+    <el-button
+      v-if="items.length === 0"
+      icon="el-icon-plus"
+      size="mini"
+      style="flex-shrink: 0;"
+      type="primary"
+      @click="handleAdd(0)"
+    />
+    <ProtocolSettingDialog
+      v-if="showDialog"
+      :disabled="settingReadonly || readonly"
+      :protocol="currentProtocol"
+      :visible.sync="showDialog"
+      @confirm="handleSettingConfirm"
+    />
+  </div>
+</template>
+
+<script>
+import ProtocolSettingDialog from './ProtocolSettingDialog'
+
+export default {
+  components: {
+    ProtocolSettingDialog
+  },
+  props: {
+    value: {
+      type: [String, Array],
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    choices: {
+      type: Array,
+      default: () => ([])
+    },
+    readonly: {
+      // 这个是在详情中，不可编辑，包括所有
+      type: Boolean,
+      default: false
+    },
+    settingReadonly: {
+      // 这个是在资产添加时设置协议使用，不能修改 setting
+      type: Boolean,
+      default: false
+    },
+    showSetting: {
+      type: Function,
+      default: (item) => true
+    },
+    instance: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      name: '',
+      items: [],
+      currentProtocol: {},
+      showDialog: false,
+      loading: false
+    }
+  },
+  computed: {
+    selectedProtocolNames() {
+      return this.items.map(item => item.name)
+    },
+    remainProtocols() {
+      return this.choices.filter(proto => {
+        return this.selectedProtocolNames.indexOf(proto.name) === -1
+      })
+    },
+    portPlaceholder() {
+      if (this.settingReadonly) {
+        return this.$t('applications.port')
+      } else {
+        return this.$t('assets.DefaultPort')
+      }
+    },
+    iChoices() {
+      return this.choices.map(item => {
+        delete item?.id
+        return item
+      })
+    }
+  },
+  watch: {
+    choices: {
+      handler(value, oldValue) {
+        if (value?.length === oldValue?.length) {
+          return
+        }
+        this.loading = true
+        setTimeout(() => {
+          this.setDefaultItems(value)
+          this.loading = false
+        },)
+      },
+      deep: true,
+      immediate: true
+    },
+    items: {
+      handler(value) {
+        if (this.settingReadonly) {
+          value = value.map(i => {
+            return { name: i.name, port: i.port }
+          })
+        }
+        this.$emit('input', value)
+      },
+      immediate: true,
+      deep: true
+    },
+    instance: {
+      handler(value) {
+        const port = this.getPortFromInstance(value)
+        if (!port) {
+          return
+        }
+        for (const item of this.items) {
+          if (item['port_from_addr']) {
+            item.port = port
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    this.setDefaultItems(this.iChoices)
+    this.$log.debug('Choices: ', this.choices)
+    this.$log.debug('Value: ', this.value)
+    this.$log.debug('Items: ', this.items)
+  },
+  methods: {
+    getPortFromInstance(instance) {
+      if (!instance) {
+        return 0
+      }
+      let address = instance.address || ''
+      if (address.indexOf('://') === -1) {
+        address = `https://${address}`
+      }
+      const parse = require('url-parse')
+      const path = parse(address)
+      let port = path.port
+      if (port < 0 || port > 65535) {
+        port = 0
+      }
+      if (!port) {
+        port = path.protocol === 'https:' ? 443 : 80
+      }
+      return port
+    },
+    handleSettingConfirm() {
+      if (this.currentProtocol.primary) {
+        const others = this.items
+          .filter(item => item.name !== this.currentProtocol.name)
+          .map(item => {
+            item.primary = false
+            return item
+          })
+        this.items = [this.currentProtocol, ...others]
+      }
+      if (this.currentProtocol.name === 'winrm') {
+        if (this.currentProtocol.setting?.use_ssl) {
+          this.currentProtocol.port = 5986
+        } else {
+          this.currentProtocol.port = 5985
+        }
+      }
+    },
+    handleDelete(index) {
+      this.items = this.items.filter((value, i) => i !== index)
+    },
+    isRequired(item) {
+      const full = this.iChoices.find(choice => {
+        return choice.name === item.name
+      })
+      return full?.primary || full?.required
+    },
+    disableSelect(item) {
+      return this.isRequired(item)
+    },
+    disableDelete(item) {
+      if (this.items.length === 1) {
+        return true
+      }
+      // 代表是设置平台
+      if (!this.settingReadonly) {
+        return false
+      }
+      return this.isRequired(item)
+    },
+    disableAdd(item) {
+      return this.remainProtocols.length === 0 || !item.port
+    },
+    handleAdd(index) {
+      this.items.push({ ...this.remainProtocols[0] })
+    },
+    handleProtocolChange(evt, item) {
+      const selected = this.choices.find(item => item.name === evt)
+      item.name = selected.name
+      item.port = selected.port
+    },
+    isPortFormAddr(item) {
+      return !!item['port_from_addr']
+    },
+    isPortReadonly(item) {
+      return this.readonly || this.isPortFormAddr(item)
+    },
+    setPrimaryIfNeed(items) {
+      // 如果没有设置主协议，设置第一个为主协议
+      if (this.settingReadonly) {
+        return items
+      }
+      const primaryProtocols = items.filter(item => item.primary)
+      if (primaryProtocols.length === 0) {
+        items[0].default = true
+        items[0].public = true
+      } else if (primaryProtocols.length > 1) {
+        primaryProtocols.slice(1, primaryProtocols.length).forEach(item => {
+          item.primary = false
+        })
+      }
+      return items
+    },
+    setDefaultItems(choices) {
+      let items = []
+      const requiredItems = choices.filter(item => (item.required || item.primary))
+
+      if (this.value instanceof Array && this.value.length > 0) {
+        const protocols = []
+        this.value.forEach(item => {
+          // 有默认值的情况下，设置为只读或者有id、有setting是平台
+          if (!this.settingReadonly || (item?.id && item?.setting)) {
+            protocols.push(item)
+          } else {
+            // 获取资产协议配置
+            const assetDefaultItems = this.getAssetDefaultItems(item, choices)
+            protocols.push(...assetDefaultItems)
+          }
+        })
+        const notFound = requiredItems.filter(item => !protocols.find(p => p.name === item.name))
+        protocols.push(...notFound)
+        const allProtocolNames = protocols.map(item => item.name)
+        items = protocols.filter(item => allProtocolNames.indexOf(item.name) !== -1)
+      } else {
+        const defaults = choices.filter(item => (item.required || item.primary || item.default))
+        if (defaults.length === 0) {
+          defaults.push(choices[0])
+        }
+        items = defaults
+      }
+      items = this.setPrimaryIfNeed(items)
+      this.items = items
+    },
+    getAssetDefaultItems(item, choices) {
+      const protocols = []
+      const protocol = choices.find(i => i.name === item.name) || {}
+      protocols.push({ ...protocol, ...item })
+      return protocols
+    },
+    onSettingClick(item) {
+      this.currentProtocol = item
+      this.showDialog = true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-select >>> .el-input__inner {
+  width: 120px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.input-with-select {
+  flex-shrink: 1;
+  width: calc(100% - 80px) !important;
+}
+
+.input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+
+.protocol-item {
+  display: flex;
+  margin: 5px 0;
+}
+
+.input-button {
+  margin-top: 4px;
+  display: flex;
+  margin-left: 20px
+}
+
+.input-button ::v-deep .el-button.el-button--mini {
+  height: 25px;
+  padding: 5px;
+}
+
+.el-input-group__append .el-button {
+  font-size: 14px;
+  color: #1a1a1a;
+  padding: 9px 20px;
+}
+</style>

src/components/FormFields/Secret.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Todo: 抽象 Secret
+  </div>
+</template>

src/components/FormFields/Select2.vue

@@ -2,28 +2,29 @@
   <el-select
     ref="select"
     v-model="iValue"
-    v-loading="!initialized"
     v-loadmore="loadMore"
+    :clearable="clearable"
+    :collapse-tags="collapseTags"
+    :disabled="!!selectDisabled"
+    :loading="!initialized"
+    :multiple="multiple"
     :options="iOptions"
     :remote="remote"
     :remote-method="filterOptions"
-    :multiple="multiple"
-    :clearable="clearable"
+    class="select2"
     filterable
     popper-append-to-body
-    class="select2"
-    :disabled="selectDisabled"
     v-bind="$attrs"
     @change="onChange"
-    @visible-change="onVisibleChange"
     v-on="$listeners"
+    @visible-change="onVisibleChange"
   >
     <el-option
       v-for="item in iOptions"
       :key="item.value"
+      :disabled="checkDisabled(item)"
       :label="item.label"
       :value="item.value"
-      :disabled="checkDisabled(item)"
     />
   </el-select>
 </template>
@@ -78,7 +79,7 @@ export default {
     },
     // 初始化值，也就是选中的值
     value: {
-      type: [Array, String, Number, Boolean],
+      type: [Array, String, Number, Boolean, Object],
       default() {
         return this.multiple ? [] : ''
       }
@@ -90,6 +91,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    collapseTagsCount: {
+      type: Number,
+      default: 10
     }
   },
   data() {
@@ -128,6 +133,9 @@ export default {
     selectRef() {
       return this.$refs.select
     },
+    collapseTags() {
+      return this.multiple && this.collapseTagsCount > 0 && this.value.length > this.collapseTagsCount
+    },
     optionsValues() {
       return this.iOptions.map((v) => v.value)
     },
@@ -137,7 +145,13 @@ export default {
         if (noValue && !this.initialized) {
           return
         }
-        this.$emit('input', val)
+        if (val && val.constructor === Object && val.value) {
+          this.$emit('input', val.value)
+        } else if (val && val.constructor === Object && val.id) {
+          this.$emit('input', val.id)
+        } else {
+          this.$emit('input', val)
+        }
       },
       get() {
         return this.value
@@ -161,6 +175,10 @@ export default {
         return { label: item.name, value: item.id }
       }
       const transformOption = this.ajax.transformOption || defaultTransformOption
+      const defaultFilterOption = (item) => {
+        return item
+      }
+      const filterOption = this.ajax.filterOption || defaultFilterOption
       const defaultProcessResults = (data) => {
         let results = []
         let more = false
@@ -174,7 +192,7 @@ export default {
           total = data.count
         }
         results = results.map(transformOption)
-        results = results.filter(Boolean)
+        results = results.filter(filterOption)
         return { results: results, pagination: more, total: total }
       }
       const defaultAjax = {
@@ -189,31 +207,28 @@ export default {
     }
   },
   watch: {
-    // url(newValue, oldValue) {
-    //   this.$log.debug('Select url changed: ', oldValue, ' => ', newValue)
-    //   this.iAjax.url = newValue
-    //   this.refresh()
-    // },
     iAjax(newValue, oldValue) {
       this.$log.debug('Select url changed: ', oldValue, ' => ', newValue)
       this.refresh()
     },
-    value(iNew) {
-      this.iValue = iNew
+    value: {
+      handler(newValue, oldValue) {
+      },
+      deep: true
     }
   },
   async mounted() {
-    // this.$log.debug('Select2 url is: ', this.iAjax.url)
     if (!this.initialized) {
       await this.initialSelect()
       setTimeout(() => {
+        this.$log.debug('Value is : ', this.value)
         this.iValue = this.value
         this.initialized = true
-      })
+      }, 100)
     }
     this.$nextTick(() => {
       // 因为elform存在问题，这个来清楚验证
-      const elFormItem = this.$refs.select.elFormItem
+      const elFormItem = this.$refs.select?.elFormItem
       if (elFormItem && elFormItem.clearValidate) {
         elFormItem.clearValidate()
       }
@@ -308,8 +323,9 @@ export default {
         if (this.iOptions.length === 0) {
           this.remote = false
         }
+      } else {
+        this.remote = false
       }
-      this.iValue = this.value
     },
     refresh() {
       this.resetParams()
@@ -319,13 +335,11 @@ export default {
     addOption(option) {
       this.iOptions.push(option)
     },
-    getOptionsByValues(values) {
-      return this.iOptions.filter((v) => {
-        return values.indexOf(v.value) !== -1
-      })
-    },
     getSelectedOptions() {
-      const values = this.iValue
+      let values = this.iValue
+      if (!Array.isArray(values)) {
+        values = [values]
+      }
       return this.iOptions.filter((v) => {
         return values.indexOf(v.value) !== -1
       })
@@ -338,9 +352,9 @@ export default {
     },
     onChange(values) {
       const options = this.getSelectedOptions()
-      this.$log.debug('Current select options: ', options)
+      this.$log.debug('Current select options: ', options, 'Val: ', this.value)
       this.$emit('changeOptions', options)
-      this.$emit('change', options)
+      // this.$emit('change', options) // 事件重复
     },
     onVisibleChange(visible) {
       if (!visible && this.params.search) {
@@ -354,11 +368,12 @@ export default {
 </script>
 
 <style scoped>
-  .select2 {
-    width: 100%;
-  }
-  .select2 >>> .el-tag.el-tag--info {
-    height: auto;
-    white-space: normal;
-  }
+.select2 {
+  width: 100%;
+}
+
+.select2 >>> .el-tag.el-tag--info {
+  height: auto;
+  white-space: normal;
+}
 </style>

src/components/FormFields/Switcher.vue

@@ -1,7 +1,7 @@
 <template>
   <el-switch
     v-model="iValue"
-    :active-color="activeColor"
+    :class="type"
     inactive-color="#dcdfe6"
     v-bind="$attrs"
     v-on="$listeners"
@@ -10,14 +10,14 @@
 
 <script>
 export default {
-  name: 'Switcher',
+  name: 'Switcher', // 不能叫 Switch，否则会和 js 关键字冲突
   props: {
     type: {
       type: String,
       default: 'primary'
     },
     value: {
-      type: Boolean,
+      type: [Boolean, String],
       default: true
     }
   },
@@ -26,29 +26,19 @@ export default {
     }
   },
   computed: {
-    activeColor() {
-      // $--color-primary: #1ab394;
-      // $--color-success: #1c84c6;
-      // $--color-info: #23c6c8;
-      // $--color-warning: #f8ac59;
-      // $--color-danger: #ed5565;
-      switch (this.type) {
-        case 'primary':
-          return '#1ab394'
-        case 'danger':
-          return '#ed5565'
-        default:
-          return '#1ab394'
-      }
-    },
     iValue: {
       set: function(newValue) {
         this.$emit('input', newValue)
       },
       get: function() {
-        return this.value
+        return !!this.value
       }
     }
+  },
+  watch: {
+    value(val) {
+      this.$log.debug('Switcher Value changed: ', val)
+    }
   }
 }
 </script>