Add row adding function.

components.d.ts

@@ -22,14 +22,15 @@ declare module 'vue' {
     ColumnRename: typeof import('./src/components/layout/list/ColumnRename.vue')['default']
     ColumnResize: typeof import('./src/components/layout/list/ColumnResize.vue')['default']
     ColumnSort: typeof import('./src/components/layout/list/ColumnSort.vue')['default']
-    copy: typeof import('./src/components/layout/list/RowSelect copy.vue')['default']
+    copy: typeof import('./src/components/layout/list/RowDelete copy.vue')['default']
     Filter: typeof import('./src/components/function/Filter.vue')['default']
     Group: typeof import('./src/components/function/Group.vue')['default']
     Header: typeof import('./src/components/layout/list/Header.vue')['default']
     IconPicker: typeof import('./src/components/common/IconPicker.vue')['default']
     List: typeof import('./src/components/layout/list/List.vue')['default']
     Menu: typeof import('./src/components/common/Menu.vue')['default']
     Resize: typeof import('./src/components/function/Resize.vue')['default']
+    RowAdd: typeof import('./src/components/layout/list/RowAdd.vue')['default']
     RowDelete: typeof import('./src/components/layout/list/RowDelete.vue')['default']
     Rows: typeof import('./src/components/layout/list/Rows.vue')['default']
     RowSelect: typeof import('./src/components/layout/list/RowSelect.vue')['default']

docs/TableDemo.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TableCellDictItem, TableColumnProps, TableDataSliceReq, TableLayoutModifyReq, TableLayoutProps, TableStyleProps } from '../src/components/props'
 import { AggregateKind, DATA_DICT_POSTFIX, DataKind, LayoutKind } from '../src/components/props'
+import { getRandomInt } from '../src/utils/basic'
 
 const columns = [{ name: 'no', dataKind: DataKind.NUMBER, dataEditable: false }, { name: 'name', useDict: true, dictEditable: true }, { name: 'phone' }, { name: 'stats', useDict: true, dictEditable: true, multiValue: true }, { name: 'addr' }, { name: 'time', dataKind: DataKind.DATETIME }]
 
@@ -45,7 +46,31 @@ const events = {
   saveData: async (data: { [key: string]: any }[]) => {
     return new Promise((resolve) => {
       setTimeout(() => {
-        resolve(true)
+        if (data.length === 1 && data[0].no === undefined) {
+          // New
+          resolve(attachDict(data.map((d) => {
+            d.no = getRandomInt(1000, 2000)
+            d.name = 'xy'
+            d.stats = ['init']
+            d.phone = '！Phone2'
+            d.addr = '！Addr2'
+            d.time = '2023-10-24'
+            return d
+          })))
+        }
+        else {
+          // Update
+          resp2.forEach((resp) => {
+            let storageRecord = resp.records.find(record => record.no === data[0].no)
+            if (storageRecord) {
+              storageRecord = {
+                ...storageRecord,
+                ...data[0],
+              }
+              resolve(attachDict([storageRecord]))
+            }
+          })
+        }
       }, 100)
     })
   },

src/assets/locales/en.json

@@ -120,6 +120,9 @@
       "addTitle": "Add",
       "titlePlaceholder": "New name",
       "submit": "Add"
+    },
+    "rowAdd": {
+      "new": "New row"
     }
   }
 }

src/assets/locales/zh-CN.json

@@ -120,6 +120,9 @@
       "addTitle": "添加字典项",
       "titlePlaceholder": "新的字典项名称",
       "submit": "添加"
+    },
+    "rowAdd": {
+      "new": "新增行"
     }
   }
-}
+}

src/components/events.ts

