# oldking-management-vue

**Repository Path**: xiaojing_90/oldking-management-vue

## Basic Information

- **Project Name**: oldking-management-vue
- **Description**: vite + vue3 + ts 后台管理平台
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-01-04
- **Last Updated**: 2025-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

- 2023-04-26
  - 使用`vite`构建了`vue`+`ts`+`sass`的后台管理项目，将从0开始写。
- 2023-04-28
  - 实现侧面菜单栏组件。
- 2023-05-02
  - 初步实现代码生成器页面，以及代码生成器配置页面，实现代码生成字段弹窗，但发现缺少字典选择以及字典映射的通用组件，计划实现一个。
- 2023-05-08
  - 实现了字典组件，目前仅支持单级模式，计划后续实现`dict-cascader`来进行作为级联选择。
- 2023-05-12
  - 实现页面缓存标签以及面包屑组件。
- 2023-05-15
  - 实现了整体布局配置以及三种布局模式，样式细节还需打磨。
  - 实现页面缓存标签右键菜单以及超出后滚动功能。
- 2023-11-05
  - 对移动端开始适配。
- 2024-01-15
  - 起初设计table-view组件时，我以为将全部的操作丢到组件由参数来控制会使得开发变的方便，代码变少，但随着场景不断增加，才发现这种模式会出现一个很大的弊端，就是不论怎么去增加参数，灵活度都还是很差，总有一个场景是加参数无法去解决的，所以我决定实现一个仅有表格区域的组件，改为传入列参数与与数据进行渲染，不去进行操作相关的组件。以sys-dict-data进行打样，后续代码生成器所生产代码按照这个页面为模板模板生成。

#### 踩坑小记

##### element-plus

1. ElForm组件使用resetFields方法时，记得给el-form-item组件props属性，不然无法reset。
2. ts指定类型时，尽量使用非原始的`object`类型来代替`Object`。
3. 页面组件尽可能仅有一个根节点，弹窗请放置到根节点之内。

##### flex

1. 父元素为flex时，当前元素设置了高度或宽度显示时如果出现偏差，加上`flex-shrink: 0;`，使得元素不缩小适应。

#### 开发规范

##### 按钮

1. 主要按钮放右边，次要按钮放左边。

#### 代码模板

##### 弹窗

1. 弹窗代码里(el-dialog|el-drawer 需要加上 @closed="closedHandle")

```typescript
const show = ref(props.modelValue);
watch(show, (n, o) => {
  if (n) {
      emit("update:modelValue", n);
  }
});
watch(() => props.modelValue, (n: boolean, o: boolean) => {
  show.value = n;
});

/**
* 关闭事件
* */
function close() {
  show.value = false;
}

/**
* 关闭后的钩子
* */
function closedHandle() {
  emit("update:modelValue", false);
}
```

关闭前询问

```typescript
/**
 * 关闭事件
 * */
function close(confirmClose: boolean = false) {
    if (confirmClose) {
        ElMessageBox.confirm("是否确认关闭弹窗？", "系统提示").then(() => {
            show.value = false;
        }).catch()
    } else {
        show.value = false
    }
}
```