From a34b2c4cc2d227c8c304b21b92d6c5f6033a293a Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Tue, 7 Mar 2023 10:45:12 +0800
Subject: [PATCH] feat(date): format datetime

---
 .../Table/src/components/AdvancedSearch.vue   | 13 ++++-
 .../src/views/account/security-logs/index.vue |  3 +-
 .../views/auditing/components/ModalData.ts    | 22 +++-----
 .../api-resources/datas/ModalData.ts          |  2 +
 .../api-resources/datas/TableData.ts          |  7 +--
 .../clients/components/ClientSecret.vue       |  9 ++-
 .../security-logs/components/ModalData.ts     | 20 ++-----
 .../identity/user/components/UserTable.vue    |  8 +--
 .../views/identity/user/hooks/useUserTable.ts |  7 +--
 .../background-jobs/datas/ModalData.ts        | 56 +++++--------------
 10 files changed, 54 insertions(+), 93 deletions(-)

diff --git a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
index 80241bfee..bd1be9bdc 100644
--- 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[]>([]);
 
diff --git a/apps/vue/src/views/account/security-logs/index.vue b/apps/vue/src/views/account/security-logs/index.vue
index 813f43ea9..5cd9064a0 100644
--- 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;
diff --git a/apps/vue/src/views/auditing/components/ModalData.ts b/apps/vue/src/views/auditing/components/ModalData.ts
index 684ae7400..b42187f8f 100644
--- 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%'
           },
         },
       },
diff --git a/apps/vue/src/views/identity-server/api-resources/datas/ModalData.ts b/apps/vue/src/views/identity-server/api-resources/datas/ModalData.ts
index bd05b1043..2437a38d6 100644
--- 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%',
         },
diff --git a/apps/vue/src/views/identity-server/api-resources/datas/TableData.ts b/apps/vue/src/views/identity-server/api-resources/datas/TableData.ts
index 701904506..436bbd508 100644
--- 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) : '';
       },
     },
   ];
diff --git a/apps/vue/src/views/identity-server/clients/components/ClientSecret.vue b/apps/vue/src/views/identity-server/clients/components/ClientSecret.vue
index 062fc5ca7..1ac3c7047 100644
--- 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) : '';
       },
     },
   ];
diff --git a/apps/vue/src/views/identity/security-logs/components/ModalData.ts b/apps/vue/src/views/identity/security-logs/components/ModalData.ts
index 621695bf8..43f49f533 100644
--- 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%',
diff --git a/apps/vue/src/views/identity/user/components/UserTable.vue b/apps/vue/src/views/identity/user/components/UserTable.vue
index 6e407b43f..2125e2794 100644
--- 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();
diff --git a/apps/vue/src/views/identity/user/hooks/useUserTable.ts b/apps/vue/src/views/identity/user/hooks/useUserTable.ts
index 40defa872..560c1e545 100644
--- 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,
   };
 }
diff --git a/apps/vue/src/views/task-management/background-jobs/datas/ModalData.ts b/apps/vue/src/views/task-management/background-jobs/datas/ModalData.ts
index 72b7d63ec..fd4f78f0d 100644
--- 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%',