quick-el-admin v0.1.53

quick-el-admin

Project setup

npm/cnpm install quick-el-admin --save

起步

import Vue from 'vue'
import QuickElAdmin from 'quick-el-admin'
Vue.use(QuickElAdmin)

你需要在vuex store/index.js文件中
import {quickStore} from 'quick-el-admin'
...
modules: {
    quickStore
  }


App.vue中建议加入样式：
<style lang="less">
/*防止输入框输入文字，高度产生细微变化，导致el-col错位*/
.systemRow .el-col {
  min-height: 60px;
}
.systemRow .col-action{
  min-height: 0;
}
</style>

使用

qc-button

<qc-button @sysClick="searchHandle" type="primary" icon="查询">查询</qc-button>

qc-select

<qc-select
 v-model="form.prop"
 :config="config"
 v-on="events">
 </qc-select>

qc-form

<qc-form
  ref="systemForm"
  :form="dataForm"
  :rules="dataRules"
  :config="dataFormConfig">
  <template slot="dateRange">
    <qc-date-picker v-model="dataForm.dateRange"></qc-date-picker>
  </template>
  <template slot="_action">
    <qc-button @sysClick="searchHandle" type="primary" icon="查询">查询</qc-button>
    <qc-button @sysClick="resetHandle" icon="重置">重置</qc-button>
  </template>
</qc-form>

qc-detail-form

<qc-detail-form
:form="dataForm"
:config="dataFormConfig"
></qc-detail-form>

qc-table

 <qc-table
  :data="dataList"
  :columns="columns"
  :config="{
    lineAction: true,
    lineActionWidth: 120
  }"
  @selection-change="handleSelectionChange">
  <template slot="_action">
    <qc-button @click="addOrUpdate()" type="primary" icon="新增" size="mini">新增</qc-button>
    <qc-button @click="deleteHandle()" type="danger" :disabled="selectedDataList.length === 0" icon="删除" size="mini">删除</qc-button>
  </template>
  <template slot="_lineAction" slot-scope="{row}">
    <qc-button @click="addOrUpdate(row)" type="text" icon="编辑" size="mini">编辑</qc-button>
    <qc-button @click="deleteHandle(row)" type="text" color="#F56C6C" icon="删除" size="mini">删除</qc-button>
  </template>
</qc-table>

配置项

1、qc-button

qc-button 接收element-ui基础配置
此外，在button 按钮type 为text时，新增color属性，用于改变文字颜色

新增 sysClick(done)  触发函数，参数done 决定按钮点击状态，
点击一次按钮之后，需要调用done函数，才可以再次点击，
如若无需此功能，你依旧可以使用click 触发函数

2、qc-select

qc-select 基于el-select
qc-select 默认用于clearable属性，
qc-select change事件参数新增 返回当前选中条目所有属性
qc-select 拥有config属性，在config属性中接收el-select基础配置 
此外config中新增配置
{
    dict: '字典类型',  //dict字段传入字典类型，用于为下拉框填充字典数据，无需指定label，value
    url: '接口地址', //当下拉框数据，取自接口时，在url中键入接口地址
    ------start------当数据取自接口时，需要指定数据源的label，value---------
    label: '', //指定下拉框的label
    value: '', //指定下拉框的value
    --------end--------------
    list: [], //既不是字典，也不是接口，前端写死的列表，如字段与字典不统一，也需要指定label，value
    link: '联动字段', //下拉框会存在联动效果，比如省、市、区联动，在"市"的下拉框配置 link为"省"字段，
    那么在"市"级下拉框接口参数中，会传入"省"的id，参数名默认为link绑定字段，如参数名不符合你的期望，
    你需要指定linkTarget属性
    linkTarget: '', //用于指定联动接口的参数名
    parmas: {}, //当采用url接口调用时，可能需要额外参数
    typeof: 'string', //当回显拿到的数据类型与字典数据类型不一致时，typeof可以将其转换为数据字典中的类型
}

3、qc-form

