企企通产品部V6

Appearance

On this page

附件表行 ​

采购方附件列配置 ​

INFO

附件分组、上传附件按钮、以及列配置：文件名称、上传时间、上传方、上传方子账号、操作列（包含：预览、下载、删除按钮）

vue
<script setup lang="ts">
// 按钮常量引用
import {
  BUTTON_UPLOAD,
  BUTTON_DOWNLOAD_ALL,
  BUTTON_REMOVE_ALL,
} from "@qqt-product/ui";

import { useFileColumnHook } from "@qqt-product/ui";

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // 本地页面数据配置
  localConfig: {
    groups: [
      {
        groupName: "附件",
        groupNameI18nKey: "i18n_title_accessory",
        groupCode: "purchaseAttachmentList",
        groupType: "item",
        sortOrder: "6",
        buttons: [
          {
            ...BUTTON_UPLOAD,
            args: {
              acceptDictCode: "attachmentExtension", // 控制可上传的文件格式的数据字典编码，可不填，默认是 attachmentExtension
              url: "", // 上传的路径可不用填写，默认：/attachment/purchaseAttachment/upload
              groupCode: "purchaseBiddingHeadList", // 文件所属需要行时，必填
              property: "biddingDesc", // 行项目显示的名称字段编码 默认是 materialName
              dictCode: "srmFileType", // 文件类型数据字典编码
              maxCount: 1, // 默认只能上传一份文件
              requiredFileType: false, // 文件类型是否必填
              // defaultFileBelong: 'itemNumber', // 文件所属默认值
              // 上传附件时添加默认参数
              params: {},
            },
            // 默认不需要配置，数据会赋值到当前分组表行
            // 需要自定义处理相关业务逻辑时，才需要配置回调方法 callback
            callback: ({ tableData, pageData, fileData }) => {
              fileData?.forEach((n, index) => {
                let itemNumber =
                  n.itemNumber || ((index + 1).toString() as string);
                let purchaseEbiddingItemList = pageData.value
                  .purchaseEbiddingItemList as any[];
                let obj = purchaseEbiddingItemList.find(
                  (n) => n.itemNumber === itemNumber
                );

                tableData.push({
                  _row_id: uniqueId("_row_id_"),
                  ...n,
                  materialNumber: obj.materialNumber || "",
                  sourceNumber: obj.sourceNumber || "",
                  materialName: obj.materialName || obj.materialDesc || "",
                });
              });
            },
            // 弹窗确认前的回调函数， 返回 true 进行下一步，false 终止当前操作
            onConfirmBeforeUpload: (
              formData: GlobalPageLayoutTypes.FormDataType
            ) => {
              const { fileType = "" } = formData;
              if (fileType !== "2") {
                message.warning("请选择正确的附件类型！");
                return false;
              }
              return true;
            },
          },
          BUTTON_DOWNLOAD_ALL,
          BUTTON_REMOVE_ALL,
        ],
      },
    ],
    itemColumns: [
      ...useFileColumnHook({ groupCode: "purchaseAttachmentList" }),
    ],
  },
});
</script>

供应方附件列配置 ​

vue
<script setup lang="ts">
import { useFileColumnHook } from "@qqt-product/ui";

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // 本地页面数据配置
  localConfig: {
    itemColumns: [
      ...useFileColumnHook({
        groupCode: "purchaseAttachmentList",
        role: "sale", 
      }), // 须配置额外 role 属性, 其余配置与采购方相同
    ],
  },
});
</script>

详情页附件列配置 ​

vue
<script setup lang="ts">
import { useFileColumnHook } from "@qqt-product/ui";

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  // 本地页面数据配置
  localConfig: {
    itemColumns: [
      ...useFileColumnHook({
        groupCode: "purchaseAttachmentList",
        // role: "sale",
        operationButton: ["download", "preview"], 
      }), // operationButton 操作列只允许下载与预览
    ],
  },
});
</script>

附件列配置方法 ​

ts
import { useOperationColumnButtonHook } from "@qqt-product/ui";

// 附件删除、附件下载、附件预览 方法解构
const { handleDelete, handleDownload, handlePreview } =
  useOperationColumnButtonHook();

批量下载功能 ​

vue
<script setup lang="ts">
// 按钮常量引用
import {
  BUTTON_SUBMIT, // 提交审批
} from "@qqt-product/ui";

// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  localConfig: {
    groups: [
      {
        groupName: "资质信息",
        groupCode: "supplierAccessMgmtQuareviewItemList",
        groupType: "item",
        sortOrder: "2",
        buttons: [
          {
            ...BUTTON_DOWNLOAD_ALL,
            title: srmI18n("i18n_btn_zRIKBI_35c36afa", "批量下载附件"),
            args: {
              url: "/attachment/purchaseAttachment/downloadZip",
              idKey: "attachmentId", // 这个是表行里面附件ID赋值的字符编码，多个使用必填。
            },
          },
          {
            ...BUTTON_DOWNLOAD_ALL,
            title: srmI18n("i18n_btn_zRIKQIIr_bc7a1bd5", "批量下载文件模板"),
            args: {
              url: "/attachment/purchaseAttachment/downloadZip",
              idKey: "attachmentTemplateId", // 这个是表行里面附件ID赋值的字符编码，多个使用必填。
            },
          },
        ],
      },
    ],
  },
});
</script>

附件上传组件 q-upload-file ​

vue
<template>
  <q-upload-file
    v-model:visible="fileVisible"
    v-bind="fileProps"
    @change_upload_files="handleChangeFiles"
  ></q-upload-file>
</template>

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

const fileVisible = ref(false);
const fileProps = ref({
  maxCount: 10,
  data: {
    headId: "", // 必填
    businessType: "biddingPlatform", // 必填
    sourceNumber: "",
    actionRoutePath: "",
  },
});

// 上传成功
const handleChangeFiles = (dataFile: any[]) => {};
</script>

如果需要在附件上传弹窗使用自定义插槽功能，可以用单独使用附件上传组件的方法实现 ​

vue
<template>
  <q-upload-file
    v-model:visible="fileVisible"
    v-bind="fileProps"
    @change_upload_files="handleChangeFiles"
  >
    <template #customSlot="{ fileData, validateInfos }">
      <a-form-item
        :label="srmI18n(`i18n_field_fileType`, '文件类型')"
        v-bind="validateInfos.fileType"
      >
        <a-select
          v-model:value="fileData.fileType"
          :placeholder="srmI18n(`i18n_title_chooseFileType`, '请选择文件类型')"
        >
          <a-select-option key="key" value="value">label</a-select-option>
        </a-select>
      </a-form-item>
    </template>
  </q-upload-file>
</template>

<script setup lang="ts">
// 单独使用附件上传组件配置参数
const fileVisible = ref(false);

const fileProps = ref({
  maxCount: 10, // 最多可以上传附件数量
  userInfo: userInfo.value,
  itemInfo: [], //有行项目选择的这个必填
  property: "", //行项目传参配置
  data: {
    headId: "", // 必填
    businessType: "purchaseRequest", // 必填
  },
});
// 上传成功
const handleChangeFiles = (dataFile: any[]) => {
  console.log(dataFile);
};

const onCustomUpload = () => {
  fileVisible.value = true;
  fileProps.value.data.headId = pageData.value.id;
};
</script>