数据整合-任务运维-日志下载

src/views/dataIntegration/taskOM/index.vue

@@ -111,6 +111,8 @@ import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {tableList,mockData} from "./mock";
 import { columns,searchFormSchema,schema } from "./taskOM.data"
 import {Description, useDescription} from "@/components/Description";
+import {push} from "echarts/types/src/component/dataZoom/history";
+import {router} from "@/router";
 
 defineOptions({ name: 'AccountManagement' });
 
@@ -242,9 +244,12 @@ const handleExecute = () => {
   console.log('触发了执行按钮')
 };
 /**编辑 按钮*/
-const handleEdit = () => {
+function handleEdit() {
   console.log('触发了编辑按钮')
-};
+  router.push({
+    path:'/dataIntegration/taskOM/recordDetails',
+  })
+}
 
 /**重跑 按钮*/
 const handleRun = () => {

src/views/dataIntegration/taskOM/mock.ts

@@ -67,3 +67,38 @@ export const treeDataListTwo = [
     ],
   },
 ]
+
+export const tableListDetails: any[] = [
+  {
+    businessId: 1,
+    sourceTable:'mysql表',
+    targetTable:'mysql表',
+    describe:'Hello World，I am fine',
+    callStatus:'成功',
+    rows:'2',
+  },
+    {
+      businessId: 2,
+      sourceTable:'test表',
+      targetTable:'test表',
+      describe:'Hello World，I am not good',
+      callStatus:'失败',
+      rows:'2',
+  },
+    {
+      businessId: 3,
+      sourceTable:'mysql表2',
+      targetTable:'mysql表2',
+      describe:'Hello World，I am not good',
+      callStatus:'进行中',
+      rows:'2',
+  },
+    {
+      businessId: 4,
+      sourceTable:'mysql表3',
+      targetTable:'mysql表3',
+      describe:'Hello World，I am not good',
+      callStatus:'进行中',
+      rows:'2',
+  },
+]

src/views/dataIntegration/taskOM/recordDetails.vue

-<script setup lang="ts">
-
-</script>
-
 <template>
