vxeTable 配置扩展 ​

<script setup lang="ts">
// 本地 vxe-grid 组件使用，减少配置
import {
  viewVxeTableConfig,
  editVxeTableConfig,
  fullVxeGridProps,
} from "@qqt-product/ui";
</script>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  localConfig: {
    groups: [
      {
        groupName: "询价行信息",
        groupNameI18nKey: "i18n_title_RFQLineInformation",
        groupCode: "purchaseEnquiryItemList",
        groupType: "item",
        sortOrder: "2",
        extend: {
          // 注: vxeGrid 属性须配置在 vxeGridConfig 中
          vxeGridConfig: {
            height: 500,
          },
        },
      },
    ],
  },
});

onBeforeMount(() => {
  // 动态获取屏幕高度
  const clientHeight = document.documentElement.clientHeight;
  const maxHeight = clientHeight - 314;

  options.localConfig?.groups?.forEach((group) => {
    if (group.groupCode === "purchaseEnquiryItemList") {
      if (group.extend?.vxeGridConfig) {
        group.extend.vxeGridConfig.height = maxHeight;
      }
    }
  });
});
</script>

<template>
  <div class="edit-page">
    <q-edit-page-layout
      ref="layoutRef"
      v-bind="options"
      @itemListAdd="handleItemListAdd"
      @supplierAdd="handleSupplierAdd"
      @customPublish="handleCustomPublish"
      @back="back"
      @pageBack="handlePageBack"
      @vxe_keydown="handleVxeKeydown"
      @vxe_headerCellClick="handleVxeHeaderCellClick"
      @vxe_headerCellDblclick="handleVxeHeaderCellDblclick"
      @vxe_headerCellMenu="handleVxeHeaderCellMenu"
      @vxe_cellClick="handleVxeCellClick"
      @vxe_cellDblclick="handleVxeCellDblclick"
      @vxe_cellMenu="handleVxeCellMenu"
      @vxe_footerCellClick="handleVxeFooterCellClick"
      @vxe_footerCellDblclick="handleVxeFooterCellDblclick"
      @vxe_footerCellMenu="handleVxeFooterCellMenu"
      @vxe_radioChange="handleVxeRadioChange"
      @vxe_checkboxChange="handleVxeCheckboxChange"
      @vxe_checkboxAll="handleVxeCheckboxAll"
      @vxe_scroll="handleVxeScroll"
      @vxe_zoom="handleVxeZoom"
      @vxe_custom="handleVxeCustom"
      @vxe_cell_area_cut="handleGridCellAreaCut"
      @vxe_cell_area_copy="handleGridCellAreaCopy"
      @vxe_cell_area_paste="handleGridCellAreaPaste"
    ></q-edit-page-layout>
  </div>
</template>