@@ -93,15 +93,15 @@ export async function loadData(layoutId?: string, moreForGroupedValue?: any) {
 export const FUN_ADD_DATA_TYPE = Symbol('FUN_ADD_DATA_TYPE') as InjectionKey<(newRecords: { [key: string]: any }[], afterPkId?: number, groupValue?: any, reFilter?: boolean, reSort?: boolean, reLoad?: boolean) => Promise<boolean>>
 export async function addData(newRecords: { [key: string]: any }[], afterPkId?: number, groupValue?: any, reFilter?: boolean, reSort?: boolean, reLoad?: boolean): Promise<boolean> {
   const layout = tableLayoutsConf.find(layout => layout.id === currentLayoutId.value)!
-  if (events.saveData && (await events.saveData(newRecords))) {
-    if (reLoad) {
-      await loadData()
-      return true
-    }
-  }
-  else {
+  if (!events.saveData)
     return false
+
+  const savedRecords = await events.saveData(newRecords)
+  if (reLoad) {
+    await loadData()
+    return true
   }
+
   let data
   if (groupValue && Array.isArray(layout.data)) {
     data = layout.data.find(d => d.groupValue === groupValue)
@@ -114,9 +114,9 @@ export async function addData(newRecords: { [key: string]: any }[], afterPkId?:
   }
   if (data) {
     if (afterPkId)
-      data.records.splice(afterPkId, 0, ...newRecords)
+      data.records.splice(afterPkId, 0, ...savedRecords)
     else
-      data.records.splice(0, 0, ...newRecords)
+      data.records.splice(data.records.length, 0, ...savedRecords)
   }
   return true
   // TODO agg清空，重新计算
@@ -125,47 +125,29 @@ export async function addData(newRecords: { [key: string]: any }[], afterPkId?:
 export const FUN_UPDATE_DATA_TYPE = Symbol('FUN_UPDATE_DATA_TYPE') as InjectionKey<(changedRecords: { [key: string]: any }[], reFilter?: boolean, reSort?: boolean, reLoad?: boolean) => Promise<boolean>>
 export async function updateData(changedRecords: { [key: string]: any }[], reFilter?: boolean, reSort?: boolean, reLoad?: boolean): Promise<boolean> {
   const layout = tableLayoutsConf.find(layout => layout.id === currentLayoutId.value)!
-  if (events.saveData && (await events.saveData(changedRecords))) {
-    if (reLoad) {
-      await loadData()
-      return true
-    }
-  }
-  else {
+  if (!events.saveData)
     return false
+
+  const savedRecords = await events.saveData(changedRecords)
+  if (reLoad) {
+    await loadData()
+    return true
   }
-  const useDictColumnNames = tableBasicConf.columns.filter(column => column.useDict).map(column => column.name)
+
   if (Array.isArray(layout.data)) {
     layout.data.forEach((groupData) => {
-      groupData.records.forEach((needChangeRecord) => {
-        const changedRecord = changedRecords.find(r => r[tableBasicConf.pkColumnName] === needChangeRecord[tableBasicConf.pkColumnName])
-        if (changedRecord) {
-          for (const columnName in changedRecord) {
-            if (columnName === tableBasicConf.pkColumnName)
-              continue
-            if (useDictColumnNames.includes(columnName) && changedRecord[columnName + DATA_DICT_POSTFIX] === undefined) {
-              const matchedDictRow = groupData.records.find(r => r[columnName] === changedRecord[columnName])
-              if (matchedDictRow)
-                needChangeRecord[columnName + DATA_DICT_POSTFIX] = matchedDictRow[columnName + DATA_DICT_POSTFIX]
-            }
-            needChangeRecord[columnName] = changedRecord[columnName]
-          }
-        }
+      groupData.records.forEach((record, idx) => {
+        const changedRecord = savedRecords.find(r => r[tableBasicConf.pkColumnName] === record[tableBasicConf.pkColumnName])
+        if (changedRecord)
+          groupData.records.splice(idx, 1, changedRecord)
       })
     })
   }
   else if (layout.data && !Array.isArray(layout.data)) {
-    layout.data.records.forEach((needChangeRecord) => {
-      const changedRecord = changedRecords.find(r => r[tableBasicConf.pkColumnName] === needChangeRecord[tableBasicConf.pkColumnName])
-      if (changedRecord) {
-        for (const columnName in changedRecord) {
-          if (columnName === tableBasicConf.pkColumnName)
-            continue
-          if (useDictColumnNames.includes(columnName) && changedRecord[columnName + DATA_DICT_POSTFIX] === undefined)
-            needChangeRecord[columnName + DATA_DICT_POSTFIX] = (layout.data as TableDataResp).records.find(r => r[columnName] === changedRecord[columnName])![columnName + DATA_DICT_POSTFIX]
-          needChangeRecord[columnName] = changedRecord[columnName]
-        }
-      }
+    layout.data.records.forEach((record, idx) => {
+      const changedRecord = savedRecords.find(r => r[tableBasicConf.pkColumnName] === record[tableBasicConf.pkColumnName])
+      if (changedRecord)
+        (layout.data! as TableDataResp).records.splice(idx, 1, changedRecord)
     })
   }
   else {

src/components/layout/list/CellEdit.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { inject, onMounted, ref, toRaw } from 'vue'
+import { inject, onMounted, ref } from 'vue'
 import * as iconSvg from '../../../assets/icon'
 import { getParentWithClass } from '../../../utils/basic'
 import MenuComp, { MenuOffsetKind } from '../../common/Menu.vue'
 import type { CachedColumnConf } from '../../conf'
 import { getInputTypeByDataKind } from '../../conf'
 import { FUN_LOAD_CELL_DICT_ITEMS_TYPE, FUN_UPDATE_DATA_TYPE } from '../../events'
 import type { TableCellDictItem, TableDataGroupResp, TableDataResp } from '../../props'
-import { DATA_DICT_POSTFIX, DataKind } from '../../props'
+import { DataKind } from '../../props'
 import type { CellSelectedInfo } from './CellSelect.vue'
 
 const props = defineProps<{
@@ -143,7 +143,6 @@ async function updateDictItem() {
   await updateDataFun([{
     [props.pkColumnName]: curRowPk.value,
     [curColumnConf.value!.name]: newValue,
-    [curColumnConf.value!.name + DATA_DICT_POSTFIX]: toRaw(selectedDictItems.value),
   }])
 }
 

src/components/layout/list/List.vue

@@ -11,6 +11,7 @@ import CellSelectComp from './CellSelect.vue'
 import ColumnAggsComp from './ColumnAggs.vue'
 import { setFixedColumnStyles } from './ColumnFixed.vue'
 import HeaderComp from './Header.vue'
+import RowAddComp from './RowAdd.vue'
 import RowDeleteComp from './RowDelete.vue'
 import RowSelectComp from './RowSelect.vue'
 import RowsComp from './Rows.vue'
@@ -78,6 +79,7 @@ function setTableWidth() {
         :columns-conf="columnsConf" :styles-conf="listConf.basic.styles" :set-column-styles="setColumnStyles"
         :open-context-menu-fun="showRowContextMenu"
       />
+      <RowAddComp />
       <ColumnAggsComp
         :layout-aggs="layout.aggs!" :data-basic="layout.data as TableDataResp"
         :pk-column-name="listConf.basic.pkColumnName" :columns-conf="columnsConf" :styles-conf="listConf.basic.styles"
@@ -96,6 +98,7 @@ function setTableWidth() {
           :styles-conf="listConf.basic.styles" :set-column-styles="setColumnStyles"
           :open-context-menu-fun="showRowContextMenu"
         />
+        <RowAddComp :group-value="groupData.groupValue" />
       </template>
     </template>
     <CellSelectComp

src/components/layout/list/RowAdd.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { FUN_ADD_DATA_TYPE } from '../../events'
+import * as iconSvg from '../../../assets/icon'
+
+const props = defineProps<{
+  groupValue: any | undefined
+}>()
+
+const addDataFun = inject(FUN_ADD_DATA_TYPE)!
+
+async function addRow() {
+  await addDataFun([{
+
+  }], undefined, props.groupValue)
+}
+</script>
+
+<template>
+  <div class="border-solid border-b border-l border-r border-base-300 cursor-pointer text-base-300 hover:text-base-content pl-1" @click="addRow">
+    <i :class="iconSvg.ADD" />
+    <span>{{ $t('list.rowAdd.new') }}</span>
+  </div>
+</template>

src/components/props.ts

@@ -188,7 +188,7 @@ export interface TableEventProps {
     group?: TableDataGroupReq,
     aggs?: { [key: string]: AggregateKind },
     slice?: TableDataSliceReq) => Promise<TableDataResp | TableDataGroupResp[]>
-  saveData?: (changedRecords: { [key: string]: any }[]) => Promise<boolean>
+  saveData?: (changedRecords: { [key: string]: any }[]) => Promise<{ [key: string]: any }[]>
   deleteData?: (deletedPks: any[]) => Promise<boolean>
 
   newColumn?: (newColumnProps: TableColumnProps, fromColumnName?: string) => Promise<boolean>