zengzy / hhrcs_web · Files

<script setup lang="ts">
import { ref, onBeforeMount, shallowRef, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vuestic-ui'
import actionConfigurationsApi from '../../services/actionConfigurations'
import { useGridFilters } from '../../composables/useGridFilters'
import { useOptions } from '../../composables/useOptions'
import {
  ColDef,
  GridReadyEvent,
  FilterChangedEvent,
} from "ag-grid-community"

const rowData = ref<any[] | null>(null)
const { t } = useI18n()
const { init: notify } = useToast()
const { containsFilterParams, dateFilterParams, createSelectFilterParams, gridLocaleText } = useGridFilters()
const { loadOptions, getActionCategoryOptions, getRobotTypeOptions, getActionBlockTypeOptions, getParameterValueTypeOptions, getParameterSourceTypeOptions } = useOptions()

const actionCategoryOptions = computed(() => getActionCategoryOptions())
const robotTypeOptions = computed(() => getRobotTypeOptions())
const blockingTypeOptions = computed(() => getActionBlockTypeOptions())

const columnDefs = shallowRef<ColDef[]>([
  { checkboxSelection: true, headerCheckboxSelection: true, width: 50, pinned: 'left', filter: false, sortable: false },
  { 
    headerName: t('actionConfigurations.table.serialNumber'),
    width: 80,
    filter: false,
    sortable: false,
    valueGetter: (params: any) => (params.node?.rowIndex ?? 0) + 1,
    cellStyle: { textAlign: 'center' }
  },
  { 
    field: 'actionCategory', 
    headerName: t('actionConfigurations.table.actionCategory'), 
    width: 120,
    filterParams: createSelectFilterParams(actionCategoryOptions.value),
    valueGetter: (params: any) => {
      const value = params.data?.actionCategory
      const option = actionCategoryOptions.value.find(opt => opt.value === value)
      return option?.text || value
    }
  },
  { field: 'manufacturer', headerName: t('actionConfigurations.table.manufacturer'), width: 120 },
  { 
    field: 'robotType', 
    headerName: t('actionConfigurations.table.robotType'), 
    width: 120,
    filterParams: createSelectFilterParams(robotTypeOptions.value),
    valueGetter: (params: any) => {
      const value = params.data?.robotType
      const option = robotTypeOptions.value.find(opt => opt.value === value)
      return option?.text || value
    }
  },
  { field: 'actionName', headerName: t('actionConfigurations.table.actionName'), width: 150 },
  { field: 'actionDescription', headerName: t('actionConfigurations.table.actionDescription'), minWidth: 150, flex: 1 },
  { field: 'executionScope', headerName: t('actionConfigurations.table.executionScope'), width: 120 },
  { 
    field: 'blockingType', 
    headerName: t('actionConfigurations.table.blockingType'), 
    width: 100,
    filterParams: createSelectFilterParams(blockingTypeOptions.value),
    valueGetter: (params: any) => {
      const value = params.data?.blockingType
      const option = blockingTypeOptions.value.find(opt => opt.value === value)
      return option?.text || value
    }
  },
  { field: 'isEnabled', headerName: t('actionConfigurations.table.isEnabled'), width: 80, filterParams: null,
    valueFormatter: (p: any) => p.value ? t('actionConfigurations.options.yes') : t('actionConfigurations.options.no')
  },
  { field: 'sortOrder', headerName: t('actionConfigurations.table.sortOrder'), width: 80 },
  {
    field: 'createdAt',
    headerName: t('actionConfigurations.table.createdAt'),
    width: 180,
    filter: 'agDateColumnFilter',
    filterParams: {
      ...dateFilterParams.value,
      comparator: (filterLocalDateAtMidnight: Date, cellValue: string) => {
        if (!cellValue) return -1
        const cellDate = new Date(cellValue)
        if (cellDate < filterLocalDateAtMidnight) return -1
        if (cellDate > filterLocalDateAtMidnight) return 1
        return 0
      }
    }
  },
  {
    headerName: t('actionConfigurations.table.actions'),
    field: 'actions',
    width: 120,
    pinned: 'right',
    filter: false,
    sortable: false,
    cellRenderer: (p: any) => {
      const editLabel = t('actionConfigurations.actions.edit')
      const deleteLabel = t('actionConfigurations.actions.delete')
      const id = p.data?.actionConfigId ?? null
      const idLiteral = id !== null ? `'${String(id).replace(/'/g, "\\'")}'` : 'null'
      const containerStyle = 'display:flex; align-items:center; justify-content:center; height:100%;'
      const groupStyle = 'display:inline-flex; border-radius:6px; overflow:hidden;'
      const btnStyle = 'border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06);'
      const btnStyleLast = 'border-radius:0; margin:0;'
      return '<div style="' + containerStyle + '">' +
        '<div style="' + groupStyle + '">' +
        '<button class="va-button va-button--small va-button--primary" style="' + btnStyle + '" onclick="window.onEditActionConfig(' + idLiteral + ')" title="' + editLabel + '" aria-label="' + editLabel + '"><i class="material-icons" style="font-size:16px;color:#1976d2">edit</i></button>' +
        '<button class="va-button va-button--small va-button--primary" style="' + btnStyleLast + '" onclick="window.onDeleteActionConfig(' + idLiteral + ')" title="' + deleteLabel + '" aria-label="' + deleteLabel + '"><i class="material-icons" style="font-size:16px;color:#1976d2">delete</i></button>' +
        '</div></div>'
    }
  }
])

const defaultColDef = ref<ColDef>({
  maxWidth: 300,
  floatingFilter: true,
  filter: true,
  cellStyle: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  },
  filterParams: containsFilterParams.value
})

