数据共享交换-使用监控改bug

src/views/dataSharingAndExchange/labelManagement/LabelManagementModal.vue

@@ -20,7 +20,6 @@ import BasicModal from '@/components/Modal/src/BasicModal.vue';
 import {useMessage} from "@/hooks/web/useMessage";
 import {formSchema} from "@/views/dataSharingAndExchange/labelManagement/labelManagement.data";
 
-defineOptions({name: 'LabelManagementModal'});
 const emit = defineEmits(['success', 'register']);
 const {createMessage} = useMessage();
 const isUpdate = ref(false)

src/views/dataSharingAndExchange/labelManagement/index.vue

@@ -30,101 +30,94 @@
       </template>
     </BasicTable>
     <!-- 新增或修改 弹窗 -->
-    <LabelManagementModal @register="registerModal" @success="handleSuccess"/>
+    <LabelManagementModal @register="registerModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-import {reactive, ref} from 'vue';
-import {BasicTable, useTable, TableAction} from '@/components/Table';
-import {PageWrapper} from '@/components/Page';
-import {useMessage} from '@/hooks/web/useMessage';
-import {useModal} from '@/components/Modal';
-import {
-  columns,
-  searchFormSchema
-} from "@/views/dataSharingAndExchange/labelManagement/labelManagement.data";
-import {
-  labelManagementListData
-} from "@/views/dataSharingAndExchange/labelManagement/labelManagementData";
-import LabelManagementModal
-  from "@/views/dataSharingAndExchange/labelManagement/LabelManagementModal.vue"
+  import { reactive, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import {
+    columns,
+    searchFormSchema,
+  } from '@/views/dataSharingAndExchange/labelManagement/labelManagement.data';
+  import { labelManagementListData } from '@/views/dataSharingAndExchange/labelManagement/labelManagementData';
+  import LabelManagementModal from '@/views/dataSharingAndExchange/labelManagement/LabelManagementModal.vue';
 
-defineOptions({name: 'LabelManagement'});
-const {createMessage} = useMessage();
-const [registerModal, {openModal: openLabelManagement}] = useModal();
-const searchInfo = reactive<Recordable>({});
-const tableData = ref([])
-const [registerTable, {
-  reload,
-  updateTableDataRecord,
-  getSearchInfo,
-  getForm,
-  getRowSelection
-}] = useTable({
-  title: '',
-  api: async (params) => {
-    var data = [];
-    const response = {
-      pageNu: "1",
-      pageSize: "10",
-      pages: "1",
-      total: data.length,
-      code: '',
-      message: '',
-      data: [],
-    };
-    return {...response, data: labelManagementListData};
-  },
-  rowKey: 'id',
-  columns,
-  rowSelection: true,
-  formConfig: {
-    labelWidth: 10,
-    schemas: searchFormSchema,
-    autoSubmitOnEnter: false,
-  },
-  useSearchForm: true,
-  showTableSetting: false,
-  showIndexColumn: false,
-  bordered: true,
-  handleSearchInfoFn(info) {
-    return info;
-  },
-  actionColumn: {
-    width: 100,
-    title: '操作',
-    dataIndex: 'action',
-  },
-});
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal: openLabelManagement }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+  const tableData = ref([]);
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    title: '',
+    api: async (params) => {
+      var data = [];
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: data.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      return { ...response, data: labelManagementListData };
+    },
+    rowKey: 'id',
+    columns,
+    rowSelection: true,
+    formConfig: {
+      labelWidth: 10,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: false,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
 
-/** 刷新 按钮 */
-function handleReload() {
-  createMessage.success('刷新成功！')
-  reload();
-}
+  /** 刷新 按钮 */
+  function handleReload() {
+    createMessage.success('刷新成功！');
+    reload();
+  }
 
-/** 删除 按钮 */
-async function handleDelete(record: Recordable) {
-  createMessage.success('删除成功!');
-}
+  /** 删除 按钮 */
+  async function handleDelete(record: Recordable) {
+    createMessage.success('删除成功!');
+  }
 
-/** 新增 按钮 */
-function handleAdd() {
-  openLabelManagement(true, {
-    isUpdate: false,
-  });
-}
+  /** 新增 按钮 */
+  function handleAdd() {
+    openLabelManagement(true, {
+      isUpdate: false,
+    });
+  }
 
-/** 编辑 按钮 */
-function handleEdit(record: Recordable) {
-  openLabelManagement(true, {
-    isUpdate: true,
-    record
-  });
-}
+  /** 编辑 按钮 */
+  function handleEdit(record: Recordable) {
+    openLabelManagement(true, {
+      isUpdate: true,
+      record,
+    });
+  }
 
-/** 成功时返回的方法 */
-function handleSuccess() {
-  reload();
-}
+  /** 成功时返回的方法 */
+  function handleSuccess() {
+    reload();
+  }
 </script>

src/views/dataSharingAndExchange/usageMonitor/index.vue

 <template>
-<!-- 使用监控 -->
-  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+  <PageWrapper
+    icon="icon:aim-outlined"
+    title=""
+    dense
+    contentFullHeight
+    fixedHeight
+    contentClass="flex"
+  >
+    <template #headerContent>
+      <div style="font-size: 20px; font-weight: bold">
+        <Icon style="color: #13b3c5; font-size: 25px" icon="ant-design:aim-outlined" />使用监控
+        <div style="margin: 20px 0">
+          <Alert
+            showIcon
+            type="info"
+            message="此处不展示“API调用-拉取数据”模式监控，请至API监控模块中查看。"
+          />
+        </div>
+        <BasicForm @register="registerForm" />
+      </div>
+    </template>
     <BasicTable @register="registerTable" :searchInfo="searchInfo">
-      <template #toolbar>
-      </template>
       <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'pushStatus'">
+          <template v-if="record.pushStatus === '成功'">
+            <Icon icon="grommet-icons:status-good" color="green" /><span>成功</span>
+          </template>
+          <template v-if="record.pushStatus === '失败'">
+            <Icon icon="carbon:error-outline" color="red" /><span>失败</span>
+          </template>
+        </template>
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
@@ -23,53 +48,67 @@
           />
         </template>
       </template>
+      <template #resourceName="{ text, record }">
+        <InsertRowAboveOutlined style="color: #0960bd" /><a
+          style="margin-left: 10px"
+          @click="goEdit(record)"
+        >
+          {{ text }}</a
+        >
+      </template>
     </BasicTable>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { reactive,ref } from 'vue';
+  import { reactive, ref } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { InsertRowAboveOutlined } from '@ant-design/icons-vue';
+  import { Alert } from 'ant-design-vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
-  import {columns, searchFormSchema} from "@/views/dataSharingAndExchange/usageMonitor/usageMonitor.data";
-  import {usageMonitorListData} from "@/views/dataSharingAndExchange/usageMonitor/usageMonitorData";
+  import {
+    columns,
+    searchFormSchema,
+  } from '@/views/dataSharingAndExchange/usageMonitor/usageMonitor.data';
+  import { usageMonitorListData } from '@/views/dataSharingAndExchange/usageMonitor/usageMonitorData';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { addTabFormSchema } from '@/views/mallResourceDevelopment/label/label/label.data';
+  import { useRouter } from 'vue-router';
 
   defineOptions({ name: 'UsageMonitor' });
   const { createMessage } = useMessage();
+  const { push } = useRouter();
   const [registerModal, { openModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
-  const tableData = ref([])
-  const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
+  const tableData = ref([]);
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
     title: '',
     api: async (params) => {
       var data = [];
       const response = {
-        pageNu: "1",
-        pageSize: "10",
-        pages: "1",
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
         total: data.length,
-        code:'',
-        message:'',
+        code: '',
+        message: '',
         data: [],
       };
-      return { ...response,data: usageMonitorListData };
+      return { ...response, data: usageMonitorListData };
     },
     rowKey: 'id',
     columns,
-    rowSelection: true,
-    formConfig: {
-      labelWidth: 10,
-      schemas: searchFormSchema,
-      autoSubmitOnEnter: false,
-    },
-    useSearchForm: true,
+    rowSelection: false,
+    useSearchForm: false,
     showTableSetting: false,
-    showIndexColumn:false,
+    showIndexColumn: false,
     bordered: true,
-    handleSearchInfoFn(info) {
-      return info;
-    },
     actionColumn: {
       width: 100,
       title: '操作',
@@ -77,21 +116,40 @@
     },
   });
 
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 10,
+      schemas: searchFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 23,
+      },
+    });
+
   /** 刷新 按钮 */
   function handleReload() {
-    createMessage.success('刷新成功！')
+    createMessage.success('刷新成功！');
     reload();
   }
 
   /** 连接 按钮 */
   function handleUsageMonitor(record: Recordable) {
-    createMessage.success('刷新成功！')
+    createMessage.success('刷新成功！');
     reload();
   }
 
