一些特例汇总 ​

<script setup lang="tsx">
import { loadJS, getRemoteJsFilePath } from "@qqt-product/ui";

const filePath: string = getRemoteJsFilePath(
  {
    currentRow: priceRow.value, // 当前行缓存 templateName, templateAccount, templateNumber, templateVersion, elsAccount, busAccount
    userInfo: userInfo.value as GlobalPageLayoutTypes.UserInfo,
    businessType: "costForm",
    role: "purchase",
  },
  false
);

const config = await loadJS(`${filePath}?t=${+new Date()}`);
</script>

<script setup lang="tsx">
import type { GlobalPageLayoutTypes } from "@qqt-product/ui";
import type { VxeColumnSlotTypes, VxeTableDataRow } from "vxe-table";

import { useOperationColumnButtonHook } from "@qqt-product/ui";
const { handleDelete, handleDownload, handlePreview } =
  useOperationColumnButtonHook();

const operationColumn: GlobalPageLayoutTypes.ColumnItem = {
  groupCode: "purchaseAttachmentList",
  field: "grid_operation",
  title: "操作",
  width: 220,
  fieldLabelI18nKey: "i18n_title_operation",
  align: "center",
  fixed: "right",
  slots: {
    default({
      row,
      column,
      $rowIndex,
    }: VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>) {
      return [
        <a-space>
          <a-button
            type="link"
            onClick={() =>
              handleDownload({
                groupCode: "purchaseAttachmentList",
                row,
                rowIndex: $rowIndex,
              })
            }
          >
            {srmI18n("i18n_title_colunmDownload", "下载")}
          </a-button>
          <a-button
            type="link"
            onClick={() =>
              handlePreview({
                groupCode: "purchaseAttachmentList",
                row,
                rowIndex: $rowIndex,
              })
            }
          >
            {srmI18n("i18n_title_preview", "预览")}
          </a-button>
          <a-button
            type="link"
            onClick={() =>
              handleDelete({
                groupCode: "saleAttachmentList",
                row,
                rowIndex: $rowIndex,
              })
            }
            disabled={row.uploadElsAccount !== userInfo.value.elsAccount}
          >
            {srmI18n("i18n_title_delete", "删除")}
          </a-button>
        </a-space>,
      ];
    },
  },
};

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  itemColumns: [operationColumn],
});
</script>

<template>
  <div class="detail-page">
    <q-detail-page-layout
      ref="layoutRef"
      v-bind="options"
      @customAccept="handleCustomAccept"
      @customReject="handleCustomReject"
    ></q-detail-page-layout>
  </div>
</template>

<script setup lang="ts">
import { Modal, message as Message, Textarea } from "ant-design-vue";
import type { ComponentPublicInstance } from "vue";
import { useRefInstanceHook } from "@qqt-product/ui";

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

const remark = ref<string>(""); // 意见
const { pageData } = useRefInstanceHook(layoutRef);

const acceptOrRejectAction = (type: string) => {
  const isReject = type === "reject";
  const url: string = isReject ? "/xxx/reject" : "/xxx/pass";

  const data = { ...pageData.value, remark: remark.value };
  Request.post({ url, data }).then((res) => {
    if (res.success) {
      Message.success(res.message);
      backToList(true);
    } else {
      Message.error(res.message);
    }
  });
};