const gridApi = ref<any>(null)
const isGridInitialized = ref(false)
const isFetchingData = ref(false)
const paginationRowCount = ref<number | null>(null)
const currentPage = ref(1)
const totalPages = ref(1)
const queryParams = ref({
  pageNumber: 1,
  pageSize: 20,
  filterModel: {} as any
})

function onGridReady(params: GridReadyEvent) {
  gridApi.value = params.api;
  queryParams.value.pageNumber = 1
  queryParams.value.pageSize = 20
  isGridInitialized.value = true
  fetchRowData()
}

const tbLoading = ref(false)
const editModalOpen = ref(false)
const editFormRef = ref<any>({})
const editForm = ref<any>(null)
const confirmModalOpen = ref(false)
const confirmMessage = ref('')
const confirmCallback = ref<(() => void) | null>(null)

const showConfirm = (message: string, callback: () => void) => {
  confirmMessage.value = message
  confirmCallback.value = callback
  confirmModalOpen.value = true
}

const handleConfirm = () => {
  confirmModalOpen.value = false
  if (confirmCallback.value) {
    confirmCallback.value()
  }
}

const onEdit = async (paramsOrId: any) => {
  try {
    ShowLoading()
    const id = String((paramsOrId && (paramsOrId.actionConfigId ?? paramsOrId.id)) ?? paramsOrId)
    const res = await actionConfigurationsApi.get(id)
    HideLoading()
    const data = (res && (res.Data ?? res.data)) || res || {}
    editFormRef.value = { 
      ...data,
      actionCategory: data.actionCategory || 1,
      parameters: data.parameters || []
    }
    editModalOpen.value = true
  } catch (err: any) {
    HideLoading()
    notify({ message: err?.message || '加载失败', color: 'danger' })
  }
}

const saveEdit = async () => {
  if (editForm.value && !editForm.value.validate()) {
    return
  }
  try {
    ShowLoading()
    const res = await actionConfigurationsApi.createOrUpdate(editFormRef.value)
    HideLoading()
    
    if (res?.success === false || res?.Success === false) {
      notify({ message: res.message || res.Message || t('actionConfigurations.messages.updateFailed'), color: 'danger' })
      return
    }
    
    notify({ message: res?.message || res?.Message || t('actionConfigurations.messages.updated'), color: 'success' })
    editModalOpen.value = false
    fetchRowData()
  } catch (err: any) {
    HideLoading()
      notify({ message: err?.message || t('actionConfigurations.messages.operationFailed'), color: 'danger' })
  }
}

