Special handling of primary key columns.

src/components/conf.ts

@@ -1,13 +1,14 @@
 import * as iconSvg from '../assets/icon'
 import locales from '../locales'
-import type { AggregateKind, TableDataFilterReq, TableDataGroupReq, TableDataGroupResp, TableDataResp, TableDataSliceReq, TableDataSortReq, TableProps } from './props'
+import type { AggregateKind, TableDataFilterReq, TableDataGroupReq, TableDataGroupResp, TableDataResp, TableDataSortReq, TableProps } from './props'
 import { DataKind, LayoutKind, OperatorKind, SizeKind } from './props'
 
 const { t } = locales.global
 
 export interface TableBasicConf {
   tableId: string
   pkColumnName: string
+  parentPkColumnName?: string
   columns: TableColumnConf[]
   styles: TableStyleConf
 }
@@ -33,7 +34,8 @@ export interface TableLayoutConf {
   sorts?: TableDataSortReq[]
   group?: TableDataGroupReq
   aggs?: { [key: string]: AggregateKind }
-  slice?: TableDataSliceReq
+  expandDataPks: any[]
+  fetchDataNumber: number
   data?: TableDataResp | TableDataGroupResp[]
 }
 
@@ -204,6 +206,7 @@ export function initConf(props: TableProps): [TableBasicConf, TableLayoutConf[]]
   const basicConf = {
     tableId: props.tableId ?? `iw-table${Math.floor(Math.random() * 1000000)}`,
     pkColumnName: props.pkColumnName,
+    parentPkColumnName: props.parentPkColumnName,
     columns: props.columns.map((column) => {
       return {
         name: column.name,
@@ -249,6 +252,8 @@ export function initConf(props: TableProps): [TableBasicConf, TableLayoutConf[]]
         sorts: layout.sorts,
         group: layout.group,
         aggs: layout.aggs,
+        expandDataPks: layout.expandDataPks ?? [],
+        fetchDataNumber: layout.fetchDataNumber ?? 20,
       })
     })
   }
@@ -263,8 +268,34 @@ export function initConf(props: TableProps): [TableBasicConf, TableLayoutConf[]]
       }),
       filters: [],
       sorts: [],
+      expandDataPks: [],
+      fetchDataNumber: 20,
     })
   }
+  layoutsConf.forEach((layout) => {
+    // Make sure the primary key is in the first column
+    const pkIdx = layout.columns.findIndex(column => column.name === basicConf.pkColumnName)
+    if (pkIdx !== -1) {
+      const pkColumn = layout.columns[pkIdx]!
+      pkColumn.dateEnd = false
+      pkColumn.dateStart = false
+      pkColumn.hide = false
+      pkColumn.wrap = false
+      layout.columns.splice(pkIdx, 1)
+      layout.columns.splice(0, 0, pkColumn)
+    }
+    else {
+      layout.columns.splice(0, 0, {
+        name: basicConf.columns.find(column => column.name === basicConf.pkColumnName)!.name,
+        wrap: false,
+        fixed: false,
+        width: 200,
+        hide: false,
+        dateStart: false,
+        dateEnd: false,
+      })
+    }
+  })
   return [basicConf, layoutsConf]
 }
 

src/components/layout/list/CellWrap.vue

@@ -8,6 +8,7 @@ import * as iconSvg from '../../../assets/icon'
 const props = defineProps<{
   curColumnConf: CachedColumnConf | undefined
   columnsConf: CachedColumnConf[]
+  pkColumnName: string
 }>()
 const modifyColumnFun = inject(FUN_MODIFY_COLUMN_TYPE)!
 const closeContextMenuFun = inject(FUN_CLOSE_CONTEXT_MENU_TYPE)!