+  function goEdit(record) {
+    console.log('record:', record);
+    push({
+      path: '',
+      query: record,
+    });
+  }
+
   /** 终止连接 按钮 */
   function handleStopUsageMonitor(record: Recordable) {
-    createMessage.success('刷新成功！')
+    createMessage.success('刷新成功！');
     reload();
   }
 </script>

src/views/dataSharingAndExchange/usageMonitor/usageMonitor.data.ts

-import {BasicColumn, FormSchema} from "@/components/Table";
-import {uploadApi} from "@/api/sys/upload";
-import {DescItem} from "@/components/Description";
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { uploadApi } from '@/api/sys/upload';
+import { DescItem } from '@/components/Description';
 
 // 搜索栏参数
 export const searchFormSchema: FormSchema[] = [
@@ -10,7 +10,7 @@ export const searchFormSchema: FormSchema[] = [
     componentProps: {
       placeholder: '搜索资源名称或操作人',
     },
-    colProps: {span: 4},
+    colProps: { span: 3 },
   },
   {
     field: 'ownershipBody',
@@ -83,14 +83,15 @@ export const searchFormSchema: FormSchema[] = [
       placeholder: ['开始时间', '结束时间'], // 占位符
       style: { width: '100%' }, // 控制宽度
     },
-    colProps: { span: 6 },
+    colProps: { span: 4 },
   },
 ];
 
 // 表头列表头
