feat: ✨add selection

xpyjs · Apr 23, 2023 · ba22406 · ba22406
1 parent a03064e
commit ba22406
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 60 deletions.
diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -2,6 +2,7 @@
   <div
     class="xg-table-cell"
     :style="{
+      // width: `${props.__index === 0 ? firstColumnWidth : realWidth}px`,
       width: `${realWidth}px`,
       ...$styleBox.getBorderColor()
     }"
@@ -10,47 +11,22 @@
       class="cell"
       :style="{ lineHeight: `${rowHeight}px`, height: `${rowHeight}px` }"
     >
-      <div class="level-block" :style="{ width: `${data!.level * 20}px` }" />
-
-      <div
-        v-if="props.__index === 0 && !!data?.children?.length"
-        :class="['expand-icon', { 'expand-icon__expanded': data?.isExpand }]"
-        @click="
-          () => {
-            data?.setExpand(!data.isExpand);
-            $data.updateFlatData();
-          }
-        "
-      >
-        <svg
-          t="1682094638676"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="1386"
-          :width="`${rowHeight / 2}px`"
-          :height="`${rowHeight / 2}px`"
-        >
-          <path
-            d="M384 210.773333l278.613333 278.613334a32 32 0 0 1 0 45.226666L384 813.226667 338.773333 768l256-256-256-256L384 210.773333z"
-            p-id="1387"
-            fill="#9f9f9f"
-          ></path>
-        </svg>
-      </div>
-
-      <div
-        v-else
-        class="expand-icon"
-        :style="{ width: `${rowHeight / 2}px` }"
+      <SelectionVue
+        v-if="props.__index === 0"
+        :data="data"
+        :indent="20"
+        :show-checkbox="$styleBox.showCheckbox"
       />
 
+      <!-- <template v-else> -->
+      <!-- <div class="expand-icon" :style="{ width: `${rowHeight / 2}px` }" /> -->
+
       <slot v-if="slots.default" v-bind="props.data?.data" />
 
       <template v-else-if="props.prop">{{
         props.data?.data?.[props.prop]
       }}</template>
+      <!-- </template> -->
     </div>
   </div>
 </template>
@@ -61,7 +37,8 @@ import columnProps from './props';
 import { defineComponent, useSlots, computed } from 'vue';
 import useStyle from '@/composables/useStyle';
 import useSlotsBox from '@/composables/useSlotsBox';
-import useData from '@/composables/useData';
+import SelectionVue from './selection.vue';
+// import useData from '@/composables/useData';
 
 export default defineComponent({
   name: Variables.name.column
@@ -74,8 +51,6 @@ const slots = useSlots();
 const { $styleBox, rowHeight } = useStyle();
 const { $slotsBox, isMerge } = useSlotsBox();
 
-const { $data } = useData();
-
 const realWidth = computed(() => {
   let curWidth = $slotsBox.tableHeaders.leafs[props!.__index ?? 1].width;
 
@@ -91,8 +66,12 @@ const realWidth = computed(() => {
 
   return curWidth;
 });
-// TODO: 合并列通过这个实现
-// const colspan = ref(1);
+
+// 计算第一列的宽度。选择框 + 层级递进
+// const { $data } = useData();
+// const firstColumnWidth = computed(() => {
+//   return ($styleBox.showCheckbox ? 30 : 0) + $data.level * 20;
+// });
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/column/selection.vue b/src/components/column/selection.vue
@@ -1,33 +1,60 @@
 <template>
+  <div class="level-block" :style="{ width: `${data!.level * indent}px` }" />
+
   <div
-    class="xg-table-cell"
-    :style="{
-      width: '30px',
-      ...$styleBox.getBorderColor()
-    }"
+    v-if="!!data?.children?.length"
+    :class="['expand-icon', { 'expand-icon__expanded': data?.isExpand }]"
+    @click="
+      () => {
+        data?.setExpand(!data.isExpand);
+        $data.updateFlatData();
+      }
+    "
   >
-    <div
-      class="cell"
-      :style="{ lineHeight: `${rowHeight}px`, height: `${rowHeight}px` }"
+    <svg
+      t="1682094638676"
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="1386"
+      :width="`${rowHeight / 2}px`"
+      :height="`${rowHeight / 2}px`"
     >
-      <input v-model="checked" type="checkbox" />
-    </div>
+      <path
+        d="M384 210.773333l278.613333 278.613334a32 32 0 0 1 0 45.226666L384 813.226667 338.773333 768l256-256-256-256L384 210.773333z"
+        p-id="1387"
+        fill="#9f9f9f"
+      ></path>
+    </svg>
   </div>
+
+  <input v-if="showCheckbox" v-model="checked" type="checkbox" />
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { PropType, ref } from 'vue';
 import useStyle from '@/composables/useStyle';
-import Variables from '@/constants/vars';
+import useData from '@/composables/useData';
+import RowItem from '@/models/data/row';
+const { rowHeight } = useStyle();
+const checked = ref(false);
 
-export default defineComponent({
-  name: Variables.name.column
+defineProps({
+  data: {
+    type: Object as PropType<RowItem>,
+    default: () => ({})
+  },
+  indent: {
+    type: Number,
+    default: 20
+  },
+  showCheckbox: {
+    type: Boolean,
+    default: false
+  }
 });
-</script>
-
-<script lang="ts" setup>
-const { $styleBox, rowHeight } = useStyle();
-const checked = ref(false);
+const { $data } = useData();
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/common/TableHeaderTh.vue b/src/components/common/TableHeaderTh.vue
@@ -4,7 +4,7 @@
     :class="[
       'xg-table-header-cell',
       {
-        'cell-resizable': !props.column.isLast
+        'cell-resizable': !props.column.isLast && index !== 0
       }
     ]"
     :style="{ ...$styleBox.getBorderColor() }"

diff --git a/src/models/param/slotsBox.ts b/src/models/param/slotsBox.ts
@@ -1,5 +1,6 @@
 import Variables from '@/constants/vars';
 import SliderVue from '@/components/slider/index.vue';
+// import ColumnVue from '@/components/column/index.vue';
 import { type Component, type VNode, h, type Slots } from 'vue';
 import { TableHeader } from './header';
 
@@ -77,6 +78,8 @@ export default class SlotsBox {
       s = slots;
     }
 
+    // s.unshift(h(ColumnVue, { width: 0 }));
+
     // 1、slots.default 应该只包含 x-gantt-column 和 x-gantt-slider
     if (s.length > 0) {
       let index = 0;