const showPropsConfirm = (type: "confirm" | "reject") => {
  const isReject = type === "reject";

  const title = srmI18n("i18n_title_tip", "提示");
  const subTitle = isReject
    ? h(
        "span",
        { style: "color:red; margin-top: 10px;" },
        srmI18n("i18n_title_isSureReviewNotPassed", "是否确认审查拒绝？")
      )
    : srmI18n("i18n_title_isSureReviewPassed", "是否确认审查通过？");

  const textareaNode = h(Textarea, {
    style: {
      marginTop: "12px",
    },
    onChange(e) {
      rejectReason.value = e.target.value as string;
    },
    defaultValue: (pageData.value.remark as string) || "",
    placeholder: "请输入备注内容",
    maxlength: 400,
    autosize: { minRows: 3, maxRows: 6 },
  });

  const contentNode = h("div", [subTitle, textareaNode]);
  const content = isReject
    ? contentNode
    : srmI18n(`i18n_title_isSureReviewPassed`, "是否确认审查通过?");

  Modal.confirm({
    width: isReject ? 520 : 416,
    closable: true,
    title,
    content,
    onOk() {
      if (isReject && !rejectReason.value) {
        Message.error("请输入拒绝理由");
        return Promise.reject("error"); // 阻止弹窗关闭
      }

      const url: string = isReject
        ? "/qualification/purchaseQualificationReview/reject"
        : "/qualification/purchaseQualificationReview/pass";

      const data = { ...pageData.value, remark: remark.value };
      Request.post({ url, data })
        .then((res) => {
          if (res.success) {
            Message.success(res.message);
            backToList(true);
          } else {
            Message.error(res.message);
          }
        })
        .finally(() => {
          return Promise.resolve("success");
        });
    },
  });
};

const handleCustomAccept = () => {
  console.log("handleCustomAccept :>> ");
  showPropsConfirm("confirm");
};

const handleCustomReject = () => {
  console.log("handleCustomReject :>> ");
  showPropsConfirm("reject");
};

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  pageButtons: [
    {
      ...BUTTON_CONFIRM,
      emit: true,
      emitKey: "customAccept",
      args: {
        url: "/price/saleInformationRecordsRequest/confirmed",
      },
      authorityCode:
        "informationRecordsRequest#SaleInformationRecordsRequest:confirmed",
      disabled(pageData) {
        return pageData.status !== "2";
      },
    },
    {
      ...BUTTON_REJECT,
      emit: true,
      emitKey: "customReject",
      args: {
        url: "/price/saleInformationRecordsRequest/rejected",
      },
      authorityCode:
        "informationRecordsRequest#SaleInformationRecordsRequest:rejected",
      disabled(pageData) {
        return pageData.status !== "2";
      },
    },
  ],
});
</script>

<template>
  <div class="detail-page">
    <q-detail-page-layout
      ref="layoutRef"
      v-bind="options"
      @batchReceive="handleBatchReceive"
      @batchClose="handleBatchClose"
      @batchTransform="handleBatchTransform"
    ></q-detail-page-layout>
  </div>
</template>

<script setup lang="tsx">
// ...

// 校验是否已勾选
const checkoutSelectedRows = (
  btn: GlobalPageLayoutTypes.PageButtonWithGroupCode
) => {
  console.log("click checkoutIsSelected :>> ", btn);

  const { groupCode } = btn;

  const tableData = pageData.value[
    groupCode
  ] as GlobalPageLayoutTypes.RecordString[];
  const selectedRows = tableData.filter((n) => !!n._checked);

  if (!selectedRows.length) {
    Message.warning(srmI18n(`i18n_title_selectDataMsg`, "请选择数据"));
    return [];
  }

  console.log("selectedRows :>> ", selectedRows);
  return selectedRows;
};

// 收货
const handleReceive = (rows: GlobalPageLayoutTypes.RecordString[]) => {
  console.log("handleReceive rows :>> ", rows);

  for (const [idx, item] of rows.entries()) {
    if (item.itemStatus !== "8") {
      const errorMsg = ["已选行", `${idx + 1}`, "非送样中状态，无法收货"];
      Message.error(errorMsg.join(""));
      return;
    }
  }

  const callback = () => {
    const url = "/sample/purchaseSampleHead/signSample";
    const data = rows.map((n) => n);
    Request.post({ url, data }).then((res) => {
      if (res.success) {
        Message.success(res.message);
        handleRefresh();
      } else {
        Message.error(res.message);
      }
    });
  };

  Modal.confirm({
    title: srmI18n("i18n_alert_RLlS_38d78a27", "确认收货"),
    content: srmI18n("i18n_field_KQRLlSW_ebe6d581", "是否确认收货?"),
    onOk: callback,
  });
};

