代码拉取完成，页面将自动刷新
同步操作将从 iteaj/ivzone 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
ivzone2.0基于vite2.0+vue3.0+antdv2+vuex4.0+vuerouter4, 此次更新不兼容1.0版本，是重新出发重新整理的一个版本，使用单页面架构(spa). 此版本对antd2的一些常用组件进行了简易封装比如：表格，表单。并且提供了增删改查视图页组件，模态框编辑框组件以及其他组件；在后续将会提供更多的简单方便且灵活的组件。还有此版本是一个纯前端版， 没有和任何后端集成，基于java后端的集成版本还在开发适配中
将通用的，常用的，简单的一些操作合并到一个组件里面且提供完整的增删改查功能。对于每个通用的增删改查功能，最大的不同点在于操作的url不同，需要的功能点不同，所以我们只需要将每个功能点交由开发人员定义。下面主要是两个常用的增删改查视图组件的实现，先直观看一下菜单功能用增删改查组件的实现图片和对应的代码
IvzFuncView组件时增删改查的一种实现方式，通过显式自定义功能点来实现，如下：
<template>
<ivz-func-view :editFunMetas="editFunMetas" name="菜单"
:tableFunMetas="tableFunMetas" :searchFunMetas="searchFunMetas">
<ivz-view-search>
<ivz-input field="name" label="菜单名称" />
</ivz-view-search>
<ivz-view-table :columns="columns" size="small" :pagination="false" />
<ivz-view-drawer>
<ivz-input field="name" label="菜单名称" required/>
<ivz-tree-select field="pid" label="父菜单" required :defaultValue="0"/>
<ivz-input field="url" label="访问路径" required/>
<ivz-input field="perms" label="权限标识"/>
<ivz-select field="position" label="功能位置" dict="common_status"/>
<ivz-select field="permType" label="功能类型" :options="permType"/>
<ivz-input field="remark" label="备注" />
</ivz-view-drawer>
</ivz-func-view>
</template>
<script>
import {FunMetaMaps} from "@/utils/SysUtils";
export default {
name: "Menu",
setup() {
let permType = [
{label: '新增', value: 'Add'},
{label: '删除', value: 'Del'},
]
let position = [
{label: '全部', value: 'AM'},
{label: '搜索栏', value: 'M'},
{label: '表格栏', value: 'T'},
];
const columns = [
{field: 'name', title: '菜单名称', align: 'left'},
{field: 'url', title: '访问路径'},
{field: 'perms', title: '权限标识'},
{field: 'permType', title: '功能类型', options: permType},
{field: 'position', title: '功能位置', options: position},
{field: 'remark', title: '备注'},
{field: 'createTime', title: '创建时间', type: 'datetime'},
{field: 'action', title: '操作', type: 'action'},
]
const editFunMetas = [
{field: FunMetaMaps.Reset, name: '重置'},
{field: FunMetaMaps.Submit, name: '提交'},
{field: FunMetaMaps.Cancel, name: '取消'},
]
const tableFunMetas = [
{field: FunMetaMaps.Add, name: '新增', url: '/core/menu/add'},
{field: FunMetaMaps.Edit, name: '编辑', url: '/core/menu/edit'},
{field: FunMetaMaps.Del, name: '删除', url: '/core/menu/del'},
]
const searchFunMetas = [
{field: FunMetaMaps.View, name: '搜索', url: '/core/menu/view'},
{field: FunMetaMaps.Add, name: '新增', url: '/core/menu/add'},
{field: FunMetaMaps.Expanded, name: '展开/折叠'},
]
return {columns, permType, editFunMetas, tableFunMetas, searchFunMetas}
},
}
</script>
IvzMenuView组件是增删改查的另一种实现方式， 通过后台菜单配置功能点实现 如下：
<template>
<ivz-menu-view :expand="true" name="菜单">
<ivz-view-search>
<ivz-input field="name" label="菜单名称" />
</ivz-view-search>
<ivz-view-table :columns="columns" size="small" :pagination="false" />
<ivz-view-drawer>
<ivz-input field="name" label="菜单名称" required/>
<ivz-tree-select field="pid" label="父菜单" required :defaultValue="0"/>
<ivz-input field="url" label="访问路径" required/>
<ivz-input field="perms" label="权限标识"/>
<ivz-select field="position" label="功能位置" dict="common_status"/>
<ivz-select field="permType" label="功能类型" :options="permType"/>
<ivz-input field="remark" label="备注" />
</ivz-view-drawer>
</ivz-menu-view>
</template>
<script>
export default {
name: "Menu",
setup() {
let permType = [
{label: '新增', value: 'Add'},
{label: '删除', value: 'Del'},
]
let position = [
{label: '全部', value: 'AM'},
{label: '搜索栏', value: 'M'},
{label: '表格栏', value: 'T'},
];
const columns = [
{field: 'name', title: '菜单名称', align: 'left'},
{field: 'url', title: '访问路径'},
{field: 'perms', title: '权限标识'},
{field: 'permType', title: '功能类型', options: permType},
{field: 'position', title: '功能位置', options: position},
{field: 'remark', title: '备注'},
{field: 'createTime', title: '创建时间', type: 'datetime'},
{field: 'action', title: '操作', type: 'action'},
]
return {columns, permType}
},
}
</script>
// 后台返回的菜单列表
// {id: 158, name: '菜单管理', url: '/core/menu', pid: 11, type: 'V', children: [
// {name: '新增', permType: 'Add', type: 'A', sort: 30, position: 'M', url: '/core/menu/add'},
// {name: '搜索', permType: 'View', type: 'A', sort: 10, position: 'M', url: '/core/menu/view'},
// {name: '编辑', permType: 'Edit', type: 'A', sort: 50, position: 'T', url: '/core/menu/edit'},
// {name: '删除', permType: 'Del', type: 'A', sort: 80, position: 'T', url: '/core/menu/del'},
// ]
//}
antd的表格组件说实话如果没有去认证研究和实践真的很难看得懂，而且很多功能都要自己实现，比如单击和双击、表格和多选等等， 没有一定的使用经验确实会感觉难用，所以提供了IvzBaiscTable表格增强组件。IvzBasicTable组件支持ATable组件的大部分属性，下面主要看一下不支持的属性和增强的功能
const columns = [
// 支持rowSelection里面的多数属性
// type不支持 默认：checkbox，不支持radio
{type: 'selection', title: '多选'},
{field: 'name', title: '菜单名称', align: 'left'}
]
// onChange、onSelect、onSelectAll、onSelectInvert方法将直接支持在IvzBasicTable组件上使用事件
<IvzBasicTable ref="tableRef" @selectChange="xx" @select="xx" @selectAll="xx" @selectInvert="xx"></IvzBasicTable>
// selectedRowKeys 不支持， 通过方法提供
this.$refs['tableRef'].getSelectedRowKeys();
// true 显示分页， false不显示分页
<IvzBasicTable :pagination="true"></IvzBasicTable>
// 分页的配置项直接通过props属性
<IvzBasicTable :pagination="true" :showTotal="true" :showQuickJumper="true" :showSizeChanger="true"/>
3. 其他的属性全部支持
// 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
<IvzBasicTable :pagination="true">
<template #c_name="{record}">
<a>{{record.name}}</a>
</template>
<template #c_user_name="{record}">
<a>{{record.user.name}}</a>
</template>
</IvzBasicTable>
支持将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='datetime'
const columns = [
{field: 'createTime', title: '创建时间', type: 'datetime'}
]
// 默认格式 {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: 'datetime', picker: 'month'}
]
IvzBasicTable组件支持使用两种方式定义操作列 第一 使用功能点列表
// 使用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，IvzBasicTable组件还支持自定义格式化数据
const columns = [
{field: 'createTime', title: '创建时间', formatter: ({value,record,column}) => value}
]
使用vue3+antd2+vuex4+vuerouter4+moment+qs框架以及ui组件库， 没有其余的强依赖
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。