# 甄选平台

**Repository Path**: vee7z/selection-platform

## Basic Information

- **Project Name**: 甄选平台
- **Description**: 基于Vue3+TS+ElementPlus的后端通用管理平台
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-07
- **Last Updated**: 2023-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 1.创建项目
```
pnpm create vite 
```

### 2.运行项目
```
pnpm run dev 
```

### 3.设置自动打开浏览器
```
修改配置项为"dev": "vite --open", 
```

### 4.安装eslint并生成配置
```
pnpm i eslint -D
npx eslint --init 
```

### 5.安装eslint校验插件
```
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettie
r eslint-config-prettier eslint-plugin-node @babel/eslint-parser 
```

### 6.修改eslintrc.cjs配置文件


### other:
### 1.commitlint规则（git commit规则）
```
'feat',//新特性、新功能
'fix',//修改bug
'docs',//文档修改
'style',//代码格式修改, 注意不是 css 修改
'refactor',//代码重构
'perf',//优化相关，比如提升性能、体验
'test',//测试用例修改
'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert',//回滚到上一个版本
'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动

如：git commit -m 'fix: xxx' 
```

### 2.解决mock报错required
```
如果必须安装mock最新版则使用：
/node_modules/vite-plugin-mock/dist/index.mjs加入代码
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
```

也可以使用老版本pnpm install mockjs vite-plugin-mock@2.9.6 -D

同时可解决localEnabled飘红问题

### 开始集成Vue插件
### 1.路由
```
pnpm install vue-router
```

### 2.仓库
```
pnpm i pinia
```

### 更新说明：
#### 完成菜单模块/主页/主题设置：
```
1.完成菜单管理模块
    1.1.新增菜单相关接口
    1.2.完成菜单管理增删改查功能
2.完成部分数据大屏内容
    2.1.完成数据大屏顶部
    2.2.完成数据大屏左侧
    todo：暂留数据大屏中间及右侧后期完善，现在继续开发平台功能
3.404页面重写，可直接从404返回上一页
4.完成菜单权限功能
    4.1.拆分异步路由
    4.2.获取用户信息时，计算用户所拥有权限的菜单
    4.3.解决问题一：刷新空白问题，路由守卫放行改写为next({...to})解决（原因是放行执行在addRoute完成之前）
    4.4.解决问题二：切换用户导致路由错乱，通过lodash深拷贝异步路由解决（原因是过滤方法会修改原始路由数组）
    4.5.解决问题三：切换用户路由信息仍然缓存，可在刷新前访问无权限路由，通过退出登录时路由重置解决：
    //原理：退出登录时除了静态路由和任意路由，其他路由全部移除，详见user仓库用户退出登录方法
    import {createRouter} from "vue-router";
    let routers = router.getRoutes()
    let constantRouteNames:any = filterConstantRoutesName(constantRoute,[]);
    constantRouteNames.push(anyRoutes.name);
    routers.map((it:any)=>{
        if(!constantRouteNames.includes(it.name)){
            router.removeRoute(it.name)
        }
    })
    //过滤出所有静态路由的name，用于重置路由
    const filterConstantRoutesName = (routes:any[],initArr:any[]) => {
        return routes.reduce((prev:any,route:any)=>{
            initArr.push(route.name)
            if(route.children&&route.children.length>0){
            filterConstantRoutesName(route.children,initArr)
            }
            return initArr;
        },[])
    }
5.完成按钮权限校验
    5.1.校验方法：
    //用于判断用户是否有按钮权限，没有直接删除按钮节点
    --main.ts
    import {isShowBtn} from '@/directive/btnPermission'
    isShowBtn(app);

    --btnPermission.ts
    import pinia from '@/store';
    import useUserStore from '@/store/modules/user';
    //@ts-ignore
    let userStore = useUserStore(pinia);
    export const isShowBtn = (app:any) => {
        app.directive('has',{
            mounted(el:any,options:any){
                if(!userStore.userDetail.buttons.includes(options.value)){
                    el.parentNode.removeChild(el)
                }
            }
        })
    }

    --按钮身上使用
    <el-button v-has="'btn.User.remove'">删除</el-button>
    //按钮权限标识可通过菜单管理得到
    5.2.原理：
    自定义一个v-方法，将方法得到的值与用户信息中的按钮权限数组对比，不存在则无权限，通过el节点删除该按钮
```

