pref: 修改 item value

2026-01-15 14:24:39 +00:00 · 2022-11-09 19:01:21 +08:00
parent 5d8a9251e5
commit 8b38d45883
30 changed files with 105 additions and 77 deletions
--- a/src/components/CronTab/components/Crontab-Result.vue
+++ b/src/components/CronTab/components/Crontab-Result.vue
@@ -13,7 +13,7 @@

 <script>
 import parser from 'cron-parser'
-import moment from 'moment'
+import { toSafeLocalDateStr } from '@/utils/common'
 export default {
  name: 'CrontabResult',
  props: {
@@ -46,10 +46,10 @@ export default {
      const rule = 0 + ' ' + this.$options.propsData.ex
      try {
        this.resultList = []
-        var interval = parser.parseExpression(rule)
+        const interval = parser.parseExpression(rule)
        for (let index = 0; index < 5; index++) {
          const cur = interval.next().toString()
-          this.resultList.push(moment(cur).format('YYYY-MM-DD HH:mm:ss'))
+          this.resultList.push(toSafeLocalDateStr(cur))
        }
      } catch (error) {
        this.isShow = false
--- a/src/components/DetailCard/ItemValue.vue
+++ b/src/components/DetailCard/ItemValue.vue
@@ -1,4 +1,5 @@
 <script type="text/jsx">
+import { toSafeLocalDateStr } from '@/utils/common'
 export default {
  name: 'ItemValue',
  props: {
@@ -15,27 +16,60 @@ export default {
      default: null
    }
  },
+  computed: {
+    displayValue() {
+      if ([null, undefined, ''].includes(this.value)) {
+        return '-'
+      }
+      if (typeof this.value === 'boolean') {
+        return this.toChoicesDisplay(this.value)
+      } else if (typeof this.value === 'object') {
+        return this.value
+      } else if (this.value instanceof Array) {
+        return this.value.map(item => {
+          if (typeof item === 'object') {
+            return item.label || item.title
+          } else {
+            return item
+          }
+        }).join(', ')
+      } else if (this.isDatetime(this.value)) {
+        return toSafeLocalDateStr(this.value)
+      } else {
+        return this.value
+      }
+    }
+  },
  methods: {
    toChoicesDisplay(value) {
      if (!value) {
        return this.$t('common.No')
      }
      return this.$t('common.Yes')
+    },
+    isDatetime(value) {
+      if (typeof value !== 'string') {
+        return false
+      }
+      if (value.split(' ').length !== 3) {
+        return false
+      }
+      if (value.split(' ')[1].split(':').length !== 3) {
+        return false
+      }
+      if (isNaN(value) && !isNaN(Date.parse(value))) {
+        return true
+      }
    }
  },
  render(h) {
    if (typeof this.formatter === 'function') {
      return this.formatter(this.item, this.value)
    }
-    if (typeof this.value === 'boolean') {
-      return (
-        <span class='item-value'>{this.toChoicesDisplay(this.value)}</span>
-      )
-    }
    if (this.value instanceof Array) {
      const newArr = this.value || []
      return (
-        <span class='item-value'>
+        <span>
          {
            newArr.map((item, index) => <div key={index}>{item.key}：{item.value} </div>)
          }
@@ -43,15 +77,11 @@ export default {
      )
    }
    return (
-      <span class='item-value'>{this.value}</span>
+      <span>{this.displayValue}</span>
    )
  }
 }
 </script>

 <style scoped>
-.item-value {
-  word-break: break-word;
-}
-
 </style>
--- a/src/components/DetailCard/index.vue
+++ b/src/components/DetailCard/index.vue
@@ -2,7 +2,7 @@
  <IBox :title="title" fa="fa-info-circle">
    <el-form class="content" label-position="left" label-width="25%">
      <el-form-item v-for="item in items" :key="item.key" :label="item.key">
-        <ItemValue :value="item.value" v-bind="item" />
+        <ItemValue class="item-value" :value="item.value" v-bind="item" />
      </el-form-item>
    </el-form>
    <slot />
@@ -60,6 +60,10 @@ export default {
      font-size: 13px;
    }
  }
+
+  .item-value span {
+    word-break: break-word;
+  }
  .content {
    font-size: 13px;
    line-height: 2.5;
--- a/src/filters/datetime.js
+++ b/src/filters/datetime.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import moment from 'moment'
+import { toSafeLocalDateStr } from '@/utils/common'

 Vue.filter('date', function(value) {
-  return moment(value, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
+  return toSafeLocalDateStr(value)
 })

--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -440,7 +440,7 @@
    "dateCreated": "Date created",
    "dateFinished": "Date finished",
    "dateExpired": "Date expired",
-    "dateStart": "Date start",
+    "DateStart": "Date start",
    "deleteErrorMsg": "Delete failed",
    "deleteFailedMsg": "Delete failed",
    "deleteSelected": "Delete selected",
@@ -612,7 +612,7 @@
    "become": "Become",
    "contents": "Contents",
    "date": "Date",
-    "dateStart": "Date start",
+    "DateStart": "Date start",
    "datetime": "Datetime",
    "detail": "Detail",
    "execution": "Execution",
@@ -693,7 +693,7 @@
    "connect": "Connect",
    "databaseApp": "DatabaseApp",
    "KubernetesApp": "KubernetesApp",
-    "dateStart": "Date start",
+    "DateStart": "Date start",
    "downloadFile": "Download file",
    "hostName": "Hostname",
    "isValid": "Validity",
@@ -911,7 +911,7 @@
    "date": "Datetime",
    "dateCreated": "Date created",
    "dateEnd": "Date end",
-    "dateStart": "Date start",
+    "DateStart": "Date start",
    "docType": "Doc type",
    "download": "download",
    "downloadReplay": "Download replay",
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -449,7 +449,7 @@
    "dateCreated": "作成日",
    "dateExpired": "失効日",
    "dateFinished": "完了日",
-    "dateStart": "開始日",
+    "DateStart": "開始日",
    "deleteErrorMsg": "削除に失敗しました",
    "deleteFailedMsg": "削除に失敗しました",
    "deleteSelected": "削除選択した",
@@ -623,7 +623,7 @@
    "become": "になる",
    "contents": "コンテンツ",
    "date": "日付",
-    "dateStart": "開始日",
+    "DateStart": "開始日",
    "datetime": "日付",
    "detail": "詳細",
    "execution": "実行履歴",
@@ -699,7 +699,7 @@
    "connect": "接続",
    "databaseApp": "データベースアプリケーション",
    "KubernetesApp": "Kubernetes",
-    "dateStart": "開始日",
+    "DateStart": "開始日",
    "downloadFile": "ファイルのダウンロード",
    "hostName": "ホスト名",
    "isValid": "有効",
@@ -926,7 +926,7 @@
    "date": "日付",
    "dateCreated": "作成日",
    "dateEnd": "終了日",
-    "dateStart": "開始日",
+    "DateStart": "開始日",
    "docType": "ドキュメントタイプ",
    "download": "ダウンロード",
    "downloadReplay": "ビデオをダウンロードする",
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -469,7 +469,7 @@
    "dateCreated": "创建日期",
    "dateExpired": "失效日期",
    "dateFinished": "完成日期",
-    "dateStart": "开始日期",
+    "DateStart": "开始日期",
    "deleteErrorMsg": "删除失败",
    "deleteFailedMsg": "删除失败",
    "deleteSelected": "删除所选",
@@ -643,7 +643,7 @@
    "become": "Become",
    "contents": "内容",
    "date": "日期",
-    "dateStart": "开始日期",
+    "DateStart": "开始日期",
    "datetime": "日期",
    "detail": "详情",
    "execution": "执行历史",
@@ -720,7 +720,7 @@
    "connect": "连接",
    "databaseApp": "数据库应用",
    "KubernetesApp": "Kubernetes",
-    "dateStart": "开始日期",
+    "DateStart": "开始日期",
    "downloadFile": "下载文件",
    "hostName": "主机名",
    "isValid": "有效",
@@ -968,7 +968,7 @@
    "date": "日期",
    "dateCreated": "创建日期",
    "dateEnd": "结束日期",
-    "dateStart": "开始日期",
+    "DateStart": "开始日期",
    "docType": "文档类型",
    "download": "下载",
    "downloadReplay": "下载录像",
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -76,21 +76,20 @@ function cleanDateStr(d) {
 }

 export function toSafeLocalDateStr(d) {
-  if (d === '' || d === null) {
-    return ''
+  if ([null, undefined, ''].includes(d)) {
+    return '-'
  }
  const date = safeDate(d)
-  // const date_s = date.toLocaleString(getUserLang(), { hourCycle: 'h23' })
-  const date_s =
-    date.toLocaleDateString(getUserLang(), { hourCycle: 'h23' }) +
-    ' ' +
-    date.toLocaleTimeString(getUserLang(), { hourCycle: 'h23' })
-  return date_s
+  return moment(date).format('L LTS')
 }

 export function forMatAction(vm, d) {
  d.forEach(function(item, index, arr) {
-    if ([vm.$t('perms.clipboardCopyPaste'), vm.$t('perms.upDownload'), vm.$t('perms.all')].includes(item)) {
+    if ([
+      vm.$t('perms.clipboardCopyPaste'),
+      vm.$t('perms.upDownload'),
+      vm.$t('perms.all')
+    ].includes(item)) {
      arr.splice(index, 1)
    }
  })
--- a/src/views/applications/DatabaseApp/DatabaseAppDetail/DatabaseAppDetail.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppDetail/DatabaseAppDetail.vue
@@ -48,7 +48,7 @@ export default {
          value: this.object.attrs.database
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(this.object.date_created)
        },
        {
--- a/src/views/applications/KubernetesApp/KubernetesAppDetail/KubernetesAppDetail.vue
+++ b/src/views/applications/KubernetesApp/KubernetesAppDetail/KubernetesAppDetail.vue
@@ -39,7 +39,7 @@ export default {
          value: this.object.attrs.cluster
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(this.object.date_created)
        },
        {
--- a/src/views/applications/RemoteApp/RemoteAppDetail/RemoteAppDetail.vue
+++ b/src/views/applications/RemoteApp/RemoteAppDetail/RemoteAppDetail.vue
@@ -44,7 +44,7 @@ export default {
          value: this.object.attrs.path
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(this.object.date_created)
        },
        {
--- a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
+++ b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
@@ -44,7 +44,7 @@ export default {
          value: this.object.comment
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(this.object.date_created)
        },
        {
--- a/src/views/myassets/index.vue
+++ b/src/views/myassets/index.vue
@@ -39,9 +39,9 @@ export default {
      tableConfig: {
        url: '/api/v1/perms/users/assets/',
        hasTree: true,
-        columns: ['name', 'address', 'platform', 'category', 'type', 'comment', 'actions'],
+        columns: ['name', 'address', 'platform', 'category', 'accounts', 'type', 'comment', 'actions'],
        columnsShow: {
-          default: ['name', 'address', 'platform', 'actions'],
+          default: ['name', 'address', 'platform', 'accounts', 'actions'],
          min: ['name', 'address', 'actions']
        },
        columnsMeta: {
--- a/src/views/myhome/components/User.vue
+++ b/src/views/myhome/components/User.vue
@@ -14,7 +14,7 @@
            <li><span class="title">{{ $t('users.Email') }}</span>：<span>{{ users.email }}</span></li>
            <li>
              <span class="title">{{ $t('audits.LoginDate') }}</span>：
-              <span>{{ $moment(users.last_login, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') }}</span>
+              <span>{{ users.last_login | date }}</span>
            </li>
          </ul>
        </el-col>
--- a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
@@ -96,7 +96,7 @@ export default {
          helpText: this.$t('common.actionsTips')
        },
        date_start: {
-          label: this.$t('common.dateStart')
+          label: this.$t('common.DateStart')
        },
        date_expired: {
          label: this.$t('common.dateExpired')
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
@@ -12,7 +12,6 @@
 <script>
 import DetailCard from '@/components/DetailCard'
 import QuickActions from '@/components/QuickActions'
-import { toSafeLocalDateStr } from '@/utils/common'
 import { ACTIONS_FIELDS_MAP } from './const'

 export default {
@@ -62,23 +61,19 @@ export default {
        },
        {
          key: this.$t('perms.userCount'),
-          value: this.object.users_amount
+          value: this.object.users.length
        },
        {
          key: this.$t('perms.userGroupCount'),
-          value: this.object.user_groups_amount
+          value: this.object.user_groups.length
        },
        {
          key: this.$t('perms.assetCount'),
-          value: this.object.assets_amount
+          value: this.object.assets.length
        },
        {
          key: this.$t('perms.nodeCount'),
-          value: this.object.nodes_amount
-        },
-        {
-          key: this.$t('perms.systemUserCount'),
-          value: this.object.system_users_amount
+          value: this.object.nodes.length
        },
        {
          key: this.$t('perms.Actions'),
@@ -89,16 +84,16 @@ export default {
          }
        },
        {
-          key: this.$t('perms.dateStart'),
-          value: toSafeLocalDateStr(this.object.date_start)
+          key: this.$t('common.DateStart'),
+          value: this.object.date_start
        },
        {
          key: this.$t('common.dateExpired'),
-          value: toSafeLocalDateStr(this.object.date_expired)
+          value: this.object.date_expired
        },
        {
-          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(this.object.date_created)
+          key: this.$t('common.DateCreated'),
+          value: this.object.date_created
        },
        {
          key: this.$t('common.createdBy'),
--- a/src/views/perms/AssetPermission/fields.js
+++ b/src/views/perms/AssetPermission/fields.js
@@ -75,7 +75,7 @@ function getFields() {
  }

  const date_start = {
-    label: this.$t('common.dateStart'),
+    label: this.$t('common.DateStart'),
    hidden: () => false
  }

--- a/src/views/profile/ApiKey.vue
+++ b/src/views/profile/ApiKey.vue
@@ -34,7 +34,7 @@ export default {
            formatter: ShowKeyCopyFormatter
          },
          date_created: {
-            label: this.$t('common.dateCreated'),
+            label: this.$t('common.DateCreated'),
            showOverflowTooltip: true,
            formatter: DateFormatter
          },
--- a/src/views/sessions/SessionDetail/SessionDetailInfo.vue
+++ b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
@@ -132,7 +132,7 @@ export default {
          value: this.session.remote_addr
        },
        {
-          key: this.$t('sessions.dateStart'),
+          key: this.$t('common.DateStart'),
          value: toSafeLocalDateStr(this.session.date_start)
        },
        {
--- a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
+++ b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
@@ -69,7 +69,7 @@ export default {
          value: this.object.resource_statistics.app_perms_amount
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(this.object.date_created)
        },
        {
--- a/src/views/settings/Terminal/Component/TerminalDetail.vue
+++ b/src/views/settings/Terminal/Component/TerminalDetail.vue
@@ -65,7 +65,7 @@ export default {
        //   value: this.terminalData.http_port
        // },
        {
-          key: this.$t('sessions.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: this.terminalData.date_created
        },
        {
--- a/src/views/tasks/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue
+++ b/src/views/tasks/TaskDetail/HistoryExecutionDetail/HistoryExecutionDetail.vue
@@ -58,7 +58,7 @@ export default {
          value: this.object.adhoc_short_id
        },
        {
-          key: this.$t('ops.dateStart'),
+          key: this.$t('common.DateStart'),
          value: toSafeLocalDateStr(this.object.date_start)
        },
        {
--- a/src/views/tickets/CommandConfirm/Detail/TicketDetail.vue
+++ b/src/views/tickets/CommandConfirm/Detail/TicketDetail.vue
@@ -48,7 +48,7 @@ export default {
          }
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(object.date_created)
        }
      ]
--- a/src/views/tickets/LoginAssetConfirm/Detail/TicketDetail.vue
+++ b/src/views/tickets/LoginAssetConfirm/Detail/TicketDetail.vue
@@ -48,7 +48,7 @@ export default {
          }
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(object.date_created)
        }
      ]
--- a/src/views/tickets/LoginConfirm/Detail/TicketDetail.vue
+++ b/src/views/tickets/LoginConfirm/Detail/TicketDetail.vue
@@ -48,7 +48,7 @@ export default {
          }
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(object.date_created)
        }
      ]
--- a/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue
+++ b/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue
@@ -23,7 +23,7 @@
          <el-form-item :label="$t('tickets.SystemUser')" :rules="isRequired">
            <Select2 v-model="requestForm.accounts" style="width: 50% !important" />
          </el-form-item>
-          <el-form-item :label="$t('common.dateStart')" required>
+          <el-form-item :label="$t('common.DateStart')" required>
            <el-date-picker
              v-model="requestForm.apply_date_start"
              type="datetime"
@@ -134,7 +134,7 @@ export default {
          value: object.org_name
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(object.date_created)
        },
        {
@@ -164,7 +164,7 @@ export default {
          value: forMatAction(this, object.apply_actions_display)
        },
        {
-          key: this.$t('common.dateStart'),
+          key: this.$t('common.DateStart'),
          value: toSafeLocalDateStr(object.apply_date_start)
        },
        {
@@ -207,7 +207,7 @@ export default {
          value: forMatAction(this, object.apply_actions_display)
        },
        {
-          key: this.$t('common.dateStart'),
+          key: this.$t('common.DateStart'),
          value: toSafeLocalDateStr(object.apply_date_start)
        },
        {
--- a/src/views/tickets/TicketDetail/TicketDetail.vue
+++ b/src/views/tickets/TicketDetail/TicketDetail.vue
@@ -56,7 +56,7 @@ export default {
          value: object.process_map[object.approval_step - 1].processor_display
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(object.date_created)
        }
      ]
--- a/src/views/tickets/TicketFlow/Detail/TicketDetail.vue
+++ b/src/views/tickets/TicketFlow/Detail/TicketDetail.vue
@@ -40,7 +40,7 @@ export default {
          value: this.object.created_by
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(this.object.date_created)
        },
        {
--- a/src/views/tickets/components/Steps.vue
+++ b/src/views/tickets/components/Steps.vue
@@ -8,7 +8,7 @@
        >
          <div slot="description">
            <div>{{ `${this.$t('tickets.Applicant')}：${object.rel_snapshot.applicant}` }}</div>
-            <div>{{ `${this.$t('common.dateCreated')}:  ${toSafeLocalDateStr(object.date_created)}` }}</div>
+            <div>{{ `${this.$t('common.DateCreated')}:  ${toSafeLocalDateStr(object.date_created)}` }}</div>
          </div>
        </el-step>
        <el-step
--- a/src/views/users/Group/UserGroupDetail/GroupInfo.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
@@ -70,7 +70,7 @@ export default {
          value: this.object.created_by
        },
        {
-          key: this.$t('common.dateCreated'),
+          key: this.$t('common.DateCreated'),
          value: toSafeLocalDateStr(this.object.date_created)
        },
        {