同步操作将从 iteaj/ivzone 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<FuncBtn func="add">新增</FuncBtn>
目录 | 说明 | 典型 |
---|---|---|
src/components/basic | 常用的基础组件 | 暂无 |
src/components/directive | vue指令 | 权限控制指令 |
src/components/drawer | 可编辑的基础抽屉组件 | 暂无 |
src/components/modal | 可编辑的基础模态框组件 | 暂无 |
src/components/edit | 可编辑视图组件 | 编辑模态框和编辑抽屉视图组件 |
src/components/form | antdv表单组件封装 | 包含antdv2包含的可编辑组件 |
src/components/functional | vue functional组件 | 暂无 |
src/components/list | 列表视图组件 | 暂无 |
src/components/view | 页面视图相关组件 | UView |
src/event | 全局事件 | |
src/router | 路由信息 | |
src/store | vuex信息 | |
src/theme | 主题 | |
src/utils | 基础工具库 | |
src/views | 自定义的功能视图页 | 后台管理(用户、字典、角色、配置、组织等)视图 |
<template>
<UView> // 基础视图页面
<UViewSearch> // 基础搜索组件
<UInput field="name" label="茶叶名称"/>
<template #func>
<UFuncBtn func='view' url='/product/list'>查询</UFuncBtn>
<UFuncBtn func="add" url='/product/add'>新增</UFuncBtn>
</template>
</USearch> // 基础表组件
<UViewTable :bordered="true" :columns="columns" :dataSource="dataSource" rowKey="id">
<template #c_action="{record}">
<UFuncTag func='edit' url='/product/edit'>修改</UFuncTag>
<UFuncTag func="del" url='/product/del'>删除</UFuncTag>
</template>
</UTable>
<UViewModal>// 基础模态框编辑组件
<UInput field="name" label="茶叶名称"/>
<template #title="{model}">
{{model.id ? '编辑产品' : '新增产品'}}
</template>
<template #footer>
<UFuncBtn func='cancel'>取消</UFuncBtn>
<UFuncBtn func='submit' url='/product/add'>提交</UFuncBtn>
<UFuncBtn func='reset'>重置</UFuncBtn>
</template>
</UFormModal>
</UView>
</template>
<script>
export default {
name: "Demo",
setup() {
let columns = [
{field: 'name', title: '产品名称'},
{field: 'type', title: '产品类型'},
{field: 'action', type:'action', title: '操作'},
]
let dataSource = [
{id: 1, name: '清香秋茶', type: '清香型'}
]
return {columns, dataSource}
}
}
</script>
功能按钮:用在搜索组件和编辑组件
<UView>
<UViewSearch>
<template #func={model}>
<UFuncBtn func='add'>新增</UFuncBtn> // 点击默认动作:将打开一个编辑框(UViewModal or UViewDrawer)
<UFuncBtn func='query' url="/project/query">搜索</UFuncBtn> // 点击默认动作:重新刷新列表
<UFuncBtn func='reset'>重置</UFuncBtn> // 点击默认动作:重置搜索表单, 并且重新刷新列表(和表格组件联动)
</template>
</UViewSearch>
<UViewModal>
<template #footer={model}>
<UFuncBtn func='cancel'>取消</UFuncBtn> // 点击默认动作:关闭当前编辑框, 关闭提交动画关闭提交按钮动作
// 点击默认动作:校验表单是否通过, 然后提交表单, 开启表单的提交动画, 开启提交按钮的提交动画(防止多次提交)
<UFuncBtn func='submit' :url="model.id ? '/project/edit':'/project/add'">提交</UFuncBtn>
<UFuncBtn func='reset'>重置</UFuncBtn> // 点击默认动作:重置编辑表单
</tempalte>
</UViewSearch>
</UView>
功能tag:用于表格操作
<UView rowKey="id">
<UViewTable>
<template #c_action={record}>
// 点击默认动作:打开编辑框, 并获取和渲染url对应的数据
<UFuncBtn func='edit' :data="record" url="/project/edit">编辑</UFuncBtn>
// 点击默认动作:弹出删除确认框, 确定之后调用url对应的接口删除数据, 提交的参数是数组格式:[record[rowKey]]
<UFuncBtn func='del' :data="record" url="/project/del">删除</UFuncBtn>
</template>
</UViewSearch>
</UView>
有时候为了防止某些功能的误操作,将会在点击功能的时候弹框确认, 这时候可以使用:confirm属性
<UFuncBtn func='demo' :data="record" url="/project/demo" confirm>容易误操作</UFuncBtn>
主要用于点击功能按钮时弹出对应的编辑框
<UView rowKey="id">
<UViewTable>
<template #c_action={record}>
// 默认动作:打开id="modPwd"的编辑框, 并且设置编辑框: model[rowKey]=record[rowKey]
<UFuncBtn func='edit:modPwd' :data="record">修改密码</UFuncBtn>
</template>
</UViewSearch>
// 修改密码编辑框
<UFormModal id="modPwd" :rules="[自定义校验规则]">
<IvzPassword label="密码" field="password" />
<template #footer={model}>
<UFuncBtn func='cancel'>取消</UFuncBtn> // 点击默认动作:关闭当前编辑框, 关闭提交动画关闭提交按钮动作
// 默认动作:校验表单, 然后提交表单, 开启表单的提交动画, 开启提交按钮的提交动画(防止多次提交)
<UFuncBtn func='submit' :url="model.id ? '/project/edit':'/project/add'">提交</UFuncBtn>
<UFuncBtn func='reset'>重置</UFuncBtn> // 点击默认动作:重置编辑表单
</tempalte>
</USearch>
</UView>
<UView rowKey="id">
<UViewTable>
<template #c_action={record}>
// 打开新增的编辑框, 并且设置编辑框父id: model[pid]=record[rowKey]
<UFuncBtn func='add:child' :data="record">新增子菜单</UFuncBtn>
</template>
</UViewSearch>
</UView>
功能权限主要是用来控制页面是否需要显示对应的功能
// 后台使用shiro做权限校验
// 基础用法
// 存在权限字符串就显示
<AButton v-auth="'core:project:add'">新增</ABtton>
// 高级用法
// and参数, 必须满足数组里面的两个权限
<AButton v-auth:and="['core:project:view', 'core:project:info']">详情</ABtton>
// or参数, 只需满足数组里面的两个权限的任何一个
<AButton v-auth:or="['core:project:view', 'core:project:info']">详情</ABtton>
// and的简写
<AButton v-auth="['core:project:view', 'core:project:info']">详情</ABtton>
url的控制方式是通过后台是否有返回功能组件[UFuncBtn or UFuncTag]对应的url
// 使用auth属性控制权限校验的开关
// 比如回台返回的功能菜单包括 新增(/project/add)、编辑(/project/edit)、搜索(/project/query)
<UView auth>
<UViewSearch>
<template #func>
<UFuncBtn func='add' url='/project/add'>新增</UFuncBtn> // 显示
<UFuncBtn func='import' url='/project/import'>导入</UFuncBtn> // 不显示
</template>
</UViewSearch>
<UViewTable>
<template #c_action={record}>
<UFuncTag func='edit' url='/project/edit' :data="record">修改</UFuncTag > // 显示
<UFuncTag func='del' url='/project/del' :data="record">删除</UFuncTag > // 不显示
</template>
</UViewSearch>
</UView>
// 此处的url是获取编辑详情数据的url,但是并没有指定参数,也无需指定参数
<UFuncTag func='edit' url='/project/edit' :data="record">修改</UFuncTag >
// 默认获取编辑地址url的方法如下:Context.js
this.getEditUrl = function (model, editContext) {
let rowKey = this.getRowKey();
let editFunc = this.getTableFunc(FuncNameMeta.EDIT);
if(editFunc && model) {
return `${editFunc.getUrl()}?${rowKey}=${model[rowKey]}`;
} else {
console.warn('未指定编辑功能获取详情数据地址')
return null;
}
}
// 如果以上方法不能满足你获取url,可以在mount钩子里面覆盖掉此方法,重写
视图组件是用来组织视图子组件的容器且必须作为.vue页面的顶级组件。再此容器内支持对所有的可联动的视图子组件做联动操作:比如点击搜索组件的查询按钮表格组件将发起查询接口获
<template>
<UView>
...
</UView>
</template>
<script>...</script>
使用url作为权限控制
<UView auth>...</UView>
指定功能的唯一键
<UView rowKey="id">...</UView>
// 此属性将用来做表格、编辑与新增、新增子记录的判断
antd的表格组件说实话如果没有去认证研究和实践真的很难看得懂,而且很多功能都要自己实现,比如单击和双击、表格和多选等等, 没有一定的使用经验确实会感觉难用,所以提供了IvzBaiscTable表格增强组件。UTable组件支持ATable组件的大部分属性,下面主要看一下不支持的属性和增强的功能
const columns = [
// 支持rowSelection里面的多数属性
// type不支持 默认:checkbox,不支持radio
{type: 'selection', title: '多选'},
{field: 'name', title: '菜单名称', align: 'left'}
]
// onChange、onSelect、onSelectAll、onSelectInvert方法将直接支持在UTable组件上使用事件
<UTable ref="tableRef" @selectChange="xx" @select="xx" @selectAll="xx" @selectInvert="xx"></UTable>
// selectedRowKeys 不支持, 通过方法提供
this.$refs['tableRef'].getSelectedRowKeys();
// columns列不支持customRender, 通过slot方式提供
// 展示通过slot实现自定义此列
const columns = [
{field: 'name', title: '菜单名称', align: 'left'},
{field: 'user.name', title: '用户名称', align: 'left'}
]
// 插槽名称规则:前缀 c_ + 字段名 = c_name
// 如果是a.b的格式将'.'换成'_'即:c_a_b
<UTable rowKey="id">
<template #c_name="{record}">
<a>{{record.name}}</a>
</template>
<template #c_user_name="{record}">
<a>{{record.user.name}}</a>
</template>
</UTable>
支持将value转成label 比如性别字段:数据库存的是值:man,表格需要展示:男
// 通过本地变量sex
const sex = [
{label: '男', value: 'man'},{label: '女', value: 'woman'}
]
const columns = [
{field: 'sex', title: '性别', options: sex}
]
// 通过字典, 提供的字典类型sex,必须可以返回options格式相同的数组
const columns = [
{field: 'sex', title: '性别', dict: 'sex'}
]
// 通过url, 提供的url必须可以返回options格式相同的数组
const columns = [
{field: 'sex', title: '性别', url: '/core/getSex'}
]
如果是日期列,会默认将日期进行安装指定的格式进行格式化,可以用默认格式也可以自定义格式
// 通过指定type='date'
const columns = [
{field: 'createTime', title: '创建时间', type: 'date'}
]
// 默认格式 {datetime: 'YYYY-MM-DD HH:mm:ss', date: 'YYYY-MM-DD', month: 'MM', week: 'E', time: 'HH:mm:ss'}
// 通过picker指定具体类型,不指定则默认使用datetime格式
const columns = [
{field: 'createTime', title: '创建时间', type: 'date', picker: 'month'}
]
UTable组件支持使用两种方式定义操作列 第一 使用功能点列表
// 使用type="action"声明此列是操作列
const columns = [
{field: 'action', title: '操作', type: 'action', funMetas: [
{field:'Edit', '编辑',props: {onClick: (row) => {}}}, {field:'Del', '删除', props: {onClick: (row) => {}}}
]
}
]
第二 使用自定义slot
// template
<template #c_action={record, column}>
<a-button>编辑</a-button>
<a-button>修改</a-button>
</template>
// js
const columns = [
{field: 'action', title: '操作', type: 'action'}
]
除了上面的自定义slot,日期格式化,字典url,UTable组件还支持自定义格式化数据
const columns = [
{field: 'createTime', title: '创建时间', formatter: ({value,record,column}) => value}
]
git clone https://gitee.com/iteaj/ivzone.git
// 进入项目目录然后执行命令
npm install
// 如果嫌国内速度慢可以切换到淘宝源
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install
vite dev
vite build
// 修改文件 vite.config.js
server: {
proxy: {
'^/api/.*': {
changeOrigin: true,
target: 'http://127.0.0.1:8085', // 后端地址
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
// 也可以使用线上地址
server: {
proxy: {
'^/api/.*': {
changeOrigin: true,
target: 'http://demo.iteaj.com', // 后端地址
},
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。