feat(date): format datetime

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[]>([]);
 

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;

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',
+        field: 'dateRange',
-        component: 'DatePicker',
+        component: 'RangePicker',
         label: L('StartTime'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endTime',
-        component: 'DatePicker',
-        label: L('EndTime'),
-        colProps: { span: 6 },
         componentProps: {
           style: {
-            width: '100%',
+            width: '100%'
           },
         },
       },

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

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 text ? formatToDate(text) : '';
-          return formatToDateTime(text);
-        }
-        return '';
       },
     },
   ];

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 text ? formatToDate(text) : '';
-          return formatToDateTime(text);
-        }
-        return '';
       },
     },
   ];

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',
+        field: 'dateRange',
-        component: 'DatePicker',
+        component: 'RangePicker',
         label: L('StartTime'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endTime',
-        component: 'DatePicker',
-        label: L('EndTime'),
-        colProps: { span: 6 },
         componentProps: {
           style: {
             width: '100%',

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();

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.lockoutEnd) {
-      if (record.lockoutEnabled === true) {
         const lockTime = new Date(record.lockoutEnd);
         if (lockTime) {
           // 锁定时间高于当前时间不显示
@@ -68,6 +67,6 @@ export function useUserTable() {
     registerTable,
     reloadTable,
     handleDelete,
-    lockEnable,
+    lockEnd,
   };
 }

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',
+        field: 'startTime',
-        component: 'DatePicker',
+        component: 'RangePicker',
         label: L('DisplayName:BeginTime'),
-        colProps: { span: 6 },
+        colProps: { span: 12 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endTime',
-        component: 'DatePicker',
-        label: L('DisplayName:EndTime'),
-        colProps: { span: 6 },
         componentProps: {
           style: {
             width: '100%',
@@ -108,21 +102,10 @@ export function getSearchFormSchemas(): Partial<FormProps> {
         },
       },
       {
-        field: 'beginLastRunTime',
+        field: 'lastRunTime',
-        component: 'DatePicker',
+        component: 'RangePicker',
         label: L('DisplayName:BeginLastRunTime'),
-        colProps: { span: 9 },
+        colProps: { span: 18 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endLastRunTime',
-        component: 'DatePicker',
-        label: L('DisplayName:EndLastRunTime'),
-        colProps: { span: 9 },
         componentProps: {
           style: {
             width: '100%',
@@ -137,21 +120,10 @@ export function getSearchFormSchemas(): Partial<FormProps> {
         renderComponentContent: L('DisplayName:IsAbandoned'),
       },
       {
-        field: 'beginCreationTime',
+        field: 'creationTime',
-        component: 'DatePicker',
+        component: 'RangePicker',
         label: L('DisplayName:BeginCreationTime'),
-        colProps: { span: 9 },
+        colProps: { span: 18 },
-        componentProps: {
-          style: {
-            width: '100%',
-          },
-        },
-      },
-      {
-        field: 'endCreationTime',
-        component: 'DatePicker',
-        label: L('DisplayName:EndCreationTime'),
-        colProps: { span: 9 },
         componentProps: {
           style: {
             width: '100%',