企企通产品部V6

Appearance

On this page

页面跳转 ​

采购方页面跳转 ​

INFO

V6 产品中, 绝大部分模块的编辑、详情都是独立的页面，需要通过路由进行页面跳转处理；

vue
<template>
  <q-list-layout :pageData="pageData" @add-button-click="handleCreate" />
</template>

<script lang="ts" setup>
import type { GlobalListPageLayoutTypes } from "@qqt-product/ui";
import { useGlobalStoreWithDefaultValue } from "@/use/useGlobalStore";
import { useRouter } from "vue-router";
const { setCurrentRow } = useGlobalStoreWithDefaultValue();
const router = useRouter();

// 跳转至新增页面
const handleCreate = ({ row }: { row: GlobalPageLayoutTypes.CurrentRow }) => {
  // 新建页面路由：由各模块编辑页面路由地址 + '/new' 组成
  // 如竞价管理，编辑页面路由为 "/srm/enquiry/enquiryHead/edit"
  // 那么它的新建页面完整路由为 "/srm/enquiry/enquiryHead/edit/new"
  // t 时间戳参数, 去除页面缓存
  const path = "/srm/enquiry/enquiryHead/edit/new";
  // _key 属性作为唯一key值, 是必传参数
  setCurrentRow({ ...row, _key: path });
  router.push({ path, query: { t: +new Date() } });
};

// 跳转至编辑页面
const handleEdit = (payload: Payload) => {
  setCurrentRow(payload.row);
  const id = (payload.row.id as string) || "";
  // 编辑页面路由：由各模块编辑页面路由地址 + 主键ID 组成
  router.push({ path: `/srm/enquiry/enquiryHead/edit/${id}` });
};

// 跳转至详情页面
const handleView = (payload: Payload) => {
  setCurrentRow(payload.row);
  const id = (payload.row.id as string) || "";
  // 详情页面路由：由各模块详情页面路由地址 + 主键ID 组成
  router.push({ path: `/srm/enquiry/enquiryHead/detail/${id}` });
};

const pageData = reactive({
  // ...
  optionConfig: {
    options: [
      {
        type: "view",
        title: srmI18n("i18n_title_view", "查看"),
        authorityCode: "...",
        click: handleView,
      },
      {
        type: "edit",
        title: srmI18n("i18n_title_edit", "编辑"),
        authorityCode: "...",
        click: handleEdit,
      },
    ],
  },
  buttonConfig: {
    buttons: [
      {
        label: srmI18n("i18n_title_add", "新增"),
        icon: {
          type: "icon-Q-add",
        },
        args: {
          businessType: "ebidding",
        },
        type: "add",
        authorityCode: "ebidding#purchaseEbiddingHead:add",
      },
    ],
  },
});
</script>

供应方页面跳转 ​

TIP

销售协同某些功能模块需要“新增”操作功能；流程为：点新增按钮，弹窗先选择采购方，再根据所选采购方加载模板选项，选择完模板后跳转至新建页面。（如果只有一个采购方，且该采购方只有一套模板，则默认选择该模板，打开新建页面）

🙌 🌰 销售协同 > 质量协同 > 工程变更管理 > SPCN

vue
<template>
  <q-list-layout></q-list-layout>

  <!-- 供应方新增, 业务模板选择框 -->
  <q-sale-template
    v-model="visible"
    v-bind="tempOptions"
    @success="handleSuccess"
    @ok="handleOK"
  ></q-sale-template>
</template>

<script lang="ts" setup>
// ...
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const { userInfo } = userStore;

const visible = ref<boolean>(false);
const cacheRows = ref<GlobalPageLayoutTypes.CurrentRow[]>([]);
const tempOptions = {
  // url: '/enterprise/elsEnterpriseInfo/getPurchaseAccount',
  businessType: "spcn",
  elsAccount: userInfo.elsAccount,
};

// 供应商新增, 选择模板数据
const handleSuccess = ({ rows }) => {
  cacheRows.value = rows;
};

const toEdit = ({ row }: { row: GlobalListPageLayoutTypes.CurrentRow }) => {
  setCurrentRow(row);
  const id = (row.id as string) || "";
  // 编辑页面路由：由各模块编辑页面路由地址 + 主键ID 组成
  router.push({ path: `/srm/quality/saleSpcn/edit/${id}` });
};

const handleOK = () => {
  const row = cacheRows.value.find(
    (n) => !!n._checked
  ) as GlobalListPageLayoutTypes.CurrentRow;
  toEdit({ row });
};

// 供应商新增
const handleCreate = () => {
  if (cacheRows.value.length === 1) {
    // 如果仅有一条模板数据

    // 新建页面路由：由各模块编辑页面路由地址 + '/new' 组成
    // 如SPCN，编辑页面路由为 "/srm/quality/saleSpcn/edit"
    // 那么它的新建页面完整路由为 "/srm/quality/saleSpcn/edit/new"
    // t 时间戳参数, 去除页面缓存
    const path = "/srm/quality/saleSpcn/edit/new";
    setCurrentRow({ ...cacheRows.value[0], _key: path });
    router.push({ path, query: { t: +new Date() } });
    return;
  }
  visible.value = true;
};

const handleEdit = (
  payload: GlobalListPageLayoutTypes.ListOptionsEventParams
) => {
  toEdit({ row: payload.row });
};
</script>