# vue3-bms

**Repository Path**: zouzou_busy/vue3-bms

## Basic Information

- **Project Name**: vue3-bms
- **Description**: vue3+element plus 搭建的后台管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-20
- **Last Updated**: 2023-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### prop 和 template 的作用

```html
<el-table :data="tableList" row-key="id" border>
  <!--
        prop 的值就是列表的字段值，不需要 tableList.meta.title
        label 就是标题
        sortable 是标题上有排序的功能
      -->
  <el-table-column prop="meta.title" label="菜单名称" sortable>
    <!-- 如果使用了 template，则 el-table-column 的 prop 会失效，会渲染 template 里的数据到字段上
        #default="{ row }" 使用了插槽，row 是这一行的数据，名称不能改
        -->
    <template #default="{ row }">
      <!-- 因为 icon 是接口里的一个字段，要渲染的话这里使用动态组件 component -->
      <el-icon> <component :is="row.meta?.icon"></component> </el-icon>
      <span class="ml10">{{ row.meta?.title }}</span>
    </template>
  </el-table-column>
</el-table>
```

### 将接口返回的 1 或者 2 序列化成 “菜单” 或者 “按钮”

```html
<el-table-column prop="type" label="类型" align="center">
  <!--  -->
  <template #default="{ row }">
    <el-tag effect="plain" :type="row.type == 1 ? '' : 'success'">{{ row.type == 1 ? "菜单" : "按钮" }}</el-tag>
  </template>
</el-table-column>
```

### Props 引用的类型接口不支持外部 ts 文件导入，必须在当前文件中定义

```html
<script setup lang="ts">
  // 注意，Props 引用的类型接口不支持外部 ts 文件导入，必须在当前文件中定义
  interface IPage {
    page: number;
    size: number;
    total: number;
  }

  const props = withDefaults(
    defineProps<{
      page: IPage; // src/types/views.d.ts 里有个 PageType，不能再 props 里使用，要在当前文件里定义
    }>(),
    {}
  );
</script>

<template></template>

<style></style>
```

### 系统管理下的菜单管理和角色管理没有封装 hooks，只将分页抽取到了全局组件里

### 在用户管理里，将删除数据和获取列表的数据抽取到了 hooks 里（useTablePage.ts）

### 分页组件封装在了 src/components/global/Page.vue 里面，其他的组件里都使用了，是全局组件

## 首页

首页使用 echart 实现的图表展示，饼图没有抽取成 hooks，其他的图抽取到了 hooke 里 src/hooks/useEchart.ts
当要使用的时候，只需要传递 props 和 option 就可以了

![alt home](./src/assets/photo/home1.png)

## 系统管理-菜单管理

菜单管理将消息组件 Message 消息提示、MessageBox 消息弹框、Notification 通知封装成了 hooks，用的时候调用传递 message 和类型就可以了 src/utils/message.ts

##### 列表页面，点击行可以进行展开、收起

![alt home](./src/assets/photo/menu1.png)

##### 删除

![alt home](./src/assets/photo/menu2.png)

##### 新增

![alt home](./src/assets/photo/menu3.png)

##### 级联选择

![alt home](./src/assets/photo/menu4.png)

## 系统管理-角色管理

角色管理将分页封装成了一个全局组件 src/components/global/Page.vue，用的时候传递对应的参数即可

##### 角色列表

![alt home](./src/assets/photo/system1.png)

##### 删除

![alt home](./src/assets/photo/system2.png)

##### 新增表单

![alt home](./src/assets/photo/system3.png)

##### 分配权限、全选/不选、展开/收起

![alt home](./src/assets/photo/system4.png)

## 系统管理-用户管理

将搜索、删除、获取列表数据封装成了 hooks（src/hooks/useTablePage.ts），用的时候只需要调用即可
还封装了个新增修改表单的 hooks（src/hooks/useForm.ts）。还进行了自定义校验表单

##### 用户列表

![alt home](./src/assets/photo/user1.png)

##### 新增用户

![alt home](./src/assets/photo/user2.png)

##### 修改用户

![alt home](./src/assets/photo/user3.png)

##### 重置密码

![alt home](./src/assets/photo/user4.png)

## 商品管理-商品列表

##### 商品列表，可以点击已上架、下架请求接口

![alt home](./src/assets/photo/goods1.png)

##### 新增商品

![alt home](./src/assets/photo/goods2.png)

##### 修改商品，可以上传图片和富文本编辑

![alt home](./src/assets/photo/goods3.png)
![alt home](./src/assets/photo/goods4.png)