anshare-multifunction-test

v0.0.3

Published

4 years ago

Anshare Crud Plugin

0High
0Medium
0Low

mododan

🎉 Anshare多功能Crud插件

特性

基于el-table,el-form二次封装,表单表格支持可视化配置
表单设计器
- 基础组件: 内置element-ui表单组件
- 高级组件:
  - 级联选择器 (el-cascader)
  - 富文本编辑器 Tinymce
  - 附件模块 (FileUpload)
  - 表格模块 (CrudTable)
  - 树形下拉框 (vue-treeSelect)
  - 自定义插槽
表格设计器

开始使用

安装

npm i anshare-multifunction-crud -S

CDN

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 引入ProCrud CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/ProCrud.css" />
    <!-- 引入ElementUI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <el-button @click="showDialog('form')" type="primary">打开表单设计器</el-button>
      <el-button @click="showDialog('table')" type="danger">打开表格设计器</el-button>
      <form-designer-dialog ref="form"></form-designer-dialog>
      <table-designer-dialog ref="table"></table-designer-dialog>
      <crud-table tableName="dept" tableTitle="表格示例"></crud-table>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import ElementUI -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- import AnshareMultifunctionCrud -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/ProCrud.umd.min.js"></script>

  <script>
    new Vue({
      el: "#app",
      methods:{
        showDialog(name){
          this.$refs[name].showDialog();
        }
      }
    });
  </script>
</html>

本地调试

本地debug

// 调试代码位于examples/App.vue
npm start

lib包debug

// 1、umd打包
npm run demo
// 2、打开index.html

修改index.html中后台url地址
修改@/api/axios.ts中token为该项目合法token

引入 AnshareMultifunctionCrud

支持完整引入及按需引入,该插件基于ElementUI封装,注意引用顺序

完整引入

在 main.js 中写入以下内容：

import AnshareMultifunctionCrud from 'anshare-multifunction-crud';
import ElementUI from 'element-ui';
import 'anshare-multifunction-crud/lib/AnshareCrud.css'; // 先引入插件css,避免css污染
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI)
AnshareMultifunctionCrud.init(options);//可以对插件进行一些的初始化
Vue.use(AnshareMultifunctionCrud);

按需引入

  import { GenerateForm } from 'anshare-multifunction-crud';
  Vue.use(GenerateForm);

  import Vue from 'vue';
  import { GenerateForm,CrudTable } from 'anshare-multifunction-crud';
  import App from './App.vue';

  Vue.component(GenerateForm.name, GenerateForm);
  Vue.component(CrudTable.name, CrudTable);

  /* 或写为
  * Vue.use(GenerateForm)
  * Vue.use(CrudTable)
  */

  new Vue({
    el: '#app',
    render: h => h(App)
  });

完整组件列表

GenerateForm // 根据表单设计器json自动渲染表单
FormDesignerDialog // 表单设计器
TableDesignerDialog // 表格设计器
CrudTable // 高级增删改查 ProTable

组件文档

init

Ps: CrudTable继承自el-table.官方props,events均可直接使用.此处只列出本插件新增props,events.

CrudTable

Props

| 参数 | :--------------------: | el-table Props | 见官网 | - | - | - | 展开行 | Array | - | - | | 查询区域模式 | String | popover/cover | popover | response 中数据位置 | String | data/data.list | data.list | | GenerateFormDialog 中的表单禁用.null 表示均可编辑;{}表示全部只读; | Object | null/{}/{whiteList:{},blackList:{}} | null | | 是否开启多选 | Boolean | true,false | false | | 表单预填项(赋值初始值) | Object | - | null | 表单对话框是否插入至 body 元素上 | Boolean | true/false | true | 表名 | String | - | '' | 用于请求表格设计 json 的 name,不传则默认读取 tableName | String | - | null | 对话框内加载 FormDesigner 的表名,,不传则默认读取 tableName | String | - | null | 排序条件 | String | - | null | 内部元素显示控制(详情见下方) | Object | - | {} | 表格标题 | String | - | '' | 表格请求参数(带查询参数请求) | Object,Array | - | {} | | 表单对话框标题 | Object | { add:'添加',edit:'编辑',detail:'查看'} | {} | 自定义删除按钮 promise 请求 | Function | Function({id}) | - | 自定义列表查询 promise 请求 | Function | Function(searchCondition, clearParams) | - | 添加按钮点击事件 | Function | - | - | 表格行中的添加按钮点击事件 | Function | Function(row) | - | 编辑按钮点击事件 | Function | Function(row) | - | 查看按钮点击事件 | Function | Function(row) | - | 表格行中的添加按钮是否显示事件 | Function | Function(row) | - | 表格行中的删除按钮是否显示事件 | Function | Function(row) | - | 表格行中的编辑按钮是否显示事件 | Function | Function(row) | - | 表格行中的查看按钮是否显示事件 | Function | Function(row) | - | 自定义列表 config 请求 | Boolean | true/false | true | 远程数据方法(用于表单内远端数据请求) | Object | - | {} | | 动态传入分页 | Array | - | [10,50,100] | 表格自适应高度需要减去的高度值 | Number | - | 285 | 是否自适应屏幕高度(配置MaxHeightMinus) | Boolean | - | false | 选择框动态判断是否显示 | Function | - | null | 表单是否全屏 | Boolean | - | false | | 表单点击阴影是否可以关闭 | Boolean | - | false | 表单宽度 | String | - | 1000px | | 是否显示序号列 | Boolean | - | false | | 自定义导出url | String | - | null | | 表单中表格的tableConfig | Object | - | 详情看GenerateFormItem中解释 | | 异步更新表单数据 | Object | - | 外层异步传入数据更新表单,注意不能直接修改formValues | [] | Array | - | 表单联动规则 | | 操作列宽度(有时需要直接指定列宽) | Number | - | null | | 分页显示 | String | 见官网 | total, prev, pager, next, jumper, sizes |

Props 补充说明

visibleList

  // 内部元素显示控制
  {
    searchForm: true, // 查询区域
    tableTitle: true, // 表格标题
    btnAdd: true, // 添加按钮
    btnDel: false, // 批量删除按钮
    btnExport: true, // 导出按钮
    btnImport: false, // 导入按钮
    actionColumnBtnAdd: false, // 操作列添加按钮
    actionColumnBtnEdit: true, // 操作列编辑按钮
    actionColumnBtnDetail: false, // 操作列查看按钮
    actionColumnBtnDel: true, // 操作列删除按钮
    actionColumn: true, // 操作列
    seniorSearchForm:true, // 高级查询表单是否显示 (改为false需要通过slot传入自定义高级查询表单)
    btnAddOnColumnHeader: false, // 操作列header添加按钮
  };

textMap

// 按钮文字Map
{
  add: '添加',
  edit: '编辑',
  del: '删除',
  detail: '查看',
  export: '导出',
  import: '导入',
}

Events

Slots

| 插槽名称 | 说明 | | :-------------: | :--------------------------------------: | | columnFormatter | 结合表格设计自定义列使用 | | btnBarPrevBtn | 自定义右上角功能按钮 | | btnCustom | 自定义操作按钮参数为 {row} | | seniorSearchForm | 自定义高级查询表单 | | dialogFooter | 弹出表单右侧底部slot |

Methods

| 方法名 | 说明 | 参数 | | :---------: | :----------: | :--: | | tableReload | 重新加载列表 | - | | getElTable | 获取原生el-table对象 | - |