使用监控、标签管理 页面初版代码提交

src/views/dataSharingAndExchange/labelManagement/LabelManagementModal.vue

+<template>
+  <!-- 标签管理新增或修改 弹窗 -->
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    showFooter
+    :title="getTitle"
+    width="35%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {computed, ref, unref} from 'vue';
+import {BasicForm, useForm} from '@/components/Form';
+import {useModalInner} from '@/components/Modal';
+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)
+
+// 初始化弹窗
+const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+  resetFields();
+  setModalProps({loading: false, confirmLoading: false});
+  isUpdate.value = !!data?.isUpdate;
+  setFieldsValue({
+    ...data.record
+  });
+});
+
+const [registerForm, {resetFields, setFieldsValue, validate, setProps}] = useForm({
+  labelWidth: 90,
+  baseColProps: {span: 24},
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
+
+const getTitle = computed(() => (!unref(isUpdate) ? '新增业务标签' : '编辑业务标签'));
+
+/** 确认按钮 */
+async function handleSubmit() {
+  const values = await validate();
+  if (unref(isUpdate)) {
+    createMessage.success('修改成功');
+    closeModal()
+  } else {
+    createMessage.success('新增成功');
+    closeModal()
+  }
+  closeModal()
+}
+</script>

src/views/dataSharingAndExchange/labelManagement/index.vue

+<template>
+  <!-- 标签管理 -->
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary" @click="handleAdd">新增</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                // label: '编辑',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                // label: '删除',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <!-- 新增或修改 弹窗 -->
+    <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"
+
+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',
+  },
+});
+
+/** 刷新 按钮 */
+function handleReload() {
+  createMessage.success('刷新成功！')
+  reload();
+}
+
+/** 删除 按钮 */
+async function handleDelete(record: Recordable) {
+  createMessage.success('删除成功!');
+}
+
+/** 新增 按钮 */
+function handleAdd() {
+  openLabelManagement(true, {
+    isUpdate: false,
+  });
+}
+
+/** 编辑 按钮 */
+function handleEdit(record: Recordable) {
+  openLabelManagement(true, {
+    isUpdate: true,
+    record
+  });
+}
+
+/** 成功时返回的方法 */
+function handleSuccess() {
+  reload();
+}
+</script>

src/views/dataSharingAndExchange/labelManagement/labelManagement.data.ts

+import {BasicColumn, FormSchema} from "@/components/Table";
+
+// 搜索栏参数
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'labelName',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索业务标签名称',
+    },
+    colProps: {span: 6},
+  },
+];
+
+// 表头列表头
+export const columns: BasicColumn[any] = [
+  {
+    title: '名称',
+    dataIndex: 'labelName',
+    width: 150,
+  },
+  {
+    title: '描述',
+    dataIndex: 'labelDescription',
+    width: 150,
+  },
+  {
+    title: '创建者',
+    dataIndex: 'createBy',
+    width: 150,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 150,
+  },
+  {
+    title: '关联资源数',
+    dataIndex: 'associatedResourceNumber',
+    width: 150,
+  },
+];
+
+// 表单表头
+export const formSchema: FormSchema[any] = [
+  {
+    field: 'labelName',
+    label: '名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'labelDescription',
+    label: '描述',
+    component: 'Input',
+    required: false,
+  },
+]

src/views/dataSharingAndExchange/labelManagement/labelManagementData.ts

+// 标签管理 列表数据
+export const labelManagementListData: any[] = [
+  {
+    "id": 0,
+    "labelName": "科技管理",
+    "labelDescription": "科技管理",
+    "associatedResourceNumber": "9",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-24 10:04:04",
+    "updateBy": "admin",
+    "updateDate": "2024-10-24 10:04:04"
+  },
+  {
+    "id": 1,
+    "labelName": "环境保护",
+    "labelDescription": "环境保护",
+    "associatedResourceNumber": "7",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-24 18:44:16",
+    "updateBy": "admin",
+    "updateDate": "2024-10-24 18:44:16"
+  },
+  {
+    "id": 2,
+    "labelName": "医药卫生管理",
+    "labelDescription": "医药卫生管理",
+    "associatedResourceNumber": "6",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-25 11:05:05",
+    "updateBy": "admin",
+    "updateDate": "2024-10-25 11:05:05"
+  },
+  {
+    "id": 3,
+    "labelName": "城乡建设",
+    "labelDescription": "城乡建设",
+    "associatedResourceNumber": "6",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-27 09:27:29",
+    "updateBy": "admin",
+    "updateDate": "2024-10-27 09:27:29"
+  },
+  {
+    "id": 4,
+    "labelName": "管理支持",
+    "labelDescription": "管理支持",
+    "associatedResourceNumber": "5",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-29 13:45:12",
+    "updateBy": "admin",
+    "updateDate": "2024-10-29 13:45:12"
+  },
+  {
+    "id": 5,
+    "labelName": "外部数据",
+    "labelDescription": "外部数据",
+    "associatedResourceNumber": "4",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-02 08:15:30",
+    "updateBy": "admin",
+    "updateDate": "2024-11-02 08:15:30"
+  },
+];

