科研项目

package.json

@@ -83,6 +83,9 @@
     "vue3-print-nb": "^0.1.4",
     "vue3-signature": "^0.2.4",
     "vuedraggable": "^4.1.0",
+    "vxe-gantt": "^4.7.2",
+    "vxe-pc-ui": "^4.18.1",
+    "vxe-table": "^4.21.5",
     "web-storage-cache": "^1.1.1",
     "xml-js": "^1.6.11"
   },

pnpm-lock.yaml

@@ -182,6 +182,15 @@ importers:
       vuedraggable:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.12(typescript@5.3.3))
+      vxe-gantt:
+        specifier: ^4.7.2
+        version: 4.7.2
+      vxe-pc-ui:
+        specifier: ^4.18.1
+        version: 4.18.1(vue@3.5.12(typescript@5.3.3))
+      vxe-table:
+        specifier: ^4.21.5
+        version: 4.21.5
       web-storage-cache:
         specifier: ^1.1.1
         version: 1.1.1
@@ -2291,6 +2300,11 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
+  '@vxe-ui/core@4.4.21':
+    resolution: {integrity: sha512-xaKGhQxrSU3G7+cQbxMBSzNXiWliRDgtR5GmD/FD9f5tl8e9SuZLe2SfODjItp6oBvBkKI2TXBZiCx502WftyA==}
+    peerDependencies:
+      vue: ^3.2.0
+
   '@wangeditor-next/basic-modules@1.5.46':
     resolution: {integrity: sha512-q8/al99P7+koPTJ+X79WjrEP5pDXs8+vFYo0pIbs59Oi1cM1b9CCB0384Mdcg0DQU7eZrN7dl2bHKO5Z5r7E8g==}
     peerDependencies:
@@ -3043,6 +3057,9 @@ packages:
   dom-walk@0.1.2:
     resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
 
+  dom-zindex@1.0.7:
+    resolution: {integrity: sha512-cKU/h8v8IPBgdZOTPbPmq3Ib+Ac5C+kKoh9I4LbGR9BM3GwbmB16KYWKJcj5M2BavnA66EbgYzxYDLd1IytnlQ==}
+
   dom7@4.0.6:
     resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
 
@@ -5111,6 +5128,15 @@ packages:
     peerDependencies:
       vue: ^3.0.1
 
+  vxe-gantt@4.7.2:
+    resolution: {integrity: sha512-iIfX/xtDdheEMWko2QcPtl9bYUPVCYMvVRpsYtMuknNXf3eK/BtOnk8hVYjhY1vszhOjoTPkqIdhMXeV5z7I3A==}
+
+  vxe-pc-ui@4.18.1:
+    resolution: {integrity: sha512-QIIu1gzn/cx8uyqSr1E7XQUqH9XAuFov2ikkuMJfSf8S3UaUyJ2w+wjogtITp7+o7O0WOKRW14XuN3PjBOMrDA==}
+
+  vxe-table@4.21.5:
+    resolution: {integrity: sha512-/jbJ5JZJ27nW84rQ65Xrxm7atn3f+kaSjY2TE//L2fTT/5q9/VJ9t/qg8UbceUERHi+TmxXOr7V1C9aUud79JQ==}
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -5171,6 +5197,9 @@ packages:
     resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  xe-utils@4.0.13:
+    resolution: {integrity: sha512-hIxQ3LQv/WF0DyeNsZ7VclX5+n5CKoUJ3DG76GFtuAnVQ/NaSv3MKmyZ6MD73wfSdzZBcziV8wcas8GRNSYMwg==}
+
   xml-js@1.6.11:
     resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==}
     hasBin: true
@@ -7591,6 +7620,12 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vxe-ui/core@4.4.21(vue@3.5.12(typescript@5.3.3))':
+    dependencies:
+      dom-zindex: 1.0.7
+      vue: 3.5.12(typescript@5.3.3)
+      xe-utils: 4.0.13
+
   '@wangeditor-next/basic-modules@1.5.46(@wangeditor-next/core@1.7.45(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.82.1)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.82.1)(snabbdom@3.6.2)':
     dependencies:
       '@wangeditor-next/core': 1.7.45(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.82.1)(snabbdom@3.6.2)
@@ -8415,6 +8450,8 @@ snapshots:
 
   dom-walk@0.1.2: {}
 
+  dom-zindex@1.0.7: {}
+
   dom7@4.0.6:
     dependencies:
       ssr-window: 4.0.2
@@ -10570,6 +10607,16 @@ snapshots:
       sortablejs: 1.14.0
       vue: 3.5.12(typescript@5.3.3)
 
+  vxe-gantt@4.7.2: {}
+
+  vxe-pc-ui@4.18.1(vue@3.5.12(typescript@5.3.3)):
+    dependencies:
+      '@vxe-ui/core': 4.4.21(vue@3.5.12(typescript@5.3.3))
+    transitivePeerDependencies:
+      - vue
+
+  vxe-table@4.21.5: {}
+
   w3c-keyname@2.2.8: {}
 
   wangeditor@4.7.15:
@@ -10634,6 +10681,8 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
+  xe-utils@4.0.13: {}
+
   xml-js@1.6.11:
     dependencies:
       sax: 1.4.1

src/main.ts

@@ -47,6 +47,13 @@ import { setupWangEditorPlugin } from '@/views/bpm/model/form/PrintTemplate'
 
 import print from 'vue3-print-nb' // 打印插件
 
+import VxeUIBase from 'vxe-pc-ui'
+import 'vxe-pc-ui/es/style.css'
+import VxeUITable from 'vxe-table'
+import 'vxe-table/es/style.css'
+import VxeGantt from 'vxe-gantt'
+import 'vxe-gantt/es/style.css'
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
@@ -76,6 +83,7 @@ const setupAll = async () => {
 
   // 打印
   app.use(print)
+  app.use(VxeUIBase).use(VxeUITable).use(VxeGantt)
 
   app.mount('#app')
 }

src/views/researchProject/wbs/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <vxe-gantt v-bind="ganttOptions" />
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+const ganttOptions = reactive({
+  border: true,
+  height: 600,
+  columns: [
+    { field: 'name', title: '任务名称', minWidth: 200 },
+    { field: 'start', title: '开始时间', width: 100 },
+    { field: 'end', title: '结束时间', width: 100 }
+  ],
+  data: [
+    { id: 10001, name: '任务R790', start: '2024-03-01', end: '2024-03-04', progress: 3 },
+    { id: 10002, name: '任务C30456572349', start: '2024-03-03', end: '2024-03-08', progress: 10 },
+    { id: 10003, name: '任务E563', start: '2024-03-03', end: '2024-03-11', progress: 90 },
+    { id: 10004, name: '任务P687', start: '2024-03-05', end: '2024-03-11', progress: 15 },
+    { id: 10005, name: '任务L8412430903', start: '2024-03-08', end: '2024-03-15', progress: 100 },
+    { id: 10006, name: '任务B567', start: '2024-03-10', end: '2024-03-21', progress: 5 },
+    { id: 10007, name: '任务V513802134450', start: '2024-03-15', end: '2024-03-24', progress: 70 },
+    { id: 10008, name: '任务G110', start: '2024-03-20', end: '2024-03-29', progress: 50 },
+    { id: 10009, name: '任务I802', start: '2024-03-19', end: '2024-03-20', progress: 5 },
+    { id: 10010, name: '任务K778', start: '2024-03-12', end: '2024-03-20', progress: 10 }
+  ]
+})
+</script>