feat: ✨支持深层获取属性的 prop

xpyjs · May 12, 2023 · d39a98b · d39a98b
1 parent d58b8a5
commit d39a98b
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 14 deletions.
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -52,8 +52,8 @@
         ellipsis
       />
 
-      <x-gantt-slider prop="name" :move="onMove" resize-left resize-right>
-        <template #content="scope">
+      <x-gantt-slider prop="o.t1" :move="onMove" resize-left resize-right>
+        <!-- <template #content="scope">
           <div
             style="
               width: 100%;
@@ -64,7 +64,7 @@
           >
             {{ scope.level }}
           </div>
-        </template>
+        </template> -->
 
         <template #left>
           <div style="width: 4px; height: 100%; background-color: aqua"></div>
@@ -101,19 +101,22 @@ ganttData[0].children = [
     index: ++id,
     name: 'sub-t' + id,
     startDate: new Date(2023, 3, 1),
-    endDate: new Date(2023, 3, 5)
+    endDate: new Date(2023, 3, 5),
+    o: { t1: 'a', t2: 'b' }
   },
   {
     index: ++id,
     name: 'sub-t' + id,
     startDate: new Date(2023, 3, 1),
     endDate: new Date(2023, 3, 5),
+    o: { t1: 'a', t2: 'b' },
     children: [
       {
         index: ++id,
         name: 'sub-sub-t' + id,
         startDate: new Date(2023, 3, 1),
-        endDate: new Date(2023, 3, 5)
+        endDate: new Date(2023, 3, 5),
+        o: { t1: 'a', t2: 'b' }
       }
     ]
   }
@@ -149,7 +152,8 @@ function onAdd() {
     index: ++id,
     name: 't' + id,
     startDate: new Date(2023, 3, id),
-    endDate: new Date(2023, 3, id + 5)
+    endDate: new Date(2023, 3, id + 5),
+    o: { t1: 'a', t2: 'b' }
   });
 }
 

diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -64,12 +64,12 @@ watch(
   }
 );
 
-const originData = computed(
-  () => props.data?.data?.[props.prop ?? ''] ?? props.emptyData
-);
-
 const { $styleBox, rowHeight } = useStyle();
-const { toRowData } = useData();
+const { toRowData, getProp } = useData();
+
+const originData = computed(() =>
+  getProp(props.data!, props.prop, props.emptyData)
+);
 
 // #region 计算宽度
 const { $slotsBox, isMerge } = useSlotsBox();

diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
@@ -121,12 +121,12 @@ const height = computed(() => {
   return props.height;
 });
 
+const { toRowData, getProp } = useData();
 const originData = computed(
-  () => props.label || (props.data?.data?.[props.prop ?? ''] ?? props.emptyData)
+  () => props.label || getProp(props.data!, props.prop, props.emptyData)
 );
 
 // #region 计算滑块位置
-const { toRowData } = useData();
 const { ganttHeader } = useGanttHeader();
 const { ganttColumnWidth, currentMillisecond } = useGanttWidth();
 const sliderLeft = computed(
@@ -302,10 +302,20 @@ function onOutAnchorDown() {
 
     .xg-slider-resize.left {
       left: 0;
+
+      .resize-chunk {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
     }
 
     .xg-slider-resize.right {
       right: 0;
+
+      .resize-chunk {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
     }
   }
 

diff --git a/src/composables/useData.ts b/src/composables/useData.ts
@@ -1,6 +1,8 @@
 import type rootProps from '@/components/root/rootProps';
+import Variables from '@/constants/vars';
 import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
+import { isString } from 'lodash';
 import { computed, type ExtractPropTypes, toRaw, watch, type Ref } from 'vue';
 import useGanttHeader from './useGanttHeader';
 
@@ -64,11 +66,25 @@ export default () => {
     store.$links.update(store.$data.flatData);
   }
 
+  function getProp(data: RowItem, prop?: string, empty?: string) {
+    if (isString(prop)) {
+      if (prop in data.data) return data.data[prop];
+      if (prop.includes('.')) {
+        const [l, ...rest] = prop.split('.');
+        if (l in data.data)
+          return rest.reduce((acc, v) => acc[v], data.data[l]);
+      }
+    }
+
+    return empty ?? Variables.noData;
+  }
+
   return {
     $data: store.$data,
     initData,
     dateList: computed(() => store.ganttHeader.headers),
     toRowData,
-    flattenData
+    flattenData,
+    getProp
   };
 };