#### 完成角色管理模块：
```
1.角色管理模块
    1.1.完成角色的增删改查功能
    1.2.新增role角色模块相关接口
    1.4.完成搜索与重置功能
    1.5.添加表格loading效果
    1.6.修复新增无法回到第一页BUG
    1.7.完成角色权限分配（涉及树形控件，数据递归）
```

#### 完成用户管理模块：
```
1.用户管理模块
    1.1.完成用户的增删改查功能
    1.2.新增acl用户模块相关接口
    1.3.完成角色分配功能，批量删除功能，复选框技巧
    1.4.完成搜索与重置功能
```

#### 完成SKU管理：
```
1.完成SKU模块
    1.1.封装分页器（如果接口返回为全部数据的情况才使用，详见sku页面代码）
    1.2.封装提示方法（utils中的notice，详见代码）
    1.3.完成sku数据展示、删除、详情查看功能（包含幻灯片展示）
    1.4.新增sku模块相关接口
```

#### 完成SPU管理：
```
1.完成SPU模块
    1.1.新增根据spu添加sku相关接口
    1.2.完成sku添加功能（包含数据收集整合处理技巧，详见代码）
    1.3.完成根据spu查看简单sku列表功能
```

#### 完成属性管理：
```
1.完善属性页面功能
    1.1.优化属性修改功能，减少一次网络请求
    1.2.解决Object.assign的浅拷贝问题:第二参数使用JSON.parse(JSON.stringfy(...))
    1.3.切换页面数据清空（利用onBeforeUnmount）
2.完成部分SPU管理页面
    2.1.完成SPU相关增删改查功能（除该页面中SKU的添加和查询）
    2.2.新增SPU相关接口
    2.3.通过父子组件通信实现组件切换及传值
    2.4.实现图片上传及对象键的替换（如el-upload中的file-list对象和接口需要的对象格式不同，详见SPU图片上传和提交的处理）
    2.5.若干实用功能及技巧，详见spu相关代码
```

#### 完成部分属性管理：
```
1.完成属性页面功能
    1.1.完成属性相关增删改查功能
    1.2.完成修改、添加页面的输入框编辑与查看功能
    1.3.三级分类重构为公共组件
    1.4.分类数据改用仓库存储
    1.5.新增属性相关接口及相关类型
```

#### 完成部分属性管理：
```
1.完成属性静态页面搭建（除添加修改页面）
    1.1.已经完成商品属性分类相关接口书写
    1.2.已经实现三级分类数据调用及渲染
```

#### 完成品牌管理：
```
1.实现品牌增删改查功能
    1.1.完成了品牌相关的接口及类型
    1.2.setting中新增了文件上传统一接口地址
    1.3.实现了品牌管理全部功能，包括表单校验，按钮禁用等
    1.4.优化了用户体验
```

#### 完成部分品牌管理：
```
1.实现品牌管理页面表格功能，分页功能
2.新增品牌相关接口
    2.1.接口文档缓存到本地，但需要修改下源码才能使用
    2.2.接口文档线上地址：
    商品相关：http://39.98.123.211:8510/swagger-ui.html
    用户相关：http://139.198.104.58:8212/swagger-ui.html
    另一个未知的商品相关：http://139.198.104.58:8209/swagger-ui.html
3.已将mock接口全部修改为真实接口
    3.1.修改了环境变量
    3.2.修复了真实接口下用户异常状态退出提示
    3.3.重写了接口文件，包括用户登录，注销，查询用户信息
    3.4.修改了仓库中请求方法以迎合真实接口
4.已配置代理解决跨域问题

todo:暂未实现增删改功能
```

#### 完成模板封装：
```
1.完整实现layout的搭建与功能实现
    1.1登录注销功能
    1.2顶部面包屑导航动态展示（包括刷新功能，全屏功能）
    1.3左侧菜单栏动态渲染
    1.4页面title动态展示
    1.5路由守卫实现的路由鉴权（包括来访页redirectUrl的设计，用户数据存储与展示，进度条功能）
2.修复BUG
    2.1修复控制台黄色警告内容（面包屑生成无效icon，登录页按钮的错误属性值）
```