Merge remote-tracking branch 'origin/master'

src/views/dataIntegration/dataLoading/dataEntryLake/databaseOfflineLoading.vue

@@ -4,7 +4,12 @@
       <div class="modal_top">
         <div style="display: flex; gap: 5px; align-items: center">
           <span v-if="isEdit === 'false'">查看版本</span>
-          <Select v-if="isEdit === 'false'" v-model:value="version" style="width: 120px" :options="versionOptions" />
+          <Select
+            v-if="isEdit === 'false'"
+            v-model:value="version"
+            style="width: 120px"
+            :options="versionOptions"
+          />
           <a-button v-if="isEdit === 'false'">回滚</a-button>
           <a-button v-if="isEdit === 'false'" @click="goBack">退出查看</a-button>
         </div>

src/views/mallResourceDevelopment/commonDataSet/GroupTree.vue

+<template>
+  <div style="min-width: 250px; min-height: 850px">
+    <BasicTree
+      style="padding-left: 15px"
+      title=" "
+      search
+      ref="treeRef"
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
+  import { Nullable } from '@vben/types';
+  import { TreeData } from './mock.ts';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+
+  const emit = defineEmits(['select']);
+  const { createMessage } = useMessage();
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  const [registerModal, { openModal }] = useModal();
+  async function fetch() {
+    treeData.value = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    await nextTick(() => {
+      getTree().expandAll(true);
+    });
+  }
+
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+
+  // function handleSelect() {
+  //   const keys = getTree().getSelectedKeys();
+  //   const node = getTree().getSelectedNode(keys[0]);
+  //   // console.log('node', node);
+  //   emit('select', node);
+  // }
+
+  /**选中的数据*/
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/mallResourceDevelopment/commonDataSet/index.vue

+<template>
+  <div class="full-page-container">
+    <GroupTree @select="handleSelect" class="group-tree" />
+    <PageWrapper class="page-wrapper">
+      <template #headerContent>
+        <div class="headerContent">
+          <div>
+            <Icon icon="fluent:document-folder-16-regular" :size="40" :color="'#61aaff'" />
+          </div>
+          <div>
+            <div class="title">党建建设</div>
+            <div class="path">资源编目</div>
+          </div>
+          <div class="buttonGroup">
+            <Segmented v-model:value="value" :options="data">
+              <template #label="{ payload, value: segmentValue }">
+                <div class="icon-container">
+                  <Icon
+                    :icon="payload.icon"
+                    :size="24"
+                    :color="segmentValue === value ? '#007bff' : '#8c8c8c'"
+                  />
+                </div>
+              </template>
+            </Segmented>
+            <a-button type="primary" @click="handleBulkDownload">批量下载</a-button>
+            <a-button type="primary" @click="handleBatchPush">批量推送</a-button>
+          </div>
+        </div>
+      </template>
+      <List>
+        <Row :gutter="16">
+          <template v-for="item in cardList" :key="item.title">
+            <Col :span="12">
+              <ListItem>
+                <Card
+                  :hoverable="true"
+                  class="sceneSelectionCard"
+                  @click="handleNewModal(item.scene)"
+                >
+                  <div>
+                    <Icon
+                      class="sceneSelectionIcon"
+                      v-if="item.icon"
+                      :icon="item.icon"
+                      :color="item.color"
+                    />
+                  </div>
+                  <div class="sceneSelectionTitle">
+                    {{ item.title }}
+                  </div>
+                  <div class="sceneSelectionDescription">
+                    {{ item.description }}
+                  </div>
+                </Card>
+              </ListItem>
+            </Col>
+          </template>
+        </Row>
+      </List>
+    </PageWrapper>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
+  import {
+    RadioButton,
+    Segmented,
+    Card,
+    Row,
+    Col,
+    List,
+    ListItem,
+    Radio,
+    RadioGroup,
+  } from 'ant-design-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { onMounted, ref, reactive } from 'vue';
+  import { cardList } from './mock';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useRouter } from 'vue-router';
+  import GroupTree from './GroupTree.vue';
+
+  const { createMessage, createConfirm } = useMessage();
+  const route = useRouter();
+  const value = ref('cardList');
+  const data = ref([
+    {
+      value: 'cardList',
+      payload: {
+        icon: 'mingcute:grid-fill',
+      },
+    },
+    {
+      value: 'table',
+      payload: {
+        icon: 'typcn:th-list',
+      },
+    },
+  ]);
+
+  function handleSelect() {}
+
+  onMounted(() => {});
+</script>
+
+<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: 16px;
+      font-weight: 500;
+    }
+    .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;
+  }
+</style>

src/views/mallResourceDevelopment/commonDataSet/mock.ts

+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:': '004',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 301,
+    parentWorkSpaceName: '个人工作区',
+    workSpaceName: '图标验收',
+    parentId: 201,
+    'code:': '004',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 302,
+    parentWorkSpaceName: '共享工作区',
+    workSpaceName: '学生成绩',
+    parentId: 202,
+    'code:': '004',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+];
+
+export const cardList = [
+  {
+    title: '数据库离线加载',
+    scene: 'databaseOfflineLoading',
+    icon: 'majesticons:data-minus',
+    color: '#9064e9',
+    description: '支持数据加载导数据仓库（数据加载功能），也支持数仓将数据写入业务库（卸载功能）',
+  },
+  {
+    title: '文件离线加载',
+    scene: 'fileOfflineLoading',
+    icon: 'tabler:file-isr',
+    color: '#9064e9',
+    description: '支持将文件定期加载入数据仓库中',
+  },
+  {
+    title: '准实时加载',
+    scene: 'dataDischargeLake',
+    icon: 'mdi:database-clock',
+    color: '#9064e9',
+    description: '支持从数仓将数据加载到传统关系数据库中，支持目标端（Mysql,Oracle等）。',
+  },
+  {
+    title: '数据出湖',
+    scene: 'databaseOfflineLoading',
+    icon: 'icon-park-solid:data-switching',
+    color: '#9064e9',
+    description: '支持从数仓将数据加载到传统关系数据库中，支持目标端（Mysql,Oracle等）。',
+  },
+];
+