fix

src/components/views/pricingView/WorkloadPricingPane.vue

@@ -1,36 +1,23 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { AgGridVue } from 'ag-grid-vue3'
-import type { ColDef, GridOptions } from 'ag-grid-community'
+import type { ColDef } from 'ag-grid-community'
 import localforage from 'localforage'
-import { majorList } from '@/sql'
-import 'ag-grid-enterprise'
-import {  myTheme } from '@/lib/diyAgGridTheme'
+import { serviceList, taskList } from '@/sql'
+import { myTheme, gridOptions } from '@/lib/diyAgGridOptions'
+import { decimalAggSum, sumByNumber } from '@/lib/decimal'
+import { usePricingPaneReloadStore } from '@/pinia/pricingPaneReload'
 
 import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';
 
-interface DictLeaf {
-  id: string
-  code: string
-  name: string
-}
-
-interface DictGroup {
-  id: string
-  code: string
-  name: string
-  children: DictLeaf[]
-}
-
 interface DetailRow {
   id: string
-  groupCode: string
-  groupName: string
-  majorCode: string
-  majorName: string
+  taskCode: string
+  taskName: string
+  unit: string
   workload: number | null
-  budgetBase: number | null
-  budgetReferenceUnitPrice: number | null
+  budgetBase: string
+  budgetReferenceUnitPrice: string
   budgetAdoptedUnitPrice: number | null
   consultCategoryFactor: number | null
   serviceFee: number | null
@@ -46,93 +33,114 @@ interface XmInfoState {
 const props = defineProps<{
   contractId: string,
 
-  serviceId: string|number
+  serviceId: string | number
 }>()
 const DB_KEY = computed(() => `gzlF-${props.contractId}-${props.serviceId}`)
+const PRICING_CLEAR_SKIP_PREFIX = 'pricing-clear-skip:'
+const PRICING_FORCE_DEFAULT_PREFIX = 'pricing-force-default:'
+const pricingPaneReloadStore = usePricingPaneReloadStore()
+
+const shouldSkipPersist = () => {
+  const storageKey = `${PRICING_CLEAR_SKIP_PREFIX}${DB_KEY.value}`
+  const raw = sessionStorage.getItem(storageKey)
+  if (!raw) return false
+  const skipUntil = Number(raw)
+  if (Number.isFinite(skipUntil) && Date.now() <= skipUntil) return true
+  sessionStorage.removeItem(storageKey)
+  return false
+}
+
+const shouldForceDefaultLoad = () => {
+  const storageKey = `${PRICING_FORCE_DEFAULT_PREFIX}${DB_KEY.value}`
+  const raw = sessionStorage.getItem(storageKey)
+  if (!raw) return false
+  const forceUntil = Number(raw)
+  sessionStorage.removeItem(storageKey)
+  return Number.isFinite(forceUntil) && Date.now() <= forceUntil
+}
 
 const detailRows = ref<DetailRow[]>([])
 
-type majorLite = { code: string; name: string }
-const serviceEntries = Object.entries(majorList as Record<string, majorLite>)
-  .sort((a, b) => Number(a[0]) - Number(b[0]))
-  .filter((entry): entry is [string, majorLite] => {
-    const item = entry[1]
-    return Boolean(item?.code && item?.name)
-  })
+type serviceLite = { defCoe: number | null }
+type taskLite = {
+  serviceID: number
+  code: string
+  name: string
+  basicParam: string
+  unit: string
+  maxPrice: number | null
+  minPrice: number | null
+  defPrice: number | null
+}
 
-const detailDict: DictGroup[] = (() => {
-  const groupMap = new Map<string, DictGroup>()
-  const groupOrder: string[] = []
-  const codeLookup = new Map(serviceEntries.map(([key, item]) => [item.code, { id: key, code: item.code, name: item.name }]))
+const defaultConsultCategoryFactor = computed<number | null>(() => {
+  const service = (serviceList as Record<string, serviceLite | undefined>)[String(props.serviceId)]
+  return typeof service?.defCoe === 'number' && Number.isFinite(service.defCoe) ? service.defCoe : null
+})
 
-  for (const [key, item] of serviceEntries) {
-    const code = item.code
-    const isGroup = !code.includes('-')
-    if (isGroup) {
-      if (!groupMap.has(code)) groupOrder.push(code)
-      groupMap.set(code, {
-        id: key,
-        code,
-        name: item.name,
-        children: []
-      })
-      continue
-    }
-
-    const parentCode = code.split('-')[0]
-    if (!groupMap.has(parentCode)) {
-      const parent = codeLookup.get(parentCode)
-      if (!groupOrder.includes(parentCode)) groupOrder.push(parentCode)
-      groupMap.set(parentCode, {
-        id: parent?.id || `group-${parentCode}`,
-        code: parentCode,
-        name: parent?.name || parentCode,
-        children: []
-      })
-    }
-
-    groupMap.get(parentCode)!.children.push({
-      id: key,
-      code,
-      name: item.name
-    })
-  }
-
-  return groupOrder.map(code => groupMap.get(code)).filter((group): group is DictGroup => Boolean(group))
-})()
-
-const idLabelMap = new Map<string, string>()
-for (const group of detailDict) {
-  idLabelMap.set(group.id, `${group.code} ${group.name}`)
-  for (const child of group.children) {
-    idLabelMap.set(child.id, `${child.code} ${child.name}`)
-  }
+const formatTaskReferenceUnitPrice = (task: taskLite) => {
+  const unit = task.unit || ''
+  const hasMin = typeof task.minPrice === 'number' && Number.isFinite(task.minPrice)
+  const hasMax = typeof task.maxPrice === 'number' && Number.isFinite(task.maxPrice)
+  if (hasMin && hasMax) return `${task.minPrice}${unit}-${task.maxPrice}${unit}`
+  if (hasMin) return `${task.minPrice}${unit}`
+  if (hasMax) return `${task.maxPrice}${unit}`
+  return ''
 }
 
 const buildDefaultRows = (): DetailRow[] => {
   const rows: DetailRow[] = []
-  for (const group of detailDict) {
-    for (const child of group.children) {
-      rows.push({
-        id: child.id,
-        groupCode: group.code,
-        groupName: group.name,
-        majorCode: child.code,
-        majorName: child.name,
-        workload: null,
-        budgetBase: null,
-        budgetReferenceUnitPrice: null,
-        budgetAdoptedUnitPrice: null,
-        consultCategoryFactor: null,
-        serviceFee: null,
-        remark: '',
-        path: [group.id, child.id]
-      })
-    }
+  const currentServiceId = Number(props.serviceId)
+  const sourceTaskIds = Object.entries(taskList as Record<string, taskLite>)
+    .filter(([, task]) => Number(task.serviceID) === currentServiceId)
+    .map(([key]) => Number(key))
+    .filter(Number.isFinite)
+    .sort((a, b) => a - b)
+
+  for (const [order, taskId] of sourceTaskIds.entries()) {
+    const task = (taskList as Record<string, taskLite | undefined>)[String(taskId)]
+    if (!task?.code || !task?.name) continue
+    const rowId = `task-${taskId}-${order}`
+    rows.push({
+      id: rowId,
+      taskCode: task.code,
+      taskName: task.name,
+      unit: task.unit || '',
+      workload: null,
+      budgetBase: task.basicParam || '',
+      budgetReferenceUnitPrice: formatTaskReferenceUnitPrice(task),
+      budgetAdoptedUnitPrice:
+        typeof task.defPrice === 'number' && Number.isFinite(task.defPrice) ? task.defPrice : null,
+      consultCategoryFactor: defaultConsultCategoryFactor.value,
+      serviceFee: null,
+      remark: '',
+      path: [rowId]
+    })
   }
+
+  if (rows.length === 0) {
+    const emptyRowId = `task-none-${String(props.serviceId)}`
+    rows.push({
+      id: emptyRowId,
+      taskCode: '无',
+      taskName: '无',
+      unit: '',
+      workload: null,
+      budgetBase: '无',
+      budgetReferenceUnitPrice: '无',
+      budgetAdoptedUnitPrice: null,
+      consultCategoryFactor: null,
+      serviceFee: null,
+      remark: '',
+      path: [emptyRowId]
+    })
+  }
+
   return rows
 }
 
+const isNoTaskRow = (row: DetailRow | undefined) => row?.id?.startsWith('task-none-') ?? false
+
 const mergeWithDictRows = (rowsFromDb: DetailRow[] | undefined): DetailRow[] => {
   const dbValueMap = new Map<string, DetailRow>()
   for (const row of rowsFromDb || []) {
@@ -146,9 +154,6 @@ const mergeWithDictRows = (rowsFromDb: DetailRow[] | undefined): DetailRow[] =>
     return {
       ...row,
       workload: typeof fromDb.workload === 'number' ? fromDb.workload : null,
-      budgetBase: typeof fromDb.budgetBase === 'number' ? fromDb.budgetBase : null,
-      budgetReferenceUnitPrice:
-        typeof fromDb.budgetReferenceUnitPrice === 'number' ? fromDb.budgetReferenceUnitPrice : null,
       budgetAdoptedUnitPrice:
         typeof fromDb.budgetAdoptedUnitPrice === 'number' ? fromDb.budgetAdoptedUnitPrice : null,
       consultCategoryFactor:
@@ -161,11 +166,13 @@ const mergeWithDictRows = (rowsFromDb: DetailRow[] | undefined): DetailRow[] =>
 
 const parseNumberOrNull = (value: unknown) => {
   if (value === '' || value == null) return null
-  const v = Number(value)
+  const normalized = typeof value === 'string' ? value.replace(/[^0-9.\-]/g, '') : value
+  const v = Number(normalized)
   return Number.isFinite(v) ? v : null
 }
 
 const formatEditableNumber = (params: any) => {
+  if (isNoTaskRow(params.data)) return '无'
   if (!params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')) {
     return '点击输入'
   }
@@ -173,15 +180,84 @@ const formatEditableNumber = (params: any) => {
   return Number(params.value).toFixed(2)
 }
 
+const isRepeatedTaskNameRow = (params: any) => {
+  const rowIndex = params.node?.rowIndex
+  if (typeof rowIndex !== 'number' || rowIndex <= 0) return false
+  const prevData = params.api.getDisplayedRowAtIndex(rowIndex - 1)?.data as DetailRow | undefined
+  return prevData?.taskName === params.data?.taskName
+}
+
+const getTaskNameRowSpan = (params: any) => {
+  if (params.node?.rowPinned) return 1
+  if (isRepeatedTaskNameRow(params)) return 1
+  const currentName = params.data?.taskName
+  if (!currentName) return 1
+  let span = 1
+  let offset = 1
+  while (true) {
+    const nextData = params.api.getDisplayedRowAtIndex((params.node?.rowIndex ?? 0) + offset)?.data as DetailRow | undefined
+    if (!nextData || nextData.taskName !== currentName) break
+    span += 1
+    offset += 1
+  }
+  return span
+}
+
 const columnDefs: ColDef<DetailRow>[] = [
   {
-    headerName: '工作内容',
-    minWidth: 220,
-    width: 240,
+    headerName: '编码',
+    field: 'taskCode',
+    minWidth: 150,
+    width: 170,
     pinned: 'left',
-    valueGetter: params => {
-      if (params.node?.rowPinned) return ''
-      return params.node?.group ? params.data?.groupName || '' : params.data?.majorName || ''
+    valueFormatter: params => params.value || ''
+  },
+  {
+    headerName: '名称',
+    field: 'taskName',
+    minWidth: 220,
+    width: 260,
+    pinned: 'left',
+    rowSpan: params => getTaskNameRowSpan(params),
+    valueFormatter: params => (isRepeatedTaskNameRow(params) ? '' : params.value || '')
+  },
+  {
+    headerName: '预算基数',
+    field: 'budgetBase',
+    minWidth: 170,
+    flex: 1,
+    valueFormatter: params => params.value || ''
+  },
+  {
+    headerName: '预算参考单价',
+    field: 'budgetReferenceUnitPrice',
+    minWidth: 170,
+    flex: 1,
+    valueFormatter: params => params.value || ''
+  },
+  {
+    headerName: '预算采用单价',
+    field: 'budgetAdoptedUnitPrice',
+    minWidth: 170,
+    flex: 1,
+    editable: params => !params.node?.group && !params.node?.rowPinned && !isNoTaskRow(params.data),
+    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
+    cellClassRules: {
+      'editable-cell-empty': params =>
+        !params.node?.group &&
+        !params.node?.rowPinned &&
+        !isNoTaskRow(params.data) &&
+        (params.value == null || params.value === '')
+    },
+    valueParser: params => parseNumberOrNull(params.newValue),
+    valueFormatter: params => {
+      if (isNoTaskRow(params.data)) return '无'
+      if (!params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')) {
+        return '点击输入'
+      }
+      if (params.value == null) return ''
+      const unit = params.data?.unit || ''
+      return `${Number(params.value).toFixed(2)}${unit}`
     }
   },
   {
@@ -189,57 +265,16 @@ const columnDefs: ColDef<DetailRow>[] = [
     field: 'workload',
     minWidth: 140,
     flex: 1,
-    editable: params => !params.node?.group && !params.node?.rowPinned,
+    editable: params => !params.node?.group && !params.node?.rowPinned && !isNoTaskRow(params.data),
     cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
     cellClassRules: {
       'editable-cell-empty': params =>
-        !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
-    },
-    aggFunc: 'sum',
-    valueParser: params => parseNumberOrNull(params.newValue),
-    valueFormatter: formatEditableNumber
-  },
-  {
-    headerName: '预算基数',
-    field: 'budgetBase',
-    minWidth: 170,
-    flex: 1,
-
-    editable: params => !params.node?.group && !params.node?.rowPinned,
-    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
-    cellClassRules: {
-      'editable-cell-empty': params =>
-        !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
-    },
-    aggFunc: 'sum',
-    valueParser: params => parseNumberOrNull(params.newValue),
-    valueFormatter: formatEditableNumber
-  },
-  {
-    headerName: '预算参考单价',
-    field: 'budgetReferenceUnitPrice',
-    minWidth: 170,
-    flex: 1,
-    editable: params => !params.node?.group && !params.node?.rowPinned,
-    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
-    cellClassRules: {
-      'editable-cell-empty': params =>
-        !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
-    },
-    valueParser: params => parseNumberOrNull(params.newValue),
-    valueFormatter: formatEditableNumber
-  },
-  {
-    headerName: '预算采用单价',
-    field: 'budgetAdoptedUnitPrice',
-    minWidth: 170,
-    flex: 1,
-    editable: params => !params.node?.group && !params.node?.rowPinned,
-    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
-    cellClassRules: {
-      'editable-cell-empty': params =>
-        !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
+        !params.node?.group &&
+        !params.node?.rowPinned &&
+        !isNoTaskRow(params.data) &&
+        (params.value == null || params.value === '')
     },
+    aggFunc: decimalAggSum,
     valueParser: params => parseNumberOrNull(params.newValue),
     valueFormatter: formatEditableNumber
   },
@@ -248,11 +283,14 @@ const columnDefs: ColDef<DetailRow>[] = [
     field: 'consultCategoryFactor',
     minWidth: 150,
     flex: 1,
-    editable: params => !params.node?.group && !params.node?.rowPinned,
+    editable: params => !params.node?.group && !params.node?.rowPinned && !isNoTaskRow(params.data),
     cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
     cellClassRules: {
       'editable-cell-empty': params =>
-        !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
+        !params.node?.group &&
+        !params.node?.rowPinned &&
+        !isNoTaskRow(params.data) &&
+        (params.value == null || params.value === '')
     },
     valueParser: params => parseNumberOrNull(params.newValue),
     valueFormatter: formatEditableNumber
@@ -262,13 +300,16 @@ const columnDefs: ColDef<DetailRow>[] = [
     field: 'serviceFee',
     minWidth: 150,
     flex: 1,
-    editable: params => !params.node?.group && !params.node?.rowPinned,
+    editable: params => !params.node?.group && !params.node?.rowPinned && !isNoTaskRow(params.data),
     cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
     cellClassRules: {
       'editable-cell-empty': params =>
-        !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
+        !params.node?.group &&
+        !params.node?.rowPinned &&
+        !isNoTaskRow(params.data) &&
+        (params.value == null || params.value === '')
     },
-    aggFunc: 'sum',
+    aggFunc: decimalAggSum,
     valueParser: params => parseNumberOrNull(params.newValue),
     valueFormatter: formatEditableNumber
   },
@@ -277,76 +318,40 @@ const columnDefs: ColDef<DetailRow>[] = [
     field: 'remark',
     minWidth: 180,
     flex: 1.2,
-    editable: params => !params.node?.group && !params.node?.rowPinned,
+    cellEditor: 'agLargeTextCellEditor',
+    wrapText: true,
+    autoHeight: true,
+    cellStyle: { whiteSpace: 'normal', lineHeight: '1.4' },
+
+    editable: params => !params.node?.group && !params.node?.rowPinned && !isNoTaskRow(params.data),
     valueFormatter: params => {
+      if (isNoTaskRow(params.data)) return '无'
       if (!params.node?.group && !params.node?.rowPinned && !params.value) return '点击输入'
       return params.value || ''
     },
-    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
+    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line remark-wrap-cell' : ''),
     cellClassRules: {
       'editable-cell-empty': params =>
-        !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
+        !params.node?.group &&
+        !params.node?.rowPinned &&
+        !isNoTaskRow(params.data) &&
+        (params.value == null || params.value === '')
     }
   }
 ]
 
-const autoGroupColumnDef: ColDef = {
-  headerName: '编码',
-  minWidth: 160,
-  pinned: 'left',
-  width: 170,
+const totalWorkload = computed(() => sumByNumber(detailRows.value, row => row.workload))
 
-  cellRendererParams: {
-    suppressCount: true
-  },
-  valueFormatter: params => {
-    if (params.node?.rowPinned) {
-      return '总合计'
-    }
-    const nodeId = String(params.value || '')
-    const label = idLabelMap.get(nodeId) || nodeId
-    return label.includes(' ') ? label.split(' ')[0] : label
-  }
-}
-
-const gridOptions: GridOptions<DetailRow> = {
-  treeData: true,
-  animateRows: true,
-  singleClickEdit: true,
-  suppressClickEdit: false,
-  suppressContextMenu: false,
-  groupDefaultExpanded: -1,
-  suppressFieldDotNotation: true,
-  getDataPath: data => data.path,
-  getContextMenuItems: () => ['copy', 'paste', 'separator', 'export'],
-  defaultColDef: {
-    resizable: true,
-    sortable: false,
-    filter: false
-  }
-}
-
-const totalBudgetBase = computed(() =>
-  detailRows.value.reduce((sum, row) => sum + (row.budgetBase || 0), 0)
-)
-
-const totalWorkload = computed(() =>
-  detailRows.value.reduce((sum, row) => sum + (row.workload || 0), 0)
-)
-
-const totalServiceFee = computed(() =>
-  detailRows.value.reduce((sum, row) => sum + (row.serviceFee || 0), 0)
-)
+const totalServiceFee = computed(() => sumByNumber(detailRows.value, row => row.serviceFee))
 const pinnedTopRowData = computed(() => [
   {
     id: 'pinned-total-row',
-    groupCode: '',
-    groupName: '',
-    majorCode: '',
-    majorName: '',
+    taskCode: '',
+    taskName: '',
+    unit: '',
     workload: totalWorkload.value,
-    budgetBase: totalBudgetBase.value,
-    budgetReferenceUnitPrice: null,
+    budgetBase: '',
+    budgetReferenceUnitPrice: '',
     budgetAdoptedUnitPrice: null,
     consultCategoryFactor: null,
     serviceFee: totalServiceFee.value,
@@ -358,9 +363,10 @@ const pinnedTopRowData = computed(() => [
 
 
 const saveToIndexedDB = async () => {
+  if (shouldSkipPersist()) return
   try {
     const payload = {
-  detailRows: JSON.parse(JSON.stringify(detailRows.value)) 
+      detailRows: JSON.parse(JSON.stringify(detailRows.value))
     }
     console.log('Saving to IndexedDB:', payload)
     await localforage.setItem(DB_KEY.value, payload)
@@ -371,6 +377,11 @@ const saveToIndexedDB = async () => {
 
 const loadFromIndexedDB = async () => {
   try {
+    if (shouldForceDefaultLoad()) {
+      detailRows.value = buildDefaultRows()
+      return
+    }
+
     const data = await localforage.getItem<XmInfoState>(DB_KEY.value)
     if (data) {
       detailRows.value = mergeWithDictRows(data.detailRows)
@@ -384,6 +395,14 @@ const loadFromIndexedDB = async () => {
   }
 }
 
+watch(
+  () => pricingPaneReloadStore.getReloadVersion(props.contractId, props.serviceId),
+  (nextVersion, prevVersion) => {
+    if (nextVersion === prevVersion || nextVersion === 0) return
+    void loadFromIndexedDB()
+  }
+)
+
 let persistTimer: ReturnType<typeof setTimeout> | null = null
 
 
@@ -397,7 +416,6 @@ const handleCellValueChanged = () => {
   }, 1000)
 }
 
-
 onMounted(async () => {
   await loadFromIndexedDB()
 })
@@ -407,14 +425,14 @@ onBeforeUnmount(() => {
   if (gridPersistTimer) clearTimeout(gridPersistTimer)
   void saveToIndexedDB()
 })
-const processCellForClipboard = (params:any) => {
+const processCellForClipboard = (params: any) => {
   if (Array.isArray(params.value)) {
     return JSON.stringify(params.value); // 数组转字符串复制
   }
   return params.value;
 };
 
-const processCellFromClipboard = (params:any) => {
+const processCellFromClipboard = (params: any) => {
   try {
     const parsed = JSON.parse(params.value);
     if (Array.isArray(parsed)) return parsed;
@@ -427,7 +445,7 @@ const processCellFromClipboard = (params:any) => {
 
 <template>
   <div class="h-full min-h-0 flex flex-col">
-  
+
 
     <div class="rounded-lg border bg-card xmMx flex min-h-0 flex-1 flex-col">
       <div class="flex items-center justify-between border-b px-4 py-3">
@@ -436,58 +454,15 @@ const processCellFromClipboard = (params:any) => {
       </div>
 
       <div class="ag-theme-quartz h-full min-h-0 w-full flex-1">
-         <AgGridVue
-    :style="{ height: '100%' }"
-    :rowData="detailRows"
-    :pinnedTopRowData="pinnedTopRowData"
-    :columnDefs="columnDefs"
-    :autoGroupColumnDef="autoGroupColumnDef"
-    :gridOptions="gridOptions"
-    :theme="myTheme"
-    @cell-value-changed="handleCellValueChanged"
-    :suppressColumnVirtualisation="true"
-    :suppressRowVirtualisation="true"
-    :cellSelection="{ handle: { mode: 'range' } }"
-    :enableClipboard="true"
-    :localeText="AG_GRID_LOCALE_CN"
-    :tooltipShowDelay="500"
-        :headerHeight="50"
-    :processCellForClipboard="processCellForClipboard"
-    :processCellFromClipboard="processCellFromClipboard"
-    :undoRedoCellEditing="true"
-    :undoRedoCellEditingLimit="20"
-
-  />
+        <AgGridVue :style="{ height: '100%' }" :rowData="detailRows" :pinnedTopRowData="pinnedTopRowData"
+          :columnDefs="columnDefs" :gridOptions="gridOptions" :theme="myTheme" :treeData="false"
+          @cell-value-changed="handleCellValueChanged" :suppressColumnVirtualisation="true"
+          :suppressRowVirtualisation="true" :suppressRowTransform="true"
+          :cellSelection="{ handle: { mode: 'range' } }" :enableClipboard="true"
+          :localeText="AG_GRID_LOCALE_CN" :tooltipShowDelay="500" :headerHeight="50"
+          :processCellForClipboard="processCellForClipboard" :processCellFromClipboard="processCellFromClipboard"
+          :undoRedoCellEditing="true" :undoRedoCellEditingLimit="20" />
       </div>
     </div>
   </div>
 </template>
-
-<style >
-.ag-floating-top{
-  overflow-y:auto !important
-}
-
-.xmMx .editable-cell-line .ag-cell-value {
-  display: inline-block;
-  min-width: 84%;
-  padding: 2px 4px;
-  border-bottom: 1px solid #cbd5e1;
-}
-
-.xmMx .editable-cell-line.ag-cell-focus .ag-cell-value,
-.xmMx .editable-cell-line:hover .ag-cell-value {
-  border-bottom-color: #2563eb;
-}
-
-.xmMx .editable-cell-empty .ag-cell-value {
-  color: #94a3b8 !important;
-  font-style: italic;
-  opacity: 1 !important;
-}
-
-.xmMx .ag-cell.editable-cell-empty,
-.xmMx .ag-cell.editable-cell-empty .ag-cell-value {
-  color: #94a3b8 !important;
-}
-</style>