const onDelete = async (paramsOrId: any) => {
  const id = String((paramsOrId && (paramsOrId.actionConfigId ?? paramsOrId.id)) ?? paramsOrId)
  if (!id || id === 'null' || id === 'undefined') {
    notify({ message: t('actionConfigurations.messages.missingId'), color: 'failed' })
    return
  }
  showConfirm(t('actionConfigurations.messages.confirmDelete'), async () => {
    try {
      ShowLoading()
      const res = await actionConfigurationsApi.delete(id)
      HideLoading()
      if (res && (res.success === false)) {
        notify({ message: res.message || t('actionConfigurations.messages.deleteFailed'), color: 'failed' })
      } else {
        notify({ message: res?.message || t('actionConfigurations.messages.deleted'), color: 'success' })
        fetchRowData()
      }
    } catch (err: any) {
      HideLoading()
      notify({ message: err?.message || t('actionConfigurations.messages.operationFailed'), color: 'danger' })
    }
  })
}

const bulkDelete = async () => {
  const selected = gridApi.value ? gridApi.value.getSelectedRows() : []
  if (!selected || selected.length === 0) {
    notify({ message: t('actionConfigurations.messages.selectForDelete'), color: 'warning' })
    return
  }
  showConfirm(t('actionConfigurations.messages.confirmBulkDelete', { count: selected.length }), async () => {
    try {
      ShowLoading()
      const results = await Promise.all(selected.map((r: any) => {
        const id = String(r?.actionConfigId ?? r?.id ?? '')
        return id && id !== 'null' && id !== 'undefined' ? actionConfigurationsApi.delete(id) : Promise.resolve(null)
      }))
      HideLoading()
      notify({ message: t('actionConfigurations.messages.deletedCount', { count: results.length }), color: 'success' })
      fetchRowData()
    } catch (err: any) {
      HideLoading()
      notify({ message: err?.message || t('actionConfigurations.messages.bulkDeleteFailed'), color: 'danger' })
    }
  })
}

const addActionConfig = () => {
  editFormRef.value = {
    actionConfigId: null,
    actionCategory: 1,
    actionCategoryName: '',
    manufacturer: '',
    robotType: 1,
    actionName: '',
    actionDescription: '',
    executionScope: '',
    blockingType: 1,
    isEnabled: true,
    sortOrder: 1,
    remarks: '',
    parameters: []
  }
  editModalOpen.value = true
}

const parameterValueTypeOptions = computed(() => getParameterValueTypeOptions())
const parameterSourceTypeOptions = computed(() => getParameterSourceTypeOptions())

const addParameter = () => {
  if (!editFormRef.value.parameters) {
    editFormRef.value.parameters = []
  }
  editFormRef.value.parameters.push({
    paramId: null,
    parameterName: '',
    parameterValueType: 1,
    parameterDescription: '',
    isMandatory: false,
    defaultValue: '',
    parameterSourceType: 1,
    parameterSourcePath: '',
    valueConstraints: '',
    remarks: '',
    sortOrder: editFormRef.value.parameters.length
  })
}

const removeParameter = (index: number) => {
  if (editFormRef.value.parameters) {
    editFormRef.value.parameters.splice(index, 1)
  }
}

const parameterGridApi = ref<any>(null)

