Base

方法

useStore 数据缓存
1. app 应用信息，应用名称，配置参数
2. user 用户信息，用户设置，退出等
3. menu 菜单信息，路由列表，菜单组
```
import { useStore } from "/$/base";

const { app, user, menu } = useStore();
```
1
2
3

checkPerm(value: string | { or?: string[]; and?: string[] }) 检测是否有权限

import { checkPerm } from "/$/base";
import { useCool } from "/@/cool";

const { service } = useCool();

// 单个
checkPerm(service.base.sys.user.permission.add);

// 或者
checkPerm({
	or: [service.base.sys.user.permission.add, service.base.sys.user.permission.update]
});

// 并且
checkPerm({
	and: [service.base.sys.user.permission.add, service.base.sys.user.permission.update]
});

组件

cl-avatar

头像

参数	说明	类型	可选值	默认值
modelValue	绑定值	string
src	资源链接	string
size	尺寸	string \| number		36
shape	模式	string	'square' \| 'circle'	'square'
background-color	背景颜色	string	颜色值	#f7f7f7
color	字体颜色	string	颜色值	#cccccc

cl-code-json

json 格式预览

参数	说明	类型	默认值
modelValue	绑定值	string \| object
popover	是否弹出框模式	boolean	false
height	高度	string \| number	100%
maxHeight	最大高度	string \| number	300

默认：

弹出框模式：

cl-column-custom

cl-table 自定义列。可自行扩展，如拖动排序

参数	说明	类型	可选值	默认值
name	`localStorage` 存储标识，必填	string
columns	和 ClTable.Column 一样	string

cl-date-text

日期文本显示

参数	说明	类型	可选值	默认值
modelValue	绑定值	string
format	日期格式	string		YYYY-MM-DD HH:mm:ss

cl-svg

svg 图标，加载所有模块下 static 下 icon-*.svg 的文件

参数	说明	类型
name	图标名称，对应文件名	string
className	样式名称	string
size	图标大小	string / number

cl-image

图片，已配置点击预览

参数	说明	类型	可选值	默认值
modelValue	资源链接	string / array
src	资源链接	string / array
size	图片大小	number / array		100
fit	裁剪方式	string	fill / contain / cover / none / scale-down	cover

cl-select

下拉选择，设置 prop 会自动刷新列表并带入请求参数 { page: 1, [prop]: value }

参数	说明	类型
modelValue	绑定值	string / number
options	列表	array
prop	字段	string

下面是做筛选的使用示例：

<template>
	<cl-crud>
		<cl-row>
			<cl-select :options="options.status" prop="status" />
		</cl-row>

		<cl-row>
			<cl-table ref="Table" />
		</cl-row>
	</cl-crud>
</template>

<script lang="ts" setup>
	const options = reactive({
		status: [
			{
				label: "成功",
				value: 1,
				type: "success"
			},
			{
				label: "失败",
				value: 0,
				type: "danger"
			}
		]
	});

	const Table = useTable({
		columns: [
			{
				label: "状态",
				prop: "status",
				dict: options.status
			}
		]
	});
</script>

cl-switch

开关，cl-table 中使用，值改变时会自动调用 update 接口

参数	说明	类型	默认值
modelValue	绑定值	number / string / boolean
activeValue	选中值	number / string / boolean	true
inactiveValue	未选值	number / string / boolean	false

下面是在 cl-table 的使用示例：

<template>
	<cl-crud>
		<cl-table ref="Table" />
	</cl-crud>
</template>

<script lang="ts" setup>
	const Table = useTable({
		columns: [
			{
				label: "状态",
				prop: "status",
				component: {
					name: "cl-switch"
				}
			}
		]
	});
</script>

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	列表
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 + "-"
			};
		});
	}
});

cl-editor

由于第三方编辑器资源过大，不一定每个人都需要，so 使用该组件去渲染不确定的第三方编辑器，当第三方编辑器未注册的时候显示文本域 textarea。

参考 /src/modules/base/views/params.vue

参数	说明	类型
name	组件标签名	string

WARNING

由于是完全继承，所以该组件可以调用 name 指定组件的所有方法和支持所有的 prop 参数

<template>
	<cl-editor :ref="setRefs('editor')" name="cl-editor-monaco" :height="400" />
</template>

<script lang="ts" setup>
	const { refs, setRefs } = useCool();

	// 调用格式化代码方法
	refs.editor.formatCode();
</script>

# Base

# 方法

# 组件

# cl-avatar

# cl-code-json

# cl-column-custom

# cl-date-text

# cl-svg

# cl-image

# cl-select

# cl-switch

# cl-view-group

# Options

# 插槽

# Ref

# onSelect

# onEdit

# onContextMenu

# onData

# cl-editor