fix: 修复UploadKey失败问题

fix: 修改基本设置项
2026-01-14 03:46:26 +00:00 · 2021-11-01 14:58:01 +08:00 · 2021-10-29 19:24:35 +08:00 · 2021-10-29 13:19:19 +08:00 · 2021-10-29 13:17:57 +08:00 · 2021-10-28 18:13:43 +08:00
443 changed files with 25138 additions and 7450 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,3 +1,4 @@
 lina
 dist
 node_modules
+.git
--- a/.env.development.example
+++ b/.env.development.example
@@ -1,8 +1,6 @@
 # 全局环境变量 请勿随意改动
 ENV = 'development'

-
-
 # base api
 VUE_APP_BASE_API = ''
 VUE_APP_PUBLIC_PATH = '/ui/'
@@ -22,5 +20,6 @@ VUE_APP_LOGOUT_PATH = '/core/auth/logout/'


 # Dev server for core proxy
-VUE_APP_CORE_HOST = 'http://localhost:8080'
+VUE_APP_CORE_HOST = 'http://localhost:8080/'
+VUE_APP_CORE_WS = 'http://localhost:8080/'
 VUE_APP_ENV = 'development'
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ tests/**/coverage/
 *.ntvs*
 *.njsproj
 *.sln
+.env.development
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +0,0 @@
-[submodule "src/views/xpack"]
-	path = src/views/xpack
-	url = git@github.com:jumpserver/lina-xpack.git
--- a/4
+++ b/4
@@ -12,8 +12,8 @@ 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/
-COPY utils /data/utils/
-RUN ls && cd utils && bash -xieu build.sh dep
+RUN yarn install
+RUN npm rebuild node-sass

 ADD . /data
 RUN cd utils && bash -xieu build.sh build
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ server {


 ## License & Copyright
-Copyright (c) 2014-2020 飞致云 FIT2CLOUD, All rights reserved.
+Copyright (c) 2014-2021 飞致云 FIT2CLOUD, All rights reserved.

 Licensed under The GNU General Public License version 2 (GPLv2) (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,8 @@
 module.exports = {
  presets: [
    '@vue/app'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
  ]
 }
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,9 +1,19 @@
 server {
  listen 80;

+  gzip on;
+  gzip_min_length 1k;
+  gzip_buffers 4 16k;
+  #gzip_http_version 1.0;
+  gzip_comp_level 8;
+  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
+  gzip_vary off;
+  gzip_static on;
+  gzip_disable "MSIE [1-6].";
+
  location /ui/ {
-      try_files $uri / /ui/index.html;
-      alias /opt/lina/;
+    try_files $uri / /ui/index.html;
+    alias /opt/lina/;
  }

  location / {
--- a/package.json
+++ b/package.json
@@ -15,17 +15,24 @@
    "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": "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"
  },
  "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
    "@ztree/ztree_v3": "3.5.44",
-    "axios": "0.18.1",
+    "axios": "0.21.1",
+    "axios-retry": "^3.1.9",
+    "cron-parser": "^4.0.0",
    "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",
    "js-cookie": "2.2.0",
+    "krry-transfer": "^1.7.3",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "lodash": "^4.17.15",
@@ -40,8 +47,10 @@
    "lodash.set": "^4.3.2",
    "lodash.topairs": "^4.3.0",
    "lodash.values": "^4.3.0",
+    "moment": "^2.29.1",
    "moment-parseformat": "^3.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",
@@ -72,6 +81,7 @@
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "chalk": "2.4.2",
+    "compression-webpack-plugin": "^6.1.1",
    "connect": "3.6.6",
    "element-theme-chalk": "^2.13.1",
    "eslint": "^5.15.3",
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -3,9 +3,29 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <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>
  </head>
  <body>
    <noscript>
--- a/src/api/orgs.js
+++ b/src/api/orgs.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function getOrgDetail(oid) {
+  return request({
+    url: `/api/v1/orgs/orgs/current/?oid=${oid}`,
+    method: 'get'
+  })
+}
+
+export function getCurrentOrg() {
+  return request({
+    url: `/api/v1/orgs/orgs/current/`,
+    method: 'get'
+  })
+}
--- a/src/api/sessions.js
+++ b/src/api/sessions.js
@@ -57,6 +57,26 @@ export function TestReplayStorage(id) {
  })
 }

+function SetToDefaultStorage(url) {
+  return request({
+    url: url,
+    method: 'patch',
+    data: { 'is_default': true }
+  })
+}
+
+export function SetToDefaultCommandStorage(id) {
+  return SetToDefaultStorage(
+    `/api/v1/terminal/command-storages/${id}/`,
+  )
+}
+
+export function SetToDefaultReplayStorage(id) {
+  return SetToDefaultStorage(
+    `/api/v1/terminal/replay-storages/${id}/`,
+  )
+}
+
 export function getReplayStorage(id) {
  return request({
    url: `/api/v1/terminal/replay-storages/${id}/`,
--- a/src/api/settings.js
+++ b/src/api/settings.js
@@ -51,7 +51,7 @@ export function refreshLdapUserCache() {
  })
 }

-export function StartLdapUserCache() {
+export function startLdapUserCache() {
  return request({
    disableFlashErrorMsg: true,
    url: '/api/v1/settings/ldap/users/?cache_police=1',
--- a/src/api/ticket.js
+++ b/src/api/ticket.js
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getTicketOpenCount(assign) {
+  return request({
+    url: `/api/v1/tickets/tickets/?assignees__id=${assign}&status=open&offset=0&limit=15&display=1&draw=1/`,
+    method: 'get'
+  })
+}
--- a/src/assets/img/logo-text.png
+++ b/src/assets/img/logo-text.png
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/components/AccountListTable/ShowSecretInfo.vue
+++ b/src/components/AccountListTable/ShowSecretInfo.vue
@@ -0,0 +1,83 @@
+<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('assets.SSHKey')">
+            <el-input v-model="authInfo['private_key']" 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/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>
+
+</style>
--- a/src/components/AccountListTable/UpdateSecretInfo.vue
+++ b/src/components/AccountListTable/UpdateSecretInfo.vue
@@ -0,0 +1,92 @@
+<template>
+  <Dialog
+    width="50"
+    :title="this.$t('assets.UpdateAssetUserToken')"
+    :destroy-on-close="true"
+    v-bind="$attrs"
+    @confirm="handleConfirm()"
+    @cancel="handleCancel()"
+    v-on="$listeners"
+  >
+    <el-form label-position="right" label-width="80px">
+      <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" />
+      </el-form-item>
+      <el-form-item :label="this.$t('assets.SSHKey')">
+        <input type="file" @change="onPrivateKeyLoaded">
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+export default {
+  name: 'UpdateSecretInfo',
+  components: {
+    Dialog
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      authInfo: {
+        password: '',
+        private_key: ''
+      }
+    }
+  },
+  methods: {
+    handleConfirm() {
+      const data = {}
+      if (this.authInfo.password !== '') {
+        data.password = this.authInfo.password
+      }
+      if (this.authInfo.private_key !== '') {
+        data.private_key = this.authInfo.private_key
+      }
+      this.$axios.patch(
+        `/api/v1/assets/accounts/${this.account.id}/`,
+        data
+      ).then(res => {
+        this.authInfo = { password: '', private_key: '' }
+        this.$message.success(this.$tc('common.updateSuccessMsg'))
+        this.$emit('updateAuthDone', res)
+        this.$emit('update:visible', false)
+      }).catch(err => {
+        const errMsg = Object.values(err.response.data).join(', ')
+        this.$message.error(this.$tc('common.updateErrorMsg') + ' ' + errMsg)
+        this.$emit('update:visible', true)
+      })
+    },
+    handleCancel() {
+      this.$emit('update:visible', false)
+    },
+    onPrivateKeyLoaded(e) {
+      const vm = this
+      // TODO 校验文件类型
+      const reader = new FileReader()
+      reader.onload = function() {
+        vm.authInfo.private_key = this.result
+      }
+      reader.readAsText(
+        e.target.files[0]
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/AccountListTable/const.js
+++ b/src/components/AccountListTable/const.js
@@ -0,0 +1,36 @@
+import { toSafeLocalDateStr } from '@/utils/common'
+import ChoicesFormatter from '@/components/TableFormatters/ChoicesFormatter'
+import i18n from '@/i18n/i18n'
+
+export const connectivityMeta = {
+  label: i18n.t('assets.Reachable'),
+  formatter: ChoicesFormatter,
+  formatterArgs: {
+    iconChoices: {
+      ok: 'fa-check',
+      failed: 'fa-times',
+      unknown: 'fa-circle-o'
+    },
+    classChoices: {
+      ok: 'text-primary',
+      failed: 'text-danger',
+      unknown: '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'
+}
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+    <ShowSecretInfo v-if="showViewSecretDialog" :visible.sync="showViewSecretDialog" :account="account" />
+    <UpdateSecretInfo :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() {
+    return {
+      showViewSecretDialog: false,
+      showUpdateSecretDialog: false,
+      account: {},
+      tableConfig: {
+        url: this.url,
+        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: {
+              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'),
+                  type: 'primary',
+                  callback: function({ row }) {
+                    this.account = row
+                    this.showViewSecretDialog = true
+                  }.bind(this)
+                },
+                {
+                  name: 'Delete',
+                  title: this.$t('common.Delete'),
+                  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'),
+                  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.$store.getters.currentOrgIsRoot,
+                  callback: function({ row }) {
+                    this.account = row
+                    this.showUpdateSecretDialog = true
+                  }.bind(this)
+                }
+              ]
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasLeftActions: this.hasLeftActions,
+        hasMoreActions: false,
+        hasImport: false,
+        hasExport: true,
+        exportOptions: {
+          url: this.exportUrl,
+          mfaVerifyRequired: true
+        },
+        searchConfig: {
+          exclude: ['systemuser', 'asset']
+        },
+        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>
--- a/src/components/ActionsGroup/index.vue
+++ b/src/components/ActionsGroup/index.vue
@@ -1,40 +1,15 @@
 <template>
-  <div :class="grouped ? 'el-button-group' : ''">
-    <el-button v-for="item in iActions" :key="item.name" :size="size" v-bind="item" @click="handleClick(item.name)">
-      <el-tooltip v-if="['actionExport', 'actionImport', 'actionRefresh'].indexOf(item.name) !== -1" effect="dark" :content="item.tip" placement="top">
-        <i v-if="item.fa" :class="'fa ' + item.fa" />{{ item.title }}
-      </el-tooltip>
-      <span v-else>
-        <i v-if="item.fa" :class="'fa ' + item.fa" />{{ item.title }}
-      </span>
-    </el-button>
-    <el-dropdown v-if="iMoreActions.length > 0" trigger="click" :placement="moreActionsPlacement" @command="handleClick">
-      <el-button :size="size" :type="moreActionsType" class="btn-more-actions">
-        {{ iMoreActionsTitle }}<i class="el-icon-arrow-down el-icon--right" />
-      </el-button>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="item in iMoreActions" :key="item.name" :command="item.name" v-bind="item" @click="handleClick(item.name)">{{ item.title }} </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-  </div>
+  <DataActions :actions="iActions" v-bind="$attrs" />
 </template>

 <script>
+import DataActions from '@/components/DataActions'
 export default {
  name: 'ActionsGroup',
+  components: {
+    DataActions
+  },
  props: {
-    grouped: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: 'small'
-    },
-    type: {
-      type: String,
-      default: ''
-    },
    actions: {
      type: Array,
      default: () => []
@@ -61,74 +36,22 @@ export default {
  },
  computed: {
    iActions() {
-      return this.cleanActions(this.actions)
-    },
-    iMoreActions() {
-      return this.cleanActions(this.moreActions)
-    },
-    totalActions() {
-      return [...this.actions, ...this.moreActions]
-    },
-    totalNamedActions() {
-      const actions = {}
-      for (const action of this.totalActions) {
-        if (!action || !action.hasOwnProperty('name')) {
-          continue
-        }
-        actions[action.name] = action
+      const actions = [...this.actions]
+      if (this.iMoreAction && this.iMoreAction.dropdown.length > 0) {
+        actions.push(this.iMoreAction)
      }
      return actions
    },
+    iMoreAction() {
+      return {
+        name: 'moreActions',
+        title: this.iMoreActionsTitle,
+        dropdown: this.moreActions || []
+      }
+    },
    iMoreActionsTitle() {
      return this.moreActionsTitle || this.$t('common.MoreActions')
    }
-  },
-  methods: {
-    handleClick(item) {
-      const action = this.totalNamedActions[item]
-      if (action && action.callback) {
-        action.callback(action)
-      } else {
-        this.$log.debug('No callback found')
-      }
-      this.$emit('actionClick', item)
-    },
-    checkItem(item, attr, defaults) {
-      if (!item) {
-        return true
-      }
-      let ok = item[attr]
-      if (ok && typeof ok === 'function') {
-        ok = ok(item)
-      } else if (ok == null) {
-        ok = defaults === undefined ? true : defaults
-      }
-      return ok
-    },
-    cleanActions(actions) {
-      const cleanedActions = []
-      const cloneActions = _.cloneDeep(actions)
-      for (const v of cloneActions) {
-        if (!v) {
-          continue
-        }
-        const action = Object.assign({}, v)
-        // 是否拥有这个action
-        const has = this.checkItem(action, 'has')
-        delete action['has']
-        if (!has) {
-          continue
-        }
-        // 是否是disabled
-        const can = this.checkItem(action, 'can')
-        delete action['can']
-        action.disabled = !can
-        cleanedActions.push(action)
-        // 删掉callback，避免前台看到
-        delete action['callback']
-      }
-      return cleanedActions
-    }
  }
 }
 </script>
--- a/src/components/Announcement/index.vue
+++ b/src/components/Announcement/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-alert
+    v-if="enabled && !isViewed()"
+    class="announcement"
+    type="success"
+    :center="false"
+    :title="title"
+    @close="onClose"
+  >
+    <span class="announcement-main"> {{ announcement.content }}</span>
+    <span v-if="announcement.link">
+      <el-link :href="announcement.link" target="_blank" class="link-more">
+        {{ $t('common.ViewMore') }}
+      </el-link>
+      <i class="fa fa-share-square-o" />
+    </span>
+  </el-alert>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'Announcement',
+  data() {
+    return {
+      viewedKey: 'AnnouncementViewed'
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'publicSettings'
+    ]),
+    announcement() {
+      const ann = this.publicSettings.ANNOUNCEMENT
+      return { id: ann['ID'], subject: ann['SUBJECT'], content: ann['CONTENT'], link: ann['LINK'] }
+    },
+    enabled() {
+      return this.publicSettings.ANNOUNCEMENT_ENABLED && (this.announcement.content || this.announcement.subject)
+    },
+    title() {
+      return this.$t('common.Announcement') + ': ' + this.announcement.subject
+    }
+  },
+  methods: {
+    onClose() {
+      localStorage.setItem(this.viewedKey, this.announcement.id)
+    },
+    isViewed() {
+      const viewedId = localStorage.getItem(this.viewedKey)
+      return viewedId === this.announcement.id
+    }
+  }
+}
+</script>
+
+<style scoped>
+.announcement >>> .el-alert__content {
+  width: 100%;
+}
+.announcement-main {
+  word-wrap:break-word;
+}
+.link-more {
+  font-size: 10px;
+  margin-left: 10px;
+  border-bottom: solid 1px;
+}
+
+</style>
--- a/src/components/AppAccountListTable/ShowSecretInfo.vue
+++ b/src/components/AppAccountListTable/ShowSecretInfo.vue
@@ -0,0 +1,80 @@
+<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>
--- a/src/components/AppAccountListTable/const.js
+++ b/src/components/AppAccountListTable/const.js
@@ -0,0 +1,31 @@
+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'
+}
--- a/src/components/AppAccountListTable/index.vue
+++ b/src/components/AppAccountListTable/index.vue
@@ -0,0 +1,167 @@
+<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: {
+              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',
+                  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: true,
+        exportOptions: {
+          url: this.exportUrl,
+          mfaVerifyRequired: true
+        },
+        searchConfig: {
+          exclude: ['systemuser', 'asset']
+        },
+        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>
--- a/src/components/AssetRelationCard/index.vue
+++ b/src/components/AssetRelationCard/index.vue
@@ -3,12 +3,12 @@
    <table style="width: 100%">
      <tr>
        <td colspan="2">
-          <AssetSelect ref="assetSelect" />
+          <AssetSelect ref="assetSelect" :disabled="disabled" :can-select="canSelect" />
        </td>
      </tr>
      <tr>
        <td colspan="2">
-          <el-button :type="type" size="small" @click="addObjects">{{ $t('common.Add') }}</el-button>
+          <el-button :type="type" size="small" :disabled="disabled" @click="addObjects">{{ $t('common.Add') }}</el-button>
        </td>
      </tr>
    </table>
@@ -38,6 +38,10 @@ export default {
      type: String,
      default: 'primary'
    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
+    },
    value: {
      type: [Array, Number, String],
      default: () => []
@@ -49,6 +53,12 @@ export default {
    onAddSuccess: {
      type: Function,
      default: (objects, that) => {}
+    },
+    canSelect: {
+      type: Function,
+      default(row, index) {
+        return true
+      }
    }
  },
  data() {
--- a/src/components/AssetSelect/index.vue
+++ b/src/components/AssetSelect/index.vue
@@ -1,6 +1,13 @@
 <template>
  <div class="asset-select-dialog">
-    <Select2 ref="select2" v-bind="select2Config" @input="onInputChange" @focus.stop="handleFocus" v-on="$listeners" />
+    <Select2
+      ref="select2"
+      v-model="select2Config.value"
+      v-bind="select2Config"
+      @input="onInputChange"
+      @focus.stop="handleFocus"
+      v-on="$listeners"
+    />
    <Dialog
      v-if="dialogVisible"
      :title="this.$t('assets.Assets')"
@@ -23,8 +30,8 @@

 <script>
 import TreeTable from '@/components/TreeTable'
-import { DetailFormatter } from '@/components/ListTable/formatters'
-import Select2 from '@/components/Select2'
+import { DetailFormatter } from '@/components/TableFormatters'
+import Select2 from '@/components/FormFields/Select2'
 import Dialog from '@/components/Dialog'

 export default {
@@ -34,6 +41,16 @@ export default {
    value: {
      type: Array,
      default: () => []
+    },
+    canSelect: {
+      type: Function,
+      default(row, index) {
+        return true
+      }
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
    }
  },
  data() {
@@ -66,8 +83,9 @@ export default {
      select2Config: select2Config,
      dialogSelect2Config: select2Config,
      tableConfig: {
-        url: '/api/v1/assets/assets/',
+        url: '/api/v1/assets/assets/?fields_size=mini',
        hasTree: true,
+        canSelect: this.canSelect,
        columns: [
          {
            prop: 'hostname',
@@ -81,8 +99,20 @@ export default {
          },
          {
            prop: 'ip',
-            label: this.$t('assets.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')
          }
        ],
        listeners: {
--- a/src/components/AssetUserTable/index.vue
+++ b/src/components/AssetUserTable/index.vue
@@ -1,363 +0,0 @@
-<template><div>
-  <div>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    <Dialog v-if="showMFADialog" width="50" :title="this.$t('common.MFAConfirm')" :visible.sync="showMFADialog" :show-confirm="false" :show-cancel="false" :destroy-on-close="true">
-      <div v-if="MFAConfirmed">
-        <el-form label-position="right" label-width="80px" :model="MFAInfo">
-          <el-form-item :label="this.$t('assets.Hostname')">
-            <el-input v-model="MFAInfo.hostname" disabled />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Username')">
-            <el-input v-model="MFAInfo.username" disabled />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Password')">
-            <el-input v-model="MFAInfo.password" type="password" show-password />
-          </el-form-item>
-        </el-form>
-      </div>
-      <el-row v-else :gutter="20">
-        <el-col :span="4">
-          <div style="line-height: 34px;text-align: center">MFA</div>
-        </el-col>
-        <el-col :span="14">
-          <el-input v-model="MFAInput" />
-          <span class="help-tips help-block">{{ $t('common.MFARequireForSecurity') }}</span>
-        </el-col>
-        <el-col :span="4">
-          <el-button size="mini" type="primary" style="line-height:20px " @click="MFAConfirm">{{ this.$t('common.Confirm') }}</el-button>
-        </el-col>
-      </el-row>
-    </Dialog>
-    <Dialog width="50" :title="this.$t('assets.UpdateAssetUserToken')" :visible.sync="showDialog" @confirm="handleConfirm()" @cancel="handleCancel()">
-      <el-form label-position="right" label-width="80px" :model="dialogInfo">
-        <el-form-item :label="this.$t('assets.Hostname')">
-          <el-input v-model="dialogInfo.hostname" disabled />
-        </el-form-item>
-        <el-form-item :label="this.$t('assets.Username')">
-          <el-input v-model="dialogInfo.username" disabled />
-        </el-form-item>
-        <el-form-item :label="this.$t('assets.Password')">
-          <el-input v-model="dialogInfo.password" type="password" />
-        </el-form-item>
-        <el-form-item :label="this.$t('assets.sshkey')">
-          <input type="file" @change="Onchange">
-        </el-form-item>
-      </el-form>
-    </Dialog>
-  </div>
-</div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ListTable from '@/components/ListTable/index'
-import Dialog from '@/components/Dialog'
-import { ActionsFormatter, DateFormatter } from '@/components/ListTable/formatters'
-
-export default {
-  name: 'Detail',
-  components: {
-    ListTable,
-    Dialog
-  },
-  props: {
-    url: {
-      type: String,
-      required: true
-    },
-    hasLeftActions: {
-      type: Boolean,
-      default: false
-    },
-    otherActions: {
-      type: Array,
-      default: null
-    },
-    handleExport: {
-      type: Function,
-      default: null
-    },
-    handleImport: {
-      type: Function,
-      default: null
-    },
-    hasImport: {
-      type: Boolean,
-      default: true
-    },
-    hasExport: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      MFAConfirmed: false,
-      MFAInput: '',
-      MFAInfo: {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: ''
-      },
-      showDialog: false,
-      showMFADialog: false,
-      dialogInfo: {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: '',
-        key: ''
-      },
-      tableConfig: {
-        url: this.url,
-        columns: [
-          {
-            prop: 'hostname',
-            label: this.$t('assets.Hostname'),
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'ip',
-            label: this.$t('assets.ip'),
-            width: '120px'
-          },
-          {
-            prop: 'username',
-            label: this.$t('assets.Username'),
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'version',
-            label: this.$t('assets.Version'),
-            width: '70px'
-          },
-          {
-            prop: 'date_created',
-            label: this.$t('assets.date_joined'),
-            formatter: DateFormatter
-          },
-          {
-            prop: 'id',
-            label: this.$t('common.Action'),
-            align: 'center',
-            width: 150,
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
-              moreActionsTitle: this.$t('common.More'),
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t('common.View'),
-                  type: 'primary',
-                  callback: function(val) {
-                    this.MFAInfo.asset = val.cellValue
-                    if (this.MFAVerifyAt + this.MFA_TTl * 1000 > (new Date()).valueOf()) {
-                      this.showMFADialog = true
-                      this.MFAConfirmed = true
-                      this.$axios.get(`/api/v1/assets/asset-user-auth-infos/${this.MFAInfo.asset}/`).then(res => {
-                        this.MFAConfirmed = true
-                        this.MFAInfo.hostname = res.hostname
-                        this.MFAInfo.password = res.password
-                        this.MFAInfo.username = res.username
-                      })
-                    } else {
-                      this.showMFADialog = true
-                    }
-                  }.bind(this)
-                },
-                {
-                  name: 'Delete',
-                  title: this.$t('common.Delete'),
-                  type: 'primary',
-                  callback: (val) => {
-                    this.$axios.delete(`/api/v1/assets/asset-users/${val.cellValue}/`).then(() => {
-                      this.$message.success(this.$t('common.deleteSuccessMsg'))
-                      this.$refs.ListTable.reloadTable()
-                    })
-                  }
-                },
-                {
-                  name: 'Test',
-                  title: this.$t('common.Test'),
-                  callback: (val) => {
-                    this.$axios.post(
-                      `/api/v1/assets/asset-users/tasks/?id=${val.cellValue}`,
-                      { action: 'test' }
-                    ).then(res => {
-                      window.open(`/#/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
-                    })
-                  }
-                },
-                {
-                  name: 'Update',
-                  title: this.$t('common.Update'),
-                  callback: function(val) {
-                    this.showDialog = true
-                    this.dialogInfo.asset = val.row.asset
-                    this.dialogInfo.hostname = val.row.hostname
-                    this.dialogInfo.username = val.row.username
-                  }.bind(this)
-                }
-              ]
-            }
-          }
-        ],
-        extraQuery: {
-          latest: 1
-        }
-      },
-      headerActions: {
-        hasLeftActions: this.hasLeftActions,
-        hasBulkDelete: false,
-        hasImport: this.hasImport,
-        hasExport: this.hasExport,
-        hasSearch: true,
-        searchConfig: {
-          options: [
-            {
-              label: this.$t('assets.OnlyLatestVersion'),
-              value: 'latest',
-              children: [
-                {
-                  label: this.$t('common.Yes'),
-                  value: 1
-                },
-                {
-                  label: this.$t('common.No'),
-                  value: 0
-                }
-              ]
-            }
-          ]
-        }
-      }
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'MFA_TTl',
-      'MFAVerifyAt'
-    ]),
-    needMFAVerify() {
-      if (!this.publicSettings.SECURITY_VIEW_AUTH_NEED_MFA) {
-        return false
-      }
-      const ttl = this.publicSettings.SECURITY_MFA_VERIFY_TTL
-      const now = new Date()
-      return !(this.MFAVerifyAt && (now - this.MFAVerifyAt) < ttl * 1000)
-    }
-  },
-  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)
-      }
-    }
-  },
-  created() {
-    if (this.handleExport) {
-      this.headerActions.handleExport = this.handleExport
-    }
-    if (this.handleImport) {
-      this.headerActions.handleImport = this.handleImport
-    }
-  },
-  methods: {
-    MFAConfirm() {
-      if (this.MFAInput.length !== 6) {
-        return this.$message.error(this.$t('common.MFAErrorMsg'))
-      }
-      this.$axios.post(
-        `/api/v1/authentication/otp/verify/`, {
-          code: this.MFAInput
-        }
-      ).then(
-        res => {
-          this.$store.dispatch('users/setMFAVerify')
-          this.$axios.get(`/api/v1/assets/asset-user-auth-infos/${this.MFAInfo.asset}/`).then(res => {
-            this.MFAConfirmed = true
-            this.MFAInfo.hostname = res.hostname
-            this.MFAInfo.password = res.password
-            this.MFAInfo.username = res.username
-          })
-        }
-      )
-    },
-    handleMFAConfirm() {
-      this.MFAInfo = {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: ''
-      }
-      this.MFAInput = ''
-      this.showMFADialog = false
-      this.MFAConfirmed = false
-    },
-    handleCancel() {
-      this.dialogInfo = {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: '',
-        key: ''
-      }
-      this.showDialog = false
-      this.$refs.ListTable.reloadTable()
-    },
-    Onchange(e) {
-      const vm = this
-      // TODO 校验文件类型
-      const reader = new FileReader()
-      reader.onload = function() {
-        vm.dialogInfo.key = this.result
-      }
-      reader.readAsText(
-        e.target.files[0]
-      )
-    },
-    handleConfirm() {
-      const data = {
-        asset: this.dialogInfo.asset,
-        username: this.dialogInfo.username
-      }
-      if (this.dialogInfo.password !== '') {
-        data.password = this.dialogInfo.password
-      }
-      if (this.dialogInfo.key !== '') {
-        data.key = this.dialogInfo.key
-      }
-      this.$axios.post(
-        `/api/v1/assets/asset-users/`,
-        data
-      ).then(res => {
-        this.$message.success(this.$t('common.updateSuccessMsg'))
-      }).catch(err => {
-        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-      })
-      this.dialogInfo = {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: '',
-        key: ''
-      }
-      this.showDialog = false
-      this.$refs.ListTable.reloadTable()
-    }
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>
--- a/src/components/AutoDataForm/components/NestedField.vue
+++ b/src/components/AutoDataForm/components/NestedField.vue
@@ -0,0 +1,81 @@
+<template>
+  <DataForm
+    :fields="iFields"
+    :form="value"
+    style="margin-left: -26%;margin-right: -6%"
+    v-bind="kwargs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import DataForm from '@/components/DataForm'
+
+export default {
+  name: 'NestedField',
+  components: {
+    DataForm
+  },
+  props: {
+    fields: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    errors: {
+      type: [Object, String],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      kwargs: {
+        hasReset: false,
+        hasSaveContinue: false,
+        hasButtons: false
+      }
+    }
+  },
+  computed: {
+    iFields() {
+      const fields = this.fields
+      if (this.errors && typeof this.errors === 'object') {
+        // eslint-disable-next-line prefer-const
+        for (let [name, error] of Object.entries(this.errors)) {
+          const field = fields.find((v) => v.prop === name)
+          if (!field) {
+            continue
+          }
+          this.$log.debug(`${name}: ${error}`)
+          if (typeof error === 'object' && !Array.isArray(error)) {
+            error = this.objectToString(error)
+          }
+          field.attrs.error = error.toString()
+        }
+      }
+      this.$log.debug('Fields change: ', fields, this.errors)
+      return fields
+    }
+  },
+  methods: {
+    objectToString(obj) {
+      let data = ''
+      // eslint-disable-next-line prefer-const
+      for (let [key, value] of Object.entries(obj)) {
+        if (typeof value === 'object') {
+          value = this.objectToString(value)
+        }
+        data += ` ${key}: ${value} `
+      }
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/AutoDataForm/index.vue
+++ b/src/components/AutoDataForm/index.vue
@@ -1,15 +1,20 @@
 <template>
-  <DataForm ref="dataForm" v-loading="loading" :fields="totalFields" v-bind="$attrs" v-on="$listeners">
-    <FormGroupHeader v-for="(group, i) in groups" :slot="'id:'+group.name" :key="'group-'+group.name" :title="group.title" :line="i != 0" />
+  <DataForm ref="dataForm" v-loading="loading" :fields="totalFields" :form="iForm" v-bind="$attrs" v-on="$listeners">
+    <FormGroupHeader
+      v-for="(group, i) in groups"
+      :slot="'id:'+group.name"
+      :key="'group-'+group.name"
+      :group="group"
+      :index="i"
+      :line="i !== 0"
+    />
  </DataForm>
 </template>

 <script>
 import DataForm from '../DataForm'
 import FormGroupHeader from '@/components/FormGroupHeader'
-// import { optionUrlMeta } from '@/api/common'
-import rules from '@/components/DataForm/rules'
-import Select2 from '@/components/Select2'
+import { FormFieldGenerator } from '@/components/AutoDataForm/utils'
 export default {
  name: 'AutoDataForm',
  components: {
@@ -31,6 +36,10 @@ export default {
        return []
      }
    },
+    form: {
+      type: Object,
+      default: () => ({})
+    },
    fieldsMeta: {
      type: Object,
      default: () => ({})
@@ -38,136 +47,52 @@ export default {
  },
  data() {
    return {
-      meta: {},
+      remoteMeta: {},
      totalFields: [],
      loading: true,
-      groups: []
+      groups: [],
+      iForm: this.form,
+      errors: {}
    }
  },
-
  mounted() {
-    this.optionUrlMeta()
+    this.optionUrlMetaAndGenerateColumns()
  },
  methods: {
-    optionUrlMeta() {
+    optionUrlMetaAndGenerateColumns() {
      this.$store.dispatch('common/getUrlMeta', { url: this.url }).then(data => {
-        this.meta = data.actions[this.method.toUpperCase()] || {}
+        this.remoteMeta = data.actions[this.method.toUpperCase()] || {}
        this.generateColumns()
+        this.cleanFormValue()
      }).catch(err => {
-        console.error(err)
+        this.$log.error(err)
      }).finally(() => {
        this.loading = false
      })
    },
-    generateFieldByType(type, field, fieldMeta) {
-      switch (type) {
-        case 'choice':
-          type = 'radio-group'
-          field.options = fieldMeta.choices.map(v => {
-            return { label: v.display_name, value: v.value }
-          })
-          break
-        case 'datetime':
-          type = 'date-picker'
-          field.el = {
-            type: 'datetime'
-          }
-          break
-        case 'field':
-          type = ''
-          field.component = Select2
-          if (fieldMeta.required) {
-            field.el.clearable = false
-          }
-          break
-        case 'string':
-          type = 'input'
-          if (!fieldMeta.max_length) {
-            field.el.type = 'textarea'
-            field.el.rows = 3
-          }
-          break
-        default:
-          type = 'input'
-          break
-      }
-      if (type === 'radio-group') {
-        const options = fieldMeta.choices.map(v => {
-          return { label: v.display_name, value: v.value }
-        })
-        if (options.length > 4) {
-          type = 'select'
-          field.el.filterable = true
-        }
-      }
-      field.type = type
-      return field
-    },
-    generateFieldByName(name, field) {
-      switch (name) {
-        case 'email':
-          field.el.type = 'email'
-          break
-        case 'password':
-          field.el.type = 'password'
-          break
-        case 'comment':
-          field.el.type = 'textarea'
-          break
-      }
-      return field
-    },
-    generateFieldByOther(field, fieldMeta) {
-      const filedRules = field.rules || []
-      if (fieldMeta.required) {
-        if (field.type === 'input') {
-          filedRules.push(rules.Required)
-        } else {
-          filedRules.push(rules.RequiredChange)
-        }
-      }
-      field.rules = filedRules
-      return field
-    },
-    generateField(name) {
-      let field = { id: name, prop: name, el: {}, attrs: {}}
-      const fieldMeta = this.meta[name] || {}
-      field.label = fieldMeta.label
-      field = this.generateFieldByType(fieldMeta.type, field, fieldMeta)
-      field = this.generateFieldByName(name, field)
-      field = this.generateFieldByOther(field, fieldMeta)
-      field = Object.assign(field, this.fieldsMeta[name] || {})
-      _.set(field, 'attrs.error', '')
-      return field
-    },
-    generateFieldGroup(data) {
-      const [groupTitle, fields] = data
-      this.groups.push({
-        id: groupTitle,
-        title: groupTitle,
-        name: fields[0]
-      })
-      return this.generateFields(fields)
-    },
-    generateFields(data) {
-      let fields = []
-      for (let field of data) {
-        if (field instanceof Array) {
-          const items = this.generateFieldGroup(field)
-          fields = [...fields, ...items]
-        } else if (typeof field === 'string') {
-          field = this.generateField(field)
-          fields.push(field)
-        } else if (field instanceof Object) {
-          this.errors[field.prop] = ''
-          _.set(field, 'attrs.error', '')
-          fields.push(field)
-        }
-      }
-      return fields
-    },
    generateColumns() {
-      this.totalFields = this.generateFields(this.fields)
+      const generator = new FormFieldGenerator()
+      this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
+      this.groups = generator.groups
+      this.$log.debug('Total fields: ', this.totalFields)
+    },
+    _cleanFormValue(form, remoteMeta) {
+      for (const [k, v] of Object.entries(remoteMeta)) {
+        if (v.default === undefined) {
+          continue
+        }
+        const valueSet = form[k]
+        if (valueSet !== undefined) {
+          continue
+        }
+        if (v.type === 'nested object' && typeof valueSet === 'object') {
+          this._cleanFormValue(valueSet, v.children)
+        }
+        form[k] = v.default
+      }
+    },
+    cleanFormValue() {
+      this._cleanFormValue(this.iForm, this.remoteMeta)
    },
    setFieldError(name, error) {
      const field = this.totalFields.find((v) => v.prop === name)
@@ -177,7 +102,11 @@ export default {
      if (field.attrs.error === error) {
        error += '.'
      }
-      field.attrs.error = error
+      if (field.type === 'nestedField') {
+        field.el.errors = error
+      } else {
+        field.attrs.error = error
+      }
    }
  }
 }
--- a/src/components/AutoDataForm/utils.js
+++ b/src/components/AutoDataForm/utils.js
@@ -0,0 +1,158 @@
+import Vue from 'vue'
+import Select2 from '@/components/FormFields/Select2'
+import NestedField from '@/components/AutoDataForm/components/NestedField'
+import rules from '@/components/DataForm/rules'
+import { assignIfNot } from '@/utils/common'
+
+export class FormFieldGenerator {
+  constructor() {
+    this.groups = []
+  }
+  generateFieldByType(type, field, fieldMeta, fieldRemoteMeta) {
+    switch (type) {
+      case 'choice':
+        type = 'radio-group'
+        if (!fieldRemoteMeta.read_only) {
+          field.options = fieldRemoteMeta.choices.map(v => {
+            return { label: v.display_name, value: v.value }
+          })
+        }
+        break
+      case 'datetime':
+        type = 'date-picker'
+        field.el = {
+          type: 'datetime'
+        }
+        break
+      case 'field':
+        type = ''
+        field.component = Select2
+        if (fieldRemoteMeta.required) {
+          field.el.clearable = false
+        }
+        break
+      case 'string':
+        type = 'input'
+        if (!fieldRemoteMeta['max_length']) {
+          field.el.type = 'textarea'
+          field.el.rows = 3
+        }
+        if (fieldRemoteMeta['write_only']) {
+          field.el.type = 'password'
+        }
+        break
+      case 'boolean':
+        type = 'checkbox'
+        break
+      case 'nested object':
+        type = 'nestedField'
+        field.component = NestedField
+        field.label = ''
+        field.labelWidth = 0
+        field.el.fields = this.generateNestFields(field, fieldMeta, fieldRemoteMeta)
+        field.el.errors = {}
+        Vue.$log.debug('All fields in generate: ', field.el.allFields)
+        break
+      default:
+        type = 'input'
+        break
+    }
+    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
+        }
+      }
+    }
+    field.type = type
+    return field
+  }
+  generateNestFields(field, fieldMeta, fieldRemoteMeta) {
+    const fields = []
+    const nestedFields = fieldMeta.fields || []
+    const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
+    const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
+    for (const name of nestedFields) {
+      const f = this.generateField(name, nestedFieldsMeta, nestedFieldsRemoteMeta)
+      fields.push(f)
+    }
+    Vue.$log.debug('NestFields: ', fields)
+    return fields
+  }
+  generateFieldByName(name, field) {
+    switch (name) {
+      case 'email':
+        field.el.type = 'email'
+        break
+      case 'password':
+        field.el.type = 'password'
+        break
+      case 'comment':
+        field.el.type = 'textarea'
+        break
+    }
+    return field
+  }
+  generateFieldByOther(field, fieldMeta, fieldRemoteMeta) {
+    const filedRules = field.rules || []
+    if (fieldRemoteMeta.required) {
+      if (field.type === 'input') {
+        filedRules.push(rules.Required)
+      } else {
+        filedRules.push(rules.RequiredChange)
+      }
+    }
+    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 = this.generateFieldByType(remoteFieldMeta.type, field, fieldMeta, remoteFieldMeta)
+    field = this.generateFieldByName(name, field)
+    field = this.generateFieldByOther(field, fieldMeta, remoteFieldMeta)
+    const el = assignIfNot(fieldMeta.el || {}, field.el)
+    const rules = fieldMeta.rules || field.rules
+    field = Object.assign(field, fieldMeta)
+    field.el = el
+    field.rules = rules
+    _.set(field, 'attrs.error', '')
+    // Vue.$log.debug('Generate field: ', name, field)
+    return field
+  }
+  generateFieldGroup(field, fieldsMeta, remoteFieldsMeta) {
+    const [groupTitle, fields] = field
+    this.groups.push({
+      id: groupTitle,
+      title: groupTitle,
+      name: fields[0],
+      fields: fields
+    })
+    return this.generateFields(fields, fieldsMeta, remoteFieldsMeta)
+  }
+  generateFields(_fields, fieldsMeta, remoteFieldsMeta) {
+    let fields = []
+    for (let field of _fields) {
+      if (field instanceof Array) {
+        const items = this.generateFieldGroup(field, fieldsMeta, remoteFieldsMeta)
+        fields = [...fields, ...items]
+      } else if (typeof field === 'string') {
+        field = this.generateField(field, fieldsMeta, remoteFieldsMeta)
+        fields.push(field)
+      } else if (field instanceof Object) {
+        if (this.errors) {
+          this.errors[field.prop] = ''
+        }
+        fields.push(field)
+      }
+    }
+    return fields
+  }
+}
--- a/src/components/AutoDataSearch/index.vue
+++ b/src/components/AutoDataSearch/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <TagSearch :options="options" v-bind="$attrs" v-on="$listeners" />
+  <TagSearch :options="iOption" v-bind="$attrs" v-on="$listeners" />
 </template>

 <script>
@@ -23,9 +23,22 @@ export default {
      default: () => []
    }
  },
+  data() {
+    return {
+      internalOptions: []
+    }
+  },
+  computed: {
+    iOption() {
+      return this.options.concat(this.internalOptions)
+    }
+  },
  watch: {
    options() {
      // 空函数，方便子组件刷新
+    },
+    url() {
+      this.genericOptions()
    }
  },
  mounted() {
@@ -36,6 +49,7 @@ export default {
  methods: {
    async genericOptions() {
      const vm = this // 透传This
+      vm.internalOptions = [] // 重置
      const data = await this.optionUrlMeta()
      const meta = data.actions['GET'] || {}
      for (const [name, field] of Object.entries(meta)) {
@@ -49,7 +63,6 @@ export default {
          label: field.label,
          type: field.type,
          value: name
-
        }
        if (field.type === 'choice' && field.choices) {
          option.children = field.choices.map(item => {
@@ -69,7 +82,7 @@ export default {
            { label: this.$t('common.No'), value: false }
          ]
        }
-        vm.options.push(option)
+        vm.internalOptions.push(option)
      }
    },
    optionUrlMeta() {
@@ -81,5 +94,4 @@ export default {
 </script>

 <style lang='less' scoped>
-
 </style>
--- a/src/components/AutoDataTable/components/ColumnSettingPopover.vue
+++ b/src/components/AutoDataTable/components/ColumnSettingPopover.vue
@@ -0,0 +1,91 @@
+<template>
+  <Dialog
+    v-if="showColumnSettingPopover"
+    :title="$t('common.CustomCol')"
+    :visible.sync="showColumnSettingPopover"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    width="35%"
+    top="10%"
+    @confirm="handleColumnConfirm()"
+  >
+    <el-alert type="success">
+      {{ this.$t('common.TableColSettingInfo') }}
+    </el-alert>
+    <el-checkbox-group
+      v-model="iCurrentColumns"
+    >
+      <el-row>
+        <el-col
+          v-for="item in totalColumnsList"
+          :key="item.prop"
+          :span="8"
+          style="margin-top:5px;"
+        >
+          <el-checkbox
+            :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: {
+    Dialog
+  },
+  props: {
+    totalColumnsList: {
+      type: Array,
+      default: () => []
+    },
+    currentColumns: {
+      type: Array,
+      default: () => []
+    },
+    minColumns: {
+      type: Array,
+      default: () => []
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showColumnSettingPopover: false,
+      iCurrentColumns: ''
+    }
+  },
+  mounted() {
+    this.$eventBus.$on('showColumnSettingPopover', ({ url }) => {
+      if (url === this.url) {
+        this.showColumnSettingPopover = true
+        this.iCurrentColumns = this.currentColumns
+      }
+    })
+  },
+  methods: {
+    handleColumnConfirm() {
+      this.showColumnSettingPopover = false
+      this.$emit('columnsUpdate', { columns: this.iCurrentColumns, url: this.url })
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+</style>
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -1,20 +1,50 @@
 <template>
-  <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" />
+  <div>
+    <DataTable
+      v-if="!loading"
+      ref="dataTable"
+      v-loading="loading"
+      :config="iConfig"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @filter-change="filterChange"
+    />
+    <ColumnSettingPopover
+      :current-columns="popoverColumns.currentCols"
+      :total-columns-list="popoverColumns.totalColumnsList"
+      :min-columns="popoverColumns.minCols"
+      :url="config.url"
+      @columnsUpdate="handlePopoverColumnsChange"
+    />
+  </div>
 </template>

 <script type="text/jsx">
 import DataTable from '../DataTable'
-import { DateFormatter, DetailFormatter, DisplayFormatter, BooleanFormatter, ActionsFormatter } from '@/components/ListTable/formatters'
+import {
+  DateFormatter,
+  DetailFormatter,
+  DisplayFormatter,
+  ActionsFormatter,
+  ChoicesFormatter
+} from '@/components/TableFormatters'
 import i18n from '@/i18n/i18n'
+import ColumnSettingPopover from './components/ColumnSettingPopover'
+import { newURL } from '@/utils/common'
 export default {
  name: 'AutoDataTable',
  components: {
-    DataTable
+    DataTable,
+    ColumnSettingPopover
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
+    },
+    filterTable: {
+      type: Function,
+      default: () => ({})
    }
  },
  data() {
@@ -23,8 +53,18 @@ export default {
      method: 'get',
      autoConfig: {},
      iConfig: {},
-      meta: {}
+      meta: {},
+      cleanedColumnsShow: {},
+      totalColumns: [],
+      popoverColumns: {
+        totalColumnsList: [],
+        minCols: [],
+        currentCols: []
+      }
    }
+  },
+  computed: {
+
  },
  watch: {
    config: {
@@ -40,10 +80,18 @@ 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`
      this.$store.dispatch('common/getUrlMeta', { url: url }).then(data => {
-        this.meta = data.actions[this.method.toUpperCase()] || {}
-        this.generateColumns()
+        const method = this.method.toUpperCase()
+        this.meta = data.actions && data.actions[method] ? data.actions[method] : {}
+        this.generateTotalColumns()
+      }).then(() => {
+        //  根据当前列重新生成最终渲染表格
+        this.filterShowColumns()
+      }).then(() => {
+        // 生成给子组件使用的TotalColList
+        this.generatePopoverColumns()
      }).catch((error) => {
        this.$log.error('Error occur: ', error)
      }).finally(() => {
@@ -59,7 +107,7 @@ export default {
          break
        case 'actions':
          col = {
-            prop: 'id',
+            prop: 'actions',
            label: i18n.t('common.Actions'),
            align: 'center',
            width: '150px',
@@ -69,7 +117,7 @@ export default {
          break
        case 'is_valid':
          col.label = i18n.t('common.Validity')
-          col.formatter = BooleanFormatter
+          col.formatter = ChoicesFormatter
          col.align = 'center'
          col.width = '80px'
          break
@@ -89,7 +137,7 @@ export default {
          col.formatter = DisplayFormatter
          break
        case 'boolean':
-          col.formatter = BooleanFormatter
+          col.formatter = ChoicesFormatter
          col.align = 'center'
          col.width = '80px'
          break
@@ -118,6 +166,37 @@ export default {
      }
      return col
    },
+    addFilterIfNeed(col) {
+      if (col.prop) {
+        const column = this.meta[col.prop] || {}
+        if (!column.filter) {
+          return col
+        }
+        if (column.type === 'boolean') {
+          col.filters = [
+            { text: this.$t('common.Yes'), value: true },
+            { text: this.$t('common.No'), value: false }
+          ]
+          col.sortable = false
+          col['column-key'] = col.prop
+        }
+        if (column.type === 'choice' && column.choices) {
+          col.filters = column.choices.map(item => {
+            if (typeof (item.value) === 'boolean') {
+              if (item.value) {
+                return { text: item['display_name'], value: 'True' }
+              } else {
+                return { text: item['display_name'], value: 'False' }
+              }
+            }
+            return { text: item['display_name'], value: item.value }
+          })
+          col.sortable = false
+          col['column-key'] = col.prop
+        }
+      }
+      return col
+    },
    generateColumn(name) {
      const colMeta = this.meta[name] || {}
      const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
@@ -127,9 +206,10 @@ export default {
      col = this.generateColumnByType(colMeta.type, col)
      col = Object.assign(col, customMeta)
      col = this.addHelpTipsIfNeed(col)
+      col = this.addFilterIfNeed(col)
      return col
    },
-    generateColumns() {
+    generateTotalColumns() {
      const config = _.cloneDeep(this.config)
      const columns = []
      for (let col of config.columns) {
@@ -140,8 +220,85 @@ export default {
          columns.push(col)
        }
      }
+      // 第一次初始化时记录 totalColumns
+      this.totalColumns = columns
      config.columns = columns
      this.iConfig = config
+    },
+    // 生成给子组件使用的TotalColList
+    cleanColumnsShow() {
+      const totalColumnsNames = this.totalColumns.map(obj => obj.prop)
+      // 默认列
+      let defaultColumnsNames = _.get(this.iConfig, 'columnsShow.default', [])
+      if (defaultColumnsNames.length === 0) {
+        defaultColumnsNames = totalColumnsNames
+      }
+      // Clean it
+      defaultColumnsNames = totalColumnsNames.filter(n => defaultColumnsNames.indexOf(n) > -1)
+
+      // 最小列
+      const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
+        .filter(n => defaultColumnsNames.indexOf(n) > -1)
+
+      // 应该显示的列
+      const _tableConfig = localStorage.getItem('tableConfig')
+        ? JSON.parse(localStorage.getItem('tableConfig'))
+        : {}
+      const tableName = this.config.name || this.$route.name + '_' + newURL(this.iConfig.url).pathname
+      const configShowColumnsNames = _.get(_tableConfig[tableName], 'showColumns', null)
+      let showColumnsNames = configShowColumnsNames || defaultColumnsNames
+      if (showColumnsNames.length === 0) {
+        showColumnsNames = totalColumnsNames
+      }
+      // 校对显示的列，是不是包含最小列
+      minColumnsNames.forEach((v, i) => {
+        if (showColumnsNames.indexOf(v) === -1) {
+          showColumnsNames.push(v)
+        }
+      })
+      // Clean it
+      showColumnsNames = totalColumnsNames.filter(n => showColumnsNames.indexOf(n) > -1)
+
+      this.cleanedColumnsShow = {
+        default: defaultColumnsNames,
+        show: showColumnsNames,
+        min: minColumnsNames,
+        configShow: configShowColumnsNames
+      }
+      this.$log.debug('Cleaned columns show: ', this.cleanedColumnsShow)
+    },
+    filterShowColumns() {
+      this.cleanColumnsShow()
+      this.iConfig.columns = this.totalColumns.filter(obj => {
+        return this.cleanedColumnsShow.show.indexOf(obj.prop) > -1
+      })
+    },
+    generatePopoverColumns() {
+      this.popoverColumns.totalColumnsList = this.totalColumns.map(obj => {
+        return { prop: obj.prop, label: obj.label }
+      })
+      this.popoverColumns.currentCols = this.cleanedColumnsShow.show
+      this.popoverColumns.minCols = this.cleanedColumnsShow.min
+      this.$log.debug('Popover cols: ', this.popoverColumns)
+    },
+    handlePopoverColumnsChange({ columns, url }) {
+      this.$log.debug('Columns change: ', columns)
+      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
+      _tableConfig[tableName] = {
+        'showColumns': columns
+      }
+      localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
+      this.filterShowColumns()
+    },
+    filterChange(filters) {
+      const key = Object.keys(filters)[0]
+      const attr = {}
+      attr[key] = filters[key][0]
+      this.filterTable(attr)
    }
  }
 }
--- a/src/components/AutoDataZTree/index.vue
+++ b/src/components/AutoDataZTree/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <DataZTree ref="dataztree" :setting="treeSetting">
-    <slot slot="rMenu">
+  <DataZTree ref="dataztree" :setting="treeSetting" class="data-z-tree" v-on="$listeners">
+    <slot v-if="treeSetting.hasRightMenu" slot="rMenu">
      <li id="m_create" class="rmenu" tabindex="-1" @click="createTreeNode">
        <i class="fa fa-plus-square-o" />  {{ this.$t('tree.CreateNode') }}
      </li>
@@ -40,7 +40,7 @@ export default {
          autoParam: ['id=key', 'name=n', 'level=lv'],
          type: 'get',
          headers: {
-            'X-JMS-ORG': JSON.parse(this.$cookie.get('jms_current_org')) ? JSON.parse(this.$cookie.get('jms_current_org')).id : ''
+            'X-JMS-ORG': this.$store.getters.currentOrg ? this.$store.getters.currentOrg.id : ''
          }
        },
        callback: {
@@ -55,7 +55,8 @@ export default {
          // beforeDrag
          // onDrag
          // beforeAsync: this.defaultCallback.bind(this, 'beforeAsync')
-        }
+        },
+        hasRightMenu: true
      },
      currentNode: '',
      currentNodeId: ''
@@ -63,6 +64,7 @@ export default {
  },
  computed: {
    treeSetting() {
+      this.$log.debug('Settings: ', this.setting)
      return _.merge(this.defaultSetting, this.setting)
    },
    zTree() {
@@ -76,6 +78,10 @@ export default {
    $('body').unbind('mousedown')
  },
  methods: {
+    refreshTree: function() {
+      const refreshIconRef = $('#tree-refresh')
+      refreshIconRef.click()
+    },
    editTreeNode: function() {
      this.hideRMenu()
      const currentNode = this.zTree.getSelectedNodes()[0]
@@ -83,7 +89,7 @@ export default {
        return
      }
      if (currentNode) {
-        currentNode.name = currentNode.meta.node.value
+        currentNode.name = currentNode.meta.data.value
      }
      this.zTree.editName(currentNode)
    },
@@ -98,15 +104,19 @@ export default {
      if (this.setting.url.indexOf('?') !== -1) {
        combinator = '&'
      }
+      let url = ''
+      const query = Object.assign({}, this.$route.query)
      if (treeNode.meta.type === 'node') {
        this.currentNode = treeNode
-        this.currentNodeId = treeNode.meta.node.id
-        this.$route.query['node'] = this.currentNodeId
-        this.$emit('urlChange', `${this.setting.url}${combinator}node_id=${treeNode.meta.node.id}&show_current_asset=${show_current_asset}`)
+        this.currentNodeId = treeNode.meta.data.id
+        query['node'] = this.currentNodeId
+        url = `${this.setting.url}${combinator}node_id=${treeNode.meta.data.id}&show_current_asset=${show_current_asset}`
      } else if (treeNode.meta.type === 'asset') {
-        this.$route.query['asset'] = treeNode.meta.asset.id
-        this.$emit('urlChange', `${this.setting.url}${combinator}asset_id=${treeNode.meta.asset.id}&show_current_asset=${show_current_asset}`)
+        query['asset'] = treeNode.meta.data.id
+        url = `${this.setting.url}${combinator}asset_id=${treeNode.meta.data.id}&show_current_asset=${show_current_asset}`
      }
+      this.$router.push({ query })
+      this.$emit('urlChange', url)
    },
    removeTreeNode: function() {
      this.hideRMenu()
@@ -115,12 +125,13 @@ export default {
        return
      }
      this.$axios.delete(
-        `${this.treeSetting.nodeUrl}${currentNode.meta.node.id}/`
+        `${this.treeSetting.nodeUrl}${currentNode.meta.data.id}/`
      ).then(() => {
        this.$message.success(this.$t('common.deleteSuccessMsg'))
        this.zTree.removeNode(currentNode)
+        this.refreshTree()
      }).catch(() => {
-        // this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+        // this.$message.error(this.$t('common.deleteErrorMsg') + ' ' + error)
      })
    },
    onRename: function(event, treeId, treeNode, isCancel) {
@@ -132,16 +143,14 @@ export default {
        url,
        { 'value': treeNode.name }
      ).then(res => {
-        let assetsAmount = treeNode.meta.node.assetsAmount
+        let assetsAmount = treeNode.meta.data.assetsAmount
        if (!assetsAmount) {
          assetsAmount = 0
        }
        treeNode.name = treeNode.name + ' (' + assetsAmount + ')'
        this.zTree.updateNode(treeNode)
        this.$message.success(this.$t('common.updateSuccessMsg'))
-      }).catch(error => {
-        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
-      })
+      }).finally(() => { this.refreshTree() })
    },
    onBodyMouseDown: function(event) {
      const rMenuID = this.$refs.dataztree.$refs.ztree.iRMenuID
@@ -159,6 +168,11 @@ export default {
      y -= (offset.top + scrollTop) / 3 - 10
      x += document.body.scrollLeft
      y += document.body.scrollTop + document.documentElement.scrollTop
+
+      if (y + $(`#${rMenuID} ul`).height() >= window.innerHeight) {
+        y -= $(`#${rMenuID} ul`).height()
+      }
+
      this.rMenu.css({ 'top': y + 'px', 'left': x + 'px', 'visibility': 'visible' })
      $(`#${rMenuID} ul`).show()
      $('body').bind('mousedown', this.onBodyMouseDown)
@@ -194,9 +208,9 @@ export default {
    onDrop: function(event, treeId, treeNodes, targetNode, moveType) {
      const treeNodesIds = []
      $.each(treeNodes, function(index, value) {
-        treeNodesIds.push(value.meta.node.id)
+        treeNodesIds.push(value.meta.data.id)
      })
-      const theUrl = `${this.treeSetting.nodeUrl}${targetNode.meta.node.id}/children/add/`
+      const theUrl = `${this.treeSetting.nodeUrl}${targetNode.meta.data.id}/children/add/`
      this.$axios.put(
        theUrl, {
          nodes: treeNodesIds
@@ -205,7 +219,7 @@ export default {
        this.$message.success(this.$t('common.updateSuccessMsg'))
      }).catch(error => {
        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
-      })
+      }).finally(() => this.refreshTree())
    },
    createTreeNode: function() {
      this.hideRMenu()
@@ -215,21 +229,21 @@ export default {
      }
      this.zTree.expandNode(parentNode, true, false, true, false)
      // http://localhost/api/v1/assets/nodes/85aa4ee2-0bd9-41db-9079-aa3646448d0c/children/
-      const url = `${this.treeSetting.nodeUrl}${parentNode.meta.node.id}/children/`
+      const url = `${this.treeSetting.nodeUrl}${parentNode.meta.data.id}/children/`
      this.$axios.post(url, {}).then(data => {
        const newNode = {
          id: data['key'],
          name: data['value'],
          pId: parentNode.id,
          meta: {
-            'node': data
+            data: data
          }
        }
        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.node.id || newNode.id
+        this.currentNodeId = node.meta.data.id || newNode.id
        this.zTree.editName(node)
        this.$message.success(this.$t('common.createSuccessMsg'))
      }).catch(error => {
@@ -237,19 +251,21 @@ export default {
      })
    },
    refresh: function() {
-      this.$axios.post(
-        '/api/v1/assets/nodes/00000000-0000-0000-0000-000000000000/tasks/',
-        { action: 'refresh_cache' }
-      )
    },
    getSelectedNodes: function() {
      return this.zTree.getSelectedNodes()
+    },
+    getNodes: function() {
+      return this.zTree.getNodes()
+    },
+    selectNode: function(node) {
+      return this.zTree.selectNode(node)
    }
  }
 }
 </script>

-<style lang='less' scoped>
+<style scoped>
  .rmenu {
    font-size: 12px;
    padding: 0 16px;
@@ -272,4 +288,8 @@ export default {
  .rmenu:hover{
    background-color: #f5f7fa;
  }
+
+  .data-z-tree >>> .fa {
+    width: 10px;
+  }
 </style>
--- a/src/components/CronTab/Crontab.vue
+++ b/src/components/CronTab/Crontab.vue
@@ -0,0 +1,452 @@
+/* eslint-disable */
+<template>
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane v-if="shouldHide('min')" :label="this.$t('common.CronTab.min')">
+        <CrontabMin
+          ref="cronmin"
+          :check="checkNumber"
+          :cron="contabValueObj"
+          @update="updateContabValue"
+        />
+      </el-tab-pane>
+
+      <el-tab-pane v-if="shouldHide('hour')" :label="this.$t('common.CronTab.hour')">
+        <CrontabHour
+          ref="cronhour"
+          :check="checkNumber"
+          :cron="contabValueObj"
+          @update="updateContabValue"
+        />
+      </el-tab-pane>
+
+      <el-tab-pane v-if="shouldHide('day')" :label="this.$t('common.CronTab.day')">
+        <CrontabDay
+          ref="cronday"
+          :check="checkNumber"
+          :cron="contabValueObj"
+          @update="updateContabValue"
+        />
+      </el-tab-pane>
+
+      <el-tab-pane v-if="shouldHide('month')" :label="this.$t('common.CronTab.month')">
+        <CrontabMonth
+          ref="cronmonth"
+          :check="checkNumber"
+          :cron="contabValueObj"
+          @update="updateContabValue"
+        />
+      </el-tab-pane>
+
+      <el-tab-pane v-if="shouldHide('week')" :label="this.$t('common.CronTab.week')">
+        <CrontabWeek
+          ref="cronweek"
+          :check="checkNumber"
+          :cron="contabValueObj"
+          @update="updateContabValue"
+        />
+      </el-tab-pane>
+    </el-tabs>
+
+    <div class="popup-main">
+      <div class="popup-result">
+        <p class="title">{{ this.$t('common.CronTab.timeExpression') }}</p>
+        <table>
+          <thead>
+            <th v-for="item of tabTitles" :key="item" width="40">{{ item }}</th>
+          </thead>
+          <tbody>
+            <td>
+              <el-input
+                v-model.trim="contabValueObj.min"
+                min="0"
+                max="5"
+                size="small"
+                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+              />
+            </td>
+            <td>
+              <el-input
+                v-model.trim="contabValueObj.hour"
+                size="small"
+                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+              />
+            </td>
+            <td>
+              <el-input
+                v-model.trim="contabValueObj.day"
+                size="small"
+                onkeyup="value=value.replace(/[^\0-9\\-\*\,]/g,'')"
+              />
+            </td>
+            <td>
+              <el-input
+                v-model.trim="contabValueObj.month"
+                size="small"
+                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+              />
+            </td>
+            <td>
+              <el-input
+                v-model.trim="contabValueObj.week"
+                size="small"
+                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
+              />
+            </td>
+          </tbody>
+        </table>
+        <div style="margin: 0 auto; text-align: center">
+          <div style="font-size: 13px;">{{ this.$t('common.CronTab.cronExpression') }}</div>
+          <div style="font-size: 13px;">{{ contabValueString }}</div>
+        </div>
+      </div>
+      <CrontabResult :ex="contabValueString" />
+
+      <div class="pop_btn">
+        <el-button
+          size="small"
+          @click="clearCron"
+        >
+          {{ this.$t('common.Reset') }}
+        </el-button>
+        <el-button
+          size="small"
+          type="primary"
+          @click="submitFill"
+        >
+          {{ this.$t('common.Confirm') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CrontabMin from './components/Crontab-Min.vue'
+import CrontabHour from './components/Crontab-Hour.vue'
+import CrontabDay from './components/Crontab-Day.vue'
+import CrontabMonth from './components/Crontab-Month.vue'
+import CrontabWeek from './components/Crontab-Week.vue'
+import CrontabResult from './components/Crontab-Result.vue'
+
+export default {
+  name: 'Vcrontab',
+  components: {
+    CrontabMin,
+    CrontabHour,
+    CrontabDay,
+    CrontabMonth,
+    CrontabWeek,
+    CrontabResult
+  },
+  props: {
+    expression: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    hideComponent: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      tabTitles: [this.$t('common.CronTab.min'), this.$t('common.CronTab.hour'), this.$t('common.CronTab.day'), this.$t('common.CronTab.month'), this.$t('common.CronTab.week')],
+      tabActive: 0,
+      myindex: 0,
+      contabValueObj: {
+        second: '0',
+        min: '0',
+        hour: '*',
+        day: '*',
+        month: '*',
+        week: '*'
+        // year: "",
+      },
+      newContabValueString: ''
+    }
+  },
+  computed: {
+    contabValueString: {
+      get() {
+        const obj = this.contabValueObj
+        const str =
+          obj.min +
+          ' ' +
+          obj.hour +
+          ' ' +
+          obj.day +
+          ' ' +
+          obj.month +
+          ' ' +
+          obj.week
+        return str
+      },
+      set() {
+      }
+    }
+  },
+  watch: {
+    expression: 'resolveExp',
+    hideComponent(value) {
+      // 隐藏部分组件
+    }
+  },
+  mounted: function() {
+    this.resolveExp()
+  },
+  methods: {
+    shouldHide(key) {
+      if (this.hideComponent && this.hideComponent.includes(key)) return false
+      return true
+    },
+    resolveExp() {
+      // 反解析 表达式
+      if (this.expression) {
+        const arr = this.expression.split(' ')
+        if (arr.length >= 5) {
+          // 5 位以上是合法表达式
+          const obj = {
+            min: arr[0],
+            hour: arr[1],
+            day: arr[2],
+            month: arr[3],
+            week: arr[4]
+          }
+          this.contabValueObj = {
+            ...this.contabValueObj,
+            ...obj
+          }
+          for (const i in obj) {
+            if (obj[i]) this.changeRadio(i, obj[i])
+          }
+        }
+      } else {
+        // 没有传入的表达式 则还原
+        this.clearCron()
+      }
+    },
+    // tab切换值
+    tabCheck(index) {
+      this.tabActive = index
+    },
+    // 由子组件触发，更改表达式组成的字段值
+    updateContabValue(name, value, from) {
+      this.contabValueObj[name] = value
+      if (from && from !== name) {
+        console.log(`来自组件 ${from} 改变了 ${name} ${value}`)
+        this.changeRadio(name, value)
+      }
+    },
+    // 赋值到组件
+    changeRadio(name, value) {
+      const arr = ['second', 'min', 'hour', 'month']
+      const refName = 'cron' + name
+      let insVlaue
+
+      if (!this.$refs[refName]) return
+
+      if (arr.includes(name)) {
+        if (value === '*') {
+          insVlaue = 1
+        } else if (value.indexOf('-') > -1) {
+          const indexArr = value.split('-')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].cycle01 = 0)
+            : (this.$refs[refName].cycle01 = indexArr[0])
+          this.$refs[refName].cycle02 = indexArr[1]
+          insVlaue = 2
+        } else if (value.indexOf('/') > -1) {
+          const indexArr = value.split('/')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].average01 = 0)
+            : (this.$refs[refName].average01 = indexArr[0])
+          this.$refs[refName].average02 = indexArr[1]
+          insVlaue = 3
+        } else {
+          insVlaue = 4
+          this.$refs[refName].checkboxList = value.split(',')
+        }
+      } else if (name === 'day') {
+        if (value === '*') {
+          insVlaue = 1
+        } else if (value === '?') {
+          insVlaue = 2
+        } else if (value.indexOf('-') > -1) {
+          const indexArr = value.split('-')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].cycle01 = 0)
+            : (this.$refs[refName].cycle01 = indexArr[0])
+          this.$refs[refName].cycle02 = indexArr[1]
+          insVlaue = 3
+        } else if (value.indexOf('/') > -1) {
+          const indexArr = value.split('/')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].average01 = 0)
+            : (this.$refs[refName].average01 = indexArr[0])
+          this.$refs[refName].average02 = indexArr[1]
+          insVlaue = 4
+        } else if (value.indexOf('W') > -1) {
+          const indexArr = value.split('W')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].workday = 0)
+            : (this.$refs[refName].workday = indexArr[0])
+          insVlaue = 5
+        } else if (value === 'L') {
+          insVlaue = 6
+        } else {
+          this.$refs[refName].checkboxList = value.split(',')
+          insVlaue = 7
+        }
+      } else if (name === 'week') {
+        if (value === '*') {
+          insVlaue = 1
+        } else if (value === '?') {
+          insVlaue = 2
+        } else if (value.indexOf('-') > -1) {
+          const indexArr = value.split('-')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].cycle01 = 0)
+            : (this.$refs[refName].cycle01 = indexArr[0])
+          this.$refs[refName].cycle02 = indexArr[1]
+          insVlaue = 3
+        } else if (value.indexOf('#') > -1) {
+          const indexArr = value.split('#')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].average01 = 1)
+            : (this.$refs[refName].average01 = indexArr[0])
+          this.$refs[refName].average02 = indexArr[1]
+          insVlaue = 4
+        } else if (value.indexOf('L') > -1) {
+          const indexArr = value.split('L')
+          isNaN(indexArr[0])
+            ? (this.$refs[refName].weekday = 1)
+            : (this.$refs[refName].weekday = indexArr[0])
+          insVlaue = 5
+        } else {
+          this.$refs[refName].checkboxList = value.split(',')
+          insVlaue = 6
+        }
+      } else if (name === 'year') {
+        if (value === '') {
+          insVlaue = 1
+        } else if (value === '*') {
+          insVlaue = 2
+        } else if (value.indexOf('-') > -1) {
+          insVlaue = 3
+        } else if (value.indexOf('/') > -1) {
+          insVlaue = 4
+        } else {
+          this.$refs[refName].checkboxList = value.split(',')
+          insVlaue = 5
+        }
+      }
+      this.$refs[refName].radioValue = insVlaue
+    },
+    // 表单选项的子组件校验数字格式（通过-props传递）
+    checkNumber(value, minLimit, maxLimit) {
+      // 检查必须为整数
+      value = Math.floor(value)
+      if (value < minLimit) {
+        value = minLimit
+      } else if (value > maxLimit) {
+        value = maxLimit
+      }
+      return value
+    },
+    // 隐藏弹窗
+    hidePopup() {
+      this.$emit('hide')
+    },
+    // 填充表达式
+    submitFill() {
+      this.$emit('fill', this.contabValueString)
+      this.hidePopup()
+    },
+    clearCron() {
+      // 还原选择项
+      this.contabValueObj = {
+        second: '0',
+        min: '0',
+        hour: '0',
+        day: '*',
+        month: '*',
+        week: '*'
+        // year: "",
+      }
+      for (const j in this.contabValueObj) {
+        this.changeRadio(j, this.contabValueObj[j])
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.pop_btn {
+  text-align: center;
+  margin-top: 20px;
+}
+.popup-main {
+  position: relative;
+  margin: 10px auto 0;
+  background: #fff;
+  border-radius: 5px;
+  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;
+  line-height: 24px;
+  margin: 17px auto;
+  padding: 10px 10px 10px;
+  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;
+  left: 50%;
+  width: 140px;
+  font-size: 14px;
+  margin-left: -70px;
+  text-align: center;
+  line-height: 30px;
+  background: #fff;
+}
+.popup-result table {
+  text-align: center;
+  width: 100%;
+  margin: 0 auto;
+}
+.popup-result table span {
+  display: block;
+  width: 100%;
+  font-family: arial;
+  line-height: 30px;
+  height: 30px;
+  white-space: nowrap;
+  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;
+}
+</style>
--- a/src/components/CronTab/components/Crontab-Day.vue
+++ b/src/components/CronTab/components/Crontab-Day.vue
@@ -0,0 +1,189 @@
+/* eslint-disable */
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1">
+        {{ this.$t('common.CronTab.day') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        {{ this.$t('common.CronTab.from') }}
+        <el-input-number v-model="cycle01" :min="0" :max="31" /> -
+        <el-input-number v-model="cycle02" :min="0" :max="31" /> {{ this.$t('common.CronTab.day') }}
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="4">
+        {{ this.$t('common.CronTab.every') }}
+        <el-input-number v-model="average02" :min="1" :max="31" /> {{ this.$t('common.CronTab.day') }}{{ this.$t('common.CronTab.executeOnce') }}
+      </el-radio>
+    </el-form-item>
+
+    <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-option v-for="item in 31" :key="item" :value="item">{{ item }}</el-option>
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'CrontabDay',
+  props: {
+    cron: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    check: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      radioValue: 1,
+      workday: 1,
+      cycle01: 1,
+      cycle02: 2,
+      average01: 1,
+      average02: 1,
+      checkboxList: [],
+      checkNum: this.$options.propsData.check
+    }
+  },
+  computed: {
+    cycleTotal: {
+      get() {
+        return this.cycle01 + '-' + this.cycle02
+      },
+      set() {
+        this.cycle01 = this.checkNum(this.cycle01, 1, 31)
+        this.cycle02 = this.checkNum(this.cycle02, 1, 31)
+      }
+    },
+    averageTotal: {
+      get() {
+        return '*' + '/' + this.average02
+      },
+      set() {
+        this.average01 = this.checkNum(this.average01, 1, 31)
+        this.average02 = this.checkNum(this.average02, 1, 31)
+      }
+    },
+    checkboxString: {
+      get() {
+        const str = this.checkboxList.join()
+        return str === '' ? '*' : str
+      },
+      set() {
+      }
+    }
+  },
+  watch: {
+    'radioValue': 'radioChange',
+    'cycleTotal': 'cycleChange',
+    'averageTotal': 'averageChange',
+    'workdayCheck': 'workdayChange',
+    'checkboxString': 'checkboxChange'
+  },
+  created() {
+    this.$nextTick(() => {
+      const arrs = []
+      for (let index = 0; index < this.checkboxList.length; index++) {
+        const cur = this.checkboxList[index]
+        arrs.push(parseFloat(cur))
+      }
+      this.checkboxList = arrs
+    })
+  },
+  methods: {
+    // 单选按钮值变化时
+    radioChange() {
+      ('day rachange')
+      if (this.radioValue === 1) {
+        this.$emit('update', 'day', '*', 'day')
+      } else {
+        if (this.cron.hour === '*') {
+          this.$emit('update', 'hour', '0', 'day')
+        }
+        if (this.cron.min === '*') {
+          this.$emit('update', 'min', '0', 'day')
+        }
+        if (this.cron.second === '*') {
+          this.$emit('update', 'second', '0', 'day')
+        }
+      }
+
+      switch (this.radioValue) {
+        case 2:
+          this.$emit('update', 'day', '?')
+          break
+        case 3:
+          this.$emit('update', 'day', this.cycle01 + '-' + this.cycle02)
+          break
+        case 4:
+          this.$emit('update', 'day', '*' + '/' + this.average02)
+          break
+        case 5:
+          this.$emit('update', 'day', this.workday + 'W')
+          break
+        case 6:
+          this.$emit('update', 'day', 'L')
+          break
+        case 7:
+          this.$emit('update', 'day', this.checkboxString)
+          break
+      }
+      ('day rachange end')
+    },
+    // 周期两个值变化时
+    cycleChange() {
+      if (this.radioValue === 3) {
+        this.$emit('update', 'day', this.cycleTotal)
+      }
+    },
+    // 平均两个值变化时
+    averageChange() {
+      if (this.radioValue === 4) {
+        this.$emit('update', 'day', this.averageTotal)
+      }
+    },
+    // 最近工作日值变化时
+    workdayChange() {
+      if (this.radioValue === 5) {
+        this.$emit('update', 'day', this.workday + 'W')
+      }
+    },
+    // checkbox值变化时
+    checkboxChange() {
+      if (this.radioValue === 7) {
+        this.$emit('update', 'day', this.checkboxString)
+      }
+    },
+    // 父组件传递的week发生变化触发
+    weekChange() {
+      // 判断week值与day不能同时为“?”
+      if (this.cron.week === '?' && this.radioValue === 2) {
+        this.radioValue = '1'
+      } else if (this.cron.week !== '?' && this.radioValue !== 2) {
+        this.radioValue = '2'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.el-form-item--small.el-form-item {
+		margin-bottom: 10px;
+	}
+</style>
--- a/src/components/CronTab/components/Crontab-Hour.vue
+++ b/src/components/CronTab/components/Crontab-Hour.vue
@@ -0,0 +1,158 @@
+/* eslint-disable */
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1">
+        {{ this.$t('common.CronTab.hour') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2">
+        {{ this.$t('common.CronTab.from') }}
+        <el-input-number v-model="cycle01" :min="0" :max="60" /> -
+        <el-input-number v-model="cycle02" :min="0" :max="60" /> {{ this.$t('common.CronTab.hour') }}
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        {{ this.$t('common.CronTab.every') }}
+        <el-input-number v-model="average02" :min="1" :max="60" /> {{ this.$t('common.CronTab.hour') }}{{ this.$t('common.CronTab.executeOnce') }}
+      </el-radio>
+    </el-form-item>
+
+    <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-option v-for="item in 24" :key="item" :value="item-1">{{ item-1 }}</el-option>
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'CrontabHour',
+  props: {
+    cron: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    check: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      radioValue: 1,
+      cycle01: 0,
+      cycle02: 1,
+      average01: 0,
+      average02: 1,
+      checkboxList: [],
+      checkNum: this.$options.propsData.check
+    }
+  },
+  computed: {
+    cycleTotal: {
+      get() {
+        return this.cycle01 + '-' + this.cycle02
+      },
+      set() {
+        this.cycle01 = this.checkNum(this.cycle01, 0, 23)
+        this.cycle02 = this.checkNum(this.cycle02, 0, 23)
+      }
+    },
+    averageTotal: {
+      get() {
+        return '*' + '/' + this.average02
+      },
+      set() {
+        this.average01 = this.checkNum(this.average01, 0, 23)
+        this.average02 = this.checkNum(this.average02, 1, 23)
+      }
+    },
+    checkboxString: {
+      get() {
+        const str = this.checkboxList.join()
+        return str === '' ? '*' : str
+      },
+      set() {
+      }
+    }
+  },
+  watch: {
+    'radioValue': 'radioChange',
+    'cycleTotal': 'cycleChange',
+    'averageTotal': 'averageChange',
+    'checkboxString': 'checkboxChange'
+  },
+  created() {
+    this.$nextTick(() => {
+      const arrs = []
+      for (let index = 0; index < this.checkboxList.length; index++) {
+        const cur = this.checkboxList[index]
+        arrs.push(parseFloat(cur))
+      }
+      this.checkboxList = arrs
+    })
+  },
+  methods: {
+    // 单选按钮值变化时
+    radioChange() {
+      if (this.radioValue === 1) {
+        this.$emit('update', 'hour', '*', 'hour')
+        // this.$emit('update', 'day', '*', 'hour')
+      } else {
+        if (this.cron.min === '*') {
+          this.$emit('update', 'min', '0', 'hour')
+        }
+        if (this.cron.second === '*') {
+          this.$emit('update', 'second', '0', 'hour')
+        }
+      }
+      switch (this.radioValue) {
+        case 2:
+          this.$emit('update', 'hour', this.cycle01 + '-' + this.cycle02)
+          break
+        case 3:
+          this.$emit('update', 'hour', '*' + '/' + this.average02)
+          break
+        case 4:
+          this.$emit('update', 'hour', this.checkboxString)
+          break
+      }
+    },
+    // 周期两个值变化时
+    cycleChange() {
+      if (this.radioValue === 2) {
+        this.$emit('update', 'hour', this.cycleTotal)
+      }
+    },
+    // 平均两个值变化时
+    averageChange() {
+      if (this.radioValue === 3) {
+        this.$emit('update', 'hour', this.averageTotal)
+      }
+    },
+    // checkbox值变化时
+    checkboxChange() {
+      if (this.radioValue === 4) {
+        this.$emit('update', 'hour', this.checkboxString)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.el-form-item--small.el-form-item {
+		margin-bottom: 10px
+	}
+</style>
--- a/src/components/CronTab/components/Crontab-Min.vue
+++ b/src/components/CronTab/components/Crontab-Min.vue
@@ -0,0 +1,156 @@
+/* eslint-disable */
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1" size="mini">
+        {{ this.$t('common.CronTab.min') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2">
+        {{ this.$t('common.CronTab.from') }}
+        <el-input-number v-model="cycle01" :min="0" :max="60" /> -
+        <el-input-number v-model="cycle02" :min="0" :max="60" /> {{ this.$t('common.CronTab.min') }}
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        {{ this.$t('common.CronTab.from') }}
+        <el-input-number v-model="average02" :min="1" :max="60" /> {{ this.$t('common.CronTab.min') }}{{ this.$t('common.CronTab.executeOnce') }}
+      </el-radio>
+    </el-form-item>
+
+    <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-option v-for="item in 60" :key="item" :value="item-1">{{ item-1 }}</el-option>
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+
+</template>
+
+<script>
+export default {
+  name: 'CrontabMin',
+  props: {
+    cron: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    check: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      radioValue: 1,
+      cycle01: 1,
+      cycle02: 2,
+      average01: 0,
+      average02: 1,
+      checkboxList: [],
+      checkNum: this.$options.propsData.check
+    }
+  },
+  computed: {
+    cycleTotal: {
+      get() {
+        return this.cycle01 + '-' + (this.cycle02 ? this.cycle02 : '')
+      },
+      set() {
+        this.cycle01 = this.checkNum(this.cycle01, 0, 59)
+        this.cycle02 = this.checkNum(this.cycle02, 0, 59)
+      }
+    },
+    averageTotal: {
+      get() {
+        return '*' + '/' + (this.average02 ? this.average02 : 0)
+      },
+      set() {
+        this.average01 = this.checkNum(this.average01, 0, 59)
+        this.average02 = this.checkNum(this.average02, 1, 59)
+      }
+    },
+    checkboxString: {
+      get() {
+        const str = this.checkboxList.join()
+        return str === '' ? '*' : str
+      },
+      set() {
+      }
+    }
+  },
+  watch: {
+    'radioValue': 'radioChange',
+    'cycleTotal': 'cycleChange',
+    'averageTotal': 'averageChange',
+    'checkboxString': 'checkboxChange'
+  },
+  created() {
+    this.$nextTick(() => {
+      const arrs = []
+      for (let index = 0; index < this.checkboxList.length; index++) {
+        const cur = this.checkboxList[index]
+        arrs.push(parseFloat(cur))
+      }
+      this.checkboxList = arrs
+    })
+  },
+  methods: {
+    // 单选按钮值变化时
+    radioChange() {
+      if (this.radioValue !== 1 && this.cron.second === '*') {
+        this.$emit('update', 'second', '0', 'min')
+      }
+      switch (this.radioValue) {
+        case 1:
+          this.$emit('update', 'min', '*', 'min')
+          this.$emit('update', 'hour', '*', 'min')
+          break
+        case 2:
+          this.$emit('update', 'min', this.cycle01 + '-' + this.cycle02, 'min')
+          break
+        case 3:
+          this.$emit('update', 'min', '*' + '/' + this.average02, 'min')
+          break
+        case 4:
+          this.$emit('update', 'min', this.checkboxString, 'min')
+          break
+      }
+    },
+    // 周期两个值变化时
+    cycleChange() {
+      if (this.radioValue === 2) {
+        this.$emit('update', 'min', this.cycleTotal, 'min')
+      }
+    },
+    // 平均两个值变化时
+    averageChange() {
+      if (this.radioValue === 3) {
+        this.$emit('update', 'min', this.averageTotal, 'min')
+      }
+    },
+    // checkbox值变化时
+    checkboxChange() {
+      if (this.radioValue === 4) {
+        this.$emit('update', 'min', this.checkboxString, 'min')
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+	.el-form-item--small.el-form-item {
+		margin-bottom: 10px;
+	}
+</style>
--- a/src/components/CronTab/components/Crontab-Month.vue
+++ b/src/components/CronTab/components/Crontab-Month.vue
@@ -0,0 +1,163 @@
+/* eslint-disable */
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1">
+        {{ this.$t('common.CronTab.month') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2">
+        {{ this.$t('common.CronTab.from') }}
+        <el-input-number v-model="cycle01" :min="1" :max="12" /> -
+        <el-input-number v-model="cycle02" :min="1" :max="12" /> {{ this.$t('common.CronTab.month') }}
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        {{ this.$t('common.CronTab.every') }}
+        <el-input-number v-model="average02" :min="1" :max="12" /> {{ this.$t('common.CronTab.month') }}{{ this.$t('common.CronTab.executeOnce') }}
+      </el-radio>
+    </el-form-item>
+
+    <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-option v-for="item in 12" :key="item" :value="item">{{ item }}</el-option>
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'CrontabMonth',
+  props: {
+    cron: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    check: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      radioValue: 1,
+      cycle01: 1,
+      cycle02: 2,
+      average01: 1,
+      average02: 1,
+      checkboxList: [],
+      checkNum: this.check
+    }
+  },
+  computed: {
+    cycleTotal: {
+      get() {
+        return this.cycle01 + '-' + this.cycle02
+      },
+      set() {
+        this.cycle01 = this.checkNum(this.cycle01, 1, 12)
+        this.cycle02 = this.checkNum(this.cycle02, 1, 12)
+      }
+    },
+    averageTotal: {
+      get() {
+        return '*' + '/' + this.average02
+      },
+      set() {
+        this.average01 = this.checkNum(this.average01, 1, 12)
+        this.average02 = this.checkNum(this.average02, 1, 12)
+      }
+    },
+    checkboxString: {
+      get() {
+        const str = this.checkboxList.join()
+        return str === '' ? '*' : str
+      },
+      set() {
+      }
+    }
+  },
+  watch: {
+    'radioValue': 'radioChange',
+    'cycleTotal': 'cycleChange',
+    'averageTotal': 'averageChange',
+    'checkboxString': 'checkboxChange'
+  },
+  created() {
+    this.$nextTick(() => {
+      const arrs = []
+      for (let index = 0; index < this.checkboxList.length; index++) {
+        const cur = this.checkboxList[index]
+        arrs.push(parseFloat(cur))
+      }
+      this.checkboxList = arrs
+    })
+  },
+  methods: {
+    // 单选按钮值变化时
+    radioChange() {
+      if (this.radioValue === 1) {
+        this.$emit('update', 'month', '*')
+      } else {
+        if (this.cron.day === '*') {
+          this.$emit('update', 'day', '*', 'month')
+        }
+        if (this.cron.hour === '*') {
+          this.$emit('update', 'hour', '0', 'month')
+        }
+        if (this.cron.min === '*') {
+          this.$emit('update', 'min', '0', 'month')
+        }
+        if (this.cron.second === '*') {
+          this.$emit('update', 'second', '0', 'month')
+        }
+      }
+      switch (this.radioValue) {
+        case 2:
+          this.$emit('update', 'month', this.cycle01 + '-' + this.cycle02)
+          break
+        case 3:
+          this.$emit('update', 'month', '*' + '/' + this.average02)
+          break
+        case 4:
+          this.$emit('update', 'month', this.checkboxString)
+          break
+      }
+    },
+    // 周期两个值变化时
+    cycleChange() {
+      if (this.radioValue === 2) {
+        this.$emit('update', 'month', this.cycleTotal)
+      }
+    },
+    // 平均两个值变化时
+    averageChange() {
+      if (this.radioValue === 3) {
+        this.$emit('update', 'month', this.averageTotal)
+      }
+    },
+    // checkbox值变化时
+    checkboxChange() {
+      if (this.radioValue === 4) {
+        this.$emit('update', 'month', this.checkboxString)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.el-form-item--small.el-form-item {
+		margin-bottom: 10px;
+	}
+</style>
--- a/src/components/CronTab/components/Crontab-Result.vue
+++ b/src/components/CronTab/components/Crontab-Result.vue
@@ -0,0 +1,62 @@
+/* eslint-disable */
+<template>
+  <div class="popup-result">
+    <p class="title">{{ this.$t('common.CronTab.runningTimes') }}</p>
+    <ul class="popup-result-scroll">
+      <template v-if="isShow">
+        <li v-for="item in resultList" :key="item">{{ item }}</li>
+      </template>
+      <li v-else>{{ this.$t('common.CronTab.calculationResults') }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import parser from 'cron-parser'
+import moment from 'moment'
+export default {
+  name: 'CrontabResult',
+  props: {
+    ex: {
+      type: String,
+      default() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      dayRule: '',
+      dayRuleSup: '',
+      dateArr: [],
+      resultList: [],
+      isShow: false
+    }
+  },
+  watch: {
+    'ex': 'expressionChange222'
+  },
+  mounted: function() {
+    // 初始化 获取一次结果
+    this.expressionChange222()
+  },
+  methods: {
+    expressionChange222() {
+      this.isShow = true
+      const rule = 0 + ' ' + this.$options.propsData.ex
+      try {
+        this.resultList = []
+        var 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'))
+        }
+      } catch (error) {
+        this.isShow = false
+        console.log(error, 'error')
+      }
+    }
+  }
+}
+
+</script>
--- a/src/components/CronTab/components/Crontab-Week.vue
+++ b/src/components/CronTab/components/Crontab-Week.vue
@@ -0,0 +1,178 @@
+/* eslint-disable */
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1">
+        {{ this.$t('common.CronTab.week') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        {{ this.$t('common.CronTab.cycleFromWeek') }}
+        <el-input-number v-model="cycle01" :min="1" :max="7" /> -
+        <el-input-number v-model="cycle02" :min="1" :max="7" />
+      </el-radio>
+    </el-form-item>
+
+    <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-option v-for="(item,index) of weekList" :key="index" :value="index+1">{{ item }}</el-option>
+        </el-select>
+      </el-radio>
+    </el-form-item>
+
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'CrontabWeek',
+  props: {
+    cron: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    check: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      radioValue: 2,
+      weekday: 1,
+      cycle01: 1,
+      cycle02: 2,
+      average01: 1,
+      average02: 1,
+      checkboxList: [],
+      weekList: [this.$t('common.CronTab.Monday'), this.$t('common.CronTab.Tuesday'), this.$t('common.CronTab.Wednesday'), this.$t('common.CronTab.Thursday'), this.$t('common.CronTab.Friday'), this.$t('common.CronTab.Saturday'), this.$t('common.CronTab.Sunday')],
+      checkNum: this.$options.propsData.check
+    }
+  },
+  computed: {
+    cycleTotal: {
+      get() {
+        return this.cycle01 + '-' + this.cycle02
+      },
+      set() {
+        this.cycle01 = this.checkNum(this.cycle01, 1, 7)
+        this.cycle02 = this.checkNum(this.cycle02, 1, 7)
+      }
+    },
+    averageTotal: {
+      get() {
+        return this.average01 + '#' + this.average02
+      },
+      set() {
+        this.average01 = this.checkNum(this.average01, 1, 4)
+        this.average02 = this.checkNum(this.average02, 1, 7)
+      }
+    },
+    checkboxString: {
+      get() {
+        const str = this.checkboxList.join()
+        return str === '' ? '*' : str
+      },
+      set() {
+      }
+    }
+  },
+  watch: {
+    'radioValue': 'radioChange',
+    'cycleTotal': 'cycleChange',
+    'averageTotal': 'averageChange',
+    'weekdayCheck': 'weekdayChange',
+    'checkboxString': 'checkboxChange'
+  },
+  created() {
+    this.$nextTick(() => {
+      const arrs = []
+      for (let index = 0; index < this.checkboxList.length; index++) {
+        const cur = this.checkboxList[index]
+        arrs.push(parseFloat(cur))
+      }
+      this.checkboxList = arrs
+    })
+  },
+  methods: {
+    // 单选按钮值变化时
+    radioChange() {
+      if (this.radioValue === 1) {
+        this.$emit('update', 'week', '*')
+        this.$emit('update', 'year', '*')
+      } else {
+        if (this.cron.month === '*') {
+          this.$emit('update', 'month', '*', 'week')
+        }
+        if (this.cron.day === '*') {
+          this.$emit('update', 'day', '*', 'week')
+        }
+        if (this.cron.hour === '*') {
+          this.$emit('update', 'hour', '*', 'week')
+        }
+        if (this.cron.min === '*') {
+          this.$emit('update', 'min', '*', 'week')
+        }
+        if (this.cron.second === '*') {
+          this.$emit('update', 'second', '*', 'week')
+        }
+      }
+      switch (this.radioValue) {
+        case 2:
+          this.$emit('update', 'week', '?')
+          break
+        case 3:
+          this.$emit('update', 'week', this.cycle01 + '-' + this.cycle02)
+          break
+        case 4:
+          this.$emit('update', 'week', this.average01 + '#' + this.average02)
+          break
+        case 5:
+          this.$emit('update', 'week', this.weekday + 'L')
+          break
+        case 6:
+          this.$emit('update', 'week', this.checkboxString)
+          break
+      }
+    },
+    // 根据互斥事件，更改radio的值
+
+    // 周期两个值变化时
+    cycleChange() {
+      if (this.radioValue === 3) {
+        this.$emit('update', 'week', this.cycleTotal)
+      }
+    },
+    // 平均两个值变化时
+    averageChange() {
+      if (this.radioValue === 4) {
+        this.$emit('update', 'week', this.averageTotal)
+      }
+    },
+    // 最近工作日值变化时
+    weekdayChange() {
+      if (this.radioValue === 5) {
+        this.$emit('update', 'week', this.weekday + 'L')
+      }
+    },
+    // checkbox值变化时
+    checkboxChange() {
+      if (this.radioValue === 6) {
+        this.$emit('update', 'week', this.checkboxString)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.el-form-item--small.el-form-item {
+		margin-bottom: 10px;
+	}
+</style>
--- a/src/components/CronTab/index.vue
+++ b/src/components/CronTab/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <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>
+      <Crontab
+        :expression="expression"
+        @hide="showCron = false"
+        @fill="crontabFill"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Crontab from './Crontab.vue'
+export default {
+  components: { Crontab },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      input: _.cloneDeep(this.value),
+      expression: _.cloneDeep(this.value),
+      showCron: false
+    }
+  },
+  methods: {
+    crontabFill(value) {
+      // 确定后回传的值
+      this.input = value
+      this.$emit('change', value)
+    },
+    showDialog() {
+      this.expression = this.input
+      this.showCron = true
+    },
+    onClear() {
+      this.input = ''
+      this.$emit('change', '')
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-dialog__body {
+    padding: 12px 16px;
+}
+</style>
--- a/src/components/DataActions/index.vue
+++ b/src/components/DataActions/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div :class="grouped ? 'el-button-group' : 'el-button-ungroup'">
+    <template v-for="action in iActions">
+      <el-dropdown
+        v-if="action.dropdown"
+        v-show="action.dropdown.length > 0"
+        :key="action.name"
+        class="action-item"
+        trigger="click"
+        placement="bottom-start"
+        @command="handleDropdownCallback"
+      >
+        <el-button :size="size" v-bind="cleanButtonAction(action)">
+          {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <template v-for="option in action.dropdown">
+            <div v-if="option.group" :key="'group:'+option.name" class="dropdown-menu-title">
+              {{ option.group }}
+            </div>
+            <el-dropdown-item
+              :key="option.name"
+              :command="[option, action]"
+              v-bind="option"
+            >
+              {{ option.title }}
+            </el-dropdown-item>
+          </template>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-button
+        v-else
+        :key="action.name"
+        :size="size"
+        v-bind="cleanButtonAction(action)"
+        class="action-item"
+        @click="handleClick(action)"
+      >
+        <el-tooltip :disabled="!action.tip" :content="action.tip" placement="top">
+          <span>
+            <i v-if="action.fa" :class="'fa ' + action.fa" />{{ action.title }}
+          </span>
+        </el-tooltip>
+      </el-button>
+    </template>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DataActions',
+  props: {
+    grouped: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    iActions() {
+      return this.cleanActions(this.actions)
+    }
+  },
+  methods: {
+    handleDropdownCallback(command) {
+      const [option, dropdown] = command
+      const defaultCallback = () => this.$log.debug('No callback found: ', option, dropdown)
+      let callback = option.callback
+      if (!callback) {
+        callback = dropdown.callback
+      }
+      if (!callback) {
+        callback = defaultCallback
+      }
+      return callback(option)
+    },
+    handleClick(action) {
+      if (action && action.callback) {
+        action.callback(action)
+      } else {
+        this.$log.debug('No callback found')
+      }
+      this.$emit('actionClick', action)
+    },
+    checkItem(item, attr, defaults) {
+      if (!item) {
+        return true
+      }
+      let ok = item[attr]
+      if (ok && typeof ok === 'function') {
+        ok = ok(item)
+      } else if (ok == null) {
+        ok = defaults === undefined ? true : defaults
+      }
+      return ok
+    },
+    cleanButtonAction(action) {
+      action = _.cloneDeep(action)
+      delete action['dropdown']
+      delete action['callback']
+      delete action['name']
+      delete action['can']
+      return action
+    },
+    cleanActions(actions) {
+      const cleanedActions = []
+      const cloneActions = _.cloneDeep(actions)
+      for (const v of cloneActions) {
+        if (!v) {
+          continue
+        }
+        const action = Object.assign({}, v)
+        // 是否拥有这个action
+        const has = this.checkItem(action, 'has')
+        delete action['has']
+        if (!has) {
+          continue
+        }
+        // 是否有分割线
+        action.divided = this.checkItem(action, 'divided', false)
+
+        // 是否是disabled
+        const can = this.checkItem(action, 'can')
+        action.disabled = !can
+
+        if (action.dropdown) {
+          // const dropdown = this.cleanActions(action.dropdown)
+          action.dropdown = this.cleanActions(action.dropdown)
+        }
+        cleanedActions.push(action)
+      }
+      return cleanedActions
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dropdown-menu-title {
+  text-align: left;
+  font-size: 12px;
+  color: #909399;
+  line-height: 30px;
+  padding-left: 10px;
+  padding-top: 10px;
+  border-top: solid 1px #e4e7ed;
+}
+
+.dropdown-menu-title:first-child {
+  padding-top: 0;
+  border-top: none;
+}
+
+.el-button-ungroup .action-item {
+  margin-left: 4px
+}
+
+.el-button-ungroup .action-item:first-child {
+  margin-left: 0;
+}
+</style>
--- a/src/components/DataForm/components/el-form-renderer/components/render-form-item.vue
+++ b/src/components/DataForm/components/el-form-renderer/components/render-form-item.vue
@@ -97,6 +97,7 @@ export default {
    }
  },
  props: {
+    // eslint-disable-next-line vue/require-default-prop
    data: Object,
    prop: {
      type: String,
@@ -104,10 +105,13 @@ export default {
        return this.data.id
      }
    },
+    // eslint-disable-next-line vue/require-prop-types,vue/require-default-prop
    itemValue: {},
+    // eslint-disable-next-line vue/require-default-prop
    value: Object,
    disabled: Boolean,
    readonly: Boolean,
+    // eslint-disable-next-line vue/require-default-prop
    options: Array
  },
  data() {
--- a/src/components/DataForm/components/el-form-renderer/el-form-renderer.vue
+++ b/src/components/DataForm/components/el-form-renderer/el-form-renderer.vue
@@ -1,7 +1,7 @@
 <template>
  <el-form ref="elForm" v-bind="$attrs" :model="value" class="el-form-renderer">
    <template v-for="item in innerContent">
-      <slot :name="`id:${item.id}`" />
+      <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
      <component
        :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
        :key="item.id"
@@ -13,7 +13,7 @@
        :options="options[item.id]"
        @updateValue="updateValue"
      />
-      <slot :name="`$id:${item.id}`" />
+      <slot v-if="!isHidden(item)" :name="`$id:${item.id}`" />
    </template>
    <slot />
  </el-form>
@@ -202,6 +202,18 @@ export default {
    setOptions(id, options) {
      _set(this.options, id, options)
      this.options = { ...this.options } // 设置之前不存在的 options 时需要重新设置响应式更新
+    },
+    isHidden(item) {
+      if (!item.el || !item.el['hiddenGroup']) {
+        return false
+      }
+      if (item.hidden === true) {
+        return true
+      }
+      if (typeof item.hidden === 'function') {
+        return item.hidden(this.value)
+      }
+      return false
    }
  }
 }
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -4,7 +4,7 @@
    :content="fields"
    :form="basicForm"
    label-position="right"
-    label-width="17%"
+    label-width="20%"
    v-bind="$attrs"
    v-on="$listeners"
  >
@@ -12,9 +12,10 @@
    <slot v-for="item in fields" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
    <slot v-for="item in fields" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />

-    <el-form-item>
+    <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-form-item>
  </ElFormRender>
@@ -31,10 +32,18 @@ export default {
      type: Boolean,
      default: true
    },
+    hasButtons: {
+      type: Boolean,
+      default: true
+    },
    hasReset: {
      type: Boolean,
      default: true
    },
+    hasSaveContinue: {
+      type: Boolean,
+      default: true
+    },
    fields: {
      type: Array,
      default: () => []
@@ -42,7 +51,7 @@ export default {
    // 初始值
    form: {
      type: Object,
-      default: () => { return {} }
+      default: () => ({})
    },
    moreButtons: {
      type: Array,
@@ -60,11 +69,11 @@ export default {
  },
  methods: {
    // 获取表单数据
-    submitForm(formName) {
+    submitForm(formName, addContinue) {
      const form = this.$refs[formName]
      form.validate((valid) => {
        if (valid) {
-          this.$emit('submit', form.getFormValue(), form)
+          this.$emit('submit', form.getFormValue(), form, addContinue)
        } else {
          this.$emit('invalid', valid)
          return false
@@ -77,7 +86,7 @@ export default {
    },
    handleClick(button) {
      const callback = button.callback || function(values, form) {
-        console.log('Click ', button.title, ': ', values)
+        // console.log('Click ', button.title, ': ', values)
      }
      const form = this.$refs['form']
      const values = form.getFormValue()
--- a/src/components/DataForm/rules/index.js
+++ b/src/components/DataForm/rules/index.js
@@ -8,7 +8,27 @@ export const RequiredChange = {
  required: true, message: i18n.t('common.fieldRequiredError'), trigger: 'change'
 }

+export const EmailCheck = {
+  type: 'email',
+  message: i18n.t('common.InputEmailAddress'),
+  trigger: ['blur', 'change']
+}
+
 export default {
  Required,
-  RequiredChange
+  RequiredChange,
+  EmailCheck
+}
+
+export const JsonRequired = {
+  required: true,
+  trigger: 'change',
+  validator: (rule, value, callback) => {
+    try {
+      JSON.parse(value)
+      callback()
+    } catch (e) {
+      callback(new Error(i18n.t('common.InvalidJson')))
+    }
+  }
 }
--- a/src/components/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
@@ -11,9 +11,10 @@
        v-bind="tableAttrs"
        :data="data"
        :row-class-name="rowClassName"
+        v-on="$listeners"
        @selection-change="selectStrategy.onSelectionChange"
        @select="selectStrategy.onSelect"
-        @select-all="selectStrategy.onSelectAll($event, selectable)"
+        @select-all="selectStrategy.onSelectAll($event, canSelect)"
        @sort-change="onSortChange"
      >
        <!--TODO 不用jsx写, 感觉template逻辑有点不清晰了-->
@@ -90,11 +91,14 @@

        <!--非树-->
        <template v-else>
-          <el-data-table-column v-if="hasSelection" type="selection" :align="selectionAlign" />
+          <el-data-table-column v-if="hasSelection" type="selection" :align="selectionAlign" :selectable="canSelect" />
          <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"
            v-bind="{align: columnsAlign, ...col}"
          >
            <template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row, column, index}">
@@ -163,7 +167,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 = 0
+const defaultFirstPage = 1
 const noPaginationDataPath = 'payload'

 export default {
@@ -422,7 +426,6 @@ export default {
    onEdit: {
      type: Function,
      default(row) {
-        console.log('On delete row')
      }
    },
    /**
@@ -713,6 +716,16 @@ export default {
    hasDetail: {
      type: Boolean,
      default: true
+    },
+    canSelect: {
+      type: Function,
+      default(row, index) {
+        return true
+      }
+    },
+    totalData: {
+      type: Array,
+      default: null
    }
  },
  data() {
@@ -800,6 +813,13 @@ export default {
    },
    _searchForm() {
      return transformSearchImmediatelyItem(this.collapseForm, this)
+    },
+    lastPageNum() {
+      // page
+      const pageOffset = this.firstPage - defaultFirstPage
+      const pageCount = Math.ceil(this.total / this.size)
+      const lastPageNum = pageCount + pageOffset
+      return lastPageNum
    }
  },
  watch: {
@@ -818,6 +838,13 @@ export default {
       * @property {array} rows - 已选中的行数据的数组
       */
      this.$emit('selection-change', val)
+    },
+    totalData(val) {
+      if (val && val.length !== this.total) {
+        this.page = defaultFirstPage
+        this.total = val.length
+        this.getList()
+      }
    }
  },
  mounted() {
@@ -834,6 +861,9 @@ export default {
        }
      }
    }
+    if (this.totalData) {
+      this.getList()
+    }
  },
  methods: {
    getQuery() {
@@ -867,12 +897,58 @@ export default {
      }
      return query
    },
+    getPageData() {
+      return this.data
+    },
+    async gotoNextPage() {
+      if (!this.hasNextPage()) {
+        return false
+      }
+      this.page += 1
+      await this.getList({ loading: true })
+    },
+    hasNextPage() {
+      return this.page < this.lastPageNum
+    },
+    getList({ loading = true } = {}) {
+      const { url } = this
+      if (url) {
+        return this.getListFromRemote({ loading: loading })
+      }
+      if (this.totalData) {
+        return this.getListFromStaticData({ loading: true })
+      }
+      // this.$log.debug("last page is: ", this.lastPageNum)
+    },
+    getListFromStaticData({ loading = true } = {}) {
+      if (loading) {
+        this.loading = true
+      }
+      if (!this.hasPagination) {
+        this.data = this.totalData
+        this.loading = false
+        if (this.isTree) {
+          this.data = this.tree2Array(this.data, this.expandAll)
+        }
+        return this.data
+      }
+      // page
+      const pageOffset = this.firstPage - defaultFirstPage
+      const page = this.page === 0 ? 1 : this.page
+      const start = (page + pageOffset - 1) * this.size
+      const end = (page + pageOffset) * this.size
+      this.$log.debug(`page: ${page}, size: ${this.size}, start: ${start}, end: ${end}`)
+      this.data = this.totalData.slice(start, end)
+      this.loading = false
+      this.data = this.tree2Array(this.data, this.expandAll)
+      return this.data
+    },
    /**
     * 手动刷新列表数据，选项的默认值为: { loading: true }
     * @public
     * @param {object} options 方法选项
     */
-    getList({ loading = true } = {}) {
+    getListFromRemote({ loading = true } = {}) {
      const { url } = this
      if (!url) {
        return
@@ -1000,7 +1076,7 @@ export default {
    },
    handleSizeChange(val) {
      if (this.size === val) return
-
+      this.$emit('sizeChange', val)
      this.page = defaultFirstPage
      this.size = val
      this.getList()
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -1,9 +1,17 @@
 <template>
-  <ElDatableTable ref="table" class="el-table" v-bind="tableConfig" @update="onUpdate" v-on="iListeners" />
+  <ElDatableTable
+    ref="table"
+    class="el-table"
+    v-bind="tableConfig"
+    @update="onUpdate"
+    v-on="iListeners"
+    @sizeChange="handleSizeChange"
+  />
 </template>

 <script>
 import { default as ElDatableTable } from './compenents/el-data-table'
+import { mapGetters } from 'vuex'

 export default {
  name: 'DataTable',
@@ -58,7 +66,6 @@ export default {
        pageCount: 5,
        paginationLayout: 'total, sizes, prev, pager, next',
        paginationSizes: [15, 30, 50, 100],
-        paginationSize: 15,
        paginationBackground: true,
        transformQuery: query => {
          if (query.page && query.size) {
@@ -85,12 +92,25 @@ export default {
  },
  computed: {
    tableConfig() {
-      const config = Object.assign(this.defaultConfig, this.config)
+      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
      return config
    },
    iListeners() {
      return Object.assign({}, this.$listeners, this.tableConfig.listeners)
-    }
+    },
+    dataTable() {
+      return this.$refs.table
+    },
+    ...mapGetters({
+      'globalTableConfig': 'tableConfig'
+    })
  },
  watch: {
    config: {
@@ -131,6 +151,14 @@ export default {
          this.toggleRowSelection(row, true)
        }
      }
+    },
+    handleSizeChange(val) {
+      this.$store.commit('table/SET_TABLE_CONFIG',
+        {
+          key: 'paginationSize',
+          value: val
+        }
+      )
    }
  }
 }
--- a/src/components/DataZTree/components/ZTree/index.vue
+++ b/src/components/DataZTree/components/ZTree/index.vue
@@ -1,6 +1,9 @@
 <template>
  <div>
-    <div class="treebox">
+    <ul v-show="loading" class="ztree">
+      {{ this.$t('common.tree.Loading') }}...
+    </ul>
+    <div v-show="!loading" class="treebox">
      <ul :id="iZTreeID" class="ztree">
        {{ this.$t('common.tree.Loading') }}...
      </ul>
@@ -22,6 +25,7 @@
 import $ from '@/utils/jquery-vendor.js'
 import '@ztree/ztree_v3/js/jquery.ztree.all.min.js'
 import '@/styles/ztree.css'
+import axiosRetry from 'axios-retry'

 const defaultObject = {
  type: Object,
@@ -39,7 +43,9 @@ export default {
      iZTreeID: `zTree_${this._uid}`,
      iRMenuID: `rMenu_${this._uid}`,
      zTree: '',
-      rMenu: ''
+      rMenu: '',
+      init: false,
+      loading: false
    }
  },
  computed: {
@@ -56,7 +62,26 @@ export default {
  },
  methods: {
    initTree: function() {
-      this.$axios.get(this.treeSetting.treeUrl).then(res => {
+      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`
+      } else {
+        treeUrl = this.treeSetting.treeUrl
+      }
+      this.$axios.get(treeUrl, {
+        'axios-retry': {
+          retries: 20,
+          retryCondition: e => {
+            return axiosRetry.isNetworkOrIdempotentRequestError(e) || e.response.status === 409
+          },
+          shouldResetTimeout: true,
+          retryDelay: () => { return 5000 }
+        }
+      }).then(res => {
        if (!res) {
          res = []
        }
@@ -65,7 +90,13 @@ export default {
            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,
@@ -79,6 +110,9 @@ export default {
        if (this.treeSetting.otherMenu) {
          $('.menu-actions').append(this.otherMenu)
        }
+      }).finally(_ => {
+        vm.loading = false
+        vm.init = true
      })
    },
    rootNodeAddDom: function(ztree, callback) {
@@ -95,7 +129,6 @@ export default {
      }
      const refreshIconRef = $('#tree-refresh')
      refreshIconRef.bind('click', function() {
-        ztree.destroy()
        const result = callback()
        if (result && result.then) {
          result.finally(() => {
--- a/src/components/DataZTree/index.vue
+++ b/src/components/DataZTree/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ZTree ref="ztree" :setting="treeSetting">
+  <ZTree ref="ztree" :setting="treeSetting" v-on="$listeners">
    <!--Slot透传-->
    <div slot="rMenu" slot-scope="{data}">
      <slot name="rMenu" :data="data" />
@@ -37,8 +37,8 @@ export default {
          showRemoveBtn: false,
          showRenameBtn: false,
          drag: {
-            isCopy: true,
-            isMove: true
+            isCopy: false,
+            isMove: false
          }
        },
        callback: {
@@ -72,7 +72,7 @@ export default {
  },
  methods: {
    defaultCallback: function(action) {
-      console.log(action)
+      // console.log(action)
    }
  }
 }
--- a/src/components/DetailCard/ItemValue.vue
+++ b/src/components/DetailCard/ItemValue.vue
@@ -28,13 +28,30 @@ export default {
      return this.formatter(this.item, this.value)
    }
    if (typeof this.value === 'boolean') {
-      return <span>{this.toChoicesDisplay(this.value)}</span>
+      return (
+        <span class='item-value'>{this.toChoicesDisplay(this.value)}</span>
+      )
    }
-    return <span>{this.value}</span>
+    if (this.value instanceof Array) {
+      const newArr = this.value || []
+      return (
+        <span class='item-value'>
+          {
+            newArr.map((item, index) => <div key={index}>{item.key}：{item.value} </div>)
+          }
+        </span>
+      )
+    }
+    return (
+      <span class='item-value'>{this.value}</span>
+    )
  }
 }
 </script>

 <style scoped>
+.item-value {
+  word-break: break-word;
+}

 </style>
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -10,7 +10,7 @@
    <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" @click="onConfirm">{{ confirmTitle }}</el-button>
+        <el-button v-if="showConfirm" type="primary" size="small" :loading="loadingStatus" @click="onConfirm">{{ confirmTitle }}</el-button>
      </slot>
    </div>
  </el-dialog>
@@ -42,6 +42,10 @@ export default {
      type: Boolean,
      default: true
    },
+    loadingStatus: {
+      type: Boolean,
+      default: false
+    },
    confirmTitle: {
      type: String,
      default() {
@@ -51,7 +55,6 @@ export default {
  },
  data() {
    return {
-
    }
  },
  methods: {
@@ -70,4 +73,8 @@ export default {
    /*padding-top: 10px;*/
  }

+  .dialog-footer {
+    padding-right: 20px;
+  }
+
 </style>
--- a/src/components/FormFields/DatetimeRangePicker.vue
+++ b/src/components/FormFields/DatetimeRangePicker.vue
@@ -93,7 +93,7 @@ export default {

 <style lang='less' scoped>
  .datepicker{
-    width: 240px;
+    width: 233px;
  }
  .el-input__inner{
    border: 1px solid #dcdee2;
--- a/src/components/FormFields/Link.vue
+++ b/src/components/FormFields/Link.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-link @click="onClick">
+    {{ title }}
+  </el-link>
+</template>
+
+<script>
+export default {
+  name: 'Link',
+  props: {
+    href: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onClick() {
+      window.open(this.href)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/FormFields/PasswordInput.vue
+++ b/src/components/FormFields/PasswordInput.vue
--- a/src/components/FormFields/Select2.vue
+++ b/src/components/FormFields/Select2.vue
@@ -2,13 +2,14 @@
  <el-select
    ref="select"
    v-model="iValue"
+    v-loading="!initialized"
    v-loadmore="loadMore"
    :options="iOptions"
    :remote="remote"
    :remote-method="filterOptions"
    :multiple="multiple"
-    filterable
    :clearable="clearable"
+    filterable
    popper-append-to-body
    class="select2"
    v-bind="$attrs"
@@ -97,7 +98,6 @@ export default {
    return {
      loading: false,
      initialized: false,
-      iValue: this.value ? this.value : [],
      defaultParams: _.cloneDeep(defaultParams),
      params: _.cloneDeep(defaultParams),
      iOptions: this.options || [],
@@ -112,6 +112,18 @@ export default {
    optionsValues() {
      return this.iOptions.map((v) => v.value)
    },
+    iValue: {
+      set(val) {
+        const noValue = !this.value || this.value.length === 0
+        if (noValue && !this.initialized) {
+          return
+        }
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      }
+    },
    iAjax() {
      const defaultPageSize = 10
      const defaultMakeParams = (params) => {
@@ -161,11 +173,14 @@ export default {
      this.iValue = iNew
    }
  },
-  mounted() {
+  async mounted() {
    // this.$log.debug('Select2 url is: ', this.iAjax.url)
    if (!this.initialized) {
-      this.initialSelect()
-      this.initialized = true
+      await this.initialSelect()
+      setTimeout(() => {
+        this.iValue = this.value
+        this.initialized = true
+      })
    }
    this.$nextTick(() => {
      // 因为elform存在问题，这个来清楚验证
@@ -243,9 +258,13 @@ export default {
      // this.$log.debug('Select ajax config', this.iAjax)
      if (this.iAjax.url) {
        if (this.value && this.value.length !== 0) {
-          this.$log.debug('Start init select2 value')
-          const data = await createSourceIdCache(this.value)
-          this.params.spm = data.spm
+          this.$log.debug('Start init select2 value, ', this.value)
+          let value = this.value
+          if (!Array.isArray(value)) {
+            value = [value]
+          }
+          const data = await createSourceIdCache(value)
+          this.params.spm = data['spm']
          await this.getInitialOptions()
        }
        await this.getOptions()
--- a/src/components/FormFields/Swicher.vue
+++ b/src/components/FormFields/Swicher.vue
--- a/src/components/FormFields/UploadField.vue
+++ b/src/components/FormFields/UploadField.vue
--- a/src/components/FormFields/UploadKey.vue
+++ b/src/components/FormFields/UploadKey.vue
@@ -6,16 +6,19 @@
 </template>

 <script>
-
 export default {
  props: {
-    value: {
-      type: String,
-      default: () => ''
-    },
+    // value: {
+    //   type: String,
+    //   default: () => ''
+    // },
    tip: {
      type: String,
      default: () => ''
+    },
+    toFormat: {
+      type: String,
+      default: () => 'string'
    }
  },
  methods: {
@@ -26,7 +29,11 @@ export default {
      const vm = this
      const reader = new FileReader()
      reader.onload = function() {
-        vm.$emit('input', this.result)
+        let result = this.result
+        if (vm.toFormat === 'object') {
+          result = JSON.parse(result)
+        }
+        vm.$emit('input', result)
      }
      reader.readAsText(
        e.target.files[0]
--- a/src/components/FormFields/UserPassword.vue
+++ b/src/components/FormFields/UserPassword.vue
@@ -7,7 +7,7 @@
 </template>

 <script>
-import PasswordInput from '../PasswordInput'
+import PasswordInput from './PasswordInput'
 import { mapGetters } from 'vuex'
 import store from '@/store'
 import i18n from '@/i18n/i18n'
@@ -22,8 +22,12 @@ export default {
    }
  },
  rules(item) {
+    let userIsOrgAdmin = item.el.userIsOrgAdmin
+    // undefined 个人信息更新或用户更改密码页面，使用当前用户；否则使用更新用户表单中传递的值
+    userIsOrgAdmin = userIsOrgAdmin === undefined ? store.getters.currentUserIsAdmin : userIsOrgAdmin
+
    const passwordRule = store.getters.publicSettings.PASSWORD_RULE
-    const validatePassword = (rule, value, callback) => {
+    const validatePassword = function(rule, value, callback) {
      if (!value) {
        return callback()
      }
@@ -46,7 +50,10 @@ export default {
          return callback(new Error(msg))
        }
      }
-      const secureLength = passwordRule ? passwordRule.SECURITY_PASSWORD_MIN_LENGTH : 7
+      let secureLength = passwordRule ? passwordRule.SECURITY_PASSWORD_MIN_LENGTH : 7
+      if (userIsOrgAdmin) {
+        secureLength = passwordRule ? passwordRule.SECURITY_ADMIN_USER_PASSWORD_MIN_LENGTH : 7
+      }
      if (value.length < secureLength) {
        return callback(new Error(i18n.t('common.password.MIN_LENGTH_ERROR', [secureLength])))
      }
@@ -59,17 +66,12 @@ export default {
  data() {
    return {
      attrs: {
-        secureLength: 7
      }
    }
  },
  computed: {
    ...mapGetters(['publicSettings'])
  },
-  created() {
-    const passwordRule = this.publicSettings.PASSWORD_RULE || {}
-    this.attrs.secureLength = passwordRule ? passwordRule.SECURITY_PASSWORD_MIN_LENGTH : 7
-  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
--- a/src/components/FormFields/WeekCronSelect.vue
+++ b/src/components/FormFields/WeekCronSelect.vue
@@ -0,0 +1,409 @@
+<template>
+  <div class="c-weektime">
+    <div class="c-schedue" />
+    <div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" :style="styleValue" />
+    <table class="c-weektime-table" :class="{'c-min-table': colspan < 2}">
+      <thead class="c-weektime-head">
+        <tr>
+          <th rowspan="8" class="week-td">{{ this.$t('common.WeekCronSelect.WeekOrTime') }}</th>
+          <th :colspan="12 * colspan">00:00 - 12:00</th>
+          <th :colspan="12 * colspan">12:00 - 24:00</th>
+        </tr>
+        <tr>
+          <td v-for="t in theadArr" :key="t" :colspan="colspan">{{ t }}</td>
+        </tr>
+      </thead>
+      <tbody class="c-weektime-body">
+        <tr v-for="t in weektimeData" :key="t.row">
+          <td>{{ t.value }}</td>
+          <td
+            v-for="n in t.child"
+            :key="`${n.row}-${n.col}`"
+            :data-week="n.row"
+            :data-time="n.col"
+            :class="selectClasses(n)"
+            class="weektime-atom-item"
+            @mouseenter="cellEnter(n)"
+            @mousedown="cellDown(n)"
+            @mouseup="cellUp(n)"
+          />
+        </tr>
+        <tr>
+          <td colspan="49" class="c-weektime-preview">
+            <div class="g-clearfix c-weektime-con">
+              <span class="g-pull-left">{{ this.$t('common.WeekCronSelect.CanDragSelect') }}</span>
+              <a class="g-pull-right" @click.prevent="clearWeektime">{{ this.$t('common.WeekCronSelect.ClearSelection') }}</a>
+              <a class="g-pull-right g-pull-margin" @click.prevent="selectAll">{{ this.$t('common.WeekCronSelect.SelectAll') }}</a>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+const createArr = len => {
+  return Array.from(Array(len)).map((ret, id) => id)
+}
+function splicing(list) {
+  let same
+  let i = -1
+  const len = list.length
+  const arr = []
+
+  if (!len) return
+  while (++i < len) {
+    const item = list[i]
+    if (item.check) {
+      if (item.check !== Boolean(same)) {
+        arr.push(...['、', item.begin, '~', item.end])
+      } else if (arr.length) {
+        arr.pop()
+        arr.push(item.end)
+      }
+    }
+    same = Boolean(item.check)
+  }
+  arr.shift()
+  return arr.join('')
+}
+export default {
+  name: 'WeekCronSelect',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    colspan: {
+      type: Number,
+      default() {
+        return 2
+      }
+    }
+  },
+  data() {
+    return {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0,
+      mode: 0,
+      row: 0,
+      col: 0,
+      theadArr: [],
+      weekArr: [
+        this.$t('common.WeekCronSelect.Monday'),
+        this.$t('common.WeekCronSelect.Tuesday'),
+        this.$t('common.WeekCronSelect.Wednesday'),
+        this.$t('common.WeekCronSelect.Thursday'),
+        this.$t('common.WeekCronSelect.Friday'),
+        this.$t('common.WeekCronSelect.Saturday'),
+        this.$t('common.WeekCronSelect.Sunday')
+      ],
+      weektimeData: [],
+      timeRange: [] // 格式化之后数据
+    }
+  },
+  computed: {
+    styleValue() {
+      return {
+        width: `${this.width}px`,
+        height: `${this.height}px`,
+        left: `${this.left}px`,
+        top: `${this.top}px`
+      }
+    },
+    selectClasses() {
+      return n => n.check ? 'ui-selected' : ''
+    }
+  },
+  created() {
+    this.init()
+    if (this.value.length > 0) this.nextValue()
+  },
+  methods: {
+    // 初始化数据结构
+    init() {
+      this.theadArr = createArr(24)
+      const isData = this.weekArr.map((ret, index) => {
+        const children = (ret, row, max) => {
+          return createArr(max).map((t, col) => {
+            const curValue = this.formatWeektime(col)
+            return {
+              week: ret,
+              value: curValue,
+              begin: curValue.split('~')[0],
+              end: curValue.split('~')[1],
+              row: row,
+              col: col
+            }
+          })
+        }
+        return {
+          value: ret,
+          row: index,
+          child: children(ret, index, 48)
+        }
+      })
+      this.weektimeData = isData
+    },
+    // 反解析传递过来的默认值
+    nextValue() {
+      const deepValue = _.cloneDeep(this.value)
+      for (let i = 0, len = deepValue.length; i < len; i++) {
+        const cur = deepValue[i]
+        const curValue = cur?.value
+        if (curValue.length > 0) {
+          const childValue = curValue.split('、')
+          for (let j = 0; j < childValue.length; j++) {
+            const curJ = childValue[j]
+            this.renderWeekRange(curJ, cur.id)
+          }
+        }
+      }
+    },
+    // 渲染时间区间
+    renderWeekRange(val, id) {
+      const idNum = id === 0 ? 6 : id - 1
+      const [start, end] = val.split('~')
+      const startVal = this.countIndex(start)
+      const endVal = this.countIndex(end)
+      for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
+        const curWeek = this.weektimeData[idNum]
+        curWeek.child[i].check = true
+      }
+    },
+    // 计算索引
+    countIndex(val) {
+      const one = val.substr(0, 2)
+      const a1 = one.startsWith('0') ? one.substr(1, 2) : one
+      var reg = RegExp(/30/)
+      const a2 = val.match(reg) ? 1 : 0
+      const curIndex = (a1 * 2) + a2
+      return curIndex
+    },
+    formatDate(date, fmt) {
+      const o = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds(),
+        'q+': Math.floor((date.getMonth() + 3) / 3),
+        'S': date.getMilliseconds()
+      }
+      if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+      }
+      for (var k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) {
+          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+        }
+      }
+      return fmt
+    },
+    formatWeektime(col) {
+      const timeStamp = 1542384000000 // '2018-11-17 00:00:00'
+      const beginStamp = timeStamp + col * 1800000 // col * 30 * 60 * 1000
+      const endStamp = beginStamp + 1800000
+
+      const begin = this.formatDate(new Date(beginStamp), 'hh:mm')
+      const end = this.formatDate(new Date(endStamp), 'hh:mm')
+      return `${begin}~${end}`
+    },
+    // 清空时间段
+    clearWeektime() {
+      this.weektimeData.forEach(item => {
+        item.child.forEach(t => {
+          this.$set(t, 'check', false)
+        })
+      })
+      this.timeRange = []
+      this.$emit('change', this.timeRange)
+    },
+    // 全选
+    selectAll() {
+      this.weektimeData.forEach(item => {
+        item.child.forEach(t => {
+          this.$set(t, 'check', true)
+        })
+      })
+      this.setTimeRange()
+    },
+    setTimeRange() {
+      this.timeRange = this.weektimeData.map(item => {
+        return {
+          id: item.row === 6 ? 0 : item.row + 1,
+          value: splicing(item.child)
+        }
+      })
+      this.$emit('change', this.timeRange)
+    },
+    cellEnter(item) {
+      const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`)
+      if (ele && !this.mode) {
+        this.left = ele.offsetLeft
+        this.top = ele.offsetTop
+      } else {
+        if (item.col <= this.col && item.row <= this.row) {
+          this.width = (this.col - item.col + 1) * ele.offsetWidth
+          this.height = (this.row - item.row + 1) * ele.offsetHeight
+          this.left = ele.offsetLeft
+          this.top = ele.offsetTop
+        } else if (item.col >= this.col && item.row >= this.row) {
+          this.width = (item.col - this.col + 1) * ele.offsetWidth
+          this.height = (item.row - this.row + 1) * ele.offsetHeight
+          if (item.col > this.col && item.row === this.row) this.top = ele.offsetTop
+          if (item.col === this.col && item.row > this.row) this.left = ele.offsetLeft
+        } else if (item.col > this.col && item.row < this.row) {
+          this.width = (item.col - this.col + 1) * ele.offsetWidth
+          this.height = (this.row - item.row + 1) * ele.offsetHeight
+          this.top = ele.offsetTop
+        } else if (item.col < this.col && item.row > this.row) {
+          this.width = (this.col - item.col + 1) * ele.offsetWidth
+          this.height = (item.row - this.row + 1) * ele.offsetHeight
+          this.left = ele.offsetLeft
+        }
+      }
+    },
+    cellDown(item) {
+      const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`)
+      this.check = Boolean(item.check)
+      this.mode = 1
+      if (ele) {
+        this.width = ele.offsetWidth
+        this.height = ele.offsetHeight
+      }
+
+      this.row = item.row
+      this.col = item.col
+    },
+    cellUp(item) {
+      if (item.col <= this.col && item.row <= this.row) {
+        this.selectWeek([item.row, this.row], [item.col, this.col], !this.check)
+      } else if (item.col >= this.col && item.row >= this.row) {
+        this.selectWeek([this.row, item.row], [this.col, item.col], !this.check)
+      } else if (item.col > this.col && item.row < this.row) {
+        this.selectWeek([item.row, this.row], [this.col, item.col], !this.check)
+      } else if (item.col < this.col && item.row > this.row) {
+        this.selectWeek([this.row, item.row], [item.col, this.col], !this.check)
+      }
+
+      this.width = 0
+      this.height = 0
+      this.mode = 0
+
+      this.setTimeRange()
+    },
+    selectWeek(row, col, check) {
+      const [minRow, maxRow] = row
+      const [minCol, maxCol] = col
+      this.weektimeData.forEach(item => {
+        item.child.forEach(t => {
+          if (t.row >= minRow && t.row <= maxRow && t.col >= minCol && t.col <= maxCol) {
+            this.$set(t, 'check', check)
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.c-weektime {
+  min-width: 640px;
+  position: relative;
+  display: inline-block;
+}
+.c-schedue {
+  background: #598fe6;
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: .6;
+  pointer-events: none;
+}
+.c-schedue-notransi {
+  transition: width .12s ease, height .12s ease, top .12s ease, left .12s ease;
+}
+.c-weektime-table {
+  border-collapse: collapse;
+  th {
+    vertical-align: inherit;
+    font-weight: bold;
+  }
+  tr {
+    height: 30px;
+  }
+  tr, td, th {
+    user-select: none;
+    border: 1px solid #dee4f5;
+    text-align: center;
+    min-width: 12px;
+    line-height: 1.6em;
+    transition: background .16s ease;
+  }
+  .c-weektime-head {
+    font-size: 12px;
+    .week-td {
+      width: 72px;
+    }
+  }
+  .c-weektime-body {
+    font-size: 12px;
+    td {
+      &.weektime-atom-item {
+        user-select: unset;
+        background-color: #f5f5f5;
+      }
+      &.ui-selected {
+        background-color: #598fe6;
+      }
+    }
+  }
+  .c-weektime-preview {
+    line-height: 2.4em;
+    padding: 0 10px;
+    font-size: 13px;
+    .c-weektime-con {
+      line-height: 42px;
+      user-select: none;
+    }
+    .c-weektime-time {
+      text-align: left;
+      line-height: 2.4em;
+      p {
+        max-width: 625px;
+        line-height: 1.4em;
+        word-break: break-all;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+.c-min-table {
+  tr, td, th {
+    min-width: 24px;
+  }
+}
+.g-clearfix {
+  &:after, &:before {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
+.g-pull-left {
+  float: left;
+}
+.g-pull-right {
+  float: right;
+  color: #409eff!important;
+}
+.g-pull-margin {
+  margin-right: 12px;
+}
+.g-tip-text {
+  color: #999;
+}
+</style>
--- a/src/components/FormFields/index.js
+++ b/src/components/FormFields/index.js
@@ -0,0 +1,33 @@
+import DatetimeRangePicker from './DatetimeRangePicker'
+import Link from './Link'
+import PasswordInput from './PasswordInput'
+import Select2 from './Select2'
+import Swicher from './Swicher'
+import UploadField from './UploadField'
+import UploadKey from './UploadKey'
+import UserPassword from './UserPassword'
+import WeekCronSelect from './WeekCronSelect'
+
+export default {
+  DatetimeRangePicker,
+  Link,
+  PasswordInput,
+  Select2,
+  Swicher,
+  UploadKey,
+  UploadField,
+  UserPassword,
+  WeekCronSelect
+}
+
+export {
+  DatetimeRangePicker,
+  Link,
+  PasswordInput,
+  Select2,
+  Swicher,
+  UploadKey,
+  UploadField,
+  UserPassword,
+  WeekCronSelect
+}
--- a/src/components/FormGroupHeader/index.vue
+++ b/src/components/FormGroupHeader/index.vue
@@ -1,20 +1,24 @@
 <template>
  <div class="form-group-header">
    <div v-if="line" class="hr-line-dashed" />
-    <h3>{{ title }}</h3>
+    <h3>{{ group.title }}</h3>
  </div>
 </template>

 <script>
 export default {
  props: {
-    title: {
-      type: String,
-      default: 'Title'
-    },
    line: {
      type: Boolean,
      default: true
+    },
+    index: {
+      type: Number,
+      default: 1
+    },
+    group: {
+      type: Object,
+      default: () => ({})
    }
  }
 }
--- a/src/components/GrantedAssets/index.vue
+++ b/src/components/GrantedAssets/index.vue
@@ -3,7 +3,7 @@
 </template>

 <script type="text/jsx">
-import { DetailFormatter, SystemUserFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter, SystemUserFormatter } from '@/components/TableFormatters'
 import TreeTable from '../TreeTable'

 export default {
@@ -27,7 +27,7 @@ export default {
          vm.tableConfig.initialUrl = vm.tableConfig.url
        }
        const initialUrl = vm.tableConfig.initialUrl
-        const nodeId = node.meta.node.id
+        const nodeId = node.meta.data.id
        const url = initialUrl.replace('/assets/', `/nodes/${nodeId}/assets/`)
        vm.tableConfig.url = url
      }
@@ -65,22 +65,24 @@ export default {
            sortable: true,
            formatterArgs: {
              route: 'AssetDetail'
-            }
+            },
+            showOverflowTooltip: true
          },
          {
            prop: 'ip',
            label: this.$t('assets.IP'),
+            width: '140px',
            sortable: 'custom'
          },
          {
            prop: 'systemUsers',
            label: this.$t('assets.SystemUsers'),
            align: 'center',
-            width: '200px',
            formatter: SystemUserFormatter,
            formatterArgs: {
              getUrl: this.getShowUrl.bind(this)
-            }
+            },
+            showOverflowTooltip: true
          }
        ]
      },
--- a/src/components/IBox/HeadingIBox.vue
+++ b/src/components/IBox/HeadingIBox.vue
@@ -1,6 +1,6 @@
 <template>
  <IBox v-bind="$attrs">
-    <div class="ibox-heading">
+    <div v-if="contentHeading" class="ibox-heading">
      <slot name="content-heading">
        <h3 v-if="contentHeading.title"><i v-if="contentHeading.fa" :class="'fa ' + contentHeading.fa" /> {{ contentHeading.title }}</h3>
        <small v-if="contentHeading.content"><i class="fa fa-tim" /> {{ contentHeading.content }}</small>
@@ -18,7 +18,7 @@ export default {
  props: {
    contentHeading: {
      type: Object,
-      default: () => ({})
+      default: null
    }
  }
 }
--- a/src/components/ListTable/TableAction/ExportDialog.vue
+++ b/src/components/ListTable/TableAction/ExportDialog.vue
@@ -1,24 +1,45 @@
 <template>
-  <Dialog v-if="showExportDialog" :title="$t('common.Export')" :visible.sync="showExportDialog" :destroy-on-close="true" @confirm="handleExportConfirm()" @cancel="handleExportCancel()">
-    <el-form label-position="left" style="padding-left: 50px">
-      <el-form-item class="export-form" :label="this.$t('common.imExport.ExportRange')" :label-width="'100px'">
-        <el-radio-group v-model="exportOption">
-          <el-radio v-for="option of exportOptions" :key="option.value" class="export-item" :label="option.value" :disabled="!option.can">{{ option.label }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-  </Dialog>
+  <div>
+    <MFAVerifyDialog
+      v-if="mfaDialogShow"
+      @MFAVerifyDone="showExportDialog"
+      @MFAVerifyCancel="handleExportCancel"
+    />
+    <Dialog
+      v-if="exportDialogShow"
+      :title="$t('common.Export')"
+      :visible.sync="exportDialogShow"
+      :destroy-on-close="true"
+      @confirm="handleExportConfirm()"
+      @cancel="handleExportCancel()"
+    >
+      <el-form label-position="left" style="padding-left: 50px">
+        <el-form-item :label="$t('common.fileType' )" :label-width="'100px'">
+          <el-radio-group v-model="exportTypeOption">
+            <el-radio v-for="option of exportTypeOptions" :key="option.value" style="padding: 10px 20px;" :label="option.value" :disabled="!option.can">{{ option.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item class="export-form" :label="this.$t('common.imExport.ExportRange')" :label-width="'100px'">
+          <el-radio-group v-model="exportOption">
+            <el-radio v-for="option of exportOptions" :key="option.value" class="export-item" :label="option.value" :disabled="!option.can">{{ option.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
 </template>

 <script>
 import Dialog from '@/components/Dialog'
+import MFAVerifyDialog from '@/components/MFAVerifyDialog'
 import { createSourceIdCache } from '@/api/common'
 import * as queryUtil from '@/components/DataTable/compenents/el-data-table/utils/query'

 export default {
  name: 'ExportDialog',
  components: {
-    Dialog
+    Dialog,
+    MFAVerifyDialog
  },
  props: {
    selectedRows: {
@@ -27,12 +48,20 @@ export default {
    },
    url: {
      type: String,
-      default: () => ''
+      default: ''
+    },
+    beforeExport: {
+      type: Function,
+      default: () => {}
+    },
+    mfaVerifyRequired: {
+      type: Boolean,
+      default: false
    },
    performExport: {
      type: Function,
-      default(selectedRows, exportOptions, query) {
-        return this.defaultPerformExport(selectedRows, exportOptions, query)
+      default(selectedRows, exportOptions, query, exportType) {
+        return this.defaultPerformExport(selectedRows, exportOptions, query, exportType)
      }
    },
    canExportAll: {
@@ -50,9 +79,12 @@ export default {
  },
  data() {
    return {
-      showExportDialog: false,
+      exportDialogShow: false,
      exportOption: 'all',
-      meta: {}
+      exportTypeOption: 'csv',
+      meta: {},
+      mfaVerified: false,
+      mfaDialogShow: false
    }
  },
  computed: {
@@ -92,21 +124,50 @@ export default {
          can: this.tableHasQuery && this.canExportFiltered
        }
      ]
+    },
+    exportTypeOptions() {
+      return [
+        {
+          label: 'CSV',
+          value: 'csv',
+          can: true
+        },
+        {
+          label: 'Excel',
+          value: 'xlsx',
+          can: true
+        }
+      ]
    }
  },
  mounted() {
-    this.$eventBus.$on('showExportDialog', (row) => {
-      this.showExportDialog = true
+    this.$eventBus.$on('showExportDialog', ({ selectedRows, url, name }) => {
+      // Todo: 没有时间了，只能先这么处理了
+      if (url === this.url || url.indexOf(this.url) > -1 || url.indexOf('account') > -1) {
+        this.showExportDialog()
+      }
    })
  },
  methods: {
+    showExportDialog() {
+      if (!this.mfaVerifyRequired) {
+        this.exportDialogShow = true
+        return
+      }
+      // 这是需要校验 MFA 的
+      if (!this.mfaDialogShow) {
+        this.mfaDialogShow = true
+      } else {
+        this.exportDialogShow = true
+      }
+    },
    downloadCsv(url) {
      const a = document.createElement('a')
      a.href = url
      a.click()
      window.URL.revokeObjectURL(url)
    },
-    async defaultPerformExport(selectRows, exportOption, q) {
+    async defaultPerformExport(selectRows, exportOption, q, exportTypeOption) {
      const url = (process.env.VUE_APP_ENV === 'production') ? (`${this.url}`) : (`${process.env.VUE_APP_BASE_API}${this.url}`)
      const query = Object.assign({}, q)
      if (exportOption === 'selected') {
@@ -117,13 +178,8 @@ export default {
        }
        const spm = await createSourceIdCache(resources)
        query['spm'] = spm.spm
-      } else if (exportOption === 'filtered') {
-        // console.log(listTableRef)
-        // console.log(listTableRef.dataTable)
-        // delete query['limit']
-        // delete query['offset']
      }
-      query['format'] = 'csv'
+      query['format'] = exportTypeOption
      const queryStr =
          (url.indexOf('?') > -1 ? '&' : '?') +
          queryUtil.stringify(query, '=', '&')
@@ -131,17 +187,20 @@ export default {
    },
    async handleExport() {
      const listTableRef = this.$parent.$parent.$parent.$parent
-      const query = listTableRef.dataTable.getQuery()
+      const query = listTableRef['dataTable'].getQuery()
      delete query['limit']
      delete query['offset']
-      return this.performExport(this.selectedRows, this.exportOption, query)
+      await this.beforeExport()
+      return this.performExport(this.selectedRows, this.exportOption, query, this.exportTypeOption)
    },
    async handleExportConfirm() {
      await this.handleExport()
-      this.showExportDialog = false
+      this.exportDialogShow = false
+      this.mfaDialogShow = false
    },
    handleExportCancel() {
-      this.showExportDialog = false
+      this.exportDialogShow = false
+      this.mfaDialogShow = false
    }
  }
 }
--- a/src/components/ListTable/TableAction/ImExportDialog.vue
+++ b/src/components/ListTable/TableAction/ImExportDialog.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
-    <ExportDialog :selected-rows="selectedRows" :url="url" v-bind="$attrs" v-on="$listeners" />
-    <ImportDialog :selected-rows="selectedRows" :url="url" v-bind="$attrs" v-on="$listeners" />
+    <ExportDialog :selected-rows="selectedRows" v-bind="exportOptions" v-on="$listeners" />
+    <ImportDialog :selected-rows="selectedRows" v-bind="importOptions" v-on="$listeners" />
  </div>
 </template>

@@ -10,7 +10,7 @@ import ExportDialog from './ExportDialog'
 import ImportDialog from './ImportDialog'

 export default {
-  name: 'DialogAction',
+  name: 'ImExportDialog',
  components: {
    ExportDialog,
    ImportDialog
@@ -20,9 +20,13 @@ export default {
      type: Array,
      default: () => []
    },
-    url: {
-      type: String,
-      default: () => ''
+    exportOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    importOptions: {
+      type: Object,
+      default: () => ({})
    }
  },
  data() {
--- a/src/components/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/ListTable/TableAction/ImportDialog.vue
@@ -1,52 +1,73 @@
 <template>
-  <Dialog :title="$t('common.Import')" :visible.sync="showImportDialog" :destroy-on-close="true" @confirm="handleImportConfirm" @cancel="handleImportCancel()">
-    <el-form label-position="left" style="padding-left: 50px">
+  <Dialog
+    :title="importTitle"
+    :visible.sync="showImportDialog"
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    :loading-status="loadStatus"
+    width="80%"
+    class="importDialog"
+    :show-cancel="false"
+    :show-confirm="false"
+    @close="handleImportCancel"
+  >
+    <el-form v-if="!showTable" label-position="left" style="padding-left: 50px">
      <el-form-item :label="$t('common.Import' )" :label-width="'100px'">
-        <el-radio v-model="importOption" class="export-item" label="1">{{ this.$t('common.Create') }}</el-radio>
-        <el-radio v-model="importOption" class="export-item" label="2">{{ this.$t('common.Update') }}</el-radio>
+        <el-radio v-model="importOption" class="export-item" label="create">{{ this.$t('common.Create') }}</el-radio>
+        <el-radio v-model="importOption" class="export-item" label="update">{{ this.$t('common.Update') }}</el-radio>
        <div style="line-height: 1.5">
-          <span v-if="importOption==='1'" class="el-upload__tip">
-            {{ this.$t('common.imExport.downloadImportTemplateMsg') }}
-            <el-link type="success" :underline="false" :href="downloadImportTempUrl">{{ this.$t('common.Download') }}</el-link>
-          </span>
-          <span v-else class="el-upload__tip">
-            {{ this.$t('common.imExport.downloadUpdateTemplateMsg') }}
-            <el-link type="success" :underline="false" @click="downloadUpdateTempUrl">{{ this.$t('common.Download') }}</el-link>
+          <span class="el-upload__tip">
+            {{ downloadTemplateTitle }}
+            <el-link type="success" :underline="false" style="padding-left: 10px" @click="downloadTemplateFile('csv')"> CSV </el-link>
+            <el-link type="success" :underline="false" style="padding-left: 10px" @click="downloadTemplateFile('xlsx')"> XLSX </el-link>
          </span>
        </div>
      </el-form-item>
-      <el-form-item :label="$t('common.Upload' )" :label-width="'100px'">
+      <el-form-item :label="$t('common.Upload' )" :label-width="'100px'" class="file-uploader">
        <el-upload
          ref="upload"
+          drag
          action="string"
          list-type="text/csv"
-          :http-request="handleImport"
          :limit="1"
          :auto-upload="false"
+          :on-change="onFileChange"
          :before-upload="beforeUpload"
+          accept=".csv,.xlsx"
        >
-          <el-button size="mini" type="default">{{ this.$t('common.SelectFile') }}</el-button>
-          <div slot="tip" :class="uploadHelpTextClass" style="line-height: 1.5">{{ this.$t('common.imExport.onlyCSVFilesTips') }}</div>
+          <i class="el-icon-upload" />
+          <div class="el-upload__text">{{ $t('common.imExport.dragUploadFileInfo') }}</div>
+          <div slot="tip" class="el-upload__tip">
+            <span :class="{'hasError': hasFileFormatOrSizeError }">{{ $t('common.imExport.uploadCsvLth10MHelpText') }}</span>
+            <div v-if="renderError" class="hasError">{{ renderError }}</div>
+          </div>
        </el-upload>
      </el-form-item>
    </el-form>
-    <div v-if="errorMsg" class="error-msg error-results">
-      <ul v-if="typeof errorMsg === 'object'">
-        <li v-for="(item, index) in errorMsg" :key="item + '-' + index"> {{ item }}</li>
-      </ul>
-      <span v-else>{{ errorMsg }}</span>
+    <div v-else class="importTableZone">
+      <ImportTable
+        ref="importTable"
+        :json-data="jsonData"
+        :import-option="importOption"
+        :url="url"
+        @cancel="cancelUpload"
+        @finish="closeDialog"
+      />
    </div>
  </Dialog>
 </template>

 <script>
 import Dialog from '@/components/Dialog'
+import ImportTable from '@/components/ListTable/TableAction/ImportTable'
+import { getErrorResponseMsg } from '@/utils/common'
 import { createSourceIdCache } from '@/api/common'

 export default {
  name: 'ImportDialog',
  components: {
-    Dialog
+    Dialog,
+    ImportTable
  },
  props: {
    selectedRows: {
@@ -61,82 +82,119 @@ export default {
  data() {
    return {
      showImportDialog: false,
-      importOption: '1',
-      isCsv: true,
-      errorMsg: ''
+      importOption: 'create',
+      errorMsg: '',
+      loadStatus: false,
+      importTypeOption: 'csv',
+      importTypeIsCsv: true,
+      showTable: false,
+      renderError: '',
+      hasFileFormatOrSizeError: false,
+      jsonData: {}
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRows.length > 0
    },
-    upLoadUrl() {
-      return this.url
-    },
-    downloadImportTempUrl() {
-      const url = (this.url.indexOf('?') === -1) ? `${this.url}?format=csv&template=import&limit=1` : `${this.url}&format=csv&template=import&limit=1`
-      return url
-    },
    uploadHelpTextClass() {
      const cls = ['el-upload__tip']
      if (!this.isCsv) {
        cls.push('error-msg')
      }
      return cls
+    },
+    downloadTemplateTitle() {
+      if (this.importOption === 'create') {
+        return this.$t('common.imExport.downloadImportTemplateMsg')
+      } else {
+        return this.$t('common.imExport.downloadUpdateTemplateMsg')
+      }
+    },
+    importTitle() {
+      if (this.importOption === 'create') {
+        return this.$t('common.Import') + this.$t('common.Create')
+      } else {
+        return this.$t('common.Import') + this.$t('common.Update')
+      }
+    }
+  },
+  watch: {
+    importOption(val) {
+      this.showTable = false
    }
  },
  mounted() {
-    this.$eventBus.$on('showImportDialog', (row) => {
-      this.showImportDialog = true
+    this.$eventBus.$on('showImportDialog', ({ url }) => {
+      if (url === this.url) {
+        this.showImportDialog = true
+      }
    })
  },
  methods: {
-    performUpdate(item) {
-      this.$axios.put(
-        this.upLoadUrl,
-        item.file,
-        { headers: { 'Content-Type': 'text/csv' }, disableFlashErrorMsg: true }
-      ).then((data) => {
-        const msg = this.$t('common.imExport.updateSuccessMsg', { count: data.length })
-        this.onSuccess(msg)
+    closeDialog() {
+      this.showImportDialog = false
+    },
+    cancelUpload() {
+      this.showTable = false
+      this.renderError = ''
+      this.jsonData = {}
+    },
+    onFileChange(file, fileList) {
+      fileList.splice(0, fileList.length)
+      if (file.status !== 'ready') {
+        return
+      }
+      // const isCsv = file.raw.type = 'text/csv'
+      if (!this.beforeUpload(file)) {
+        return
+      }
+      const isCsv = file.name.indexOf('csv') > -1
+      const url = new URL(this.url, 'http://localhost')
+      url.pathname += 'render-to-json/'
+      const renderToJsonUrl = url.toString().replace('http://localhost', '')
+      this.$axios.post(
+        renderToJsonUrl,
+        file.raw,
+        { headers: { 'Content-Type': isCsv ? 'text/csv' : 'text/xlsx' }, disableFlashErrorMsg: true }
+      ).then(data => {
+        this.jsonData = data
+        this.showTable = true
      }).catch(error => {
-        this.catchError(error)
+        fileList.splice(0, fileList.length)
+        this.renderError = getErrorResponseMsg(error)
+      }).finally(() => {
+        this.loadStatus = false
      })
    },
-    performCreate(item) {
-      this.$axios.post(
-        this.upLoadUrl,
-        item.file,
-        { headers: { 'Content-Type': 'text/csv' }, disableFlashErrorMsg: true }
-      ).then((data) => {
-        const msg = this.$t('common.imExport.createSuccessMsg', { count: data.length })
-        this.onSuccess(msg)
-      }).catch(error => {
-        this.catchError(error)
-      })
+    beforeUpload(file) {
+      const isLt30M = file.size / 1024 / 1024 < 30
+      if (!isLt30M) {
+        this.hasFileFormatOrSizeError = true
+      }
+      return isLt30M
+    },
+    async downloadTemplateFile(tp) {
+      const downloadUrl = await this.getDownloadTemplateUrl(tp)
+      window.open(downloadUrl)
+    },
+    async getDownloadTemplateUrl(tp) {
+      const template = this.importOption === 'create' ? 'import' : 'update'
+      let query = `format=${tp}&template=${template}`
+      if (this.importOption === 'update' && this.selectedRows.length > 0) {
+        const resources = []
+        for (const item of this.selectedRows) {
+          resources.push(item.id)
+        }
+        const resp = await createSourceIdCache(resources)
+        query += `&spm=${resp.spm}`
+      } else {
+        query += '&limit=1'
+      }
+      return this.url.indexOf('?') === -1 ? `${this.url}?${query}` : `${this.url}&${query}`
    },
    catchError(error) {
-      this.$refs.upload.clearFiles()
-      if (error.response && error.response.status === 400) {
-        const errorData = error.response.data
-        const totalErrorMsg = []
-        errorData.forEach((value, index) => {
-          if (typeof value === 'string') {
-            totalErrorMsg.push(`line ${index}. ${value}`)
-          } else {
-            const errorMsg = [`line ${index}. `]
-            for (const [k, v] of Object.entries(value)) {
-              if (v) {
-                errorMsg.push(`${k}: ${v}`)
-              }
-            }
-            if (errorMsg.length > 1) {
-              totalErrorMsg.push(errorMsg.join(' '))
-            }
-          }
-        })
-        this.errorMsg = totalErrorMsg
-      }
+      console.log(error)
    },
    onSuccess(msg) {
      this.errorMsg = ''
@@ -148,33 +206,14 @@ export default {
      a.click()
      window.URL.revokeObjectURL(url)
    },
-    handleImport(item) {
-      if (this.importOption === '1') {
-        this.performCreate(item)
-      } else {
-        this.performUpdate(item)
-      }
-    },
-    async downloadUpdateTempUrl() {
-      var resources = []
-      const data = this.selectedRows
-      for (let index = 0; index < data.length; index++) {
-        resources.push(data[index].id)
-      }
-      const spm = await createSourceIdCache(resources)
-      const baseUrl = (process.env.VUE_APP_ENV === 'production') ? (`${this.url}`) : (`${process.env.VUE_APP_BASE_API}${this.url}`)
-      const url = `${baseUrl}?format=csv&template=update&spm=` + spm.spm
-      return this.downloadCsv(url)
-    },
    async handleImportConfirm() {
-      this.$refs.upload.submit()
+      this.$refs['importTable'].performUpload()
    },
    handleImportCancel() {
      this.showImportDialog = false
-    },
-    beforeUpload(file) {
-      this.isCsv = _.endsWith(file.name, 'csv')
-      return this.isCsv
+      this.showTable = false
+      this.renderError = ''
+      this.jsonData = {}
    }
  }
 }
@@ -191,4 +230,49 @@ export default {
    overflow: auto
  }

+  .importDialog >>> .el-form-item.file-uploader {
+    padding-right: 150px;
+  }
+
+  .file-uploader >>> .el-upload {
+    width: 100%;
+    //padding-right: 150px;
+  }
+
+  .file-uploader >>> .el-upload-dragger {
+    width: 100%;
+  }
+
+  .importTableZone {
+    padding: 0 20px;
+
+    .importTable {
+      overflow: auto;
+    }
+
+    .tableFilter {
+      padding-bottom: 10px;
+    }
+  }
+
+  .importTable >>> .el-dialog__body {
+    padding-bottom: 20px;
+  }
+
+  .export-item {
+    margin-left: 80px;
+  }
+
+  .export-item:first-child {
+    margin-left: 0;
+  }
+
+  .hasError {
+    color: $--color-danger;
+  }
+
+  .el-upload__tip {
+    line-height: 1.5;
+    padding-top: 0;
+  }
 </style>
--- a/src/components/ListTable/TableAction/ImportTable.vue
+++ b/src/components/ListTable/TableAction/ImportTable.vue
@@ -0,0 +1,427 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="8">
+        <div class="tableFilter">
+          <el-radio-group v-model="importStatusFilter" size="small">
+            <el-radio-button label="all">{{ $t('common.Total') }}</el-radio-button>
+            <el-radio-button label="ok">{{ $t('common.Success') }}</el-radio-button>
+            <el-radio-button label="error">{{ $t('common.Failed') }}</el-radio-button>
+            <el-radio-button label="pending">{{ $t('common.Pending') }}</el-radio-button>
+          </el-radio-group>
+        </div>
+      </el-col>
+      <el-col :span="8" style="text-align: center">
+        <span class="summary-item summary-total"> {{ $t('common.Total') }}: {{ totalCount }}</span>
+        <span class="summary-item summary-success"> {{ $t('common.Success') }}: {{ successCount }}</span>
+        <span class="summary-item summary-failed"> {{ $t('common.Failed') }}: {{ failedCount }}</span>
+        <span class="summary-item summary-pending"> {{ $t('common.Pending') }}: {{ pendingCount }}</span>
+      </el-col>
+    </el-row>
+    <div class="row">
+      <el-progress :percentage="processedPercent" />
+    </div>
+    <DataTable v-if="tableGenDone" id="importTable" ref="dataTable" :config="tableConfig" class="importTable" />
+    <div class="row" style="padding-top: 20px">
+      <div style="float: right">
+        <el-button size="small" @click="performCancel">{{ $t('common.Cancel') }}</el-button>
+        <el-button size="small" type="primary" @click="performImportAction">{{ importActionTitle }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DataTable from '@/components/DataTable'
+import { sleep, getUpdateObjURL } from '@/utils/common'
+import { EditableInputFormatter, StatusFormatter } from '@/components/TableFormatters'
+export default {
+  name: 'ImportTable',
+  components: {
+    DataTable
+  },
+  props: {
+    jsonData: {
+      type: Object,
+      default: () => ({})
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    importOption: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      columns: [],
+      importStatusFilter: 'all',
+      iTotalData: [],
+      tableConfig: {
+        hasSelection: false,
+        // hasPagination: false,
+        columns: [],
+        totalData: [],
+        paginationSize: 10,
+        paginationSizes: [10],
+        tableAttrs: {
+          stripe: true, // 斑马纹表格
+          border: true, // 表格边框
+          fit: true, // 宽度自适应,
+          tooltipEffect: 'dark'
+        }
+      },
+      tableGenDone: false,
+      importTaskStatus: 'pending', // pending, started, stopped, done
+      importTaskResult: '', // success, hasError
+      hasImport: false,
+      hasContinueButton: false,
+      importActions: {
+        import: this.$t('common.Import'),
+        continue: this.$t('common.Continue'),
+        stop: this.$t('common.Stop'),
+        finished: this.$t('common.Finished')
+      }
+    }
+  },
+  computed: {
+    tableColumnNameMapper() {
+      const mapper = {}
+      for (const column of this.tableConfig.columns) {
+        mapper[column['prop']] = column['label']
+      }
+      return mapper
+    },
+    importAction() {
+      switch (this.importTaskStatus) {
+        case 'pending':
+          return 'import'
+        case 'started':
+          return 'stop'
+      }
+      if (this.totalCount === this.successCount) {
+        return 'finished'
+      } else {
+        return 'continue'
+      }
+    },
+    importActionTitle() {
+      return this.importActions[this.importAction]
+    },
+    successData() {
+      return this.iTotalData.filter((item) => {
+        return item['@status'] === 'ok'
+      })
+    },
+    failedData() {
+      return this.iTotalData.filter((item) => {
+        return typeof item['@status'] === 'object' && item['@status'].name === 'error'
+      })
+    },
+    pendingData() {
+      return this.iTotalData.filter((item) => {
+        return item['@status'] === 'pending'
+      })
+    },
+    totalCount() {
+      return this.iTotalData.length
+    },
+    successCount() {
+      return this.successData.length
+    },
+    failedCount() {
+      return this.failedData.length
+    },
+    pendingCount() {
+      return this.pendingData.length
+    },
+    processedCount() {
+      return this.totalCount - this.pendingCount
+    },
+    processedPercent() {
+      if (this.totalCount === 0) {
+        return 0
+      }
+      return Math.round(this.processedCount / this.totalCount * 100)
+    },
+    elDataTable() {
+      return this.$refs['dataTable'].dataTable
+    }
+  },
+  watch: {
+    importStatusFilter(val) {
+      if (val === 'all') {
+        this.tableConfig.totalData = this.iTotalData
+      } else if (val === 'error') {
+        this.tableConfig.totalData = this.failedData
+      } else {
+        this.tableConfig.totalData = this.iTotalData.filter((item) => {
+          return item['@status'] === val
+        })
+      }
+    }
+  },
+  mounted() {
+    this.generateTable()
+  },
+  methods: {
+    generateTableColumns(tableTitles, tableData) {
+      const vm = this
+      const columns = [{
+        prop: '@status',
+        label: vm.$t('common.Status'),
+        width: '80px',
+        align: 'center',
+        formatter: StatusFormatter,
+        formatterArgs: {
+          iconChoices: {
+            ok: 'fa-check text-primary',
+            error: 'fa-times text-danger',
+            pending: 'fa-clock-o'
+          },
+          getChoicesKey(val) {
+            if (val === 'ok' || val === 'pending') {
+              return val
+            }
+            return 'error'
+          },
+          getTip(val) {
+            if (val === 'ok') {
+              return vm.$t('common.Success')
+            } else if (val === 'pending') {
+              return vm.$t('common.Pending')
+            } else if (val && val.name === 'error') {
+              return val.error
+            }
+            return ''
+          },
+          hasTips: true
+        }
+      }]
+      for (const item of tableTitles) {
+        const dataItemLens = tableData.map(d => {
+          const prop = item[1]
+          const itemColData = d[prop]
+          if (!d) {
+            return 0
+          }
+          if (typeof itemColData !== 'number' && (!itemColData || !itemColData.length)) {
+            return 0
+          }
+          return itemColData.length
+        })
+        let colMaxWidth = Math.max(...dataItemLens) * 10
+        if (colMaxWidth === 0) {
+          continue
+        }
+        colMaxWidth = Math.min(180, colMaxWidth)
+        colMaxWidth = Math.max(colMaxWidth, 100)
+        columns.push({
+          prop: item[1],
+          label: item[0],
+          minWidth: colMaxWidth + 'px',
+          showOverflowTooltip: true,
+          formatter: EditableInputFormatter,
+          formatterArgs: {
+            onEnter: ({ row, col, oldValue, newValue }) => {
+              const prop = col.prop
+              row['@status'] = 'pending'
+              this.$log.debug(`Set value ${oldValue} => ${newValue}`)
+              this.$set(row, prop, newValue)
+            }
+          }
+        })
+      }
+      return columns
+    },
+    generateTableData(tableTitles, tableData) {
+      const totalData = []
+      tableData.forEach(item => {
+        this.$set(item, '@status', 'pending')
+        totalData.push(item)
+      })
+      return totalData
+    },
+    generateTable() {
+      const tableTitles = this.jsonData['title']
+      const tableData = this.jsonData['data']
+      const columns = this.generateTableColumns(tableTitles, tableData)
+      const totalData = this.generateTableData(tableTitles, tableData)
+      this.tableConfig.columns = columns
+      this.tableGenDone = true
+      setTimeout(() => {
+        this.iTotalData = totalData
+        this.tableConfig.totalData = totalData
+      }, 200)
+    },
+    beautifyErrorData(errorData) {
+      if (typeof errorData === 'string') {
+        return errorData
+      } else if (Array.isArray(errorData)) {
+        return errorData
+      } else if (typeof errorData !== 'object') {
+        return errorData
+      }
+      const data = []
+      // eslint-disable-next-line prefer-const
+      for (let [key, value] of Object.entries(errorData)) {
+        if (typeof value === 'object') {
+          value = this.beautifyErrorData(value)
+        }
+        let label = this.tableColumnNameMapper[key]
+        if (!label) {
+          label = key
+        }
+        data.push(`${label}: ${value}`)
+      }
+      return data
+    },
+    performCancel() {
+      this.performStop()
+      this.$emit('cancel')
+    },
+    performFinish() {
+      this.performStop()
+      this.$emit('finish')
+    },
+    taskIsStopped() {
+      return this.importTaskStatus === 'stopped'
+    },
+    performImportAction() {
+      switch (this.importAction) {
+        case 'continue':
+          return this.performContinue()
+        case 'import':
+          return this.performUpload()
+        case 'stop':
+          return this.performStop()
+        case 'finished':
+          return this.performFinish()
+      }
+    },
+    performContinue() {
+      if (this.importTaskStatus === 'done') {
+        for (const item of this.failedData) {
+          item['@status'] = 'pending'
+        }
+        this.tableConfig.totalData = this.pendingData
+      }
+      this.importTaskStatus = 'started'
+      setTimeout(() => {
+        this.performUpload()
+      }, 100)
+    },
+    performStop() {
+      this.importTaskStatus = 'stopped'
+    },
+    async performUploadCurrentPageData() {
+      const currentData = this.elDataTable.getPageData()
+      for (const item of currentData) {
+        if (item['@status'] !== 'pending') {
+          continue
+        }
+        if (this.taskIsStopped()) {
+          return
+        }
+        await this.performUploadObject(item)
+        await sleep(100)
+      }
+    },
+    async performUpload() {
+      this.importTaskStatus = 'started'
+      this.importStatusFilter = 'pending'
+      while (!this.taskIsStopped()) {
+        await this.performUploadCurrentPageData()
+        const hasNextPage = this.elDataTable.hasNextPage()
+        if (hasNextPage && !this.taskIsStopped()) {
+          await this.elDataTable.gotoNextPage()
+          await sleep(100)
+        } else {
+          break
+        }
+      }
+      if (this.pendingCount === 0) {
+        this.importTaskStatus = 'done'
+      }
+      if (this.failedCount > 0) {
+        this.$message.error(this.$t('common.imExport.hasImportErrorItemMsg') + '')
+      }
+    },
+    async performUpdateObject(item) {
+      const updateUrl = getUpdateObjURL(this.url, item.id)
+      return this.$axios.put(
+        updateUrl,
+        item,
+        { disableFlashErrorMsg: true }
+      )
+    },
+    async performUploadObject(item) {
+      let handler = this.performCreateObject
+      if (this.importOption === 'update') {
+        handler = this.performUpdateObject
+      }
+      try {
+        await handler.bind(this)(item)
+        item['@status'] = 'ok'
+      } catch (error) {
+        const errorData = error?.response?.data
+        const _error = this.beautifyErrorData(errorData)
+        item['@status'] = {
+          name: 'error',
+          error: _error
+        }
+      }
+    },
+    async performCreateObject(item) {
+      return this.$axios.post(
+        this.url,
+        item,
+        { disableFlashErrorMsg: true }
+      )
+    },
+    keepElementInViewport() {
+      const tableRef = document.getElementById('importTable')
+      const pendingRef = tableRef?.getElementsByClassName('pendingStatus')[0]
+      if (!pendingRef) {
+        return
+      }
+      const parentTdRef = pendingRef.parentElement.parentElement.parentElement.parentElement
+      const rect = parentTdRef.getBoundingClientRect()
+      let windowInnerHeight = window.innerHeight || document.documentElement.clientHeight
+      windowInnerHeight = windowInnerHeight * 0.97 - 150
+      const inViewport = (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= windowInnerHeight
+      )
+      if (!inViewport) {
+        parentTdRef.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'start' })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/element-variables.scss";
+.summary-item {
+  padding: 0 10px
+}
+
+.summary-success {
+  color: $--color-primary;
+}
+
+.summary-failed {
+  color: $--color-danger;
+}
+
+.importTable >>> .cell {
+  min-height: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+</style>
--- a/src/components/ListTable/TableAction/LeftSide.vue
+++ b/src/components/ListTable/TableAction/LeftSide.vue
@@ -1,34 +1,46 @@
 <template>
-  <ActionsGroup v-if="hasLeftActions" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" v-bind="$attrs" class="header-action" />
+  <DataActions
+    v-if="hasLeftActions"
+    :actions="iActions"
+    v-bind="$attrs"
+    class="header-action"
+  />
 </template>

 <script>
-import ActionsGroup from '@/components/ActionsGroup'
+import i18n from '@/i18n/i18n'
+import DataActions from '@/components/DataActions'
 import { createSourceIdCache } from '@/api/common'
 import { cleanActions } from './utils'

-const defaultTrue = { type: Boolean, default: true }
-const defaultFalse = { type: Boolean, default: false }
+const defaultTrue = { type: [Boolean, Function], default: true }
+const defaultFalse = { type: [Boolean, Function], default: false }
 export default {
  name: 'LeftSide',
  components: {
-    ActionsGroup
+    DataActions
  },
  props: {
-    hasCreate: defaultTrue,
-    hasBulkDelete: defaultTrue,
-    hasBulkUpdate: defaultFalse,
    hasLeftActions: defaultTrue,
-    tableUrl: {
-      type: String,
-      default: ''
-    },
+    hasCreate: defaultTrue,
+    canCreate: defaultTrue,
    createRoute: {
-      type: [String, Object],
+      type: [String, Object, Function],
      default: function() {
        return this.$route.name.replace('List', 'Create')
      }
    },
+    createInNewPage: {
+      type: Boolean,
+      default: false
+    },
+    hasBulkDelete: defaultTrue,
+    hasBulkUpdate: defaultFalse,
+    hasMoreActions: defaultTrue,
+    tableUrl: {
+      type: String,
+      default: ''
+    },
    reloadTable: {
      type: Function,
      default: () => {}
@@ -53,23 +65,41 @@ export default {
      type: String,
      default: null
    },
-    moreActionsButton: {
+    moreCreates: {
      type: Object,
-      default: () => ({})
+      default: null
+    },
+    createTitle: {
+      type: String,
+      default: () => i18n.t('common.Create')
    }
  },
  data() {
+    const defaultActions = [
+      {
+        name: 'actionCreate',
+        title: this.createTitle,
+        type: 'primary',
+        has: this.hasCreate && !this.moreCreates,
+        can: this.canCreate,
+        callback: this.handleCreate
+      }
+    ]
+    if (this.moreCreates) {
+      const defaultMoreCreate = {
+        name: 'actionMoreCreate',
+        title: this.createTitle,
+        type: 'primary',
+        has: true,
+        can: this.canCreate,
+        dropdown: [],
+        callback: this.handleCreate
+      }
+      const createCreateAction = Object.assign(defaultMoreCreate, this.moreCreates)
+      defaultActions.push(createCreateAction)
+    }
    return {
-      defaultActions: [
-        {
-          name: 'actionCreate',
-          title: this.$t('common.Create'),
-          type: 'primary',
-          has: this.hasCreate,
-          can: true,
-          callback: this.handleCreate
-        }
-      ],
+      defaultActions: defaultActions,
      defaultMoreActions: [
        {
          title: this.$t('common.deleteSelected'),
@@ -92,6 +122,9 @@ export default {
    }
  },
  computed: {
+    iActions() {
+      return [...this.actions, this.moreAction]
+    },
    actions() {
      const actions = [...this.defaultActions, ...this.extraActions]
      return cleanActions(actions, true, {
@@ -99,12 +132,20 @@ export default {
        reloadTable: this.reloadTable
      })
    },
-    moreActions() {
-      const actions = [...this.defaultMoreActions, ...this.extraMoreActions]
-      return cleanActions(actions, true, {
+    moreAction() {
+      if (!this.hasMoreActions) {
+        return
+      }
+      let dropdown = [...this.defaultMoreActions, ...this.extraMoreActions]
+      dropdown = cleanActions(dropdown, true, {
        selectedRows: this.selectedRows,
        reloadTable: this.reloadTable
      })
+      return {
+        name: 'moreActions',
+        title: this.moreActionsTitle || this.$t('common.MoreActions'),
+        dropdown: dropdown
+      }
    },
    hasSelectedRows() {
      return this.selectedRows.length > 0
@@ -112,14 +153,22 @@ export default {
  },
  methods: {
    handleCreate() {
-      let route = {}
+      let route
      if (typeof this.createRoute === 'string') {
+        route = { name: this.createRoute }
        route.name = this.createRoute
-      } else {
+      } else if (typeof this.createRoute === 'function') {
+        route = this.createRoute()
+      } else if (typeof this.createRoute === 'object') {
        route = this.createRoute
      }
-      this.$router.push(route)
      this.$log.debug('handle create')
+      if (this.createInNewPage) {
+        const { href } = this.$router.resolve(route)
+        window.open(href, '_blank')
+      } else {
+        this.$router.push(route)
+      }
    },
    defaultBulkDeleteCallback({ selectedRows, reloadTable }) {
      const msg = this.$t('common.deleteWarningMsg') + ' ' + selectedRows.length + ' ' + this.$t('common.rows') + ' ?'
--- a/src/components/ListTable/TableAction/RightSide.vue
+++ b/src/components/ListTable/TableAction/RightSide.vue
@@ -1,7 +1,12 @@
 <template>
  <div>
    <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item" />
-    <ImExportDialog :selected-rows="selectedRows" :url="tableUrl" />
+    <ImExportDialog
+      :selected-rows="selectedRows"
+      :export-options="iExportOptions"
+      :import-options="iImportOptions"
+      v-bind="$attrs"
+    />
  </div>
 </template>

@@ -9,6 +14,7 @@
 import ActionsGroup from '@/components/ActionsGroup'
 import ImExportDialog from './ImExportDialog'
 import { cleanActions } from './utils'
+import { assignIfNot } from '@/utils/common'

 const defaultTrue = { type: Boolean, default: true }

@@ -24,20 +30,41 @@ export default {
      default: ''
    },
    hasExport: defaultTrue,
-    handleExport: {
+    exportOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    handleExportClick: {
      type: Function,
      default: function({ selectedRows }) {
-        this.$eventBus.$emit('showExportDialog', { selectedRows })
+        this.$eventBus.$emit('showExportDialog', { selectedRows, url: this.tableUrl, name: this.name })
      }
    },
    hasImport: defaultTrue,
-    handleImport: {
+    importOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    handleImportClick: {
      type: Function,
      default: function({ selectedRows }) {
-        this.$eventBus.$emit('showImportDialog', { selectedRows })
+        this.$eventBus.$emit('showImportDialog', { selectedRows, url: this.tableUrl, name: this.name })
+      }
+    },
+    hasColumnSetting: defaultTrue,
+    handleTableSettingClick: {
+      type: Function,
+      default: function({ selectedRows }) {
+        this.$eventBus.$emit('showColumnSettingPopover', { url: this.tableUrl, row: selectedRows, name: this.name })
      }
    },
    hasRefresh: defaultTrue,
+    handleRefreshClick: {
+      type: Function,
+      default: function() {
+        this.reloadTable()
+      }
+    },
    selectedRows: {
      type: Array,
      default: () => []
@@ -54,12 +81,12 @@ export default {
  data() {
    return {
      defaultRightSideActions: [
-        { name: 'actionExport', fa: 'fa-download', tip: this.$t('common.Export'), has: this.hasExport, callback: this.handleExport.bind(this) },
-        { name: 'actionImport', fa: 'fa-upload', tip: this.$t('common.Import'), has: this.hasImport, callback: this.handleImport.bind(this) },
-        { name: 'actionRefresh', fa: 'fa-refresh', tip: this.$t('common.Refresh'), has: this.hasRefresh, callback: this.handleRefresh }
+        { name: 'actionColumnSetting', fa: 'fa-cog', tip: this.$t('common.CustomCol'), has: this.hasColumnSetting, callback: this.handleTableSettingClick.bind(this) },
+        { name: 'actionImport', fa: 'fa-upload', tip: this.$t('common.Import'), has: this.hasImport, callback: this.handleImportClick.bind(this) },
+        { name: 'actionExport', fa: 'fa-download', tip: this.$t('common.Export'), has: this.hasExport, callback: this.handleExportClick.bind(this) },
+        { name: 'actionRefresh', fa: 'fa-refresh', tip: this.$t('common.Refresh'), has: this.hasRefresh, callback: this.handleRefreshClick.bind(this) }
      ],
-      dialogExportVisible: false,
-      exportValue: 2
+      dialogExportVisible: false
    }
  },
  computed: {
@@ -73,20 +100,18 @@ export default {
    },
    hasSelectedRows() {
      return this.selectedRows.length > 0
+    },
+    iImportOptions() {
+      return assignIfNot(this.importOptions, { url: this.tableUrl })
+    },
+    iExportOptions() {
+      const options = assignIfNot(this.exportOptions, { url: this.tableUrl })
+      return options
    }
  },
  methods: {
    handleTagSearch(val) {
      this.searchTable(val)
-    },
-    // handleExport({ selectedRows }) {
-    //   this.$eventBus.$emit('showExportDialog', { selectedRows })
-    // },
-    // handleImport({ selectedRows }) {
-    //   this.$eventBus.$emit('showImportDialog', { selectedRows })
-    // },
-    handleRefresh() {
-      this.reloadTable()
    }
  }
 }
@@ -119,7 +144,7 @@ export default {
  }

  .right-side-actions >>> .el-button:hover {
-    background-color: rgb(0, 0, 0, 0.05);
+    background-color: rgba(0, 0, 0, 0.05);
  }

  .action-search >>> .el-input__suffix i {
--- a/src/components/ListTable/TableAction/index.vue
+++ b/src/components/ListTable/TableAction/index.vue
@@ -20,7 +20,7 @@
 <script>
 import AutoDataSearch from '@/components/AutoDataSearch'
 import LeftSide from './LeftSide'
-import DatetimeRangePicker from '@/components/DatetimeRangePicker'
+import DatetimeRangePicker from '@/components/FormFields/DatetimeRangePicker'
 import RightSide from './RightSide'

 const defaultTrue = { type: Boolean, default: true }
--- a/src/components/ListTable/TableAction/utils.js
+++ b/src/components/ListTable/TableAction/utils.js
@@ -5,7 +5,9 @@ export function cleanActions(actions, canDefaults, { selectedRows, reloadTable }
  cloneActions.forEach((action) => {
    action.has = cleanBoolean(action, 'has', true, { selectedRows, reloadTable })
    action.can = cleanBoolean(action, 'can', true, { selectedRows, reloadTable })
-    action.callback = cleanCallback(action, { selectedRows, reloadTable })
+    if (!action.dropdown) {
+      action.callback = cleanCallback(action, { selectedRows, reloadTable })
+    }
    cleanedActions.push(action)
  })
  return cleanedActions
--- a/src/components/ListTable/formatters/CustomActionsFormatter.vue
+++ b/src/components/ListTable/formatters/CustomActionsFormatter.vue
@@ -1,78 +0,0 @@
-<template>
-  <ActionsGroup :size="'mini'" :actions="cleanedActions" :more-actions="cleanMoreActions" v-bind="$attrs" />
-</template>
-
-<script>
-import ActionsGroup from '@/components/ActionsGroup/index'
-import BaseFormatter from './base'
-
-export default {
-  name: 'CustomActionsFormatterVue',
-  components: {
-    ActionsGroup
-  },
-  extends: BaseFormatter,
-  computed: {
-    cleanedActions() {
-      if (this.col.actions.actions instanceof Array) {
-        const copy = _.cloneDeep(this.col.actions.actions)
-        let actions = [...copy]
-        actions = actions.map((v) => {
-          v.has = this.checkBool(v, 'has')
-          v.can = this.checkBool(v, 'can')
-          v.callback = this.cleanCallback(v)
-          return v
-        })
-        return actions
-      }
-      return []
-    },
-    cleanMoreActions() {
-      if (this.col.actions.extraActions instanceof Array) {
-        const copy = _.cloneDeep(this.col.actions.extraActions)
-        let actions = [...copy]
-        actions = actions.map((v) => {
-          v.has = this.checkBool(v, 'has')
-          v.can = this.checkBool(v, 'can')
-          v.callback = this.cleanCallback(v)
-          return v
-        })
-        return actions
-      }
-      return []
-    }
-  },
-  mounted() {
-    console.log(this.col)
-  },
-  methods: {
-    checkBool(item, attr, defaults) {
-      if (!item) {
-        return false
-      }
-      let ok = item[attr]
-      if (ok && typeof ok === 'function') {
-        ok = ok(this.row, this.cellValue)
-      } else if (ok == null) {
-        ok = defaults === undefined ? true : defaults
-      }
-      return ok
-    },
-    cleanCallback(item) {
-      const callback = item.callback
-      const attrs = {
-        reload: this.reload,
-        row: this.row,
-        col: this.col,
-        cellValue: this.cellValue,
-        tableData: this.tableData
-      }
-      return () => { return callback.bind(this)(attrs) }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
--- a/src/components/ListTable/formatters/LoadingActionsFormatter.vue
+++ b/src/components/ListTable/formatters/LoadingActionsFormatter.vue
@@ -1,116 +0,0 @@
-<template>
-  <ActionsGroup v-loading="loadStatus" :size="'mini'" :actions="actions" :more-actions="moreActions" />
-</template>
-
-<script>
-import ActionsGroup from '@/components/ActionsGroup/index'
-import BaseFormatter from './base'
-
-export default {
-  name: 'LoadingActionsFormatter',
-  components: { ActionsGroup },
-  extends: BaseFormatter,
-  props: {
-    formatterArgsDefault: {
-      type: Object,
-      default: function() {
-        return {
-          hasUpdate: true, // can set function(row, value)
-          canUpdate: true, // can set function(row, value)
-          hasDelete: true, // can set function(row, value)
-          canDelete: true,
-          updateRoute: this.$route.name.replace('List', 'Update'),
-          extraActions: [] // format see defaultActions
-        }
-      }
-    }
-  },
-  data() {
-    const colActions = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
-    const defaultActions = [
-      {
-        name: 'update',
-        title: this.$t('common.Update'),
-        type: 'primary',
-        has: colActions.hasUpdate,
-        can: colActions.canUpdate,
-        callback: colActions.onUpdate
-      },
-      {
-        name: 'delete',
-        title: this.$t('common.Delete'),
-        type: 'danger',
-        has: colActions.hasDelete,
-        can: colActions.canDelete,
-        callback: colActions.onDelete
-      }
-    ]
-    return {
-      colActions: colActions,
-      defaultActions: defaultActions,
-      extraActions: colActions.extraActions
-    }
-  },
-  computed: {
-    cleanedActions() {
-      let actions = [...this.defaultActions, ...this.extraActions]
-      actions = _.cloneDeep(actions)
-      actions = actions.map((v) => {
-        v.has = this.cleanBoolean(v, 'has')
-        v.can = this.cleanBoolean(v, 'can')
-        v.fa = this.cleanFa(v, 'fa')
-        v.callback = this.cleanCallback(v)
-        return v
-      })
-      actions = actions.filter((v) => v.has)
-      return actions
-    },
-    actions() {
-      if (this.cleanedActions.length <= 2) {
-        return this.cleanedActions
-      }
-      return this.cleanedActions.slice(0, 1)
-    },
-    moreActions() {
-      if (this.cleanedActions.length <= 2) {
-        return []
-      }
-      return this.cleanedActions.slice(1, this.cleanedActions.length)
-    },
-    loadStatus() {
-      return this.col.formatterArgs.loading
-    }
-  },
-  methods: {
-    cleanBoolean(item, attr) {
-      const ok = item[attr]
-      if (typeof ok !== 'function') {
-        return ok === undefined ? true : ok
-      }
-      return ok(this.row, this.cellValue)
-    },
-    cleanCallback(item) {
-      const callback = item.callback
-      const attrs = {
-        reload: this.reload,
-        row: this.row,
-        col: this.col,
-        cellValue: this.cellValue,
-        tableData: this.tableData
-      }
-      return () => { return callback.bind(this)(attrs) }
-    },
-    cleanFa(item, attr) {
-      const ok = item[attr]
-      if (typeof ok !== 'function') {
-        return ok === undefined ? false : ok
-      }
-      return ok(this.row, this.cellValue)
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -1,8 +1,21 @@
 <template>
  <div>
-    <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
+    <TableAction
+      :table-url="tableUrl"
+      :search-table="search"
+      :date-pick="handleDateChange"
+      :selected-rows="selectedRows"
+      :reload-table="reloadTable"
+      v-bind="headerActions"
+    />
    <IBox class="table-content">
-      <AutoDataTable ref="dataTable" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
+      <AutoDataTable
+        ref="dataTable"
+        :filter-table="filter"
+        :config="iTableConfig"
+        @selection-change="handleSelectionChange"
+        v-on="$listeners"
+      />
    </IBox>
  </div>
 </template>
@@ -13,6 +26,7 @@ import IBox from '../IBox'
 import TableAction from './TableAction'
 import Emitter from '@/mixins/emitter'
 import deepmerge from 'deepmerge'
+
 export default {
  name: 'ListTable',
  components: {
@@ -46,8 +60,12 @@ export default {
    },
    iTableConfig() {
      const config = deepmerge(this.tableConfig, { extraQuery: this.extraQuery })
+      this.$log.debug('Header actions', this.headerActions)
      this.$log.debug('ListTable: iTableConfig change', config)
      return config
+    },
+    tableUrl() {
+      return this.iTableConfig.url
    }
  },
  watch: {
@@ -56,10 +74,14 @@ export default {
        this.$log.debug('ListTable: found extraQuery change')
      },
      deep: true
+    },
+    tableColConfig: {
+      handler() {
+        this.$log.debug('ListTable: found colConfig change')
+      },
+      deep: true
    }
  },
-  mounted() {
-  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val
@@ -68,8 +90,13 @@ export default {
      this.dataTable.getList()
    },
    search(attrs) {
+      this.$emit('TagSearch', attrs)
      return this.dataTable.search(attrs, true)
    },
+    filter(attrs) {
+      this.$emit('TagFilter', attrs)
+      this.$refs.dataTable.$refs.dataTable.search(attrs, true)
+    },
    handleDateChange(attrs) {
      this.$set(this.extraQuery, 'date_from', attrs[0].toISOString())
      this.$set(this.extraQuery, 'date_to', attrs[1].toISOString())
@@ -81,6 +108,7 @@ export default {
        date_from: attrs[0].toISOString(),
        date_to: attrs[1].toISOString()
      }
+      this.$emit('TagDateChange', attrs)
      return this.dataTable.searchDate(query)
    },
    toggleRowSelection(row, isSelected) {
@@ -92,28 +120,19 @@ export default {

 <style lang="scss" scoped>

-  .table-content {
-    margin-top: 10px;
+.table-content {
+  margin-top: 10px;

-    & >>> .el-card__body {
-      padding: 0;
-    }
-    & >>> .el-table__header thead > tr > th {
-      background-color: white;
-    }
-
-    /*& >>> .el-table--striped .el-table__body tr.el-table__row--striped td {*/
-      /*background: white;*/
-    /*}*/
-
-    /*& >>> .el-table th, .el-table tr  {*/
-      /*background-color: red;*/
-      /*!*background-color: #FAFAFA;*!*/
-    /*}*/
+  & >>> .el-card__body {
+    padding: 0;
  }
+  & >>> .el-table__header thead > tr > th {
+    background-color: white;
+  }
+}

-  //修改颜色
-  // .el-button--text{
-  //   color: #409EFF;
-  // }
+//修改颜色
+// .el-button--text{
+//   color: #409EFF;
+// }
 </style>
--- a/src/components/MFAVerifyDialog/index.vue
+++ b/src/components/MFAVerifyDialog/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <Dialog
+    :title="$t('common.MFAVerify')"
+    :width="'50'"
+    :show-confirm="false"
+    :show-cancel="false"
+    :visible.sync="visible"
+    :destroy-on-close="true"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div style="line-height: 34px;text-align: center">MFA</div>
+      </el-col>
+      <el-col :span="14">
+        <el-input v-model="MFAToken" />
+        <span class="help-tips help-block">{{ $t('common.MFARequireForSecurity') }}</span>
+      </el-col>
+      <el-col :span="4">
+        <el-button size="mini" type="primary" style="line-height:20px " @click="verifyMFA">
+          {{ this.$t('common.Confirm') }}
+        </el-button>
+      </el-col>
+    </el-row>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+
+export default {
+  name: 'MFAVerifyDialog',
+  components: {
+    Dialog
+  },
+  data() {
+    return {
+      MFAToken: '',
+      visible: false
+    }
+  },
+  watch: {
+    visible(val) {
+      if (!val) {
+        this.$emit('MFAVerifyCancel', true)
+      }
+    }
+  },
+  mounted() {
+    this.$axios.get('/api/v1/authentication/otp/verify/', { disableFlashErrorMsg: true }).then(() => {
+      this.$emit('MFAVerifyDone', true)
+    }).catch(err => {
+      this.$log.debug('Verify otp code error: ', err)
+      this.visible = true
+    })
+  },
+  methods: {
+    verifyMFA() {
+      if (this.MFAToken.length !== 6) {
+        return this.$message.error(this.$tc('common.MFAErrorMsg'))
+      }
+      this.$axios.post(
+        `/api/v1/authentication/otp/verify/`, {
+          code: this.MFAToken
+        }
+      ).then(res => {
+        this.$emit('MFAVerifyDone', true)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/QuickActions/action.vue
+++ b/src/components/QuickActions/action.vue
@@ -10,7 +10,7 @@
 </template>

 <script>
-import Switcher from '../Swicher'
+import Switcher from '../FormFields/Swicher'
 export default {
  name: 'ActionItem',
  components: {
--- a/src/components/QuickActions/index.vue
+++ b/src/components/QuickActions/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <IBox fa="fa-edit" :title="title" v-bind="$attrs">
+  <IBox :fa="fa" :title="title" v-bind="$attrs">
    <div v-for="action of actions" :key="action.title" class="quick-actions">
      <table>
        <ActionItem v-if="action.has === undefined || action.has" :action="action" />
@@ -20,6 +20,10 @@ export default {
    ActionItem
  },
  props: {
+    fa: {
+      type: String,
+      default: () => 'fa-edit'
+    },
    title: {
      type: String,
      default() {
--- a/src/components/RelationCard/index.vue
+++ b/src/components/RelationCard/index.vue
@@ -1,29 +1,36 @@
 <template>
  <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
-    <table style="width: 100%">
+    <table style="width: 100%;table-layout:fixed;" class="CardTable">
      <tr>
        <td colspan="2">
-          <Select2 ref="select2" v-model="select2.value" v-bind="select2" />
+          <Select2 ref="select2" v-model="select2.value" :disabled="iDisabled" v-bind="select2" />
        </td>
      </tr>
+      <slot />
      <tr>
        <td colspan="2">
-          <el-button :type="type" size="small" :loading="submitLoading" @click="addObjects">{{ $t('common.Add') }}</el-button>
+          <el-button :type="type" size="small" :loading="submitLoading" :disabled="iDisabled" @click="addObjects">
+            {{ $t('common.Add') }}
+          </el-button>
        </td>
      </tr>
      <template v-if="showHasObjects">
-        <tr v-for="obj of iHasObjects" :key="obj.value" style="width: 100%" class="item">
-          <td><b>{{ obj.label }}</b></td>
+        <tr v-for="obj of iHasObjects" :key="obj.value" class="item">
+          <td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+            <el-tooltip style="margin: 4px;" effect="dark" :content="obj.label" placement="left">
+              <b>{{ obj.label }}</b>
+            </el-tooltip>
+          </td>
          <td>
-            <el-button size="mini" type="danger" style="float: right" @click="removeObject(obj)">
+            <el-button size="mini" :disabled="iDisabled" type="danger" style="float: right" @click="removeObject(obj)">
              <i class="fa fa-minus" />
            </el-button>
          </td>
        </tr>
      </template>
-      <tr v-if="params.hasMore" class="item">
+      <tr v-if="params.hasMore && showHasMore" class="item">
        <td colspan="2">
-          <el-button :type="type" size="small" style="width: 100%" @click="loadMore">
+          <el-button :type="type" :disabled="iDisabled" size="small" style="width: 100%" @click="loadMore">
            <i class="fa fa-arrow-down" />
            {{ $t('common.More') }}
          </el-button>
@@ -34,9 +41,10 @@
 </template>

 <script>
-import Select2 from '../Select2'
+import Select2 from '../FormFields/Select2'
 import IBox from '../IBox'
 import { createSourceIdCache } from '@/api/common'
+import { mapGetters } from 'vuex'
 export default {
  name: 'RelationCard',
  components: {
@@ -82,6 +90,14 @@ export default {
      type: [Array, Number, String],
      default: () => []
    },
+    disabled: {
+      type: [Boolean, Function],
+      default: null
+    },
+    showHasMore: {
+      type: Boolean,
+      default: true
+    },
    performDelete: {
      type: Function,
      default: (obj, that) => {}
@@ -129,11 +145,13 @@ export default {
        ajax: this.objectsAjax,
        options: this.objects,
        value: this.value,
+        disabled: this.disabled,
        disabledValues: []
      }
    }
  },
  computed: {
+    ...mapGetters(['currentOrgIsRoot']),
    iAjax() {
      return this.$refs.select2.iAjax
    },
@@ -142,6 +160,12 @@ export default {
    },
    hasObjectLeftLength() {
      return this.totalHasObjectsLength - this.iHasObjects.length
+    },
+    iDisabled() {
+      if (this.disabled !== null) {
+        return this.disabled
+      }
+      return this.currentOrgIsRoot
    }
  },
  watch: {
--- a/src/components/SummaryCard/index.vue
+++ b/src/components/SummaryCard/index.vue
@@ -2,15 +2,11 @@
  <el-card shadow="never">
    <div slot="header" class="summary-header">
      <span class="header-title">{{ title }}</span>
-      <span class="pull-right right-side">
-        <slot name="header-right">
-          <el-tag :type="rightSideLabel.type || 'success'" effect="dark" size="mini">{{ rightSideLabel.title }}</el-tag>
-        </slot>
-      </span>
    </div>
    <slot>
      <h1 class="no-margins">
-        <router-link :to="body.route">
+        <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
+        <router-link v-else :to="body.route">
          <span>{{ body.count }}</span>
        </router-link>
      </h1>
@@ -74,4 +70,8 @@ export default {
  .no-margins {
    margin: 0 !important;
  }
+
+  .disabled-link {
+    color: #428bca;
+  }
 </style>
--- a/src/components/ListTable/formatters/ActionsFormatter.vue
+++ b/src/components/ListTable/formatters/ActionsFormatter.vue
@@ -1,16 +1,19 @@
 <template>
-  <ActionsGroup :size="'mini'" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" />
+  <ActionsGroup v-loading="loadingStatus" :size="'mini'" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" />
 </template>

 <script>
-import ActionsGroup from '@/components/ActionsGroup/index'
+import ActionsGroup from '@/components/ActionsGroup'
 import BaseFormatter from './base'

 const defaultPerformDelete = function({ row, col }) {
  const id = row.id
-  const url = `${this.url}${id}/`
-  return this.$axios.delete(url)
+  const url = new URL(this.url, location.origin)
+  url.pathname += `${id}/`
+  const deleteUrl = url.href
+  return this.$axios.delete(deleteUrl)
 }
+
 const defaultUpdateCallback = function({ row, col }) {
  const id = row.id
  let route = { params: { id: id }}
@@ -24,6 +27,19 @@ const defaultUpdateCallback = function({ row, col }) {
  this.$router.push(route)
 }

+const defaultCloneCallback = function({ row, col }) {
+  const id = row.id
+  let route = { query: { clone_from: id }}
+  const cloneRoute = this.colActions.cloneRoute
+
+  if (typeof cloneRoute === 'object') {
+    route = Object.assign(route, cloneRoute)
+  } else {
+    route.name = cloneRoute
+  }
+  this.$router.push(route)
+}
+
 const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
  let msg = this.$t('common.deleteWarningMsg')
  const name = row.name || row.hostname
@@ -68,13 +84,21 @@ export default {
      default: function() {
        return {
          hasUpdate: true, // can set function(row, value)
-          canUpdate: true, // can set function(row, value)
+          canUpdate: () => {
+            return !this.$store.getters.currentOrgIsRoot
+          }, // can set function(row, value)
          hasDelete: true, // can set function(row, value)
          canDelete: true,
+          hasClone: true,
+          canClone: () => {
+            return !this.$store.getters.currentOrgIsRoot
+          },
          updateRoute: this.$route.name.replace('List', 'Update'),
+          cloneRoute: this.$route.name.replace('List', 'Create'),
          performDelete: defaultPerformDelete,
          onUpdate: defaultUpdateCallback,
          onDelete: defaultDeleteCallback,
+          onClone: defaultCloneCallback,
          extraActions: [] // format see defaultActions
        }
      }
@@ -89,7 +113,8 @@ export default {
        type: 'primary',
        has: colActions.hasUpdate,
        can: colActions.canUpdate,
-        callback: colActions.onUpdate
+        callback: colActions.onUpdate,
+        order: 10
      },
      {
        name: 'delete',
@@ -97,7 +122,17 @@ export default {
        type: 'danger',
        has: colActions.hasDelete,
        can: colActions.canDelete,
-        callback: colActions.onDelete
+        callback: colActions.onDelete,
+        order: 20
+      },
+      {
+        name: 'clone',
+        title: this.$t('common.Clone'),
+        type: 'info',
+        has: colActions.hasClone,
+        can: colActions.canClone,
+        callback: colActions.onClone,
+        order: 30
      }
    ]
    return {
@@ -112,12 +147,16 @@ export default {
      let actions = [...this.defaultActions, ...this.extraActions]
      actions = _.cloneDeep(actions)
      actions = actions.map((v) => {
-        v.has = this.cleanBoolean(v, 'has')
-        v.can = this.cleanBoolean(v, 'can')
-        v.callback = this.cleanCallback(v)
+        v.has = this.cleanBoolean(v, 'has', true)
+        v.can = this.cleanBoolean(v, 'can', true)
+        v.callback = this.cleanCallback(v, 'callback')
+        v.fa = this.cleanValue(v, 'fa')
+        v.order = v.order || 100
+        v.tip = this.cleanValue(v, 'tip')
        return v
      })
      actions = actions.filter((v) => v.has)
+      actions.sort((a, b) => a.order - b.order)
      return actions
    },
    actions() {
@@ -131,18 +170,21 @@ export default {
        return []
      }
      return this.cleanedActions.slice(1, this.cleanedActions.length)
+    },
+    loadingStatus() {
+      return this.col.formatterArgs.loading
    }
  },
  methods: {
-    cleanBoolean(item, attr) {
+    cleanBoolean(item, attr, defaults) {
      const ok = item[attr]
      if (typeof ok !== 'function') {
-        return ok === undefined ? true : ok
+        return ok === undefined ? defaults : ok
      }
-      return ok(this.row, this.cellValue)
+      return this.cleanValue(item, attr)
    },
-    cleanCallback(item) {
-      const callback = item.callback
+    cleanCallback(item, attr) {
+      const callback = item[attr]
      const attrs = {
        reload: this.reload,
        row: this.row,
@@ -151,6 +193,20 @@ export default {
        tableData: this.tableData
      }
      return () => { return callback.bind(this)(attrs) }
+    },
+    cleanValue(item, attr) {
+      const value = item[attr]
+      if (!value || typeof value !== 'function') {
+        return value
+      }
+      const attrs = {
+        reload: this.reload,
+        row: this.row,
+        col: this.col,
+        cellValue: this.cellValue,
+        tableData: this.tableData
+      }
+      return value(attrs)
    }
  }
 }
--- a/src/components/TableFormatters/ArrayFormatter.vue
+++ b/src/components/TableFormatters/ArrayFormatter.vue
@@ -0,0 +1,15 @@
+<template>
+  <span>{{ cellValue.toString() }}</span>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'ArrayFormatter',
+  extends: BaseFormatter
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/TableFormatters/BooleanFormatter.vue
+++ b/src/components/TableFormatters/BooleanFormatter.vue
@@ -0,0 +1,46 @@
+<template>
+  <i :class="'fa ' + iconClass" />
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'BooleanFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          iconChoices: {
+            true: 'fa-check text-primary',
+            false: 'fa-times text-danger'
+          },
+          showFalse: true,
+          typeChange(val) {
+            return !!val
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    iconClass() {
+      const key = this.formatterArgs.typeChange(this.cellValue)
+      if (!key && !this.formatterArgs.showFalse) {
+        return ''
+      }
+      return this.formatterArgs.iconChoices[key]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/TableFormatters/ChoicesFormatter.vue
+++ b/src/components/TableFormatters/ChoicesFormatter.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" placement="bottom" effect="dark">
+    <div slot="content" v-html="tips" />
+    <span :class="classes">
+      <i v-if="formatterArgs.useIcon" :class="'fa ' + icon" />
+      <span v-if="formatterArgs.useText">{{ text }}</span>
+    </span>
+  </el-tooltip>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'ChoicesFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          iconChoices: {
+            true: 'fa-check',
+            false: 'fa-times'
+          },
+          classChoices: {
+            true: 'text-primary',
+            false: 'text-danger'
+          },
+          textChoices: {
+            true: this.$t('common.Yes'),
+            false: this.$t('common.No')
+          },
+          getKey({ row, cellValue }) {
+            return cellValue
+          },
+          hasTips: false,
+          useIcon: true,
+          useText: false,
+          showFalse: true,
+          getTips: ({ row, cellValue }) => {
+            return cellValue
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    key() {
+      return this.formatterArgs.getKey(
+        { row: this.row, cellValue: this.cellValue }
+      )
+    },
+    icon() {
+      return this.formatterArgs.iconChoices[this.key]
+    },
+    classes() {
+      return this.formatterArgs.classChoices[this.key]
+    },
+    text() {
+      return this.formatterArgs.textChoices[this.key]
+    },
+    tips() {
+      return this.formatterArgs.getTips({ cellValue: this.cellValue, row: this.row })
+    },
+    shown() {
+      if (!this.formatterArgs.showFalse && !this.key) {
+        return false
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/ListTable/formatters/DateFormatter.vue
+++ b/src/components/ListTable/formatters/DateFormatter.vue
--- a/src/components/ListTable/formatters/DeleteActionFormatter.vue
+++ b/src/components/ListTable/formatters/DeleteActionFormatter.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-button ref="deleteButton" size="mini" type="danger" :disabled="canDelete" @click="onDelete(col, row, cellValue, reload)">
+  <el-button ref="deleteButton" size="mini" type="danger" :disabled="iDisabled" @click="onDelete(col, row, cellValue, reload)">
    <i class="fa fa-minus" />
  </el-button>
 </template>
@@ -11,18 +11,19 @@ export default {
  name: 'DeleteActionFormatter',
  extends: BaseFormatter,
  computed: {
-    canDelete() {
-      return this.iCanDelete()
+    iDisabled() {
+      // 禁用
+      return (this.disabled() || this.$store.getters.currentOrgIsRoot)
    }
  },
  methods: {
    defaultOnDelete(col, row, cellValue, reload) {
      const url = col.deleteUrl + cellValue
      this.$axios.delete(url).then(res => {
-        this.$message.success(this.$t('common.deleteSuccessMsg'))
+        this.$message.success(this.$tc('common.deleteSuccessMsg'))
        reload()
      }).catch(error => {
-        this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+        this.$message.error(this.$t('common.deleteErrorMsg') + ' ' + error)
      })
    },
    onDelete(col, row, cellValue, reload) {
@@ -32,7 +33,7 @@ export default {
        this.defaultOnDelete(col, row, cellValue, reload)
      }
    },
-    iCanDelete() {
+    disabled() {
      if (this.col.objects === 'all') {
        return false
      }
--- a/src/components/ListTable/formatters/DetailFormatter.vue
+++ b/src/components/ListTable/formatters/DetailFormatter.vue
@@ -25,8 +25,16 @@ export default {
  data() {
    const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    return {
-      formatterArgs: formatterArgs,
-      iTitle: formatterArgs.getTitle({ col: this.col, row: this.row, cellValue: this.cellValue })
+      formatterArgs: formatterArgs
+    }
+  },
+  computed: {
+    iTitle() {
+      return this.formatterArgs.getTitle({
+        col: this.col,
+        row: this.row,
+        cellValue: this.cellValue
+      })
    }
  },
  methods: {
@@ -63,6 +71,11 @@ export default {

 <style scoped>
 .detail {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
  font-weight: 400;
 }
 </style>
--- a/src/components/ListTable/formatters/DialogDetailFormatter.vue
+++ b/src/components/ListTable/formatters/DialogDetailFormatter.vue
--- a/src/components/ListTable/formatters/DisplayFormatter.vue
+++ b/src/components/ListTable/formatters/DisplayFormatter.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>{{ display }}</span>
+  <span :class="cls"> {{ value }}</span>
 </template>

 <script>
@@ -19,19 +19,27 @@ export default {
  },
  data() {
    return {
-      display: this.getValue()
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    }
  },
-  methods: {
-    getValue() {
-      const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
-      const displayKey = formatterArgs.displayKey
+  computed: {
+    value() {
+      const displayKey = this.formatterArgs.displayKey
      let value = this.row[displayKey]
      if (value === undefined) {
        value = this.row[this.col.prop]
      }
      return value
+    },
+    cls() {
+      const classChoices = this.formatterArgs?.classChoices
+      if (!classChoices) {
+        return ''
+      }
+      return classChoices[this.cellValue]
    }
+  },
+  methods: {
  }
 }
 </script>
--- a/src/components/TableFormatters/EditableInputFormatter.vue
+++ b/src/components/TableFormatters/EditableInputFormatter.vue
@@ -0,0 +1,84 @@
+<template>
+  <div style="width: 100%;min-height: 20px" @click.stop="editCell">
+    <el-input
+      v-if="inEditMode"
+      v-model="value"
+      size="mini"
+      class="editInput"
+      @keyup.enter.native="onInputEnter"
+      @blur="onInputEnter"
+    />
+    <template v-else>
+      <span>{{ cellValue }}</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import BaseFormatter from './base'
+
+export default {
+  name: 'EditableInputFormatter',
+  components: {
+  },
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          trigger: 'click',
+          onEnter: ({ row, col, oldValue, newValue }) => {
+            const prop = col.prop
+            this.$log.debug(`Set value ${oldValue} => ${newValue}`)
+            this.$set(row, prop, newValue)
+          }
+        }
+      }
+    }
+  },
+  data() {
+    const valueIsString = typeof this.cellValue === 'string'
+    const jsonValue = this.cellValue ? JSON.stringify(this.cellValue) : ''
+    return {
+      inEditMode: false,
+      value: valueIsString ? this.cellValue || '' : jsonValue,
+      valueIsString: valueIsString,
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  methods: {
+    editCell() {
+      this.inEditMode = true
+    },
+    onInputEnter() {
+      let validValue = this.value
+      try {
+        validValue = JSON.parse(validValue)
+      } catch (e) {
+        // pass
+      }
+      this.formatterArgs.onEnter({
+        row: this.row, col: this.col,
+        oldValue: this.cellValue,
+        newValue: validValue
+      })
+      this.inEditMode = false
+    },
+    cancelEdit() {
+      this.inEditMode = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.editInput >>> .el-input__inner {
+  padding: 2px;
+  line-height: 12px;
+}
+
+.editInput {
+  padding: -6px;
+}
+</style>
--- a/src/components/ListTable/formatters/GrantedSystemUsersShowFormatter.vue
+++ b/src/components/ListTable/formatters/GrantedSystemUsersShowFormatter.vue
--- a/src/components/ListTable/formatters/ShowKeyFormatter.vue
+++ b/src/components/ListTable/formatters/ShowKeyFormatter.vue
--- a/src/components/ListTable/formatters/ChoicesFormatter.vue
+++ b/src/components/ListTable/formatters/ChoicesFormatter.vue
@@ -1,7 +1,17 @@
 <template>
  <div>
    <el-tooltip v-if="formatterArgs.hasTips" placement="bottom" effect="dark">
-      <div slot="content">{{ tipStatus }}<br>{{ tipTime }}</div>
+      <div slot="content">
+        <template v-if="tipsIsArray">
+          <div v-for="tip of tips" :key="tip">
+            <span>{{ tip }}</span>
+            <br>
+          </div>
+        </template>
+        <span v-else>
+          {{ tips }}
+        </span>
+      </div>
      <i :class="'fa ' + iconClass" />
    </el-tooltip>
    <i v-else :class="'fa ' + iconClass" />
@@ -10,9 +20,8 @@

 <script>
 import BaseFormatter from './base'
-import { toSafeLocalDateStr } from '@/utils/common'
 export default {
-  name: 'ChoicesFormatter',
+  name: 'StatusFormatter',
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
@@ -23,19 +32,12 @@ export default {
            true: 'fa-check text-primary',
            false: 'fa-times text-danger'
          },
-          typeChange(val) {
+          getChoicesKey(val) {
            return !!val
          },
-          hasTips: false,
-          tipStatus(val, vm) {
-            if (val.status === 0) {
-              return vm.$t('assets.Unreachable')
-            } else if (val.status === 1) {
-              return vm.$t('assets.Reachable')
-            } else if (val.status === 2) {
-              return vm.$t('assets.Unknown')
-            }
-          }
+          getTip(val, col) {
+          },
+          hasTips: false
        }
      }
    }
@@ -47,15 +49,15 @@ export default {
  },
  computed: {
    iconClass() {
-      const key = this.formatterArgs.typeChange(this.cellValue)
-      return this.formatterArgs.iconChoices[key]
+      const key = this.formatterArgs.getChoicesKey(this.cellValue)
+      return this.formatterArgs.iconChoices[key] + ' ' + key + 'Status'
    },
-    tipStatus() {
+    tips() {
      const vm = this
-      return this.formatterArgs.tipStatus(this.cellValue, vm)
+      return this.formatterArgs.getTip(this.cellValue, vm)
    },
-    tipTime() {
-      return toSafeLocalDateStr(this.cellValue.datetime)
+    tipsIsArray() {
+      return Array.isArray(this.tips)
    }
  }
 }
--- a/src/components/ListTable/formatters/base.vue
+++ b/src/components/ListTable/formatters/base.vue
--- a/src/components/ListTable/formatters/index.js
+++ b/src/components/ListTable/formatters/index.js
@@ -1,39 +1,42 @@
 import DetailFormatter from './DetailFormatter'
+import ArrayFormatter from './ArrayFormatter'
 import DisplayFormatter from './DisplayFormatter'
-import BooleanFormatter from './ChoicesFormatter'
+import ChoicesFormatter from './ChoicesFormatter'
 import ActionsFormatter from './ActionsFormatter'
-import CustomActionsFormatter from './CustomActionsFormatter'
 import DeleteActionFormatter from './DeleteActionFormatter'
 import DateFormatter from './DateFormatter'
 import SystemUserFormatter from './GrantedSystemUsersShowFormatter'
-import ShowKeyFormatter from '@/components/ListTable/formatters/ShowKeyFormatter'
+import ShowKeyFormatter from '@/components/TableFormatters/ShowKeyFormatter'
 import DialogDetailFormatter from './DialogDetailFormatter'
-import LoadingActionsFormatter from './LoadingActionsFormatter'
+import EditableInputFormatter from './EditableInputFormatter'
+import StatusFormatter from './StatusFormatter'

 export default {
  DetailFormatter,
  DisplayFormatter,
-  BooleanFormatter,
+  ChoicesFormatter,
  ActionsFormatter,
-  CustomActionsFormatter,
  DeleteActionFormatter,
  DateFormatter,
  SystemUserFormatter,
  ShowKeyFormatter,
  DialogDetailFormatter,
-  LoadingActionsFormatter
+  ArrayFormatter,
+  EditableInputFormatter,
+  StatusFormatter
 }

 export {
  DetailFormatter,
  DisplayFormatter,
-  BooleanFormatter,
+  ChoicesFormatter,
  ActionsFormatter,
-  CustomActionsFormatter,
  DeleteActionFormatter,
  DateFormatter,
  SystemUserFormatter,
  ShowKeyFormatter,
  DialogDetailFormatter,
-  LoadingActionsFormatter
+  ArrayFormatter,
+  EditableInputFormatter,
+  StatusFormatter
 }
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -5,8 +5,10 @@
        <component
          :is="component"
          ref="AutoDataZTree"
+          :key="componentTreeKey"
          :setting="treeSetting"
          class="auto-data-ztree"
+          v-on="$listeners"
          @urlChange="handleUrlChange"
        >
          <div slot="rMenu" slot-scope="{data}">
@@ -22,7 +24,7 @@
        </div>
        <div class="transition-box" style="width: calc(100% - 17px);">
          <slot name="table">
-            <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" />
+            <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" v-on="$listeners" />
          </slot>
        </div>
      </div>
@@ -63,25 +65,40 @@ export default {
    return {
      iTableConfig: this.tableConfig,
      iShowTree: this.showTree,
-      componentKey: 0
+      componentKey: 0,
+      componentTreeKey: 0
    }
  },
  watch: {
+    treeConfig: {
+      handler(val) {
+      },
+      deep: true
+    }
  },
  methods: {
-    handleUrlChange(_url) {
-      this.$set(this.iTableConfig, 'url', _url)
-      this.$emit('urlChange', _url)
+    handleUrlChange(url) {
+      this.$set(this.iTableConfig, 'url', url)
+      this.$emit('urlChange', url)
      this.forceRerender()
    },
    forceRerender() {
      this.componentKey += 1
    },
+    forceRerenderTree() {
+      this.componentTreeKey += 1
+    },
    hideRMenu() {
      this.$refs.AutoDataZTree.hideRMenu()
    },
    getSelectedNodes: function() {
      return this.$refs.AutoDataZTree.getSelectedNodes()
+    },
+    getNodes: function() {
+      return this.$refs.AutoDataZTree.getNodes()
+    },
+    selectNode: function(node) {
+      return this.$refs.AutoDataZTree.selectNode(node)
    }
  }
 }
--- a/Show More
+++ b/Show More