fix(grid): fix undefined field can't be marked change at grid edit (#3860)

* fix(grid): fix undefined field can't  be marked change at grid edit

* fix(grid): fix undefined field can't  be marked change at grid edit

* fix(form-item): fix input append slot wrap in form item

Author: gimmyhehe

examples/sites/demos/pc/app/grid/data-source/undefined-field-defalut-value-composition-api.vue

@@ -0,0 +1,39 @@
+<template>
+  <tiny-grid :data="tableData" :edit-config="editConfig">
+    <tiny-grid-column field="field1" title="所属区域" :editor="{}">
+      <template #edit="{ row }">
+        <tiny-input v-model="row.field1" />
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
+      <template #edit="{ row }">
+        <tiny-input v-model="row.field2" />
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
+      <template #edit="{ row }">
+        <tiny-input v-model="row.field3" />
+      </template>
+    </tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { TinyGrid, TinyGridColumn, TinyInput } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const tableData = ref([
+  {
+    field1: 'field1'
+  },
+  {
+    field1: 'field1'
+  }
+])
+
+const editConfig = ref({
+  trigger: 'click',
+  mode: 'cell',
+  autofocus: 'input'
+})
+</script>

examples/sites/demos/pc/app/grid/data-source/undefined-field-defalut-value.spec.js

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('缺省数据默认值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-data-source#undefined-field-defalut-value')
+
+  const demo = page.locator('#undefined-field-defalut-value')
+
+  const firstRow = demo.locator('.tiny-grid-body__row:visible').nth(0)
+
+  await firstRow.locator('td').nth(1).click()
+  await firstRow.locator('.tiny-input__inner').click()
+  await firstRow.locator('.tiny-input__inner').fill('1')
+  await firstRow.locator('td').nth(2).click()
+  await firstRow.locator('.tiny-input__inner').click()
+  await expect(firstRow.locator('td').nth(1)).toHaveClass(/col__valid-success/)
+  await firstRow.locator('.tiny-input__inner').fill('2')
+  await firstRow.locator('td').nth(1).click()
+  await expect(firstRow.locator('td').nth(2)).toHaveClass(/col__valid-success/)
+})

examples/sites/demos/pc/app/grid/data-source/undefined-field-defalut-value.vue

@@ -0,0 +1,48 @@
+<template>
+  <tiny-grid :data="tableData" :edit-config="editConfig">
+    <tiny-grid-column field="field1" title="所属区域" :editor="{}">
+      <template #edit="{ row }">
+        <tiny-input v-model="row.field1" />
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
+      <template #edit="{ row }">
+        <tiny-input v-model="row.field2" />
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
+      <template #edit="{ row }">
+        <tiny-input v-model="row.field3" />
+      </template>
+    </tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinyInput
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          field1: 'field1'
+        },
+        {
+          field1: 'field1'
+        }
+      ],
+      editConfig: {
+        trigger: 'click',
+        mode: 'cell',
+        autofocus: 'input'
+      }
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js

@@ -7,7 +7,10 @@ test('Grid-编辑器 - 下拉多选', async ({ page }) => {
     width: 1600,
     height: 1200
   })
-  await page.getByText('华中区;华南区').click()
+  const demo = page.locator('#editor-mutil-render')
+  const firstRow = demo.locator('.tiny-grid-body__row:visible').first()
+  await firstRow.locator('td').nth(2).click()
+  await page.waitForTimeout(2500)
   await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
   await page.locator('li').filter({ hasText: '华东区' }).click()
   await page.getByRole('cell', { name: '创建时间' }).click()

examples/sites/demos/pc/app/grid/webdoc/grid-data-source.js

@@ -62,6 +62,18 @@ export default {
         'en-US': ''
       },
       codeFiles: ['data-source/defslot-protochain-fetch.vue']
