refactor: 改变组件位置

stash

refacter: 整理了forms组件位置

perf: 修改导入

package.json

@@ -15,7 +15,9 @@
     "test:ci": "npm run lint && npm run test:unit",
     "svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
     "vue-i18n-extract": "vue-i18n-extract",
-    "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'"
+    "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
+    "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
+    "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a"
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",

src/components/AssetSelect/index.vue

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

src/components/AssetUserTable/index.vue

@@ -53,7 +53,7 @@
 import { mapGetters } from 'vuex'
 import ListTable from '@/components/ListTable/index'
 import Dialog from '@/components/Dialog'
-import { ActionsFormatter, DateFormatter } from '@/components/ListTable/formatters'
+import { ActionsFormatter, DateFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'Detail',

src/components/AutoDataForm/utils.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Select2 from '@/components/Select2'
+import Select2 from '@/components/FormFields/Select2'
 import NestedField from '@/components/AutoDataForm/components/NestedField'
 import rules from '@/components/DataForm/rules'
 import { assignIfNot } from '@/utils/common'

src/components/AutoDataTable/index.vue

@@ -12,7 +12,7 @@
 
 <script type="text/jsx">
 import DataTable from '../DataTable'
-import { DateFormatter, DetailFormatter, DisplayFormatter, BooleanFormatter, ActionsFormatter } from '@/components/ListTable/formatters'
+import { DateFormatter, DetailFormatter, DisplayFormatter, BooleanFormatter, ActionsFormatter } from '@/components/TableFormatters'
 import i18n from '@/i18n/i18n'
 import ColumnSettingPopover from './components/ColumnSettingPopover'
 export default {

src/components/FormFields/UploadKey.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script>
-
 export default {
   props: {
     value: {

src/components/FormFields/UserPassword.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import PasswordInput from '../PasswordInput'
+import PasswordInput from './PasswordInput'
 import { mapGetters } from 'vuex'
 import store from '@/store'
 import i18n from '@/i18n/i18n'

src/components/FormFields/WeekCronSelect.vue

@@ -0,0 +1,250 @@
+<template>
+  <div>
+    <div class="hours-container">
+      <div v-for="(item, index) in hours" :key="index" class="hours-item">
+        <div class="hours-item-header">{{ compItem(item) }}</div>
+        <div class="hours-item-value">
+          <div
+            :class="compClass(2 * item)"
+            @click="handleClick(2 * item)"
+            @mouseover="handleHover(2 * item)"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="tips">{{ tips }}</div>
+  </div>
+</template>
+<script>
+export default {
+  model: {
+    prop: 'sendTimeList'
+  },
+  props: {
+    sendTimeList: {
+      type: Object,
+      required: true,
+      default: () => []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], // 选项
+      selectStart: false, // 开始
+      startIndex: '', // 开始下标
+      timeRangeList: [], // 选择的时间段
+      timeRangeListIndex: [], // 选中的下标
+      tempRangeIndex: [], // 预选下标
+      tips: '向右选中，向左取消选择'
+    }
+  },
+  computed: {
+  },
+  watch: {
+    timeRangeList: function(value) {
+      this.$emit('change', value)
+      this.$parent.$emit('el.form.change')// 触发父组件的校验规则
+    },
+    sendTimeList: {
+      handler() {
+        this.transformedIndex()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.transformedIndex()
+  },
+  methods: {
+    // 时间区间转换成下标区间
+    transformedIndex() {
+      this.timeRangeListIndex = []
+      this.timeRangeList = this.sendTimeList
+      this.timeRangeList.forEach(element => {
+        const [startTime, endTime] = element.match(/\d+\:\d+/g)
+        if (startTime && endTime) {
+          const [startHour, startMin] = startTime.split(':')
+          const [endHour, endMin] = endTime.split(':')
+          if (startHour && startMin && endHour && endMin) {
+            let startNum, endNum
+            if (startMin === '00') {
+              startNum = 2 * parseInt(startHour)
+            } else {
+              startNum = 2 * parseInt(startHour) + 1
+            }
+            if (endMin === '00') {
+              endNum = 2 * parseInt(endHour) - 1
+            } else {
+              endNum = 2 * parseInt(endHour)
+            }
+            while (endNum >= startNum) {
+              this.timeRangeListIndex.push(startNum)
+              startNum++
+            }
+          } else {
+            this.$message.error('时间段格式不正确')
+          }
+        } else {
+          this.$message.error('没有拿到开始时间或结束时间或者时间段格式不对')
+        }
+      })
+      this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择'
+    },
+    // 下标区间转换成时间区间
+    transformedSection() {
+      this.timeRangeList = []
+      let startTime = ''; let endTime = ''; const len = this.hours.length
+      for (let index = this.hours[0] * 2; index < 2 * (len + 1); index++) {
+        if (this.timeRangeListIndex.indexOf(index) > -1) {
+          if (startTime) { // 如果有开始时间，直接确定结束时间
+            const endHour = Math.floor((index + 1) / 2)
+            const endMin = (index + 1) % 2 === 0 ? '00' : '30'
+            endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`
+          } else { // 没有开始时间，确定当前点为开始时间
+            const startHour = Math.floor(index / 2)
+            const startMin = index % 2 === 0 ? '00' : '30'
+            startTime = `${startHour < 10 ? '0' + startHour : startHour}:${startMin}`
+          }
+          if (index === 2 * this.hours.length + 1) { // 如果是最后一格，直接结束
+            endTime = `${Math.floor((index + 1) / 2)}:00`
+            this.timeRangeList.push(`${startTime || '23:30'}-${endTime}`)
+            startTime = ''
+            endTime = ''
+          }
+        } else { // 若这个点不在选择区间，确定一个时间段
+          if (startTime && endTime) {
+            this.timeRangeList.push(`${startTime}-${endTime}`)
+            startTime = ''
+            endTime = ''
+          } else if (startTime && !endTime) { // 这里可能只选半个小时
+            const endHour = Math.floor(index / 2)
+            const endMin = index % 2 === 0 ? '00' : '30'
+            endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`
+            this.timeRangeList.push(`${startTime}-${endTime}`)
+            startTime = ''
+            endTime = ''
+          }
+        }
+      }
+      this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择'
+    },
+    // 点击事件
+    handleClick(index) {
+      if (this.selectStart) {
+        if (index === this.startIndex) { // 双击取反
+          if (this.timeRangeListIndex.indexOf(index) > -1) {
+            this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1)
+          } else {
+            this.timeRangeListIndex.push(this.startIndex)
+          }
+        } else if (index > this.startIndex) { // 选取数据--向右添加，向左取消
+          while (index >= this.startIndex) {
+            this.timeRangeListIndex.push(this.startIndex)
+            this.startIndex++
+          }
+          this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex))
+        } else { // 删除数据
+          while (this.startIndex >= index) {
+            if (this.timeRangeListIndex.indexOf(index) > -1) {
+              this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1)
+            }
+            index++
+          }
+        }
+        this.startIndex = ''
+        this.tempRangeIndex = []
+        this.transformedSection()
+      } else {
+        this.startIndex = index
+      }
+      this.selectStart = !this.selectStart
+    },
+    // 预选区间
+    handleHover(index) {
+      if (this.selectStart) {
+        this.tempRangeIndex = []
+        if (index > this.startIndex) { // 选取数据--向右添加，向左取消
+          while (index >= this.startIndex) {
+            this.tempRangeIndex.push(index)
+            index--
+          }
+        } else { // 删除数据
+          while (this.startIndex >= index) {
+            this.tempRangeIndex.push(index)
+            index++
+          }
+        }
+      }
+    },
+    // 是否选中，计算className
+    compClass(index) {
+      if (index === this.startIndex) {
+        return 'hours-item-left preSelected'
+      }
+      if (index >= this.startIndex) {
+        if (this.tempRangeIndex.indexOf(index) > -1) {
+          return 'hours-item-left preSelected'
+        }
+      } else {
+        if (this.tempRangeIndex.indexOf(index) > -1) {
+          return 'hours-item-left unSelected'
+        }
+      }
+      return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left'
+    },
+    compItem(item) { // 不足10前面补0
+      return item < 10 ? `0${item}` : item
+    }
+
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.hours-container {
+  display: flex;
+  cursor: pointer;
+  .hours-item {
+    width: 30px;
+    height: 60px;
+    border: 1px solid #c2d0f3;
+    border-right: none;
+    text-align: center;
+    &:last-child {
+      border-right: 1px solid #c2d0f3;
+    }
+    .hours-item-header {
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+      border-bottom: 1px solid #c2d0f3;
+    }
+    .hours-item-value {
+      width: 100%;
+      height: 30px;
+      box-sizing: border-box;
+      display: flex;
+    }
+    .selected {
+      background-color: #4e84fe;
+      border-bottom: 1px solid #c2d0f3;
+    }
+    .preSelected {
+      background-color: #8eaffc;
+      border-bottom: 1px solid #c2d0f3;
+    }
+    .unSelected {
+      background-color: #ffffff;
+      border-bottom: 1px solid #c2d0f3;
+    }
+  }
+}
+.tips {
+  width: 100%;
+  line-height: 30px;
+}
+</style>

src/components/GrantedAssets/index.vue

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

src/components/ListTable/TableAction/ImportTable.vue

@@ -34,7 +34,7 @@
 <script>
 import DataTable from '@/components/DataTable'
 import { sleep } from '@/utils/common'
-import { EditableInputFormatter, StatusFormatter } from '@/components/ListTable/formatters'
+import { EditableInputFormatter, StatusFormatter } from '@/components/TableFormatters'
 export default {
   name: 'ImportTable',
   components: {

src/components/ListTable/TableAction/index.vue

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

src/components/QuickActions/action.vue

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

src/components/RelationCard/index.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import Select2 from '../Select2'
+import Select2 from '../FormFields/Select2'
 import IBox from '../IBox'
 import { createSourceIdCache } from '@/api/common'
 import { mapGetters } from 'vuex'

src/components/TableFormatters/ActionsFormatter.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ActionsGroup from '@/components/ActionsGroup/index'
+import ActionsGroup from '@/components/ActionsGroup'
 import BaseFormatter from './base'
 
 const defaultPerformDelete = function({ row, col }) {

src/components/TableFormatters/LoadingActionsFormatter.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ActionsGroup from '@/components/ActionsGroup/index'
+import ActionsGroup from '@/components/ActionsGroup'
 import BaseFormatter from './base'
 
 export default {

src/components/TableFormatters/index.js

@@ -7,7 +7,7 @@ import ActionsFormatter from './ActionsFormatter'
 import DeleteActionFormatter from './DeleteActionFormatter'
 import DateFormatter from './DateFormatter'
 import SystemUserFormatter from './GrantedSystemUsersShowFormatter'
-import ShowKeyFormatter from '@/components/ListTable/formatters/ShowKeyFormatter'
+import ShowKeyFormatter from '@/components/TableFormatters/ShowKeyFormatter'
 import DialogDetailFormatter from './DialogDetailFormatter'
 import LoadingActionsFormatter from './LoadingActionsFormatter'
 import EditableInputFormatter from './EditableInputFormatter'

src/components/index.js

@@ -12,14 +12,15 @@ 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 './Select2'
+export { default as Select2 } from './FormFields/Select2'
+export { default as UploadKey } from './FormFields/UploadKey.vue'
 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 './Swicher'
+export { default as Switcher } from './FormFields/Swicher'
 export { default as SummaryCard } from './SummaryCard'
-export { default as UploadField } from './UploadField'
+export { default as UploadField } from './FormFields/UploadField'
 export { default as AssetUserTable } from './AssetUserTable'
 export { default as AssetRelationCard } from './AssetRelationCard'

src/layout/components/NavHeader/ApiKey.vue

@@ -12,7 +12,7 @@
 <script>
 import Dialog from '@/components/Dialog'
 import ListTable from '@/components/ListTable'
-import { DateFormatter, ShowKeyFormatter } from '@/components/ListTable/formatters'
+import { DateFormatter, ShowKeyFormatter } from '@/components/TableFormatters'
 export default {
   name: 'ApiKey',
   components: {

src/userviews/apps/DatabaseApp.vue

@@ -8,7 +8,7 @@
 <script>
 import ListTable from '@/components/ListTable/index'
 import Page from '@/layout/components/Page/index'
-import { ActionsFormatter } from '@/components/ListTable/formatters'
+import { ActionsFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'DatabaseApp',

src/userviews/apps/KubernetesApp.vue

@@ -8,7 +8,7 @@
 <script>
 import ListTable from '@/components/ListTable/index'
 import Page from '@/layout/components/Page/index'
-import { ActionsFormatter } from '@/components/ListTable/formatters'
+import { ActionsFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'KubernetesApp',

src/userviews/apps/RemoteApp.vue

@@ -7,7 +7,7 @@
 <script>
 import ListTable from '@/components/ListTable/index'
 import Page from '@/layout/components/Page/index'
-import { ActionsFormatter } from '@/components/ListTable/formatters'
+import { ActionsFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'RemoteApp',

src/userviews/assets/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
-import { LoadingActionsFormatter, SystemUserFormatter, DialogDetailFormatter } from '@/components/ListTable/formatters'
+import { LoadingActionsFormatter, SystemUserFormatter, DialogDetailFormatter } from '@/components/TableFormatters'
 export default {
   components: {
     GenericTreeListPage

src/userviews/users/UserProfile/PasswordUpdate.vue

@@ -14,7 +14,7 @@
 
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
-import UserPassword from '@/components/UserPassword'
+import UserPassword from '@/components/FormFields/UserPassword'
 import { IBox } from '@/components'
 
 export default {

src/views/acl/UserAcl/UserAclList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import { ArrayFormatter } from '@/components/ListTable/formatters'
+import { ArrayFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {

src/views/assets/AdminUser/AdminUserCreateUpdate.vue

@@ -5,7 +5,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import Uploadkey from '@/components/UploadKey'
+import { UploadKey } from '@/components'
 export default {
   name: 'AdminUserCreateUpdate',
   components: {
@@ -51,7 +51,7 @@ export default {
           }
         },
         private_key: {
-          component: Uploadkey
+          component: UploadKey
         }
       },
       url: '/api/v1/assets/admin-users/'

src/views/assets/AdminUser/AdminUserDetail/AssetList.vue

@@ -16,7 +16,7 @@
 import QuickActions from '@/components/QuickActions/index'
 import ListTable from '@/components/ListTable'
 import RelationCard from '@/components/RelationCard'
-import { ChoicesFormatter } from '@/components/ListTable/formatters'
+import { ChoicesFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'AssetList',

src/views/assets/Asset/AssetList.vue

@@ -67,7 +67,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
-import { DetailFormatter, ActionsFormatter, ChoicesFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter, ActionsFormatter, ChoicesFormatter } from '@/components/TableFormatters'
 import $ from '@/utils/jquery-vendor'
 import Dialog from '@/components/Dialog'
 import TreeTable from '@/components/TreeTable'

src/views/assets/CommandFilter/CommandFilterDetail/RulesCreateUpdate.vue

@@ -11,7 +11,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import Select2 from '@/components/Select2'
+import Select2 from '@/components/FormFields/Select2'
 export default {
   name: 'RulesCreateUpdate',
   components: { GenericCreateUpdatePage },

src/views/assets/CommandFilter/CommandFilterList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/ListTable/formatters/index'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {

src/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue

@@ -11,8 +11,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import Uploadkey from '@/components/UploadKey/'
-import { Select2 } from '@/components'
+import { Select2, UploadKey } from '@/components'
 export default {
   name: 'GatewayCreateUpdate',
   components: { GenericCreateUpdatePage },
@@ -72,7 +71,7 @@ export default {
           type: 'switch'
         },
         private_key: {
-          component: Uploadkey
+          component: UploadKey
         }
       },
       updateSuccessNextRoute: {

src/views/assets/Domain/DomainDetail/GatewayList.vue

@@ -30,7 +30,7 @@
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index'
-import DisplayFormatter from '@/components/ListTable/formatters/DisplayFormatter'
+import DisplayFormatter from '@/components/TableFormatters/DisplayFormatter'
 import Dialog from '@/components/Dialog'
 export default {
   components: {

src/views/assets/Domain/DomainList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/ListTable/formatters/index'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {

src/views/assets/SystemUser/SystemUserCreate/fields.js

@@ -1,7 +1,6 @@
 import { Required } from '@/components/DataForm/rules'
-import UploadKey from '@/components/UploadKey'
 import i18n from '@/i18n/i18n'
-import { Select2 } from '@/components'
+import { Select2, UploadKey } from '@/components'
 
 function getFields() {
   const login_mode = {

src/views/assets/SystemUser/SystemUserDetail/AssetList.vue

@@ -18,7 +18,7 @@ import QuickActions from '@/components/QuickActions/index'
 import RelationCard from '@/components/RelationCard'
 import AssetRelationCard from '@/components/AssetRelationCard'
 import ListTable from '@/components/ListTable'
-import { ActionsFormatter } from '@/components/ListTable/formatters'
+import { ActionsFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'AssetList',

src/views/audits/CommandExecutionList.vue

@@ -11,7 +11,7 @@
 import GenericListPage from '@/layout/components/GenericListPage'
 import { getDayEnd, getDaysAgo } from '@/utils/common'
 import { Dialog, ListTable } from '@/components'
-import { DisplayFormatter } from '@/components/ListTable/formatters'
+import { DisplayFormatter } from '@/components/TableFormatters'
 import { setUrlParam } from '@/utils/common'
 
 export default {

src/views/ops/TaskDetail/AdhocDetail/AdhocExecutionHistory.vue

@@ -4,7 +4,7 @@
 
 <script>
 import ListTable from '@/components/ListTable'
-import { ActionsFormatter } from '@/components/ListTable/formatters/index'
+import { ActionsFormatter } from '@/components/TableFormatters'
 import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {

src/views/ops/TaskDetail/TaskAdhoc.vue

@@ -5,7 +5,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import { toSafeLocalDateStr } from '@/utils/common'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 export default {
   name: 'TaskAdhoc',
   components: {

src/views/ops/TaskDetail/TaskHistory.vue

@@ -4,7 +4,7 @@
 
 <script type="text/jsx">
 import ListTable from '@/components/ListTable'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {

src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationPermissionUser.vue

@@ -13,7 +13,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
+import { DeleteActionFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'RemoteAppPermissionUser',

src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationsPermission.vue

@@ -13,7 +13,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
+import { DeleteActionFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'RemoteAppPermissionUser',

src/views/perms/ApplicationPermission/ApplicationPermissionList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 import { ApplicationTypes } from '../const'
 
 export default {

src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue

@@ -35,7 +35,7 @@ export default {
         [this.$t('perms.User'), ['users', 'user_groups']],
         [this.$t('perms.Asset'), ['assets', 'nodes', 'system_users']],
         [this.$t('common.action'), ['actions']],
-        [this.$t('common.Other'), ['is_active', 'date_start', 'date_expired', 'comment']]
+        [this.$t('common.Other'), ['is_active', 'date_cron', 'date_start', 'date_expired', 'comment']]
       ],
       url: '/api/v1/perms/asset-permissions/',
       fieldsMeta: {

src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue

@@ -14,7 +14,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
+import { DeleteActionFormatter } from '@/components/TableFormatters'
 import AssetRelationCard from '@/components/AssetRelationCard'
 
 export default {

src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue

@@ -13,7 +13,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
+import { DeleteActionFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'AssetPermissionUser',

src/views/perms/AssetPermission/AssetPermissionList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
-import { DetailFormatter } from '@/components/ListTable/formatters/index'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {

src/views/sessions/CommandList.vue

@@ -17,7 +17,7 @@
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
 import { getDayEnd, getDaysAgo, toSafeLocalDateStr } from '@/utils/common'
 import { OutputExpandFormatter } from './formatters'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 import isFalsey from '@/components/DataTable/compenents/el-data-table/utils/is-falsey'
 import deepmerge from 'deepmerge'
 import * as queryUtil from '@/components/DataTable/compenents/el-data-table/utils/query'

src/views/sessions/SessionList/BaseList.vue

@@ -5,7 +5,7 @@
 <script type="text/jsx">
 import ListTable from '@/components/ListTable'
 import { timeOffset, getDaysAgo, getDayEnd } from '@/utils/common'
-import { ActionsFormatter } from '@/components/ListTable/formatters'
+import { ActionsFormatter } from '@/components/TableFormatters'
 export default {
   name: 'BaseList',
   components: {

src/views/sessions/TerminalList.vue

@@ -16,8 +16,8 @@
 <script>
 import { GenericListPage, GenericCreateUpdateForm } from '@/layout/components'
 import Dialog from '@/components/Dialog'
-import Select2 from '@/components/Select2'
-import { BooleanFormatter } from '@/components/ListTable/formatters'
+import Select2 from '@/components/FormFields/Select2'
+import { BooleanFormatter } from '@/components/TableFormatters'
 export default {
   components: {
     GenericListPage,

src/views/sessions/formatters/OutputExpandFormatter.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import BaseFormatter from '@/components/ListTable/formatters/base'
+import BaseFormatter from '@/components/TableFormatters/base'
 
 export default {
   name: 'OutputExpandFormatter',

src/views/tickets/RequestApplicationPerm/Detail/TicketDetail.vue

@@ -45,7 +45,7 @@
 import { formatTime, getDateTimeStamp } from '@/utils/index'
 import { toSafeLocalDateStr } from '@/utils/common'
 import { STATUS_MAP } from '../../const'
-import Select2 from '@/components/Select2'
+import Select2 from '@/components/FormFields/Select2'
 import IBox from '@/components/IBox'
 import GenericTicketDetail from '@/views/tickets/components/GenericTicketDetail'
 export default {

src/views/tickets/RequestApplicationPerm/RequestApplicationPermTicketCreateUpdate.vue

@@ -8,7 +8,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import Select2 from '@/components/Select2'
+import Select2 from '@/components/FormFields/Select2'
 import { DEFAULT_ORG_ID } from '@/utils/org'
 import { getDaysFuture } from '@/utils/common'
 import { Required } from '@/components/DataForm/rules'

src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue

@@ -48,7 +48,7 @@
 import { formatTime, getDateTimeStamp } from '@/utils/index'
 import { toSafeLocalDateStr } from '@/utils/common'
 import { STATUS_MAP } from '../../const'
-import Select2 from '@/components/Select2'
+import Select2 from '@/components/FormFields/Select2'
 import IBox from '@/components/IBox'
 import AssetPermissionFormActionField from '@/views/perms/AssetPermission/components/AssetPermissionFormActionField'
 import GenericTicketDetail from '@/views/tickets/components/GenericTicketDetail'

src/views/tickets/RequestAssetPerm/RequestAssetPermTicketCreateUpdate.vue

@@ -5,7 +5,7 @@
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
 import { DEFAULT_ORG_ID } from '@/utils/org'
-import Select2 from '@/components/Select2'
+import Select2 from '@/components/FormFields/Select2'
 import { getDaysFuture } from '@/utils/common'
 import AssetPermissionFormActionField from '@/views/perms/AssetPermission/components/AssetPermissionFormActionField'
 export default {

src/views/tickets/TicketListTable.vue

@@ -3,7 +3,7 @@
 </template>
 <script type="text/jsx">
 import ListTable from '@/components/ListTable'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 import { toSafeLocalDateStr } from '@/utils/common'
 export default {
   name: 'TicketListTable',

src/views/users/User/UserCreateUpdate.vue

@@ -8,7 +8,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import UserPassword from '@/components/UserPassword'
+import UserPassword from '@/components/FormFields/UserPassword'
 import RoleCheckbox from '@/views/users/User/components/RoleCheckbox'
 import rules from '@/components/DataForm/rules'
 import { mapGetters } from 'vuex'

src/views/users/User/UserDetail/UserAssetPermissionRules.vue

@@ -4,7 +4,7 @@
 
 <script>
 import ListTable from '@/components/ListTable'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 export default {
   name: 'UserAssetPermission',
   components: {

src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanAsset/index.vue

@@ -14,7 +14,7 @@
 import GenericListTable from '@/layout/components/GenericListTable'
 import RelationCard from '@/components/RelationCard/index'
 import AssetRelationCard from '@/components/AssetRelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters'
+import { DeleteActionFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'ChangeAuthPlanAsset',

src/views/xpack/ChangeAuthPlan/ChangeAuthPlanList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'ChangeAuthPlanList',

src/views/xpack/Cloud/Account/AccountList.vue

@@ -5,7 +5,7 @@
 <script type="text/jsx">
 import GenericListTable from '@/layout/components/GenericListTable'
 import { ACCOUNT_PROVIDER_ATTRS_MAP, aliyun, aws_china, aws_international, huaweicloud, qcloud, azure, azure_international, vmware, nutanix } from '../const'
-import { BooleanFormatter, DetailFormatter } from '@/components/ListTable/formatters'
+import { BooleanFormatter, DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {

src/views/xpack/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/AssetList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index'
-import { DateFormatter } from '@/components/ListTable/formatters'
+import { DateFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'AssetList',

src/views/xpack/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/HistoryList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index'
-import { ActionsFormatter, DateFormatter } from '@/components/ListTable/formatters'
+import { ActionsFormatter, DateFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'HistoryList',

src/views/xpack/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import { DetailFormatter } from '@/components/ListTable/formatters'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {

src/views/xpack/Org/OrganizationDetail/OrganizationMembershipList.vue

@@ -16,7 +16,7 @@
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
 import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters'
+import { DeleteActionFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'OrganizationMembershipList',

src/views/xpack/Vault/VaultCreate.vue

@@ -4,8 +4,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import Uploadkey from '@/components/UploadKey'
-import Select2 from '@/components/Select2'
+import { UploadKey, Select2 } from '@/components'
 export default {
   name: 'VaultCreate',
   components: {
@@ -48,7 +47,7 @@ export default {
           helpText: this.$t('common.passwordOrPassphrase')
         },
         private_key: {
-          component: Uploadkey
+          component: UploadKey
         }
       }
     }