feat(date): format datetime

3 years ago · a34b2c4cc2
10 changed files with 54 additions and 93 deletions
--- a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
+++ b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
@ -41,7 +41,13 @@
            <Input v-if="record.javaScriptType==='string'" v-model:value="record.value" />
            <InputNumber v-else-if="record.javaScriptType==='number'" style="width: 100%;" v-model:value="record.value" />
            <Switch v-else-if="record.javaScriptType==='boolean'" v-model:checked="record.value" />
-            <DatePicker v-else-if="record.javaScriptType==='Date'" style="width: 100%;" v-model:value="record.value" />
+            <DatePicker
+              v-else-if="record.javaScriptType==='Date'"
+              style="width: 100%;"
+              v-model:value="record.value"
+              format="YYYY-MM-DD 00:00:00"
+              value-format="YYYY-MM-DDT00:00:00"
+            />
            <CodeEditorX
              v-else-if="['array', 'object'].includes(record.javaScriptType)"
              style="width: 100%; height: 300px"
@ -72,6 +78,7 @@
 </template>

 <script lang="ts" setup>
+  import type { ColumnsType } from 'ant-design-vue/lib/table/interface';
  import { computed, ref, reactive, unref, onMounted } from 'vue';
  import { DeleteTwoTone } from '@ant-design/icons-vue';
  import {
@ -118,7 +125,7 @@
    paramters: [],
  });

-  const columns = [
+  const columns = reactive<ColumnsType>([
    {
      dataIndex: 'field',
      key: 'field',
@ -145,7 +152,7 @@
      dataIndex: 'actions',
      align: 'center',
    },
-  ];
+  ]);

  const defineParamsRef = ref<DefineParamter[]>([]);

--- a/apps/vue/src/views/account/security-logs/index.vue
+++ b/apps/vue/src/views/account/security-logs/index.vue
@ -34,7 +34,7 @@
                  <span>{{ securityLog.browserInfo }}</span>
                </FormItem>
                <FormItem labelAlign="left" :label="L('CreationTime')">
-                  <span>{{ securityLog.creationTime }}</span>
+                  <span>{{ formatToDateTime(securityLog.creationTime) }}</span>
                </FormItem>
              </Form>
            </CardGrid>
@ -66,6 +66,7 @@
  import { getList } from '/@/api/identity/securityLog';
  import { SecurityLog } from '/@/api/identity/model/securityLogModel';
  import { formatPagedRequest } from '/@/utils/http/abp/helper';
+  import { formatToDateTime } from '/@/utils/dateUtil';

  const CardGrid = Card.Grid;
  const FormItem = Form.Item;
