feat: ✨添加初始化数据的 options

xpyjs · May 11, 2023 · b426863 · b426863
1 parent 45b15fe
commit b426863
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -1,8 +1,13 @@
 <template>
   <div style="top: 20vh; width: 100%; height: 500px">
-    <x-gantt :data="ganttData" :links="ganttLinks" @row-click="onClickRow">
+    <x-gantt
+      data-id="index"
+      :data="ganttData"
+      :links="ganttLinks"
+      @row-click="onClickRow"
+    >
       <x-gantt-column label="group1">
-        <x-gantt-column prop="id" width="150px"></x-gantt-column>
+        <x-gantt-column prop="index" width="120px"></x-gantt-column>
         <!-- <x-gantt-column label="group2">
           <x-gantt-column
             prop="name"
@@ -60,19 +65,19 @@ for (let i = 0; i < 50; i++) {
 
 ganttData[0].children = [
   {
-    id: ++id,
+    index: ++id,
     name: 'sub-t' + id,
     startDate: new Date(2023, 3, 1),
     endDate: new Date(2023, 3, 5)
   },
   {
-    id: ++id,
+    index: ++id,
     name: 'sub-t' + id,
     startDate: new Date(2023, 3, 1),
     endDate: new Date(2023, 3, 5),
     children: [
       {
-        id: ++id,
+        index: ++id,
         name: 'sub-sub-t' + id,
         startDate: new Date(2023, 3, 1),
         endDate: new Date(2023, 3, 5)
@@ -83,20 +88,20 @@ ganttData[0].children = [
 
 const ganttLinks = [
   {
-    id: 1,
+    index: 1,
     from: 1,
     to: 2
   },
   {
-    id: 2,
+    index: 2,
     from: 2,
-    to: 3
+    to: 5
   }
 ];
 
 function onAdd() {
   ganttData.push({
-    id: ++id,
+    index: ++id,
     name: 't' + id,
     startDate: new Date(2023, 3, id),
     endDate: new Date(2023, 3, id + 5)

diff --git a/src/components/root/index.vue b/src/components/root/index.vue
@@ -131,7 +131,7 @@ const { tableWidth } = useTableWidth();
 const { data, links } = toRefs(props);
 
 const { initData } = useData();
-initData(data);
+initData(data, props);
 
 const { initLinks } = useLinks();
 initLinks(links);

diff --git a/src/composables/useData.ts b/src/composables/useData.ts
@@ -7,17 +7,23 @@ export default () => {
   const store = useStore();
   const { setGanttHeaders } = useGanttHeader();
 
-  // TODO 这里还需要加 options 的监听
-  function initData(data: Ref<any[]>) {
-    store.$data.init(data.value);
+  function initData(data: Ref<any[]>, props: any) {
+    const options: DataOptions = {
+      dataId: props.dataId,
+      isExpand: !props.showExpand || props.expandAll,
+      startLabel: props.startKey,
+      endLabel: props.endKey
+    };
+
+    store.$data.init(data.value, options);
 
     setGanttHeaders();
 
     watch(
       () => data,
       val => {
         // 更新数据
-        store.$data.update(val.value);
+        store.$data.update(val.value, options);
 
         setGanttHeaders();
       },