qc-form基于el-form
qc-form拥有form属性，config属性
qc-form 默认注册必填校验规则，默认生成placeholder，你无需手动编写
在form属性中的字段决定这qc-form的展示，qc-form会依据form字段进行遍历显示表单
在config属性中
_baseConfig: {
    span: 24, //表单各项所占宽度
    labelWidth: 100, //表单label宽度
    actionBlock: true, // 块级显示，决定表单按钮是否是与控件同行显示
}
"指定字段"：{
    required: true, //表示此项必填
    type: 'select' // 表单默认输入框控件，当指定为select时，变为下拉框
    label: '字段名', //该项字段名
    labelWidth： '字段宽度', //字段名所占宽度
    hidden: true, //字段隐藏
    span: 8, //该项所占宽度
    slot: true, //开启插槽，当你的控件不是下拉框，或输入框时，需要在tempalte中插槽中定义
    parentSlot: true, //当你不想寄存与el-form-item下，从el-col开始自定义书写
    config: {} //当type为select时，同qc-select的config，否则同el-input的基础配置
 }

4、qc-form-detail

qc-form-detail 是qc-form的详情样式，拥有_baseConfig,以及config的部分属性

5、qc-table

qc-table基于el-table
qc-table 拥有 data，column，config属性
1、data为列表的数据
2、column 遵循 [
['字段英文名', '字段中文名', '字段宽度', '插槽']
]
在字段英文名列，可以携带"::"匹配字典数据，例如：'status::status_type',可以直接显示字典的label值
匹配符号：{
    :: -> 列字典翻译，例如：'status::status_type'
    + -> 多字段合并到一列显示
    * -> 默认值，当一个字段的默认值为空，你可以手动配置 例如：'status*已完成'
}

在字段宽度中
你可以写入 '200-tooltip-center' 表示当前字段 宽度200 文字过多单行显示... 居中显示
3、config
在config中配置操作列的行为
{
    selection: true, //显示勾选框
    index: true, //显示序号
    lineAction: true, //显示操作列
    lineActionWidth: 200 //操作列宽度
}

6、qc-tree (0.1.40)

qc-tree 基于el-tree
qc-tree 拥有config属性，在config属性中接收el-tree基础配置 
  {
    url: '接口地址', // 列表数据结构
    label: 'label', // 指定列表展示字段
    children: 'children', // 指定列表子集数据
  }

函数

quick-el-admin 中提供了一些方法
    quickHttp：http请求集成
    httpRequest：http请求拦截器
    httpResponse：http响应拦截器
    quickStore：quick-el-admin所使用的vuex模块，需要在项目内引入
    setConfig：修改quick-el-admin的一些基础配置
    setRoutes：设置动态路由函数
    dayjs：quick-el-admin继承的dayjs函数库
    setForm: 给dataForm赋值
    resetForm: 重置dataForm值为空
    cropForm: 去除dataForm中无需传递的字段
    debounce: 返回js防抖函数

项目基本使用

import Vue from "vue";
import router from "@/router";
import QuickElAdmin, {httpResponse, httpRequest, setConfig, quickHttp, dayjs} from 'quick-el-admin'
import {getToken} from "@/utils/index";

Vue.use(QuickElAdmin)
Vue.prototype.$http = quickHttp // ajax请求方法
Vue.prototype.$moment = dayjs   //使用dayjs参照 https://dayjs.fenxianglu.cn/
Vue.prototype.$tbLoading = (loading) => store.commit('setTableLoading', loading)  // table loading
Vue.prototype.$dict = store.getters.getDict  // 获取字典

//http请求拦截
httpRequest((config) => {
    if (config.url.includes('login')) {
        config.headers['Authorization'] = '' // 请求头带上token
    } else {
        config.headers['Authorization'] = getToken() // 请求头带上token
    }
}, process.env.NODE_ENV, '/proxy')

//http响应拦截
httpResponse((res) => {

}, process.env.NODE_ENV)


//quick-el-admin 的基础配置
setConfig({
    //配置字典的相关属性
    dict: {
        url:'/system/dict/data/noPowerList',
        label: 'dictLabel',
        value: 'dictCode',
        type: 'dictType'
    },
    //配置路由菜单的相关属性
    router: {
        url: '/getRouters', //菜单的接口路径，菜单的返回数据结构需要与服务端约定
        starter: router, //VueRouter实例，作为启动器
        dynamic: true, //开启动态菜单，动态菜单需要指定菜单对应的模块：import
        import: (path) => () => import(`../views/modules/${path}.vue`) //path由quick-el-admin提供
    }
})

Lints and fixes files

npm run lint

源码地址

See Configuration Reference.

更多详细配置，请参照element-ui

See Configuration Reference.