// 批量收货操作
const handleBatchReceive: (
  btn: GlobalPageLayoutTypes.PageButtonWithGroupCode
) => void = (btn) => {
  const selectedRows = checkoutSelectedRows(btn);

  if (!selectedRows.length) {
    return;
  }
  handleReceive(selectedRows);
};

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  groups: [
    {
      groupName: "样品行信息",
      groupNameI18nKey: "i18n_field_VNcVH_e5240e50",
      groupCode: "purchaseSampleItemList",
      groupType: "item",
      sortOrder: "2",
      buttons: [
        {
          ...BUTTON_ADD_ONE_ROW,
          authorityCode: "sample#purchaseSampleHead:signSample",
          key: "_receive",
          title: "批量收货",
          emit: true,
          emitKey: "batchReceive",
        },
        {
          ...BUTTON_ADD_ONE_ROW,
          authorityCode: "sample#purchaseSampleHead:colseByItems",
          key: "_close",
          title: "批量关闭",
          emit: true,
          emitKey: "batchClose",
        },
        {
          ...BUTTON_DELETE_ROW,
          authorityCode: "sample#purchaseSampleHead:transformRequest",
          key: "_transform",
          title: "批量转需求池",
          emit: true,
          emitKey: "batchTransform",
        },
      ],
    },
  ],
});
</script>

<script setup lang="tsx">
// ui组件库 types
import type { GlobalPageLayoutTypes } from "@qqt-product/ui";
import type { VxeColumnSlotTypes, VxeTableDataRow } from "vxe-table";

// 确认项 列配置
const purchaseEbiddingConfirmList = [
  {
    field: "writeType",
    title: srmI18n("i18n_field_SMAc_2973057e", "填写类型"),
    width: 120,
  },
  {
    field: "content",
    title: srmI18n("i18n_field_URid_469b0f42", "预制选项"),
    width: 200,
    editRender: {
      enabled: true,
    },
    slots: {
      default({
        row,
        column,
      }: VxeColumnSlotTypes.DefaultSlotParams<VxeTableDataRow>) {
        return [<span>{row[column.field]}</span>];
      },
      edit({
        row,
        column,
      }: VxeColumnSlotTypes.EditSlotParams<VxeTableDataRow>) {
        let elem;
        let options: GlobalPageLayoutTypes.RecordString[] = [];
        // 填写类型 writeType
        // 数据字典 inspection_item_write_type (0: 单选, 1: 多选, 2: 手输)
        if (row.writeType === "0" || row.writeType === "1") {
          options = row.confirmItemList.map(
            (n: GlobalPageLayoutTypes.RecordString) => ({
              label: n.optionsName,
              value: n.optionsCode,
            })
          );
        }
        const props = {
          options,
          transfer: true,
          filterable: true,
          clearable: true,
        };

        // 处理单选
        if (row.writeType === "0") {
          elem = (
            <q-vxe-select v-model={row[column.field]} {...props}></q-vxe-select>
          );
        }
        // 处理多选
        if (row.writeType === "1") {
          elem = (
            <q-vxe-select
              v-model={row[column.field]}
              {...props}
              multiple={true}
            ></q-vxe-select>
          );
        }
        // 处理手输
        if (row.writeType === "2") {
          elem = <vxe-input v-model={row[column.field]}></vxe-input>;
        }

        return [elem];
      },
    },
  },
];
const purchaseEbiddingConfirmListColumns = purchaseEbiddingConfirmList.map(
  (n) => ({ ...n, groupCode: "purchaseEbiddingConfirmList" })
) as GlobalPageLayoutTypes.ColumnItem[];

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  itemColumns: [...purchaseEbiddingConfirmListColumns],
});
</script>

<template>
  <div class="edit-page">
    <q-edit-page-layout
      ref="layoutRef"
      v-bind="options"
      @addRow="handleAddRow"
      @deleteRow="handleDeleteRow"
    ></q-edit-page-layout>
  </div>
</template>

