完善任务日志

src/views/manage/task/log/index.vue

@@ -0,0 +1,529 @@
+<script setup lang="tsx">
+import { message, Tag } from 'ant-design-vue';
+import type { Key } from 'ant-design-vue/es/_util/type';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import { useI18n } from "vue-i18n";
+import { SyncOutlined, SearchOutlined, ProfileOutlined, CloseOutlined,ExportOutlined,DeleteOutlined } from '@ant-design/icons-vue';
+import { enableStatusOptions } from '@/constants/business';
+import { saveAs } from 'file-saver';
+
+import Modal from 'ant-design-vue/es/modal/Modal';
+import { useRouter, useRoute } from 'vue-router';
+const router = useRouter();
+const route = useRoute();
+
+
+
+const { t } = useI18n();
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const jobId = route.query && (route.query.jobId as string);
+
+/**对话框对象信息状态 */
+let modalState: any = reactive({
+  openByView: false,
+  openByEdit: false,
+  title: '任务',
+  from: {
+    jobId: undefined,
+    jobName: '',
+    invokeTarget: '',
+    cronExpression: '',
+    misfirePolicy: '3',
+    concurrent: '0',
+    jobGroup: 'DEFAULT',
+    status: '0',
+    saveLog: '0',
+    targetParams: '',
+    remark: '',
+    jobMessage: ''
+  },
+  confirmLoading: false,
+  openByCron: false,
+  statusOpt: [
+    { label: t('common.normal'), value: '0' },
+    { label: t('common.disable'), value: '1' }
+  ],
+  jobGroup: [
+    { label: t('common.default'), value: "DEFAULT" },
+    { label: t('common.system'), value: "SYSTEM" }
+  ],
+  sysJobSaveLog: [
+    { label: t('common.record'), value: "0" },
+    { label: t('common.noRecord'), value: "1" }
+  ]
+});
+
+
+const scrollConfig = computed(() => {
+  return {
+    y: wrapperElHeight.value - 72,
+    x: 1000
+  };
+});
+
+const { columns,  data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: doGetjobLogList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    jobName: '',
+    jobGroup: '',
+    status: ''
+  },
+  rowKey: 'jobLogId',
+  columns: () => [
+    {
+      dataIndex: 'jobLogId',
+      title: t('page.manage.task.taskId'),
+      align: 'center'
+    },
+    {
+      key: 'jobName',
+      dataIndex: 'jobName',
+      title: t('page.manage.task.taskName'),
+      align: 'center'
+    },
+    {
+      key: 'jobGroup',
+      dataIndex: 'jobGroup',
+      title: t('page.manage.task.group'),
+      align: 'center',
+    },
+    {
+      key: 'invokeTarget',
+      dataIndex: 'invokeTarget',
+      title: t('page.manage.task.invoke'),
+      align: 'center'
+    },
+    {
+      key: 'status',
+      dataIndex: 'status',
+      align: 'center',
+      customRender: ({ record }: any) => {
+        if (record.status === null) {
+          return null;
+        }
+        const tagMap: any = {
+          '0': t('common.normal'),
+          '1': t('common.abnormal'),
+        };
+        const tagColor: any = {
+          '0': 'success',
+          '1': 'error'
+        };
+        return <Tag color={tagColor[record.status]}>{tagMap[record.status]}</Tag>;
+      },
+      title: t('page.manage.log.operStatus'),
+    },
+    {
+      key: 'jobMessage',
+      title: t('page.manage.task.jobMessage'),
+      dataIndex: 'jobMessage',
+      align: 'center',
+    },
+    {
+      title: t('page.manage.task.createTime'),
+      dataIndex: 'createTime',
+      align: 'center',
+      width: 150,
+      key: 'createTime',
+    },
+    {
+      key: 'jobLogId',
+      title: t('common.operate'),
+      align: 'center',
+      width: 200,
+    }
+  ]
+});
+
+const {
+  operateType,
+  checkedRowKeys,
+  onDeleted
+  // closeDrawer
+} = useTableOperate(data, { getData, idKey: 'jobLogId' });
+
+
+
+async function handleBatchDelete() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.task.delLogTip', { num: checkedRowKeys.value.join(',') }),
+    async onOk() {
+
+      const { error } = await doDeleteJobLog(checkedRowKeys.value);
+      if (!error) {
+        onDeleted();
+      }
+    }
+  })
+}
+
+
+function handleUserSelectChange(selectedRowKeys: Key[], selectedRows: any[]) {
+  checkedRowKeys.value = selectedRowKeys as number[];
+}
+
+function fnTest() {
+  if (jobId && jobId !== '0') {
+    searchParams.value = Object.assign(searchParams, {
+      status: undefined,
+      pageNum: 1,
+      pageSize: 10,
+    });
+  }else{
+    searchParams.value = Object.assign(searchParams, {
+      jobId: '',
+      jobName: '',
+      jobGroup: undefined,
+      status: undefined,
+      pageNum: 1,
+      pageSize: 10,
+    });
+  }
+  resetSearchParams();
+}
+
+async function fnRecordView(jobLogId: number) {
+  operateType.value = 'view';
+  if (modalState.confirmLoading) return;
+  const hide = message.loading('Waiting...', 0);
+  modalState.confirmLoading = true;
+  doGetjobLogInfo(jobLogId).then(res => {
+    modalState.confirmLoading = false;
+    hide();
+    if (!res.error) {
+      modalState.from = Object.assign(modalState.from, res.data);
+      modalState.openByView = true;
+      modalState.title = t('page.manage.task.viewJob');
+      console.log(modalState.openByView);
+    }
+  });
+}
+
+
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+}
+
+
+
+
+
+
+/**列表清空 */
+function fnCleanList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.task.clearTip'),
+    onOk() {
+      const key = 'cleanJobLog';
+      message.loading({ content: t('common.loading'), key });
+      doCleanJobLog().then(res => {
+        if (!res.error) {
+          message.success({
+            content: t('page.manage.task.clearOk'),
+            key,
+            duration: 2,
+          });
+          getData();
+        }
+      });
+    },
+  });
+}
+
+
+/**列表导出 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('common.exportTip'),
+    onOk() {
+      const key = 'exportJobLog';
+      message.loading({ content: t('common.loading'), key });
+      exportJobLog().then(res => {
+        console.log(res);
+        if (!res.error) {
+          message.success({
+            content: t('common.exportOk'),
+            key,
+            duration: 2,
+          });
+          saveAs(res.data, `job_log_${Date.now()}.xlsx`);
+        }
+      });
+    },
+  });
+}
+
+
+
+/**关闭跳转 */
+function fnClose(this: any) {
+  router.back(); // 返回到上一个页面
+}
+
+onMounted(() => {
+    // 指定任务id数据列表
+    if (jobId && jobId !== '0') {
+      doGetjobInfo(jobId).then(res => {
+      if (!res.error) {
+        console.log(res.data);
+        searchParams.jobId = res.data.jobId;
+        searchParams.jobName = res.data.jobName;
+        searchParams.jobGroup = res.data.jobGroup;
+       getData();
+      }
+    });
+  } else {
+    getData();
+  }
+})
+
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <!-- 搜索框 -->
+      <ACard :title="$t('common.search')" :bordered="false" class="card-wrapper">
+        <AForm :model="searchParams" :label-width="80">
+          <ARow :gutter="[16, 16]" wrap>
+            <ACol :lg="6" :md="12" :xs="24" v-if="jobId !== '0'">
+              <AFormItem label="Name" name="jobName" class="m-0">
+                <AInput v-model:value="searchParams.jobName"    :disabled="jobId !== '0'"/>
+              </AFormItem>
+            </ACol>
+
+            <ACol :lg="6" :md="12" :xs="24">
+              <AFormItem label="Group" name="jobGroup" class="m-0">
+                <AInput v-model:value="searchParams.jobGroup" />
+              </AFormItem>
+            </ACol>
+
+
+            <ACol :lg="6" :md="12" :xs="24">
+              <AFormItem :label="$t('page.manage.user.status')" name="status" class="m-0">
+                <ASelect v-model:value="searchParams.status" :placeholder="$t('page.manage.user.form.status')"
+                  allow-clear>
+                  <ASelectOption v-for="option in enableStatusOptions" :key="option.value" :value="option.value">
+                    {{ $t(option.label) }}
+                  </ASelectOption>
+                </ASelect>
+              </AFormItem>
+            </ACol>
+
+
+            <ACol :lg="6" :md="12" :xs="24">
+              <AFormItem class="m-0">
+                <div class="w-full flex-y-center justify-end gap-8px">
+                  <a-space :size="8">
+                    <a-button @click="fnTest">
+                      <template #icon>
+                        <SyncOutlined />
+                      </template>
+                      {{ $t('common.reset') }}
+                    </a-button>
+                    <AButton type="primary" ghost @click="getData">
+                      <template #icon>
+                        <SearchOutlined />
+                      </template>
+                      {{ $t('common.search') }}
+                    </AButton>
+                  </a-space>
+
+                </div>
+              </AFormItem>
+            </ACol>
+          </ARow>
+        </AForm>
+      </ACard>
+
+      <ACard title="Task Log" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper">
+        <template #extra>
+          <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
+            <slot name="prefix"></slot>
+            <slot name="default">
+
+              <a-button type="default" size="small" @click.prevent="fnClose()">
+                <template #icon>
+                  <CloseOutlined />
+                </template>
+                {{ t('common.close') }}
+              </a-button>
+
+              <APopconfirm :title="$t('common.confirmDelete')" :disabled="checkedRowKeys.length === 0"
+                @confirm="handleBatchDelete">
+                <AButton size="small" danger :disabled="checkedRowKeys.length <= 0">
+                  <div class="flex-y-center gap-8px">
+                    <icon-ic-round-delete class="text-icon" />
+                    <span>{{ $t('common.batchDelete') }}</span>
+                  </div>
+                </AButton>
+              </APopconfirm>
+
+              <APopconfirm :title="$t('common.confirmClean')" :disabled="checkedRowKeys.length === 0"
+                @confirm="handleBatchDelete">
+                <a-button size="small" type="dashed" danger @click.prevent="fnCleanList()">
+                  <template #icon>
+                    <DeleteOutlined />
+                  </template>
+                  {{ t('common.clearText') }}
+                </a-button>
+              </APopconfirm>
+
+              <AButton size="small" @click="getData">
+                <div class="flex-y-center gap-8px">
+                  <icon-mdi-refresh class="text-icon" />
+                  <span>{{ $t('common.refresh') }}</span>
+                </div>
+              </AButton>
+              <AButton size="small" type="primary" @click="fnExportList">
+                <template #icon>
+                  <ExportOutlined />
+                </template>
+                <span>{{ $t('common.export') }}</span>
+              </AButton>
+            </slot>
+
+            <slot name="suffix"></slot>
+          </div>
+        </template>
+
+
+        <ATable ref="wrapperEl" row-key="jobLogId" :columns="columns" :data-source="data" :loading="loading"
+          :row-selection="{
+            selectedRowKeys: checkedRowKeys,
+            onChange: handleUserSelectChange,
+          }" size="small" :pagination="mobilePagination" :scroll="scrollConfig" class="h-full">
+          <template #bodyCell="{ column, record }">
+
+            <template v-if="column.key === 'status'">
+              <a-switch v-model:checked="record.status" disabled checked-value="0" un-checked-value="1" size="small" />
+            </template>
+
+            <template v-if="column.key === 'jobLogId'">
+              <a-space :size="8" align="center">
+                <a-tooltip>
+                  <template #title>{{ t('common.view') }}</template>
+                  <a-button type="link" @click.prevent="fnRecordView(record.jobLogId)">
+                    <template #icon>
+                      <ProfileOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+              </a-space>
+            </template>
+
+          </template>
+        </ATable>
+
+
+
+        <!-- <taskOperateDrawer v-model:visible="drawerVisible" :dept-tree-data="deptTreeData" :operate-type="operateType"
+          :row-data="editingData" @submitted="getData" /> -->
+
+
+        <!-- 详情框 -->
+        <a-modal :width="800" v-model:open="modalState.openByView" :title="modalState.title" @cancel="fnModalCancel">
+          <a-form layout=" horizontal" :label-col="{ span: 6 }" :label-wrap="true">
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="$t('page.manage.task.taskId')" name="jobLogId">
+                  {{ modalState.from.jobLogId }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.task.status')" name="status">
+                  {{
+                    [{
+                      label: t('common.normal'),
+                      value: '0',
+                    }, {
+                      label: t('common.abnormal'),
+                      value: '1',
+                    }].find(s => s.value === modalState.from.status)
+                      ?.label
+                  }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="$t('page.manage.task.taskName')" name="jobName">
+                  {{ modalState.from.jobName }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.task.group')" name="jobGroup">
+                  <!-- <DictTag
+                :options="dict.sysJobGroup"
+                :value="modalState.from.jobGroup"
+              /> -->
+                  {{ modalState.from.jobGroup }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.task.invoke')" name="invokeTarget">
+                  {{ modalState.from.invokeTarget }}
+                </a-form-item>
+              </a-col>
+              <!-- <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.task.log')" name="saveLog">
+                  <DictTag
+                :options="dict.sysJobSaveLog"
+                :value="modalState.from.saveLog"
+              />
+                </a-form-item>
+              </a-col> -->
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.task.createTime')" name="createTime" :label-wrap="true">
+                  {{ modalState.from.createTime }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+
+
+            <a-form-item :label="t('page.manage.task.targetParams')" name="targetParams" :label-col="{ span: 3 }"
+              :label-wrap="true">
+              <a-textarea v-model:value="modalState.from.targetParams" :auto-size="{ minRows: 2, maxRows: 6 }"
+                :disabled="true" />
+            </a-form-item>
+
+            <a-form-item :label="t('page.manage.task.jobMessage')" name="jobMessage" :label-col="{ span: 3 }"
+              :label-wrap="true">
+              <a-textarea v-model:value="modalState.from.jobMessage" :auto-size="{ minRows: 2, maxRows: 6 }"
+                :disabled="true" />
+            </a-form-item>
+          </a-form>
+          <template #footer>
+            <a-button key="cancel" @click="fnModalCancel">
+              {{ t('common.close') }}
+            </a-button>
+          </template>
+        </a-modal>
+      </ACard>
+
+
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<style scoped></style>