修改通用配置

src/views/dataSharingAndExchange/commonSetting/commonDataSet.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const Columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'title',
+  },
+  {
+    title: '部门',
+    dataIndex: 'dept',
+  },
+  {
+    title: '标签',
+    dataIndex: 'label',
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createdBy',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createdTime',
+  },
+  {
+    title: '浏览次数',
+    dataIndex: 'view',
+  },
+  {
+    title: '推送次数',
+    dataIndex: 'edit',
+  },
+  {
+    title: '共享类型',
+    dataIndex: 'isShare',
+    slots: { customRender: 'isShare' },
+  },
+];
+export const downLoadSchema: FormSchema[] = [
+  {
+    field: 'num',
+    label: '最大下载行数',
+    component: 'Input',
+    defaultValue: 1000,
+    required: true,
+  },
+];
+export const waterMarkSchema: FormSchema[] = [
+  {
+    field: 'waterMark',
+    label: '水印',
+    component: 'Switch',
+    defaultValue: true,
+    required: true,
+  },
+  {
+    field: 'type',
+    label: '水印类型',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '固定水印',
+          value: '1',
+        },
+        {
+          label: '动态水印',
+          value: '2',
+        },
+      ],
+    },
+    defaultValue: '1',
+    required: true,
+  },
+  {
+    field: 'strategy',
+    label: '水印生成策略',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '每行一个',
+          value: '1',
+        },
+        {
+          label: '每行多个',
+          value: '2',
+        },
+      ],
+    },
+    required: true,
+  },
+];
+export const previewSchema: FormSchema[] = [
+  {
+    field: 'preview',
+    label: '文件预览',
+    component: 'Switch',
+    defaultValue: true,
+    required: true,
+  },
+  {
+    field: 'type',
+    label: '预览生成方式',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '系统自动生成',
+          value: '1',
+        },
+        {
+          label: '用户上传',
+          value: '2',
+        },
+      ],
+    },
+    defaultValue: '1',
+    required: true,
+  },
+  {
+    field: 'num',
+    label: '最大预览页面',
+    defaultValue: 5,
+    component: 'Input',
+    required: true,
+  },
+];

src/views/dataSharingAndExchange/commonSetting/index.vue

 <template>
