feat: task log

.gitignore

@@ -103,4 +103,6 @@ dist
 .tern-port
 
 # vscode private configuration file
-.vscode/redis.json
+.vscode/redis.json
+
+.env.development

src/api/sys/model/taskLogModel.ts

@@ -0,0 +1,17 @@
+import { BaseListResp } from '/@/api/model/baseModel';
+
+/**
+ *  @description: TaskLog info response
+ */
+export interface TaskLogInfo {
+  id?: number;
+  startedAt?: number;
+  finishedAt?: number;
+  result?: number;
+}
+
+/**
+ *  @description: TaskLog list response
+ */
+
+export type TaskLogListResp = BaseListResp<TaskLogInfo>;

src/api/sys/taskLog.ts

@@ -0,0 +1,71 @@
+import { defHttp } from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+import { BaseDataResp, BaseListReq, BaseResp, BaseIDsReq, BaseIDReq } from '/@/api/model/baseModel';
+import { TaskLogInfo, TaskLogListResp } from './model/taskLogModel';
+
+enum Api {
+  CreateTaskLog = '/sys-api/task_log/create',
+  UpdateTaskLog = '/sys-api/task_log/update',
+  GetTaskLogList = '/sys-api/task_log/list',
+  DeleteTaskLog = '/sys-api/task_log/delete',
+  GetTaskLogById = '/sys-api/task_log',
+}
+
+/**
+ * @description: Get task log list
+ */
+
+export const getTaskLogList = (params: BaseListReq, mode: ErrorMessageMode = 'message') => {
+  return defHttp.post<BaseDataResp<TaskLogListResp>>(
+    { url: Api.GetTaskLogList, params },
+    { errorMessageMode: mode },
+  );
+};
+
+/**
+ *  @description: Create a new task log
+ */
+export const createTaskLog = (params: TaskLogInfo, mode: ErrorMessageMode = 'message') => {
+  return defHttp.post<BaseResp>(
+    { url: Api.CreateTaskLog, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};
+
+/**
+ *  @description: Update the task log
+ */
+export const updateTaskLog = (params: TaskLogInfo, mode: ErrorMessageMode = 'message') => {
+  return defHttp.post<BaseResp>(
+    { url: Api.UpdateTaskLog, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};
+
+/**
+ *  @description: Delete task logs
+ */
+export const deleteTaskLog = (params: BaseIDsReq, mode: ErrorMessageMode = 'message') => {
+  return defHttp.post<BaseResp>(
+    { url: Api.DeleteTaskLog, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};
+
+/**
+ *  @description: Get task log By ID
+ */
+export const getTaskLogById = (params: BaseIDReq, mode: ErrorMessageMode = 'message') => {
+  return defHttp.post<BaseDataResp<TaskLogInfo>>(
+    { url: Api.GetTaskLogById, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};

src/locales/lang/en/sys.ts

@@ -314,4 +314,13 @@ export default {
     editTask: 'Edit Task',
     taskList: 'Task List',
   },
+  taskLog: {
+    id: 'Id',
+    startedAt: 'Started Time',
+    finishedAt: 'Finished Time',
+    result: 'Result',
+    addTaskLog: 'Add Task Log',
+    editTaskLog: 'Edit Task Log',
+    taskLogList: 'Task Log List',
+  },
 };

src/locales/lang/zh-CN/sys.ts

@@ -307,4 +307,13 @@ export default {
     editTask: '编辑任务',
     taskList: '任务列表',
   },
+  taskLog: {
+    id: 'Id',
+    startedAt: '开始时间',
+    finishedAt: '完成时间',
+    result: '任务结果',
+    addTaskLog: '添加任务日志',
+    editTaskLog: '编辑任务日志',
+    taskLogList: '任务日志列表',
+  },
 };

src/views/sys/task/LogModal.vue

@@ -0,0 +1,101 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :title="t('sys.taskLog.taskLogList')"
+    @register="registerModal"
+    :wrapperFooterOffset="50"
+    :cancelText="t('common.closeText')"
+    :showOkBtn="false"
+  >
+    <BasicTable @register="registerTable" :searchInfo="searchInfo" class="tableHeight">
+      <template #tableTitle>
+        <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
+          <template #icon><DeleteOutlined /></template>
+          {{ t('common.delete') }}
+        </Button>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import DeleteOutlined from '@ant-design/icons-vue/lib/icons/DeleteOutlined';
+  import ExclamationCircleOutlined from '@ant-design/icons-vue/lib/icons/ExclamationCircleOutlined';
+  import { Modal } from 'ant-design-vue';
+  import { createVNode, defineComponent, reactive, ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { columns, searchFormSchema } from './tasklog.data';
+  import { deleteTaskLog, getTaskLogList } from '/@/api/sys/taskLog';
+  import { Button } from '/@/components/Button';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    components: { BasicModal, BasicTable, DeleteOutlined, Button },
+    setup() {
+      const { t } = useI18n();
+      const selectedIds = ref<number[] | string[]>();
+      const showDeleteButton = ref<boolean>(false);
+      const { notification } = useMessage();
+      const searchInfo = reactive<Recordable>({});
+
+      const [registerTable, { reload }] = useTable({
+        title: t('sys.task.taskList'),
+        api: getTaskLogList,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        clickToRowSelect: false,
+        rowKey: 'id',
+        rowSelection: {
+          type: 'checkbox',
+          onChange: (selectedRowKeys, _selectedRows) => {
+            selectedIds.value = selectedRowKeys as number[];
+            showDeleteButton.value = selectedRowKeys.length > 0;
+          },
+        },
+      });
+
+      const [registerModal] = useModalInner(async (data) => {
+        searchInfo.taskId = data.record.id;
+      });
+
+      async function handleBatchDelete() {
+        Modal.confirm({
+          title: t('common.deleteConfirm'),
+          icon: createVNode(ExclamationCircleOutlined),
+          async onOk() {
+            const result = await deleteTaskLog({ ids: selectedIds.value as number[] }, 'modal');
+            if (result.code === 0) {
+              showDeleteButton.value = false;
+              notification.success({
+                message: t('common.successful'),
+                description: t(result.msg),
+                duration: 3,
+              });
+              await reload();
+            }
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
+      }
+
+      return {
+        t,
+        registerTable,
+        showDeleteButton,
+        handleBatchDelete,
+        registerModal,
+        searchInfo,
+      };
+    },
+  });
+</script>

src/views/sys/task/index.vue

@@ -20,6 +20,10 @@
                 icon: 'clarity:note-edit-line',
                 onClick: handleEdit.bind(null, record),
               },
+              {
+                icon: 'ic:round-library-books',
+                onClick: handleOpenLogModal.bind(null, record),
+              },
               {
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
@@ -35,6 +39,7 @@
       </template>
     </BasicTable>
     <TaskDrawer @register="registerDrawer" @success="handleSuccess" />
+    <LogModal @register="registerModal" :defaultFullscreen="true" />
   </div>
 </template>
 <script lang="ts">
@@ -50,10 +55,12 @@
 
   import { columns, searchFormSchema } from './task.data';
   import { getTaskList, deleteTask } from '/@/api/sys/task';
+  import LogModal from './LogModal.vue';
+  import { useModal } from '/@/components/Modal';
 
   export default defineComponent({
     name: 'TaskManagement',
-    components: { BasicTable, TaskDrawer, TableAction, Button, DeleteOutlined },
+    components: { BasicTable, TaskDrawer, TableAction, Button, DeleteOutlined, LogModal },
     setup() {
       const { t } = useI18n();
       const selectedIds = ref<number[] | string[]>();
@@ -75,7 +82,7 @@
         showIndexColumn: false,
         clickToRowSelect: false,
         actionColumn: {
-          width: 30,
+          width: 60,
           title: t('common.action'),
           dataIndex: 'action',
           fixed: undefined,
@@ -90,6 +97,12 @@
         },
       });
 
+      const [registerModal, { openModal }] = useModal();
+
+      function handleOpenLogModal(record: Recordable) {
+        openModal(true, { record });
+      }
+
       function handleCreate() {
         openDrawer(true, {
           isUpdate: false,
@@ -150,6 +163,8 @@
         t,
         registerTable,
         registerDrawer,
+        registerModal,
+        handleOpenLogModal,
         handleCreate,
         handleEdit,
         handleDelete,

src/views/sys/task/tasklog.data.ts

@@ -0,0 +1,63 @@
+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { formatToDateTime } from '/@/utils/dateUtil';
+
+const { t } = useI18n();
+
+export const columns: BasicColumn[] = [
+  {
+    title: t('sys.taskLog.startedAt'),
+    dataIndex: 'startedAt',
+    width: 50,
+    customRender: ({ record }) => {
+      return formatToDateTime(record.startedAt);
+    },
+  },
+  {
+    title: t('sys.taskLog.finishedAt'),
+    dataIndex: 'finishedAt',
+    width: 50,
+    customRender: ({ record }) => {
+      return formatToDateTime(record.finishedAt);
+    },
+  },
+  {
+    title: t('sys.taskLog.result'),
+    dataIndex: 'result',
+    width: 30,
+    customRender: ({ record }) => {
+      let resultText = '';
+      if (record.result === 1) {
+        resultText = t('common.successful');
+      } else {
+        resultText = t('common.failed');
+      }
+      return h(
+        Tag,
+        {
+          color: record.result === 1 ? 'green' : 'red',
+        },
+        resultText,
+      );
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'result',
+    label: t('sys.taskLog.result'),
+    component: 'Select',
+    colProps: { span: 8 },
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: t('common.all'), value: 0 },
+        { label: t('common.successful'), value: 1 },
+        { label: t('common.failed'), value: 2 },
+      ],
+    },
+  },
+];