修改数据集

src/views/mallResourceDevelopment/dataSet/datasetByCreate/data.ts

 import { BasicColumn, FormSchema } from '@/components/Table';
 import { DescItem } from '@/components/Description';
+import { style } from '@logicflow/extension/es/bpmn-elements/presets/icons';
+import { h, VNodeChild } from 'vue';
 
 export const columns: BasicColumn[] = [
   {
@@ -637,3 +639,117 @@ export const informationColumns: BasicColumn[] = [
     width: 100,
   },
 ];
+function renderHeader(column: BasicColumn, isSensitive: boolean): VNodeChild {
+  const style = isSensitive ? { color: 'orange' } : {};
+  return h('span', { style }, column.title);
+}
+export const sampleDataColumns: BasicColumn[] = [
+  {
+    title: 'name(敏感)',
+    dataIndex: 'name',
+    customHeaderRender: (column) => renderHeader(column, true),
+    width: 120,
+  },
+  {
+    title: 'phone_number_string(敏感)',
+    dataIndex: 'phone_number_string',
+    customHeaderRender: (column) => renderHeader(column, true),
+    width: 150,
+  },
+  {
+    title: 'student_id(敏感)',
+    dataIndex: 'student_id',
+    customHeaderRender: (column) => renderHeader(column, true),
+    width: 150,
+  },
+  {
+    title: 'major(敏感)',
+    dataIndex: 'major',
+    customHeaderRender: (column) => renderHeader(column, true),
+    width: 120,
+  },
+  {
+    title: 'origin_city',
+    dataIndex: 'origin_city',
+    width: 120,
+  },
+  {
+    title: 'ethnic(敏感)',
+    dataIndex: 'ethnic',
+    customHeaderRender: (column) => renderHeader(column, true),
+    width: 150,
+  },
+  {
+    title: 'building_num',
+    dataIndex: 'building_num',
+    width: 100,
+  },
+];
+export const globalDataColumns: BasicColumn[] = [
+  {
+    title: '公共资源名称',
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: '上架状态',
+    dataIndex: 'status',
+    width: 100,
+  },
+];
+export const uploadFieldColumns: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: '中文名',
+    dataIndex: 'chineseName',
+    width: 100,
+  },
+  {
+    title: '数据类型',
+    dataIndex: 'type',
+    width: 100,
+  },
+];
+export const versionPublishSchema: FormSchema[] = [
+  {
+    field: 'title',
+    label: '申请标题',
+    component: 'Input',
+    defaultValue: '申请发布V10.0版本：数据集1',
+    required: true,
+  },
+  {
+    field: 'reason',
+    label: '申请理由',
+    component: 'Input',
+  },
+  {
+    field: 'remark',
+    label: '版本说明',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'scope',
+    label: '生效范围',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        {
+          label: '存量任务和新增任务',
+          value: '1',
+        },
+        {
+          label: '全部',
+          value: '2',
+        },
+      ],
+    },
+    required: true,
+  },
+];

src/views/mallResourceDevelopment/dataSet/datasetByCreate/dataFileData.ts

@@ -319,3 +319,141 @@ export const informationTableList: any[] = [
     standard: '-',
   },
 ];
+export const sampleDataTableList: any[] = [
+  {
+    name: '******',
+    phone_number_string: '******',
+    student_id: '******',
+    major: '******',
+    origin_city: '北京市',
+    ethnic: '******',
+    building_num: '18',
+  },
+  {
+    name: '******',
+    phone_number_string: '******',
+    student_id: '******',
+    major: '******',
+    origin_city: '上海市',
+    ethnic: '******',
+    building_num: '18',
+  },
+  {
+    name: '******',
+    phone_number_string: '******',
+    student_id: '******',
+    major: '******',
+    origin_city: '广州市',
+    ethnic: '******',
+    building_num: '18',
+  },
+  {
+    name: '******',
+    phone_number_string: '******',
+    student_id: '******',
+    major: '******',
+    origin_city: '深圳市',
+    ethnic: '******',
+    building_num: '18',
+  },
+  {
+    name: '******',
+    phone_number_string: '******',
+    student_id: '******',
+    major: '******',
+    origin_city: '杭州市',
+    ethnic: '******',
+    building_num: '18',
+  },
+  {
+    name: '******',
+    phone_number_string: '******',
+    student_id: '******',
+    major: '******',
+    origin_city: '武汉市',
+    ethnic: '******',
+    building_num: '18',
+  },
+];
+export const globalDataTableList: any[] = [
+  {
+    name: 'test1',
+    status: '1',
+    id: '1',
+  },
+  {
+    name: 'test2',
+    status: '1',
+    id: '2',
+  },
+  {
+    name: 'test3',
+    status: '1',
+    id: '3',
+  },
+  {
+    name: 'test4',
+    status: '1',
+    id: '4',
+  },
+];
+export const uploadFieldTableList: any[] = [
+  {
+    name: 'id',
+    chineseName: '标识',
+    type: 'INT',
+  },
+  {
+    name: 'username',
+    chineseName: '用户名',
+    type: 'VARCHAR',
+  },
+  {
+    name: 'password',
+    chineseName: '密码',
+    type: 'VARCHAR',
+  },
+  {
+    name: 'email',
+    chineseName: '电子邮件',
+    type: 'VARCHAR',
+  },
+  {
+    name: 'age',
+    chineseName: '年龄',
+    type: 'INT',
+  },
+  {
+    name: 'birthday',
+    chineseName: '生日',
+    type: 'DATE',
+  },
+  {
+    name: 'created_at',
+    chineseName: '创建时间',
+    type: 'DATETIME',
+  },
+  {
+    name: 'updated_at',
+    chineseName: '更新时间',
+    type: 'DATETIME',
+  },
+];
+export const basicNewData = {
+  name: 'wyx_contact',
+  description: '联系人信息',
+  tags: '测试',
+  owner: '数据平台治理部',
+  sensitiveStatus: '敏感',
+  version: 'V10.0',
+  source: '元数据',
+};
+export const basicOldData = {
+  name: 'wyx_contact',
+  description: '联系人信息',
+  tags: '测试',
+  owner: '数据平台治理部',
+  sensitiveStatus: '敏感',
+  version: 'V9.0',
+  source: '元数据',
+};