-  <div>11111</div>
+  <div class="full-page-container">
+    <PageWrapper class="page-wrapper">
+      <template #headerContent>
+        <div class="headerContent">
+          <div>
+            <Icon icon="grommet-icons:settings-option" :size="40" :color="'#61aaff'" />
+            <span class="title">通用配置</span>
+          </div>
+        </div>
+      </template>
+      <div>
+        <span class="card-title">数据源</span>
+        <List>
+          <Row :gutter="16">
+            <Col :span="8">
+              <ListItem>
+                <Card :hoverable="true" style="height: 200px; width: 500px; position: relative">
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <div style="display: flex">
+                        <Icon size="23" icon="lucide:download" :color="'#61aaff'" />
+                      </div>
+                      <div>
+                        <span class="card-title">下载配置</span>
+                      </div>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <span style="color: #61aaff; margin-right: 10px" @click="cancel">取消</span>
+                      <span style="color: #61aaff" @click="handSave">保存</span>
+                    </div>
+                  </div>
+                  <div style="padding-top: 50px">
+                    <BasicForm @register="registerForm" />
+                  </div>
+                </Card>
+              </ListItem>
+            </Col>
+          </Row>
+        </List>
+      </div>
+      <div style="padding-top: 30px">
+        <span class="card-title">文件资源</span>
+        <List>
+          <Row :gutter="24">
+            <Col :span="8">
+              <ListItem>
+                <Card :hoverable="true" style="height: 300px; width: 500px; position: relative">
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <div style="display: flex">
+                        <Icon size="23" icon="material-symbols:branding-watermark-outline-sharp" :color="'#61aaff'" />
+                      </div>
+                      <div>
+                        <span class="card-title">水印配置</span>
+                      </div>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <span style="color: #61aaff; margin-right: 10px" @click="cancel1">取消</span>
+                      <span style="color: #61aaff" @click="handSave">保存</span>
+                    </div>
+                  </div>
+                  <div style="padding-top: 50px">
+                    <BasicForm @register="registerWaterMarkForm" />
+                  </div>
+                </Card>
+              </ListItem>
+            </Col>
+            <Col :span="8">
+              <ListItem>
+                <Card :hoverable="true" style="height: 300px; width: 500px; position: relative">
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <div style="display: flex">
+                        <Icon size="23" icon="qlementine-icons:print-preview-16" :color="'#61aaff'" />
+                      </div>
+                      <div>
+                        <span class="card-title">预览配置</span>
+                      </div>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <span style="color: #61aaff; margin-right: 10px" @click="cancel2">取消</span>
+                      <span style="color: #61aaff" @click="handSave">保存</span>
+                    </div>
+                  </div>
+                  <div style="padding-top: 50px">
+                    <BasicForm @register="registerPreviewForm" />
+                  </div>
+                </Card>
+              </ListItem>
+            </Col>
+          </Row>
+        </List>
+      </div>
+    </PageWrapper>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
+<script lang="ts" setup>
+  import { Card, Row, Col, List, ListItem } from 'ant-design-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { onMounted } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    downLoadSchema,
+    previewSchema,
+    waterMarkSchema,
+  } from '@/views/dataSharingAndExchange/commonSetting/commonDataSet.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 120,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: downLoadSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerWaterMarkForm, { resetFields: resetWaterMarkFields }] = useForm({
+    labelWidth: 120,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: waterMarkSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerPreviewForm, { resetFields: resetPreviewFields }] = useForm({
+    labelWidth: 120,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: previewSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  function handSave() {
+    createMessage.success('保存成功');
+  }
+  function cancel() {
+    resetFields();
+  }
+  function cancel1() {
+    resetWaterMarkFields();
+  }
+  function cancel2() {
+    resetPreviewFields();
+  }
+
+  onMounted(() => {});
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .full-page-container {
+    display: flex;
+    height: 100%;
+  }
+
+  .group-tree {
+    width: 250px;
+    background-color: #f0f0f0;
+  }
+
+  .page-wrapper {
+    flex: 1;
+    min-height: 860px;
+    padding: 20px;
+    background-color: #ffffff;
+  }
+
+  .headerContent {
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 25px;
+      font-weight: bold;
+    }
+    .path {
+      font-size: 14px;
+      color: gray;
+    }
+    .buttonGroup {
+      margin-left: auto;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+  }
+
+  .icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .sceneSelectionIcon {
+    transition: color 0.3s ease;
+  }
+
+  .card-title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .card-dept {
+    font-size: 12px;
+    color: gray;
+  }
+
+  .card-description {
+    margin-top: 10px;
+    color: gray;
+  }
+
+  .cardFooter {
+    padding: 10px;
+  }
 
+  .search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .centent1 {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    .iconClass1 {
+      font-size: 20px;
+      color: rgb(27, 148, 243);
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+    .iconClass2 {
+      font-size: 20px;
+    }
+  }
+  .centent2 {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    .centent2-1 {
+      margin-right: 20px;
+      color: rgb(146, 153, 167);
+      font-size: 13px;
+    }
+  }
+  .iconClass3 {
+    font-size: 12px;
+    margin-left: 2px;
+  }
 </style>

src/views/dataSharingAndExchange/commonSetting/mock.ts

+import {ref} from "vue";
+
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    name: '图标加载',
+    scene: '离线加载',
+    releaseStatus: '未发布',
+    createTime: '2023/05/23 14:36:04',
+    updateTime: '2023/05/23 14:36:04',
+    owner: 'admin',
+    workgroup: '个人工作组',
+  },
+  {
+    businessId: 2,
+    name: '图标专利文件加载',
+    scene: '离线加载',
+    releaseStatus: '未发布',
+    createTime: '2023/05/23 14:36:04',
+    updateTime: '2023/05/23 14:36:05',
+    owner: 'admin',
+    workgroup: '个人工作组',
+  },
+  {
+    businessId: 3,
+    name: '版权证书加载',
+    scene: '离线加载',
+    releaseStatus: '已下线',
+    createTime: '2023/05/23 14:36:04',
+    updateTime: '2023/05/23 14:36:04',
+    owner: 'admin',
+    workgroup: '个人工作组',
+  },
+  {
+    businessId: 4,
+    name: '学生成绩表格',
+    scene: '文件加载',
+    releaseStatus: '已发布',
+    createTime: '2023/05/23 14:36:04',
+    updateTime: '2023/05/23 14:36:05',
+    owner: 'admin',
+    workgroup: '共享工作组',
+  },
+  {
+    businessId: 5,
+    name: '各科试卷加载',
+    scene: '文件加载',
+    releaseStatus: '已发布',
+    createTime: '2023/05/23 14:36:04',
+    updateTime: '2023/05/23 14:36:05',
+    owner: 'admin',
+    workgroup: '共享工作组',
+  },
+  {
+    businessId: 6,
+    name: '学生个人信息加载',
+    scene: '准实时加载',
+    releaseStatus: '已发布',
+    createTime: '2023/05/23 14:36:04',
+    updateTime: '2023/05/23 14:36:04',
+    owner: 'admin',
+    workgroup: '共享工作组',
+  },
+];
+
+export const TreeData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 100,
+    parentWorkSpaceName: '公共数据集',
+    workSpaceName: '公共数据集',
+    parentId: 0,
+    'code:': '001',
+    ancestors: '0',
+    orderNum: 0,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 101,
+    parentWorkSpaceName: '公共数据集',
+    workSpaceName: '党建建设',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 201,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '基本信息',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 202,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '党员发展计划',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 203,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '主题教育活动',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 204,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '党建工作总结',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 205,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '党史知识竞赛',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 206,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '红色文化展览',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 207,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '志愿服务活动',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 208,
+    parentWorkSpaceName: '党建建设',
+    workSpaceName: '党员风采展示',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 102,
+    parentWorkSpaceName: '公共数据集',
+    workSpaceName: '交通信息',
+    parentId: 100,
+    'code:': '004',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 209,
+    parentWorkSpaceName: '交通信息',
+    workSpaceName: '城市公交优化方案',
+    parentId: 102,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 210,
+    parentWorkSpaceName: '交通信息',
+    workSpaceName: '智能交通系统部署',
+    parentId: 102,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 211,
+    parentWorkSpaceName: '交通信息',
+    workSpaceName: '绿色出行倡议',
+    parentId: 102,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+];
+
+export const cardList = [
+  {
+    title: '基本信息',
+    scene: 'databaseOfflineLoading',
+    parentWorkSpaceName: '党建建设',
+    icon: 'majesticons:table',
+    color: '#71c8d5',
+    dept: '数据资源管理部',
+    description: '集团党委会、党委理论学习中心的学习会的组织实操、集团党委、纪委换届选举',
+    label: '其他',
+    createdBy: 'admin',
+    createdTime: '2023/01/05 15:43:15',
+    view: '85',
+    edit: '2',
+    isShare: 'true',
+  },
+  {
+    title: '党员发展计划',
+    scene: 'partyDevelopmentPlan',
+    parentWorkSpaceName: '党建建设',
+    icon: 'majesticons:table',
+    color: '#71c8d5',
+    dept: '组织人事部',
+    description: '制定年度党员发展计划，开展入党积极分子培训',
+    label: '计划',
+    createdBy: 'admin',
+    createdTime: '2023/02/10 09:20:30',
+    view: '120',
+    edit: '5',
+    isShare: 'true',
+  },
+  {
+    title: '主题教育活动',
+    scene: 'themeEducationActivity',
+    parentWorkSpaceName: '党建建设',
+    icon: 'majesticons:table',
+    color: '#71c8d5',
+    dept: '宣传部',
+    description: '举办各类主题教育活动，增强党员意识',
+    label: '活动',
+    createdBy: 'admin',
+    createdTime: '2023/03/15 14:45:45',
+    view: '95',
+    edit: '3',
+    isShare: 'false',
+  },
+  {
+    title: '党建工作总结',
+    scene: 'partyWorkSummary',
+    parentWorkSpaceName: '党建建设',
+    icon: 'majesticons:table',
+    color: '#71c8d5',
+    dept: '办公室',
+    description: '撰写季度党建工作总结报告',
+    label: '总结',
+    createdBy: 'admin',
+    createdTime: '2023/08/10 09:00:00',
+    view: '80',
+    edit: '1',
+    isShare: 'true',
+  },
+  {
+    title: '党史知识竞赛',
+    scene: 'partyHistoryQuiz',
+    parentWorkSpaceName: '党建建设',
+    icon: 'majesticons:table',
+    color: '#71c8d5',
+    dept: '宣传教育中心',
+    description: '组织党史知识竞赛，提升党员历史素养',
+    label: '竞赛',
+    createdBy: 'admin',
+    createdTime: '2023/05/25 16:30:15',
+    view: '110',
+    edit: '4',
+    isShare: 'false',
+  },
+  {
+    title: '公交优化方案',
+    scene: 'urbanBusOptimization',
+    parentWorkSpaceName: '交通信息',
+    icon: 'majesticons:bus',
+    color: '#71c8d5',
+    dept: '交通规划部',
+    description: '分析现有公交线路运行情况，提出优化建议以提高效率和乘客满意度。',
+    label: '方案',
+    createdBy: 'admin',
+    createdTime: '2023/04/01 10:00:00',
+    view: '90',
+    edit: '3',
+    isShare: 'true',
+  },
+  {
+    title: '交通系统部署',
+    scene: 'intelligentTransportSystemDeployment',
+    icon: 'majesticons:bus',
+    parentWorkSpaceName: '交通信息',
+    color: '#71c8d5',
+    dept: '信息技术部',
+    description:
+      '实施先进的智能交通管理系统，包括信号灯控制、交通流量监测等，旨在缓解城市交通拥堵。',
+    label: '技术',
+    createdBy: 'admin',
+    createdTime: '2023/05/15 11:30:00',
+    view: '115',
+    edit: '5',
+    isShare: 'false',
+  },
+  {
+    title: '绿色出行倡议',
+    scene: 'greenCommuteInitiative',
+    icon: 'majesticons:bus',
+    parentWorkSpaceName: '交通信息',
+    color: '#71c8d5',
+    dept: '环保与发展部',
+    description: '推广低碳环保的出行方式，如骑行和步行，并为市民提供相关设施支持。',
+    label: '倡议',
+    createdBy: 'admin',
+    createdTime: '2023/09/28 14:00:00',
+    view: '75',
+    edit: '2',
+    isShare: 'true',
+  },
+];
+export const dataList = ref([
+  {
+    name: '新建任务1',
+    title: '新建任务1',
+    children: [
+      {
+        name: '11111',
+        title: '新建任务',
+      },
+      {
+        name: '22222',
+        title: '新建任务',
+      },
+    ],
+  },
+  {
+    name: '新建任务2',
+    title: '新建任务2',
+  },
+  {
+    name: '新建任务3',
+    title: '新建任务3',
+  },
+  {
+    name: '新建任务4',
+    title: '新建任务4',
+  },
+  {
+    name: '新建任务5',
+    title: '新建任务5',
+  },
+  {
+    name: '新建任务6',
+  },
+]);