+  <page-wrapper>
+  <div class="callerManage_details">
+    <div class="header">
+      <Icon @click="handleGoBack" class="backBtn" icon="ant-design:left-outlined" :size="20"  :color="'#666C81'" />
+      <div class="header_info">
+        <div>TDT1&nbsp;&nbsp;&nbsp;运行详情</div>
+      </div>
+    </div>
+<!--    <step-header title="已使用服务"/>-->
+    <BasicTable @register="registerTable"  :rowSelection="rowSelection">
+      <template #callStatus="{ text, record }">
+        <Icon v-if="text === '成功'" icon="ant-design:check-circle-filled" :size="15" :color="'rgb(84,198,159)'" />
+        <Icon v-else-if="text === '失败'" icon="line-md:close-circle-filled" :size="15" :color="'rgb(212, 115, 113)'" />
+        <Icon v-else icon="line-md:loading-twotone-loop" :size="15" :color="'rgb(81, 160, 248)'" />
+        {{ text }}
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+              :actions="[
+              {
+                icon: 'ant-design:file-sync-outlined',
+                // label: '日志',
+                onClick: handleDownloadLog.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+      <template #toolbar>
+        <div style="flex: 1;display: flex; justify-content: space-between;">
+          <div>
+            <span>加载成功数量：2&nbsp;</span>
+            <span>加载成功数量：0</span>
+            <span>（加载成功数量：0，</span>
+            <span>加载成功数量：0）</span>
+          </div>
+          <div style="display: flex">
+            <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" @click="handleDownloadLogs">批量下载日志</a-button>
+            <div style="margin-left: 10px">
+              <a-input-search
+                  v-model:value="value"
+                  placeholder="请输入关键字"
+                  style="width: 200px"
+                  @search="onSearch"
+              />
+            </div>
+          </div>
+        </div>
 
+
+      </template>
+    </BasicTable>
+  </div>
+  <ViewTheLog @register="registerLog" />
+  </page-wrapper>
 </template>
 
-<style scoped lang="less">
+<script lang="ts" setup>
+import { InputNumber,Input } from 'ant-design-vue';
+import { EditOutlined } from '@ant-design/icons-vue';
+import { useModal } from '@/components/Modal';
+import {router} from "@/router";
+import {detailsColumns, detailSchemas} from "./taskOM.data";
+import Icon from "@/components/Icon/Icon.vue";
+import StepHeader from "@/components/stepHeader.vue";
+import {tableListDetails} from "./mock";
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import {ref} from "vue";
+import ViewTheLog from "@/views/dataIntegration/taskOM/viewTheLog.vue";
+import PageWrapper from "@/components/Page/src/PageWrapper.vue";
+
+const [registerLog,{ openModal:openDownloadLogModal }]= useModal();
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableListDetails.length,
+      code:'',
+      message:'',
+      data: tableListDetails,
+    };
+
+    return { ...response};
+  },
+  columns:detailsColumns,
+  formConfig: {
+    showActionButtonGroup:false,
+    labelWidth: 120,
+    schemas: detailSchemas,
+    autoSubmitOnEnter: true,
+  },
+  showIndexColumn: false,
+  useSearchForm: false,
+  rowSelection:true,
+  showTableSetting: false,
+  bordered: false,
+  actionColumn: {
+    width: 120,
+    title: '查看日志',
+    dataIndex: 'action',
+  },
+});
+
+function handleGoBack() {
+  router.go(-1);
+}
+function handleDownloadLog() {
+//   模态框
+  openDownloadLogModal(true);
+}
+function handleDownloadLogs() {
+  console.log('触发了下载日志按钮');
+}
+
+</script>
+
+<style scoped lang="scss">
+.callerManage_details{
+  background-color: white;
+  padding: 20px;
+  .header{
+    display: flex;
+    align-items: center;
+    padding-bottom: 20px;
+    .backBtn{
+      cursor: pointer;
+    }
+    .header_info{
+      padding-left: 15px;
+
+      div{
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+  }
 
+}
 </style>

src/views/dataIntegration/taskOM/taskOM.data.ts

@@ -80,3 +80,66 @@ export const schema: DescItem[] = [
   },
 
 ];
+export const detailsColumns: BasicColumn[] = [
+  {
+    title: '源表',
+    dataIndex: 'sourceTable',
+    width: 100,
+  },
+  {
+    title: '目标表',
+    dataIndex: 'targetTable',
+    width: 100,
+  },
+  {
+    title: '描述',
+    dataIndex: 'describe',
+    width: 170,
+  },
+  {
+    title: '调用状态',
+    dataIndex: 'callStatus',
+    width: 100,
+    slots: { customRender: 'callStatus' },
+  },
+  {
+    title: '影响行数',
+    dataIndex: 'rows',
+    width: 100,
+  },
+]
+
+export const detailSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+
+export const importFormSchema: any[] = [
+  {
+    field: 'fileMethods',
+    label: '导入文件选择',
+    slot: 'fileMethods',
+    colProps: { lg: 24, md: 24, offset: 3 },
+  },
+  {
+    field: 'fileRename',
+    label: '文件重名',
+    component: 'RadioGroup',
+    required: true,
+    colProps: { lg: 24, md: 24, offset: 3 },
+    componentProps: {
+      options: [
+        { label: '全部放弃', value: '1' },
+        { label: '全部替换', value: '2' },
+        { label: '自动重命名', value: '3' },
+      ],
+    },
+  },
+];

src/views/dataIntegration/taskOM/viewTheLog.vue

+<template>
+  <BasicModal
+    width="50%"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <template #insertFooter>
+      <a-button @click="downloadLog" style="float: left;" type="link" >下载日志</a-button>
+    </template>
+      <img src="@/assets/images/Log.png"/>
+
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {onMounted, ref, unref} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import { importFormSchema } from './taskOM.data';
+
+const emit = defineEmits(['success']);
+const isUpdate = ref(true);
+const isMove = ref(false);
+const rowId = ref('');
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+// const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+//   labelWidth: 100,
+//   baseColProps: { lg: 12, md: 24 },
+//   schemas: importFormSchema,
+//   showActionButtonGroup: false,
+//   actionColOptions: {
+//     span: 23,
+//   },
+// });
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+
+  setModalProps({
+    confirmLoading: false,
+    showOkBtn: false,
+    cancelText: '关闭',
+  });
+});
+
+// onMounted(){}
+
+// const getTitle = computed(() => '新建文件');
+const getTitle = '日志信息';
+
+onMounted(() => {
+  setModalProps({
+    confirmLoading: false,
+    showOkBtn: false,
+    cancelText: '关闭',
+    height: 500,
+  });
+})
+/**确定按钮*/
+async function handleSubmit() {
+  closeModal();
+}
+/**下载日志按钮*/
+async function downloadLog() {
+  // await downloadFile('/api/file/downloadLog', {
+  //   fileName: 'test.txt',
+  // });
+  console.log('出发了下载日志按钮')
+}
+</script>