简介

vban-admin的扩展插件，用于快速构建curd页面

安装

在vben-admin项目中使用，请先下载vben-admin

安装vben-admin

git clone [email protected]:vbenjs/vben-admin-thin-next.git  项目名称

安装vpage

package.json中添加

"dependencies":{
	"@magein/vpage": "~1.0.0",
	"tinymce": "^5.10.2",
}

tinymce是富文本编辑器插件

cd 项目
 npm i @magein/vpage --save
或者
yarn add @magein/vpage@latest

在项目目录下执行

node .\node_modules\@magein\vpage\bin\index
#强制更新
node .\node_modules\@magein\vpage\bin\index --force

#查看版本
node .\node_modules\@magein\vpage\bin\index -v
node .\node_modules\@magein\vpage\bin\index --version

可能遇到的错误

error An unexpected error occurred: "EPERM: operation not permitted, unlink 'D:\\xiaomage\\program\\uniapp\\vben-admin-thin-next\\node_modules\\vite-plugin-mock\\node_modules\\esbuild\\esbuild.exe'".
info If you think this is a bug, please open a bug report with the information provided in "D:\\xiaomage\\program\\uniapp\\vben-admin-thin-next\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

解决方式：

删除C盘下的user/用户/.yarnrc

删除C盘下的user/用户/.npmrc

vite-plugin-mock\\node_modules\\esbuild\\esbuild.exe

1. 这个错误是没有执行权限，将文件夹的权限修改为当前用户可以完全控制，对着项目鼠标右键，点击属性，
2. 使用管理员的身份运行powershell，进入到项目目录下执行yarn install

注册

在main.ts中

import ViewPage from '@magein/vpage';
const app = createApp(App);
app.use(ViewPage);

在src/components/registerGlobComp.ts注册

import ViewPage from '@magein/vpage/index';

#在registerGlobComp方法中加入
app.use(ViewPage);

使用说明

1. 构建搜索表单
2. 构建表头
3. 构建新增、编辑表单

引入组件

<template>
  <div>
    <ViewPage :page="page" @report="report"></ViewPage>
  </div>
</template>

<script lang="ts">
import {ViewPage, Page, Button, ResApi } from '@magein/vue-page';

export default {
  components: {
    ViewPage
  },
  setup() {

    // 字典文件，用于展示表格头，表单的label，common/render/normal.js内置了一些常用的字段，下面定义的可以覆盖
    const dictionaries = {
      user_id: '用户ID',
      user_name: '用户名称',
      user_nickname: '用户昵称',
      sex: '性别',
    };

    // 常量数据，这里使用的是对象，而不是数组，但是会转化成数组[{value:'',text:''}]
    const appoint_sex = { 0: '不限', 1: '男生', 2: '女生' };
    const status = { 0: '关闭', 1: '开启' };
    const owner = { 0: '不是', 1: '是' };
    const hide = { 0: '不隐藏', 1: '隐藏' };

    // 创建page实例
    let page = new Page();
    // 对应后端的name值，搭配ResApi，ResApi是api下面的文件，用于请求常规的ResApi资源文件
    page.name = 'job';
    // 使用的字典
    page.dictionay = dictionaries;

    //  设置搜索参数
    page.search = ['nickname', 'sex|select', 'region|region'];
    // 设置搜索前的回调函数
    page.search.before=function(){};

    // 设置表单
    page.form = [];
    // 设置表单的默认值
    page.form.value={};

    // 构建表格
    page.table = [];
    page.table.header = [];
    // 自动转化省市区，需要包含province_id,city_id,area_id字段信息，取值去common/region_code.js中的信息
    page.table.region = true;
    // 是否展示表格的序号
    page.table.showIndexColumn = false;
    // 表格上面的操作按钮
    page.table.toolbar = [];
    page.table.trash = [];
    // 表格每行的数据，内置的快捷的按钮 plus 新增、remove 移除、download 下载 、trash 回收站（废弃）、recovery 恢复、clean 删除（彻底删除）
    // 也可以使用Button进行创建，preview 是这个按钮的键，用于后续的事件获取，预览就是按钮的名称 ，topcoat:preview 是按钮的图标
    page.table.action = ['edit', new Button('preview', '预览', 'topcoat:preview')];
    // 当按钮比较多的时候，可以使用这个，在行显示...，点击后出现的数据
    page.table.dropAction = [
      new Button('qrcode', '小程序二维码', 'mdi:qrcode'),
      new Button('deliver', '投递记录', 'mdi:upload'),
      new Button('report', '数据报表', 'carbon:chart-line-data')
    ];
  }
}
</script>