src/views/mallResourceDevelopment/dataSet/datasetByCreate/datasetByCreateDetail.vue

@@ -21,9 +21,11 @@
           <div class="path">我创建的/test</div>
         </div>
         <div class="buttonGroup">
-          <a-button type="primary" @click="handleGobalDeply">全局配置</a-button>
-          <a-button type="primary" @click="handleParameterConfiguration">参数配置</a-button>
-          <a-button type="primary" @click="handleVersionManagement">版本管理</a-button>
+          <a-button type="primary" @click="handleVersionPublish">版本发布</a-button>
+          <a-button type="primary" @click="handleParameterConfiguration">版本管理</a-button>
+          <a-button type="primary" @click="handleVersionManagement">删除</a-button>
+          <a-button type="primary" @click="handleUp">上架</a-button>
+          <a-button type="primary" @click="handleVersionManagement">编辑</a-button>
         </div>
       </div>
     </template>
@@ -81,9 +83,62 @@
       <template v-if="currentKey == '2'">
         <BasicTable @register="registerTable" />
       </template>
-      <template v-if="currentKey == '3'"> </template>
-      <template v-if="currentKey == '4'"> </template>
+      <template v-if="currentKey == '3'">
+        <BasicTable @register="registerSampleDataTable" />
+      </template>
+      <template v-if="currentKey == '4'">
+        <div class="flex">
+          <div style="width: 30%; border: rgba(26, 26, 26, 0.15) 1px solid">
+            <BasicTable @register="registerGlobalDataTable">
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'status'">
+                  <template v-if="record.status === '1'">
+                    <Icon icon="grommet-icons:status-good" color="green" /><span>已上架</span>
+                  </template>
+                  <template v-if="record.status === '0'">
+                    <Icon icon="carbon:error-outline" color="red" /><span>未上架</span>
+                  </template>
+                </template>
+              </template>
+            </BasicTable>
+          </div>
+          <div style="width: 70%; border: rgba(26, 26, 26, 0.15) 1px solid">
+            <div>
+              <Icon
+                icon="material-symbols-light:dataset-linked-outline-sharp"
+                :size="40"
+                style="margin-left: 10px"
+                :color="'#64c6e9'"
+              />
+              <a-button type="primary" style="margin-left: 900px" @click="handleDown"
+                >下架</a-button
+              >
+              <a-button type="primary" style="margin-left: 10px" @click="handleUp"
+                >重新上架</a-button
+              >
+            </div>
+            <div>
+              <div class="title" style="margin-left: 15px; padding-bottom: 20px">test1</div>
+            </div>
+            <div>
+              <Description
+                size="middle"
+                :bordered="false"
+                :column="2"
+                :data="optionData"
+                :schema="optionSchema"
+                :labelStyle="{ fontSize: '16px' }"
+                :contentStyle="{ fontSize: '16px' }"
+              />
+            </div>
+            <div>
+              <BasicTable @register="registerUploadFieldTable" />
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
+    <VersionPublishModal @register="registerVersionPublishModal" />
   </PageWrapper>
 </template>
 
@@ -103,6 +158,9 @@
     permissionSchema,
     searchEditFormSchema,
     informationColumns,
