模板配置 ​

<template>
  <div class="edit-page">
    <q-edit-page-layout
      v-bind="options"
      @pageBack="handlePageBack"
    ></q-edit-page-layout>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 国际化
import { srmI18n } from "@/utils/srmI18n";
// ui组件库 types
import type { GlobalPageLayoutTypes } from "@qqt-product/ui";
// 按钮常量引用
import { BUTTON_SAVE } from "@qqt-product/ui";
import { message as Message } from "ant-design-vue";
// 全局数据缓存
import { useGlobalStoreWithDefaultValue } from "@/use/useGlobalStore";
import { useRouter } from "vue-router";
const router = useRouter();

// 配置页面缓存
defineOptions({
  name: "srm-enquiry-ebiddingHead-edit",
});

const {
  isCreate, // 布尔值, 是否为新增状态
  getCurrentRow, // 获取父级当前行缓存方法
  userInfo, // 当前登录人信息
} = useGlobalStoreWithDefaultValue();
const currentRow = getCurrentRow(); // 父级当前行缓存

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  /**
   * 模块业务类型 string
   * 取值根据各模块配置
   * 当定义为"custom"时，使用本地配置
   */
  businessType: "ebidding",
  // 布局模式
  pattern: "tab",
  // 当前行缓存数据
  currentRow: currentRow,
  refreshMethods(row?: GlobalPageLayoutTypes.CurrentRow) {
    if (options.currentRow) {
      options.currentRow =
        row ||
        Object.assign({}, options.currentRow, {
          _t: +new Date(),
        });
    }
  },
  // 当前登录人信息
  userInfo: userInfo.value as GlobalPageLayoutTypes.UserInfo,
  // 明细接口 -- 接口字符串
  detailApi: "/ebidding/purchaseEbiddingHead/queryById",
  // 本地页面数据配置
  localConfig: {
    // 本地分组配置
    groups: [],
    //
    itemColumns: [],
  },
  // 页面按钮
  pageButtons: [
    {
      // 保存按钮
      ...BUTTON_SAVE,
      args: {
        url: "/ebidding/purchaseEbiddingHead/edit",
      },
    },
  ],
});

// 回退操作,如果是新增单据, 列表页需要刷新
const backToList: (flag?: boolean) => void = (flag = false) => {
  const path = "/srm/enquiry/ebiddingHead/list";
  const query = flag ? { t: +new Date() } : {};
  router.push({ path, query });
};

// 回退至列表页
const handlePageBack = () => {
  backToList(isCreate.value);
};
</script>

<script setup lang="ts">
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // 方法配置自定义明细接口
  detailApi(row) {
    return {
      url: "/bidding/purchaseBiddingProjectHead/queryById",
      method: "get",
      params: {
        id: row.projectId || '', // 须返回id值
      },
    };
  },
});
</script>

<script setup lang="ts">
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  pageTitle: "xxx", // 模板名称
  showPageHeader: false, // 是否隐藏模板头部
  showLayoutAnchor: false, // vertical布局模式,是否隐藏 anchor 锚点
  isUseLocalPattern: false, // 是否只使用本地布局模式

  isUseLocalData: false, // 是否只使用本地同步数据
  localData: {}, // 本地同步数据
});
</script>

<script setup lang="ts">
// ...
// 兼容处理业务模板中，原行信息各字段在设置了采购方的 groupCode 后
// 到供应方端字段无法显示bug
const handleAfterRemoteConfig = (config) => {
  const itemColumns = config.itemColumns || [];
  itemColumns.forEach((n) => {
    if (n.groupCode === "purchaseEbiddingItemList") {
      n.groupCode = "saleEbiddingItemList";
    }
  });

  return config;
};

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

<script setup lang="ts">
// 自定义组装详情接口数据
const handleAfterDetailApiResponse = ({
  pageData,
  layoutConfig,
  defaultValues,
}: GlobalPageLayoutTypes.Expose) => {
  // console.log("pageData :>> ", pageData);
  // console.log("layoutConfig :>> ", layoutConfig);
  // console.log("defaultValues :>> ", defaultValues);
  let basicUnit = pageData.basicUnit as string;
  if (!pageData.id) {
    const base = {
      basicUnit,
      basicAmount: 1,
      changeUnit: "=",
      objectAmount: 1,
      objectUnit: "",
      isDefault: "1",
    };

    const tableData = pageData[
      "purchaseMaterialMeterUnitList"
    ] as GlobalPageLayoutTypes.RecordString[];

    if (tableData) {
      tableData.push({ ...base, type: "0", _row_id: uniqueId("_row_id_") });
      tableData.push({ ...base, type: "1", _row_id: uniqueId("_row_id_") });
    }
  }
};

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