const parameterColumnDefs = computed<ColDef[]>(() => [
  { checkboxSelection: true, headerCheckboxSelection: true, width: 50, pinned: 'left', filter: false, sortable: false },
  { 
    field: 'parameterName', 
    headerName: t('actionConfigurations.parameters.parameterName'), 
    width: 150,
    editable: true
  },
  { 
    field: 'parameterValueType', 
    headerName: t('actionConfigurations.parameters.parameterValueType'), 
    width: 120,
    editable: true,
    cellEditor: 'agSelectCellEditor',
    cellEditorParams: {
      values: parameterValueTypeOptions.value.map(o => o.value)
    },
    valueFormatter: (params: any) => {
      const option = parameterValueTypeOptions.value.find(o => o.value === params.value)
      return option?.text || params.value
    }
  },
  { 
    field: 'parameterSourceType', 
    headerName: t('actionConfigurations.parameters.parameterSourceType'), 
    width: 150,
    editable: true,
    cellEditor: 'agSelectCellEditor',
    cellEditorParams: {
      values: parameterSourceTypeOptions.value.map(o => o.value)
    },
    valueFormatter: (params: any) => {
      const option = parameterSourceTypeOptions.value.find(o => o.value === params.value)
      return option?.text || params.value
    }
  },
  { 
    field: 'parameterSourcePath', 
    headerName: t('actionConfigurations.parameters.parameterSourcePath'), 
    width: 150,
    editable: true
  },
  { 
    field: 'defaultValue', 
    headerName: t('actionConfigurations.parameters.defaultValue'), 
    width: 120,
    editable: true
  },
  { 
    field: 'valueConstraints', 
    headerName: t('actionConfigurations.parameters.valueConstraints'), 
    width: 120,
    editable: true
  },
  { 
    field: 'isMandatory', 
    headerName: t('actionConfigurations.parameters.isMandatory'), 
    width: 80,
    editable: true,
    cellEditor: 'agCheckboxCellEditor',
    valueFormatter: (p: any) => p.value ? t('actionConfigurations.options.yes') : t('actionConfigurations.options.no')
  },
  { 
    field: 'sortOrder', 
    headerName: t('actionConfigurations.parameters.sortOrder'), 
    width: 80,
    editable: true,
    cellEditor: 'agNumberCellEditor'
  },
  { 
    field: 'parameterDescription', 
    headerName: t('actionConfigurations.parameters.parameterDescription'), 
    width: 200,
    editable: true,
    flex: 1
  },
  { 
    field: 'remarks', 
    headerName: t('actionConfigurations.parameters.remarks'), 
    width: 150,
    editable: true
  }
])

const parameterDefaultColDef = ref<ColDef>({
  resizable: true,
  sortable: false,
  filter: false
})

function onParameterGridReady(params: GridReadyEvent) {
  parameterGridApi.value = params.api
}

const deleteSelectedParameters = () => {
  if (!parameterGridApi.value) return
  const selected = parameterGridApi.value.getSelectedRows()
  if (!selected || selected.length === 0) {
    notify({ message: t('actionConfigurations.parameters.selectForDelete'), color: 'warning' })
    return
  }
  
  if (editFormRef.value.parameters) {
    editFormRef.value.parameters = editFormRef.value.parameters.filter(
      (param: any) => !selected.some((s: any) => s === param)
    )
  }
}

const viewModalOpen = ref(false)
const viewData = ref<any>({})

const onView = async (paramsOrId: any) => {
  try {
    const id = String((paramsOrId && (paramsOrId.actionConfigId ?? paramsOrId.id)) ?? paramsOrId)
    const res = await actionConfigurationsApi.get(id)
    const data = (res && (res.Data ?? res.data)) || res || {}
    viewData.value = data
    viewModalOpen.value = true
  } catch (err: any) {
    notify({ message: err?.message || '加载失败', color: 'danger' })
  }
}

(window as any).onEditActionConfig = onEdit;
(window as any).onDeleteActionConfig = onDelete;

const ShowLoading = () => {
  tbLoading.value = true
}

const HideLoading = () => {
  tbLoading.value = false
}

const onFilterChanged = (params: FilterChangedEvent) => {
  if (!isGridInitialized.value || isFetchingData.value) return
    const filterModel = params.api.getFilterModel()
  // 转换 blockingType 筛选模型格式：filterType 为 enum，type 为选中的值
  if (filterModel.blockingType) {
    const selectedValue = filterModel.blockingType.type // AG-Grid 的 type 是选中的 displayKey
    filterModel.blockingType = {
      filterType: 'enum',
      type: 'equals',
      filter: parseInt(selectedValue, 10) || selectedValue
    }
  }
  if (filterModel.actionCategory) {
    const selectedValue = filterModel.actionCategory.type // AG-Grid 的 type 是选中的 displayKey
    filterModel.actionCategory = {
      filterType: 'enum',
      type: 'equals',
      filter: parseInt(selectedValue, 10) || selectedValue
    }
  }
  if (filterModel.robotType) {
    const selectedValue = filterModel.robotType.type // AG-Grid 的 type 是选中的 displayKey
    filterModel.robotType = {
      filterType: 'enum',
      type: 'equals',
      filter: parseInt(selectedValue, 10) || selectedValue
    }
  }
  queryParams.value.filterModel = filterModel
  fetchRowData()
}

const onPaginationChange = (page: number) => {
  if (page !== queryParams.value.pageNumber) {
    queryParams.value.pageNumber = page
    fetchRowData()
  }
}