+    sampleDataColumns,
+    globalDataColumns,
+    uploadFieldColumns,
   } from './data';
   import {
     basicData,
@@ -110,8 +168,13 @@
     optionData,
     permissionData,
     informationTableList,
+    sampleDataTableList,
+    globalDataTableList,
+    uploadFieldTableList,
   } from './dataFileData';
   import { BasicTable, useTable } from '@/components/Table';
+  import { useModal } from '@/components/Modal';
+  import VersionPublishModal from './versionPublishModal.vue';
 
   defineOptions({ name: 'AccountDetail' });
 
@@ -121,6 +184,7 @@
   const currentKey = ref('1');
   const { setTitle } = useTabs();
   setTitle('数据集详情');
+  const [registerVersionPublishModal, { openModal: openVersionPublishModal }] = useModal();
 
   const [registerTable] = useTable({
     api: async () => {
@@ -150,7 +214,48 @@
       return info;
     },
   });
+  const [registerSampleDataTable] = useTable({
+    dataSource: sampleDataTableList,
+    columns: sampleDataColumns,
+    formConfig: {
+      labelWidth: 10,
+      schemas: searchEditFormSchema,
+      autoSubmitOnEnter: true,
+      showActionButtonGroup: false,
+    },
+    useSearchForm: true,
+    bordered: false,
+  });
+  const [registerGlobalDataTable] = useTable({
+    dataSource: globalDataTableList,
+    columns: globalDataColumns,
+    rowSelection: true,
+    rowKey: 'id',
+    showIndexColumn: false,
+    bordered: false,
+  });
+  const [registerUploadFieldTable] = useTable({
+    title: '上架字段',
+    dataSource: uploadFieldTableList,
+    columns: uploadFieldColumns,
+    showIndexColumn: false,
+    scroll: {
+      y: 400,
+    },
+    bordered: false,
+  });
 
+  function handleDown() {
+    createMessage.success('下架成功');
+  }
+  function handleUp() {
+    createMessage.success('上架成功');
+  }
+  function handleVersionPublish() {
+    openVersionPublishModal(true, {
+      title: '申请发布V10.0版本：数据集1',
+    });
+  }
   function goBack() {
     router.back();
   }

src/views/mallResourceDevelopment/dataSet/datasetByCreate/versionPublishModal.vue

+<template>
+  <BasicModal
+    width="55%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <div>
+      <BasicForm @register="registerForm" />
+      <Description size="middle" title="版本对比" :bordered="false" />
+    </div>
+    <div class="flex">
+      <div style="width: 50%; border: rgba(26, 26, 26, 0.12) 1px solid">
+        <div style="padding-left: 20px; font-size: 16px; font-weight: 500">V9.0(当前)</div>
+        <Description
+          size="middle"
+          title="基本信息"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="basicOldData"
+          :schema="basicSchema"
+        />
+        <Description
+          size="middle"
+          title="源表信息"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="sourceTableData"
+          :schema="sourceTableSchema"
+        />
+        <Description
+          size="middle"
+          title="默认上架配置"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="optionData"
+          :schema="optionSchema"
+        />
+        <Description
+          size="middle"
+          title="开放权限"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="permissionData"
+          :schema="permissionSchema"
+        />
+      </div>
+      <div style="width: 50%; border: rgba(26, 26, 26, 0.12) 1px solid">
+        <div style="padding-left: 20px; font-size: 16px; font-weight: 500">发布版本</div>
+        <Description
+          size="middle"
+          title="基本信息"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="basicNewData"
+          :schema="basicSchema"
+        />
+        <Description
+          size="middle"
+          title="源表信息"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="sourceTableData"
+          :schema="sourceTableSchema"
+        />
+        <Description
+          size="middle"
+          title="默认上架配置"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="optionData"
+          :schema="optionSchema"
+        />
+        <Description
+          size="middle"
+          title="开放权限"
+          :bordered="false"
+          :column="1"
+          :labelStyle="{ fontSize: '16px' }"
+          :contentStyle="{ fontSize: '16px' }"
+          :data="permissionData"
+          :schema="permissionSchema"
+        />
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    basicSchema,
+    optionSchema,
+    permissionSchema,
+    sourceTableSchema,
+    versionPublishSchema,
+  } from '@/views/mallResourceDevelopment/dataSet/datasetByCreate/data';
+  import Description from '@/components/Description/src/Description.vue';
+  import {
+    basicData, basicNewData, basicOldData,
+    optionData,
+    permissionData,
+    sourceTableData,
+  } from '@/views/mallResourceDevelopment/dataSet/datasetByCreate/dataFileData';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const { createMessage } = useMessage();
+  const title = ref();
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 12 },
+    schemas: versionPublishSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+  }
+</script>