-export const columns: BasicColumn[any] = [
+export const columns: BasicColumn[] = [
   {
     title: '资源名称',
+    slots: { customRender: 'resourceName' },
     dataIndex: 'resourceName',
     width: 150,
   },

src/views/dataSharingAndExchange/usageMonitor/usageMonitorData.ts

 // 使用监控 列表数据
 export const usageMonitorListData: any[] = [
   {
-    "id": 0,
-    "resourceName": "医疗服务库",
-    "ownershipBody": "数据平台治理部",
-    "affiliatedOrganization": "研发部门",
-    "operationType": "下载",
-    "pushMode": "手动推送",
-    "pushStatus": "成功",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-24 10:04:04",
-    "updateBy": "admin",
-    "updateDate": "2024-10-24 10:04:04"
+    id: 0,
+    resourceName: '医疗服务库',
+    ownershipBody: '数据平台治理部',
+    affiliatedOrganization: '研发部门',
+    operationType: '下载',
+    pushMode: '手动推送',
+    pushStatus: '成功',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateBy: 'admin',
+    updateDate: '2024-10-24 10:04:04',
   },
   {
-    "id": 1,
-    "resourceName": "医疗服务库",
-    "ownershipBody": "数据平台治理部",
-    "affiliatedOrganization": "研发部门",
-    "operationType": "数据集推送",
-    "pushMode": "手动推送",
-    "pushStatus": "失败",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-24 18:44:16",
-    "updateBy": "admin",
-    "updateDate": "2024-10-24 18:44:16"
+    id: 1,
+    resourceName: '医疗服务库',
+    ownershipBody: '数据平台治理部',
+    affiliatedOrganization: '研发部门',
+    operationType: '数据集推送',
+    pushMode: '手动推送',
+    pushStatus: '失败',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-24 18:44:16',
+    updateBy: 'admin',
+    updateDate: '2024-10-24 18:44:16',
   },
   {
-    "id": 2,
-    "resourceName": "医疗服务库",
-    "ownershipBody": "数据平台治理部",
-    "affiliatedOrganization": "研发部门",
-    "operationType": "API调用-拉取数据",
-    "pushMode": "-",
-    "pushStatus": "成功",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-25 11:05:05",
-    "updateBy": "admin",
-    "updateDate": "2024-10-25 11:05:05"
+    id: 2,
+    resourceName: '医疗服务库',
+    ownershipBody: '数据平台治理部',
+    affiliatedOrganization: '研发部门',
+    operationType: 'API调用-拉取数据',
+    pushMode: '-',
+    pushStatus: '成功',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-25 11:05:05',
+    updateBy: 'admin',
+    updateDate: '2024-10-25 11:05:05',
   },
   {
-    "id": 3,
-    "resourceName": "医疗服务库",
-    "ownershipBody": "数据平台治理部",
-    "affiliatedOrganization": "研发部门",
-    "operationType": "API调用-推送数据",
-    "pushMode": "手动推送",
-    "pushStatus": "成功",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-27 09:27:29",
-    "updateBy": "admin",
-    "updateDate": "2024-10-27 09:27:29"
-  }
+    id: 3,
+    resourceName: '医疗服务库',
+    ownershipBody: '数据平台治理部',
+    affiliatedOrganization: '研发部门',
+    operationType: 'API调用-推送数据',
+    pushMode: '手动推送',
+    pushStatus: '成功',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-27 09:27:29',
+    updateBy: 'admin',
+    updateDate: '2024-10-27 09:27:29',
+  },
 ];