ant-design-vue-admin-x

基于 ant-design-vue 封装的后台管理组件

1.基于 ant-design-vue 封装的后台管理组件，包括 table 和 form 两大组件； 2.无需写ui组件，简单配置参数即可快速实现后台管理中大部分页面的开发，可以大幅度减少代码量，易于维护，提升开发效率； 3.集成 axios 封装的 http 请求； 4.集成了v-hasPermi 指令可以对不同角色的按钮，进行显隐的控制。

install

该组件基于ant-design-vue，也需要同时安装

npm i ant-design-vue --save
npm i ant-design-vue-admin-x --save

usage

import Vue from 'vue';
import App from './App';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import antAdminX, { GET, POST, DELETE, PUT } from 'ant-design-vue-admin-x';

Vue.use(Antd);
Vue.use(antAdminX);

Vue.prototype.$get = GET; // 将请求方法挂载值vue原型
Vue.prototype.$post = POST;
Vue.prototype.$delete = DELETE;
Vue.prototype.$put = PUT;

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});`

详情使用方法可以查看项目中 demo 示例

form表单组件

options 属性

| 参数 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | ----- | | formType | 表单类型，modal为弹窗表单，unModal为普通表单 | String | unModal | | formList | 自动生成表单的参数，为对象数组 | Array | [] | | formKey | 整个表单每项绑定值的key字段，如： formKey: { title: undefined, imageId: undefined } | Object |{} |addParam |表单提交为 新增 数据的参数|Object| {}| |editParam|表单提交为 编辑 数据的参数|Object|{}| | detailParam|获取表单 详情 表单赋值的参数|Object|{}| |itemLayout|表单标签 labelCol、输入控件布局样式 wrapperCol 的配置|Object|{ labelCol: { span: 8 }, wrapperCol: { span: 9 } }| | reqLoading|提交按钮loading效果，一般在弹窗表单中使用，如：reqLoading: { loading: false }|Object|{}| |initReqHandle|初始化页面，是否需要请求获取详情接口。一般在非弹窗表单，进入详情且不需要初始化获取详情时使用| Boolean|true| |isSubmitBtn|表单是否需要提交按钮，一般在弹窗表单中使用|Boolean|true |apiOrigin|设置 整个form组件接口的 baseUrl JAVA还是PHP的|String|JAVA|

addParam、editParam、detailParam参数

| 参数 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | ----- | |url|表单新增、详情、编辑数据请求接口的url|String|undefined| |reqHandle|表单新增、编辑接口提交前事件，函数的参数为表单数据 values。需要在请求前处理数据时使用。此参数只有 addParam 中有该属性，put方式编辑表单前，也会调用该事件|Function|undefined| |resHandle|表单在新增、编辑、详情数据，接口提交成功后的回调|Function|undefined| |pathParam|编辑时参数id是路径参数还是放body, 如果id参数放body，pathParam只能为 false|Boolean|undefined|

formList 配置项

|参数| 说明| 必填| 类型| 默认值| |-----|-----|-----|-----|-----| |label| label的名称| 否| String| undefined| |inputType| 输入框的的表单类型，如：input，select| 是| String| undefined| |placeholder| 输入框的提示信息| 否| String |undefined| |props| 绑定的 key 值和 option选项 为数组格式，如：[key, options]，详细见官网| 是| Array| undefined| |options| 当表单该项为select、cascader之类的输入框时，选择项的数据，格式一般为： [{value: 1, label: '选择项'}]| 否| Array| undefined| |isShow| 初始化是是否显示，该属性控制的是 form-item 的 v-if 属性值| 否| Boolean| true| |labelCol| 单独设置label标签的布局| 否| Object| undefined| |wrapperCol| 单独设置输入框的布局| 否| Object| undefined| |handle| 输入框 change 事件处理函数| 否| Function| undefined| |blur |input框 blur 事件处理函数 |否 |Function| undefined| |click |input框 click 事件处理函数 |否 |Function |undefined| |mode| select 输入框的模式为多选或标签，可选值为'default'、 'multiple'、 'tags'、 'combobox'| 否| Strign| undefined| |extra| 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用，详情见官网| 否 |String |undefined| |disabled| 禁用该表单项| 否| Boolean| false| |treeCheckable| 当inputType为 tree-select时，是否显示 checkbox| 否| Boolean |undefined| |fieldNames| inputType为 cascader 自定义 options 中 label、name、children 的字段| 否| String |undefined| |type| 当 inputType 为 input ,type值为textarea、number、password分别展示为textarea输入框、number输入框、密码框| 否| String| input| |titles| transfer 的标题集合，详情见官网| 否| String| undefined| |changeOnSelect| inputType为 cascader 为 true 时，点选每级菜单选项值都会发生变化| 否| Boolean| false| |help| 提示信息，如不设置，则会根据校验规则自动生成| 否| String| undefined| |isSearch| tree 组件 是否展示搜索框 |否| Boolean| undefined| |slot|slot的name名,form-item需要自定义时使用|否|String|| |subList|同一个 form-item 内部嵌套多个输入框时使用,配置项和 formList 相同|否|Array|undefined| |readOnly|inputType为input时，设置是否为只读|否|Boolean|undefined| |labelCol|设置每项item的label宽度，整个宽度24份所占的份额|否|Number|undefined| |wrapperCol|设置每项item wrapper的宽度，整个宽度24份所占的份额|否|Number|undefined| |loadData|inputType 为 cascader 时，用以加载子级数据|否|Function|undefined| |loadData|inputType 为 cascader 时，用以加载子级数据|否|Function|undefined| |min|inputType 为 inputNumber 时，设置最小值范围|否|Number|undefined| |max|inputType 为 inputNumber 时，设置最大值范围|否|Number|undefined| |unit|inputType 为 inputNumber 时，输入框的单位|否|String|undefined| |fileList|inputType 为 upload 时，为详情或上传成功的文件预览列表|否|Array|[]| |uploadParam|inputType 为 upload 的配置参数, 详情说明见如下文档|否|Object|undefined| |disabledDate|inputType 为 rangePick、rangeTimePick、datePick、dateTimePick 禁用日期控件，参数为选中日期的function|否|Function|undefined| |selectChange|inputType 为 transfer时，选中项发生改变时的回调函数，参数依次为sourceKeys(左边)选中项、targetKeys(右边)选中项|否|Function|undefined| |showSelectAll|inputType 为 transfer时，是否展示全选勾选框|否|Boolean|false|

uploadParam 参数

inputType 为 upload 的配置参数

|参数| 说明| 类型| 默认值| |-----|-----|-----|-----| |url| 提交接口的地址| String| /file/ht_upload| |iconUrl| fileList 配置项 url 的参数，listType 为 picture ,表单赋值时 icon 的字段，一般表单详情时使用。建议使用与后台约定固定的返回格式: [ { fileId: '文件id', fileName: '文件名', fileUrl: ‘文件url' } ]| String| undefined| |iconName| fileList 配置项name的参数，如果不设置会依次去获取iconUrl、prop字段。建议使用与后台约定固定的返回格式: [ { fileId: '文件id', fileName: '文件名', fileUrl: ‘文件url' } ]| String| undefined| |accept| upload 选择文件的格式（只能过滤选择文件时的格式，提交前并没有验证）| String| undefined| |listType| upload展示的格式，有text、picture、picture-card 三种| String| text| |uploadType|和后台约定的上传文件类型| Number| 4|

能通过refs操作组件内部的方法、数据

|方法|说明|类型| |---|---|---| |handleSubmit|表单提交方法|Function| |routeQuery|表单为弹窗时，查看表单详情时该条数据的 id| String/Number| |getDetail|调用获取表单详情的方法|Function| |setFieldsValue|给表单赋值，ant form 内置方法|Function({ [fieldName]: value })| |validateFields|验证表单，ant form 内置方法|Function| |targetKeys|transfer 选中项的值|Array| |resetSubValue|清空联动表单下级的值和下拉选项|Function([keys: string[]])|

table 组件

table options

|参数|说明|类型|默认值| |---|---|---|---| |searchList|搜索列表|Array|[]| |searchParams|搜索参数，对应searchList每项的值|Object|{}| |tableOptList|全局操作项|Array|[]| |rowOptList|每一项的操作项|Array|[]| |columns|表格列的配置数组|Array|[]| |dataSource|表格默认数据|Array|[]| |excludeResetKey|重置搜索忽略的字段|Array|[]| |rowOptLen|每项操作项默认展示的个数|Number|3| |rowSelection|table是否需要多选按钮 checkbox|Boolean|true| |rowKey|单独删除或多选删除的 id 字段，也用于table循环需要的key|String|undefined| |scrollWidth|设置X轴滚动的宽度|Object|{}| |apiOrigin|设置 整个table 组件的接口 baseUrl JAVA还是PHP的|String|JAVA| |paginationParam|table的分页参数|Object|{ current: 1, pageSize: 10, total: 0, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: ['10', '20', '30', '40'], showTotal: total => { return 共 ${total} 条; } }| |initReqHandle|页面初始化时是否请求接口|Boolean|true| |canDelKey|判断是否可以单选或多选删除每项的 key|String|['canDelete' , 'can_delete', 'isDelete', 'is_delete']| |rowCheckboxAble|判断当前行是否可选，return false 可选，反之不可选当，rowSelection为true时生效|Function|false|

searchList

搜索列表每项的参数

|参数|说明|类型|默认| |---|---|---|---| |props|表单每项收集的key|Array|undefined| |inputType|输入框的类型，如：input、select|String|undefined| |placeholder|每项输入框的默认提示信息|String|undefined| |options|如果输入框为下拉、级联等的下拉选项|Array|[]|

tableOptList

整个 table 操作项

|参数|说明|类型|默认| |---|---|---|---| |text|每项按钮的文本|String|undefined| |permi|按钮权限配置，如：['community:info:add']|Array|undefined| |icon|按钮图标|String|undefined| |key|每项的唯一表示，不设置也ok|String|undefined|

rowOptList

table 每项操作按钮

|参数|说明|类型|默认| |---|---|---|---| |text|每项按钮的文本|String|undefined| |handle|每项按钮的点击事件处理函数|Function|undefined| |permi|配置每项按钮的权限,如：['community:config:query']|Array|undefined| |rowOptText|自定义按钮文本,为function，参数为当前整行的数据.需配合customRender为true时生效|Function|undefined| |rowOptDisHandle|判断当前按钮是否禁用，参数为当前整行的数据|Function|undefined|

columns

配置 table 每列数据

|参数|说明|类型|默认| |---|---|---|---| |title|每列的标题|String|undefined| |dataIndex|每列数据的key值|String|undefined| |align|对齐方式，有left、center、right，建议left|String|undefined| |width|每列的宽度，可以为px或百分百|String/Number|undefined| |scopedSlots|指定每列 如：scopedSlots: {customRender: 'action'}。操作项customRender的值固定为 action|Object|undefined| |customCell|自定义每列数据的渲染|Function(record, rowIndex)|undefined| |fixed|列是否固定, 需配合scrollWith 实现x轴滚动|boolean|false|

listApi

table 接口请求配置参数

|参数|说明|类型|默认| |---|---|---|---| |url|接口地址|String|undefined| |resHandle|接口成功后的回调|Function|undefined| |searchHandle|搜索请求前事件|Function|undefined|

addHandleParam

新增table数据的配置参数

|参数|说明|类型|默认| |---|---|---|---| |route|需跳转的路由，为新开页时使用|String|undefined| |title|跳转至新开页面的包屑名称|String|undefined|

deleteParam

单独删除或批量参数配置参数

|参数|说明|类型|默认| |---|---|---|---| |url|接口地址|String|undefined| |title|删除时弹窗内容的 类型名称，如：门禁设备|String|undefined| |key|删除时弹窗内容的 key, 如：deviceName|String|undefined|

通过refs操作组件内部方法或数据

|参数|说明|类型| |---|---|---| |getTableList|请求接口获取表格数据|Function| |showDeleteConfirm|打开删除确定框，方法参数为单条数据或多条数据数组|showDeleteConfirm(rows)| |toEdit|进入该条数据表单的详情，方法参数为该条数据|toEdit(row)| |setFieldsValue|设置搜索框的值|setFieldsValue（{key:value}）|

http 使用方法

      this.$get({ // 包含四个请求方式$get、$post、$put、$delete
        url: '/users',
        params: { id: this.id },
        btnLoading: this.loading
        config: { timeout: 20000 } // axios 配置参数会合并默认参数
      }).then(({ data }) => {
        // do something
      }).catch((err) => {
        // do error handle
      });

|参数|说明|类型|默认值| |---|---|---|---| |url|接口的url。baseUrl组件内部已处理，通过process.env.VUE_APP_BASE_API获取|String|undefined| |params|接口参数，get、post、put、delete都使用该字段|Object|{}| |btnLoading|loading处理，格式为：{loading: false}|Object|undefined| |config|自定义axios配置参数，会合并默认参数|Object|undefined| |then|接口成功的方法，参数为完整的返回数据对象|Function|undefined| |catch|接口失败的方法,参数为error|Function|undefined|

v-hasPermi 指令

v-hasPermi="[user:list:add]" // hasPermi指令的值为 Array，角色值格式为：[a:b:c]

layout

全局layout 布局

platFormDiffer

layout 各平台差异配置，该参数目前写在组件内部

|参数|说明|类型| |---|---|---| |community|每个端的唯一标识，如：community|Object| |menuLogo|每个端导航菜单位置的logo|url| |menuTheme|每个端导航菜单的主题色，dark或right|String| |asideColor|每个端导航菜单的背景色,如：#001529|String|

layoutRoute

每个页面的样式默认是白底，和 padding，如果要设置背景透明且没有默认padding，可以设置该项

|参数|说明|类型|默认值| |---|---|---|---| |layoutRoute|设置背景透明且没有默认padding|Array|[]|