<script setup lang="ts">
// vxe表格事件 start
// 当表格被激活且键盘被按下时会触发的事件
const handleVxeKeydown = (params: GlobalPageLayoutTypes.KeydownEventParams) => {
  console.log("vxe_keydown", params);
};
// 表头单元格被点击时会触发该事件
const handleVxeHeaderCellClick = (
  params: GlobalPageLayoutTypes.HeaderCellClickEventParams
) => {
  console.log("vxe_headerCellClick", params);
};
// 表头单元格被双击时会触发该事件
const handleVxeHeaderCellDblclick = (
  params: GlobalPageLayoutTypes.HeaderCellDblclickEventParams
) => {
  console.log("vxe_headerCellDblclick", params);
};
// 只对 menu-config 配置时有效，表头单元格被鼠标右键时触发该事件
const handleVxeHeaderCellMenu = (
  params: GlobalPageLayoutTypes.HeaderCellMenuEventParams
) => {
  console.log("vxe_headerCellMenu", params);
};
// 单元格被点击时会触发该事件
const handleVxeCellClick = (
  params: GlobalPageLayoutTypes.CellClickEventParams
) => {
  console.log("vxe_cellClick", params);
};
// 单元格被双击时会触发该事件
const handleVxeCellDblclick = (
  params: GlobalPageLayoutTypes.CellDblclickEventParams
) => {
  console.log("vxe_cellDblclick", params);
};
// 只对 menu-config 配置时有效，单元格被鼠标右键时触发该事件
const handleVxeCellMenu = (
  params: GlobalPageLayoutTypes.CellMenuEventParams
) => {
  console.log("vxe_cellMenu", params);
};
// 表尾单元格被点击时会触发该事件
const handleVxeFooterCellClick = (
  params: GlobalPageLayoutTypes.FooterCellClickEventParams
) => {
  console.log("vxe_footerCellClick", params);
};
// 表尾单元格被双击时会触发该事件
const handleVxeFooterCellDblclick = (
  params: GlobalPageLayoutTypes.FooterCellDblclickEventParams
) => {
  console.log("vxe_footerCellDblclick", params);
};
// 只对 menu-config 配置时有效，表尾单元格被鼠标右键时触发该事件
const handleVxeFooterCellMenu = (
  params: GlobalPageLayoutTypes.FooterCellMenuEventParams
) => {
  console.log("vxe_footerCellMenu", params);
};
// 只对 type=radio 有效，当手动勾选并且值发生改变时触发的事件
const handleVxeRadioChange = (
  params: GlobalPageLayoutTypes.RadioChangeEventParams
) => {
  console.log("vxe_radioChange", params);
};
// 只对 type=checkbox 有效，当手动勾选并且值发生改变时触发的事件
const handleVxeCheckboxChange = (
  params: GlobalPageLayoutTypes.CheckboxChangeEventParams
) => {
  console.log("vxe_checkboxChange", params);
};
// 只对 type=checkbox 有效，当手动勾选全选时触发的事件
const handleVxeCheckboxAll = (
  params: GlobalPageLayoutTypes.CheckboxAllEventParams
) => {
  console.log("vxe_checkboxAll", params);
};
// 表格滚动时会触发该事件
const handleVxeScroll = (params: GlobalPageLayoutTypes.ScrollEventParams) => {
  console.log("vxe_scroll", params);
};
// 当最大化或还原操作被手动点击时会后触发该事件
const handleVxeZoom = (params: GlobalPageLayoutTypes.ZoomEventParams) => {
  console.log("vxe_zoom", params);
};
// 如果与工具栏关联，在自定义列按钮被手动点击后会触发该事件
const handleVxeCustom = (params: GlobalPageLayoutTypes.CustomEventParams) => {
  console.log("vxe_custom", params);
};
// 只对 keyboard-config.isClip 配置时有效，在单元格被剪贴时会触发该事件
const handleGridCellAreaCut = (
  params: GlobalPageLayoutTypes.CellAreaCutParams
) => {
  console.log("cut params :>> ", params);
};
// 只对 keyboard-config.isClip 配置时有效，在单元格被复制时会触发该事件
const handleGridCellAreaCopy = (
  params: GlobalPageLayoutTypes.CellAreaCopyParams
) => {
  console.log("copy params :>> ", params);
};
// 只对 keyboard-config.isClip 配置时有效，在单元格被粘贴时会触发该事件
const handleGridCellAreaPaste = (
  params: GlobalPageLayoutTypes.CellAreaPasteParams
) => {
  console.log("paste params :>> ", params);
};
// vxe表格事件 end
</script>

<script setup lang="ts">
// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  localConfig: {
    groups: [
      {
        groupName: "分包信息",
        groupCode: "purchaseBiddingHeadList",
        groupType: "item",
        sortOrder: "2",
        extend: {
          // 注: vxe-table 相关属性须配置在 vxeGridConfig 中
          vxeGridConfig: {
            editConfig: {
              trigger: "click", // 点击触发编辑
              mode: "row", // 行编辑模式
              /**
               * @description: 表行编辑规则
               * @param {Object} pageData 页面所有数据, ref响应对象，注意在使用时须带上.value
               * @param {Object} row 表行数据
               * @param {number} rowIndex 表行索引值
               * @param {Object} column 列配置
               * @param {number} columnIndex 列索引
               * @return {boolean} 返回布尔值, 为 true 时允许编辑
               */
              beforeEditMethod(
                pageData,
                { row, rowIndex, column, columnIndex }
              ) {
                console.log("row :>> ", row);
                console.log("rowIndex :>> ", rowIndex);
                console.log("column :>> ", column);
                console.log("columnIndex :>> ", columnIndex);
                console.log("pageData :>> ", pageData.value);
                if (
                  pageData.value.mustMaterialNumber === "0" ||
                  columnIndex === 2
                ) {
                  return false;
                }
                return true;
              },
            },
          },
        },
      },
    ],
  },
});
</script>

<template>
  <div class="detail-page">
    <q-detail-page-layout
      ref="layoutRef"
      v-bind="options"
    ></q-detail-page-layout>
  </div>
</template>

<script setup lang="ts">
import type {
  VxeColumnSlotTypes,
  VxeTableDataRow,
  VxeTablePropTypes,
} from "vxe-table";

