创建Page弹窗组件模板

create-modal.vue

<template>
	<Modal v-model:visible="visible" :width="props.width" class="xxx-modal" :loading="loading" :title="props.title">
		<!-- 请更改根节点 class 名称 -->
		<!-- ...body... -->
		<template #footer>
			<Button type="info" class="fk-modal-cancel-btn" @click="handleCancel">取消</Button>
			<Button class="fk-modal-ok-btn" type="primary" :loading="loading" @click="handleConfirm">确定</Button>
			<!-- 其他按钮 -->
		</template>
	</Modal>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import { Button, Modal } from '@erp/common';
import type { XxxPopProps } from './interface';

const props = withDefaults(defineProps<XxxPopProps>(), {
	// 默认属性
	title: '标题',
	width: '80%',
	// ... 其他 TODO
});

// ok 对应的是 promise.then  close 对应的是 promise.catch
const emit = defineEmits(['ok', 'close']);

const visible = ref(true);
const loading = ref(true);

// -------- 具体容逻辑 --------

const handleCancel = () => {
	visible.value = false;
	emit('close');
};

const handleConfirm = () => {
	// 做确认的其他逻辑 TODO
	const result = {
		// ...
	};
	visible.value = false;
	emit('ok', result);
};
</script>

<style lang="scss" scoped>
.xxx-modal {
	// 请更改类名 ... TODO
}
</style>

create-drawer.vue

<template>
	<Drawer v-model:visible="visible" :width="props.width" class="xxx-drawer" :loading="loading" :title="props.title">
		<!-- 请更改根节点 class 名称 -->
		<!-- ...body... -->
		<template #footer>
			<Button type="info" class="fk-drawer-cancel-btn" @click="handleCancel">取消</Button>
			<Button class="fk-drawer-ok-btn" type="primary" :loading="loading" @click="handleConfirm">确定</Button>
			<!-- 其他按钮 -->
		</template>
	</Drawer>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import { Button, Drawer } from '@erp/common';
import type { XxxPopProps } from './interface';

const props = withDefaults(defineProps<XxxPopProps>(), {
	// 默认属性
	title: '标题',
	width: '80%',
	// ... 其他 TODO
});
// ok 对应的是 promise.then  close 对应的是 promise.catch
const emit = defineEmits(['ok', 'close']);

const visible = ref(true);
const loading = ref(true);

// -------- 具体容逻辑 --------

const handleCancel = () => {
	visible.value = false;
	emit('close');
};

const handleConfirm = () => {
	// 做确认的其他逻辑 TODO
	const result = {
		// ...
	};
	visible.value = false;
	emit('ok', result);
};
</script>

<style lang="scss" scoped>
.xxx-drawer {
	// 请更改类名 ... TODO
}
</style>

interface.ts

/**
 * 弹窗入参
 * 名称需要更改 TODO
 */
export interface XxxPopProps {
	/**
	 * 标题
	 */
	title?: string;
	/**
	 * 弹窗宽度
	 * @default 80%
	 */
	width?: string | number;
	// 其他属性配置 TODO
}

index.ts

import { pop } from '@erp/biz';
import type { XxxPopProps } from './interface';

/**
 * 选择输入弹窗
 * 命名请用ModalPop结尾 TODO
 */
export function createXxxModalPop(props: XxxPopProps) {
	return pop.createPage(import('./create-modal.vue'), props);
}