千嘉UI样式库，基于Element Plus

qj-layout 布局

# 介绍
1、qj-layout组件是整体布局组件,包含顶部导航栏、左侧菜单、右侧内容
2、需要引入useLayout方法，传递所需要的参数
3、qj-layout 插槽 tagsview

import { useLayout } from 'qj-design/components/layout/useLayout'
const { setToken, setMenus, setMenuIcons, setActiveFirstMenuId, setActiveSecondMenuId, setSiteInfo, setUserInfo, setCachedViews, setVisitedViews, setActions } = useLayout()

setToken: 设置token
setMenus: 设置菜单
setMenuIcons: 菜单图标
setActiveFirstMenuId: 设置一级菜单id
setActiveSecondMenuId: 设置其他级菜单id
setSiteInfo: 设置网站信息
setUserInfo: 设置用户信息
setCachedViews: 设置缓存页面
setVisitedViews: 设置访问页面
setActions: 设置域相关接口 {userDomainAction, userDomainChangeAction} 获取用户当前域 | 设置当前域

QjDialog

Attributes

| 参数 | 类型 | 默认值 | 必填 | 说明 | | :--------- | :------ | :----- | :--- | :------------- | | modelValue | Boolean | - | 是 | 对话框显示状态 |

Events

| 事件名 | 说明 | 参数 | | :---------------- | :------------------- | :-------------------------------- | | update:modelValue | 对话框状态变更时触发 | (value: boolean) - 新的显示状态 |

Slots

| 名称 | 说明 | 作用域 | | :------ | :------------- | :------------------------------------ | | header | 自定义头部内容 | - | | content | 自定义内容区域 | setPageActions(data) - 设置底部按钮 |

QjDrawer

Attributes

| 参数 | 类型 | 默认值 | 必填 | 说明 | | :--------- | :-------------------- | :--------- | :--- | :------------------------ | | modelValue | Boolean | - | 是 | 抽屉显示状态 | | jump | Boolean | false | 否 | 是否显示上一项/下一项按钮 | | buttons | QjActionButtonProps[] | [] | 否 | 更多操作按钮列表 | | sizes | number[] | [500, 800] | 否 | 宽度变化两级阶梯 |

Events

| 事件名 | 说明 | 参数 | | :---------------- | :---------------------- | :-------------------------------- | | update:modelValue | 抽屉状态变更时触发 | (value: boolean) - 新的显示状态 | | change-item | 点击上一项/下一项时触发 | ('prev' \| 'next') - 切换方向 |

Slots

| 名称 | 说明 | 作用域 | | :------ | :------------- | :------------------------------------ | | content | 自定义内容区域 | setPageActions(data) - 设置底部按钮 |

QjSvgIcon

### 介绍
1、qj-svg-icon 组件是图标组件，基于createSvgIconsPlugin，可以通过font-size设置大小，color设置颜色
2、需要把svg文件放入 src/common/assets/svgs
3、使用的时候传递name参数，为svg文件名

### 使用

<qj-svg-icon name="name" />

Attributes

| 参数 | 类型 | 默认值 | 必填 | 说明 | | :----- | :----- | :----- | :--- | :---------- | | prefix | string | icon | 否 | SVG图标前缀 | | name | string | - | 是 | SVG图标名称 |

QjTable

Attributes

| 参数 | 类型 | 默认值 | 必填 | 说明 | | :--------------- | :-------------------------- | :--------------------------------------- | :--- | :----------------------------------- | | data | any[] | [] | 否 | 表格数据 | | tableColumn | QjTableColumnTypes[] | [] | 否 | 列配置 | | pagination | boolean | true | 否 | 是否显示分页 | | paginationLayout | string | 'total, sizes, prev, pager, next' | 否 | 分页组件布局 | | paginationOption | QjTablePaginationpagination | {pageSize: 20, pageIndex: 1, total: 0} | 否 | 分页参数 | | select | boolean | false | 否 | 是否可选择 | | selectMode | string | single | 否 | 选择模式：single-单选，multiple-多选 | | editField | boolean | false | 否 | 是否显示字段编辑 | | sortable | boolean | false | 否 | 是否排序 |

Events

| 事件名 | 说明 | 参数 | | :---------------- | :----------------- | :------------------------------------ | | select-change | 选择项变化时触发 | (selection: any[]) - 选中的行数据 | | item-click | 点击表格行时触发 | (row: any) - 点击的行数据 | | fieid-change | 字段显示变化时触发 | (labels: string[]) - 选中的字段标签 | | page-size-change | 每页条数变化时触发 | (val: number) - 新的每页条数 | | page-index-change | 当前页码变化时触发 | (val: number) - 新的页码 |

Slots

| 名称 | 说明 | 作用域 | | :--------- | :--------------- | :-------------------------------------------- | | button | 表格顶部按钮区域 | - | | pages | 自定义分页区域 | - | | column | 自定义列显示区域 | - | | [slot名称] | 自定义列内容 | {row, column, index} - 行数据、列配置、索引 |

Exposes

| 名称 | 说明 | | :--------- | :----------- | | qjTableRef | 表格实例引用 |

QjTableBusiness

Attributes

| 参数 | 类型 | 默认值 | 必填 | 说明 | | :---------------- | :------- | :--------------------------------------- | :--- | :--------------- | | action | Function | () => {} | 否 | 获取列表数据接口 | | deleteAction | Function | () => {} | 否 | 删除接口 | | exportExcelAction | Function | () => {} | 否 | 导出Excel接口 | | condition | Object | {} | 否 | 搜索条件 | | pagination | boolean | true | 否 | 是否分页 | | paginationOption | Object | {pageSize: 20, pageIndex: 1, total: 0} | 否 | 分页参数 |

Exposes

| 名称 | 说明 | 参数 | | :---------- | :----------- | :---------------------------------------------- | | getPage | 获取列表数据 | - | | queryPage | 刷新第一页 | - | | deleteItem | 删除列表项 | (param: any) - 删除参数 | | exportExcel | 导出Excel | (name: any, callback: any) - 文件名和回调函数 | | qjTableRef | | |

QjTableSearch

Attributes

| 参数 | 类型 | 默认值 | 必填 | 说明 | | :------- | :------ | :----------------------------------- | :--- | :--------------------- | | form | object | - | 是 | 表单数据对象 | | export | boolean | false | 否 | 是否显示导出按钮 | | edit | boolean | true | 否 | 是否显示编辑按钮 | | width | number | 260 | 否 | 表单每一项宽度 | | cache | boolean | false | 否 | 是否缓存至localStorage | | cacheKey | string | location.hash || location.pathname | 否 | 缓存的key |

Events

| 事件名 | 说明 | 参数 | | :----- | :--------------------- | :---------------------------------------- | | query | 点击查询按钮时触发 | - | | reset | 点击重置按钮时触发 | - | | export | 点击导出按钮时触发 | - | | change | 自定义搜索栏保存后触发 | (formItemList: FormItem[]) - 表单项列表 |

Slots

| 名称 | 说明 | | :------ | :----------------------- | | default | 表单项目（el-form-item） |