fix:东改改，西改改

src/common/types/ag-grid.ts

+interface CallbackFun {
+  <T>(data: T): T;
+}
+
+// Color name for component from the Quasar Color Palette
+interface CellRenderButtonsType {
+  hide?: boolean;
+  label?: string;
+  icon?: string;
+  color?: string;
+  textColor?: string;
+  tooltip?: string;
+  loading?: boolean;
+  disable?: boolean;
+  dense?: boolean;
+  noCaps?: boolean;
+  round?: boolean;
+  flat?: boolean;
+  outline?: boolean;
+  unelevated?: boolean;
+  rounded?: boolean;
+  push?: boolean;
+  square?: boolean;
+  glossy?: boolean;
+  fab?: boolean;
+  callback: CallbackFun;
+}
+
+interface MoreButtonsItemType {
+  hide?: boolean;
+  label: string;
+  icon?: string;
+  color?: string;
+  callback: CallbackFun;
+}
+
+type OmitMoreButtonsType = Omit<CellRenderButtonsType, 'callback'>;
+
+interface MoreButtonsType extends OmitMoreButtonsType {
+  children?: Array<MoreButtonsItemType>;
+}
+
+interface ButtonCellRenderType {
+  buttons: Array<CellRenderButtonsType>;
+  moreButtons?: MoreButtonsType;
+  [proppName: string]: any;
+}
+
+interface ColumnDefsType {
+  field?: string;
+  headerName?: string;
+  width?: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  pinned?: string; // 固定在左/右 left right
+  editable?: boolean; // 可以编辑单元格
+  flex?: number;
+  cellEditor?: any;
+  cellRenderer?: any;
+  cellRendererParams?: any;
+  [proppName: string]: any;
+}
+
+export type {
+  ColumnDefsType,
+  ButtonCellRenderType,
+  CellRenderButtonsType,
+  MoreButtonsType,
+};

src/common/types/index.ts

@@ -3,3 +3,4 @@ export interface AnyType {
 }
 
 export * from './dialog-layout-props';
+export * from './ag-grid';

src/modules/page9/ag-grid-element/ButtonCellRender.vue

 <script setup lang="ts">
