perf: 允许用户修改Source

* fix: 临时调整因为Chrome的兼容性问题导致的日期计算错误

* fix: 修复工单字段展示问题

Co-authored-by: Orange <orangemtony@gmail.com>

.dockerignore

@@ -1,4 +1,3 @@
 lina
 dist
 node_modules
-.git

.env.development

@@ -1,6 +1,8 @@
 # 全局环境变量 请勿随意改动
 ENV = 'development'
 
+
+
 # base api
 VUE_APP_BASE_API = ''
 VUE_APP_PUBLIC_PATH = '/ui/'
@@ -20,6 +22,5 @@ VUE_APP_LOGOUT_PATH = '/core/auth/logout/'
 
 
 # Dev server for core proxy
-VUE_APP_CORE_HOST = 'http://localhost:8080/'
-VUE_APP_CORE_WS = 'http://localhost:8080/'
+VUE_APP_CORE_HOST = 'http://localhost:8080'
 VUE_APP_ENV = 'development'

.gitignore

@@ -15,4 +15,3 @@ tests/**/coverage/
 *.ntvs*
 *.njsproj
 *.sln
-.env.development

Dockerfile

@@ -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/
-RUN yarn install
-RUN npm rebuild node-sass
+COPY utils /data/utils/
+RUN ls && cd utils && bash -xieu build.sh dep
 
 ADD . /data
 RUN cd utils && bash -xieu build.sh build

babel.config.js

@@ -1,8 +1,5 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ],
-  plugins: [
-    '@babel/plugin-proposal-optional-chaining',
   ]
 }

nginx.conf

@@ -1,16 +1,6 @@
 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/;

package.json

@@ -15,24 +15,18 @@
     "test:ci": "npm run lint && npm run test:unit",
     "svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
     "vue-i18n-extract": "vue-i18n-extract",
-    "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
-    "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
-    "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a"
+    "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'"
   },
   "dependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@ztree/ztree_v3": "3.5.44",
-    "axios": "0.21.1",
+    "axios": "0.18.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",
@@ -47,10 +41,8 @@
     "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",
@@ -81,7 +73,6 @@
     "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",

public/index.html

@@ -8,24 +8,8 @@
     <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>

src/api/orgs.js

@@ -1,15 +0,0 @@
-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'
-  })
-}

src/api/sessions.js