@@ -22,7 +23,7 @@ async function setWrapColumn() {
 </script>
 
 <template>
-  <div class="flex justify-between items-center w-full  ml-2">
+  <div v-if="props.curColumnConf?.name !== props.pkColumnName" class="flex justify-between items-center w-full  ml-2">
     <span>
       <i :class="iconSvg.WRAP" />
       <span> {{ $t('list.cellWrap.title') }}</span>

src/components/layout/list/ColumnHide.vue

@@ -8,6 +8,7 @@ import * as iconSvg from '../../../assets/icon'
 const props = defineProps<{
   curColumnConf: CachedColumnConf | undefined
   columnsConf: CachedColumnConf[]
+  pkColumnName: string
 }>()
 const modifyColumnFun = inject(FUN_MODIFY_COLUMN_TYPE)!
 const closeContextMenuFun = inject(FUN_CLOSE_CONTEXT_MENU_TYPE)!
@@ -22,7 +23,7 @@ async function setHidedColumn() {
 </script>
 
 <template>
-  <div class="cursor-pointer ml-1 mr-1" @click="setHidedColumn">
+  <div v-if="props.curColumnConf?.name !== props.pkColumnName" class="cursor-pointer ml-1 mr-1" @click="setHidedColumn">
     <i :class="iconSvg.HIDE" />
     {{ $t('list.columnHide.title') }}
   </div>

src/components/layout/list/ColumnSort.vue

@@ -12,7 +12,7 @@ const modifyLayoutFun = inject(FUN_MODIFY_LAYOUT_TYPE)!
 
 onMounted(() => {
   Sortable.create(document.getElementsByClassName('iw-list-header')[0] as HTMLElement, {
-    draggable: '.iw-list-header-cell',
+    draggable: '.iw-list-header-normal-cell',
     async onEnd(evt) {
       if (evt.oldIndex !== evt.newIndex) {
         const changedLayoutReq: TableLayoutModifyReq = {

src/components/layout/list/Header.vue

@@ -44,7 +44,7 @@ async function showColumnMoreContextMenu(event: MouseEvent) {
   >
     <div
       v-for="(column, colIdx) in columnsConf" :key="column.name"
-      :class="`${props.basic.styles.cellClass} iw-list-cell iw-list-header-cell flex items-center bg-base-100 border-solid border-b border-b-base-300 border-l border-l-base-300 hover:cursor-pointer hover:bg-base-200`"
+      :class="`${props.basic.styles.cellClass} iw-list-cell iw-list-header-cell ${column.name !== props.basic.pkColumnName ? 'iw-list-header-normal-cell' : ''} flex items-center bg-base-100 border-solid border-b border-b-base-300 border-l border-l-base-300 hover:cursor-pointer hover:bg-base-200`"
       :data-column-name="column.name"
       :style="props.setColumnStyles(colIdx)"
       @click="(event: MouseEvent) => showHeaderContextMenu(event, column.name)"
@@ -69,7 +69,7 @@ async function showColumnMoreContextMenu(event: MouseEvent) {
       class="iw-contextmenu__item flex justify-between w-full p-1 mb-1 mt-1"
     >
       <ColumnCopyComp :cur-column-conf="selectedColumnConf" :columns-conf="columnsConf" />
-      <ColumnHideComp :cur-column-conf="selectedColumnConf" :columns-conf="columnsConf" />
+      <ColumnHideComp :cur-column-conf="selectedColumnConf" :pk-column-name="props.basic.pkColumnName" :columns-conf="columnsConf" />
       <ColumnDeleteComp
         :cur-column-conf="selectedColumnConf"
         :pk-column-name="props.basic.pkColumnName"
@@ -79,7 +79,7 @@ async function showColumnMoreContextMenu(event: MouseEvent) {
       class="iw-contextmenu__item flex justify-between w-full p-1"
     >
       <ColumnFixedComp :cur-column-conf="selectedColumnConf" :columns-conf="columnsConf" />
-      <CellWrapComp :cur-column-conf="selectedColumnConf" :columns-conf="columnsConf" />
+      <CellWrapComp :cur-column-conf="selectedColumnConf" :pk-column-name="props.basic.pkColumnName" :columns-conf="columnsConf" />
     </div>
     <ColumnDictComp :cur-column-conf="selectedColumnConf" :columns-conf="columnsConf" />
   </MenuComp>

src/components/layout/list/Rows.vue

@@ -1,29 +1,44 @@
 <script setup lang="ts">
 import type { CachedColumnConf, TableStyleConf } from '../../conf'
 import { DATA_DICT_POSTFIX } from '../../props'
+import RowTreeComp from '../../function/RowTree.vue'
 
 const props = defineProps<{
   records: { [key: string]: any }[]
   pkColumnName: string
+  parentPkColumnName?: string
+  expandDataPks: any[]
   columnsConf: CachedColumnConf[]
   stylesConf: TableStyleConf
   setColumnStyles: (colIdx: number) => any
   openContextMenuFun: (event: MouseEvent) => void
 }>()
+
+const columnsConfWithoutPk = props.columnsConf.filter(column => column.name !== props.pkColumnName)
 </script>
 
 <template>
   <div
-    v-for="(row) in props.records" :key="row[props.pkColumnName]" :data-pk="row[props.pkColumnName]"
+    v-for="(row, idx) in props.records" :key="row[props.pkColumnName]"
+    :data-pk="row[props.pkColumnName]"
+    :hidden="props.parentPkColumnName && row[props.parentPkColumnName] && props.expandDataPks.indexOf(row[props.parentPkColumnName]) === -1"
     :class="`${props.stylesConf.rowClass} iw-list-row iw-list-data-row flex border-r border-r-base-300`"
   >
-    <template v-for="(column, colIdx) in props.columnsConf" :key="column.name">
+    <!-- TODO openContextMenuFun 改成代理 -->
+    <div
+      :class="`${props.stylesConf.cellClass} iw-list-cell iw-list-data-cell flex items-center iw-list-data-row--unselected border-solid border-b border-b-base-300 border-l border-l-base-300 whitespace-nowrap flex-nowrap`"
+      :data-column-name="props.pkColumnName" :style="props.setColumnStyles(0)" @contextmenu.prevent="openContextMenuFun"
+    >
+      <!-- <RowTreeComp v-if="props.parentPkColumnName" :cur-data="row" :next-data="props.records[idx + 1]" :pk-column-name="props.pkColumnName" :parent-pk-column-name="props.parentPkColumnName!" :expand-data-pks="expandDataPks" /> -->
+      <div>{{ row[props.pkColumnName] }}</div>
+    </div>
+    <template v-for="(column, colIdx) in columnsConfWithoutPk" :key="column.name">
       <div
         :class="`${props.stylesConf.cellClass} iw-list-cell iw-list-data-cell flex items-center iw-list-data-row--unselected border-solid border-b border-b-base-300 border-l border-l-base-300 ${column.wrap ? 'break-words flex-wrap' : 'whitespace-nowrap overflow-hidden text-ellipsis flex-nowrap'}`"
-        :data-column-name="column.name" :style="props.setColumnStyles(colIdx)" @contextmenu.prevent="openContextMenuFun"
+        :data-column-name="column.name" :style="props.setColumnStyles(colIdx + 1)"
       >
         <template v-if="!column.useDict">
-          {{ row[column.name] }}
+          <div>{{ row[column.name] }}</div>
         </template>
         <template v-else>
           <div