换源工作台

src/views/workbench/abak.vue

@@ -0,0 +1,103 @@
+<template>
+  <PageWrapper dense>
+    <div class="parent-test">
+    <CanvasEditor
+        ref="canvasEditor"
+        :parentContent="parentContent"
+        :view="view"
+        @save-content="handleSaveCanvasEditorContent"
+    />
+
+    <button
+        style="width: 80px; height: 40px; border: 2px solid #2b4b6b; margin-right: 20px; float: right"
+        @click="handleSaveContent"
+    >
+      保 存
+    </button>
+  </div>
+</PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted,reactive } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import WorkbenchHeader from './components/WorkbenchHeader.vue';
+  import { Card, Dropdown, Menu, MenuItem } from 'ant-design-vue';
+  import ProjectCard from './components/ProjectCard.vue';
+  import QuickNav from './components/QuickNav.vue';
+  import DocumentTasksTable from '@/views/documentReview/DocumentTasks/DocumentTasksTable.vue';
+  import { useRouter } from 'vue-router';
+  import { DownOutlined, UserOutlined } from '@ant-design/icons-vue';
+  import { groupItems } from './components/data';
+  import CanvasEditor from '@/views/CanvasEditor/index.vue';
+
+  // 存放父组件传递的数据
+let parentContent = reactive<any>(undefined);
+// 存放子组件数据
+const content = ref<any>(undefined);
+// 标识符
+const view = ref<string | undefined>(undefined);
+
+// 初始化数据
+onMounted(() => {
+  console.log("模拟父组件向后端请求数据, 传递给子组件");
+  getEditorContent();
+  view.value = "parent";
+});
+
+// 模拟后端获取数据的方法
+const getEditorContent = () => {
+  parentContent={
+    header: [
+      {
+        value: "父类传递的数据",
+        size: 12,
+        bold: false,
+        color: "rgb(33, 53, 71)",
+        italic: false,
+      },
+    ],
+    main: [
+      {
+        value: "父类传递的数据 通过后端获取!\n甲方：企查查科技股份有限公司\n法定代表人：陈德强\n住所：苏州工业园区科创东区东石泾港路2号润港产业园6号楼10层1001室11",
+        size: 40,
+        bold: true,
+      },
+    ],
+  };
+};
+
+// 组件引用
+const canvasEditor = ref<InstanceType<typeof CanvasEditor> | null>(null);
+
+// 保存内容方法
+const handleSaveContent = () => {
+  // 访问子组件的方法
+  (canvasEditor.value as any).saveContent();
+};
+
+// 处理子组件传递的数据
+const handleSaveCanvasEditorContent = (data: any) => {
+  console.log("从子组件接收到的数据:", data);
+  // 将data数据转换为 json 格式的数据, 方便入库处理
+  content.value = JSON.stringify(data);
+  console.log("转换后的数据 content 为: ", content.value);
+};
+
+  const router = useRouter();
+  // 状态定义
+  const loading = ref(false);
+  const handleMenuClick = ({ key }) => {
+    console.log(key);
+    router.push({ path: key });
+  };
+  // 获取任务列表
+  const fetchTaskList = async () => {};
+
+  // 页面加载时获取数据
+  onMounted(() => {
+    fetchTaskList();
+  });
+  setTimeout(() => {
+    loading.value = false;
+  }, 1500);
+</script>

src/views/workbench/index.vue

@@ -1,24 +1,51 @@
 <template>
-  <PageWrapper dense>
-    <div class="parent-test">
-    <CanvasEditor
-        ref="canvasEditor"
-        :parentContent="parentContent"
-        :view="view"
-        @save-content="handleSaveCanvasEditorContent"
-    />
+  <PageWrapper>
+    <template #headerContent> <WorkbenchHeader /> </template>
+    <div class="workbench">
+      <div class="h-1/4">
+        <div class="grid grid-cols-5 gap-4">
+          <div class="col-span-3 h-full">
+            <ProjectCard :loading="loading" class="enter-y" />
+          </div>
+          <div class="col-span-2 h-full">
+            <QuickNav :loading="loading" class="enter-y" />
+          </div>
+        </div>
+        <div class="h-1/2 mt-4">
+          <Card title="任务看板" :bordered="false" style="width: 100%; height: 100%">
+            <template #extra>
+              <!-- 将按钮改为下拉菜单 -->
+              <Dropdown>
+                <a-button>
+                  更多
+                  <DownOutlined />
+                </a-button>
+                <template #overlay>
+                  <Menu @click="handleMenuClick" mode="vertical">
+                    <MenuItem v-for="item in groupItems" 
+                    :key="item.path" 
+                    >
+                      {{ item.title }}
+                    </MenuItem>
+                  </Menu>
+                </template>
+              </Dropdown>
+            </template>
 
-    <button
-        style="width: 80px; height: 40px; border: 2px solid #2b4b6b; margin-right: 20px; float: right"
-        @click="handleSaveContent"
-    >
-      保 存
-    </button>
-  </div>
-</PageWrapper>
+            <DocumentTasksTable
+              :show-table-setting="false"
+              :show-toolbar="false"
+              :use-search-form="false"
+              :pagination="false"
+            />
+          </Card>
+        </div>
+      </div>
+    </div>
+  </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted,reactive } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { PageWrapper } from '@/components/Page';
   import WorkbenchHeader from './components/WorkbenchHeader.vue';
   import { Card, Dropdown, Menu, MenuItem } from 'ant-design-vue';
@@ -28,60 +55,6 @@
   import { useRouter } from 'vue-router';
   import { DownOutlined, UserOutlined } from '@ant-design/icons-vue';
   import { groupItems } from './components/data';
-  import CanvasEditor from '@/views/CanvasEditor/index.vue';
-
-  // 存放父组件传递的数据
-let parentContent = reactive<any>(undefined);
-// 存放子组件数据
-const content = ref<any>(undefined);
-// 标识符
-const view = ref<string | undefined>(undefined);
-
-// 初始化数据
-onMounted(() => {
-  console.log("模拟父组件向后端请求数据, 传递给子组件");
-  getEditorContent();
-  view.value = "parent";
-});
-
-// 模拟后端获取数据的方法
-const getEditorContent = () => {
-  parentContent={
-    header: [
-      {
-        value: "父类传递的数据",
-        size: 12,
-        bold: false,
-        color: "rgb(33, 53, 71)",
-        italic: false,
-      },
-    ],
-    main: [
-      {
-        value: "父类传递的数据 通过后端获取!\n甲方：企查查科技股份有限公司\n法定代表人：陈德强\n住所：苏州工业园区科创东区东石泾港路2号润港产业园6号楼10层1001室11",
-        size: 40,
-        bold: true,
-      },
-    ],
-  };
-};
-
-// 组件引用
-const canvasEditor = ref<InstanceType<typeof CanvasEditor> | null>(null);
-
-// 保存内容方法
-const handleSaveContent = () => {
-  // 访问子组件的方法
-  (canvasEditor.value as any).saveContent();
-};
-
-// 处理子组件传递的数据
-const handleSaveCanvasEditorContent = (data: any) => {
-  console.log("从子组件接收到的数据:", data);
-  // 将data数据转换为 json 格式的数据, 方便入库处理
-  content.value = JSON.stringify(data);
-  console.log("转换后的数据 content 为: ", content.value);
-};
 
   const router = useRouter();
   // 状态定义