QuickAdmin文档

# 前端手册

# 开发规范

# 格式化 prettier

vsCode 编辑器下载插件：Prettier - Code formatter (opens new window),设置成默认格式化即可。 .prettierrc用于配置代码风格

# 新增 view

在 @/views (opens new window) 文件下 创建对应的文件夹，一般一个路由对应一个文件， 该模块下的功能就建议在本文件夹下创建一个新文件夹，各个功能模块维护自己的 components 组件

# 新增 api

在 @/api (opens new window) 文件下 创建对应的文件夹，一般一个文件对应一个模块， 该模块下的功能 api 都建议放在此文件内

# 新增 component

在 @/components (opens new window) 下创建的一般是全局组件, 如是某个模块内单独使用的，则建议组件建在当前模块文件内，如：

@/views/system/staff/component/xxx.vue
1

# 新增 按钮 permission

在@/api/all.js (opens new window) 下定义权限接口，在页面按钮中用指令v-hasPermi如下使用：无权限角色按钮将隐藏

<el-button v-hasPermi="$api.menu.edit">修改</el-button>
<el-button v-hasPermi="$api.menu.add">新增</el-button>
<el-button v-hasPermi="$api.menu.delete">删除</el-button>
1
2
3

提示

@ 符号是 src 别名路径,可在以下文件内自定义修改 
// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# 组件使用

# 局部注册

<template>
  <userAvatar :src="url"/>
</template>

<script>
import userAvatar from './profile/userAvatar'
export default {
  name: 'Staff',
  components: { userAvatar },
  data () {
    return {
      url: 'http://www.quickadmin.icu',
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 全局注册

在 @/utils/globalcomponent.js (opens new window)里添加全局组件， 如：

// 富文本组件
import Editor from "@/components/Editor";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar";

export { RightToolbar, Editor };
1
2
3
4
5
6

在入口函数 main.js 自动全局注册

import * as globalcomponent from "@/utils/globalcomponent";
// 全局组件挂载
Object.keys(globalcomponent).forEach((key) => {
  Vue.component(key, globalcomponent[key]);
});
1
2
3
4
5

# 图片上传

<ImageUpload v-model="form.images" :limit="5" />
1

参数说明：

  • limit 属性

    限制上传数量，不传默认数量是 1

  • fileSize 属性

    限制上传图片大小，默认 5M

  • fileType 属性

    限制图片上传类型，默认数组 ['png', 'jpg', 'jpeg']

# 文件上传

<FileUpload v-model="form.attachfile" :limit="2" :fileSize="2" />
1

参数说明：

  • limit 属性

    限制上传数量，不传默认数量是 1

  • fileSize 属性

    限制上传文件大小，默认 5M

  • fileType 属性

    限制文件上传类型，默认数组 ['doc', 'xls', 'ppt', 'txt', 'pdf']

# selectPage 组件

<SelectPage v-model="form.sid" :url="url" :multiple="false" :filter="{}" />
1

参数说明：

  • url 属性

请求接口地址，默认/admin/example.category/selectPage

  • multiple 属性

    是否多选

  • filter 属性

其他检索条件,接收的数据格式为：{xxx:{value:'',op:'='}},使用时候，替换 xxx，xxx 为检索的字段

  • disabled 属性

是否禁用

  • show_field 属性

回显的字段名，默认 name

  • show_id 属性

回显的字段值，默认 id

  • query_field 属性

查询时回显的字段名，默认 name

# Curd 案例解析

# 查询参数定义

queryParams: {
    id: { value: undefined, op: '=' },
    title: { value: undefined, op: 'like' },
    description: { value: undefined, op: 'like' },
}
1
2
3
4
5

参数说明

  • value 字段值
  • op 字段参与查询模糊度

# 多表表结构渲染 prop 定义

可以使用. 符号

{
    visible: true,
    label: "分类",
    prop: "category.name",
    sortabe: "custom",
    width: 200,
}
1
2
3
4
5
6
7

# 案例表结构示例

// 渲染table表结构
columns: [
  {
    visible: true,
    label: "分类",
    prop: "category.name",
    sortabe: "custom",
    width: 200,
  },
  {
    visible: true,
    label: "ID",
    prop: "id",
    sortable: "custom",
    width: 100,
    formatter: (prop, row) => {
      return this.testFormatter(prop); // 案列：当前组件内格式化方法
    },
  },
  {
    visible: true,
    label: "标志(多)",
    prop: "flag",
    width: 180,
    component: "QuickAdminTag",
    formatter: (prop, row) => {
      return row.flag_text;
    },
  },
  {
    visible: true,
    label: "图片",
    prop: "image",
    component: "QuickAdminImage",
  },
  {
    visible: true,
    label: "价格",
    prop: "price",
    formatter: (prop, row) => {
      return this.moneyFormat(prop, ...["$ ", 2, ","]); // 全局格式化方法
    },
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  • visible 属性

该属性控制数据渲染时是否默认展示

  • label 属性

该属性控制数据渲染时字段的对应文本

  • prop 属性

该属性控制需要渲染的字段

  • sortabe 属性

该属性控制该行数据是否参与排序

  • width 属性

该属性控制数据所占表格的宽度

  • component 属性

该属性控制数据渲染使用的组件,不指定默认以QuickAdminText (opens new window)渲染数据

  • 可选组件有

    • QuickAdminText：渲染出普通文本
    • QuickAdminTag：渲染出 tag 标签
    • QuickAdminImage：渲染出图片
    • QuickAdminSwitch：渲染出可交互的 switch
    • QuickAdminPopover：一般渲染附件地址
    • QuickAdminTextColor：可渲染不用颜色文本， 需搭配 formatter 属性使用,函数使用及数据返回格式如下
formatter: (prop, row) => {
  /**
   * component: 'QuickAdminTextColor',
   * type/color                    // 二选一，可共存，color优先级更高
   * let type ='success' ，        // type有5个颜色固定值 空/success/danger/warning/info
   * let color = '#FFFFFF'         // 灵活性更高
   *
   */
  let color = "";
  switch (prop) {
    case 0:
      color = "#eb6b2b";
      break;
    case 1:
      color = "#c485bf";
      break;
  }
  return {
    value: prop, // 值
    color: color, // 颜色
    text: row.status_text, // 显示的文案
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  • formatter 属性

该属性控制数据的格式化函数， 传入函数，自动接受两个参数，prop：字段值，row:该表格整行数据

# 全局方法

在 @/utils/quickadmin.js (opens new window) 下创建全局方法, 在.vue 文件内使用this.方法名使用，如this.handleTree

// @/views/menu/index.vue
getList() {
    this.loading = true
    listMenu()
    .then(response => {
        this.menuList = this.handleTree(response.data)
    })
    .finally(() => {
        this.loading = false
    })
},
1
2
3
4
5
6
7
8
9
10
11

# 引入依赖

如开发中使用到其它插件或者库需要手动安装相关依赖，在终端输入以下指令即可安装，

# 加上 --save 会自动添加依赖到 package.json 中的dependencies字段下。
npm install quickadmin-icu --save
1
2
# 加上 --save-dev 会自动添加依赖到 package.json 中的devDependencies字段下。
npm install quickadmin-icu --save-dev
1
2

提示

dependencies 下的依赖最终会build到dist目录（上线目录）

devDependencies 下的依赖只在开发环境中用到，不会打包到dist目录

最近一次更新: 5/12/2022, 10:03:02 AM

← 后台手册 →