<script setup lang="ts">
// ...
const { pageData } = useRefInstanceHook(layoutRef);

const handleAddRow = (btn: GlobalPageLayoutTypes.PageButtonWithGroupCode) => {
  console.log("btn :>> ", btn);
  setItemWeightListData(btn.groupCode);
};

const handleDeleteRow = (
  btn: GlobalPageLayoutTypes.PageButtonWithGroupCode
) => {
  console.log("btn :>> ", btn);
  setItemWeightListData(btn.groupCode);
};

const cacheClassify = ref<string>();

// 过滤 考察项目 表行数据中的 ‘考察项目分类’
// 用于设置考察项目分项权重表行数据
const setItemWeightListData = (groupCode: string) => {
  if (groupCode !== "itemList") {
    return;
  }
  // 当前考察项目分类
  let itemList = pageData.value[
    groupCode
  ] as GlobalPageLayoutTypes.RecordString[];

  let classify = itemList
    .filter((n) => !!n.inspectionItemClassify)
    .map((n) => {
      return n.inspectionItemClassify as string;
    });

  let currentClassify = classify.join("");
  console.log("currentClassify :>> ", currentClassify);

  // 如果考察项目未修改，则跳过
  if (cacheClassify.value === currentClassify) {
    return;
  }

  cacheClassify.value = currentClassify;

  classify = [...new Set(classify)];
  let length = classify.length;
  let total = 100;

  const rows = classify.map((n, idx) => {
    // 计算各行项分类权重, 总和为100
    let classifyWeight: number;

    if (length === 1) {
      classifyWeight = 100;
    } else if (length > 1 && idx !== length - 1) {
      classifyWeight = Math.floor(100 / length);
      total -= classifyWeight;
    } else {
      classifyWeight = total;
    }
    // classifyWeight = String(classifyWeight)
    console.log("classifyWeight :>> ", classifyWeight);

    return {
      inspectionItemClassify: n,
      classifyWeight,
      remark: "",
    };
  });

  pageData.value.itemWeightList = rows;
};
</script>

<template>
  <div class="edit-page">
    <a-spin :spinning="loading || customLoading">
      <q-edit-page-layout ref="layoutRef" v-bind="options">
        <!-- 关联项目编码 渲染为只读输入框 -->
        <template
          #vertical_baseForm_customSlot_projectNumber="{ field, pageData }"
        >
          <a-input
            v-model:value="pageData[field.fieldName]"
            size="large"
            readOnly
            allowClear
            style="cursor: pointer"
            @click="handleFieldClick"
          />
        </template>
      </q-edit-page-layout>
    </a-spin>
    <!-- 关联项目编码 弹窗选择 -->
    <project-number-modal
      v-model="visible"
      @success="handleSuccess"
    ></project-number-modal>
  </div>
</template>

<script lang="ts" setup>
import ProjectNumberModal from "./component/projectNumberModal.vue";
import { useRefInstanceHook } from "@qqt-product/ui";

const { pageData, layoutConfig, defaultValues } = useRefInstanceHook(layoutRef);

const visible = ref<boolean>(false);

const handleFieldClick = () => {
  visible.value = true;
};

const handleSuccess = ({ data }: Payload) => {
  const projectNumber = (data[0].projectNumber as string) || "";
  pageData.value.projectNumber = projectNumber;
};

// 过滤业务模板相同字段
const handleAfterRemoteConfig = (config) => {
  const formFields = config.formFields || [];
  config.formFields = formFields.filter((n) => n.fieldName !== "projectNumber");

  return config; // 返回处理后的配置数据, 可以是 promise 对象
};

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  handleAfterRemoteConfig,
  // 2. 配置字段为自定义插槽类型
  localConfig: {
    formFields: [
      {
        groupCode: "baseForm",
        sortOrder: "30",
        fieldType: "customSlot",
        fieldLabel: "关联项目编码",
        fieldLabelI18nKey: "i18n_field_RKdIAo_54458cc1",
        fieldName: "projectNumber",
      },
    ],
  },
});
</script>