构建表格

搜索框

// 搜索框和表单请参考构建表单，搜索的表单类型比较单一，常用的就输入框，下拉框，地区，时间筛选
page.search = ['nickname', 'sex|select', 'region|region'];

操作按钮

内置的操作按钮

1. plus 新增
2. remove 移除
3. download 下载
4. recovery 恢复
5. clean 删除（彻底删除）

// 默认显示 新增、移除、下载按钮
page.table.toolbar = [];
// 显示自定义按钮
page.table.toolbar = ['edit','remove'];
page.table.toolbar = ['edit','remove',new Button('kek','title','icon')];

// 回收站的按钮
page.table.trash = [];
page.table.trahs = ['recovery','clean'];

数据行的按钮

// 显示编辑、删除
page.table.action=[];
page.table.action = ['edit', 'remove'];
// 自定义
page.table.action = ['edit', new Button('preview', '预览', 'topcoat:preview')];

下拉按钮,当按钮比较多的时候，可以使用这个，在行显示...，点击后出现的数据

page.table.dropAction = [
    new Button('detail', '详情', 'topcoat:preview'),
    new Button('log', '日志', 'topcoat:preview'),
    new Button('report', '数据报表', 'topcoat:preview')
];

不显示任何按钮，用于日志等不需要新增、编辑、删除、只能查看的页面

page.onlySHow();

不显示多选框

page.table.rowSelection=false;

不显示自增的序号(非 ID)

page.table.showIndexColumn=false;

设置字典

这里可以不用设置字段，会自动翻译一些常用的字段信息，在 common/render/normal.ts 中可以查看

// 这里会覆盖normal.ts中的信息
const dictionaries=[
   name: { text: '用户名', desc: '' },
];
page.dictionay=dictionaries;

设置表头

title 会从字典中翻译出信息，展示在第一行

page.table=[
  'title',
  // 可以编辑
  'age|edit',
  // 渲染成switch开关
  'status|switch',
  // 渲染成图片
  'logo|image',
  // 渲染操作列，230是宽度
  'operation|action|230'
];

省市区

// 数据类中需要包含province_id,city_id,area_id
page.table.region=true;

解析静态值

保存的是常量信息，但是需要翻译成描述性的文字

page.setTrans('origin',{1:'来源微信',2:'来之支付宝',3:'来自小红书'});
page.setTrans('action',{1:'查询',2:'新增',3:'删除'});

加载回收站的数据

这里是用在区分是否加载回收站的数据，请注意是只加载，而不是包含

page.withTrash=true;

请求的 name 值

这里是对 api 的值进行了多一层的封装，常规的还是指定 api，请参考下面的 api 需要搭配后端使用，表示请求的数据源,由后端提供，单独为后端构建的快速 curd 设定的值，一般是对应一张表的名称

page.name='name';

api

vben-admin table 的 props 中的 api

请求接口，可以直接将 src/api 内的函数直接传入

page.table.api='https://xxx.com/'

请求之前处理参数

page.search.before=function(){

}

搜索之前处理参数

page.table.after=function(){

}

构建表单

page.form=[
  '字段|保留关键字|表单项类型|选项',
  ['字段','表单项类型','选项','保留关键字'],
];

保留关键字

关键字可以混合出现，且没有要求位置，help 关键字需要参数，所以需要在 help 出现的地方接上参数

nreq 非必填表示，数组或者字符串中出现，即表示非必填，如

1. 'title|nreq'
2. 'intro|editor|nreq'
3. ['title','textarea','nreq']
4. ['type','select',{1:'xx'.2:'xx'},'nreq']

   这里是不区分位置的，出现即可

help

要显示的帮助信息,会在表格的说明字段中出现叹号，鼠标附上去即可看到

1. 'title|help|不能超过 30 个字符'
2. 'title|help|不能超过 30 个字符|nreq'
3. 'title|nreq|help|不能超过 30 个字符'
4. ['title','input','nreq','help','不能超过 30 个字符']
5. ['title','input','help','不能超过 30 个字符','nreq']

请注意，使用数组的时候，help 后面就是提示信息，字符串的时候 help|这里要输入显示的字符，nreq 表示非必填，出现即可

clear

清楚常规字段引起的表单项类型

1. "status|clear|select"
2. ["status","clear","select",{1:1,2:2}],
3. ["status","select","clear",{1:1,2:2}],