<script setup lang="ts">
// 按钮常量引用
import {
  BUTTON_FILL_CELLS, // 向下填充
  BUTTON_ADD_ONE_ROW, // 添加行
  BUTTON_DELETE_ROW, // 删除行
  BUTTON_SAVE, // 保存
  BUTTON_PUBLISH, // 发布
  BUTTON_SUBMIT, // 提交审批
  BUTTON_CANCELAUDIT, // 撤销审批
  BUTTON_FLOW_VIEW, // 查看流程
  BUTTON_UPLOAD, // 上传附件
  BUTTON_DOWNLOAD_ALL, // 批量下载
  BUTTON_REMOVE_ALL, // 批量删除
  BUTTON_IMPORT_ROW, // 导入Excel
  BUTTON_CONFIRM, // 确认
  BUTTON_REJECT, // 拒绝
  BUTTON_CUSTOM, // 自定义按钮_1
  BUTTON_CUSTOM_PRIMARY, // 自定义按钮_2
  BUTTON_CUSTOM_DANGER, // 自定义按钮_3
} from "@qqt-product/ui";

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  localConfig: {
    groups: [
      {
        groupName: "确认项",
        groupNameI18nKey: "i18n_field_RLd_1d59643",
        groupCode: "purchaseEbiddingConfirmList",
        groupType: "item",
        sortOrder: "4",
        buttons: [BUTTON_ADD_ONE_ROW, BUTTON_DELETE_ROW], // 普通添加行、删除行, 无需额外配置
      },
    ],
    // 页面按钮
    pageButtons: [
      {
        // 保存
        ...BUTTON_SAVE,
        args: {
          url: "编辑保存api接口地址",
          addUrl: "新增保存 api 接口地址", // 可以不配置, 新增状态模板默认会把 'xxx/edit' 替换为 'xxx/add'
        },
      },
      {
        // 发布
        ...BUTTON_PUBLISH,
        args: {
          url: "发布api接口地址",
        },
        checkBefore: true, // 是否需要校验单据publishAudit字段值状态, 默认为true, 如果需要关闭校验，设置为 false
      },
      {
        // 提交审批
        ...BUTTON_SUBMIT,
        handleBefore: handleBeforeSubmit, // 提交审批前需要格式化审批流的数据, 在 handleBefore 钩子中处理
        args: {
          url: "提交审批api接口地址",
        },
      },
    ],
  },
});
</script>

<script setup lang="ts">
// 按钮常量引用
import {
  BUTTON_FILL_CELLS, // 向下填充
} from "@qqt-product/ui";

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  localConfig: {
    groups: [
      {
        groupName: "竞价行信息",
        groupNameI18nKey: "i18n_title_ebiddingBankInfo",
        groupCode: "purchaseEbiddingItemList",
        groupType: "item",
        sortOrder: "2",
        buttons: [BUTTON_FILL_CELLS],
      },
    ],
  },
});
</script>

<script setup lang="tsx">
// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  pageButtons: [
    {
      ...BUTTON_PUBLISH,
      checkBefore: false,
      isExistFrozenSource: true, // 开关, 是否需要开启冻结校验
      // isExistFrozenSourceUrl: '/supplier/supplierMaster/isExistFrozenStateData', // 使用默认值, 可以不配置
      // 接口参数配置
      isExistFrozenSourceParams: (pageData) => {
        // 设置供应商信息和询价行信息
        const purchaseBiddingItemList =
          pageData.purchaseBiddingItemList as unknown[];
        const biddingSupplierList = pageData.biddingSupplierList as unknown[];

        // 返回
        return Object.assign({}, pageData, {
          purchaseOrgItemList: purchaseBiddingItemList,
          supplierItemList: biddingSupplierList,
        });
      },
      args: {
        url: "/ebidding/purchaseEbiddingHead/publish",
      },
    },
  ],
});
</script>

<script setup lang="ts">
import qqtUtils from "@qqt-product/utils";
const { createPromise } = qqtUtils;
import type { CreatePromise } from "@qqt-product/utils";

// 保存操作前混合当前按钮配置参数
const handleBeforeSave = (
  args: GlobalPageLayoutTypes.ExposeWithPageButtons
) => {
  const fn: CreatePromise<GlobalPageLayoutTypes.ExposeWithPageButtons> = (
    resolve
  ) => {
    let pageData = args.pageData;
    const cacheButton = args.cacheButton as GlobalPageLayoutTypes.PageButton;
    const btnArgs = cacheButton.args as GlobalPageLayoutTypes.RecordString;

    let formatData = {
      ...pageData.value,
      fbk1: btnArgs.fbk1 ?? "", // 混合按钮配置的某些属性
    };

    resolve({ ...args, pageData: ref(formatData) });
  };

  return createPromise(
    fn
  ) as Promise<GlobalPageLayoutTypes.ExposeWithPageButtons>;
};

