docs(docs): 📃 更新文档

xpyjs · Jun 12, 2023 · 7aa0b5e · 7aa0b5e
1 parent 9daa076
commit 7aa0b5e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/demo/App.vue b/demo/App.vue
@@ -49,6 +49,7 @@
         :data="dataList"
         :unit="unit"
         :links="linkList"
+        :draggable="draggable"
         :header-style="headerStyle"
         :body-style="bodyStyle"
         :level-color="levelColor"
@@ -187,6 +188,7 @@
     <button @click="() => (showWeekend = !showWeekend)">显示weekend</button>
     <button @click="() => (showToday = !showToday)">显示today</button>
     <button @click="() => (showExpand = !showExpand)">显示expand</button>
+    <button @click="() => (draggable = !draggable)">拖拽</button>
     <button @click="setSelected">设置选择</button>
     <button @click="jumpTo">跳转到</button>
     <input type="range" name="" id="" min="20" max="70" v-model="rowHeight1" />
@@ -417,6 +419,7 @@ export default defineComponent({
       showWeekend: true,
       showToday: true,
       showExpand: true,
+      draggable: false,
       levelColor: ['azure', 'cornsilk'] as string[],
       headerStyle: {
         bgColor: '',
@@ -434,7 +437,7 @@ export default defineComponent({
       unit: 'day',
 
       isDark2: false,
-      dataList2: [] as any[],
+      dataList2: reactive([]) as any[],
       linkList2: reactive([]) as any[],
       rowHeight2: 30,
       showCheckbox2: true,
@@ -501,7 +504,7 @@ export default defineComponent({
           a: 'aaa',
           b: 'bbb'
         },
-        name: '我的数据: ' + s
+        name: '我的数据: ' + INDEX
       });
       if (s > 30) s = 2;
       if (e > 30) e = 5;
@@ -521,7 +524,7 @@ export default defineComponent({
           id: INDEX++,
           startTime: `2023-08-${s++}`,
           endTime: `2023-08-${e++}`,
-          name: '子数据: ' + s,
+          name: '子数据: ' + INDEX,
           ttt: {
             a: 's-aaa',
             b: 's-bbb'
@@ -546,7 +549,7 @@ export default defineComponent({
           id: INDEX++,
           startTime: `2023-08-${s++}`,
           endTime: `2023-08-${e++}`,
-          name: '孙数据: ' + s,
+          name: '孙数据: ' + INDEX,
           ttt: {
             a: 'gs-aaa',
             b: 'gs-bbb'

diff --git a/demo/demo.vue b/demo/demo.vue
@@ -13,6 +13,7 @@
       :show-weekend="true"
       :unit="(unit as any)"
       :dark="isDark"
+      :draggable="draggable"
       @row-click="onClickRow"
       @row-dbl-click="onDblClickRow"
       @row-checked="onCheckedRow"
@@ -102,6 +103,7 @@
     <button @click="onReduce">减少</button>
     <button @click="onEmpty">清空</button>
     <button @click="onReload">重新赋值</button>
+    <button @click="() => (draggable = !draggable)">拖拽</button>
     <button @click="onExpand">{{ showExpand ? '隐藏' : '展示' }}</button>
     <button @click="onExpandAll">
       {{ expandAll ? '闭合' : '展开' }}
@@ -113,7 +115,7 @@
     <button @click="setDark">{{ isDark ? '浅色' : '深色' }}</button>
   </div>
 
-  <div style="width: 100%; height: 400px; margin-top: 50px">
+  <!-- <div style="width: 100%; height: 400px; margin-top: 50px">
     <x-gantt
       data-id="index"
       :data="ganttData2"
@@ -145,7 +147,7 @@
 
       <x-gantt-slider prop="o.t1" :allow-link="false"> </x-gantt-slider>
     </x-gantt>
-  </div>
+  </div> -->
 </template>
 
 <script setup lang="ts">
@@ -166,7 +168,7 @@ ganttData[0].children = [
     index: ++id,
     name: 'sub-t' + id,
     startDate: new Date(2023, 3, 5),
-    endDate: new Date(2023, 3, 10),
+    endDate: new Date(2023, 3, 5, 23, 59, 59),
     progress: 0.8,
     o: { t1: 'a', t2: 'b' }
   },
@@ -217,6 +219,8 @@ const ganttLinks = reactive([
   }
 ]);
 
+const draggable = ref(false);
+
 const showExpand = ref(true);
 function onExpand() {
   showExpand.value = !showExpand.value;
@@ -384,17 +388,17 @@ for (let i = 0; i < 10; i++) {
 //   }
 // ];
 
-const onClickRow2 = (data: any) => {
-  console.log('click row', data);
-};
+// const onClickRow2 = (data: any) => {
+//   console.log('click row', data);
+// };
 
-const onDblClickRow2 = (data: any) => {
-  console.log('dblclick row', data);
-};
+// const onDblClickRow2 = (data: any) => {
+//   console.log('dblclick row', data);
+// };
 
-const onCheckedRow2 = (state: boolean, data: any) => {
-  console.log('checked row', state, data);
-};
+// const onCheckedRow2 = (state: boolean, data: any) => {
+//   console.log('checked row', state, data);
+// };
 
 // const onMoveSlider2 = (data: any) => {
 //   console.log('move slider', data);

diff --git a/docs/docs/root.md b/docs/docs/root.md
@@ -200,6 +200,20 @@ const ganttLinks = reactive([
 
 :::
 
+### draggable <Badge text="新增2.1.0+" type="tip" /> <Badge text="预览功能" type="warning" />
+
+<DataParameter t="Boolean | { level: 'all' | 'current' }" d="false" />
+
+::: warning 注意
+
+这是一个预览功能，如果出现任何 bug，或者您希望有所改进，欢迎给我们提出 [issue](https://github.com/xpyjs/gantt/issues)
+
+:::
+
+开启该属性，允许对甘特图中的每行任务进行拖拽排序。默认情况下，仅允许拖拽同层内容的顺序。如果需要任意层级的拖拽时，可以传递一个对象，将参数配置为：`{ level: 'all' }` 即可。
+
+它允许您将数据任意排序，但不允许拖拽具有子父关系的数据。
+
 ### header-height
 
 <DataParameter t="Number | String" d="80" />