status 会被处理成开关的模式

disabled

对于输入框组、富文本编辑器、上传按钮是无效的

1. 'order_no|disabled'
2. 'sex|disabled|radio'

输入框

page.form=[
  'title',
  'title|nreq',
  // 这里不可编辑，且非必填是可以这样设置的，
  'title|disabled|nreq',
  'title|help|请输入标题',
  'title|help|请输入数量|nreq',
   // 文本域
  'intro|ta',
  'intro|textarea',
  'intro|nreq|textarea|help|请输入值',
  ['intro','textarea','nreq'],
  ['intro','nreq','textarea','请输入值'],
  // 输入组
  'year|ig',
  'year|ig|年', // 年是输入组的特有的，一般用于单位显示
  'year|inputGroup|年|nreq',
  'year_min|hidden', // 用户表单值的回填
  'year_max|hidden',
  // 富文本
  'content|editor',
  'content|editor|nreq',
  ['content','editor','nreq'],
  ['content','nreq','editor'],
];

选择框

const status={0:'关闭',1:开启};
page.form=[
  // 单选，这里会使用常规字段匹配规则
  'status',
  // 清除常规字段匹配规则，且渲染成输入框
  'status|clear',
  // 清除常规字段匹配规则，且渲染成下拉框
  ['status','clear','select',status],
  ['status', 'radio', status],
  // 下拉框
  ['status', 'select', status],
  ['status', 'select', status,'nreq'],
  ['status', 'select', status,'nreq','help','请选择'],
  ['status', 'select', status,'help','请选择','nreq'],
  // 复选框
  ['status', 'checkbox', status],
  // 下拉多选框
  ['status', 'selectCheckbox', status],
  // 级联样式表
  ['category', 'c', []],
  ['category', 'cascader', []],
  // 渲染一个开关，默认使用{0:'禁用' ,1:'启用'}为选项
  'status|switch',
];

时间选择

page.form=[
  // 渲染一个日期选择框
  'begin_time|d',
  'begin_time|date',
  'begin_time|date|nreq',
  'begin_time|date|nreq|help|开始时间',
  // 渲染一个时间选择框
  'start_time|t',
  'start_time|time',
  'start_time|time|nreq',
  'start_time|time|nreq|help|开始时间',
  // 渲染一个区间日期选择框
  'open_time|r',
  'open_time|range',
  'open_time|range|nreq',
];

上传按钮

按钮类封装了一些常用的，需要引入

import { Upload, Image, SimpleImage, File, SimpleFile, Video, SimpleVideo } from './render/classes/upload.ts';

基类

new Upload(size: number = 2048, limit: number = 5);

属性:

1. accept 限制上传格式,例如 ['.doc,','docx']
2. multiple 开启多文件上传
3. limit 最大上传数量,默认 5
4. size 单个文件最大体积，单位 M
5. help 帮助文本
6. value 已上传的文件列表，支持 v-model

常用的类

1. Image 限定为图片 默认大小为 1024，数量 5 张 格式：['png', 'jpg', 'jepg', 'gif']
2. SimpleImage 默认大小为 1024，数量 1 张
3. File 限定为文件 默认大小为 2048，数量 5 个 格式： ['doc', 'docx', 'txt', 'xls', 'xlsx', 'pdf', 'ppt']
4. SimpleFile 默认大小为 1024，数量 1 个
5. Video 限定为视频 默认大小为 2048，数量 5 个 格式： ['mp3', 'mp4', 'avi', 'wmv', 'mpg', 'mpeg', 'mov', 'rm']
6. SimpleVideo 默认大小为 2048，数量 1 个

let file=new File();
file.limit=10;
file.accept=['doc','docx'];

page.form=[
  // 渲染一个上传按钮，且使用常规字段匹配,缩略图的形式，只能上传一张，且大小小于100K
  'icon',
  'thumb',
  // 渲染一个上传按钮，且使用常规字段匹配,缩略图的形式，只能上传一张，且大小小于200K
  'avatar',
  'head',
  'logo',
  // 渲染一个上传按钮，只能上传一张，且大小小于1024K
  'picture|upload',
  // 指定上传按钮的类型，只能上传一张图片，最大值为512K
  ['logo','upload',new SimpleImage(512)],
  // 指定上传按钮的类型，只能上传一个文件，最大值为512K
  ['file','upload',new SimpleFile(512)],
  // 传递一个对象
  ['file','upload',file],
];