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

src/views/AAAFont/front/index.vue

@@ -11,14 +11,14 @@
             </el-carousel>
           </div>
 
-          <h3 class="content-item-h3">登记公示</h3>
+          <h3 class="content-item-h3">数据公示</h3>
           <span class="title_bottom">共114条数据，公示期为10个工作日</span>
           <div class="tab-pane">
             <el-tabs v-model="activeName" @tab-click="handleClick">
               <el-tab-pane name="first">
                 <template #label>
                   <span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
-                    >登记平台(112)</span
+                    >数据平台(112)</span
                   >
                 </template>
                 <el-row class="mt-5" :gutter="20">
@@ -198,7 +198,7 @@
             <div class="custom-table">
               <el-tab-pane name="first">
                 <template #label>
-                  <span class="mb-4 tab-label">数据集（15900）</span>
+                  <span class="mb-4 tab-label">数据服务（15900）</span>
                 </template>
                 <el-table
                   class="mt-5"
@@ -223,7 +223,7 @@
               </el-tab-pane>
               <el-tab-pane name="second">
                 <template #label>
-                  <span class="mb-4 tab-label">文件（100）</span>
+                  <span class="mb-4 tab-label">数据集（100）</span>
                 </template>
                 <el-table
                   class="mt-5"
@@ -271,31 +271,6 @@
                   <el-table-column prop="upDate" label="更新日期" />
                 </el-table>
               </el-tab-pane>
-              <el-tab-pane name="fourth">
-                <template #label>
-                  <span class="mb-4 tab-label">登记产品</span>
-                </template>
-                <el-table
-                  class="mt-5"
-                  :fits="true"
-                  :row-style="{ height: '60px' }"
-                  :header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
-                  :data="tableData"
-                  style="width: 1440px; font-size: 18px"
-                >
-                  <el-table-column prop="address" width="500" label="登记产品产权名称">
-                    <template #header="scope">
-                      <span class="table-span-label">{{ scope.column.label }}</span>
-                    </template>
-                    <template #default="scope">
-                      <span class="table-span">{{ scope.row.address }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="name" width="350" label="申请人" />
-                  <el-table-column prop="applicationDate" label="申请日期" />
-                  <el-table-column prop="upDate" label="更新日期" />
-                </el-table>
-              </el-tab-pane>
             </div>
           </el-tabs>
           <el-button-group>

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

-<script setup lang="ts">
+<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">API</div>
+          <div class="path">API日志记录</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>
 
-<template>
-api
-</template>
+<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;
+  }
 
-<style scoped lang="less">
+  .buttonGroup {
+    margin-left: auto;
+    display: flex;
+    gap: 5px;
+    align-items: center;
+  }
+}
 
 </style>

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

-<script setup lang="ts">
+<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>
 
-<template>
-文件
-</template>
+<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;
+  }
 
-<style scoped lang="less">
+  .buttonGroup {
+    margin-left: auto;
+    display: flex;
+    gap: 5px;
+    align-items: center;
+  }
+}
 
 </style>