@@ -57,26 +57,6 @@ 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}/`,

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',

src/components/AccountListTable/ShowSecretInfo.vue

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

src/components/AccountListTable/UpdateSecretInfo.vue

@@ -1,92 +0,0 @@
-<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>

src/components/AccountListTable/const.js

@@ -1,36 +0,0 @@
-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'
-}

src/components/AccountListTable/index.vue

@@ -1,184 +0,0 @@
-<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>

src/components/ActionsGroup/index.vue

@@ -1,15 +1,40 @@
 <template>
-  <DataActions :actions="iActions" v-bind="$attrs" />
+  <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="item.tip" 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>
 </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: () => []
@@ -36,22 +61,79 @@ export default {
   },
   computed: {
     iActions() {
-      const actions = [...this.actions]
-      if (this.iMoreAction && this.iMoreAction.dropdown.length > 0) {
-        actions.push(this.iMoreAction)
+      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
       }
       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
+        }
+        // 是否有分割线
+        const divided = this.checkItem(action, 'divided', false)
+        delete action['divided']
+        action.divided = divided
+
+        // 是否是disabled
+        const can = this.checkItem(action, 'can')
+        delete action['can']
+        action.disabled = !can
+        cleanedActions.push(action)
+        // 删掉callback，避免前台看到
+        delete action['callback']
+      }
+      return cleanedActions
+    }
   }
 }
 </script>

src/components/Announcement/index.vue

@@ -1,70 +0,0 @@
-<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>

src/components/AppAccountListTable/ShowSecretInfo.vue

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

src/components/AppAccountListTable/const.js

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

src/components/AppAccountListTable/index.vue

@@ -1,167 +0,0 @@
-<template>
-  <div>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    <ShowSecretInfo v-if="showViewSecretDialog" :visible.sync="showViewSecretDialog" :account="account" />
-  </div>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable/index'
-import { ActionsFormatter, DetailFormatter } from '@/components/TableFormatters'
-import ShowSecretInfo from './ShowSecretInfo'
-
-export default {
-  name: 'Detail',
-  components: {
-    ListTable,
-    ShowSecretInfo
-  },
-  props: {
-    url: {
-      type: String,
-      required: true
-    },
-    exportUrl: {
-      type: String,
-      default() {
-        return this.url.replace('/applications/accounts/', '/applications/account-secrets/')
-      }
-    },
-    hasLeftActions: {
-      type: Boolean,
-      default: false
-    },
-    otherActions: {
-      type: Array,
-      default: null
-    },
-    hasClone: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      showViewSecretDialog: false,
-      showUpdateSecretDialog: false,
-      account: {},
-      tableConfig: {
-        url: this.url,
-        columns: [
-          'app_display', 'username', 'category_display',
-          'type_display', 'systemuser', 'actions'
-        ],
-        columnsMeta: {
-          app_display: {
-            showOverflowTooltip: true,
-            formatter: DetailFormatter,
-            formatterArgs: {
-              getRoute({ row }) {
-                switch (row['category']) {
-                  case 'remote_app':
-                    return {
-                      name: 'RemoteAppDetail',
-                      params: { id: row.app }
-                    }
-                  case 'db':
-                    return {
-                      name: 'DatabaseAppDetail',
-                      params: { id: row.app }
-                    }
-                  default:
-                    return {
-                      name: 'KubernetesAppDetail',
-                      params: { id: row.app }
-                    }
-                }
-              }
-            }
-          },
-          username: {
-            showOverflowTooltip: true
-          },
-          systemuser: {
-            showOverflowTooltip: true,
-            formatter: DetailFormatter,
-            formatterArgs: {
-              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>

src/components/AssetRelationCard/index.vue

@@ -3,12 +3,12 @@
     <table style="width: 100%">
       <tr>
         <td colspan="2">
-          <AssetSelect ref="assetSelect" :disabled="disabled" :can-select="canSelect" />
+          <AssetSelect ref="assetSelect" :can-select="canSelect" />
         </td>
       </tr>
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" :disabled="disabled" @click="addObjects">{{ $t('common.Add') }}</el-button>
+          <el-button :type="type" size="small" @click="addObjects">{{ $t('common.Add') }}</el-button>
         </td>
       </tr>
     </table>
@@ -38,10 +38,6 @@ export default {
       type: String,
       default: 'primary'
     },
-    disabled: {
-      type: [Boolean, Function],
-      default: false
-    },
     value: {
       type: [Array, Number, String],
       default: () => []

src/components/AssetSelect/index.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="asset-select-dialog">
-    <Select2
-      ref="select2"
-      v-model="select2Config.value"
-      v-bind="select2Config"
-      @input="onInputChange"
-      @focus.stop="handleFocus"
-      v-on="$listeners"
-    />
+    <Select2 ref="select2" v-bind="select2Config" @input="onInputChange" @focus.stop="handleFocus" v-on="$listeners" />
     <Dialog
       v-if="dialogVisible"
       :title="this.$t('assets.Assets')"
@@ -30,8 +23,8 @@
 
 <script>
 import TreeTable from '@/components/TreeTable'
-import { DetailFormatter } from '@/components/TableFormatters'
-import Select2 from '@/components/FormFields/Select2'
+import { DetailFormatter } from '@/components/ListTable/formatters'
+import Select2 from '@/components/Select2'
 import Dialog from '@/components/Dialog'
 
 export default {
@@ -47,10 +40,6 @@ export default {
       default(row, index) {
         return true
       }
-    },
-    disabled: {
-      type: [Boolean, Function],
-      default: false
     }
   },
   data() {
@@ -83,7 +72,7 @@ export default {
       select2Config: select2Config,
       dialogSelect2Config: select2Config,
       tableConfig: {
-        url: '/api/v1/assets/assets/?fields_size=mini',
+        url: '/api/v1/assets/assets/',
         hasTree: true,
         canSelect: this.canSelect,
         columns: [
@@ -101,18 +90,6 @@ export default {
             prop: 'ip',
             label: this.$t('assets.ipDomain'),
             sortable: 'custom'
-          },
-          {
-            prop: 'platform',
-            label: this.$t('assets.Platform'),
-            sortable: true
-          },
-          {
-            prop: 'protocols',
-            formatter: function(row) {
-              return <span> {row.protocols.toString()} </span>
-            },
-            label: this.$t('assets.Protocols')
           }
         ],
         listeners: {

src/components/AssetUserTable/index.vue

@@ -0,0 +1,364 @@
+<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.needMFAVerify) {
+                      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',
+      'publicSettings'
+    ]),
+    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>

src/components/AutoDataForm/components/NestedField.vue

@@ -1,81 +0,0 @@
-<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>

src/components/AutoDataForm/index.vue

@@ -1,20 +1,15 @@
 <template>
-  <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 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>
 </template>
 
 <script>
 import DataForm from '../DataForm'
 import FormGroupHeader from '@/components/FormGroupHeader'
-import { FormFieldGenerator } from '@/components/AutoDataForm/utils'
+// import { optionUrlMeta } from '@/api/common'
+import rules from '@/components/DataForm/rules'
+import Select2 from '@/components/Select2'
 export default {
   name: 'AutoDataForm',
   components: {
@@ -36,10 +31,6 @@ export default {
         return []
       }
     },
-    form: {
-      type: Object,
-      default: () => ({})
-    },
     fieldsMeta: {
       type: Object,
       default: () => ({})
@@ -47,66 +38,171 @@ export default {
   },
   data() {
     return {
-      remoteMeta: {},
+      meta: {},
       totalFields: [],
       loading: true,
-      groups: [],
-      iForm: this.form,
-      errors: {}
+      groups: []
     }
   },
   mounted() {
-    this.optionUrlMetaAndGenerateColumns()
+    this.optionUrlMeta()
   },
   methods: {
-    optionUrlMetaAndGenerateColumns() {
+    optionUrlMeta() {
       this.$store.dispatch('common/getUrlMeta', { url: this.url }).then(data => {
-        this.remoteMeta = data.actions[this.method.toUpperCase()] || {}
+        this.meta = data.actions[this.method.toUpperCase()] || {}
         this.generateColumns()
-        this.cleanFormValue()
       }).catch(err => {
         this.$log.error(err)
       }).finally(() => {
         this.loading = false
       })
     },
-    generateColumns() {
-      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
+    generateFieldByType(type, field, fieldMeta) {
+      switch (type) {
+        case 'choice':
+          type = 'radio-group'
+          if (!fieldMeta.read_only) {
+            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') {
+        if (!fieldMeta.read_only) {
+          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
     },
-    cleanFormValue() {
-      this._cleanFormValue(this.iForm, this.remoteMeta)
+    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] || this.meta['attrs']['children'][name] || {}
+      const fieldMeta = this.meta[name] || ((this.meta['attrs']) ? (this.meta['attrs']['children'][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)
+    },
+    generateFieldAttrs(name) {
+      const fields = []
+      Object.keys(this.meta[name]['children']).forEach((key, i) => {
+        const filed = this.generateField(key)
+        fields.push(filed)
+      })
+      return fields
+    },
+    generateFields(data) {
+      let fields = []
+      for (let field of data) {
+        if (field instanceof Array) {
+          const items = this.generateFieldGroup(field)
+          fields = [...fields, ...items]
+        } else if (field === 'attrs') {
+          const items = this.generateFieldAttrs(field)
+          fields = [...fields, ...items]
+          // 修改title插入ID
+          this.groups[this.groups.length - 1].name = items[0].id
+        } 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)
+      this.$log.debug('Total fields: ', this.totalFields)
     },
     setFieldError(name, error) {
       const field = this.totalFields.find((v) => v.prop === name)
       if (!field) {
         return
       }
-      if (field.attrs.error === error) {
-        error += '.'
-      }
-      if (field.type === 'nestedField') {
-        field.el.errors = error
-      } else {
-        field.attrs.error = error
+      if (typeof error === 'object') {
+        const str = error
+        error = ''
+        Object.keys(str).forEach(key => {
+          error += `${parseInt(key) + 1}.${str[key][0]}  `
+        })
       }
+      // if (field.attrs.error === error) {
+      //   error += '.'
+      // }
+      field.attrs.error = error
     }
   }
 }

src/components/AutoDataForm/utils.js

@@ -1,158 +0,0 @@
-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
-  }
-}

src/components/AutoDataSearch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <TagSearch :options="iOption" v-bind="$attrs" v-on="$listeners" />
+  <TagSearch :options="options" v-bind="$attrs" v-on="$listeners" />
 </template>
 
 <script>
@@ -23,22 +23,9 @@ export default {
       default: () => []
     }
   },
-  data() {
-    return {
-      internalOptions: []
-    }
-  },
-  computed: {
-    iOption() {
-      return this.options.concat(this.internalOptions)
-    }
-  },
   watch: {
     options() {
       // 空函数，方便子组件刷新
-    },
-    url() {
-      this.genericOptions()
     }
   },
   mounted() {
@@ -49,7 +36,6 @@ 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)) {
@@ -63,6 +49,7 @@ export default {
           label: field.label,
           type: field.type,
           value: name
+
         }
         if (field.type === 'choice' && field.choices) {
           option.children = field.choices.map(item => {
@@ -82,7 +69,7 @@ export default {
             { label: this.$t('common.No'), value: false }
           ]
         }
-        vm.internalOptions.push(option)
+        vm.options.push(option)
       }
     },
     optionUrlMeta() {
@@ -94,4 +81,5 @@ export default {
 </script>
 
 <style lang='less' scoped>
+
 </style>

src/components/AutoDataTable/components/ColumnSettingPopover.vue

@@ -1,91 +0,0 @@
-<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>

src/components/AutoDataTable/index.vue

@@ -1,41 +1,15 @@
 <template>
-  <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>
+  <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" @filter-change="filterChange" />
 </template>
 
 <script type="text/jsx">
 import DataTable from '../DataTable'
-import {
-  DateFormatter,
-  DetailFormatter,
-  DisplayFormatter,
-  ActionsFormatter,
-  ChoicesFormatter
-} from '@/components/TableFormatters'
+import { DateFormatter, DetailFormatter, DisplayFormatter, BooleanFormatter, ActionsFormatter } from '@/components/ListTable/formatters'
 import i18n from '@/i18n/i18n'
-import ColumnSettingPopover from './components/ColumnSettingPopover'
-import { newURL } from '@/utils/common'
 export default {
   name: 'AutoDataTable',
   components: {
-    DataTable,
-    ColumnSettingPopover
+    DataTable
   },
   props: {
     config: {
@@ -53,18 +27,8 @@ export default {
       method: 'get',
       autoConfig: {},
       iConfig: {},
-      meta: {},
-      cleanedColumnsShow: {},
-      totalColumns: [],
-      popoverColumns: {
-        totalColumnsList: [],
-        minCols: [],
-        currentCols: []
-      }
+      meta: {}
     }
-  },
-  computed: {
-
   },
   watch: {
     config: {
@@ -80,18 +44,10 @@ 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 => {
-        const method = this.method.toUpperCase()
-        this.meta = data.actions && data.actions[method] ? data.actions[method] : {}
-        this.generateTotalColumns()
-      }).then(() => {
-        //  根据当前列重新生成最终渲染表格
-        this.filterShowColumns()
-      }).then(() => {
-        // 生成给子组件使用的TotalColList
-        this.generatePopoverColumns()
+        this.meta = data.actions[this.method.toUpperCase()] || {}
+        this.generateColumns()
       }).catch((error) => {
         this.$log.error('Error occur: ', error)
       }).finally(() => {
@@ -107,7 +63,7 @@ export default {
           break
         case 'actions':
           col = {
-            prop: 'actions',
+            prop: 'id',
             label: i18n.t('common.Actions'),
             align: 'center',
             width: '150px',
@@ -117,7 +73,7 @@ export default {
           break
         case 'is_valid':
           col.label = i18n.t('common.Validity')
-          col.formatter = ChoicesFormatter
+          col.formatter = BooleanFormatter
           col.align = 'center'
           col.width = '80px'
           break
@@ -137,7 +93,7 @@ export default {
           col.formatter = DisplayFormatter
           break
         case 'boolean':
-          col.formatter = ChoicesFormatter
+          col.formatter = BooleanFormatter
           col.align = 'center'
           col.width = '80px'
           break
@@ -184,12 +140,12 @@ export default {
           col.filters = column.choices.map(item => {
             if (typeof (item.value) === 'boolean') {
               if (item.value) {
-                return { text: item['display_name'], value: 'True' }
+                return { text: item.display_name, value: 'True' }
               } else {
-                return { text: item['display_name'], value: 'False' }
+                return { text: item.display_name, value: 'False' }
               }
             }
-            return { text: item['display_name'], value: item.value }
+            return { text: item.display_name, value: item.value }
           })
           col.sortable = false
           col['column-key'] = col.prop
@@ -209,7 +165,7 @@ export default {
       col = this.addFilterIfNeed(col)
       return col
     },
-    generateTotalColumns() {
+    generateColumns() {
       const config = _.cloneDeep(this.config)
       const columns = []
       for (let col of config.columns) {
@@ -220,80 +176,9 @@ 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 = {}

src/components/AutoDataZTree/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <DataZTree ref="dataztree" :setting="treeSetting" class="data-z-tree" v-on="$listeners">
-    <slot v-if="treeSetting.hasRightMenu" slot="rMenu">
+  <DataZTree ref="dataztree" :setting="treeSetting">
+    <slot 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': this.$store.getters.currentOrg ? this.$store.getters.currentOrg.id : ''
+            'X-JMS-ORG': JSON.parse(this.$cookie.get('jms_current_org')) ? JSON.parse(this.$cookie.get('jms_current_org')).id : ''
           }
         },
         callback: {
@@ -55,8 +55,7 @@ export default {
           // beforeDrag
           // onDrag
           // beforeAsync: this.defaultCallback.bind(this, 'beforeAsync')
-        },
-        hasRightMenu: true
+        }
       },
       currentNode: '',
       currentNodeId: ''
@@ -64,7 +63,6 @@ export default {
   },
   computed: {
     treeSetting() {
-      this.$log.debug('Settings: ', this.setting)
       return _.merge(this.defaultSetting, this.setting)
     },
     zTree() {
@@ -78,10 +76,6 @@ export default {
     $('body').unbind('mousedown')
   },
   methods: {
-    refreshTree: function() {
-      const refreshIconRef = $('#tree-refresh')
-      refreshIconRef.click()
-    },
     editTreeNode: function() {
       this.hideRMenu()
       const currentNode = this.zTree.getSelectedNodes()[0]
@@ -89,7 +83,7 @@ export default {
         return
       }
       if (currentNode) {
-        currentNode.name = currentNode.meta.data.value
+        currentNode.name = currentNode.meta.node.value
       }
       this.zTree.editName(currentNode)
     },
@@ -104,19 +98,15 @@ 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.data.id
-        query['node'] = this.currentNodeId
-        url = `${this.setting.url}${combinator}node_id=${treeNode.meta.data.id}&show_current_asset=${show_current_asset}`
+        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}`)
       } else if (treeNode.meta.type === '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.$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}`)
       }
