Skip to content
On this page

模板配置

详情模板基本配置

vue
<template>
  <div class="detail-page">
    <q-detail-page-layout
      v-bind="options"
      @pageBack="handlePageBack"
      @back="back"
      @linkClick="handleLinkClick"
    ></q-detail-page-layout>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
// 国际化
import { srmI18n } from "@/utils/srmI18n";
// ui组件库 types
import type { GlobalPageLayoutTypes } from "@qqt-product/ui";
import { useFileColumnHook } from "@qqt-product/ui";

// 按钮常量引用
import {
  BUTTON_DOWNLOAD_ALL,
  BUTTON_CANCELAUDIT,
  BUTTON_FLOW_VIEW,
} from "@qqt-product/ui";

// 全局数据缓存
// 当前行 currentRow, 当前用户信息 userInfo
import { useGlobalStoreWithDefaultValue } from "@/use/useGlobalStore";
import { useRouter } from "vue-router";

// defineOptions({
//   name: 'srm-price-informationRecordsRequest-detail',
// })

const router = useRouter();
const { getCurrentRow, userInfo, setPageOption, handleLinkClick } =
  useGlobalStoreWithDefaultValue();
const currentRow = getCurrentRow();

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  /**
   * 模块业务类型 string
   * 取值根据各模块配置
   * 当定义为"custom"时,使用本地配置
   */
  businessType: "informationRecordsRequest",
  // 布局模式
  pattern: "vertical",
  // 当前已选行数据
  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: "/price/purchaseInformationRecordsRequest/queryById",
  // 本地页面数据配置
  localConfig: {
    groups: [
      {
        groupName: "价格申请行",
        groupNameI18nKey: "i18n_field_umUVc_89ed4963",
        groupCode: "informationRecordsRequestItemList",
        groupType: "item",
        sortOrder: "2",
      },
      {
        groupName: "附件",
        groupNameI18nKey: "i18n_title_accessory",
        groupCode: "attachmentList",
        groupType: "item",
        sortOrder: "3",
        buttons: [BUTTON_DOWNLOAD_ALL],
      },
    ],
    itemColumns: [
      {
        groupCode: "attachmentList",
        title: "行项目",
        fieldLabelI18nKey: "i18n_title_lineItem",
        field: "itemNumber",
      },
      ...useFileColumnHook({
        groupCode: "attachmentList",
        operationButton: ["download", "preview"],
      }),
    ],
  },
  // 页面按钮
  pageButtons: [
    {
      ...BUTTON_CANCELAUDIT,
      args: {
        url: "/a1bpmn/audit/api/cancel",
        auditSubject: "价格申请,单号:" + currentRow.requestNumber,
      },
      disabled(pageData) {
        // 审批状态 auditStatus_dictText
        // 数据字典 srmAuditStatus (0: 未审批, 1: 审批中, 2: 审批通过, 3: 审批拒绝, 4: 无需审批)
        return pageData.auditStatus !== "1";
      },
    },
    BUTTON_FLOW_VIEW,
  ],
});

setPageOption(options);

const back = (btn: GlobalPageLayoutTypes.PageButton) => {
  // 撤销审批跳转至编辑页面
  if (btn.key === BUTTON_CANCELAUDIT.key) {
    router.replace({
      path: `/srm/price/informationRecordsRequest/edit/${currentRow.id}`,
      query: { t: +new Date() },
    });
  }
};
const handlePageBack = () => {
  router.push({ path: "/srm/price/informationRecordsRequest/list" });
};
</script>