// 提交审批前格式化入参
const handleBeforeSubmit = (
  args: GlobalPageLayoutTypes.ExposeWithPageButtons
) => {
  const fn: CreatePromise<GlobalPageLayoutTypes.ExposeWithPageButtons> = (
    resolve
  ) => {
    let pageData = args.pageData;

    let formatData = {
      businessId: pageData.value.id || "",
      businessType: "publishEnquiry",
      auditSubject: `询价发布审批，单号：${
        pageData.value.materialNumber || ""
      }`,
      params: JSON.stringify(pageData.value),
    };

    resolve({ ...args, pageData: ref(formatData) });
  };

  return createPromise(
    fn
  ) as Promise<GlobalPageLayoutTypes.ExposeWithPageButtons>;
};

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  pageButtons: [
    {
      ...BUTTON_SAVE,
      handleBefore: handleBeforeSave,
      args: {
        url: "/enquiry/purchaseEnquiryHead/edit",
      },
    },
    {
      ...BUTTON_SUBMIT,
      emit: true,
      emitKey: "customSubmit",
      handleBefore: handleBeforeSubmit,
      args: {
        url: "/elsUflo/audit/submit",
      },
    },
  ],
});
</script>

<!-- 组件ref -->
<q-edit-page-layout ref="layoutRef" v-bind="options"></q-edit-page-layout>

<script setup lang="ts">
// 获取模板 ref 暴露值方法
import { useRefInstanceHook } from "@qqt-product/ui";

const {
  pageData, // 模板所有数据
  layoutConfig, // 模板配置
  defaultValues, // 模板配置默认值
} = useRefInstanceHook(layoutRef);
</script>

<q-edit-page-layout
  ref="layoutRef"
  @_checkboxChange="handleCheckboxChange"
></q-edit-page-layout>

<script setup lang="ts">
import {
  BUTTON_CUSTOM, // 自定义按钮_1
} from "@qqt-product/ui";

// 组件 ref
const layoutRef = ref<ComponentPublicInstance | null>(null);

const { pageData } = useRefInstanceHook(layoutRef);


const handleCheckboxChange: (btn: GlobalPageLayoutTypes.PageButtonWithGroupCode) => void) = (btn) => {
  const { groupCode } = btn

  const tableData = pageData[groupCode] as GlobalPageLayoutTypes.RecordString[]
  // 已勾选行数据
  const selectedRows = tableData.filter((n) => !!n._checked)
  console.log('selectedRows :>> ', selectedRows)

  // 已勾行索引值
  const rowIdxs = selectedRows.map(n => n._rowIndex)
  console.log('rowIdxs :>> ', rowIdxs)
}

const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  localConfig: {
    // 页面按钮
    pageButtons: [
      {
        ...BUTTON_CUSTOM,
        emit: true,
        emitKey: "_checkboxChange", // 自定义事件名
      },
    ],
  },
});
</script>

<!-- 自定义事件监听 -->
<q-edit-page-layout
  ref="layoutRef"
  @itemListAdd="handleItemListAdd"
  @priceAdd="handlePriceAdd"
></q-edit-page-layout>
<!-- 弹窗组件 -->
<q-field-select-modal ref="fieldSelectModal" @ok="ok"></q-field-select-modal>

<script setup lang="ts">
// 按钮常量引用
import { BUTTON_CUSTOM } from "@qqt-product/ui";
// 组件 ref
const layoutRef = ref<ComponentPublicInstance | null>(null);

// 弹窗选择自定义方法配置 hook
import useFieldSelectModalHook from "./hook/use-field-select-modal-hook";
const { fieldSelectModal, handleItemListAdd, handlePriceAdd, ok } =
  useFieldSelectModalHook(layoutRef);

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // ...
  // 本地页面数据配置
  localConfig: {
    groups: [
      {
        groupName: "价格申请行",
        groupCode: "informationRecordsRequestItemList",
        groupType: "item",
        sortOrder: "2",
        buttons: [
          {
            ...BUTTON_CUSTOM,
            title: srmI18n("i18n_alert_iFumdWF_af48dd34", "选择价格主数据"),
            emit: true, // 抛出事件
            emitKey: "priceAdd", // 自定义事件名称
          },
          {
            ...BUTTON_CUSTOM,
            title: srmI18n("i18n_alert_iFSL_42fb1450", "选择物料"),
            emit: true,
            emitKey: "itemListAdd",
          },
        ],
      },
    ],
  },
  // ...
});
</script>