-      this.$router.push({ query })
-      this.$emit('urlChange', url)
     },
     removeTreeNode: function() {
       this.hideRMenu()
@@ -125,13 +115,12 @@ export default {
         return
       }
       this.$axios.delete(
-        `${this.treeSetting.nodeUrl}${currentNode.meta.data.id}/`
+        `${this.treeSetting.nodeUrl}${currentNode.meta.node.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) {
@@ -143,14 +132,14 @@ export default {
         url,
         { 'value': treeNode.name }
       ).then(res => {
-        let assetsAmount = treeNode.meta.data.assetsAmount
+        let assetsAmount = treeNode.meta.node.assetsAmount
         if (!assetsAmount) {
           assetsAmount = 0
         }
         treeNode.name = treeNode.name + ' (' + assetsAmount + ')'
         this.zTree.updateNode(treeNode)
         this.$message.success(this.$t('common.updateSuccessMsg'))
-      }).finally(() => { this.refreshTree() })
+      })
     },
     onBodyMouseDown: function(event) {
       const rMenuID = this.$refs.dataztree.$refs.ztree.iRMenuID
@@ -208,9 +197,9 @@ export default {
     onDrop: function(event, treeId, treeNodes, targetNode, moveType) {
       const treeNodesIds = []
       $.each(treeNodes, function(index, value) {
-        treeNodesIds.push(value.meta.data.id)
+        treeNodesIds.push(value.meta.node.id)
       })
-      const theUrl = `${this.treeSetting.nodeUrl}${targetNode.meta.data.id}/children/add/`
+      const theUrl = `${this.treeSetting.nodeUrl}${targetNode.meta.node.id}/children/add/`
       this.$axios.put(
         theUrl, {
           nodes: treeNodesIds
@@ -219,7 +208,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()
@@ -229,21 +218,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.data.id}/children/`
+      const url = `${this.treeSetting.nodeUrl}${parentNode.meta.node.id}/children/`
       this.$axios.post(url, {}).then(data => {
         const newNode = {
           id: data['key'],
           name: data['value'],
           pId: parentNode.id,
           meta: {
-            data: data
+            'node': 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.data.id || newNode.id
+        this.currentNodeId = node.meta.node.id || newNode.id
         this.zTree.editName(node)
         this.$message.success(this.$t('common.createSuccessMsg'))
       }).catch(error => {
@@ -251,21 +240,16 @@ export default {
       })
     },
     refresh: function() {
+
     },
     getSelectedNodes: function() {
       return this.zTree.getSelectedNodes()
-    },
-    getNodes: function() {
-      return this.zTree.getNodes()
-    },
-    selectNode: function(node) {
-      return this.zTree.selectNode(node)
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang='less' scoped>
   .rmenu {
     font-size: 12px;
     padding: 0 16px;
@@ -288,8 +272,4 @@ export default {
   .rmenu:hover{
     background-color: #f5f7fa;
   }
-
-  .data-z-tree >>> .fa {
-    width: 10px;
-  }
 </style>

src/components/CronTab/Crontab.vue

@@ -1,452 +0,0 @@
-/* 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>

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

@@ -1,189 +0,0 @@
-/* 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>

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

@@ -1,158 +0,0 @@
-/* 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>

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

@@ -1,156 +0,0 @@
-/* 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>

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

@@ -1,163 +0,0 @@
-/* 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>

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

@@ -1,62 +0,0 @@
-/* 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>

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

@@ -1,178 +0,0 @@
-/* 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>

src/components/CronTab/index.vue

@@ -1,55 +0,0 @@
-<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>

src/components/DataActions/index.vue

@@ -1,174 +0,0 @@
-<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>

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

@@ -97,7 +97,6 @@ export default {
     }
   },
   props: {
-    // eslint-disable-next-line vue/require-default-prop
     data: Object,
     prop: {
       type: String,
@@ -105,13 +104,10 @@ 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() {

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 v-if="!isHidden(item)" :name="`id:${item.id}`" />
+      <slot :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 v-if="!isHidden(item)" :name="`$id:${item.id}`" />
+      <slot :name="`$id:${item.id}`" />
     </template>
     <slot />
   </el-form>
@@ -202,18 +202,6 @@ 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
     }
   }
 }

src/components/DataForm/index.vue

@@ -4,7 +4,7 @@
     :content="fields"
     :form="basicForm"
     label-position="right"
-    label-width="20%"
+    label-width="17%"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -12,7 +12,7 @@
     <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 v-if="hasButtons" class="form-buttons">
+    <el-form-item>
       <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>
@@ -32,10 +32,6 @@ export default {
       type: Boolean,
       default: true
     },
-    hasButtons: {
-      type: Boolean,
-      default: true
-    },
     hasReset: {
       type: Boolean,
       default: true
@@ -51,7 +47,7 @@ export default {
     // 初始值
     form: {
       type: Object,
-      default: () => ({})
+      default: () => { return {} }
     },
     moreButtons: {
       type: Array,

src/components/DataForm/rules/index.js

@@ -8,27 +8,7 @@ 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,
-  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')))
-    }
-  }
+  RequiredChange
 }

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

@@ -167,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 = 1
+const defaultFirstPage = 0
 const noPaginationDataPath = 'payload'
 
 export default {
@@ -426,6 +426,7 @@ export default {
     onEdit: {
       type: Function,
       default(row) {
+        // console.log('On delete row')
       }
     },
     /**
@@ -722,10 +723,6 @@ export default {
       default(row, index) {
         return true
       }
-    },
-    totalData: {
-      type: Array,
-      default: null
     }
   },
   data() {
@@ -813,13 +810,6 @@ 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: {
@@ -838,13 +828,6 @@ 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() {
@@ -861,9 +844,6 @@ export default {
         }
       }
     }
-    if (this.totalData) {
-      this.getList()
-    }
   },
   methods: {
     getQuery() {
@@ -897,58 +877,12 @@ 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 方法选项
      */
-    getListFromRemote({ loading = true } = {}) {
+    getList({ loading = true } = {}) {
       const { url } = this
       if (!url) {
         return

src/components/DataTable/index.vue

@@ -94,20 +94,12 @@ export default {
     tableConfig() {
       const tableDefaultConfig = this.defaultConfig
       tableDefaultConfig.paginationSize = _.get(this.globalTableConfig, 'paginationSize', 15)
-      let tableAttrs = tableDefaultConfig.tableAttrs
-      if (this.config.tableAttrs) {
-        tableAttrs = Object.assign(tableAttrs, this.config.tableAttrs)
-      }
       const config = Object.assign(tableDefaultConfig, this.config)
-      config.tableAttrs = tableAttrs
       return config
     },
     iListeners() {
       return Object.assign({}, this.$listeners, this.tableConfig.listeners)
     },
-    dataTable() {
-      return this.$refs.table
-    },
     ...mapGetters({
       'globalTableConfig': 'tableConfig'
     })

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

@@ -95,8 +95,6 @@ export default {
           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,

src/components/DataZTree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ZTree ref="ztree" :setting="treeSetting" v-on="$listeners">
+  <ZTree ref="ztree" :setting="treeSetting">
     <!--Slot透传-->
     <div slot="rMenu" slot-scope="{data}">
       <slot name="rMenu" :data="data" />

src/components/DetailCard/ItemValue.vue

@@ -28,30 +28,13 @@ export default {
       return this.formatter(this.item, this.value)
     }
     if (typeof this.value === 'boolean') {
-      return (
-        <span class='item-value'>{this.toChoicesDisplay(this.value)}</span>
-      )
+      return <span>{this.toChoicesDisplay(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>
-    )
+    return <span>{this.value}</span>
   }
 }
 </script>
 
 <style scoped>
-.item-value {
-  word-break: break-word;
-}
 
 </style>

src/components/Dialog/index.vue

@@ -55,6 +55,7 @@ export default {
   },
   data() {
     return {
+
     }
   },
   methods: {
@@ -73,8 +74,4 @@ export default {
     /*padding-top: 10px;*/
   }
 
-  .dialog-footer {
-    padding-right: 20px;
-  }
-
 </style>

src/components/FormFields/Link.vue

@@ -1,30 +0,0 @@
-<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>

src/components/FormFields/UpdateToken.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <el-button v-show="!isShow" type="text" icon="el-icon-edit" @click="isShow=true">
-      {{ text }}
-    </el-button>
-    <el-input
-      v-show="isShow"
-      v-model.trim="curValue"
-      show-password
-      :type="type"
-      autocomplete="new-password"
-      :placeholder="placeholder"
-      @change="onChange"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: () => ''
-    },
-    type: {
-      type: String,
-      default: () => 'input'
-    },
-    text: {
-      type: String,
-      default() {
-        return this.$t('common.Update')
-      }
-    },
-    placeholder: {
-      type: String,
-      default: () => ''
-    }
-  },
-  data() {
-    return {
-      isShow: false,
-      curValue: this.value
-    }
-  },
-  created() {
-    if (this.$route.path.indexOf('/create') !== -1) {
-      this.isShow = true
-    }
-  },
-  methods: {
-    onChange(e) {
-      this.$emit('input', this.curValue)
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/components/FormFields/WeekCronSelect.vue

@@ -1,409 +0,0 @@
-<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>

src/components/FormFields/index.js

@@ -1,36 +0,0 @@
-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'
-import UpdateToken from './UpdateToken'
-
-export default {
-  DatetimeRangePicker,
-  Link,
-  PasswordInput,
-  Select2,
-  Swicher,
-  UploadKey,
-  UploadField,
-  UserPassword,
-  WeekCronSelect,
-  UpdateToken
-}
-
-export {
-  DatetimeRangePicker,
-  Link,
-  PasswordInput,
-  Select2,
-  Swicher,
-  UploadKey,
-  UploadField,
-  UserPassword,
-  WeekCronSelect,
-  UpdateToken
-}

src/components/FormGroupHeader/index.vue

@@ -1,24 +1,20 @@
 <template>
   <div class="form-group-header">
     <div v-if="line" class="hr-line-dashed" />
-    <h3>{{ group.title }}</h3>
+    <h3>{{ 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: () => ({})
     }
   }
 }

src/components/GrantedAssets/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script type="text/jsx">
-import { DetailFormatter, SystemUserFormatter } from '@/components/TableFormatters'
+import { DetailFormatter, SystemUserFormatter } from '@/components/ListTable/formatters'
 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.data.id
+        const nodeId = node.meta.node.id
         const url = initialUrl.replace('/assets/', `/nodes/${nodeId}/assets/`)
         vm.tableConfig.url = url
       }

src/components/IBox/HeadingIBox.vue

@@ -1,6 +1,6 @@
 <template>
   <IBox v-bind="$attrs">
-    <div v-if="contentHeading" class="ibox-heading">
+    <div 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: null
+      default: () => ({})
     }
   }
 }

src/components/ListTable/TableAction/ExportDialog.vue

@@ -1,45 +1,29 @@
 <template>
-  <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>
+  <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 :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>
 </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,
-    MFAVerifyDialog
+    Dialog
   },
   props: {
     selectedRows: {
@@ -48,20 +32,12 @@ export default {
     },
     url: {
       type: String,
-      default: ''
-    },
-    beforeExport: {
-      type: Function,
-      default: () => {}
-    },
-    mfaVerifyRequired: {
-      type: Boolean,
-      default: false
+      default: () => ''
     },
     performExport: {
       type: Function,
-      default(selectedRows, exportOptions, query, exportType) {
-        return this.defaultPerformExport(selectedRows, exportOptions, query, exportType)
+      default(selectedRows, exportOptions, query) {
+        return this.defaultPerformExport(selectedRows, exportOptions, query)
       }
     },
     canExportAll: {
@@ -79,12 +55,10 @@ export default {
   },
   data() {
     return {
-      exportDialogShow: false,
+      showExportDialog: false,
       exportOption: 'all',
       exportTypeOption: 'csv',
-      meta: {},
-      mfaVerified: false,
-      mfaDialogShow: false
+      meta: {}
     }
   },
   computed: {
@@ -141,33 +115,18 @@ export default {
     }
   },
   mounted() {
-    this.$eventBus.$on('showExportDialog', ({ selectedRows, url, name }) => {
-      // Todo: 没有时间了，只能先这么处理了
-      if (url === this.url || url.indexOf(this.url) > -1 || url.indexOf('account') > -1) {
-        this.showExportDialog()
-      }
+    this.$eventBus.$on('showExportDialog', (row) => {
+      this.showExportDialog = true
     })
   },
   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, exportTypeOption) {
+    async defaultPerformExport(selectRows, exportOption, q) {
       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') {
@@ -178,8 +137,13 @@ 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'] = exportTypeOption
+      query['format'] = this.exportTypeOption
       const queryStr =
           (url.indexOf('?') > -1 ? '&' : '?') +
           queryUtil.stringify(query, '=', '&')
@@ -187,20 +151,17 @@ 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']
-      await this.beforeExport()
-      return this.performExport(this.selectedRows, this.exportOption, query, this.exportTypeOption)
+      return this.performExport(this.selectedRows, this.exportOption, query)
     },
     async handleExportConfirm() {
       await this.handleExport()
-      this.exportDialogShow = false
-      this.mfaDialogShow = false
+      this.showExportDialog = false
     },
     handleExportCancel() {
-      this.exportDialogShow = false
-      this.mfaDialogShow = false
+      this.showExportDialog = false
     }
   }
 }

src/components/ListTable/TableAction/ImExportDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <ExportDialog :selected-rows="selectedRows" v-bind="exportOptions" v-on="$listeners" />
-    <ImportDialog :selected-rows="selectedRows" v-bind="importOptions" v-on="$listeners" />
+    <ExportDialog :selected-rows="selectedRows" :url="url" v-bind="$attrs" v-on="$listeners" />
+    <ImportDialog :selected-rows="selectedRows" :url="url" v-bind="$attrs" v-on="$listeners" />
   </div>
 </template>
 
@@ -10,7 +10,7 @@ import ExportDialog from './ExportDialog'
 import ImportDialog from './ImportDialog'
 
 export default {
-  name: 'ImExportDialog',
+  name: 'DialogAction',
   components: {
     ExportDialog,
     ImportDialog
@@ -20,13 +20,9 @@ export default {
       type: Array,
       default: () => []
     },
-    exportOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    importOptions: {
-      type: Object,
-      default: () => ({})
+    url: {
+      type: String,
+      default: () => ''
     }
   },
   data() {

src/components/ListTable/TableAction/ImportDialog.vue

@@ -1,73 +1,64 @@
 <template>
   <Dialog
-    :title="importTitle"
+    :title="$t('common.Import')"
     :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"
+    @confirm="handleImportConfirm"
+    @cancel="handleImportCancel()"
   >
-    <el-form v-if="!showTable" label-position="left" style="padding-left: 50px">
+    <el-form label-position="left" style="padding-left: 50px">
+      <el-form-item :label="$t('common.fileType' )" :label-width="'100px'">
+        <el-radio-group v-model="importTypeOption">
+          <el-radio v-for="option of importTypeOptions" :key="option.value" class="export-item" :label="option.value" :disabled="!option.can">{{ option.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item :label="$t('common.Import' )" :label-width="'100px'">
-        <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>
+        <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>
         <div style="line-height: 1.5">
-          <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 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>
         </div>
       </el-form-item>
-      <el-form-item :label="$t('common.Upload' )" :label-width="'100px'" class="file-uploader">
+      <el-form-item :label="$t('common.Upload' )" :label-width="'100px'">
         <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"
         >
-          <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-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>-->
         </el-upload>
       </el-form-item>
     </el-form>
-    <div v-else class="importTableZone">
-      <ImportTable
-        ref="importTable"
-        :json-data="jsonData"
-        :import-option="importOption"
-        :url="url"
-        @cancel="cancelUpload"
-        @finish="closeDialog"
-      />
+    <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>
   </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,
-    ImportTable
+    Dialog
   },
   props: {
     selectedRows: {
@@ -82,119 +73,103 @@ export default {
   data() {
     return {
       showImportDialog: false,
-      importOption: 'create',
+      importOption: '1',
+      isCsv: true,
       errorMsg: '',
       loadStatus: false,
-      importTypeOption: 'csv',
-      importTypeIsCsv: true,
-      showTable: false,
-      renderError: '',
-      hasFileFormatOrSizeError: false,
-      jsonData: {}
+      importTypeOption: 'csv'
     }
   },
   computed: {
     hasSelected() {
       return this.selectedRows.length > 0
     },
+    importTypeOptions() {
+      return [
+        {
+          label: 'CSV',
+          value: 'csv',
+          can: true
+        },
+        {
+          label: 'Excel',
+          value: 'xlsx',
+          can: true
+        }
+      ]
+    },
+    upLoadUrl() {
+      return this.url
+    },
+    downloadImportTempUrl() {
+      const format = this.importTypeOption === 'csv' ? 'format=csv&template=import&limit=1' : 'format=xlsx&template=import&limit=1'
+      const url = (this.url.indexOf('?') === -1) ? `${this.url}?${format}` : `${this.url}&${format}`
+      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', ({ url }) => {
-      if (url === this.url) {
-        this.showImportDialog = true
-      }
+    this.$eventBus.$on('showImportDialog', (row) => {
+      this.showImportDialog = true
     })
   },
   methods: {
-    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
+    performUpdate(item) {
+      this.$axios.put(
+        this.upLoadUrl,
+        item.file,
+        { headers: { 'Content-Type': this.importTypeOption === 'csv' ? 'text/csv' : 'text/xlsx' }, disableFlashErrorMsg: true }
+      ).then((data) => {
+        const msg = this.$t('common.imExport.updateSuccessMsg', { count: data.length })
+        this.onSuccess(msg)
       }).catch(error => {
-        fileList.splice(0, fileList.length)
-        this.renderError = getErrorResponseMsg(error)
+        this.catchError(error)
       }).finally(() => {
         this.loadStatus = false
       })
     },
-    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}`
+    performCreate(item) {
+      this.$axios.post(
+        this.upLoadUrl,
+        item.file,
+        { headers: { 'Content-Type': this.importTypeOption === 'csv' ? 'text/csv' : 'text/xlsx' }, disableFlashErrorMsg: true }
+      ).then((data) => {
+        const msg = this.$t('common.imExport.createSuccessMsg', { count: data.length })
+        this.onSuccess(msg)
+      }).catch(error => {
+        this.catchError(error)
+      }).finally(() => {
+        this.loadStatus = false
+      })
     },
     catchError(error) {
-      console.log(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
+      }
     },
     onSuccess(msg) {
       this.errorMsg = ''
@@ -206,14 +181,40 @@ export default {
       a.click()
       window.URL.revokeObjectURL(url)
     },
+    handleImport(item) {
+      this.loadStatus = true
+      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 format = this.importTypeOption === 'csv' ? '?format=csv&template=update&spm=' : '?format=xlsx&template=update&spm='
+      const url = `${baseUrl}${format}` + spm.spm
+      return this.downloadCsv(url)
+    },
     async handleImportConfirm() {
-      this.$refs['importTable'].performUpload()
+      this.$refs.upload.submit()
     },
     handleImportCancel() {
       this.showImportDialog = false
-      this.showTable = false
-      this.renderError = ''
-      this.jsonData = {}
+    },
+    beforeUpload(file) {
+      this.isCsv = this.importTypeOption === 'csv' ? _.endsWith(file.name, 'csv') : _.endsWith(file.name, 'xlsx')
+      if (!this.isCsv) {
+        this.$message.error(
+          this.$t('common.NeedSpecifiedFile')
+        )
+      }
+      return this.isCsv
     }
   }
 }
@@ -230,49 +231,4 @@ 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>

src/components/ListTable/TableAction/ImportTable.vue

@@ -1,427 +0,0 @@
-<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>

src/components/ListTable/TableAction/LeftSide.vue

@@ -1,46 +1,34 @@
 <template>
-  <DataActions
-    v-if="hasLeftActions"
-    :actions="iActions"
-    v-bind="$attrs"
-    class="header-action"
-  />
+  <ActionsGroup v-if="hasLeftActions" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" v-bind="$attrs" class="header-action" />
 </template>
 
 <script>
-import i18n from '@/i18n/i18n'
-import DataActions from '@/components/DataActions'
+import ActionsGroup from '@/components/ActionsGroup'
 import { createSourceIdCache } from '@/api/common'
 import { cleanActions } from './utils'
 
-const defaultTrue = { type: [Boolean, Function], default: true }
-const defaultFalse = { type: [Boolean, Function], default: false }
+const defaultTrue = { type: Boolean, default: true }
+const defaultFalse = { type: Boolean, default: false }
 export default {
   name: 'LeftSide',
   components: {
-    DataActions
+    ActionsGroup
   },
   props: {
-    hasLeftActions: defaultTrue,
     hasCreate: defaultTrue,
-    canCreate: defaultTrue,
-    createRoute: {
-      type: [String, Object, Function],
-      default: function() {
-        return this.$route.name.replace('List', 'Create')
-      }
-    },
-    createInNewPage: {
-      type: Boolean,
-      default: false
-    },
     hasBulkDelete: defaultTrue,
     hasBulkUpdate: defaultFalse,
-    hasMoreActions: defaultTrue,
+    hasLeftActions: defaultTrue,
     tableUrl: {
       type: String,
       default: ''
     },
+    createRoute: {
+      type: [String, Object],
+      default: function() {
+        return this.$route.name.replace('List', 'Create')
+      }
+    },
     reloadTable: {
       type: Function,
       default: () => {}
@@ -65,41 +53,23 @@ export default {
       type: String,
       default: null
     },
-    moreCreates: {
+    moreActionsButton: {
       type: Object,
-      default: null
-    },
-    createTitle: {
-      type: String,
-      default: () => i18n.t('common.Create')
+      default: () => ({})
     }
   },
   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: defaultActions,
+      defaultActions: [
+        {
+          name: 'actionCreate',
+          title: this.$t('common.Create'),
+          type: 'primary',
+          has: this.hasCreate,
+          can: true,
+          callback: this.handleCreate
+        }
+      ],
       defaultMoreActions: [
         {
           title: this.$t('common.deleteSelected'),
@@ -122,9 +92,6 @@ export default {
     }
   },
   computed: {
-    iActions() {
-      return [...this.actions, this.moreAction]
-    },
     actions() {
       const actions = [...this.defaultActions, ...this.extraActions]
       return cleanActions(actions, true, {
@@ -132,20 +99,12 @@ export default {
         reloadTable: this.reloadTable
       })
     },
-    moreAction() {
-      if (!this.hasMoreActions) {
-        return
-      }
-      let dropdown = [...this.defaultMoreActions, ...this.extraMoreActions]
-      dropdown = cleanActions(dropdown, true, {
+    moreActions() {
+      const actions = [...this.defaultMoreActions, ...this.extraMoreActions]
+      return cleanActions(actions, 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
@@ -153,22 +112,14 @@ export default {
   },
   methods: {
     handleCreate() {
-      let route
+      let route = {}
       if (typeof this.createRoute === 'string') {
-        route = { name: this.createRoute }
         route.name = this.createRoute
-      } else if (typeof this.createRoute === 'function') {
-        route = this.createRoute()
-      } else if (typeof this.createRoute === 'object') {
+      } else {
         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') + ' ?'

src/components/ListTable/TableAction/RightSide.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
     <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item" />
-    <ImExportDialog
-      :selected-rows="selectedRows"
-      :export-options="iExportOptions"
-      :import-options="iImportOptions"
-      v-bind="$attrs"
-    />
+    <ImExportDialog :selected-rows="selectedRows" :url="tableUrl" v-bind="$attrs" />
   </div>
 </template>
 
@@ -14,7 +9,6 @@
 import ActionsGroup from '@/components/ActionsGroup'
 import ImExportDialog from './ImExportDialog'
 import { cleanActions } from './utils'
-import { assignIfNot } from '@/utils/common'
 
 const defaultTrue = { type: Boolean, default: true }
 
@@ -30,41 +24,20 @@ export default {
       default: ''
     },
     hasExport: defaultTrue,
-    exportOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    handleExportClick: {
+    handleExport: {
       type: Function,
       default: function({ selectedRows }) {
-        this.$eventBus.$emit('showExportDialog', { selectedRows, url: this.tableUrl, name: this.name })
+        this.$eventBus.$emit('showExportDialog', { selectedRows })
       }
     },
     hasImport: defaultTrue,
-    importOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    handleImportClick: {
+    handleImport: {
       type: Function,
       default: function({ 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 })
+        this.$eventBus.$emit('showImportDialog', { selectedRows })
       }
     },
     hasRefresh: defaultTrue,
-    handleRefreshClick: {
-      type: Function,
-      default: function() {
-        this.reloadTable()
-      }
-    },
     selectedRows: {
       type: Array,
       default: () => []
@@ -81,12 +54,12 @@ export default {
   data() {
     return {
       defaultRightSideActions: [
-        { 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) }
+        { 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 }
       ],
-      dialogExportVisible: false
+      dialogExportVisible: false,
+      exportValue: 2
     }
   },
   computed: {
@@ -100,18 +73,20 @@ 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()
     }
   }
 }

src/components/ListTable/TableAction/index.vue

@@ -20,7 +20,7 @@
 <script>
 import AutoDataSearch from '@/components/AutoDataSearch'
 import LeftSide from './LeftSide'
-import DatetimeRangePicker from '@/components/FormFields/DatetimeRangePicker'
+import DatetimeRangePicker from '@/components/DatetimeRangePicker'
 import RightSide from './RightSide'
 
 const defaultTrue = { type: Boolean, default: true }

src/components/ListTable/TableAction/utils.js

@@ -5,9 +5,7 @@ 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 })
-    if (!action.dropdown) {
-      action.callback = cleanCallback(action, { selectedRows, reloadTable })
-    }
+    action.callback = cleanCallback(action, { selectedRows, reloadTable })
     cleanedActions.push(action)
   })
   return cleanedActions

src/components/ListTable/formatters/ActionsFormatter.vue

@@ -1,19 +1,16 @@
 <template>
-  <ActionsGroup v-loading="loadingStatus" :size="'mini'" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" />
+  <ActionsGroup :size="'mini'" :actions="actions" :more-actions="moreActions" :more-actions-title="moreActionsTitle" />
 </template>
 
 <script>
-import ActionsGroup from '@/components/ActionsGroup'
+import ActionsGroup from '@/components/ActionsGroup/index'
 import BaseFormatter from './base'
 
 const defaultPerformDelete = function({ row, col }) {
   const id = row.id
-  const url = new URL(this.url, location.origin)
-  url.pathname += `${id}/`
-  const deleteUrl = url.href
-  return this.$axios.delete(deleteUrl)
+  const url = `${this.url}${id}/`
+  return this.$axios.delete(url)
 }
-
 const defaultUpdateCallback = function({ row, col }) {
   const id = row.id
   let route = { params: { id: id }}
@@ -84,15 +81,11 @@ export default {
       default: function() {
         return {
           hasUpdate: true, // can set function(row, value)
-          canUpdate: () => {
-            return !this.$store.getters.currentOrgIsRoot
-          }, // can set function(row, value)
+          canUpdate: true, // can set function(row, value)
           hasDelete: true, // can set function(row, value)
           canDelete: true,
-          hasClone: true,
-          canClone: () => {
-            return !this.$store.getters.currentOrgIsRoot
-          },
+          hasClone: false,
+          canClone: true,
           updateRoute: this.$route.name.replace('List', 'Update'),
           cloneRoute: this.$route.name.replace('List', 'Create'),
           performDelete: defaultPerformDelete,
@@ -147,12 +140,10 @@ export default {
       let actions = [...this.defaultActions, ...this.extraActions]
       actions = _.cloneDeep(actions)
       actions = actions.map((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.has = this.cleanBoolean(v, 'has')
+        v.can = this.cleanBoolean(v, 'can')
+        v.callback = this.cleanCallback(v)
         v.order = v.order || 100
-        v.tip = this.cleanValue(v, 'tip')
         return v
       })
       actions = actions.filter((v) => v.has)
@@ -170,21 +161,18 @@ export default {
         return []
       }
       return this.cleanedActions.slice(1, this.cleanedActions.length)
-    },
-    loadingStatus() {
-      return this.col.formatterArgs.loading
     }
   },
   methods: {
-    cleanBoolean(item, attr, defaults) {
+    cleanBoolean(item, attr) {
       const ok = item[attr]
       if (typeof ok !== 'function') {
-        return ok === undefined ? defaults : ok
+        return ok === undefined ? true : ok
       }
-      return this.cleanValue(item, attr)
+      return ok(this.row, this.cellValue)
     },
-    cleanCallback(item, attr) {
-      const callback = item[attr]
+    cleanCallback(item) {
+      const callback = item.callback
       const attrs = {
         reload: this.reload,
         row: this.row,
@@ -193,20 +181,6 @@ 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)
     }
   }
 }

src/components/ListTable/formatters/ChoicesFormatter.vue

@@ -1,17 +1,7 @@
 <template>
   <div>
     <el-tooltip v-if="formatterArgs.hasTips" placement="bottom" effect="dark">
-      <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>
+      <div slot="content">{{ tipStatus }}<br>{{ tipTime }}</div>
       <i :class="'fa ' + iconClass" />
     </el-tooltip>
     <i v-else :class="'fa ' + iconClass" />
@@ -20,8 +10,9 @@
 
 <script>
 import BaseFormatter from './base'
+import { toSafeLocalDateStr } from '@/utils/common'
 export default {
-  name: 'StatusFormatter',
+  name: 'ChoicesFormatter',
   extends: BaseFormatter,
   props: {
     formatterArgsDefault: {
@@ -32,12 +23,19 @@ export default {
             true: 'fa-check text-primary',
             false: 'fa-times text-danger'
           },
-          getChoicesKey(val) {
+          typeChange(val) {
             return !!val
           },
-          getTip(val, col) {
-          },
-          hasTips: false
+          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')
+            }
+          }
         }
       }
     }
@@ -49,15 +47,15 @@ export default {
   },
   computed: {
     iconClass() {
-      const key = this.formatterArgs.getChoicesKey(this.cellValue)
-      return this.formatterArgs.iconChoices[key] + ' ' + key + 'Status'
+      const key = this.formatterArgs.typeChange(this.cellValue)
+      return this.formatterArgs.iconChoices[key]
     },
-    tips() {
+    tipStatus() {
       const vm = this
-      return this.formatterArgs.getTip(this.cellValue, vm)
+      return this.formatterArgs.tipStatus(this.cellValue, vm)
     },
-    tipsIsArray() {
-      return Array.isArray(this.tips)
+    tipTime() {
+      return toSafeLocalDateStr(this.cellValue.datetime)
     }
   }
 }

src/components/ListTable/formatters/CustomActionsFormatter.vue

@@ -0,0 +1,78 @@
+<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>

src/components/ListTable/formatters/DeleteActionFormatter.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button ref="deleteButton" size="mini" type="danger" :disabled="iDisabled" @click="onDelete(col, row, cellValue, reload)">
+  <el-button ref="deleteButton" size="mini" type="danger" :disabled="canDelete" @click="onDelete(col, row, cellValue, reload)">
     <i class="fa fa-minus" />
   </el-button>
 </template>
@@ -11,19 +11,18 @@ export default {
   name: 'DeleteActionFormatter',
   extends: BaseFormatter,
   computed: {
-    iDisabled() {
-      // 禁用
-      return (this.disabled() || this.$store.getters.currentOrgIsRoot)
+    canDelete() {
+      return this.iCanDelete()
     }
   },
   methods: {
     defaultOnDelete(col, row, cellValue, reload) {
       const url = col.deleteUrl + cellValue
       this.$axios.delete(url).then(res => {
-        this.$message.success(this.$tc('common.deleteSuccessMsg'))
+        this.$message.success(this.$t('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) {
@@ -33,7 +32,7 @@ export default {
         this.defaultOnDelete(col, row, cellValue, reload)
       }
     },
-    disabled() {
+    iCanDelete() {
       if (this.col.objects === 'all') {
         return false
       }

src/components/ListTable/formatters/DetailFormatter.vue

@@ -25,16 +25,8 @@ export default {
   data() {
     const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
     return {
-      formatterArgs: formatterArgs
-    }
-  },
-  computed: {
-    iTitle() {
-      return this.formatterArgs.getTitle({
-        col: this.col,
-        row: this.row,
-        cellValue: this.cellValue
-      })
+      formatterArgs: formatterArgs,
+      iTitle: formatterArgs.getTitle({ col: this.col, row: this.row, cellValue: this.cellValue })
     }
   },
   methods: {
@@ -71,11 +63,6 @@ export default {
 
 <style scoped>
 .detail {
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   font-weight: 400;
 }
 </style>

src/components/ListTable/formatters/DisplayFormatter.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :class="cls"> {{ value }}</span>
+  <span>{{ display }}</span>
 </template>
 
 <script>
@@ -19,27 +19,19 @@ export default {
   },
   data() {
     return {
-      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+      display: this.getValue()
     }
   },
-  computed: {
-    value() {
-      const displayKey = this.formatterArgs.displayKey
+  methods: {
+    getValue() {
+      const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+      const displayKey = 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>

src/components/ListTable/formatters/LoadingActionsFormatter.vue

@@ -0,0 +1,116 @@
+<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>

src/components/ListTable/formatters/index.js

@@ -1,42 +1,39 @@
 import DetailFormatter from './DetailFormatter'
-import ArrayFormatter from './ArrayFormatter'
 import DisplayFormatter from './DisplayFormatter'
-import ChoicesFormatter from './ChoicesFormatter'
+import BooleanFormatter 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/TableFormatters/ShowKeyFormatter'
+import ShowKeyFormatter from '@/components/ListTable/formatters/ShowKeyFormatter'
 import DialogDetailFormatter from './DialogDetailFormatter'
-import EditableInputFormatter from './EditableInputFormatter'
-import StatusFormatter from './StatusFormatter'
+import LoadingActionsFormatter from './LoadingActionsFormatter'
 
 export default {
   DetailFormatter,
   DisplayFormatter,
-  ChoicesFormatter,
+  BooleanFormatter,
   ActionsFormatter,
+  CustomActionsFormatter,
   DeleteActionFormatter,
   DateFormatter,
   SystemUserFormatter,
   ShowKeyFormatter,
   DialogDetailFormatter,
-  ArrayFormatter,
-  EditableInputFormatter,
-  StatusFormatter
+  LoadingActionsFormatter
 }
 
 export {
   DetailFormatter,
   DisplayFormatter,
-  ChoicesFormatter,
+  BooleanFormatter,
   ActionsFormatter,
+  CustomActionsFormatter,
   DeleteActionFormatter,
   DateFormatter,
   SystemUserFormatter,
   ShowKeyFormatter,
   DialogDetailFormatter,
-  ArrayFormatter,
-  EditableInputFormatter,
-  StatusFormatter
+  LoadingActionsFormatter
 }

src/components/ListTable/index.vue

@@ -1,21 +1,8 @@
 <template>
   <div>
-    <TableAction
-      :table-url="tableUrl"
-      :search-table="search"
-      :date-pick="handleDateChange"
-      :selected-rows="selectedRows"
-      :reload-table="reloadTable"
-      v-bind="headerActions"
-    />
+    <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
-      <AutoDataTable
-        ref="dataTable"
-        :filter-table="filter"
-        :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>
@@ -55,17 +42,26 @@ export default {
     }
   },
   computed: {
+
     dataTable() {
       return this.$refs.dataTable.$refs.dataTable
     },
+    hasCreateAction() {
+      const hasLeftAction = this.headerActions.hasLeftActions
+      if (hasLeftAction === false) {
+        return false
+      }
+      const hasCreate = this.headerActions.hasCreate
+      if (hasCreate === false) {
+        return false
+      }
+      return true
+    },
     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: {
@@ -90,35 +86,22 @@ 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) {
-      let dateFrom = ''
-      let dateTo = ''
-      try {
-        dateFrom = attrs[0].toISOString()
-        dateTo = attrs[1].toISOString()
-      } catch (e) {
-        this.$log.error('Handle date change error: ', attrs)
-        dateFrom = new Date()
-        dateFrom.setDate(dateFrom.getDate() - 5)
-        dateFrom = dateFrom.toISOString()
-        dateTo = new Date()
-        dateTo.setDate(dateTo.getDate() + 1)
-        dateTo = dateTo.toISOString()
-      }
-      this.$set(this.extraQuery, 'date_from', dateFrom)
-      this.$set(this.extraQuery, 'date_to', dateTo)
+      this.$set(this.extraQuery, 'date_from', attrs[0].toISOString())
+      this.$set(this.extraQuery, 'date_to', attrs[1].toISOString())
+      // this.extraQuery = {
+      //   date_from: attrs[0].toISOString(),
+      //   date_to: attrs[1].toISOString()
+      // }
       const query = {
-        date_from: dateFrom,
-        date_to: dateTo
+        date_from: attrs[0].toISOString(),
+        date_to: attrs[1].toISOString()
       }
-      this.$emit('TagDateChange', attrs)
       return this.dataTable.searchDate(query)
     },
     toggleRowSelection(row, isSelected) {
@@ -139,6 +122,15 @@ export default {
   & >>> .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;*!*/
+  /*}*/
 }
 
 //修改颜色

src/components/MFAVerifyDialog/index.vue

@@ -1,77 +0,0 @@
-<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>

src/components/QuickActions/action.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Switcher from '../FormFields/Swicher'
+import Switcher from '../Swicher'
 export default {
   name: 'ActionItem',
   components: {

src/components/QuickActions/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <IBox :fa="fa" :title="title" v-bind="$attrs">
+  <IBox fa="fa-edit" :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,10 +20,6 @@ export default {
     ActionItem
   },
   props: {
-    fa: {
-      type: String,
-      default: () => 'fa-edit'
-    },
     title: {
       type: String,
       default() {

src/components/RelationCard/index.vue

@@ -1,28 +1,22 @@
 <template>
   <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
-    <table style="width: 100%;table-layout:fixed;" class="CardTable">
+    <table style="width: 100%">
       <tr>
         <td colspan="2">
-          <Select2 ref="select2" v-model="select2.value" :disabled="iDisabled" v-bind="select2" />
+          <Select2 ref="select2" v-model="select2.value" v-bind="select2" />
         </td>
       </tr>
       <slot />
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" :loading="submitLoading" :disabled="iDisabled" @click="addObjects">
-            {{ $t('common.Add') }}
-          </el-button>
+          <el-button :type="type" size="small" :loading="submitLoading" @click="addObjects">{{ $t('common.Add') }}</el-button>
         </td>
       </tr>
       <template v-if="showHasObjects">
-        <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>
+        <tr v-for="obj of iHasObjects" :key="obj.value" style="width: 100%" class="item">
+          <td><b>{{ obj.label }}</b></td>
           <td>
-            <el-button size="mini" :disabled="iDisabled" type="danger" style="float: right" @click="removeObject(obj)">
+            <el-button size="mini" type="danger" style="float: right" @click="removeObject(obj)">
               <i class="fa fa-minus" />
             </el-button>
           </td>
@@ -30,7 +24,7 @@
       </template>
       <tr v-if="params.hasMore && showHasMore" class="item">
         <td colspan="2">
-          <el-button :type="type" :disabled="iDisabled" size="small" style="width: 100%" @click="loadMore">
+          <el-button :type="type" size="small" style="width: 100%" @click="loadMore">
             <i class="fa fa-arrow-down" />
             {{ $t('common.More') }}
           </el-button>
@@ -41,10 +35,9 @@
 </template>
 
 <script>
-import Select2 from '../FormFields/Select2'
+import Select2 from '../Select2'
 import IBox from '../IBox'
 import { createSourceIdCache } from '@/api/common'
-import { mapGetters } from 'vuex'
 export default {
   name: 'RelationCard',
   components: {
@@ -90,10 +83,6 @@ export default {
       type: [Array, Number, String],
       default: () => []
     },
-    disabled: {
-      type: [Boolean, Function],
-      default: null
-    },
     showHasMore: {
       type: Boolean,
       default: true
@@ -145,13 +134,11 @@ export default {
         ajax: this.objectsAjax,
         options: this.objects,
         value: this.value,
-        disabled: this.disabled,
         disabledValues: []
       }
     }
   },
   computed: {
-    ...mapGetters(['currentOrgIsRoot']),
     iAjax() {
       return this.$refs.select2.iAjax
     },
@@ -160,12 +147,6 @@ export default {
     },
     hasObjectLeftLength() {
       return this.totalHasObjectsLength - this.iHasObjects.length
-    },
-    iDisabled() {
-      if (this.disabled !== null) {
-        return this.disabled
-      }
-      return this.currentOrgIsRoot
     }
   },
   watch: {

src/components/Select2/index.vue

@@ -2,14 +2,13 @@
   <el-select
     ref="select"
     v-model="iValue"
-    v-loading="!initialized"
     v-loadmore="loadMore"
     :options="iOptions"
     :remote="remote"
     :remote-method="filterOptions"
     :multiple="multiple"
-    :clearable="clearable"
     filterable
+    :clearable="clearable"
     popper-append-to-body
     class="select2"
     v-bind="$attrs"
@@ -98,6 +97,7 @@ export default {
     return {
       loading: false,
       initialized: false,
+      iValue: this.value ? this.value : [],
       defaultParams: _.cloneDeep(defaultParams),
       params: _.cloneDeep(defaultParams),
       iOptions: this.options || [],
@@ -112,18 +112,6 @@ 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) => {
@@ -173,14 +161,11 @@ export default {
       this.iValue = iNew
     }
   },
-  async mounted() {
+  mounted() {
     // this.$log.debug('Select2 url is: ', this.iAjax.url)
     if (!this.initialized) {
-      await this.initialSelect()
-      setTimeout(() => {
-        this.iValue = this.value
-        this.initialized = true
-      })
+      this.initialSelect()
+      this.initialized = true
     }
     this.$nextTick(() => {
       // 因为elform存在问题，这个来清楚验证
@@ -258,13 +243,9 @@ 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, ', this.value)
-          let value = this.value
-          if (!Array.isArray(value)) {
-            value = [value]
-          }
-          const data = await createSourceIdCache(value)
-          this.params.spm = data['spm']
+          this.$log.debug('Start init select2 value')
+          const data = await createSourceIdCache(this.value)
+          this.params.spm = data.spm
           await this.getInitialOptions()
         }
         await this.getOptions()
@@ -320,8 +301,4 @@ export default {
   .select2 {
     width: 100%;
   }
-  .select2 >>> .el-tag.el-tag--info {
-    height: auto;
-    white-space: normal;
-  }
 </style>

src/components/SummaryCard/index.vue

@@ -2,11 +2,15 @@
   <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">
-        <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
-        <router-link v-else :to="body.route">
+        <router-link :to="body.route">
           <span>{{ body.count }}</span>
         </router-link>
       </h1>
@@ -70,8 +74,4 @@ export default {
   .no-margins {
     margin: 0 !important;
   }
-
-  .disabled-link {
-    color: #428bca;
-  }
 </style>

src/components/TableFormatters/ArrayFormatter.vue

@@ -1,15 +0,0 @@
-<template>
-  <span>{{ cellValue.toString() }}</span>
-</template>
-
-<script>
-import BaseFormatter from './base'
-export default {
-  name: 'ArrayFormatter',
-  extends: BaseFormatter
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/TableFormatters/BooleanFormatter.vue

@@ -1,46 +0,0 @@
-<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>

src/components/TableFormatters/ChoicesFormatter.vue

@@ -1,82 +0,0 @@
-<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>

src/components/TableFormatters/EditableInputFormatter.vue

@@ -1,84 +0,0 @@
-<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>

src/components/TagSearch/index.vue

@@ -1,13 +1,7 @@
 <template>
 
   <div class="filter-field">
-    <el-cascader
-      v-show="options.length > 0"
-      ref="Cascade"
-      :options="options"
-      :props="config"
-      @change="handleMenuItemChange"
-    />
+    <el-cascader ref="Cascade" :options="options" :props="config" @change="handleMenuItemChange" />
     <el-tag
       v-for="(v, k) in filterTags"
       :key="k"
@@ -30,7 +24,6 @@
       v-model="filterValue"
       :placeholder="placeholder"
       class="search-input"
-      :class="options.length < 1 ? 'search-input2': ''"
       @blur="focus = false"
       @focus="focus = true"
       @change="handleConfirm"
@@ -189,14 +182,10 @@ export default {
   .filter-field {
     display: flex;
     align-items:  center;
-    min-width: 198px;
     border: 1px solid #dcdee2;
     border-radius: 3px;
     background-color:#fff;
   }
-  .search-input2 >>> .el-input__inner {
-    text-indent: 5px;
-  }
   .search-input >>> .el-input__inner {
     /*max-width:inherit !important;*/
     max-width: 200px;

src/components/TreeTable/index.vue

@@ -5,10 +5,8 @@
         <component
           :is="component"
           ref="AutoDataZTree"
-          :key="componentTreeKey"
           :setting="treeSetting"
           class="auto-data-ztree"
-          v-on="$listeners"
           @urlChange="handleUrlChange"
         >
           <div slot="rMenu" slot-scope="{data}">
@@ -24,7 +22,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" v-on="$listeners" />
+            <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" />
           </slot>
         </div>
       </div>
@@ -65,40 +63,25 @@ export default {
     return {
       iTableConfig: this.tableConfig,
       iShowTree: this.showTree,
-      componentKey: 0,
-      componentTreeKey: 0
+      componentKey: 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)
     }
   }
 }

src/components/UploadKey/index.vue

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

src/components/UserPassword/index.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,12 +22,8 @@ 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 = function(rule, value, callback) {
+    const validatePassword = (rule, value, callback) => {
       if (!value) {
         return callback()
       }
@@ -50,10 +46,7 @@ export default {
           return callback(new Error(msg))
         }
       }
-      let secureLength = passwordRule ? passwordRule.SECURITY_PASSWORD_MIN_LENGTH : 7
-      if (userIsOrgAdmin) {
-        secureLength = passwordRule ? passwordRule.SECURITY_ADMIN_USER_PASSWORD_MIN_LENGTH : 7
-      }
+      const secureLength = passwordRule ? passwordRule.SECURITY_PASSWORD_MIN_LENGTH : 7
       if (value.length < secureLength) {
         return callback(new Error(i18n.t('common.password.MIN_LENGTH_ERROR', [secureLength])))
       }
@@ -66,12 +59,17 @@ 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)

src/components/index.js

@@ -12,19 +12,14 @@ export { default as FormGroupHeader } from './FormGroupHeader'
 export { default as Hamburger } from './Hamburger'
 export { default as ListTable } from './ListTable'
 export { default as RelationCard } from './RelationCard'
-export { default as Select2 } from './FormFields/Select2'
-export { default as UploadKey } from './FormFields/UploadKey.vue'
+export { default as Select2 } from './Select2'
 export { default as AssetSelect } from './AssetSelect'
 export { default as SvgIcon } from './SvgIcon'
 export { default as TreeTable } from './TreeTable'
 export { default as IBox } from './IBox'
 export { default as QuickActions } from './QuickActions'
-export { default as Switcher } from './FormFields/Swicher'
+export { default as Switcher } from './Swicher'
 export { default as SummaryCard } from './SummaryCard'
-export { default as UploadField } from './FormFields/UploadField'
-export { default as AccountListTable } from './AccountListTable/index'
-export { default as AppAccountListTable } from './AppAccountListTable'
+export { default as UploadField } from './UploadField'
+export { default as AssetUserTable } from './AssetUserTable'
 export { default as AssetRelationCard } from './AssetRelationCard'
-export { default as MFAVerifyDialog } from './MFAVerifyDialog'
-export { default as Announcement } from './Announcement'
-export { default as CronTab } from './CronTab'