+    },
+    {
+      demoId: 'undefined-field-defalut-value',
+      name: { 'zh-CN': '缺省数据的默认值', 'en-US': '' },
+      desc: {
+        'zh-CN': `
+        <p>在可编辑表格组件中，当编辑器检测到当前数据行缺少对应字段时，会自动创建该字段。字段的初始化值遵循以下规则：</p>
+        <p>1. 若配置了 <code>editor.defaultValue</code>，则使用该值作为初始值</p>
+        <p>2.若未配置 <code>editor.defaultValue</code>，则默认使用 <code>null</code>作为初始值</p>`,
+        'en-US': ''
+      },
+      codeFiles: ['data-source/undefined-field-defalut-value.vue']
     }
   ],
   apis: [{ name: 'grid-data-source', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

packages/renderless/src/grid/static/array/eachTree.ts

@@ -35,6 +35,7 @@ const eachTreeItem = ({ parent, obj, iterate, context, path, node, parseChildren
     if (item && parseChildren) {
       paths.push(parseChildren)
       eachTreeItem({
+        parent: item,
         item,
         obj: item[parseChildren],
         context,

packages/vue/src/grid/src/composable/index.ts

@@ -5,3 +5,4 @@ export * from './useData'
 export * from './useHeader'
 export * from './useCellEvent'
 export * from './useCellSpan'
+export * from './useNormalData'

packages/vue/src/grid/src/composable/useData.ts

@@ -153,7 +153,7 @@ export const useData = (props) => {
 
   hooks.watch([() => props.data, () => getTiledLength(props)], ([_, length]) => {
     tiledLength.value = length
-    $table?.handleDataChange()
+    $table.updateRawData(props.data)
   })
 
   return { tiledLength }

packages/vue/src/grid/src/composable/useNormalData.ts

@@ -0,0 +1,30 @@
+import { hooks } from '@opentiny/vue-common'
+
+export const useNormalData = ({ props, visibleColumn }) => {
+  const $table = hooks.getCurrentInstance()?.proxy
+  // 原始数据
+  const rawData = hooks.ref(null)
+  // 原始数据版本
+  const rawDataVersion = hooks.ref(0)
+
+  hooks.watch([rawData, () => visibleColumn.value], ([_data, _visibleColumn]) => {
+    if (props.editConfig && Array.isArray(_data) && _data.length > 0 && _visibleColumn.length > 0) {
+      // 对于可编辑表格，如果编辑器对应数据行字段不存在，通过编辑器修改字段时会动态添加字段
+      // 对于旧数据处理：watch -> handleDataChange -> loadTableData -> updateCache
+      // 在Vue2，这种动态添加字段会触发选项式watch data，更新cache，最终导致脏数据状态不显示
+      // 在Vue3，不会触发选项式watch data 和更新cache，不会导致脏数据状态不显示
+      // 这里修复这种数据处理过程的不一致性：在数据改变后，先规范化数据，再更新数据缓存，再处理数据改变
+      _data.forEach((row) => $table.defineField(row))
+      rawDataVersion.value += 1
+    }
+  })
+
+  hooks.watch(rawDataVersion, () => {
+    // 设置数据查找缓存，对数据进行备份，深度克隆
+    $table.updateCache(true, props.saveSource === 'deep')
+    // 处理数据改变
+    $table.handleDataChange()
+  })
+
+  return { rawData, rawDataVersion }
+}

packages/vue/src/grid/src/dragger/src/rowDrop.ts

@@ -40,7 +40,7 @@ export const createHandlerOnEnd = ({ _vm, refresh }) => {
     let prevTrElem =
       prevEl && prevEl.classList.contains('tiny-grid-body__row') ? prevEl : prevEl && prevEl.previousElementSibling
     // 这里优先使用用户通过props传递过来的表格数据，所以拖拽后会改变原始数据
-    const tableTreeData = _vm.data || _vm.tableData
+    const tableTreeData = _vm.rawData || _vm.tableData
     const selfRow = _vm.getRowNode(targetTrElem).item
     const selfNode = findTree(tableTreeData, (row) => row === selfRow, options)
     selfRow._isDraging = true
@@ -78,7 +78,7 @@ export const createHandlerOnEnd = ({ _vm, refresh }) => {
 
     // 如果变动了树层级，需要刷新数据
     _vm.$emit('row-drop-end', event, _vm, _vm.scrollYLoad ? tableTreeData : _vm.tableFullData)
-    refresh && _vm.data && _vm.refreshData(_vm.data)
+    refresh && _vm.rawData && _vm.refreshData(_vm.rawData)
   }
 }