src/views/dataSharingAndExchange/usageMonitor/index.vue

+<template>
+<!-- 使用监控 -->
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ant-design:reload-outlined',
+                // label: '重试',
+                onClick: handleUsageMonitor.bind(null, record),
+              },
+              {
+                icon: 'ant-design:tool-outlined',
+                // label: '',
+                onClick: handleStopUsageMonitor.bind(null, record),
+                ifShow: record.pushStatus !== '成功',
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </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/usageMonitor/usageMonitor.data";
+  import {usageMonitorListData} from "@/views/dataSharingAndExchange/usageMonitor/usageMonitorData";
+
+  defineOptions({ name: 'UsageMonitor' });
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = 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: usageMonitorListData };
+    },
+    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 handleUsageMonitor(record: Recordable) {
+    createMessage.success('刷新成功！')
+    reload();
+  }
+
+  /** 终止连接 按钮 */
+  function handleStopUsageMonitor(record: Recordable) {
+    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";
+
+// 搜索栏参数
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'keyWord',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索资源名称或操作人',
+    },
+    colProps: {span: 4},
+  },
+  {
+    field: 'ownershipBody',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '权属机构',
+      options: [
+        { label: '数据平台治理部', value: '1' },
+        { label: '数据资源管理部', value: '2' },
+      ],
+    },
+    colProps: { span: 2 },
+  },
+  {
+    field: 'operationType',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '操作类型',
+      options: [
+        { label: '上传', value: '1' },
+        { label: '下载', value: '2' },
+        { label: '数据集采集', value: '3' },
+        { label: '数据集推送', value: '4' },
+        { label: 'API调用-拉取数据', value: '5' },
+        { label: 'API调用-推送数据', value: '6' },
+      ],
+    },
+    colProps: { span: 2 },
+  },
+  {
+    field: 'affiliatedOrganization',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '操作人所属机构',
+      options: [
+        { label: '研发部门', value: '1' },
+        { label: '市场部门', value: '2' },
+        { label: '测试部门', value: '3' },
+        { label: '财务部门', value: '4' },
+        { label: '运维部门', value: '5' },
+        { label: '数据部门', value: '6' },
+        { label: '检查部门', value: '7' },
+      ],
+    },
+    colProps: { span: 3 },
+  },
+  {
+    field: 'pushStatus',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '状态',
+      options: [
+        { label: '成功', value: '1' },
+        { label: '失败', value: '2' },
+      ],
+    },
+    colProps: { span: 2 },
+  },
+  {
+    field: 'dateRange',
+    label: ' ',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD', // 显示的日期格式
+      valueFormat: 'YYYY-MM-DD', // 提交的日期格式
+      placeholder: ['开始时间', '结束时间'], // 占位符
+      style: { width: '100%' }, // 控制宽度
+    },
+    colProps: { span: 6 },
+  },
+];
+
+// 表头列表头
+export const columns: BasicColumn[any] = [
+  {
+    title: '资源名称',
+    dataIndex: 'resourceName',
+    width: 150,
+  },
+  {
+    title: '权属机构',
+    dataIndex: 'ownershipBody',
+    width: 150,
+  },
+  {
+    title: '操作人',
+    dataIndex: 'updateBy',
+    width: 150,
+  },
+  {
+    title: '操作人所属机构',
+    dataIndex: 'affiliatedOrganization',
+    width: 150,
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'updateDate',
+    width: 150,
+  },
+  {
+    title: '操作类型',
+    dataIndex: 'operationType',
+    width: 150,
+  },
+  {
+    title: '推送方式',
+    dataIndex: 'pushMode',
+    width: 150,
+  },
+  {
+    title: '状态',
+    dataIndex: 'pushStatus',
+    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": 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": 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"
+  }
+];