const refreshData = async () => {
  try {
    await fetchRowData()
    notify({ message: t('actionConfigurations.messages.refreshSuccess'), color: 'success' })
  } catch (err: any) {
    notify({ message: err?.message || t('actionConfigurations.messages.refreshFailed'), color: 'danger' })
  }
}

const resetFilters = () => {
  try {
    if (gridApi.value) {
      queryParams.value.filterModel = {}
      gridApi.value.setFilterModel(null)
      fetchRowData()
      notify({ message: t('actionConfigurations.messages.resetSuccess'), color: 'success' })
    }
  } catch (err: any) {
    notify({ message: err?.message || t('actionConfigurations.messages.resetFailed'), color: 'danger' })
  }
}

const fetchRowData = async () => {
  if (isFetchingData.value) return
  try {
    isFetchingData.value = true
    ShowLoading()
    const params = {
      ...queryParams.value,
      filterModel: JSON.stringify(queryParams.value.filterModel || {})
    }
    const res = await actionConfigurationsApi.list(params)
    HideLoading()
    if (!res.success) {
      notify({ message: res.message, color: 'failed' })
    }
    const data = (res && (res.Data ?? res.data)) || []
    rowData.value = Array.isArray(data) ? data : []
    if (res?.pageInfo) {
      const pageInfo = res.pageInfo
      paginationRowCount.value = pageInfo.totalCount || 0
      totalPages.value = pageInfo.totalPages || 1
      currentPage.value = pageInfo.pageNumber || 1
    }
  } catch (err: any) {
    HideLoading()
    notify({ message: err?.message || t('actionConfigurations.messages.fetchFailed'), color: 'danger' })
  } finally {
    isFetchingData.value = false
  }
}

onBeforeMount(async () => {
  await loadOptions()
})

// 监听 blockingTypeOptions 变化，更新列定义中的筛选参数
watch(blockingTypeOptions, (newOptions) => {
  if (newOptions && newOptions.length > 0) {
    const cols = [...columnDefs.value]
    const blockingTypeCol = cols.find(c => c.field === 'blockingType')
    if (blockingTypeCol) {
      blockingTypeCol.filterParams = createSelectFilterParams(newOptions)
      columnDefs.value = cols
    }
  }
}, { immediate: true })

// 监听 actionCategoryOptions 变化，更新列定义中的筛选参数
watch(actionCategoryOptions, (newOptions) => {
  if (newOptions && newOptions.length > 0) {
    const cols = [...columnDefs.value]
    const col = cols.find(c => c.field === 'actionCategory')
    if (col) {
      col.filterParams = createSelectFilterParams(newOptions)
      columnDefs.value = cols
    }
  }
}, { immediate: true })

// 监听 robotTypeOptions 变化，更新列定义中的筛选参数
watch(robotTypeOptions, (newOptions) => {
  if (newOptions && newOptions.length > 0) {
    const cols = [...columnDefs.value]
    const col = cols.find(c => c.field === 'robotType')
    if (col) {
      col.filterParams = createSelectFilterParams(newOptions)
      columnDefs.value = cols
    }
  }
}, { immediate: true })

</script>

