图片空间

通过 createImageSpacePop 打开全页弹层，在商品素材、供应商图片、工单素材中浏览并选图。示例依赖当前环境的登录态与后端接口。

代码事例

<template>
	<fk-space>
		<fk-button type="primary" @click="openSingle">单选打开图片空间</fk-button>
		<fk-button type="primary" @click="openMulti">多选（最多 5 张）</fk-button>
	</fk-space>
	<p style="margin-top: 12px">最近一次确认结果</p>
	<fk-row>
		<JsonViewer :data="last" />
	</fk-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { createImageSpacePop, pop } from '@erp/biz';
import type { ImageSpaceDialogConfirmResult } from '@erp/biz';

const last = ref<ImageSpaceDialogConfirmResult | null>(null);

const openSingle = () => {
	createImageSpacePop({
		multiple: false,
		accept: '.gif,.png,.jpg,.jpeg',
        shapeCode: ['FM-闪电衬衣短袖服务员男款', 'GY00000078-FLD', 'YQF-6600服务员短袖', '无款号'][Math.floor(Math.random() * 4)],
   
	})
		.then(res => {
			last.value = res;
			pop.success('已确认选择');
		})
		.catch(() => {
			last.value = null;
		});
};

const openMulti = () => {
	createImageSpacePop({
		multiple: true,
		maxSelectCount: 5,
		accept: '.png,.jpg,.jpeg',
	})
		.then(res => {
			last.value = res;
			const n = Array.isArray(res) ? res.length : 1;
			pop.success(`已确认 ${n} 项`);
		})
		.catch(() => {
			last.value = null;
		});
};
</script>

createImageSpacePop 入参（节选）

参数名	描述	类型	默认值
product_id	商品 ID（供应商 Tab 等逻辑会用到）	number	-
shapeCode	商品款号，可预填查询	string	-
multiple	是否多选	boolean	false
maxSelectCount	多选上限	number	-
accept	允许的图片扩展名（逗号分隔）	string	见 IMAGE_SPACE_DEFAULT_ACCEPT
uploadAction	选中后上传地址	string	与组件 withDefaults 一致

完整说明见业务包内 packages/common-biz/components/image-space-dialog/README.md。