--- a/apps/vue/src/views/auditing/components/ModalData.ts
+++ b/apps/vue/src/views/auditing/components/ModalData.ts
@ -52,6 +52,9 @@ const httpStatusCodeOptions = [
 export function getSearchFormSchemas(): Partial<FormProps> {
  return {
    labelWidth: 100,
+    fieldMapToTime: [
+      ['dateRange', ['startTime', 'endTime'], ['YYYY-MM-DDT00:00:00', 'YYYY-MM-DDT00:00:00']],
+    ],
    schemas: [
      {
        field: 'applicationName',
@ -117,24 +120,13 @@ export function getSearchFormSchemas(): Partial<FormProps> {
        colProps: { span: 6 },
      },
      {
-        field: 'startTime',
-        component: 'DatePicker',
+        field: 'dateRange',
+        component: 'RangePicker',
        label: L('StartTime'),
-        colProps: { span: 6 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endTime',
-        component: 'DatePicker',
-        label: L('EndTime'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
        componentProps: {
          style: {
-            width: '100%',
+            width: '100%'
          },
        },
      },
--- a/apps/vue/src/views/identity-server/api-resources/datas/ModalData.ts
+++ b/apps/vue/src/views/identity-server/api-resources/datas/ModalData.ts
@ -64,6 +64,8 @@ export function getSecretFormSchemas(): FormSchema[] {
      label: L('Expiration'),
      colProps: { span: 24 },
      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DDT00:00:00',
        style: {
          width: '100%',
        },
--- a/apps/vue/src/views/identity-server/api-resources/datas/TableData.ts
+++ b/apps/vue/src/views/identity-server/api-resources/datas/TableData.ts
@ -1,6 +1,6 @@
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { BasicColumn } from '/@/components/Table';
-import { formatToDateTime } from '/@/utils/dateUtil';
+import { formatToDate } from '/@/utils/dateUtil';

 const { L } = useLocalization('AbpIdentityServer');

@ -87,10 +87,7 @@ export function getSecretColumns(): BasicColumn[] {
      width: 180,
      sorter: true,
      format: (text) => {
-        if (text) {
-          return formatToDateTime(text);
-        }
-        return '';
+        return text ? formatToDate(text) : '';
      },
    },
  ];
--- a/apps/vue/src/views/identity-server/clients/components/ClientSecret.vue
+++ b/apps/vue/src/views/identity-server/clients/components/ClientSecret.vue
@ -22,7 +22,7 @@
  import { useLocalization } from '/@/hooks/abp/useLocalization';
  import { FormSchema } from '/@/components/Form';
  import { BasicColumn } from '/@/components/Table';
-  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { formatToDate } from '/@/utils/dateUtil';
  import { Client } from '/@/api/identity-server/model/clientsModel';
  import { useSecret } from '../hooks/useSecret';
  import DynamicForm from './DynamicForm.vue';
@ -73,6 +73,8 @@
      label: L('Expiration'),
      colProps: { span: 24 },
      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DDT00:00:00',
        style: {
          width: '100%',
        },
@ -108,10 +110,7 @@
      width: '100',
      sorter: true,
      format: (text) => {
-        if (text) {
-          return formatToDateTime(text);
-        }
-        return '';
+        return text ? formatToDate(text) : '';
      },
    },
  ];
--- a/apps/vue/src/views/identity/security-logs/components/ModalData.ts
+++ b/apps/vue/src/views/identity/security-logs/components/ModalData.ts
@ -6,6 +6,9 @@ const { L } = useLocalization('AbpAuditLogging');
 export function getSearchFormSchemas(): Partial<FormProps> {
  return {
    labelWidth: 100,
+    fieldMapToTime: [
+      ['dateRange', ['startTime', 'endTime'], ['YYYY-MM-DDT00:00:00', 'YYYY-MM-DDT00:00:00']],
+    ],
    schemas: [
      {
        field: 'applicationName',
@ -44,21 +47,10 @@ export function getSearchFormSchemas(): Partial<FormProps> {
        colProps: { span: 6 },
      },
      {
-        field: 'startTime',
-        component: 'DatePicker',
+        field: 'dateRange',
+        component: 'RangePicker',
        label: L('StartTime'),
-        colProps: { span: 6 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endTime',
-        component: 'DatePicker',
-        label: L('EndTime'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
        componentProps: {
          style: {
            width: '100%',
--- a/apps/vue/src/views/identity/user/components/UserTable.vue
+++ b/apps/vue/src/views/identity/user/components/UserTable.vue
@ -12,7 +12,7 @@
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'userName'">
          <span>{{ record.userName }}</span>
-          <Tag v-if="lockEnable(record)" style="margin-left: 5px" color="orange">{{ L('Lockout') }}</Tag>
+          <Tag v-if="lockEnd(record)" style="margin-left: 5px" color="orange">{{ L('Lockout') }}</Tag>
          <Tag v-if="!record.isActive" style="margin-left: 5px" color="red">{{ L('UnActived') }}</Tag>
        </template>
        <template v-if="column.key === 'phoneNumber'">
@ -50,13 +50,13 @@
              {
                auth: 'AbpIdentity.Users.Update',
                label: L('Lockout'),
-                ifShow: lockEnable(record),
+                ifShow: !lockEnd(record),
                onClick: showLockModal.bind(null, record.id),
              },
              {
                auth: 'AbpIdentity.Users.Update',
                label: L('UnLock'),
-                ifShow: record.lockoutEnabled && !lockEnable(record),
+                ifShow: lockEnd(record),
                onClick: handleUnlock.bind(null, record),
              },
              {
@ -133,7 +133,7 @@
  const nullFormElRef = ref(null);
  const { hasPermission } = usePermission();
  const [registerModal, { openModal }] = useModal();
-  const { lockEnable, registerTable, reloadTable, handleDelete } = useUserTable();
+  const { lockEnd, registerTable, reloadTable, handleDelete } = useUserTable();
  const { registerLockModal, showLockModal, handleUnLock } = useLock({ emit: emits });
  const { registerPasswordModal, showPasswordModal } = usePassword(nullFormElRef);
  const [registerClaimModal, { openModal: openClaimModal }] = useModal();
--- a/apps/vue/src/views/identity/user/hooks/useUserTable.ts
+++ b/apps/vue/src/views/identity/user/hooks/useUserTable.ts
@ -33,10 +33,9 @@ export function useUserTable() {
    },
  });

-  const lockEnable = computed(() => {
+  const lockEnd = computed(() => {
    return (record) => {
-      // 未启用锁定不显示
-      if (record.lockoutEnabled === true) {
+      if (record.lockoutEnd) {
        const lockTime = new Date(record.lockoutEnd);
        if (lockTime) {
          // 锁定时间高于当前时间不显示
@ -68,6 +67,6 @@ export function useUserTable() {
    registerTable,
    reloadTable,
    handleDelete,
-    lockEnable,
+    lockEnd,
  };
 }
--- a/apps/vue/src/views/task-management/background-jobs/datas/ModalData.ts
+++ b/apps/vue/src/views/task-management/background-jobs/datas/ModalData.ts
@ -8,6 +8,11 @@ const { L } = useLocalization(['TaskManagement', 'AbpUi']);
 export function getSearchFormSchemas(): Partial<FormProps> {
  return {
    labelWidth: 100,
+    fieldMapToTime: [
+      ['startTime', ['beginTime', 'endTime'], ['YYYY-MM-DDT00:00:00', 'YYYY-MM-DDT00:00:00']],
+      ['lastRunTime', ['beginLastRunTime', 'endLastRunTime'], ['YYYY-MM-DDT00:00:00', 'YYYY-MM-DDT00:00:00']],
+      ['creationTime', ['beginCreationTime', 'endCreationTime'], ['YYYY-MM-DDT00:00:00', 'YYYY-MM-DDT00:00:00']],
+    ],
    schemas: [
      {
        field: 'group',
@ -71,21 +76,10 @@ export function getSearchFormSchemas(): Partial<FormProps> {
        },
      },
      {
-        field: 'beginTime',
-        component: 'DatePicker',
+        field: 'startTime',
+        component: 'RangePicker',
        label: L('DisplayName:BeginTime'),
-        colProps: { span: 6 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endTime',
-        component: 'DatePicker',
-        label: L('DisplayName:EndTime'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
        componentProps: {
          style: {
            width: '100%',
@ -108,21 +102,10 @@ export function getSearchFormSchemas(): Partial<FormProps> {
        },
      },
      {
-        field: 'beginLastRunTime',
-        component: 'DatePicker',
+        field: 'lastRunTime',
+        component: 'RangePicker',
        label: L('DisplayName:BeginLastRunTime'),
-        colProps: { span: 9 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endLastRunTime',
-        component: 'DatePicker',
-        label: L('DisplayName:EndLastRunTime'),
-        colProps: { span: 9 },
+        colProps: { span: 18 },
        componentProps: {
          style: {
            width: '100%',
@ -137,21 +120,10 @@ export function getSearchFormSchemas(): Partial<FormProps> {
        renderComponentContent: L('DisplayName:IsAbandoned'),
      },
      {
-        field: 'beginCreationTime',
-        component: 'DatePicker',
+        field: 'creationTime',
+        component: 'RangePicker',
        label: L('DisplayName:BeginCreationTime'),
-        colProps: { span: 9 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endCreationTime',
-        component: 'DatePicker',
-        label: L('DisplayName:EndCreationTime'),
-        colProps: { span: 9 },
+        colProps: { span: 18 },
        componentProps: {
          style: {
            width: '100%',