<template>
  <VaCard>
    <VaCardContent>
      <div class="flex flex-col md:flex-row gap-2 mb-2 justify-between">
        <div class="flex items-center gap-2">
          <div role="group" aria-label="action-config-actions" style="display:inline-flex; border-radius:6px; overflow:hidden;">
            <VaButton size="small" @click="addActionConfig" :title="t('actionConfigurations.actions.add')" :aria-label="t('actionConfigurations.actions.add')" preset="primary" style="border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06)" icon="add" />
            <VaButton size="small" @click="bulkDelete" :title="t('actionConfigurations.actions.delete')" :aria-label="t('actionConfigurations.actions.delete')" preset="primary" style="border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06)" icon="delete" />
            <VaButton size="small" @click="refreshData" :title="t('actionConfigurations.actions.refresh')" :aria-label="t('actionConfigurations.actions.refresh')" preset="primary" style="border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06)" icon="sync" />
            <VaButton size="small" @click="resetFilters" :title="t('actionConfigurations.actions.resetFilters')" :aria-label="t('actionConfigurations.actions.resetFilters')" preset="primary" style="border-radius:0; margin:0;" icon="clear_all" />
          </div>
        </div>
        <div class="flex items-center">
          <VaPagination
            v-model="currentPage"
            class="justify-end map-pagination"
            style="height: 24px; min-height: 24px;"
            :pages="totalPages"
            input
            @update:model-value="onPaginationChange"
          />
        </div>
      </div>

      <div class="table-container">
        <AgGridVue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          @filter-changed="onFilterChanged"
          :tooltipShowDelay="ref(500)"
          :columnDefs="columnDefs"
          :loading="tbLoading"
          :localeText="gridLocaleText"
          :defaultColDef="defaultColDef"
          :rowSelection="'multiple'"
          :checkboxSelection="true"
          :headerCheckboxSelection="true"
          :rowData="rowData"></AgGridVue>
      </div>
    </VaCardContent>
  </VaCard>

  <VaModal v-model="confirmModalOpen" size="small" close-button :ok-text="t('vuestic.ok')" :cancel-text="t('vuestic.cancel')" @ok="handleConfirm">
    <h3 class="modal-title">{{ t('common.confirmOperation') }}</h3>
    <p style="margin: 1rem 0;">{{ confirmMessage }}</p>
  </VaModal>

  <VaModal v-model="editModalOpen" size="medium" close-button max-height="calc(100vh - 20px)" :ok-text="t('vuestic.ok')" :cancel-text="t('vuestic.cancel')" @ok="saveEdit" hide-default-actions>
    <template #header>
      <h3 class="modal-title">{{ editFormRef.actionConfigId ? t('actionConfigurations.form.title.edit') : t('actionConfigurations.form.title.add') }}</h3>
    </template>
    <div class="modal-content-scrollable">
      <VaForm ref="editForm">
        <div class="section">
          <div class="form-row">
            <VaSelect v-model="editFormRef.actionCategory" :label="t('actionConfigurations.form.actionCategory')" :options="actionCategoryOptions" text-by="text" value-by="value" :rules="[(v: any) => !!v || t('auth.required_field')]" />
            <VaInput v-model="editFormRef.manufacturer" :label="t('actionConfigurations.form.manufacturer')" :rules="[(v: any) => !!v || t('auth.required_field')]" />
          </div>
          <div class="form-row">
            <VaSelect v-model="editFormRef.robotType" :label="t('actionConfigurations.form.robotType')" :options="robotTypeOptions" text-by="text" value-by="value" />
            <VaInput v-model="editFormRef.actionName" :label="t('actionConfigurations.form.actionName')" :rules="[(v: any) => !!v || t('auth.required_field')]" />
          </div>
          <div class="form-row">
            <VaSelect v-model="editFormRef.blockingType" :label="t('actionConfigurations.form.blockingType')" :options="blockingTypeOptions" text-by="text" value-by="value" />
            <VaInput v-model="editFormRef.executionScope" :label="t('actionConfigurations.form.executionScope')" />
          </div>
          <div class="form-row">
            <VaInput v-model="editFormRef.sortOrder" type="number" :label="t('actionConfigurations.form.sortOrder')" />
          </div>
          <div class="form-row">
            <VaTextarea v-model="editFormRef.actionDescription" :label="t('actionConfigurations.form.actionDescription')" :min-rows="2" class="form-textarea" />
          </div>
          <div class="form-row">
            <VaTextarea v-model="editFormRef.remarks" :label="t('actionConfigurations.form.remarks')" :min-rows="2" class="form-textarea" />
          </div>
          <div class="form-row">
            <VaSwitch v-model="editFormRef.isEnabled" :label="t('actionConfigurations.form.isEnabled')" />
          </div>

          <VaDivider style="margin: 1.5rem 0;">{{ t('actionConfigurations.form.parameters') }}</VaDivider>
          
          <div style="margin-bottom: 1rem; display: flex; gap: 0.5rem;">
            <VaButton size="small" @click="addParameter" icon="add">{{ t('actionConfigurations.form.addParameter') }}</VaButton>
            <VaButton size="small" @click="deleteSelectedParameters" icon="delete" color="danger">{{ t('actionConfigurations.form.deleteSelected') }}</VaButton>
          </div>

          <div style="height: 400px; width: 100%;">
            <AgGridVue
              style="width: 100%; height: 100%;"
              @grid-ready="onParameterGridReady"
              :columnDefs="parameterColumnDefs"
              :defaultColDef="parameterDefaultColDef"
              :rowSelection="'multiple'"
              :rowData="editFormRef.parameters || []"
              :stopEditingWhenCellsLoseFocus="true"
            />
          </div>
        </div>
      </VaForm>
    </div>
    <template #footer>
      <VaButton preset="secondary" @click="editModalOpen = false">{{ t('vuestic.cancel') }}</VaButton>
      <VaButton @click="saveEdit">{{ t('vuestic.ok') }}</VaButton>
    </template>
  </VaModal>

  <VaModal v-model="viewModalOpen" size="large" close-button max-height="calc(100vh - 20px)" hide-default-actions>
    <template #header>
      <h3 class="modal-title">{{ t('actionConfigurations.detail.title') }}</h3>
    </template>
    <div class="modal-content-scrollable">
      <div class="detail-section">
        <div class="detail-row">
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.actionName') }}:</span>
            <span class="detail-value">{{ viewData.actionName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.actionCategory') }}:</span>
            <span class="detail-value">{{ actionCategoryOptions.find((opt: any) => opt.value === viewData.actionCategory)?.text || viewData.actionCategory }}</span>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.manufacturer') }}:</span>
            <span class="detail-value">{{ viewData.manufacturer }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.robotType') }}:</span>
            <span class="detail-value">{{ robotTypeOptions.find((opt: any) => opt.value === viewData.robotType)?.text || viewData.robotType }}</span>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item full-width">
            <span class="detail-label">{{ t('actionConfigurations.detail.actionDescription') }}:</span>
            <span class="detail-value">{{ viewData.actionDescription }}</span>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.executionScope') }}:</span>
            <span class="detail-value">{{ viewData.executionScope }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.blockingType') }}:</span>
            <span class="detail-value">{{ blockingTypeOptions.find((opt: any) => opt.value === viewData.blockingType)?.text || viewData.blockingType }}</span>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.isEnabled') }}:</span>
            <span class="detail-value">{{ viewData.isEnabled ? t('actionConfigurations.options.yes') : t('actionConfigurations.options.no') }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">{{ t('actionConfigurations.detail.sortOrder') }}:</span>
            <span class="detail-value">{{ viewData.sortOrder }}</span>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item full-width">
            <span class="detail-label">{{ t('actionConfigurations.detail.remarks') }}:</span>
            <span class="detail-value">{{ viewData.remarks }}</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <VaButton @click="viewModalOpen = false">{{ t('actionConfigurations.detail.close') }}</VaButton>
    </template>
  </VaModal>
</template>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  height: calc(100vh - 195px);
  min-height: 400px;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--va-text-primary);
}

.modal-content-scrollable {
  max-height: calc(100vh - 215px);
  overflow-y: auto;
  overflow-x: hidden;
}

.detail-section {
  padding: 1rem;
}

.detail-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.detail-item {
  display: flex;
  gap: 0.5rem;

  &.full-width {
    grid-column: 1 / -1;
  }
}

.detail-label {
  font-weight: 600;
  min-width: 80px;
  color: var(--va-text-secondary);
}

.detail-value {
  color: var(--va-text-primary);
}

:deep(.va-pagination) {
  height: 24px;
  min-height: 24px;
}

:deep(.va-pagination .va-button) {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
}

:deep(.map-pagination .va-input) {
  height: 24px;
  min-height: 24px;
  width: 80px !important;
  max-width: 80px !important;
}

:deep(.map-pagination .va-input__input) {
  height: 24px;
  min-height: 24px;
  padding: 0 4px;
  width: 80px !important;
  max-width: 80px !important;
}

:deep(.map-pagination .va-input-wrapper) {
  width: 80px !important;
  max-width: 80px !important;
}

:deep(.map-pagination input) {
  width: 80px !important;
  max-width: 80px !important;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;

  > * {
    flex: 1;
  }
}

.form-textarea {
  max-width: calc(50% - 0.5rem);
  width: calc(50% - 0.5rem);
}
</style>