Base

方法

  • useStore 数据缓存

    1. app 应用信息,应用名称,配置参数

    2. user 用户信息,用户设置,退出等

    3. menu 菜单信息,路由列表,菜单组

    import { useStore } from "/$/base";
    
    const { app, user, menu } = useStore();
    
  • 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 | number36
shape模式string'square' | 'circle''square'
background-color背景颜色string颜色值#f7f7f7
color字体颜色string颜色值#cccccc

cl-code-json

json 格式预览

参数说明类型可选值默认值
modelValue绑定值string | object
popover是否弹出框模式booleanfalse
height高度string | number100%
maxHeight最大高度string | number300

默认:

弹出框模式:

cl-column-custom

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

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

cl-date-text

日期文本显示

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

cl-svg

svg 图标,加载所有模块下 staticicon-*.svg 的文件

参数说明类型可选值默认值
name图标名称,对应文件名string
className样式名称string
size图标大小string / number

cl-image

图片,已配置点击预览

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

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 / booleantrue
inactiveValue未选值number / string / booleanfalse

下面是在 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左侧宽度string300px
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是否展开状态booleantrue
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>
Last Updated: