View

cl-view-group

左右两侧布局，以兼容手机端

PC 端：

手机端：

使用：

<cl-view-group ref="ViewGroup">
	<template #right>
		<cl-crud></cl-crud>
	</template>
</cl-view-group>

<script setup lang="ts">
	import { useViewGroup } from "/$/base";

	const { ViewGroup } = useViewGroup();
</script>

参考 /src/modules/dict/views/list.vue、/src/modules/iot/views/device.vue

Options

参数	说明	类型	可选值	默认值
label	左侧标题	string		组
leftWidth	左侧宽度	string		300px
title	右侧标题	string		列表
data	请求附带的数据	object		{}
enableContextMenu	开启右键菜单	boolean		true
enableRefresh	开启刷新按钮	boolean		true
enableAdd	开启新增按钮	boolean		true
service	服务	Service
onSelect	选择事件	(item: ClViewGroup.Item)
onEdit	编辑事件	(item?: ClViewGroup.Item) => DeepPartial<ClForm.Options>
onContextMenu	右键事件	(item: ClViewGroup.Item) => ClContextMenu.Options
onData	数据事件	(list: any[]) => any[]

插槽

插槽名	说明	作用域
left	左侧菜单
item	左侧列表项	{ item, selected, index }
item-name	左侧列表项名称	{ item, selected, index }
right	右侧内容
title	右侧标题	{ selected }

<cl-view-group ref="ViewGroup">
	<template #item="{ item, selected, index }"> {{ item.name }} </template>
</cl-view-group>

Ref

参数	说明	类型	可选值	默认值
selected	选中值
isExpand	是否展开状态	boolean		true
expand	展开、收起	function(status?: boolean)
select	选择某一项	function(item: any)
edit	编辑某一项, item 为空则是新增	function(item?: any)
remove	删除某一项	function(item: any)

onSelect

选择后触发，可以用来刷新右侧的列表等操作

const { ViewGroup } = useViewGroup({
	onSelect(item) {
		refresh({
			typeId: item.id,
			page: 1
		});
	}
});

onEdit

表单编辑时触发，返回值与 OpenOptions 一致

const { ViewGroup } = useViewGroup({
	onEdit(item) {
		return {
			title: "标题",
			width: "500px",
			props: {
				labelWidth: "60px"
			},
			items: [
				{
					label: "名称",
					prop: "name",
					component: {
						name: "el-input",
						props: {
							maxlength: 20
						}
					},
					required: true
				}
			]
		};
	}
});

onContextMenu

默认带有 编辑 和 删除。如需自定义右键菜单，返回值与 cl-context-menu 一致。

const { ViewGroup } = useViewGroup({
	onContextMenu(item) {
		return {
			list: [
				{
					label: "编辑",
					callback(done) {
						done();
						ViewGroup.value?.edit(item);
					}
				},
				{
					label: "删除",
					callback(done) {
						done();
						ViewGroup.value?.remove(item);
					}
				}
			]
		};
	}
});

onData

处理左侧列表数据，由 service 中的 page 接口返回

const { ViewGroup } = useViewGroup({
	onData(list) {
		return list.map((e) => {
			return {
				...e,
				name: "-" + e.name + "-"
			};
		});
	}
});