<template>  <IvzBasicView> // 基础视图页面    <IvzViewSearch> // 基础搜索组件      <IvzInput field="name" label="茶叶名称"/>      <template #func>        <IvzFuncBtn func='view' url='/product/list'>查询</IvzFuncBtn>&nbsp;        <IvzFuncBtn func="add" url='/product/add'>新增</IvzFuncBtn>      </template>    </IvzBasicSearch> // 基础表组件    <IvzViewTable :bordered="true" :columns="columns" :dataSource="dataSource" rowKey="id">      <template #c_action="{record}">        <IvzFuncTag func='edit' url='/product/edit'>修改</IvzFuncTag>        <IvzFuncTag func="del" url='/product/del'>删除</IvzFuncTag>      </template>    </IvzBasicTable>    <IvzViewModal>// 基础模态框编辑组件      <IvzInput field="name" label="茶叶名称"/>      <template #title="{model}">        {{model.id ? '编辑产品' : '新增产品'}}      </template>      <template #footer>        <IvzFuncBtn func='cancel'>取消</IvzFuncBtn>        <IvzFuncBtn func='submit' url='/product/add'>提交</IvzFuncBtn>        <IvzFuncBtn func='reset'>重置</IvzFuncBtn>      </template>    </IvzBasicModal>  </IvzBasicView></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>

<IvzBasicView>    <IvzViewSearch>        <template #func={model}>            <IvzFuncBtn func='add'>新增</IvzFuncBtn> // 点击默认动作：将打开一个编辑框(IvzViewModal or IvzViewDrawer)            <IvzFuncBtn func='query' url="/project/query">搜索</IvzFuncBtn> // 点击默认动作：重新刷新列表            <IvzFuncBtn func='reset'>重置</IvzFuncBtn> // 点击默认动作：重置搜索表单, 并且重新刷新列表(和表格组件联动)        </template>    </IvzViewSearch>    <IvzViewModal>       <template #footer={model}>          <IvzFuncBtn func='cancel'>取消</IvzFuncBtn> // 点击默认动作：关闭当前编辑框, 关闭提交动画关闭提交按钮动作          // 点击默认动作：校验表单是否通过, 然后提交表单, 开启表单的提交动画, 开启提交按钮的提交动画(防止多次提交)           <IvzFuncBtn func='submit' :url="model.id ? '/project/edit':'/project/add'">提交</IvzFuncBtn>           <IvzFuncBtn func='reset'>重置</IvzFuncBtn> // 点击默认动作：重置编辑表单       </tempalte>    </IvzViewSearch></IvzBasicView>

<IvzBasicView rowKey="id">    <IvzViewTable>        <template #c_action={record}>            // 点击默认动作：打开编辑框, 并获取和渲染url对应的数据            <IvzFuncBtn func='edit' :data="record" url="/project/edit">编辑</IvzFuncBtn>              // 点击默认动作：弹出删除确认框, 确定之后调用url对应的接口删除数据, 提交的参数是数组格式：[record[rowKey]]            <IvzFuncBtn func='del' :data="record" url="/project/del">删除</IvzFuncBtn>        </template>    </IvzViewSearch></IvzBasicView>

<IvzFuncBtn func='demo' :data="record" url="/project/demo" confirm>容易误操作</IvzFuncBtn>

<IvzBasicView rowKey="id">    <IvzViewTable>        <template #c_action={record}>            // 默认动作：打开id="modPwd"的编辑框, 并且设置编辑框: model[rowKey]=record[rowKey]            <IvzFuncBtn func='edit:modPwd' :data="record">修改密码</IvzFuncBtn>         </template>    </IvzViewSearch>    // 修改密码编辑框    <IvzBasicModal id="modPwd" :rules="[自定义校验规则]">       <IvzPassword label="密码" field="password" />       <template #footer={model}>          <IvzFuncBtn func='cancel'>取消</IvzFuncBtn> // 点击默认动作：关闭当前编辑框, 关闭提交动画关闭提交按钮动作          // 默认动作：校验表单, 然后提交表单, 开启表单的提交动画, 开启提交按钮的提交动画(防止多次提交)           <IvzFuncBtn func='submit' :url="model.id ? '/project/edit':'/project/add'">提交</IvzFuncBtn>           <IvzFuncBtn func='reset'>重置</IvzFuncBtn> // 点击默认动作：重置编辑表单       </tempalte>    </IvzBasicSearch></IvzBasicView>

<IvzBasicView rowKey="id">    <IvzViewTable>        <template #c_action={record}>            // 打开新增的编辑框, 并且设置编辑框父id: model[pid]=record[rowKey]            <IvzFuncBtn func='add:child' :data="record">新增子菜单</IvzFuncBtn>         </template>    </IvzViewSearch></IvzBasicView>

// 基础用法// 存在权限字符串就显示<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>

// 使用auth属性控制权限校验的开关// 比如回台返回的功能菜单包括 新增(/project/add)、编辑(/project/edit)、搜索(/project/query)<IvzBasicView auth>    <IvzViewSearch>        <template #func>            <IvzFuncBtn func='add' url='/project/add'>新增</IvzFuncBtn> // 显示            <IvzFuncBtn func='import' url='/project/import'>导入</IvzFuncBtn> // 不显示        </template>    </IvzViewSearch>    <IvzViewTable>        <template #c_action={record}>            <IvzFuncTag func='edit' url='/project/edit' :data="record">修改</IvzFuncTag > // 显示            <IvzFuncTag func='del' url='/project/del' :data="record">删除</IvzFuncTag > // 不显示        </template>    </IvzViewSearch></IvzBasicView>

// 此处的url是获取编辑详情数据的url，但是并没有指定参数，也无需指定参数<IvzFuncTag func='edit' url='/project/edit' :data="record">修改</IvzFuncTag >// 默认获取编辑地址url的方法如下：Context.jsthis.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钩子里面覆盖掉此方法，重写

<template>   <IvzBasicView>       ...   </IvzBasicView></template><script>...</script>

<IvzBasicView auth>...</IvzBasicView>

<IvzBasicView rowKey="id">...</IvzBasicView>// 此属性将用来做表格、编辑与新增、新增子记录的判断

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();

// 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 rowKey="id">    <template #c_name="{record}">        <a>{{record.name}}</a>    </template>    <template #c_user_name="{record}">        <a>{{record.user.name}}</a>    </template></IvzBasicTable>

// 通过本地变量sexconst 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'}]

// 使用type="action"声明此列是操作列const columns = [    {field: 'action', title: '操作', type: 'action', funMetas: [            {field:'Edit', '编辑',props: {onClick: (row) => {}}}， {field:'Del', '删除', props: {onClick: (row) => {}}}        ]    }]

// template<template #c_action={record, column}>    <a-button>编辑</a-button>    <a-button>修改</a-button></template>// jsconst columns = [    {field: 'action', title: '操作', type: 'action'}]

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.comcnpm install

vite dev

vite build

// 修改文件 vite.config.jsserver: {  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', // 后端地址    },  }}