// 表头动态样式配置
const headerCellStyle: VxeTablePropTypes.HeaderCellStyle<VxeTableDataRow> = ({
  column,
}) => {
  if (column.field === "requireDate") {
    return {
      backgroundColor: "#f60",
      color: "#ffffff",
    };
  }
};

// 行动态样式配置
const rowStyle: VxeTablePropTypes.RowStyle<VxeTableDataRow> = ({
  rowIndex,
}) => {
  if ([2, 3, 5].includes(rowIndex)) {
    return {
      backgroundColor: "red",
      color: "#ffffff",
    };
  }
};

// 单元格动态样式配置
const cellStyle: VxeTablePropTypes.CellStyle<VxeTableDataRow> = ({
  row,
  column,
}) => {
  if (column.field === "requireQuantity") {
    if (row.requireQuantity >= 300) {
      return {
        backgroundColor: "#187",
      };
    } else {
      return {
        backgroundColor: "#2db7f5",
      };
    }
  }
};

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // 本地页面数据配置
  localConfig: {
    groups: [
      {
        groupName: "竞价行信息",
        groupNameI18nKey: "i18n_title_ebiddingBankInfo",
        groupCode: "purchaseEbiddingItemList",
        groupType: "item",
        sortOrder: "2",
        extend: {
          vxeGridConfig: {
            headerCellStyle,
            rowStyle,
            cellStyle,
          },
        },
      },
    ],
  },
});
</script>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  localConfig: {
    groups: [
      {
        groupName: "竞价行信息",
        groupNameI18nKey: "i18n_title_ebiddingBankInfo",
        groupCode: "purchaseEbiddingItemList",
        groupType: "item",
        sortOrder: "2",
        setPrefixColumn: true, // 默认为 true
        prefixColumnType: "radio", // 默认为 'checkbox'
      },
    ],
  },
});
</script>

<template>
  <div class="edit-page">
    <q-edit-page-layout
      ref="layoutRef"
      v-bind="options"
      @instance="handleInstance"
      @vxe_instance="handleGridInstance"
    ></q-edit-page-layout>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'

// ui组件库 types
import type { GlobalPageLayoutTypes } from '@qqt-product/ui'
import type { VxeGridInstance } from 'vxe-table'
import type { FormInstance } from 'ant-design-vue'

const baseFormRef = ref<FormInstance>()
const purchaseEnquiryItemListGridRef = ref<VxeGridInstance>()
const enquirySupplierListListGridRef = ref<VxeGridInstance>()


// 获取 form表单 ref实例
const handleInstance = (params: GlobalPageLayoutTypes.InstanceParams) => {
  console.log('instance params :>> ', params)
  const { groupCode, formRef } = params
  if (groupCode === 'baseForm') {
    baseFormRef.value = formRef
  }
}

// 获取 vxeGrid表格 ref实例
const handleGridInstance = (params: GlobalPageLayoutTypes.VxeInstanceParams) => {
  console.log('vxeInstance params :>> ', params)
  const { groupCode, $grid } = params
  // 询价行信息
  if (groupCode === 'purchaseEnquiryItemList') {
    purchaseEnquiryItemListGridRef.value = $grid
  }
  // 供应商信息
  if (groupCode === 'enquirySupplierListList') {
    enquirySupplierListListGridRef.value = $grid
  }
}

const handleAfterDetailApiResponse = ({ pageData }: GlobalPageLayoutTypes.Expose) => {
  // 新建时不处理
  if (!pageData.id) {
    return
  }

  nextTick(() => {
    console.log('purchaseEnquiryItemListGridRef :>> ', purchaseEnquiryItemListGridRef.value)
    // 默认勾选 询价行信息表行 第一、二行数据
    if (purchaseEnquiryItemListGridRef.value) {
      const { fullData } = purchaseEnquiryItemListGridRef.value.getTableData()
      if (fullData && fullData.length >= 2) {
        purchaseEnquiryItemListGridRef.value.setCheckboxRow([fullData[0], fullData[1]], true)
      }
    }

    // 默认勾选 供应商信息表行 第三、四行数据
    if (enquirySupplierListListGridRef.value) {
      const { fullData } = enquirySupplierListListGridRef.value.getTableData()

      if (fullData && fullData.length >= 4) {
        enquirySupplierListListGridRef.value.setCheckboxRow([fullData[2], fullData[3]], true)
      }
    }
  })
}

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // ...
  handleAfterDetailApiResponse,
})
</script>