前台页面-交易市场-数据集详情

src/router/routes/index.ts

@@ -125,6 +125,30 @@ export const PCFontRoute: AppRouteRecordRaw = {
         title: '',
       },
     },
+    {
+      path: '/aaaFont/tradingMarket/details/dataSet',
+      name: 'tradingMarketsDetail',
+      component: () => import('@/views/AAAFont/tradingMarket/details/dataSet.vue'),
+      meta: {
+        title: '',
+      },
+    },
+    {
+      path: '/aaaFont/tradingMarket/details/file',
+      name: 'tradingMarketsDetail1',
+      component: () => import('@/views/AAAFont/tradingMarket/details/file.vue'),
+      meta: {
+        title: '',
+      },
+    },
+    {
+      path: '/aaaFont/tradingMarket/details/api',
+      name: 'tradingMarketsDetail2',
+      component: () => import('@/views/AAAFont/tradingMarket/details/api.vue'),
+      meta: {
+        title: '',
+      },
+    },
   ],
 };
 // export const fontRoute: AppRouteRecordRaw = {

src/views/AAAFont/tradingMarket/details/api.vue

+<script setup lang="ts">
+
+</script>
+
+<template>
+api
+</template>
+
+<style scoped lang="less">
+
+</style>

src/views/AAAFont/tradingMarket/details/data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { DescItem } from '@/components/Description';
+export const searchEditFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索名称',
+    },
+  },
+];
+export const basicSchema: DescItem[] = [
+  {
+    field: 'name',
+    label: '资源名称',
+  },
+  {
+    field: 'description',
+    label: '描述',
+  },
+  {
+    field: 'tags',
+    label: '业务标签',
+  },
+  {
+    field: 'owner',
+    label: '权属机构',
+  },
+  {
+    field: 'sensitiveStatus',
+    label: '敏感状态',
+  },
+  {
+    field: 'version',
+    label: '版本',
+  },
+  {
+    field: 'source',
+    label: '来源',
+  },
+];
+export const informationColumns: BasicColumn[] = [
+  {
+    title: '字段',
+    dataIndex: 'field',
+    width: 120,
+  },
+  {
+    title: '中文名',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '字段描述',
+    dataIndex: 'remark',
+    width: 150,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+  {
+    title: '安全分级',
+    dataIndex: 'security',
+    width: 120,
+  },
+  {
+    title: '敏感状态',
+    dataIndex: 'status',
+    width: 150,
+  },
+  {
+    title: '敏感类型',
+    dataIndex: 'sensitiveType',
+    width: 100,
+  },
+  {
+    title: '数据标准',
+    dataIndex: 'standard',
+    width: 100,
+  },
+];

src/views/AAAFont/tradingMarket/details/dataFileData.ts

+
+export const basicData = {
+  name: 'wyx_contact',
+  description: '联系人信息',
+  tags: '测试',
+  owner: '数据平台治理部',
+  sensitiveStatus: '敏感',
+  version: 'V1.0',
+  source: '元数据',
+};
+export const informationTableList: any[] = [
+  {
+    field: 'name',
+    name: '姓名',
+    remark: '姓名',
+    type: 'string',
+    status: '敏感',
+    security: 'G2',
+    sensitiveType: '姓名（简体中...',
+    standard: '-',
+  },
+  {
+    field: 'phone_number',
+    name: '手机号',
+    remark: '手机号',
+    type: 'string',
+    status: '敏感',
+    security: 'G3',
+    sensitiveType: '手机号（中国...',
+    standard: '-',
+  },
+  {
+    field: 'student_id',
+    name: '学号',
+    remark: '学号',
+    type: 'string',
+    status: '敏感',
+    security: 'G3',
+    sensitiveType: '账户编号',
+    standard: '-',
+  },
+  {
+    field: 'major',
+    name: '专业',
+    remark: '专业',
+    type: 'string',
+    status: '敏感',
+    security: 'G10',
+    sensitiveType: '专业',
+    standard: '-',
+  },
+  {
+    field: 'origin_city',
+    name: '生源地',
+    remark: '生源地',
+    type: 'string',
+    status: '不敏感',
+    security: '未分级',
+    sensitiveType: '-',
+    standard: '-',
+  },
+  {
+    field: 'ethnic',
+    name: '民族',
+    remark: '民族',
+    type: 'string',
+    status: '敏感',
+    security: 'G2',
+    sensitiveType: '民族',
+    standard: '-',
+  },
+  {
+    field: 'building_num',
+    name: '楼号',
+    remark: '楼号',
+    type: 'int',
+    status: '不敏感',
+    security: '未分级',
+    sensitiveType: '-',
+    standard: '-',
+  },
+  {
+    field: 'room_num',
+    name: '寝室号',
+    remark: '寝室号',
+    type: 'int',
+    status: '不敏感',
+    security: '安全分级_03',
+    sensitiveType: '敏感类型_01',
+    standard: '-',
+  },
+];

src/views/AAAFont/tradingMarket/details/dataSet.vue

+<template>
+  <PageWrapper class="content-padding" contentBackground @back="goBack">
+      <template #headerContent>
+        <div class="modal_top">
+          <Icon
+            icon="ep:arrow-left-bold"
+            :size="20"
+            style="margin-right: 5px"
+            :color="'#a3a7b1'"
+            @click="goBack"
+          />
+          <div>
+            <Icon
+              icon="material-symbols-light:dataset-linked-outline-sharp"
+              :size="40"
+              :color="'#64c6e9'"
+            />
+          </div>
+          <div class="ml-3">
+            <div class="title">数据集</div>
+            <div class="path">党建工作总结</div>
+          </div>
+          <div class="buttonGroup"> </div>
+        </div>
+      </template>
+      <div class="desc-wrap">
+        <step-header title="基本信息" />
+          <Description
+            size="middle"
+            :bordered="false"
+            :column="2"
+            :data="basicData"
+            :schema="basicSchema"
+            :labelStyle="{ fontSize: '16px' }"
+            :contentStyle="{ fontSize: '16px' }"
+          />
+        <step-header class="mt-5" title="列信息" />
+          <BasicTable @register="registerTable" />
+      </div>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { Tabs } from 'ant-design-vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { router } from '@/router';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Description } from '@/components/Description';
+  import { basicSchema, searchEditFormSchema, informationColumns } from './data';
+  import { basicData, informationTableList } from './dataFileData';
+  import { BasicTable, useTable } from '@/components/Table';
+  import BasicTitle from "@/components/Basic/src/BasicTitle.vue";
+  import StepHeader from "@/components/stepHeader.vue";
+
+  defineOptions({ name: 'AccountDetail' });
+
+  const { createMessage, createConfirm } = useMessage();
+  const ATabs = Tabs;
+  const ATabPane = Tabs.TabPane;
+
+  const [registerTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: informationTableList.length,
+        code: '',
+        message: '',
+        data: informationTableList,
+      };
+      return { ...response };
+    },
+    columns: informationColumns,
+    formConfig: {
+      labelWidth: 10,
+      schemas: searchEditFormSchema,
+      autoSubmitOnEnter: true,
+      showActionButtonGroup: false,
+    },
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  function goBack() {
+    router.back();
+  }
+
+  onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+  .content-padding {
+    width: 1440px;
+    margin: 0 auto;
+    background-color: white;
+  }
+
+  .modal_top {
+    padding: 0 0 20px 0;
+    display: flex;
+    align-items: center;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .path {
+      font-size: 14px;
+      color: gray;
+    }
+
+    .buttonGroup {
+      margin-left: auto;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+  }
+
+</style>

src/views/AAAFont/tradingMarket/details/file.vue

+<script setup lang="ts">
+
+</script>
+
+<template>
+文件
+</template>
+
+<style scoped lang="less">
+
+</style>