-import { onMounted, reactive, watchEffect } from 'vue';
+import { reactive, watchEffect, computed } from 'vue';
+import { isEmpty, every, omit } from 'src/common/utils';
+import type {
+  CellRenderButtonsType as ButtonsType,
+  MoreButtonsType,
+} from 'src/common/types';
 
 const props = defineProps<{
   params: any;
@@ -20,22 +25,86 @@ const props = defineProps<{
  */
 
 const state = reactive({
-  buttons: [],
+  buttons: [] as ButtonsType[],
+  moreButtons: {} as MoreButtonsType,
 });
 
 watchEffect(() => {
-  state.buttons = props.params.buttons;
+  state.buttons = props.params.buttons || [];
+  state.moreButtons = props.params.moreButtons || {};
 });
 
-onMounted(() => {
-  console.log('props', props.params);
+const showMoreButtons = computed(() => {
+  const hide = state.moreButtons.hide;
+  const children = state.moreButtons.children;
+
+  if (hide) {
+    return false;
+  } else {
+    if (isEmpty(children)) {
+      return false;
+    } else {
+      if (every(children, 'hide')) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+  }
+});
+
+const showButtons = computed(() => {
+  const buttons = state.buttons;
+  if (isEmpty(buttons)) {
+    return false;
+  } else {
+    if (every(buttons, 'hide')) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+});
+
+const moreButton = computed(() => {
+  return omit(state.moreButtons, 'children');
 });
 </script>
 <template>
   <div>
-    <div class="q-gutter-xs">
-      <q-btn color="primary" label="按钮1" />
-      <q-btn color="primary" label="按钮2" />
+    <div class="row">
+      <div class="q-gutter-xs" v-if="showButtons">
+        <q-btn
+          v-for="(item, index) in state.buttons"
+          :key="index"
+          v-bind="item"
+          @click="item.callback(props.params)"
+        >
+          <q-tooltip v-if="item.tooltip">
+            {{ item.tooltip }}
+          </q-tooltip>
+        </q-btn>
+      </div>
+      <div class="q-gutter-xs" v-if="showMoreButtons">
+        <q-btn v-bind="moreButton">
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item
+                clickable
+                v-close-popup
+                v-for="(item, index) in state.moreButtons.children"
+                :key="index"
+                @click="item.callback(props.params)"
+              >
+                <q-item-section avatar v-if="!isEmpty(item.icon)">
+                  <q-icon :color="item.color || 'grey-9'" :name="item.icon" />
+                </q-item-section>
+                <q-item-section>{{ item.label }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </div>
     </div>
   </div>
 </template>

src/modules/page9/element/AgGridCustomCellEdit.vue

@@ -6,12 +6,18 @@
 -->
 <script setup lang="ts">
 import { ref, reactive, onMounted, toRaw } from 'vue';
+import { useMessage } from 'src/common/hooks';
+
 import { AgGridVue } from 'ag-grid-vue3';
+import { MyBtn } from 'src/components';
 import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
 import DoubleNumberEdit from '../ag-grid-element/DoubleNumberEdit.vue';
 import MyCellEditer from '../ag-grid-element/MyCellEditer.vue';
 import ButtonCellRender from '../ag-grid-element/ButtonCellRender.vue';
-import { MyBtn } from 'src/components';
+
+import type { ColumnDefsType, ButtonCellRenderType } from 'src/common/types';
+
+const { info } = useMessage();
 
 const defaultColDef = {
   resizable: true,
@@ -23,7 +29,7 @@ const defaultColDef = {
 const gridApi = ref<any>(null);
 const gridColumnApi = ref<any>(null);
 
-const columnDefs = reactive([
+const columnDefs = reactive<Array<ColumnDefsType>>([
   {
     field: 'name',
     headerName: '姓名',
@@ -36,23 +42,69 @@ const columnDefs = reactive([
   },
   {
     headerName: '操作',
-    width: 200,
+    minWidth: 200,
     pinned: 'right',
     editable: false,
     cellRenderer: ButtonCellRender,
     cellRendererParams: {
       buttons: [
         {
+          hide: false,
           tooltip: '删除',
+          color: 'grey-9',
           round: true,
-          icon: 'add',
-          unelevated: true,
+          icon: 'bi-trash',
+          flat: true,
           callback: (data: any) => {
             onDel(data);
           },
         },
       ],
-    },
+      moreButtons: {
+        hide: false,
+        icon: 'bi-three-dots',
+        color: 'grey-9',
+        round: true,
+        flat: true,
+        children: [
+          {
+            hide: false,
+            label: '复制',
+            icon: 'bi-clipboard-check',
+            color: 'light-green-6',
+            callback: () => {
+              info('复制');
+            },
+          },
+          {
+            label: '调试',
+            icon: 'bi-bug',
+            color: 'purple-3',
+            callback: () => {
+              info('调试');
+            },
+          },
+          {
+            label: '计划',
+            icon: 'bi-clipboard-data',
+            color: 'orange',
+            callback: () => {
+              info('计划');
+            },
+          },
+
+          {
+            label: '删除',
+            icon: 'bi-trash',
+            color: 'brown-6',
+            callback: (data: any) => {
+              info('删除');
+              onDel(data);
+            },
+          },
+        ],
+      },
+    } as ButtonCellRenderType,
   },
 ]);
 
@@ -89,7 +141,9 @@ function onView() {
 
 function onAdd() {
   state.rowData.push({ name: null, value: null });
-  gridApi.value.setRowData(state.rowData);
+  setTimeout(() => {
+    gridApi.value.setRowData(state.rowData);
+  }, 0);
 }
 
 function onDel(data: any) {
@@ -124,6 +178,7 @@ function onDel(data: any) {
         :headerHeight="54"
         rowClass="page9-ag-grid-element-my-edit-rowbox"
         :suppressContextMenu="true"
+        :suppressCellFocus="true"
         :columnDefs="columnDefs"
         :rowData="state.rowData"
         :defaultColDef="defaultColDef"